From 719d548f3bfe46b51728dfaf0ead32151b5b0e75 Mon Sep 17 00:00:00 2001 From: wjn Date: Mon, 8 Apr 2024 17:05:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BI/BI014RiskPerformanceModel.js | 336 ++++++++++-------- 1 file changed, 191 insertions(+), 145 deletions(-) diff --git a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js index d5310ca..862b1ac 100644 --- a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js +++ b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js @@ -58,20 +58,17 @@ class BI014RiskPerformanceModel extends React.Component { { DATE: "2024-12-31 23:59:59", COUNT: 116, TYPE: 1 }, { DATE: "2024-12-31 23:59:59", COUNT: 1154, TYPE: 0 }, ], - CHART11: + CHARTFXDJ1: { NAME: ["一级", "二级", "三级", "四级"], LEVEL1: [3, 8, 181, 1112], - LEVEL2: [8], - LEVEL3: [181], - LEVEL4: [1112], } , - CHART12: [ - { name: "露天矿", value: 3 }, - { name: "选矿厂", value: 8 }, - { name: "尾矿库", value: 181 }, - { name: "职能部门", value: 1112 }, + CHARTFXDJ2: [ + { name: "一级", value: 3 }, + { name: "二级", value: 8 }, + { name: "三级", value: 181 }, + { name: "四级", value: 1112 }, ], CHARTLIST: [ { @@ -172,11 +169,11 @@ class BI014RiskPerformanceModel extends React.Component { LEVEL4: [18, 33, 43, 21, 27], }, { - NAME: ["破碎一班", "破碎二班", "破碎三班", "磨重一班", "磨重二班", "磨重三班"], - LEVEL1: [0, 0, 0, 0, 0, 0], - LEVEL2: [0, 0, 0, 0, 1, 1], - LEVEL3: [1, 3, 7, 22, 43, 1], - LEVEL4: [7, 26, 8, 18, 21, 24], + NAME: ["破碎车间", "磨重车间", "破碎一班", "破碎二班", "破碎三班", "磨重一班", "磨重二班", "磨重三班"], + LEVEL1: [1, 3, 0, 0, 0, 0, 0, 0], + LEVEL2: [2, 4, 0, 0, 0, 0, 1, 1], + LEVEL3: [3, 5, 1, 3, 7, 22, 43, 1], + LEVEL4: [4, 6, 7, 26, 8, 18, 21, 24], }, { NAME: ["尾矿一班", "尾矿二班", "尾矿三班", "尾矿机修班"], @@ -253,6 +250,17 @@ class BI014RiskPerformanceModel extends React.Component { LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7] }, ], + CHARTZYRW1: + { + NAME: ["一般任务", "关键任务", "许可作业"], + LEVEL1: [67, 81, 91], + } + , + CHARTZYRW2: [ + { name: "一般任务", value: 67 }, + { name: "关键任务", value: 81 }, + { name: "许可作业", value: 91 }, + ], }, TotalCount: 0, MessageType: 0, @@ -276,28 +284,28 @@ class BI014RiskPerformanceModel extends React.Component { onlyData: false, onComplete: (ret) => { this.chart4(ret?.Data.DATECOUNTS); - this.chartFXDJ1(ret?.Data.CHART11); - this.chartFXDJ2(ret?.Data.CHART12); + this.chartFXDJ1(ret?.Data.CHARTFXDJ1); + this.chartFXDJ2(ret?.Data.CHARTFXDJ2); this.chartSCDY(ret?.Data.CHARTLIST[0]); - this.chartFXLB3(ret?.Data.CHARTLIST[1]); this.chartFXLB1(ret?.Data.CHARTLIST[1]); this.chartZRDW(ret?.Data.CHARTLIST[2]); this.chartCJ(ret?.Data.CHARTLIST[3]); - + this.chartZYRW1(this.state.ret.Data.CHARTZYRW1); + this.chartZYRW2(this.state.ret.Data.CHARTZYRW2); }, }); }; getBaseInfoData = (mineType) => { this.chart4(this.state.ret.Data.DATECOUNTS); - this.chartFXDJ1(this.state.ret.Data.CHART11); - this.chartFXDJ2(this.state.ret.Data.CHART12); + this.chartFXDJ1(this.state.ret.Data.CHARTFXDJ1); + this.chartFXDJ2(this.state.ret.Data.CHARTFXDJ2); this.chartSCDY(this.state.ret.Data.CHARTLIST[0]); - //this.chartFXLB3(this.state.ret.Data.CHARTLIST[1]); this.chartFXLB1(this.state.ret.Data.CHARTLIST[1]); this.chartCJ(this.state.ret.Data.CHARTLIST[3]); this.chartZRDW(this.state.ret.Data.CHARTLIST[2]); this.chartQY(this.state.ret.Data.CHARTLIST[4]); - + this.chartZYRW1(this.state.ret.Data.CHARTZYRW1); + this.chartZYRW2(this.state.ret.Data.CHARTZYRW2); }; chart4 = (data) => { let riskArr = []; @@ -504,10 +512,6 @@ class BI014RiskPerformanceModel extends React.Component { }, }, grid: { - left: "3%", - right: "3%", - bottom: "12%", - top: "10%", containLabel: true, }, xAxis: [ @@ -540,8 +544,18 @@ class BI014RiskPerformanceModel extends React.Component { } } }, - - barWidth: 30 + barWidth: 30, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, }, ], }, @@ -558,12 +572,12 @@ class BI014RiskPerformanceModel extends React.Component { { tooltip: { trigger: "item", - formatter: "{b} : {c} ({d}%)", + formatter: "{b} : ({d}%)", }, legend: { + left: "0%", bottom: "10%", - data: ["露天矿", "选矿厂", "尾矿库", "职能部门"], - + data: ["一级", "二级", "三级", "四级"], }, series: [ { @@ -571,13 +585,31 @@ class BI014RiskPerformanceModel extends React.Component { radius: '55%', center: ["50%", "45%"], data: Data, + itemStyle: { + color: function (params) { + switch (params.dataIndex) { + case 0: + return "#c02e30"; // 第一个柱子颜色 + case 1: + return "#f7aa52"; // 第二个柱子颜色 + case 2: + return "#fbe06a"; // 第三个柱子颜色 + case 3: + return "#5185f3"; // 第四个柱子颜色 + } + } + }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } - } + }, + label: { + show: true, // 开启标签显示 + formatter: '{d}%', // 格式化标签文本，仅显示数值 + }, }, ], }, @@ -705,105 +737,7 @@ class BI014RiskPerformanceModel extends React.Component { true ); }; - chartFXLB3 = (Data) => { - let chartFXLB3 = document.getElementById("chartFXLB3"); - let myChart = echarts.init(chartFXLB3); - myChart.setOption( - { - // title: { - // text: "风险类别(等级)", - // left: "center", - // }, - tooltip: { - trigger: "axis", - axisPointer: { - // 坐标轴指示器，坐标轴触发有效 - type: "shadow", // 默认为直线，可选为：'line' | 'shadow' - }, - }, - legend: { - left: "center", - align: "left", - bottom: "2%", - textStyle: { - color: "#000", - }, - itemWidth: 10, - itemHeight: 10, - data: ["一级", "二级", "三级", "四级"], - }, - grid: { - left: "3%", - right: "5%", - bottom: "12%", - top: "10%", - containLabel: true, - }, - xAxis: { - type: "category", - data: Data.NAME.slice(0, 10), - axisLabel: { - interval: 0, - rotate: 20, - formatter: function (value) { - return value - } - } - }, - yAxis: { - type: "value", - }, - series: [ - { - name: "一级", - type: "bar", - stack: "总量", - label: { - show: true, - position: "insideRight", - }, - data: Data.LEVEL1.slice(0, 10), - itemStyle: { color: this.state.level1Color }, - barWidth: 30 - }, - { - 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 - ); - }; + chartFXLB1 = (Data) => { let chartFXLB1 = document.getElementById("chartFXLB1"); let myChart = echarts.init(chartFXLB1); @@ -1209,6 +1143,125 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; + chartZYRW1 = (Data) => { + let chartZYRW1 = document.getElementById("chartZYRW1"); + if (chartZYRW1) { + let myChart = echarts.init(chartZYRW1); + myChart.setOption( + { + tooltip: { + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + }, + grid: { + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: Data.NAME, + }, + ], + yAxis: [ + { + type: "value", + }, + ], + series: [ + { + name: "一级", + type: "bar", + data: Data.LEVEL1, + itemStyle: { + color: function (params) { + switch (params.dataIndex) { + case 0: + return "#c02e30"; // 第一个柱子颜色 + case 1: + return "#f7aa52"; // 第二个柱子颜色 + case 2: + return "#fbe06a"; // 第三个柱子颜色 + case 3: + return "#5185f3"; // 第四个柱子颜色 + } + } + }, + barWidth: 30, + label: { + normal: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, + }, + }, + ], + }, + true + ); + } + }; + chartZYRW2 = (Data) => { + let that = this; + let chartZYRW2 = document.getElementById("chartZYRW2"); + if (chartZYRW2) { + let myChart = echarts.init(chartZYRW2); + myChart.setOption( + { + tooltip: { + trigger: "item", + formatter: "{b} : ({d}%)", + }, + legend: { + left: "0%", + bottom: "10%", + data: ["一般任务", "关键任务", "许可作业"], + }, + series: [ + { + type: "pie", + radius: '55%', + center: ["50%", "45%"], + data: Data, + itemStyle: { + color: function (params) { + switch (params.dataIndex) { + case 0: + return "#c02e30"; // 第一个柱子颜色 + case 1: + return "#f7aa52"; // 第二个柱子颜色 + case 2: + return "#fbe06a"; // 第三个柱子颜色 + case 3: + return "#5185f3"; // 第四个柱子颜色 + } + } + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + }, + label: { + show: true, // 开启标签显示 + formatter: '{d}%', // 格式化标签文本，仅显示数值 + }, + }, + ], + }, + true + ); + } + }; subtractRandomNotLessThanSelf = (obj) => { function getRandomNotLessThan(num) { return Math.floor(Math.random() * num); @@ -2006,10 +2059,10 @@ class BI014RiskPerformanceModel extends React.Component {
-
+
-
+
@@ -2144,23 +2197,16 @@ class BI014RiskPerformanceModel extends React.Component { - {/* +
-
风险类别
-
-
this.showDetailModal("风险类别1")}> - +
作业任务
-
-
-
- */} +
+
+