From 8487571c3aab30b7409f8aa9df1941c77073cd08 Mon Sep 17 00:00:00 2001 From: wjn Date: Thu, 18 Jul 2024 10:25:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BI/BI014RiskPerformanceModel.js | 12 - .../BI/BI015TrainPerformanceModel.js | 2274 ----------------- 2 files changed, 2286 deletions(-) delete mode 100644 src/components/CustomPages/BI/BI015TrainPerformanceModel.js diff --git a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js index 8865877..45081d6 100644 --- a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js +++ b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js @@ -54,8 +54,6 @@ class BI014RiskPerformanceModel extends React.Component { this.chartCJ(ret?.Data.CHARTLIST[3]); this.chartZRDW(ret?.Data.CHARTLIST[2]); this.chartQY(ret?.Data.CHARTLIST[4]); - // this.chartZYRW1(ret?.Data.CHARTZYRW1); - // this.chartZYRW2(ret?.Data.CHARTZYRW2); }, }); }; @@ -113,11 +111,6 @@ class BI014RiskPerformanceModel extends React.Component { itemWidth: 10, itemHeight: 10, }, - // title: { - // text: "月度风险辨识统计走势", - // left: "center", - // top: "2%", - // }, tooltip: { trigger: "axis", axisPointer: { @@ -259,7 +252,6 @@ class BI014RiskPerformanceModel extends React.Component { tooltip: { trigger: "axis", axisPointer: { - // 坐标轴指示器，坐标轴触发有效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, }, @@ -375,10 +367,6 @@ class BI014RiskPerformanceModel extends React.Component { let myChart = echarts.init(chartFXLB1); myChart.setOption( { - // title: { - // text: "风险类别(等级)", - // left: "center", - // }, tooltip: { trigger: "axis", axisPointer: { diff --git a/src/components/CustomPages/BI/BI015TrainPerformanceModel.js b/src/components/CustomPages/BI/BI015TrainPerformanceModel.js deleted file mode 100644 index 2e140f0..0000000 --- a/src/components/CustomPages/BI/BI015TrainPerformanceModel.js +++ /dev/null @@ -1,2274 +0,0 @@ -import React, { useState, useEffect, useRef, Component } from "react"; -import { connect } from "dva"; -import { initFilter, extendOrder, guid } from "../../../utils/common"; -import { - Table, - Row, - Col, - Button, - Select, - DatePicker, - message, - Modal, -} from "antd"; -import echarts from "echarts"; -import moment from "moment"; -import IconFont from "../../../utils/iconFont"; -import { T } from "antd/lib/upload/utils"; -class BI014RiskPerformanceModel extends React.Component { - constructor(props) { - super(props); - this.state = { - level1Color: "#c02e30", - level2Color: "#f7aa52", - level3Color: "#fbe06a", - level4Color: "#5185f3", - isShow1: false, - isShow2: false, - detailForm: { - formCode: "", - title: "", - }, - ret: { - IsSuccessful: true, - Data: { - DATECOUNTS: [ - { DATE: "2024-01-31 23:59:59", COUNT: 50, TYPE: 1 }, - { DATE: "2024-01-31 23:59:59", COUNT: 414, TYPE: 0 }, - { DATE: "2024-02-29 23:59:59", COUNT: 62, TYPE: 1 }, - { DATE: "2024-02-29 23:59:59", COUNT: 514, TYPE: 0 }, - { DATE: "2024-03-31 23:59:59", COUNT: 62, TYPE: 1 }, - { DATE: "2024-03-31 23:59:59", COUNT: 614, TYPE: 0 }, - { DATE: "2024-04-30 23:59:59", COUNT: 70, TYPE: 1 }, - { DATE: "2024-04-30 23:59:59", COUNT: 714, TYPE: 0 }, - { DATE: "2024-05-31 23:59:59", COUNT: 80, TYPE: 1 }, - { DATE: "2024-05-31 23:59:59", COUNT: 814, TYPE: 0 }, - // { DATE: "2024-06-30 23:59:59", COUNT: 80, TYPE: 1 }, - // { DATE: "2024-06-30 23:59:59", COUNT: 914, TYPE: 0 }, - // { DATE: "2024-07-31 23:59:59", COUNT: 94, TYPE: 1 }, - // { DATE: "2024-07-31 23:59:59", COUNT: 954, TYPE: 0 }, - // { DATE: "2024-08-31 23:59:59", COUNT: 102, TYPE: 1 }, - // { DATE: "2024-08-31 23:59:59", COUNT: 984, TYPE: 0 }, - // { DATE: "2024-09-30 23:59:59", COUNT: 102, TYPE: 1 }, - // { DATE: "2024-09-30 23:59:59", COUNT: 1014, TYPE: 0 }, - // { DATE: "2024-10-31 23:59:59", COUNT: 112, TYPE: 1 }, - // { DATE: "2024-10-31 23:59:59", COUNT: 1024, TYPE: 0 }, - // { DATE: "2024-11-30 23:59:59", COUNT: 113, TYPE: 1 }, - // { DATE: "2024-11-30 23:59:59", COUNT: 1114, TYPE: 0 }, - // { DATE: "2024-12-31 23:59:59", COUNT: 116, TYPE: 1 }, - // { DATE: "2024-12-31 23:59:59", COUNT: 1154, TYPE: 0 }, - ], - CHARTFXDJ1: - { - NAME: ["一级", "二级", "三级", "四级"], - LEVEL1: [3, 8, 181, 1112], - } - , - CHARTFXDJ2: [ - { name: "一级", value: 3 }, - { name: "二级", value: 8 }, - { name: "三级", value: 181 }, - { name: "四级", value: 1112 }, - ], - CHARTLIST: [ - { - NAME: ["露天矿", "选矿厂", "尾矿库", "职能部门"], - LEVEL1: [1, 0, 1, 1], - LEVEL2: [0, 3, 2, 2], - LEVEL3: [1, 3, 70, 105], - LEVEL4: [203, 223, 211, 475], - }, - - { - NAME: [ - "容器爆炸", - "淹溺", - "物体打击", - "高处坠落", - "火灾", - "起重伤害", - "其他爆炸", - "中毒和窒息", - "放炮", - "冒顶片帮", - "坍塌", - "车辆伤害", - "触电", - "其他伤害", - "机械伤害", - "灼烫", - "火药爆炸", - ], - LEVEL1: [ - 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, - 0, 0, 0, 0, - ], - LEVEL2: [ - 3, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, - 0, 0, 0, 0, - ], - LEVEL3: [ - 95, 46, 15, 10, 7, 6, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0, 0 - ], - LEVEL4: [ - 260, 200, 120, 50, 20, 15, 10, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0 - ], - }, - - { - NAME: [ - "安全环保管理部", - "选矿部", - "机电设备管理办公室", - "矿山部", - "财务部", - "非金属资源部筹备组", - "企业管理部", - "技术管理部", - ], - LEVEL1: [0, 1, 0, 1, 0, 0, 1, 0], - LEVEL2: [0, 2, 0, 3, 0, 0, 1, 0], - LEVEL3: [56, 109, 273, 381, 74, 135, 215, 335], - LEVEL4: [23, 168, 250, 390, 62, 117, 244, 367], - }, - - { - NAME: ["公司", "部门", "车间", "班组"], - LEVEL1: [2, 1, 0, 0], - LEVEL2: [2, 2, 2, 2], - LEVEL3: [343, 121, 396, 78], - LEVEL4: [215, 331, 37, 292], - }, - { - NAME: [ - "破碎车间", - "磨重车间", - "尾矿库库区", - "钨细泥回收车间", - "高压配电室", - "炸药库区", - "修理场", - "矿山", - "加油站-采场", - "排土场", - ], - LEVEL1: [1, 0, 0, 1, 0, 1, 0, 0, 0, 0], - LEVEL2: [2, 0, 0, 2, 1, 1, 0, 0, 0, 2], - LEVEL3: [220, 182, 171, 164, 134, 120, 102, 101, 83, 64], - LEVEL4: [250, 212, 201, 154, 144, 121, 117, 111, 93, 67], - }, - ], - TEAMLIST: [ - { - NAME: ["生产班", "民爆储存库班组", "穿孔班组", "爆破班组", "综合班组"], - LEVEL1: [1, 0, 1, 1, 0], - LEVEL2: [0, 1, 1, 2, 0], - LEVEL3: [10, 13, 20, 35, 33], - LEVEL4: [18, 33, 43, 21, 27], - }, - { - NAME: ["破碎车间", "磨重车间", "破碎一班", "破碎二班", "破碎三班", "磨重一班", "磨重二班", "磨重三班"], - LEVEL1: [1, 3, 0, 0, 0, 0, 0, 0], - LEVEL2: [2, 4, 0, 0, 0, 0, 1, 1], - LEVEL3: [3, 5, 1, 3, 7, 22, 43, 1], - LEVEL4: [4, 6, 7, 26, 8, 18, 21, 24], - }, - { - NAME: ["尾矿一班", "尾矿二班", "尾矿三班", "尾矿机修班"], - LEVEL1: [0, 0, 0, 0], - LEVEL2: [0, 0, 0, 0], - LEVEL3: [1, 3, 70, 105], - LEVEL4: [23, 13, 21, 15], - }, - { - NAME: ["保安班", "小车班", "食堂", "化验班", "采制样班"], - LEVEL1: [0, 0, 0, 0, 0], - LEVEL2: [0, 0, 0, 0, 0], - LEVEL3: [1, 3, 70, 15, 23], - LEVEL4: [13, 14, 17, 28, 11], - }, - ], - AREALIST: [ - { - NAME: ["电焊作业区", "修理场", "炸药库", "矿山", "加油站-采场"], - LEVEL1: [1, 0, 1, 1, 0], - LEVEL2: [0, 1, 1, 2, 0], - LEVEL3: [10, 13, 20, 35, 33], - LEVEL4: [18, 33, 43, 21, 27], - }, - { - NAME: ["破碎车间", "磨重车间", "尾矿库库区", "钨细泥回收车间", "综合回收车间", "尾矿库截洪单元"], - LEVEL1: [0, 0, 0, 0, 0, 0], - LEVEL2: [0, 0, 0, 0, 1, 1], - LEVEL3: [1, 3, 7, 22, 43, 1], - LEVEL4: [7, 26, 8, 18, 21, 24], - }, - { - NAME: ["尾矿库库区", "高压配电室", "炸药库区", "尾矿机修区"], - LEVEL1: [0, 0, 0, 0], - LEVEL2: [0, 0, 0, 0], - LEVEL3: [1, 3, 70, 105], - LEVEL4: [23, 13, 21, 15], - }, - { - NAME: ["保安办公室", "停车场", "食堂", "化验室", "排土场"], - LEVEL1: [0, 0, 0, 0, 0], - LEVEL2: [0, 0, 0, 0, 0], - LEVEL3: [1, 3, 70, 15, 23], - LEVEL4: [13, 14, 17, 28, 11], - }, - ], - RISKTYPELIST: [ - { - NAME: ["容器爆炸", "淹溺", "物体打击", "高处坠落", "起重伤害", "其他爆炸", "冒顶片帮", "火药爆炸"], - LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0], - LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0], - LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7], - LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7] - }, - { - NAME: ["其他伤害", "机械伤害", "灼烫", "容器爆炸", "中毒和窒息", "起重伤害", "冒顶片帮", "触电"], - LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0], - LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0], - LEVEL3: [71, 66, 55, 49, 34, 28, 17, 8], - LEVEL4: [69, 64, 53, 47, 32, 26, 15, 6] - }, - { - NAME: ["其他伤害", "车辆伤害", "火药爆炸", "高处坠落", "坍塌", "触电", "机械伤害", "灼烫"], - LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0], - LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0], - LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7], - LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7] - }, - { - NAME: ["机械伤害", "容器爆炸", "物体打击", "高处坠落", "火灾", "其他爆炸", "中毒和窒息", "触电"], - LEVEL1: [0, 0, 0, 0, 0, 0, 0, 0], - LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0], - LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7], - LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7] - }, - ], - CHARTZYRW1: - { - NAME: ["许可作业", "关键任务", "一般任务"], - LEVEL1: [67, 81, 191], - } - , - CHARTZYRW2: [ - { name: "许可作业", value: 67 }, - { name: "关键任务", value: 81 }, - { name: "一般任务", value: 191 }, - ], - }, - TotalCount: 0, - MessageType: 0, - }, - }; - } - - componentDidMount() { - this.getBaseInfoData(); - } - - //获取数据 - getBaseInfoDataOnline = (mineType) => { - const json2 = initFilter(this.props.login.OrgId); - extendOrder(json2, "CREATE_TIME", 1); - json2.Parameter1 = mineType; - this.props.dispatch({ - type: "app/getDataByPost", - url: "BI/BIController/getRiskPerformanceData", - payload: json2, - onlyData: false, - onComplete: (ret) => { - this.chart4(ret?.Data.DATECOUNTS); - this.chartFXDJ1(ret?.Data.CHARTFXDJ1); - this.chartFXDJ2(ret?.Data.CHARTFXDJ2); - this.chartSCDY(ret?.Data.CHARTLIST[0]); - this.chartFXLB1(ret?.Data.CHARTLIST[1]); - this.chartZRDW(ret?.Data.CHARTLIST[2]); - this.chartCJ(ret?.Data.CHARTLIST[3]); - this.chartZYRW1(this.state.ret.Data.CHARTZYRW1); - this.chartZYRW2(this.state.ret.Data.CHARTZYRW2); - }, - }); - }; - getBaseInfoData = (mineType) => { - this.chart4(this.state.ret.Data.DATECOUNTS); - this.chartFXDJ1(this.state.ret.Data.CHARTFXDJ1); - this.chartFXDJ2(this.state.ret.Data.CHARTFXDJ2); - this.chartSCDY(this.state.ret.Data.CHARTLIST[0]); - this.chartFXLB1(this.state.ret.Data.CHARTLIST[1]); - this.chartCJ(this.state.ret.Data.CHARTLIST[3]); - this.chartZRDW(this.state.ret.Data.CHARTLIST[2]); - this.chartQY(this.state.ret.Data.CHARTLIST[4]); - this.chartZYRW1(this.state.ret.Data.CHARTZYRW1); - this.chartZYRW2(this.state.ret.Data.CHARTZYRW2); - }; - chart4 = (data) => { - let riskArr = []; - let hazardArr = []; - let dates = []; - for (let i = 0; i < data.length; i++) { - if (data[i].TYPE == 0) { - riskArr.push(data[i].COUNT); - dates.push(moment(data[i].DATE).format("MM")); - } else { - hazardArr.push(data[i].COUNT); - } - } - let currMonth = dates.length; - let color = [ - "#0090FF", - "#36CE9E", - "#FFC005", - "#FF515A", - "#8B5CFF", - "#00CA69", - ]; - const hexToRgba = (hex, opacity) => { - let rgbaColor = ""; - let reg = /^#[\da-f]{6}$/i; - if (reg.test(hex)) { - rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt( - "0x" + hex.slice(3, 5) - )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`; - } - return rgbaColor; - }; - for (let i = 1; i < 13 - currMonth; i++) { - dates.push(moment(dates[dates.length]).add(i, "months").format("MM")); - } - let chart4s = document.getElementById("chart4"); - if (chart4s) { - let myChart = echarts.init(chart4s); - myChart.setOption( - { - color: color, - grid: { - left: "10%", - right: "5%", - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - }, - // title: { - // text: "月度风险辨识统计走势", - // left: "center", - // top: "2%", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", - }, - }, - xAxis: { - type: "category", - data: dates, - boundaryGap: false, - axisLabel: { - formatter: "{value}月", - textStyle: { - color: "#333", - }, - }, - axisLine: { - lineStyle: { - color: "#D9D9D9", - }, - }, - }, - yAxis: { - type: "value", - axisLabel: { - textStyle: { - color: "#666", - }, - }, - nameTextStyle: { - color: "#666", - fontSize: 12, - lineHeight: 40, - }, - splitLine: { - lineStyle: { - type: "dashed", - color: "#E9E9E9", - }, - }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - }, - series: [ - { - name: "危险源/风险库", - data: riskArr, - type: "line", - smooth: true, - symbolSize: 8, - zlevel: 3, - lineStyle: { - normal: { - color: color[0], - shadowBlur: 3, - shadowColor: hexToRgba(color[0], 0.5), - shadowOffsetY: 8, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: hexToRgba(color[0], 0.3), - }, - { - offset: 1, - color: hexToRgba(color[0], 0.1), - }, - ], - false - ), - shadowColor: hexToRgba(color[0], 0.1), - shadowBlur: 10, - }, - }, - }, - { - name: "职业危害库", - data: hazardArr, - type: "line", - smooth: true, - symbolSize: 8, - zlevel: 3, - lineStyle: { - normal: { - color: color[1], - shadowBlur: 3, - shadowColor: hexToRgba(color[1], 0.5), - shadowOffsetY: 8, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: hexToRgba(color[1], 0.3), - }, - { - offset: 1, - color: hexToRgba(color[1], 0.1), - }, - ], - false - ), - shadowColor: hexToRgba(color[1], 0.1), - shadowBlur: 10, - }, - }, - }, - ], - }, - true - ); - } - }; - chartFXDJ1 = (Data) => { - let chartFXDJ1 = document.getElementById("chartFXDJ1"); - if (chartFXDJ1) { - let myChart = echarts.init(chartFXDJ1); - myChart.setOption( - { - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - grid: { - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { - color: function (params) { - switch (params.dataIndex) { - case 0: - return "#c02e30"; // 第一个柱子颜色 - case 1: - return "#f7aa52"; // 第二个柱子颜色 - case 2: - return "#fbe06a"; // 第三个柱子颜色 - case 3: - return "#5185f3"; // 第四个柱子颜色 - } - } - }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - } - }; - chartFXDJ2 = (Data) => { - let that = this; - let chartFXDJ2 = document.getElementById("chartFXDJ2"); - if (chartFXDJ2) { - let myChart = echarts.init(chartFXDJ2); - myChart.setOption( - { - tooltip: { - trigger: "item", - formatter: "{b} : ({d}%)", - }, - legend: { - left: "0%", - bottom: "10%", - data: ["一级", "二级", "三级", "四级"], - }, - series: [ - { - type: "pie", - radius: '55%', - center: ["50%", "45%"], - data: Data, - itemStyle: { - color: function (params) { - switch (params.dataIndex) { - case 0: - return "#c02e30"; // 第一个柱子颜色 - case 1: - return "#f7aa52"; // 第二个柱子颜色 - case 2: - return "#fbe06a"; // 第三个柱子颜色 - case 3: - return "#5185f3"; // 第四个柱子颜色 - } - } - }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - }, - label: { - show: true, // 开启标签显示 - formatter: '{d}%', // 格式化标签文本，仅显示数值 - }, - }, - ], - }, - true - ); - } - }; - chartSCDY = (Data) => { - let chartSCDY = document.getElementById("chartSCDY"); - let myChart = echarts.init(chartSCDY); - myChart.setOption( - { - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - - }, - { - barWidth: 20, - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - }; - - chartFXLB1 = (Data) => { - let chartFXLB1 = document.getElementById("chartFXLB1"); - let myChart = echarts.init(chartFXLB1); - myChart.setOption( - { - // title: { - // text: "风险类别(等级)", - // left: "center", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["露天矿", "选矿厂", "尾矿库", "职能部门"], - }, - grid: { - left: "3%", - right: "5%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: { - type: "category", - data: Data.NAME.slice(0, 10), - axisLabel: { - interval: 0, - rotate: 20, - formatter: function (value) { - return value - } - } - }, - yAxis: { - type: "value", - }, - series: [ - { - barWidth: 20, - name: "露天矿", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL3.slice(0, 10), - itemStyle: { color: this.state.level3Color }, - }, - { - barWidth: 20, - name: "选矿厂", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL1.slice(0, 10), - itemStyle: { color: this.state.level1Color }, - }, - { - barWidth: 20, - name: "尾矿库", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL2.slice(0, 10), - itemStyle: { color: this.state.level2Color }, - }, - { - barWidth: 20, - name: "职能部门", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL4.slice(0, 10), - itemStyle: { color: this.state.level4Color }, - }, - ], - }, - true - ); - }; - chartZRDW = (Data) => { - let chartZRDW = document.getElementById("chartZRDW"); - if (chartZRDW) { - let myChart = echarts.init(chartZRDW); - myChart.setOption( - { - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - axisLabel: { - interval: 0, - rotate: 20, - formatter: function (value) { - return value; - }, - }, - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - label: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - { - barWidth: 20, - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - label: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - { - barWidth: 20, - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - label: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - { - barWidth: 20, - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - label: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - ], - }, - true - ); - } - }; - chartCJ = (Data) => { - let chartCJ = document.getElementById("chartCJ"); - if (chartCJ) { - let myChart = echarts.init(chartCJ); - myChart.setOption( - { - // title: { - // text: "层级（等级）", - // left: "center", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - } - }; - chartQY = (Data) => { - let chartQY = document.getElementById("chartQY"); - if (chartQY) { - let myChart = echarts.init(chartQY); - myChart.setOption( - { - // title: { - // text: "区域(生产单元+等级)", - // left: "center", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: { - type: "category", - data: Data.NAME, - axisLabel: { - interval: 0, - rotate: 20, - formatter: function (value) { - return value - } - } - }, - yAxis: { - type: "value", - }, - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - }, - { - barWidth: 20, - name: "二级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - }, - { - barWidth: 20, - name: "三级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - }, - { - barWidth: 20, - name: "四级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - }, - ], - }, - true - ); - } - }; - chartZYRW1 = (Data) => { - let chartZYRW1 = document.getElementById("chartZYRW1"); - if (chartZYRW1) { - let myChart = echarts.init(chartZYRW1); - myChart.setOption( - { - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - grid: { - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { - color: function (params) { - switch (params.dataIndex) { - case 0: - return "#f7aa52"; // 第一个柱子颜色 - case 1: - return "#fbe06a"; // 第二个柱子颜色 - case 2: - return "#5185f3"; // 第三个柱子颜色 - } - } - }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - } - }; - chartZYRW2 = (Data) => { - let that = this; - let chartZYRW2 = document.getElementById("chartZYRW2"); - if (chartZYRW2) { - let myChart = echarts.init(chartZYRW2); - myChart.setOption( - { - tooltip: { - trigger: "item", - formatter: "{b} : ({d}%)", - }, - legend: { - left: "0%", - bottom: "10%", - data: ["许可作业", "关键任务", "一般任务"], - }, - series: [ - { - type: "pie", - radius: '55%', - center: ["50%", "45%"], - data: Data, - itemStyle: { - color: function (params) { - switch (params.dataIndex) { - case 0: - return "#f7aa52"; // 第一个柱子颜色 - case 1: - return "#fbe06a"; // 第二个柱子颜色 - case 2: - return "#5185f3"; // 第三个柱子颜色 - } - } - }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - }, - label: { - show: true, // 开启标签显示 - formatter: '{d}%', // 格式化标签文本，仅显示数值 - }, - }, - ], - }, - true - ); - } - }; - subtractRandomNotLessThanSelf = (obj) => { - function getRandomNotLessThan(num) { - return Math.floor(Math.random() * num); - } - for (let key in obj) { - if (Array.isArray(obj[key])) { - obj[key] = obj[key].map((number) => { - if (typeof number === "number") { - const randomSubtraction = getRandomNotLessThan(number); - return Math.floor(number - randomSubtraction); // 确保结果也为整数 - } else { - return number; - } - }); - } - } - return obj; - }; - chart21 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => { - let chart21s = document.getElementById("chart21"); - if (chart21s) { - let myChart = echarts.init(chart21s); - myChart.setOption( - { - title: { - text: Title, - left: "center", - }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - axisLabel: { - interval: 0, - rotate: 30, - formatter: function (value) { - return value - } - } - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - stack: Stack1, - itemStyle: { color: this.state.level1Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "二级", - type: "bar", - data: Data.LEVEL2, - stack: Stack2, - itemStyle: { color: this.state.level2Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "三级", - type: "bar", - data: Data.LEVEL3, - stack: Stack3, - itemStyle: { color: this.state.level3Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "四级", - type: "bar", - data: Data.LEVEL4, - stack: Stack4, - itemStyle: { color: this.state.level4Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - } - }; - chart22 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => { - let chart22s = document.getElementById("chart22"); - if (chart22s) { - let myChart = echarts.init(chart22s); - myChart.setOption( - { - title: { - text: Title, - left: "center", - }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - axisLabel: { - interval: 0, - rotate: 30, - formatter: function (value) { - return value - } - } - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - stack: Stack1, - itemStyle: { color: this.state.level1Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - - }, - { - barWidth: 20, - name: "二级", - type: "bar", - data: Data.LEVEL2, - stack: Stack2, - itemStyle: { color: this.state.level2Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "三级", - type: "bar", - data: Data.LEVEL3, - stack: Stack3, - itemStyle: { color: this.state.level3Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "四级", - type: "bar", - data: Data.LEVEL4, - stack: Stack4, - itemStyle: { color: this.state.level4Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - } - }; - chart23 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => { - let chart23s = document.getElementById("chart23"); - if (chart23s) { - let myChart = echarts.init(chart23s); - myChart.setOption( - { - title: { - text: Title, - left: "center", - }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - axisLabel: { - interval: 0, - rotate: 30, - formatter: function (value) { - return value - } - } - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - stack: Stack1, - itemStyle: { color: this.state.level1Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - - }, - { - barWidth: 20, - name: "二级", - type: "bar", - data: Data.LEVEL2, - stack: Stack2, - itemStyle: { color: this.state.level2Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "三级", - type: "bar", - data: Data.LEVEL3, - stack: Stack3, - itemStyle: { color: this.state.level3Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "四级", - type: "bar", - data: Data.LEVEL4, - stack: Stack4, - itemStyle: { color: this.state.level4Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - } - }; - chart24 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => { - let chart24s = document.getElementById("chart24"); - if (chart24s) { - let myChart = echarts.init(chart24s); - myChart.setOption( - { - title: { - text: Title, - left: "center", - }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - axisLabel: { - interval: 0, - rotate: 30, - formatter: function (value) { - return value - } - } - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - barWidth: 20, - name: "一级", - type: "bar", - data: Data.LEVEL1, - stack: Stack1, - itemStyle: { color: this.state.level1Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - - }, - { - barWidth: 20, - name: "二级", - type: "bar", - data: Data.LEVEL2, - stack: Stack2, - itemStyle: { color: this.state.level2Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "三级", - type: "bar", - data: Data.LEVEL3, - stack: Stack3, - itemStyle: { color: this.state.level3Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - barWidth: 20, - name: "四级", - type: "bar", - data: Data.LEVEL4, - stack: Stack4, - itemStyle: { color: this.state.level4Color }, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - } - }; - chart25 = (Data, Title) => { - let chart25s = document.getElementById("chart25"); - if (chart25s) { - let myChart = echarts.init(chart25s); - myChart.setOption( - { - // title: { - // text: Title, - // left: "center", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: Data.NAME, - axisLabel: { - interval: 0, - rotate: 20, - formatter: function (value) { - return value - } - } - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - stack: "总量", - barWidth: 20, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - stack: "总量", - barWidth: 20, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - stack: "总量", - barWidth: 20, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - { - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - stack: "总量", - barWidth: 20, - label: { - normal: { - show: true, - position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 - formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 - textStyle: { - fontSize: 12, // 字体大小 - color: '#333', // 字体颜色 - }, - }, - }, - }, - ], - }, - true - ); - } - }; - //显示详情弹窗 - showDetailModal = (formCode) => { - var titleTemp = - this.state.mineType == 20 - ? "尾矿库" - : this.state.mineType == 10 - ? "选矿厂" - : "露天矿"; - if (formCode == "风险类别1") { - titleTemp += "风险类别"; - this.chart25(this.state.ret.Data.CHARTLIST[1]); - this.setState({ isShow2: true }) - } else if (formCode == "风险类别2") { - titleTemp += "风险类别"; - this.chart21(this.state.ret.Data.RISKTYPELIST[0], "露天矿", "1", "1", "1", "1"); - this.chart22(this.state.ret.Data.RISKTYPELIST[1], "选矿厂", "1", "1", "1", "1"); - this.chart23(this.state.ret.Data.RISKTYPELIST[2], "尾矿库", "1", "1", "1", "1"); - this.chart24(this.state.ret.Data.RISKTYPELIST[3], "职能部门", "1", "1", "1", "1"); - this.setState({ isShow1: true }) - } - else if (formCode == "生产单元") { - this.setState({ isShow1: true }) - titleTemp += "生产单元"; - this.chart21(this.state.ret.Data.CHARTLIST[3], "露天矿", "1", "2", "3", "4"); - this.chart22(this.state.ret.Data.CHARTLIST[3], "选矿厂", "1", "2", "3", "4"); - this.chart23(this.state.ret.Data.CHARTLIST[3], "尾矿库", "1", "2", "3", "4"); - this.chart24(this.state.ret.Data.CHARTLIST[3], "职能部门", "1", "2", "3", "4"); - } else if (formCode == "层级") { - this.setState({ isShow1: true }) - titleTemp += "层级"; - this.chart21(this.state.ret.Data.CHARTLIST[0], "公司", "1", "2", "3", "4"); - this.chart22(this.state.ret.Data.CHARTLIST[0], "部门", "1", "2", "3", "4"); - this.chart23(this.state.ret.Data.CHARTLIST[0], "车间", "1", "2", "3", "4"); - this.chart24(this.state.ret.Data.CHARTLIST[0], "班组", "1", "2", "3", "4"); - } else if (formCode == "责任单位") { - this.setState({ isShow1: true }) - titleTemp += "责任单位"; - this.chart21(this.state.ret.Data.TEAMLIST[0], "露天矿", "1", "1", "1", "1"); - this.chart22(this.state.ret.Data.TEAMLIST[1], "选矿厂", "1", "1", "1", "1"); - this.chart23(this.state.ret.Data.TEAMLIST[2], "尾矿库", "1", "1", "1", "1"); - this.chart24(this.state.ret.Data.TEAMLIST[3], "职能部门", "1", "1", "1", "1"); - } else if (formCode == "区域") { - this.setState({ isShow1: true }) - titleTemp += "区域"; - this.chart21(this.state.ret.Data.AREALIST[0], "露天矿", "1", "1", "1", "1"); - this.chart22(this.state.ret.Data.AREALIST[1], "选矿厂", "1", "1", "1", "1"); - this.chart23(this.state.ret.Data.AREALIST[2], "尾矿库", "1", "1", "1", "1"); - this.chart24(this.state.ret.Data.AREALIST[3], "职能部门", "1", "1", "1", "1"); - } - - const newtmpData = { - data: { - id: guid(), - mineType: this.state.mineType, - onCancel: this.handleCancel, - homeReload: true, - }, - formCode: formCode, - }; - this.setState({ tmpData: newtmpData }, () => { - var detailForm = { - formCode: formCode, - title: titleTemp, - }; - this.setState({ - detailForm: detailForm, - }); - }); - }; - //详情弹窗关闭（隐藏） - detailFormClose = () => { - var detailForm = { - formCode: "", - title: "", - }; - this.setState({ - isShow1: false, - isShow2: false, - detailForm: detailForm, - }); - }; - - render() { - return ( -
-
- - - -
-
- - -
-
- - - - -
- -
- - - -
-
-
-
风险等级
-
-
-
-
- - - -
-
-
-
月度风险辨识统计走势
-
-
-
- - - - - - -
-
-
-
生产单元
-
-
this.showDetailModal("生产单元")}> - -
-
-
- - - -
-
-
-
层级
-
-
this.showDetailModal("层级")}> - -
-
-
-
-
- - - - - -
-
-
-
责任单位
-
-
this.showDetailModal("责任单位")}> - -
-
-
-
-
- - - -
-
-
-
区域
-
-
this.showDetailModal("区域")}> - -
-
-
- - - - - - -
-
-
-
风险类别
-
-
this.showDetailModal("风险类别2")}> - -
-
-
-
-
- - - -
-
-
-
作业任务
-
-
-
-
- - - -
-
- ); - } -} -export default connect(({ login, app }) => ({ login, app }))( - BI014RiskPerformanceModel -);