From 84cbef03b7f5bc987493977156352be5a648eb97 Mon Sep 17 00:00:00 2001 From: wjn Date: Wed, 3 Apr 2024 17:30:15 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BI/BI014RiskPerformanceModel.js | 1870 ++++++++++------- 1 file changed, 1127 insertions(+), 743 deletions(-) diff --git a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js index b2d9b21..052242b 100644 --- a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js +++ b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js @@ -14,19 +14,18 @@ import { import echarts from "echarts"; import moment from "moment"; import IconFont from "../../../utils/iconFont"; +import { T } from "antd/lib/upload/utils"; class BI014RiskPerformanceModel extends React.Component { constructor(props) { super(props); this.state = { - choose: 1, - chooseTwo: 1, - chooseThree: 1, level1Color: "#c02e30", level2Color: "#f7aa52", level3Color: "#fbe06a", level4Color: "#5185f3", + isShow1: false, + isShow2: false, detailForm: { - isShow: false, formCode: "", title: "", }, @@ -65,13 +64,19 @@ class BI014RiskPerformanceModel extends React.Component { { name: "三级", value: 181 }, { name: "四级", value: 1112 }, ], + CHART12: [ + { 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: [1, 0, 1, 1], + LEVEL2: [0, 3, 2, 2], + LEVEL3: [1, 3, 70, 105], + LEVEL4: [103, 223, 211, 575], }, { @@ -95,19 +100,19 @@ class BI014RiskPerformanceModel extends React.Component { "火药爆炸", ], LEVEL1: [ - 398, 395, 389, 372, 356, 343, 328, 315, 299, 286, 272, 261, 247, - 235, 223, 199, 184, + 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, + 0, 0, 0, 1, ], LEVEL2: [ - 137, 145, 152, 161, 173, 186, 191, 203, 218, 229, 241, 260, 277, + 1, 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, + 1, 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, + 0, 37, 50, 62, 75, 88, 101, 119, 133, 147, 161, 178, 194, 211, 230, 255, 392, ], }, @@ -138,72 +143,6 @@ class BI014RiskPerformanceModel extends React.Component { 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: [ "破碎车间-粗碎单元", @@ -246,31 +185,27 @@ class BI014RiskPerformanceModel extends React.Component { 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.chartFXDJ1(ret?.Data.CHART11); + this.chartFXDJ2(ret?.Data.CHART12); + this.chartSCDY(ret?.Data.CHARTLIST[0]); + this.chartFXLB1(ret?.Data.CHARTLIST[1]); + this.chartZRDW(ret?.Data.CHARTLIST[2]); + this.chartCJ(ret?.Data.CHARTLIST[3]); - this.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.chartFXDJ1(this.state.ret.Data.CHART11); + this.chartFXDJ2(this.state.ret.Data.CHART12); + this.chartSCDY(this.state.ret.Data.CHARTLIST[0]); + this.chartFXLB1(this.state.ret.Data.CHARTLIST[1]); + this.chartFXLB2(this.state.ret.Data.CHARTLIST[1]); + this.chartCJ(this.state.ret.Data.CHARTLIST[3]); + this.chartZRDW(this.state.ret.Data.CHARTLIST[2]); + this.chartQY(this.state.ret.Data.CHARTLIST[4]); - this.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 = []; @@ -463,9 +398,9 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; - chart11 = (Data) => { + chartFXDJ1 = (Data) => { let that = this; - let chart11s = document.getElementById("chart11"); + let chartFXDJ1 = document.getElementById("chartFXDJ1"); Data.forEach((item) => { if (item.name == "一级") { item.itemStyle = { color: this.state.level1Color }; @@ -480,8 +415,8 @@ class BI014RiskPerformanceModel extends React.Component { item.itemStyle = { color: this.state.level4Color }; } }); - if (chart11s) { - let myChart = echarts.init(chart11s); + if (chartFXDJ1) { + let myChart = echarts.init(chartFXDJ1); myChart.setOption( { // title: { @@ -555,7 +490,7 @@ class BI014RiskPerformanceModel extends React.Component { if (params.name == "一级") { let newData = that.state.ret.Data.CHARTLIST[1]; that.subtractRandomNotLessThanSelf(newData); - that.chart13(newData); + that.chartSCDY(newData); } else if (params.name == "二级") { that.subtractRandomNotLessThanSelf( that.state.ret.Data.CHARTLIST[1] @@ -573,76 +508,75 @@ class BI014RiskPerformanceModel extends React.Component { }); } }; - chart12 = (Data) => { - let chart12s = document.getElementById("chart12"); - if (chart12s) { - let myChart = echarts.init(chart12s); + chartFXDJ2 = (Data) => { + let that = this; + let chartFXDJ2 = document.getElementById("chartFXDJ2"); + 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 (chartFXDJ2) { + let myChart = echarts.init(chartFXDJ2); myChart.setOption( { - // title: { - // text: "生产单元", - // left: "center", - // }, tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, + trigger: "item", + formatter: "{b} : {c} ({d}%)", }, legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", + 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) + + "%" + ); }, - 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 }, + 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, + }, }, ], }, @@ -650,103 +584,325 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; - 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' - }, + chartSCDY = (Data) => { + let chartSCDY = document.getElementById("chartSCDY"); + let myChart = echarts.init(chartSCDY); + 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: ["一级", "二级", "三级", "四级"], + }, + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", }, - grid: { - left: "3%", - right: "5%", - bottom: "12%", - top: "10%", - containLabel: true, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], + }, + grid: { + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: Data.NAME, }, - xAxis: { + ], + yAxis: [ + { type: "value", }, - yAxis: { - type: "category", - data: Data.NAME.slice(0, 10), + ], + series: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, - series: [ - { - name: "一级", - type: "bar", - stack: "总量", - label: { + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + label: { + normal: { show: true, - position: "insideRight", + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, }, - data: Data.LEVEL1.slice(0, 10), - itemStyle: { color: this.state.level1Color }, }, - { - name: "二级", - type: "bar", - stack: "总量", - label: { + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + label: { + normal: { show: true, - position: "insideRight", + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, }, - data: Data.LEVEL2.slice(0, 10), - itemStyle: { color: this.state.level2Color }, }, - { - name: "三级", - type: "bar", - stack: "总量", - label: { + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + label: { + normal: { show: true, - position: "insideRight", + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, }, - 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 - ); - } + }, + ], + }, + true + ); }; - chart14 = (Data) => { - let chart14s = document.getElementById("chart14"); - if (chart14s) { - let myChart = echarts.init(chart14s); + chartFXLB1 = (Data) => { + let chartFXLB1 = document.getElementById("chartFXLB1"); + let myChart = echarts.init(chartFXLB1); + myChart.setOption( + { + // title: { + // text: "风险类别(等级)", + // left: "center", + // }, + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + }, + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], + }, + grid: { + left: "3%", + right: "5%", + bottom: "12%", + top: "10%", + containLabel: true, + }, + xAxis: { + type: "category", + data: Data.NAME.slice(0, 10), + axisLabel: { + interval: 0, + rotate: 40, + formatter: function (value) { + return value + } + } + }, + yAxis: { + type: "value", + }, + series: [ + { + name: "一级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL1.slice(0, 8), + itemStyle: { color: this.state.level1Color }, + }, + { + name: "二级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL2.slice(0, 8), + itemStyle: { color: this.state.level2Color }, + }, + { + name: "三级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL3.slice(0, 8), + itemStyle: { color: this.state.level3Color }, + }, + { + name: "四级", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL4.slice(0, 8), + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + }; + chartFXLB2 = (Data) => { + let chartFXLB2 = document.getElementById("chartFXLB2"); + let myChart = echarts.init(chartFXLB2); + myChart.setOption( + { + // title: { + // text: "风险类别(等级)", + // left: "center", + // }, + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + }, + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["选矿厂", "尾矿库", "露天矿", "职能部门"], + }, + grid: { + left: "3%", + right: "5%", + bottom: "12%", + top: "10%", + containLabel: true, + }, + xAxis: { + type: "category", + data: Data.NAME.slice(0, 10), + axisLabel: { + interval: 0, + rotate: 40, + formatter: function (value) { + return value + } + } + }, + yAxis: { + type: "value", + }, + series: [ + { + name: "选矿厂", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL1.slice(0, 8), + itemStyle: { color: this.state.level1Color }, + }, + { + name: "尾矿库", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL2.slice(0, 8), + itemStyle: { color: this.state.level2Color }, + }, + { + name: "露天矿", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL3.slice(0, 8), + itemStyle: { color: this.state.level3Color }, + }, + { + name: "职能部门", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL4.slice(0, 8), + itemStyle: { color: this.state.level4Color }, + }, + ], + }, + true + ); + }; + chartZRDW = (Data) => { + let chartZRDW = document.getElementById("chartZRDW"); + if (chartZRDW) { + let myChart = echarts.init(chartZRDW); myChart.setOption( { // title: { @@ -827,10 +983,10 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; - chart15 = (Data) => { - let chart15s = document.getElementById("chart15"); - if (chart15s) { - let myChart = echarts.init(chart15s); + chartCJ = (Data) => { + let chartCJ = document.getElementById("chartCJ"); + if (chartCJ) { + let myChart = echarts.init(chartCJ); myChart.setOption( { // title: { @@ -879,289 +1035,79 @@ class BI014RiskPerformanceModel extends React.Component { type: "bar", data: Data.LEVEL1, itemStyle: { color: this.state.level1Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, { name: "二级", type: "bar", data: Data.LEVEL2, itemStyle: { color: this.state.level2Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, { name: "三级", type: "bar", data: Data.LEVEL3, itemStyle: { color: this.state.level3Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, { 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; + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, }, }, }, ], - 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); + chartQY = (Data) => { + let chartQY = document.getElementById("chartQY"); + if (chartQY) { + let myChart = echarts.init(chartQY); myChart.setOption( { // title: { @@ -1251,14 +1197,516 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; - chart20 = (Data) => { - let chart20s = document.getElementById("chart20"); - if (chart20s) { - let myChart = echarts.init(chart20s); + subtractRandomNotLessThanSelf = (obj) => { + function getRandomNotLessThan(num) { + return Math.floor(Math.random() * num); + } + for (let key in obj) { + if (Array.isArray(obj[key])) { + obj[key] = obj[key].map((number) => { + if (typeof number === "number") { + const randomSubtraction = getRandomNotLessThan(number); + return Math.floor(number - randomSubtraction); // 确保结果也为整数 + } else { + return number; + } + }); + } + } + return obj; + }; + chart21 = (Data, Title) => { + let chart21s = document.getElementById("chart21"); + if (chart21s) { + let myChart = echarts.init(chart21s); + myChart.setOption( + { + title: { + text: Title, + left: "center", + }, + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + }, + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], + }, + grid: { + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: Data.NAME, + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + ], + }, + true + ); + } + }; + chart22 = (Data, Title) => { + let chart22s = document.getElementById("chart22"); + if (chart22s) { + let myChart = echarts.init(chart22s); + myChart.setOption( + { + title: { + text: Title, + left: "center", + }, + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + }, + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], + }, + grid: { + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: Data.NAME, + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + ], + }, + true + ); + } + }; + chart23 = (Data, Title) => { + let chart23s = document.getElementById("chart23"); + if (chart23s) { + let myChart = echarts.init(chart23s); + myChart.setOption( + { + title: { + text: Title, + left: "center", + }, + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + }, + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], + }, + grid: { + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: Data.NAME, + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + ], + }, + true + ); + } + }; + chart24 = (Data, Title) => { + let chart24s = document.getElementById("chart24"); + if (chart24s) { + let myChart = echarts.init(chart24s); + myChart.setOption( + { + title: { + text: Title, + left: "center", + }, + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + }, + legend: { + left: "center", + align: "left", + bottom: "2%", + textStyle: { + color: "#000", + }, + itemWidth: 10, + itemHeight: 10, + data: ["一级", "二级", "三级", "四级"], + }, + grid: { + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: Data.NAME, + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { color: this.state.level1Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "二级", + type: "bar", + data: Data.LEVEL2, + itemStyle: { color: this.state.level2Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "三级", + type: "bar", + data: Data.LEVEL3, + itemStyle: { color: this.state.level3Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + { + name: "四级", + type: "bar", + data: Data.LEVEL4, + itemStyle: { color: this.state.level4Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + ], + }, + true + ); + } + }; + chart25 = (Data, Title) => { + let chart25s = document.getElementById("chart25"); + if (chart25s) { + let myChart = echarts.init(chart25s); myChart.setOption( { // title: { - // text: "风险类别(等级)", + // text: Title, // left: "center", // }, tooltip: { @@ -1281,62 +1729,97 @@ class BI014RiskPerformanceModel extends React.Component { }, grid: { left: "3%", - right: "5%", + right: "3%", bottom: "12%", top: "10%", containLabel: true, }, - xAxis: { - type: "value", - }, - yAxis: { - type: "category", - data: Data.NAME, - }, + xAxis: [ + { + type: "category", + data: Data.NAME, + axisLabel: { + interval: 0, + rotate: 40, + formatter: function (value) { + return value + } + } + }, + ], + yAxis: [ + { + type: "value", + }, + ], series: [ { name: "一级", type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, data: Data.LEVEL1, itemStyle: { color: this.state.level1Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, { name: "二级", type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, data: Data.LEVEL2, itemStyle: { color: this.state.level2Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, { name: "三级", type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, data: Data.LEVEL3, itemStyle: { color: this.state.level3Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, { name: "四级", type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, data: Data.LEVEL4, itemStyle: { color: this.state.level4Color }, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, ], }, @@ -1344,42 +1827,41 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; - 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 == "风险类别") { + ? "选矿厂" + : "露天矿"; + if (formCode == "风险类别1") { titleTemp += "风险类别"; - this.chart20(this.state.ret.Data.CHARTLIST[1]); - } else if (formCode == "生产单元") { + this.chart25(this.state.ret.Data.CHARTLIST[1]); + this.setState({ isShow2: true }) + } else if (formCode == "风险类别2") { + titleTemp += "风险类别"; + this.chart21(this.state.ret.Data.CHARTLIST[1], "选矿厂"); + this.chart22(this.state.ret.Data.CHARTLIST[1], "尾矿库"); + this.chart23(this.state.ret.Data.CHARTLIST[1], "露天矿"); + this.chart24(this.state.ret.Data.CHARTLIST[1], "职能部门"); + this.setState({ isShow1: true }) + } + else if (formCode == "生产单元") { + this.setState({ isShow1: true }) titleTemp += "生产单元"; - //this.chart21(this.state.ret.Data.CHARTLIST[1]); - } else if (formCode == "") { - titleTemp += ""; + this.chart21(this.state.ret.Data.CHARTLIST[3], "选矿厂"); + this.chart22(this.state.ret.Data.CHARTLIST[3], "尾矿库"); + this.chart23(this.state.ret.Data.CHARTLIST[3], "露天矿"); + this.chart24(this.state.ret.Data.CHARTLIST[3], "职能部门"); + + } else if (formCode == "层级") { + this.setState({ isShow1: true }) + titleTemp += "层级"; + this.chart21(this.state.ret.Data.CHARTLIST[0], "公司"); + this.chart22(this.state.ret.Data.CHARTLIST[0], "部门"); + this.chart23(this.state.ret.Data.CHARTLIST[0], "车间"); + this.chart24(this.state.ret.Data.CHARTLIST[0], "班组"); } else if (formCode == "") { titleTemp += ""; } else if (formCode == "") { @@ -1397,7 +1879,6 @@ class BI014RiskPerformanceModel extends React.Component { }; this.setState({ tmpData: newtmpData }, () => { var detailForm = { - isShow: true, formCode: formCode, title: titleTemp, }; @@ -1409,83 +1890,21 @@ class BI014RiskPerformanceModel extends React.Component { //详情弹窗关闭（隐藏） detailFormClose = () => { var detailForm = { - isShow: false, formCode: "", title: "", }; this.setState({ + isShow1: false, + isShow2: false, 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个层级 公司 部门。。）风险等级
-
+
- + +
+
+
+
（动态4个层级 公司 部门。。）风险等级
+
+
+
+ + +
@@ -1535,107 +1985,71 @@ class BI014RiskPerformanceModel extends React.Component { >
-
+
- + - +
风险类别
-
this.showDetailModal("风险类别")}> +
this.showDetailModal("风险类别1")}>
-
-
-
{ - this.choose(1); - }} - > - 选矿厂，尾矿库，露天矿 -
-
{ - this.choose(2); - }} - > - 公司，部门，车间，班组 -
-
- {this.state.choose == 1 ? ( -
- ) : ( -
- )} +
+
- - + +
-
层级
+
风险类别
+
+
this.showDetailModal("风险类别2")}> +
-
-
{ - this.chooseTwo(1); - }} - > - 按等级划分 -
-
{ - this.chooseTwo(2); - }} - > - 按生产单元+等级划分 -
-
- {this.state.chooseTwo == 1 ? ( -
- ) : ( -
- )} +
- + +
+
+
+
层级
+
+
this.showDetailModal("层级")}> + +
+
+
+
+
+ + +
@@ -1643,44 +2057,14 @@ class BI014RiskPerformanceModel extends React.Component {
-
-
{ - this.chooseThree(1); - }} - > - 按等级划分 -
-
{ - this.chooseThree(2); - }} - > - 按生产单元+等级划分 -
-
- {this.state.chooseThree == 1 ? ( -
- ) : ( -
- )} +
- +
@@ -1689,8 +2073,8 @@ class BI014RiskPerformanceModel extends React.Component {
- - + +
@@ -1699,7 +2083,7 @@ class BI014RiskPerformanceModel extends React.Component {
-
+