From 0236f5efb5185c3e0a18e6a2b664956da57645e1 Mon Sep 17 00:00:00 2001 From: yunkexin <760754045@qq.com> Date: Fri, 29 Mar 2024 15:30:02 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A3=8E=E9=99=A9=E7=AE=A1=E7=90=86=E6=89=A9?= =?UTF-8?q?=E5=B1=95=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomPages/BI/BI013RiskAnalysisModel.js | 1619 +++++++++++------ src/routes/dashboard.css | 39 + 2 files changed, 1111 insertions(+), 547 deletions(-) diff --git a/src/components/CustomPages/BI/BI013RiskAnalysisModel.js b/src/components/CustomPages/BI/BI013RiskAnalysisModel.js index 6d65433..669b276 100644 --- a/src/components/CustomPages/BI/BI013RiskAnalysisModel.js +++ b/src/components/CustomPages/BI/BI013RiskAnalysisModel.js @@ -1,11 +1,16 @@ import React, { useState, useEffect, useRef, Component } from "react"; import { connect } from "dva"; +import { initFilter, extendOrder, guid } from "../../../utils/common"; import { - initFilter, - extendOrder, - guid, -} from "../../../utils/common"; -import { Table, Row, Col, Button, Select, DatePicker, message, Modal, } from "antd"; + Table, + Row, + Col, + Button, + Select, + DatePicker, + message, + Modal, +} from "antd"; import echarts from "echarts"; import moment from "moment"; import IconFont from "../../../utils/iconFont"; @@ -13,6 +18,9 @@ class BI013RiskAnalysisModel extends React.Component { constructor(props) { super(props); this.state = { + choose: 1, + chooseTwo: 1, + chooseThree: 1, level1Color: "#c02e30", level2Color: "#f7aa52", level3Color: "#fbe06a", @@ -23,41 +31,202 @@ class BI013RiskAnalysisModel extends React.Component { 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 }, + 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] }, + 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: [ + 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: [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: [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: [ + 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: [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: [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 - } + { + 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, + }, }; } @@ -116,65 +285,188 @@ class BI013RiskAnalysisModel extends React.Component { } } 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("MM")); } let chart4s = document.getElementById("chart4"); if (chart4s) { let myChart = echarts.init(chart4s); - myChart.setOption({ - color: ["#72b85b", "#f6841a", "#cc0404"], - grid: { - left: "5%", - right: "5%", - }, - legend: { - bottom: "0px", - }, - title: { - text: "月度风险辨识统计走势", - left: "center", - top: "2%", - }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", + myChart.setOption( + { + color: color, + grid: { + left: "10%", + right: "5%", }, - }, - xAxis: { - type: "category", - data: dates, - axisLabel: { - showMaxLabel: true, + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, }, - }, - yAxis: { - type: "value", - }, - series: [ - { - name: "危险源/风险库", - data: riskArr, - type: "line", - smooth: true, + // title: { + // text: "月度风险辨识统计走势", + // left: "center", + // top: "2%", + // }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, }, - { - name: "职业危害库", - data: hazardArr, - type: "line", - smooth: true, + xAxis: { + type: "category", + data: dates, + boundaryGap: false, + axisLabel: { + formatter: "{value}月", + textStyle: { + color: "#333", + }, + }, + axisLine: { + lineStyle: { + color: "#D9D9D9", + }, + }, }, - ], - }, true); + 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 => { + Data.forEach((item) => { if (item.name == "一级") { item.itemStyle = { color: this.state.level1Color }; } @@ -187,57 +479,70 @@ class BI013RiskAnalysisModel extends React.Component { 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) + - "%" - ); + myChart.setOption( + { + // title: { + // text: '风险等级', + // left: 'center' + // }, + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", }, - }, - series: [ - { - type: 'pie', - radius: '65%', - center: ['45%', '50%'], - data: Data, - label: { - show: false, + 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) + + "%" + ); }, - } - ] - }, true); + }, + 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) { + myChart.on("click", function (params) { // params 参数包含了点击事件的相关信息 // 如：params.componentType 可能是 'series' // params.seriesIndex 系列的索引（在只有一个系列的情况下通常是0） @@ -245,19 +550,24 @@ class BI013RiskAnalysisModel extends React.Component { // params.name 点击的扇区名称 // params.value 点击的扇区对应的数值 - // 你可以根据params执行任何你想做的操作，例如： - if (params.componentType === 'series') { - if (params.name == '一级') { + 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]); + 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] + ); } } }); @@ -269,66 +579,75 @@ class BI013RiskAnalysisModel extends React.Component { let myChart = echarts.init(chart12s); myChart.setOption( { - title: { - text: '生产单元', - left: 'center' - }, + // title: { + // text: "生产单元", + // left: "center", + // }, tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - } + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, }, legend: { - top: '40%', - orient: 'vertical', - x: "right", - data: ['一级', '二级', '三级', '四级'] + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], }, grid: { - left: '3%', - right: '12%', - bottom: '3%', - containLabel: true + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, }, xAxis: [ { - type: 'category', - data: Data.NAME - } + type: "category", + data: Data.NAME, + }, ], yAxis: [ { - type: 'value' - } + type: "value", + }, ], series: [ { - name: '一级', - type: 'bar', + name: "一级", + type: "bar", data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color } + itemStyle: { color: this.state.level1Color }, }, { - name: '二级', - type: 'bar', + name: "二级", + type: "bar", data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color } + itemStyle: { color: this.state.level2Color }, }, { - name: '三级', - type: 'bar', + name: "三级", + type: "bar", data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color } + itemStyle: { color: this.state.level3Color }, }, { - name: '四级', - type: 'bar', + name: "四级", + type: "bar", data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color } - } - ] - }, true); + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); } }; chart13 = (Data) => { @@ -337,83 +656,91 @@ class BI013RiskAnalysisModel extends React.Component { let myChart = echarts.init(chart13s); myChart.setOption( { - title: { - text: '风险类别(等级)', - left: 'center' - }, + // title: { + // text: "风险类别(等级)", + // left: "center", + // }, tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - } + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, }, legend: { - top: '40%', - orient: 'vertical', - x: "right", - data: ['一级', '二级', '三级', '四级'] + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], }, grid: { - left: '3%', - right: '12%', - bottom: '3%', - containLabel: true + left: "3%", + right: "5%", + bottom: "12%", + top: "10%", + containLabel: true, }, xAxis: { - type: 'value' + type: "value", }, yAxis: { - type: 'category', - data: Data.NAME.slice(0, 10) + type: "category", + data: Data.NAME.slice(0, 10), }, series: [ { - name: '一级', - type: 'bar', - stack: '总量', + name: "一级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, - data: Data.LEVEL1.slice(0, 10) - , - itemStyle: { color: this.state.level1Color } + data: Data.LEVEL1.slice(0, 10), + itemStyle: { color: this.state.level1Color }, }, { - name: '二级', - type: 'bar', - stack: '总量', + name: "二级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL2.slice(0, 10), - itemStyle: { color: this.state.level2Color } + itemStyle: { color: this.state.level2Color }, }, { - name: '三级', - type: 'bar', - stack: '总量', + name: "三级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL3.slice(0, 10), - itemStyle: { color: this.state.level3Color } + itemStyle: { color: this.state.level3Color }, }, { - name: '四级', - type: 'bar', - stack: '总量', + name: "四级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL4.slice(0, 10), - itemStyle: { color: this.state.level4Color } + itemStyle: { color: this.state.level4Color }, }, - ] - }, true); + ], + }, + true + ); } }; chart14 = (Data) => { @@ -422,74 +749,82 @@ class BI013RiskAnalysisModel extends React.Component { let myChart = echarts.init(chart14s); myChart.setOption( { - title: { - text: '责任单位(等级)', - left: 'center' - }, + // title: { + // text: "责任单位(等级)", + // left: "center", + // }, tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - } + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, }, legend: { - top: '40%', - orient: 'vertical', - x: "right", - data: ['一级', '二级', '三级', '四级'] + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], }, grid: { - left: '3%', - right: '12%', - bottom: '3%', - containLabel: true + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, }, xAxis: [ { - type: 'category', + type: "category", data: Data.NAME, axisLabel: { interval: 0, - rotate: 40, + rotate: 0, formatter: function (value) { - return value - } - } - } + return value; + }, + }, + }, ], yAxis: [ { - type: 'value' - } + type: "value", + }, ], series: [ - { - name: '一级', - type: 'bar', + name: "一级", + type: "bar", data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color } + itemStyle: { color: this.state.level1Color }, }, { - name: '二级', - type: 'bar', + name: "二级", + type: "bar", data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color } + itemStyle: { color: this.state.level2Color }, }, { - name: '三级', - type: 'bar', + name: "三级", + type: "bar", data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color } + itemStyle: { color: this.state.level3Color }, }, { - name: '四级', - type: 'bar', + name: "四级", + type: "bar", data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color } - } - ] - }, true); + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); } }; chart15 = (Data) => { @@ -498,67 +833,75 @@ class BI013RiskAnalysisModel extends React.Component { let myChart = echarts.init(chart15s); myChart.setOption( { - title: { - text: '层级（等级）', - left: 'center' - }, + // title: { + // text: "层级（等级）", + // left: "center", + // }, tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - } + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, }, legend: { - top: '40%', - orient: 'vertical', - x: "right", - data: ['一级', '二级', '三级', '四级'] + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], }, grid: { - left: '3%', - right: '12%', - bottom: '3%', - containLabel: true + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, }, xAxis: [ { - type: 'category', - data: Data.NAME - } + type: "category", + data: Data.NAME, + }, ], yAxis: [ { - type: 'value' - } + type: "value", + }, ], series: [ - { - name: '一级', - type: 'bar', + name: "一级", + type: "bar", data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color } + itemStyle: { color: this.state.level1Color }, }, { - name: '二级', - type: 'bar', + name: "二级", + type: "bar", data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color } + itemStyle: { color: this.state.level2Color }, }, { - name: '三级', - type: 'bar', + name: "三级", + type: "bar", data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color } + itemStyle: { color: this.state.level3Color }, }, { - name: '四级', - type: 'bar', + name: "四级", + type: "bar", data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color } - } - ] - }, true); + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); } }; chart16 = (Data) => { @@ -567,82 +910,91 @@ class BI013RiskAnalysisModel extends React.Component { let myChart = echarts.init(chart16s); myChart.setOption( { - title: { - text: '风险类别(生产单元+等级)', - left: 'center' - }, + // title: { + // text: "风险类别(生产单元+等级)", + // left: "center", + // }, tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - } + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, }, legend: { - top: '40%', - orient: 'vertical', - x: "right", - data: ['一级', '二级', '三级', '四级'] + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], }, grid: { - left: '3%', - right: '12%', - bottom: '3%', - containLabel: true + left: "3%", + right: "5%", + bottom: "10%", + top: "8%", + containLabel: true, }, xAxis: { - type: 'value' + type: "value", }, yAxis: { - type: 'category', - data: Data.NAME + type: "category", + data: Data.NAME, }, series: [ { - name: '一级', - type: 'bar', - stack: '总量', + name: "一级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color } + itemStyle: { color: this.state.level1Color }, }, { - name: '二级', - type: 'bar', - stack: '总量', + name: "二级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color } + itemStyle: { color: this.state.level2Color }, }, { - name: '三级', - type: 'bar', - stack: '总量', + name: "三级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color } + itemStyle: { color: this.state.level3Color }, }, { - name: '四级', - type: 'bar', - stack: '总量', + name: "四级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color } + itemStyle: { color: this.state.level4Color }, }, - ] - }, true); + ], + }, + true + ); } }; chart17 = (Data) => { @@ -651,67 +1003,75 @@ class BI013RiskAnalysisModel extends React.Component { let myChart = echarts.init(chart17s); myChart.setOption( { - title: { - text: '层级（生产单元+等级）', - left: 'center' - }, + // title: { + // text: "层级（生产单元+等级）", + // left: "center", + // }, tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - } + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, }, legend: { - top: '40%', - orient: 'vertical', - x: "right", - data: ['一级', '二级', '三级', '四级'] + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], }, grid: { - left: '3%', - right: '12%', - bottom: '3%', - containLabel: true + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, }, xAxis: [ { - type: 'category', - data: Data.NAME - } + type: "category", + data: Data.NAME, + }, ], yAxis: [ { - type: 'value' - } + type: "value", + }, ], series: [ - { - name: '一级', - type: 'bar', + name: "一级", + type: "bar", data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color } + itemStyle: { color: this.state.level1Color }, }, { - name: '二级', - type: 'bar', + name: "二级", + type: "bar", data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color } + itemStyle: { color: this.state.level2Color }, }, { - name: '三级', - type: 'bar', + name: "三级", + type: "bar", data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color } + itemStyle: { color: this.state.level3Color }, }, { - name: '四级', - type: 'bar', + name: "四级", + type: "bar", data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color } - } - ] - }, true); + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); } }; chart18 = (Data) => { @@ -720,74 +1080,82 @@ class BI013RiskAnalysisModel extends React.Component { let myChart = echarts.init(chart18s); myChart.setOption( { - title: { - text: '责任单位(等级)', - left: 'center' - }, + // title: { + // text: "责任单位(等级)", + // left: "center", + // }, tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - } + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, }, legend: { - top: '40%', - orient: 'vertical', - x: "right", - data: ['一级', '二级', '三级', '四级'] + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], }, grid: { - left: '3%', - right: '12%', - bottom: '3%', - containLabel: true + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, }, xAxis: [ { - type: 'category', + type: "category", data: Data.NAME, axisLabel: { interval: 0, - rotate: 40, + rotate: 0, formatter: function (value) { - return value - } - } - } + return value; + }, + }, + }, ], yAxis: [ { - type: 'value' - } + type: "value", + }, ], series: [ - { - name: '一级', - type: 'bar', + name: "一级", + type: "bar", data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color } + itemStyle: { color: this.state.level1Color }, }, { - name: '二级', - type: 'bar', + name: "二级", + type: "bar", data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color } + itemStyle: { color: this.state.level2Color }, }, { - name: '三级', - type: 'bar', + name: "三级", + type: "bar", data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color } + itemStyle: { color: this.state.level3Color }, }, { - name: '四级', - type: 'bar', + name: "四级", + type: "bar", data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color } - } - ] - }, true); + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); } }; chart19 = (Data) => { @@ -796,82 +1164,91 @@ class BI013RiskAnalysisModel extends React.Component { let myChart = echarts.init(chart19s); myChart.setOption( { - title: { - text: '区域(生产单元+等级)', - left: 'center' - }, + // title: { + // text: "区域(生产单元+等级)", + // left: "center", + // }, tooltip: { - trigger: 'axis', - axisPointer: { // 坐标轴指示器，坐标轴触发有效 - type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' - } + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, }, legend: { - top: '40%', - orient: 'vertical', - x: "right", - data: ['一级', '二级', '三级', '四级'] + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], }, grid: { - left: '3%', - right: '12%', - bottom: '3%', - containLabel: true + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, }, xAxis: { - type: 'value' + type: "value", }, yAxis: { - type: 'category', - data: Data.NAME + type: "category", + data: Data.NAME, }, series: [ { - name: '一级', - type: 'bar', - stack: '总量', + name: "一级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL1, - itemStyle: { color: this.state.level1Color } + itemStyle: { color: this.state.level1Color }, }, { - name: '二级', - type: 'bar', - stack: '总量', + name: "二级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL2, - itemStyle: { color: this.state.level2Color } + itemStyle: { color: this.state.level2Color }, }, { - name: '三级', - type: 'bar', - stack: '总量', + name: "三级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL3, - itemStyle: { color: this.state.level3Color } + itemStyle: { color: this.state.level3Color }, }, { - name: '四级', - type: 'bar', - stack: '总量', + name: "四级", + type: "bar", + stack: "总量", label: { show: true, - position: 'insideRight' + position: "insideRight", }, data: Data.LEVEL4, - itemStyle: { color: this.state.level4Color } + itemStyle: { color: this.state.level4Color }, }, - ] - }, true); + ], + }, + true + ); } }; subtractRandomNotLessThanSelf = (obj) => { @@ -880,8 +1257,8 @@ class BI013RiskAnalysisModel extends React.Component { } for (let key in obj) { if (Array.isArray(obj[key])) { - obj[key] = obj[key].map(number => { - if (typeof number === 'number') { + obj[key] = obj[key].map((number) => { + if (typeof number === "number") { const randomSubtraction = getRandomNotLessThan(number); return Math.floor(number - randomSubtraction); // 确保结果也为整数 } else { @@ -891,7 +1268,7 @@ class BI013RiskAnalysisModel extends React.Component { } } return obj; - } + }; //显示详情弹窗 showDetailModal = (formCode) => { @@ -899,8 +1276,8 @@ class BI013RiskAnalysisModel extends React.Component { this.state.mineType == 20 ? "尾矿库" : this.state.mineType == 10 - ? "选矿厂" - : "露天矿"; + ? "选矿厂" + : "露天矿"; if (formCode == "chart13") { titleTemp += "风险类别"; } else if (formCode == "") { @@ -944,19 +1321,83 @@ class BI013RiskAnalysisModel extends React.Component { 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 (
@@ -968,113 +1409,197 @@ class BI013RiskAnalysisModel extends React.Component { onCancel={this.detailFormClose} footer={null} width="1300px" - > - + >
- -
-
-
- - -
-
-
- - -
-
-
- - - - - - -
-
- this.showDetailModal("chart13") - } - > - + + +
+
+
+
风险等级
-
+
- -
-
-
- - -
-
-
- - - - - -
-
+ +
+
+
+
风险类别
+
+
this.showDetailModal("chart13")}> + +
+
+
+
+
{ + 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 ? ( +
+ ) : ( +
+ )}
+ + + + + +
+
+
+
月度风险辨识统计走势
+
+
+
+ + + +
+
+
+
+ 区域（按生产单元+等级划分） +
+
+
+
+ + - {/* - -
-
-
- - */} - -
); diff --git a/src/routes/dashboard.css b/src/routes/dashboard.css index b4fdcad..c2d7f1f 100644 --- a/src/routes/dashboard.css +++ b/src/routes/dashboard.css @@ -337,4 +337,43 @@ cursor: pointer; padding: 4px; border-radius: 5px; box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1); +} +:global(.risk-model-col) { + background-color: #fff; + box-shadow: 0 0px 20px 1px rgba(0, 0, 0, 0.12); + padding: 0px; + border-radius: 5px; +} +:global(.risk-chart) { +display: flex; +flex-direction: column; +} +:global(.risk-model-tab) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +:global(.risk-model-card) { + padding: 5px 10px; + border: 1px solid #ebeef5; + border-radius: 5px; + font-size: 12px; + margin: 0px 5px; + cursor: pointer; + background-color: #fff; + color: #303133; +} +:global(.risk-model-card-choose) { + padding: 5px 10px; + border: 1px solid #3c9cff; + border-radius: 5px; + font-size: 12px; + margin: 0px 5px; + cursor: pointer; + background-color:#3c9cff ; + color: #fff; +} +:global() { + } \ No newline at end of file