From c822ce9f5914c5a91a122fedd364346184f5a5ed Mon Sep 17 00:00:00 2001 From: wjn Date: Mon, 1 Apr 2024 14:05:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A3=8E=E9=99=A9=E7=BB=A9?= =?UTF-8?q?=E6=95=88=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomPages/BI/BI013RiskAnalysisModel.js | 2087 +++++------------ .../BI/BI014RiskPerformanceModel.js | 1716 ++++++++++++++ src/utils/customConfig.js | 5 + 3 files changed, 2297 insertions(+), 1511 deletions(-) create mode 100644 src/components/CustomPages/BI/BI014RiskPerformanceModel.js diff --git a/src/components/CustomPages/BI/BI013RiskAnalysisModel.js b/src/components/CustomPages/BI/BI013RiskAnalysisModel.js index 669b276..4eccf96 100644 --- a/src/components/CustomPages/BI/BI013RiskAnalysisModel.js +++ b/src/components/CustomPages/BI/BI013RiskAnalysisModel.js @@ -1,277 +1,336 @@ 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"; + initFilter, + addRuleAndGroups, + guid, + extendInclude, + extendRule, + extendOrder, + extend, + initQueryFilter, +} from "../../../utils/common"; +import { Table, Row, Col, Button, Select, DatePicker, message } from "antd"; import echarts from "echarts"; import moment from "moment"; -import IconFont from "../../../utils/iconFont"; class BI013RiskAnalysisModel extends React.Component { constructor(props) { super(props); this.state = { - choose: 1, - chooseTwo: 1, - chooseThree: 1, - level1Color: "#c02e30", - level2Color: "#f7aa52", - level3Color: "#fbe06a", - level4Color: "#5185f3", - detailForm: { - isShow: false, - 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 }, - ], - CHART11: [ - { name: "一级", value: 39 }, - { name: "二级", value: 82 }, - { name: "三级", value: 381 }, - { name: "四级", value: 812 }, - ], - CHARTLIST: [ - { - NAME: ["选矿厂", "尾矿库", "露天矿"], - LEVEL1: [137, 190, 168], - LEVEL2: [251, 231, 242], - LEVEL3: [365, 346, 370], - LEVEL4: [437, 497, 478], - }, - - { - NAME: [ - "容器爆炸", - "淹溺", - "物体打击", - "高处坠落", - "火灾", - "起重伤害", - "其他爆炸", - "中毒和窒息", - "放炮", - "冒顶片帮", - "坍塌", - "车辆伤害", - "触电", - "其他伤害", - "机械伤害", - "灼烫", - "火药爆炸", - ], - LEVEL1: [ - 398, 395, 389, 372, 356, 343, 328, 315, 299, 286, 272, 261, 247, - 235, 223, 199, 184, - ], - LEVEL2: [ - 137, 145, 152, 161, 173, 186, 191, 203, 218, 229, 241, 260, 277, - 293, 306, 321, 375, - ], - LEVEL3: [ - 37, 56, 72, 89, 104, 127, 143, 158, 175, 191, 206, 227, 251, - 273, 294, 320, 385, - ], - LEVEL4: [ - 25, 37, 50, 62, 75, 88, 101, 119, 133, 147, 161, 178, 194, 211, - 230, 255, 392, - ], - }, - - { - NAME: [ - "生产一班", - "选矿部", - "机电设备管理办公室", - "矿山部", - "财务部", - "办公室", - "非金属资源部筹备组", - "企业管理部", - "技术管理部", - "营销部", - ], - LEVEL1: [35, 121, 227, 330, 97, 153, 178, 212, 25, 301], - LEVEL2: [39, 151, 202, 322, 45, 187, 239, 308, 112, 376], - LEVEL3: [56, 109, 273, 381, 74, 135, 215, 296, 123, 335], - LEVEL4: [23, 168, 250, 390, 62, 117, 244, 313, 89, 367], - }, - - { - NAME: ["部门", "车间", "班组", "公司"], - LEVEL1: [75, 119, 25, 392], - LEVEL2: [307, 102, 235, 18], - LEVEL3: [343, 121, 396, 78], - LEVEL4: [215, 331, 37, 292], - }, - - { - NAME: [ - "容器爆炸", - "淹溺", - "物体打击", - "高处坠落", - "火灾", - "起重伤害", - "其他爆炸", - "中毒和窒息", - "放炮", - "冒顶片帮", - "坍塌", - "车辆伤害", - "触电", - "其他伤害", - "机械伤害", - "灼烫", - "火药爆炸", - ], - LEVEL1: [ - 95, 122, 217, 78, 254, 153, 26, 192, 239, 170, 103, 145, 278, - 212, 55, 189, 287, - ], - LEVEL2: [ - 221, 135, 110, 243, 150, 199, 273, 148, 17, 290, 228, 201, 184, - 92, 165, 106, 133, - ], - LEVEL3: [ - 300, 23, 187, 86, 111, 250, 248, 137, 157, 260, 298, 53, 100, - 129, 175, 142, 285, - ], - LEVEL4: [ - 204, 162, 223, 291, 197, 109, 42, 274, 171, 118, 138, 232, 252, - 167, 255, 124, 2, - ], - }, - - { - NAME: ["部门", "车间", "班组", "公司"], - LEVEL1: [153, 124, 178, 190], - LEVEL2: [105, 132, 27, 185], - LEVEL3: [200, 14, 56, 139], - LEVEL4: [37, 176, 150, 120], - }, - - { - NAME: [ - "生产一班", - "选矿部", - "机电设备管理办公室", - "矿山部", - "财务部", - "办公室", - "非金属资源部筹备组", - "企业管理部", - "技术管理部", - "营销部", - ], - LEVEL1: [187, 152, 113, 199, 75, 141, 102, 34, 160, 128], - LEVEL2: [135, 194, 86, 162, 107, 43, 173, 155, 118, 181], - LEVEL3: [110, 131, 197, 27, 92, 150, 170, 180, 12, 178], - LEVEL4: [56, 183, 100, 125, 190, 171, 89, 140, 161, 137], - }, - - { - NAME: [ - "破碎车间-粗碎单元", - "机电设备管理科作业区", - "高压配电室", - "电焊作业区", - "采场", - "破碎车间", - "尾矿库截洪单元", - "尾矿库库坝单元", - "磨重车间-细粒选别单元", - "钨细泥回收车间-排尾单元", - ], - LEVEL1: [320, 302, 301, 334, 320, 302, 301, 33, 67, 89], - LEVEL2: [120, 132, 101, 134, 334, 320, 302, 301, 33, 67], - LEVEL3: [220, 182, 191, 234, 334, 320, 302, 301, 33, 67], - LEVEL4: [150, 212, 201, 154, 334, 320, 302, 301, 33, 67], - }, - ], - }, - TotalCount: 0, - MessageType: 0, - }, + pagination: {}, + retData: [], + LEVEL1TOTAL: 0, + LEVEL2TOTAL: 0, + LEVEL3TOTAL: 0, + LEVEL4TOTAL: 0, + HAZARDTOTALCOUNT: 0, + RISKTOTALCOUNT: 0, + MEASURESTOTALCOUNT: 0, }; } componentDidMount() { - this.getBaseInfoData(); + let currentMineType = ""; + if (this.props.formParam != undefined || this.props.formParam != null) { + currentMineType = this.props.formParam.type; + } else { + currentMineType = localStorage.getItem("currentMineType"); + } + this.getBaseInfoData(currentMineType); } //获取数据 - getBaseInfoDataOnline = (mineType) => { + getBaseInfoData = (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", + url: "BI/BIController/getRiskData", payload: json2, onlyData: false, onComplete: (ret) => { + if (ret) { + this.state.retData = ret?.Data.RISKLEVELCOUNTS; + let level1all = 0; + let level2all = 0; + let level3all = 0; + let level4all = 0; + for (let i = 0; i < ret.Data.RISKLEVELCOUNTS.length; i++) { + level1all += ret.Data.RISKLEVELCOUNTS[i].LEVEL1; + level2all += ret.Data.RISKLEVELCOUNTS[i].LEVEL2; + level3all += ret.Data.RISKLEVELCOUNTS[i].LEVEL3; + level4all += ret.Data.RISKLEVELCOUNTS[i].LEVEL4; + } + this.setState({ + LEVEL1TOTAL: level1all, + LEVEL2TOTAL: level2all, + LEVEL3TOTAL: level3all, + LEVEL4TOTAL: level4all, + HAZARDTOTALCOUNT: ret.Data.HAZARDTOTALCOUNT, + RISKTOTALCOUNT: ret.Data.RISKTOTALCOUNT, + MEASURESTOTALCOUNT: ret.Data.MEASURESTOTALCOUNT, + }); + // this.state.LEVEL1TOTAL = level1all; + // this.state.LEVEL2TOTAL = level2all; + // this.state.LEVEL3TOTAL = level3all; + // this.state.LEVEL4TOTAL = level4all; + // this.state.HAZARDTOTALCOUNT = ret.Data.HAZARDTOTALCOUNT; + // this.state.RISKTOTALCOUNT = ret.Data.RISKTOTALCOUNT; + // this.state.MEASURESTOTALCOUNT = ret.Data.MEASURESTOTALCOUNT; + } + this.chart1(); + this.chart2(ret?.Data.AREACOUNTS.slice(0, 20)); this.chart4(ret?.Data.DATECOUNTS); - this.chart11(ret?.Data.CHART11); - this.chart12(ret?.Data.CHARTLIST[0]); - this.chart13(ret?.Data.CHARTLIST[1]); - this.chart14(ret?.Data.CHARTLIST[2]); - this.chart15(ret?.Data.CHARTLIST[3]); - - this.chart16(ret?.Data.CHARTLIST[4]); - this.chart17(ret?.Data.CHARTLIST[5]); - this.chart18(ret?.Data.CHARTLIST[6]); - this.chart19(ret?.Data.CHARTLIST[7]); }, }); }; - getBaseInfoData = (mineType) => { - this.chart4(this.state.ret.Data.DATECOUNTS); - this.chart11(this.state.ret.Data.CHART11); - this.chart12(this.state.ret.Data.CHARTLIST[0]); - this.chart13(this.state.ret.Data.CHARTLIST[1]); - this.chart14(this.state.ret.Data.CHARTLIST[2]); - this.chart15(this.state.ret.Data.CHARTLIST[3]); + chart1 = () => { + let showData = []; + let color = []; + let allNum = 0; + showData.push({ value: this.state.LEVEL1TOTAL, name: "一级" }); + showData.push({ value: this.state.LEVEL2TOTAL, name: "二级" }); + showData.push({ value: this.state.LEVEL3TOTAL, name: "三级" }); + showData.push({ value: this.state.LEVEL4TOTAL, name: "四级" }); + showData.map((item) => { + if (item.name === "一级") { + color.push("#c92a2a"); + } else if (item.name === "二级") { + color.push("#ffa94d"); + } else if (item.name === "三级") { + color.push("#ffe066"); + } else if (item.name === "四级") { + color.push("#4285F4"); + } + allNum = allNum + item.value; + }); - this.chart16(this.state.ret.Data.CHARTLIST[4]); - this.chart17(this.state.ret.Data.CHARTLIST[5]); - this.chart18(this.state.ret.Data.CHARTLIST[6]); - this.chart19(this.state.ret.Data.CHARTLIST[7]); + let chart1s = document.getElementById("chartone"); + let myChart = echarts.init(chart1s); + myChart.setOption({ + color: color, + title: [ + { + text: "风险分级占比1", + left: "center", + top: "2%", + }, + { + text: allNum, + x: "26%", + y: "center", + textStyle: { + fontSize: 26, + fontWeight: "normal", + color: ["#333"], + }, + }, + ], + tooltip: { + trigger: "item", + formatter: "{b}:({d}%)", + }, + legend: { + orient: "vartical", + x: "left", + top: "35%", + left: "65%", + bottom: "0%", + data: showData, + // itemWidth: 20, + // itemHeight: 14, + // itemGap :15, + formatter: function (name) { + //通过name获取到数组对象中的单个对象 + let singleData = showData.filter(function (item) { + return item.name == name; + }); + let countAll = 0; + showData.map((item) => { + countAll = countAll + item.value; + }); + + return ( + name + + " | " + + singleData[0].value + + " | " + + Number((singleData[0].value / countAll) * 100).toFixed(2) + + "%" + ); + }, + }, + grid: { + left: 30, + containLabel: true, + bottom: 10, + top: 10, + right: 30, + }, + series: [ + { + name: "访问来源", + type: "pie", + clockwise: false, + // minAngle: 20, + avoidLabelOverlap: false, + radius: ["45%", "65%"], + center: ["30%", "50%"], + itemStyle: { + //图形样式 + normal: { + borderColor: "#ffffff", + borderWidth: 1, + padding: "0 20px", + }, + }, + label: { + show: false, + }, + // color: color, + data: showData, + }, + ], + }, true); }; + chart2 = (data) => { + let areaName = []; + let areaCount = []; + data.forEach((item) => { + areaName.push(item.AREANAME); + areaCount.push(item.AREACOUNT); + }); + let chart2s = document.getElementById("chart2"); + if (chart2s) { + let myChart = echarts.init(chart2s); + myChart.setOption({ + title: { + text: "风险区域统计", + left: "center", + top: "2%", + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + }, + grid: { + left: "3%", + right: "4%", + top: "10%", + bottom: "1%", + containLabel: true, + }, + xAxis: { + show: false, + }, + yAxis: [ + { + triggerEvent: true, + show: true, + inverse: false, + data: areaName, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#666", + align: "right", + margin: 20, + fontSize: 13, + + rich: { + idx0: { + color: "#FB375E", + backgroundColor: "#FFE8EC", + borderRadius: 100, + padding: [5, 8], + }, + idx1: { + color: "#FF9023", + backgroundColor: "#FFEACF", + borderRadius: 100, + padding: [5, 8], + }, + idx2: { + color: "#01B599", + backgroundColor: "#E1F7F3", + borderRadius: 100, + padding: [5, 8], + }, + idx: { + color: "#333", + borderRadius: 100, + padding: [5, 8], + }, + title: { + width: 165, + }, + }, + }, + }, + { + triggerEvent: true, + show: true, + inverse: false, + data: areaCount, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#666", + align: "left", + margin: 20, + fontSize: 12, + }, + }, + ], + series: [ + { + name: "数量", + type: "bar", + // label: { + // show: true, + // position: "insideRight", + // color: "#fff", + // formatter: "{c}", + // fontSize: "12", + // }, + barWidth: 10, + itemStyle: { + color: "#1990FF", + barBorderRadius: 30, + }, + // itemStyle: { + // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + // { offset: 0, color: "#01AEF6" }, + // { offset: 1, color: "#9999FF" }, + // ]), + // }, + data: areaCount, + show: false, + }, + ], + }, true); + } + }; + chart4 = (data) => { let riskArr = []; let hazardArr = []; @@ -279,1326 +338,332 @@ class BI013RiskAnalysisModel extends React.Component { 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")); + dates.push(moment(data[i].DATE).format("YYYY/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")); + dates.push( + moment(dates[dates.length]).add(i, "months").format("YYYY/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, - }, - }, - }, - ], + myChart.setOption({ + color: ["#72b85b", "#f6841a", "#cc0404"], + grid: { + left: "5%", + right: "5%", }, - true - ); - } - }; - chart11 = (Data) => { - let that = this; - let chart11s = document.getElementById("chart11"); - Data.forEach((item) => { - if (item.name == "一级") { - item.itemStyle = { color: this.state.level1Color }; - } - if (item.name == "二级") { - item.itemStyle = { color: this.state.level2Color }; - } - if (item.name == "三级") { - item.itemStyle = { color: this.state.level3Color }; - } - if (item.name == "四级") { - item.itemStyle = { color: this.state.level4Color }; - } - }); - if (chart11s) { - let myChart = echarts.init(chart11s); - myChart.setOption( - { - // title: { - // text: '风险等级', - // left: 'center' - // }, - tooltip: { - trigger: "item", - formatter: "{b} : {c} ({d}%)", - }, - legend: { - orient: "vartical", - x: "right", - top: "40%", - bottom: "0%", - data: ["一级", "二级", "三级", "四级"], - formatter: function (name) { - let singleData = Data.filter(function (item) { - return item.name == name; - }); - let countAll = 0; - Data.map((item) => { - countAll = countAll + item.value; - }); - - return ( - name + - " | " + - singleData[0].value + - " | " + - Number((singleData[0].value / countAll) * 100).toFixed(2) + - "%" - ); - }, - }, - series: [ - { - type: "pie", - radius: ["40%", "55%"], - center: ["30%", "50%"], - // radius: '65%', - // center: ['45%', '50%'], - data: Data, - itemStyle: { - //图形样式 - normal: { - borderColor: "#ffffff", - borderWidth: 2, - padding: "0 20px", - }, - }, - label: { - show: false, - }, - }, - ], + legend: { + bottom: "0px", }, - true - ); - // 添加点击事件监听器 - myChart.on("click", function (params) { - // params 参数包含了点击事件的相关信息 - // 如：params.componentType 可能是 'series' - // params.seriesIndex 系列的索引（在只有一个系列的情况下通常是0） - // params.dataIndex 扇区的数据索引 - // params.name 点击的扇区名称 - // params.value 点击的扇区对应的数值 - - // 你可以根据params执行任何你想做的操作，例如： - if (params.componentType === "series") { - if (params.name == "一级") { - let newData = that.state.ret.Data.CHARTLIST[1]; - that.subtractRandomNotLessThanSelf(newData); - that.chart13(newData); - } else if (params.name == "二级") { - that.subtractRandomNotLessThanSelf( - that.state.ret.Data.CHARTLIST[1] - ); - } else if (params.name == "三级") { - that.subtractRandomNotLessThanSelf( - that.state.ret.Data.CHARTLIST[1] - ); - } else if (params.name == "四级") { - that.subtractRandomNotLessThanSelf( - that.state.ret.Data.CHARTLIST[1] - ); - } - } - }); - } - }; - chart12 = (Data) => { - let chart12s = document.getElementById("chart12"); - if (chart12s) { - let myChart = echarts.init(chart12s); - 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: [ - { - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - }, - { - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - }, - { - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - }, - { - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - }, - ], + title: { + text: "月度风险辨识统计走势", + left: "center", + top: "2%", }, - true - ); - } - }; - chart13 = (Data) => { - let chart13s = document.getElementById("chart13"); - if (chart13s) { - let myChart = echarts.init(chart13s); - myChart.setOption( - { - // title: { - // text: "风险类别(等级)", - // left: "center", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "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: "value", - }, - yAxis: { - type: "category", - data: Data.NAME.slice(0, 10), - }, - series: [ - { - name: "一级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL1.slice(0, 10), - itemStyle: { color: this.state.level1Color }, - }, - { - name: "二级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL2.slice(0, 10), - itemStyle: { color: this.state.level2Color }, - }, - { - name: "三级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL3.slice(0, 10), - itemStyle: { color: this.state.level3Color }, - }, - { - name: "四级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL4.slice(0, 10), - itemStyle: { color: this.state.level4Color }, - }, - ], }, - true - ); - } - }; - chart14 = (Data) => { - let chart14s = document.getElementById("chart14"); - if (chart14s) { - let myChart = echarts.init(chart14s); - myChart.setOption( - { - // title: { - // text: "责任单位(等级)", - // left: "center", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, + xAxis: { + type: "category", + data: dates, + axisLabel: { + showMaxLabel: true, }, - 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: 0, - formatter: function (value) { - return value; - }, - }, - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - }, - { - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - }, - { - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - }, - { - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - }, - ], }, - true - ); - } - }; - chart15 = (Data) => { - let chart15s = document.getElementById("chart15"); - if (chart15s) { - let myChart = echarts.init(chart15s); - 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: [ - { - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - }, - { - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - }, - { - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - }, - { - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - }, - ], + yAxis: { + type: "value", }, - true - ); - } - }; - chart16 = (Data) => { - let chart16s = document.getElementById("chart16"); - if (chart16s) { - let myChart = echarts.init(chart16s); - myChart.setOption( - { - // title: { - // text: "风险类别(生产单元+等级)", - // left: "center", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, + series: [ + { + name: "危险源/风险库", + data: riskArr, + type: "line", + smooth: true, }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], + { + name: "职业危害库", + data: hazardArr, + type: "line", + smooth: true, }, - grid: { - left: "3%", - right: "5%", - bottom: "10%", - top: "8%", - containLabel: true, - }, - xAxis: { - type: "value", - }, - yAxis: { - type: "category", - data: Data.NAME, - }, - series: [ - { - name: "一级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - }, - { - name: "二级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - }, - { - name: "三级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - }, - { - name: "四级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - }, - ], - }, - true - ); - } - }; - chart17 = (Data) => { - let chart17s = document.getElementById("chart17"); - if (chart17s) { - let myChart = echarts.init(chart17s); - 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: [ - { - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - }, - { - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - }, - { - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - }, - { - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - }, - ], - }, - true - ); - } - }; - chart18 = (Data) => { - let chart18s = document.getElementById("chart18"); - if (chart18s) { - let myChart = echarts.init(chart18s); - 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: 0, - formatter: function (value) { - return value; - }, - }, - }, - ], - yAxis: [ - { - type: "value", - }, - ], - series: [ - { - name: "一级", - type: "bar", - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - }, - { - name: "二级", - type: "bar", - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - }, - { - name: "三级", - type: "bar", - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - }, - { - name: "四级", - type: "bar", - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - }, - ], - }, - true - ); - } - }; - chart19 = (Data) => { - let chart19s = document.getElementById("chart19"); - if (chart19s) { - let myChart = echarts.init(chart19s); - 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: "value", - }, - yAxis: { - type: "category", - data: Data.NAME, - }, - series: [ - { - name: "一级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color }, - }, - { - name: "二级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color }, - }, - { - name: "三级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color }, - }, - { - name: "四级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color }, - }, - ], - }, - 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; - }; - - //显示详情弹窗 - showDetailModal = (formCode) => { - var titleTemp = - this.state.mineType == 20 - ? "尾矿库" - : this.state.mineType == 10 - ? "选矿厂" - : "露天矿"; - if (formCode == "chart13") { - titleTemp += "风险类别"; - } else if (formCode == "") { - titleTemp += ""; - } else if (formCode == "") { - titleTemp += ""; - } else if (formCode == "") { - titleTemp += ""; - } else if (formCode == "") { - titleTemp += ""; - } - - const newtmpData = { - data: { - id: guid(), - mineType: this.state.mineType, - onCancel: this.handleCancel, - homeReload: true, - }, - formCode: formCode, - }; - this.setState({ tmpData: newtmpData }, () => { - var detailForm = { - isShow: true, - formCode: formCode, - title: titleTemp, - }; - this.setState({ - detailForm: detailForm, - }); - }); - }; - //详情弹窗关闭（隐藏） - detailFormClose = () => { - var detailForm = { - isShow: false, - formCode: "", - title: "", - }; - this.setState({ - detailForm: detailForm, - }); - }; - choose = (index) => { - if (index == 2) { - this.setState( - { - choose: 2, - }, - () => { - this.chart16(this.state.ret.Data.CHARTLIST[4]); - } - ); - } else { - this.setState( - { - choose: 1, - }, - () => { - this.chart13(this.state.ret.Data.CHARTLIST[1]); - } - ); - } - }; - chooseTwo = (index) => { - if (index == 2) { - this.setState( - { - chooseTwo: 2, - }, - () => { - this.chart17(this.state.ret.Data.CHARTLIST[5]); - } - ); - } else { - this.setState( - { - chooseTwo: 1, - }, - () => { - this.chart15(this.state.ret.Data.CHARTLIST[3]); - } - ); - } - }; - chooseThree = (index) => { - if (index == 2) { - this.setState( - { - chooseThree: 2, - }, - () => { - this.chart18(this.state.ret.Data.CHARTLIST[6]); - } - ); - } else { - this.setState( - { - chooseThree: 1, - }, - () => { - this.chart14(this.state.ret.Data.CHARTLIST[2]); - } - ); + ], + }, true); } }; render() { return (
-
- -
- + {/*

+ 风险管理统计分析 +

*/} + - -
-
-
-
风险等级
-
-
-
- - - -
-
-
-
风险类别
-
-
this.showDetailModal("chart13")}> - -
-
-
-
-
{ - this.choose(1); + {/* +
+
-
{ - this.choose(2); + 一级风险 + +

+ - 按生产单元+等级划分 -
-
- {this.state.choose == 1 ? ( -
- ) : ( -
- )} + {this.state.LEVEL1TOTAL} + + + + + +
+ */} + +
+
+
+ + +
+
- - + {/*
*/} + - -
-
-
-
生产单元
-
-
-
- - - -
-
-
-
层级
-
-
-
-
-
{ - this.chooseTwo(1); - }} - > - 按等级划分 -
-
{ - this.chooseTwo(2); - }} - > - 按生产单元+等级划分 + +
+
+ 危险源/风险库 + {/*

*/} +
+ + {this.state.RISKTOTALCOUNT} + + 条
- {this.state.chooseTwo == 1 ? ( -
- ) : ( -
- )} -
- - - - - - -
-
-
-
责任单位
-
-
-
-
-
{ - this.chooseThree(1); - }} - > - 按等级划分 -
-
{ - this.chooseThree(2); - }} - > - 按生产单元+等级划分 +
+ 职业危害库 + {/*

*/} +
+ + {this.state.HAZARDTOTALCOUNT} + + 条
- {this.state.chooseThree == 1 ? ( -
- ) : ( -
- )} -
- - - - - - -
-
-
-
月度风险辨识统计走势
-
-
-
- - - -
-
-
-
- 区域（按生产单元+等级划分） +
+ 管控措施 + {/*

*/} +
+ + {this.state.MEASURESTOTALCOUNT} + + 条
-
- + +
+
+
+
diff --git a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js new file mode 100644 index 0000000..b2d9b21 --- /dev/null +++ b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js @@ -0,0 +1,1716 @@ +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"; +class BI014RiskPerformanceModel extends React.Component { + constructor(props) { + super(props); + this.state = { + choose: 1, + chooseTwo: 1, + chooseThree: 1, + level1Color: "#c02e30", + level2Color: "#f7aa52", + level3Color: "#fbe06a", + level4Color: "#5185f3", + detailForm: { + isShow: false, + 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 }, + ], + CHART11: [ + { name: "一级", value: 3 }, + { name: "二级", value: 8 }, + { name: "三级", value: 181 }, + { name: "四级", value: 1112 }, + ], + CHARTLIST: [ + { + NAME: ["选矿厂", "尾矿库", "露天矿","职能部门"], + LEVEL1: [137, 190, 168,14], + LEVEL2: [251, 231, 242,15], + LEVEL3: [365, 346, 370,16], + LEVEL4: [437, 497, 478,17], + }, + + { + NAME: [ + "容器爆炸", + "淹溺", + "物体打击", + "高处坠落", + "火灾", + "起重伤害", + "其他爆炸", + "中毒和窒息", + "放炮", + "冒顶片帮", + "坍塌", + "车辆伤害", + "触电", + "其他伤害", + "机械伤害", + "灼烫", + "火药爆炸", + ], + LEVEL1: [ + 398, 395, 389, 372, 356, 343, 328, 315, 299, 286, 272, 261, 247, + 235, 223, 199, 184, + ], + LEVEL2: [ + 137, 145, 152, 161, 173, 186, 191, 203, 218, 229, 241, 260, 277, + 293, 306, 321, 375, + ], + LEVEL3: [ + 37, 56, 72, 89, 104, 127, 143, 158, 175, 191, 206, 227, 251, + 273, 294, 320, 385, + ], + LEVEL4: [ + 25, 37, 50, 62, 75, 88, 101, 119, 133, 147, 161, 178, 194, 211, + 230, 255, 392, + ], + }, + + { + NAME: [ + "生产一班", + "选矿部", + "机电设备管理办公室", + "矿山部", + "财务部", + "办公室", + "非金属资源部筹备组", + "企业管理部", + "技术管理部", + "营销部", + ], + LEVEL1: [35, 121, 227, 330, 97, 153, 178, 212, 25, 301], + LEVEL2: [39, 151, 202, 322, 45, 187, 239, 308, 112, 376], + LEVEL3: [56, 109, 273, 381, 74, 135, 215, 296, 123, 335], + LEVEL4: [23, 168, 250, 390, 62, 117, 244, 313, 89, 367], + }, + + { + NAME: ["部门", "车间", "班组", "公司"], + LEVEL1: [75, 119, 25, 392], + LEVEL2: [307, 102, 235, 18], + LEVEL3: [343, 121, 396, 78], + LEVEL4: [215, 331, 37, 292], + }, + + { + NAME: [ + "容器爆炸", + "淹溺", + "物体打击", + "高处坠落", + "火灾", + "起重伤害", + "其他爆炸", + "中毒和窒息", + "放炮", + "冒顶片帮", + "坍塌", + "车辆伤害", + "触电", + "其他伤害", + "机械伤害", + "灼烫", + "火药爆炸", + ], + LEVEL1: [ + 95, 122, 217, 78, 254, 153, 26, 192, 239, 170, 103, 145, 278, + 212, 55, 189, 287, + ], + LEVEL2: [ + 221, 135, 110, 243, 150, 199, 273, 148, 17, 290, 228, 201, 184, + 92, 165, 106, 133, + ], + LEVEL3: [ + 300, 23, 187, 86, 111, 250, 248, 137, 157, 260, 298, 53, 100, + 129, 175, 142, 285, + ], + LEVEL4: [ + 204, 162, 223, 291, 197, 109, 42, 274, 171, 118, 138, 232, 252, + 167, 255, 124, 2, + ], + }, + + { + NAME: ["部门", "车间", "班组", "公司"], + LEVEL1: [153, 124, 178, 190], + LEVEL2: [105, 132, 27, 185], + LEVEL3: [200, 14, 56, 139], + LEVEL4: [37, 176, 150, 120], + }, + + { + NAME: [ + "生产一班", + "选矿部", + "机电设备管理办公室", + "矿山部", + "财务部", + "办公室", + "非金属资源部筹备组", + "企业管理部", + "技术管理部", + "营销部", + ], + LEVEL1: [187, 152, 113, 199, 75, 141, 102, 34, 160, 128], + LEVEL2: [135, 194, 86, 162, 107, 43, 173, 155, 118, 181], + LEVEL3: [110, 131, 197, 27, 92, 150, 170, 180, 12, 178], + LEVEL4: [56, 183, 100, 125, 190, 171, 89, 140, 161, 137], + }, + + { + NAME: [ + "破碎车间-粗碎单元", + "机电设备管理科作业区", + "高压配电室", + "电焊作业区", + "采场", + "破碎车间", + "尾矿库截洪单元", + "尾矿库库坝单元", + "磨重车间-细粒选别单元", + "钨细泥回收车间-排尾单元", + ], + LEVEL1: [320, 302, 301, 334, 320, 302, 301, 33, 67, 89], + LEVEL2: [120, 132, 101, 134, 334, 320, 302, 301, 33, 67], + LEVEL3: [220, 182, 191, 234, 334, 320, 302, 301, 33, 67], + LEVEL4: [150, 212, 201, 154, 334, 320, 302, 301, 33, 67], + }, + ], + }, + 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.chart11(ret?.Data.CHART11); + this.chart12(ret?.Data.CHARTLIST[0]); + this.chart13(ret?.Data.CHARTLIST[1]); + this.chart14(ret?.Data.CHARTLIST[2]); + this.chart15(ret?.Data.CHARTLIST[3]); + + this.chart16(ret?.Data.CHARTLIST[4]); + this.chart17(ret?.Data.CHARTLIST[5]); + this.chart18(ret?.Data.CHARTLIST[6]); + this.chart19(ret?.Data.CHARTLIST[7]); + }, + }); + }; + getBaseInfoData = (mineType) => { + this.chart4(this.state.ret.Data.DATECOUNTS); + this.chart11(this.state.ret.Data.CHART11); + this.chart12(this.state.ret.Data.CHARTLIST[0]); + this.chart13(this.state.ret.Data.CHARTLIST[1]); + this.chart14(this.state.ret.Data.CHARTLIST[2]); + this.chart15(this.state.ret.Data.CHARTLIST[3]); + + this.chart16(this.state.ret.Data.CHARTLIST[4]); + this.chart17(this.state.ret.Data.CHARTLIST[5]); + this.chart18(this.state.ret.Data.CHARTLIST[6]); + this.chart19(this.state.ret.Data.CHARTLIST[7]); + }; + 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 + ); + } + }; + chart11 = (Data) => { + let that = this; + let chart11s = document.getElementById("chart11"); + Data.forEach((item) => { + if (item.name == "一级") { + item.itemStyle = { color: this.state.level1Color }; + } + if (item.name == "二级") { + item.itemStyle = { color: this.state.level2Color }; + } + if (item.name == "三级") { + item.itemStyle = { color: this.state.level3Color }; + } + if (item.name == "四级") { + item.itemStyle = { color: this.state.level4Color }; + } + }); + if (chart11s) { + let myChart = echarts.init(chart11s); + myChart.setOption( + { + // title: { + // text: '风险等级', + // left: 'center' + // }, + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + }, + legend: { + orient: "vartical", + x: "right", + top: "40%", + bottom: "0%", + data: ["一级", "二级", "三级", "四级"], + formatter: function (name) { + let singleData = Data.filter(function (item) { + return item.name == name; + }); + let countAll = 0; + Data.map((item) => { + countAll = countAll + item.value; + }); + + return ( + name + + " | " + + singleData[0].value + + " | " + + Number((singleData[0].value / countAll) * 100).toFixed(2) + + "%" + ); + }, + }, + series: [ + { + type: "pie", + radius: ["40%", "55%"], + center: ["30%", "50%"], + // radius: '65%', + // center: ['45%', '50%'], + data: Data, + itemStyle: { + //图形样式 + normal: { + borderColor: "#ffffff", + borderWidth: 2, + padding: "0 20px", + }, + }, + label: { + show: false, + }, + }, + ], + }, + true + ); + // 添加点击事件监听器 + myChart.on("click", function (params) { + // params 参数包含了点击事件的相关信息 + // 如：params.componentType 可能是 'series' + // params.seriesIndex 系列的索引（在只有一个系列的情况下通常是0） + // params.dataIndex 扇区的数据索引 + // params.name 点击的扇区名称 + // params.value 点击的扇区对应的数值 + + // 你可以根据params执行任何你想做的操作，例如： + if (params.componentType === "series") { + if (params.name == "一级") { + let newData = that.state.ret.Data.CHARTLIST[1]; + that.subtractRandomNotLessThanSelf(newData); + that.chart13(newData); + } else if (params.name == "二级") { + that.subtractRandomNotLessThanSelf( + that.state.ret.Data.CHARTLIST[1] + ); + } else if (params.name == "三级") { + that.subtractRandomNotLessThanSelf( + that.state.ret.Data.CHARTLIST[1] + ); + } else if (params.name == "四级") { + that.subtractRandomNotLessThanSelf( + that.state.ret.Data.CHARTLIST[1] + ); + } + } + }); + } + }; + chart12 = (Data) => { + let chart12s = document.getElementById("chart12"); + if (chart12s) { + let myChart = echarts.init(chart12s); + 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: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + } + }; + chart13 = (Data) => { + let chart13s = document.getElementById("chart13"); + if (chart13s) { + let myChart = echarts.init(chart13s); + 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: "value", + }, + yAxis: { + type: "category", + data: Data.NAME.slice(0, 10), + }, + series: [ + { + name: "一级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL1.slice(0, 10), + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL2.slice(0, 10), + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL3.slice(0, 10), + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL4.slice(0, 10), + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + } + }; + chart14 = (Data) => { + let chart14s = document.getElementById("chart14"); + if (chart14s) { + let myChart = echarts.init(chart14s); + 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: 0, + formatter: function (value) { + return value; + }, + }, + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + } + }; + chart15 = (Data) => { + let chart15s = document.getElementById("chart15"); + if (chart15s) { + let myChart = echarts.init(chart15s); + 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: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + } + }; + chart16 = (Data) => { + let chart16s = document.getElementById("chart16"); + if (chart16s) { + let myChart = echarts.init(chart16s); + 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: "10%", + top: "8%", + containLabel: true, + }, + xAxis: { + type: "value", + }, + yAxis: { + type: "category", + data: Data.NAME, + }, + series: [ + { + name: "一级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + } + }; + chart17 = (Data) => { + let chart17s = document.getElementById("chart17"); + if (chart17s) { + let myChart = echarts.init(chart17s); + 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: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + } + }; + chart18 = (Data) => { + let chart18s = document.getElementById("chart18"); + if (chart18s) { + let myChart = echarts.init(chart18s); + 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: 0, + formatter: function (value) { + return value; + }, + }, + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + } + }; + chart19 = (Data) => { + let chart19s = document.getElementById("chart19"); + if (chart19s) { + let myChart = echarts.init(chart19s); + 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: "value", + }, + yAxis: { + type: "category", + data: Data.NAME, + }, + series: [ + { + name: "一级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + } + }; + chart20 = (Data) => { + let chart20s = document.getElementById("chart20"); + if (chart20s) { + let myChart = echarts.init(chart20s); + 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: "value", + }, + yAxis: { + type: "category", + data: Data.NAME, + }, + series: [ + { + name: "一级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + 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; + }; + + + //显示详情弹窗 + showDetailModal = (formCode) => { + var titleTemp = + this.state.mineType == 20 + ? "尾矿库" + : this.state.mineType == 10 + ? "选矿厂" + : "露天矿"; + if (formCode == "风险类别") { + titleTemp += "风险类别"; + this.chart20(this.state.ret.Data.CHARTLIST[1]); + } else if (formCode == "生产单元") { + titleTemp += "生产单元"; + //this.chart21(this.state.ret.Data.CHARTLIST[1]); + } else if (formCode == "") { + titleTemp += ""; + } else if (formCode == "") { + titleTemp += ""; + } else if (formCode == "") { + titleTemp += ""; + } + + const newtmpData = { + data: { + id: guid(), + mineType: this.state.mineType, + onCancel: this.handleCancel, + homeReload: true, + }, + formCode: formCode, + }; + this.setState({ tmpData: newtmpData }, () => { + var detailForm = { + isShow: true, + formCode: formCode, + title: titleTemp, + }; + this.setState({ + detailForm: detailForm, + }); + }); + }; + //详情弹窗关闭（隐藏） + detailFormClose = () => { + var detailForm = { + isShow: false, + formCode: "", + title: "", + }; + this.setState({ + detailForm: detailForm, + }); + }; + choose = (index) => { + if (index == 2) { + this.setState( + { + choose: 2, + }, + () => { + this.chart16(this.state.ret.Data.CHARTLIST[4]); + } + ); + } else { + this.setState( + { + choose: 1, + }, + () => { + this.chart13(this.state.ret.Data.CHARTLIST[1]); + } + ); + } + }; + chooseTwo = (index) => { + if (index == 2) { + this.setState( + { + chooseTwo: 2, + }, + () => { + this.chart17(this.state.ret.Data.CHARTLIST[5]); + } + ); + } else { + this.setState( + { + chooseTwo: 1, + }, + () => { + this.chart15(this.state.ret.Data.CHARTLIST[3]); + } + ); + } + }; + chooseThree = (index) => { + if (index == 2) { + this.setState( + { + chooseThree: 2, + }, + () => { + this.chart18(this.state.ret.Data.CHARTLIST[6]); + } + ); + } else { + this.setState( + { + chooseThree: 1, + }, + () => { + this.chart14(this.state.ret.Data.CHARTLIST[2]); + } + ); + } + }; + render() { + return ( +
+
+ +
+ +
+ + + +
+
+
+
（动态4个层级 公司 部门。。）风险等级
+
+
+
+ + + +
+
+
+
生产单元
+
+
this.showDetailModal("生产单元")}> + +
+
+
+ + + + + + + +
+
+
+
风险类别
+
+
this.showDetailModal("风险类别")}> + +
+
+
+
+
{ + this.choose(1); + }} + > + 选矿厂，尾矿库，露天矿 +
+
{ + this.choose(2); + }} + > + 公司，部门，车间，班组 +
+
+ {this.state.choose == 1 ? ( +
+ ) : ( +
+ )} +
+ + + +
+
+
+
层级
+
+
+
+
+
{ + this.chooseTwo(1); + }} + > + 按等级划分 +
+
{ + this.chooseTwo(2); + }} + > + 按生产单元+等级划分 +
+
+ {this.state.chooseTwo == 1 ? ( +
+ ) : ( +
+ )} +
+ + + + + + +
+
+
+
责任单位
+
+
+
+
+
{ + this.chooseThree(1); + }} + > + 按等级划分 +
+
{ + this.chooseThree(2); + }} + > + 按生产单元+等级划分 +
+
+ {this.state.chooseThree == 1 ? ( +
+ ) : ( +
+ )} +
+ + + + + + +
+
+
+
月度风险辨识统计走势
+
+
+
+ + + +
+
+
+
+ 区域（按生产单元+等级划分） +
+
+
+
+ + + + + + +
+
+ ); + } +} +export default connect(({ login, app }) => ({ login, app }))( + BI014RiskPerformanceModel +); diff --git a/src/utils/customConfig.js b/src/utils/customConfig.js index 93766e5..a7e2d26 100644 --- a/src/utils/customConfig.js +++ b/src/utils/customConfig.js @@ -748,6 +748,10 @@ const BI020ApproveAnalysis = Loadable({ loader: () => import('../components/CustomPages/BI/BI020ApproveAnalysis'), loading: () =>
}) +const BI014RiskPerformanceModel = Loadable({ + loader: () => import('../components/CustomPages/BI/BI014RiskPerformanceModel'), + loading: () =>
+}) export default function (componentName, formId, formParam, data, formCode, formData) { return { FMUserEditPage: , @@ -936,5 +940,6 @@ export default function (componentName, formId, formParam, data, formCode, formD FO025ShowPrint: , BI020ApproveAnalysis: , + BI014RiskPerformanceModel: , }[componentName] }