From 3ccab42b680db52ca8644e2f5679a65f4a9e575e Mon Sep 17 00:00:00 2001 From: wjn Date: Mon, 8 Apr 2024 14:39:48 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8A=A5=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomPages/BI/BI005LoginRecord.js | 4 +- .../BI/BI014RiskPerformanceModel.js | 520 ++++++++++-------- 2 files changed, 298 insertions(+), 226 deletions(-) diff --git a/src/components/CustomPages/BI/BI005LoginRecord.js b/src/components/CustomPages/BI/BI005LoginRecord.js index 3433025..7b22548 100644 --- a/src/components/CustomPages/BI/BI005LoginRecord.js +++ b/src/components/CustomPages/BI/BI005LoginRecord.js @@ -128,7 +128,9 @@ class BI005LoginRecord extends React.Component { } } if (this.state.totalActiveUsers == 0) { - this.state.totalActiveUsers = ret.Data.reverse().find(item => item.type === 0).COUNT; + //this.state.totalActiveUsers = ret.Data.reverse().find(item => item.type === 0)?.COUNT; + this.state.totalActiveUsers = 326; + } this.state.dates.push(moment().format('MM/DD')); this.state.loginNums.push(todayCount); diff --git a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js index c460801..d5310ca 100644 --- a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js +++ b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js @@ -58,12 +58,15 @@ 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: [ - { name: "一级", value: 3 }, - { name: "二级", value: 8 }, - { name: "三级", value: 181 }, - { name: "四级", value: 1112 }, - ], + CHART11: + { + NAME: ["一级", "二级", "三级", "四级"], + LEVEL1: [3, 8, 181, 1112], + LEVEL2: [8], + LEVEL3: [181], + LEVEL4: [1112], + } + , CHART12: [ { name: "露天矿", value: 3 }, { name: "选矿厂", value: 8 }, @@ -72,11 +75,11 @@ class BI014RiskPerformanceModel extends React.Component { ], CHARTLIST: [ { - NAME: ["选矿厂", "尾矿库", "露天矿", "职能部门"], + NAME: ["露天矿", "选矿厂", "尾矿库", "职能部门"], LEVEL1: [1, 0, 1, 1], LEVEL2: [0, 3, 2, 2], LEVEL3: [1, 3, 70, 105], - LEVEL4: [103, 223, 211, 575], + LEVEL4: [203, 223, 211, 475], }, { @@ -111,13 +114,13 @@ class BI014RiskPerformanceModel extends React.Component { 95, 46, 15, 10, 7, 6, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0, 0 ], LEVEL4: [ - 560, 300, 120, 50, 20, 15, 10, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0 + 260, 200, 120, 50, 20, 15, 10, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0 ], }, { NAME: [ - "生产一班", + "安全环保管理部", "选矿部", "机电设备管理办公室", "矿山部", @@ -128,36 +131,126 @@ class BI014RiskPerformanceModel extends React.Component { "技术管理部", "营销部", ], - LEVEL1: [35, 121, 227, 330, 97, 153, 178, 212, 25, 301], - LEVEL2: [39, 151, 202, 322, 45, 187, 239, 308, 112, 376], + LEVEL1: [0, 1, 0, 1, 0, 0, 1, 0, 0, 0], + LEVEL2: [0, 2, 0, 3, 0, 0, 1, 0, 0, 0], 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], + NAME: ["公司", "部门", "车间", "班组"], + LEVEL1: [2, 1, 0, 0], + LEVEL2: [2, 2, 2, 2], LEVEL3: [343, 121, 396, 78], LEVEL4: [215, 331, 37, 292], }, { 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], + LEVEL1: [1, 0, 0, 1, 0, 1, 0, 0, 0, 0], + LEVEL2: [2, 0, 0, 2, 1, 1, 0, 0, 0, 2], + LEVEL3: [220, 182, 171, 164, 134, 120, 102, 101, 83, 64], + LEVEL4: [250, 212, 201, 154, 144, 121, 117, 111, 93, 67], + }, + ], + TEAMLIST: [ + { + NAME: ["生产班", "民爆储存库班组", "穿孔班组", "爆破班组", "综合班组"], + LEVEL1: [1, 0, 1, 1, 0], + LEVEL2: [0, 1, 1, 2, 0], + LEVEL3: [10, 13, 20, 35, 33], + LEVEL4: [18, 33, 43, 21, 27], + }, + { + NAME: ["破碎一班", "破碎二班", "破碎三班", "磨重一班", "磨重二班", "磨重三班"], + LEVEL1: [0, 0, 0, 0, 0, 0], + LEVEL2: [0, 0, 0, 0, 1, 1], + LEVEL3: [1, 3, 7, 22, 43, 1], + LEVEL4: [7, 26, 8, 18, 21, 24], + }, + { + NAME: ["尾矿一班", "尾矿二班", "尾矿三班", "尾矿机修班"], + LEVEL1: [0, 0, 0, 0], + LEVEL2: [0, 0, 0, 0], + LEVEL3: [1, 3, 70, 105], + LEVEL4: [23, 13, 21, 15], + }, + { + NAME: ["保安班", "小车班", "食堂", "化验班", "采制样班"], + LEVEL1: [0, 0, 0, 0, 0], + LEVEL2: [0, 0, 0, 0, 0], + LEVEL3: [1, 3, 70, 15, 23], + LEVEL4: [13, 14, 17, 28, 11], + }, + ], + AREALIST: [ + { + NAME: ["电焊作业区", "修理场", "炸药库", "矿山", "加油站-采场"], + LEVEL1: [1, 0, 1, 1, 0], + LEVEL2: [0, 1, 1, 2, 0], + LEVEL3: [10, 13, 20, 35, 33], + LEVEL4: [18, 33, 43, 21, 27], + }, + { + NAME: ["破碎车间", "磨重车间", "尾矿库库区", "钨细泥回收车间", "综合回收车间", "尾矿库截洪单元"], + LEVEL1: [0, 0, 0, 0, 0, 0], + LEVEL2: [0, 0, 0, 0, 1, 1], + LEVEL3: [1, 3, 7, 22, 43, 1], + LEVEL4: [7, 26, 8, 18, 21, 24], + }, + { + NAME: ["尾矿库库区", "高压配电室", "炸药库区", "尾矿机修区"], + LEVEL1: [0, 0, 0, 0], + LEVEL2: [0, 0, 0, 0], + LEVEL3: [1, 3, 70, 105], + LEVEL4: [23, 13, 21, 15], + }, + { + NAME: ["保安办公室", "停车场", "食堂", "化验室", "排土场"], + LEVEL1: [0, 0, 0, 0, 0], + LEVEL2: [0, 0, 0, 0, 0], + LEVEL3: [1, 3, 70, 15, 23], + LEVEL4: [13, 14, 17, 28, 11], + }, + ], + RISKTYPELIST: [ + { + NAME: ["容器爆炸", "淹溺", "物体打击", "高处坠落", "起重伤害", "其他爆炸", "冒顶片帮", "火药爆炸"], + LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0], + LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0], + LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7], + LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7] + }, + { + NAME: ["其他伤害", "机械伤害", "灼烫", "容器爆炸", "中毒和窒息", "起重伤害", "冒顶片帮", "触电"], + LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0], + LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0], + LEVEL3: [71, 66, 55, 49, 34, 28, 17, 8], + LEVEL4: [69, 64, 53, 47, 32, 26, 15, 6] + }, + { + NAME: ["其他伤害", "车辆伤害", "火药爆炸", "高处坠落", "坍塌", "触电", "机械伤害", "灼烫"], + LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0], + LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0], + LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7], + LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7] + }, + { + NAME: ["机械伤害", "容器爆炸", "物体打击", "高处坠落", "火灾", "其他爆炸", "中毒和窒息", "触电"], + LEVEL1: [0, 0, 0, 0, 0, 0, 0, 0], + LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0], + LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7], + LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7] }, ], }, @@ -186,6 +279,7 @@ class BI014RiskPerformanceModel extends React.Component { this.chartFXDJ1(ret?.Data.CHART11); this.chartFXDJ2(ret?.Data.CHART12); 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]); @@ -198,8 +292,8 @@ class BI014RiskPerformanceModel extends React.Component { this.chartFXDJ1(this.state.ret.Data.CHART11); this.chartFXDJ2(this.state.ret.Data.CHART12); 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.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]); @@ -397,132 +491,67 @@ class BI014RiskPerformanceModel extends React.Component { } }; chartFXDJ1 = (Data) => { - let that = this; let chartFXDJ1 = document.getElementById("chartFXDJ1"); - 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 (chartFXDJ1) { let myChart = echarts.init(chartFXDJ1); 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) + - "%" - ); + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, }, + grid: { + left: "3%", + right: "3%", + bottom: "12%", + top: "10%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: Data.NAME, + }, + ], + yAxis: [ + { + type: "value", + }, + ], series: [ { - type: "pie", - radius: ["40%", "55%"], - center: ["30%", "50%"], - // radius: '65%', - // center: ['45%', '50%'], - data: Data, + name: "一级", + type: "bar", + data: Data.LEVEL1, itemStyle: { - //图形样式 - normal: { - borderColor: "#ffffff", - borderWidth: 2, - padding: "0 20px", - }, - }, - label: { - show: false, + color: function (params) { + switch (params.dataIndex) { + case 0: + return "#c02e30"; // 第一个柱子颜色 + case 1: + return "#f7aa52"; // 第二个柱子颜色 + case 2: + return "#fbe06a"; // 第三个柱子颜色 + case 3: + return "#5185f3"; // 第四个柱子颜色 + } + } }, + + barWidth: 30 }, ], }, 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.chartSCDY(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] - ); - } - } - }); } }; 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( @@ -532,49 +561,23 @@ class BI014RiskPerformanceModel extends React.Component { 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; - }); + bottom: "10%", + data: ["露天矿", "选矿厂", "尾矿库", "职能部门"], - 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%'], + radius: '55%', + center: ["50%", "45%"], data: Data, - itemStyle: { - //图形样式 - normal: { - borderColor: "#ffffff", - borderWidth: 2, - padding: "0 20px", - }, - }, - label: { - show: false, - }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } }, ], }, @@ -644,6 +647,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, + barWidth: 30 }, { name: "二级", @@ -701,9 +705,9 @@ class BI014RiskPerformanceModel extends React.Component { true ); }; - chartFXLB1 = (Data) => { - let chartFXLB1 = document.getElementById("chartFXLB1"); - let myChart = echarts.init(chartFXLB1); + chartFXLB3 = (Data) => { + let chartFXLB3 = document.getElementById("chartFXLB3"); + let myChart = echarts.init(chartFXLB3); myChart.setOption( { // title: { @@ -740,7 +744,7 @@ class BI014RiskPerformanceModel extends React.Component { data: Data.NAME.slice(0, 10), axisLabel: { interval: 0, - rotate: 40, + rotate: 20, formatter: function (value) { return value } @@ -760,6 +764,7 @@ class BI014RiskPerformanceModel extends React.Component { }, data: Data.LEVEL1.slice(0, 10), itemStyle: { color: this.state.level1Color }, + barWidth: 30 }, { name: "二级", @@ -799,9 +804,9 @@ class BI014RiskPerformanceModel extends React.Component { true ); }; - chartFXLB2 = (Data) => { - let chartFXLB2 = document.getElementById("chartFXLB2"); - let myChart = echarts.init(chartFXLB2); + chartFXLB1 = (Data) => { + let chartFXLB1 = document.getElementById("chartFXLB1"); + let myChart = echarts.init(chartFXLB1); myChart.setOption( { // title: { @@ -824,7 +829,7 @@ class BI014RiskPerformanceModel extends React.Component { }, itemWidth: 10, itemHeight: 10, - data: ["选矿厂", "尾矿库", "露天矿", "职能部门"], + data: ["露天矿", "选矿厂", "尾矿库", "职能部门"], }, grid: { left: "3%", @@ -838,7 +843,7 @@ class BI014RiskPerformanceModel extends React.Component { data: Data.NAME.slice(0, 10), axisLabel: { interval: 0, - rotate: 40, + rotate: 20, formatter: function (value) { return value } @@ -848,6 +853,18 @@ class BI014RiskPerformanceModel extends React.Component { type: "value", }, series: [ + { + name: "露天矿", + type: "bar", + stack: "总量", + label: { + show: true, + position: "insideRight", + }, + data: Data.LEVEL3.slice(0, 10), + itemStyle: { color: this.state.level3Color }, + barWidth: 30 + }, { name: "选矿厂", type: "bar", @@ -870,17 +887,6 @@ class BI014RiskPerformanceModel extends React.Component { 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", @@ -938,7 +944,7 @@ class BI014RiskPerformanceModel extends React.Component { data: Data.NAME, axisLabel: { interval: 0, - rotate: 0, + rotate: 20, formatter: function (value) { return value; }, @@ -1138,11 +1144,18 @@ class BI014RiskPerformanceModel extends React.Component { containLabel: true, }, xAxis: { - type: "value", - }, - yAxis: { type: "category", data: Data.NAME, + axisLabel: { + interval: 0, + rotate: 20, + formatter: function (value) { + return value + } + } + }, + yAxis: { + type: "value", }, series: [ { @@ -1155,6 +1168,7 @@ class BI014RiskPerformanceModel extends React.Component { }, data: Data.LEVEL1, itemStyle: { color: this.state.level1Color }, + barWidth: 30 }, { name: "二级", @@ -1213,7 +1227,7 @@ class BI014RiskPerformanceModel extends React.Component { } return obj; }; - chart21 = (Data, Title) => { + chart21 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => { let chart21s = document.getElementById("chart21"); if (chart21s) { let myChart = echarts.init(chart21s); @@ -1252,6 +1266,13 @@ class BI014RiskPerformanceModel extends React.Component { { type: "category", data: Data.NAME, + axisLabel: { + interval: 0, + rotate: 30, + formatter: function (value) { + return value + } + } }, ], yAxis: [ @@ -1264,6 +1285,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "一级", type: "bar", data: Data.LEVEL1, + stack: Stack1, itemStyle: { color: this.state.level1Color }, label: { normal: { @@ -1276,11 +1298,13 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, + barWidth: 30 }, { name: "二级", type: "bar", data: Data.LEVEL2, + stack: Stack2, itemStyle: { color: this.state.level2Color }, label: { normal: { @@ -1298,6 +1322,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "三级", type: "bar", data: Data.LEVEL3, + stack: Stack3, itemStyle: { color: this.state.level3Color }, label: { normal: { @@ -1315,6 +1340,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "四级", type: "bar", data: Data.LEVEL4, + stack: Stack4, itemStyle: { color: this.state.level4Color }, label: { normal: { @@ -1334,7 +1360,7 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; - chart22 = (Data, Title) => { + chart22 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => { let chart22s = document.getElementById("chart22"); if (chart22s) { let myChart = echarts.init(chart22s); @@ -1373,6 +1399,13 @@ class BI014RiskPerformanceModel extends React.Component { { type: "category", data: Data.NAME, + axisLabel: { + interval: 0, + rotate: 30, + formatter: function (value) { + return value + } + } }, ], yAxis: [ @@ -1385,6 +1418,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "一级", type: "bar", data: Data.LEVEL1, + stack: Stack1, itemStyle: { color: this.state.level1Color }, label: { normal: { @@ -1397,11 +1431,13 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, + barWidth: 30 }, { name: "二级", type: "bar", data: Data.LEVEL2, + stack: Stack2, itemStyle: { color: this.state.level2Color }, label: { normal: { @@ -1419,6 +1455,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "三级", type: "bar", data: Data.LEVEL3, + stack: Stack3, itemStyle: { color: this.state.level3Color }, label: { normal: { @@ -1436,6 +1473,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "四级", type: "bar", data: Data.LEVEL4, + stack: Stack4, itemStyle: { color: this.state.level4Color }, label: { normal: { @@ -1455,7 +1493,7 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; - chart23 = (Data, Title) => { + chart23 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => { let chart23s = document.getElementById("chart23"); if (chart23s) { let myChart = echarts.init(chart23s); @@ -1494,6 +1532,13 @@ class BI014RiskPerformanceModel extends React.Component { { type: "category", data: Data.NAME, + axisLabel: { + interval: 0, + rotate: 30, + formatter: function (value) { + return value + } + } }, ], yAxis: [ @@ -1506,6 +1551,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "一级", type: "bar", data: Data.LEVEL1, + stack: Stack1, itemStyle: { color: this.state.level1Color }, label: { normal: { @@ -1518,11 +1564,13 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, + barWidth: 30 }, { name: "二级", type: "bar", data: Data.LEVEL2, + stack: Stack2, itemStyle: { color: this.state.level2Color }, label: { normal: { @@ -1540,6 +1588,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "三级", type: "bar", data: Data.LEVEL3, + stack: Stack3, itemStyle: { color: this.state.level3Color }, label: { normal: { @@ -1557,6 +1606,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "四级", type: "bar", data: Data.LEVEL4, + stack: Stack4, itemStyle: { color: this.state.level4Color }, label: { normal: { @@ -1576,7 +1626,7 @@ class BI014RiskPerformanceModel extends React.Component { ); } }; - chart24 = (Data, Title) => { + chart24 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => { let chart24s = document.getElementById("chart24"); if (chart24s) { let myChart = echarts.init(chart24s); @@ -1615,6 +1665,13 @@ class BI014RiskPerformanceModel extends React.Component { { type: "category", data: Data.NAME, + axisLabel: { + interval: 0, + rotate: 30, + formatter: function (value) { + return value + } + } }, ], yAxis: [ @@ -1627,6 +1684,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "一级", type: "bar", data: Data.LEVEL1, + stack: Stack1, itemStyle: { color: this.state.level1Color }, label: { normal: { @@ -1639,11 +1697,13 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, + barWidth: 30 }, { name: "二级", type: "bar", data: Data.LEVEL2, + stack: Stack2, itemStyle: { color: this.state.level2Color }, label: { normal: { @@ -1661,6 +1721,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "三级", type: "bar", data: Data.LEVEL3, + stack: Stack3, itemStyle: { color: this.state.level3Color }, label: { normal: { @@ -1678,6 +1739,7 @@ class BI014RiskPerformanceModel extends React.Component { name: "四级", type: "bar", data: Data.LEVEL4, + stack: Stack4, itemStyle: { color: this.state.level4Color }, label: { normal: { @@ -1738,7 +1800,7 @@ class BI014RiskPerformanceModel extends React.Component { data: Data.NAME, axisLabel: { interval: 0, - rotate: 40, + rotate: 20, formatter: function (value) { return value } @@ -1756,6 +1818,8 @@ class BI014RiskPerformanceModel extends React.Component { type: "bar", data: Data.LEVEL1, itemStyle: { color: this.state.level1Color }, + stack: "总量", + barWidth: 30, label: { normal: { show: true, @@ -1773,6 +1837,8 @@ class BI014RiskPerformanceModel extends React.Component { type: "bar", data: Data.LEVEL2, itemStyle: { color: this.state.level2Color }, + stack: "总量", + barWidth: 30, label: { normal: { show: true, @@ -1790,6 +1856,8 @@ class BI014RiskPerformanceModel extends React.Component { type: "bar", data: Data.LEVEL3, itemStyle: { color: this.state.level3Color }, + stack: "总量", + barWidth: 30, label: { normal: { show: true, @@ -1807,6 +1875,8 @@ class BI014RiskPerformanceModel extends React.Component { type: "bar", data: Data.LEVEL4, itemStyle: { color: this.state.level4Color }, + stack: "总量", + barWidth: 30, label: { normal: { show: true, @@ -1839,40 +1909,40 @@ class BI014RiskPerformanceModel extends React.Component { 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.chart21(this.state.ret.Data.RISKTYPELIST[0], "露天矿", "1", "1", "1", "1"); + this.chart22(this.state.ret.Data.RISKTYPELIST[1], "选矿厂", "1", "1", "1", "1"); + this.chart23(this.state.ret.Data.RISKTYPELIST[2], "尾矿库", "1", "1", "1", "1"); + this.chart24(this.state.ret.Data.RISKTYPELIST[3], "职能部门", "1", "1", "1", "1"); this.setState({ isShow1: true }) } else if (formCode == "生产单元") { this.setState({ isShow1: true }) titleTemp += "生产单元"; - this.chart21(this.state.ret.Data.CHARTLIST[3], "选矿厂"); - this.chart22(this.state.ret.Data.CHARTLIST[3], "尾矿库"); - this.chart23(this.state.ret.Data.CHARTLIST[3], "露天矿"); - this.chart24(this.state.ret.Data.CHARTLIST[3], "职能部门"); + this.chart21(this.state.ret.Data.CHARTLIST[3], "露天矿", "1", "2", "3", "4"); + this.chart22(this.state.ret.Data.CHARTLIST[3], "选矿厂", "1", "2", "3", "4"); + this.chart23(this.state.ret.Data.CHARTLIST[3], "尾矿库", "1", "2", "3", "4"); + this.chart24(this.state.ret.Data.CHARTLIST[3], "职能部门", "1", "2", "3", "4"); } else if (formCode == "层级") { this.setState({ isShow1: true }) titleTemp += "层级"; - this.chart21(this.state.ret.Data.CHARTLIST[0], "公司"); - this.chart22(this.state.ret.Data.CHARTLIST[0], "部门"); - this.chart23(this.state.ret.Data.CHARTLIST[0], "车间"); - this.chart24(this.state.ret.Data.CHARTLIST[0], "班组"); + this.chart21(this.state.ret.Data.CHARTLIST[0], "公司", "1", "2", "3", "4"); + this.chart22(this.state.ret.Data.CHARTLIST[0], "部门", "1", "2", "3", "4"); + this.chart23(this.state.ret.Data.CHARTLIST[0], "车间", "1", "2", "3", "4"); + this.chart24(this.state.ret.Data.CHARTLIST[0], "班组", "1", "2", "3", "4"); } else if (formCode == "责任单位") { this.setState({ isShow1: true }) titleTemp += "责任单位"; - this.chart21(this.state.ret.Data.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], "班组"); + this.chart21(this.state.ret.Data.TEAMLIST[0], "露天矿", "1", "1", "1", "1"); + this.chart22(this.state.ret.Data.TEAMLIST[1], "选矿厂", "1", "1", "1", "1"); + this.chart23(this.state.ret.Data.TEAMLIST[2], "尾矿库", "1", "1", "1", "1"); + this.chart24(this.state.ret.Data.TEAMLIST[3], "职能部门", "1", "1", "1", "1"); } else if (formCode == "区域") { this.setState({ isShow1: true }) titleTemp += "区域"; - this.chart21(this.state.ret.Data.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], "班组"); + this.chart21(this.state.ret.Data.AREALIST[0], "露天矿", "1", "1", "1", "1"); + this.chart22(this.state.ret.Data.AREALIST[1], "选矿厂", "1", "1", "1", "1"); + this.chart23(this.state.ret.Data.AREALIST[2], "尾矿库", "1", "1", "1", "1"); + this.chart24(this.state.ret.Data.AREALIST[3], "职能部门", "1", "1", "1", "1"); } const newtmpData = { @@ -1963,7 +2033,7 @@ class BI014RiskPerformanceModel extends React.Component {
-
（动态4个层级 公司 部门。。）风险等级
+
风险等级
@@ -2062,7 +2132,7 @@ class BI014RiskPerformanceModel extends React.Component {
风险类别
-
this.showDetailModal("风险类别1")}> +
this.showDetailModal("风险类别2")}> - + {/*
风险类别
-
this.showDetailModal("风险类别2")}> +
this.showDetailModal("风险类别1")}>
-
+
- + */}
From 719d548f3bfe46b51728dfaf0ead32151b5b0e75 Mon Sep 17 00:00:00 2001 From: wjn Date: Mon, 8 Apr 2024 17:05:07 +0800 Subject: [PATCH 2/4] =?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")}> - +
作业任务
-
-
-
- */} +
+
+
From 7458d2fac56d7d2b2dfb4deedafa799451ae282a Mon Sep 17 00:00:00 2001 From: wyw <571921741@qq.com> Date: Tue, 9 Apr 2024 10:38:02 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E9=9A=90=E6=82=A3=E5=BA=93=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomPages/BS/BS044ShowPrint.js | 9 ++- .../CustomPages/BS/BS064ShowPrint.js | 55 ++++++++++++++++++- 2 files changed, 61 insertions(+), 3 deletions(-) diff --git a/src/components/CustomPages/BS/BS044ShowPrint.js b/src/components/CustomPages/BS/BS044ShowPrint.js index 03cc529..2a53e0d 100644 --- a/src/components/CustomPages/BS/BS044ShowPrint.js +++ b/src/components/CustomPages/BS/BS044ShowPrint.js @@ -32,7 +32,12 @@ class BS044ShowPrint extends React.Component { loadData = () => { let json = initFilter(this.props.login.OrgId); - extendRule(json, 'ID', 1, this.props.data.id); + if (this.props.data.SUBMIT_CONTENT_ID) { + //隐患库 查看整改单 只取 SUBMIT_CONTENT_ID ，ID传值是框架需求所传值无实际意义 + extendRule(json, 'RISK_SUBMIT_CONTENT_ID', 1, this.props.data.SUBMIT_CONTENT_ID); + } else { + extendRule(json, 'ID', 1, this.props.data.id); + } extendInclude(json, 'Nav_UserDeal.Nav_UserSignFiles.Nav_ImgFile.Nav_File'); extendInclude(json, 'Nav_UserCheck.Nav_UserSignFiles.Nav_ImgFile.Nav_File'); @@ -157,7 +162,7 @@ class BS044ShowPrint extends React.Component { } { data.Nav_ApplyDetail == null ? null : - { + { '延期理由：' + data.Nav_ApplyDetail.REASON + ' 原整改期限：' + data.Nav_ApplyDetail.LastDate + (data.Nav_ApplyDetail.TEMPDEMAND != null ? (" 临时整改建议与措施：" + data.Nav_ApplyDetail.TEMPDEMAND) : '') } } diff --git a/src/components/CustomPages/BS/BS064ShowPrint.js b/src/components/CustomPages/BS/BS064ShowPrint.js index 9c547c2..5732279 100644 --- a/src/components/CustomPages/BS/BS064ShowPrint.js +++ b/src/components/CustomPages/BS/BS064ShowPrint.js @@ -1,4 +1,4 @@ -import { Button, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table } from 'antd'; +import { Button, Icon,Modal, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table } from 'antd'; import React from 'react'; import { initFilter, extendRule, extendIgnoreDataRule, extendInclude, setDataFieldValue, showApprove, guid, initQueryFilter } from "../../../utils/common"; import ReactToPrint from "react-to-print"; @@ -18,6 +18,13 @@ class BS064ShowPrint extends React.Component { this.state = { data: null, BtnAgreeDisplay: 'none', + //弹窗参数 + detailForm: { + isShow: false, + formCode:"BS044_SHOWPRINT", + title: "隐患整改单", + ID:'' + }, }; }; @@ -62,6 +69,37 @@ class BS064ShowPrint extends React.Component { XLSX.writeFile(wb, "隐患上报表.xlsx") } + + //显示详情弹窗 + showDetailModal = (SUBMIT_CONTENT_ID) => { + const newtmpData = { + data: { + id: SUBMIT_CONTENT_ID,//必须动态参数 这个会影响页面去后台操作数据 '00000000-0000-0000-0000-000000000000' 或者 ''都不行 + SUBMIT_CONTENT_ID: SUBMIT_CONTENT_ID, + }, + formCode: "BS044_SHOWPRINT", + }; + this.setState({ tmpData: newtmpData }, () => { + var detailForm = { + isShow: true, + title: "隐患整改单", + }; + this.setState({ + detailForm: detailForm, + }); + }); + }; + + //详情弹窗关闭（隐藏） + detailFormClose = () => { + var detailForm = { + isShow: false, + }; + this.setState({ + detailForm: detailForm, + }); + }; + render() { const { data } = this.state; return
@@ -90,6 +128,7 @@ class BS064ShowPrint extends React.Component { 隐患地点 整改完成时间（归档时间） 整改人 + 操作 { data?.map((item, i) => { @@ -102,12 +141,26 @@ class BS064ShowPrint extends React.Component { {item.ADDRESS} {item.FINISH_TIME} {item.ACTURE_USERNAME} +
this.showDetailModal(item.SUBMIT_CONTENT_ID)}>
}) }
+
+
+ + + +
} From 4454a4eda8adbcfee87c8af9fab057d22ac62575 Mon Sep 17 00:00:00 2001 From: wjn Date: Tue, 9 Apr 2024 11:09:14 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BI/BI014RiskPerformanceModel.js | 135 +++++++++++++----- .../CustomPages/HM/HM042ShowPrint.js | 66 +++++++++ 2 files changed, 163 insertions(+), 38 deletions(-) diff --git a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js index 862b1ac..2551f05 100644 --- a/src/components/CustomPages/BI/BI014RiskPerformanceModel.js +++ b/src/components/CustomPages/BI/BI014RiskPerformanceModel.js @@ -122,16 +122,14 @@ class BI014RiskPerformanceModel extends React.Component { "机电设备管理办公室", "矿山部", "财务部", - "办公室", "非金属资源部筹备组", "企业管理部", "技术管理部", - "营销部", ], - LEVEL1: [0, 1, 0, 1, 0, 0, 1, 0, 0, 0], - LEVEL2: [0, 2, 0, 3, 0, 0, 1, 0, 0, 0], - LEVEL3: [56, 109, 273, 381, 74, 135, 215, 296, 123, 335], - LEVEL4: [23, 168, 250, 390, 62, 117, 244, 313, 89, 367], + LEVEL1: [0, 1, 0, 1, 0, 0, 1, 0], + LEVEL2: [0, 2, 0, 3, 0, 0, 1, 0], + LEVEL3: [56, 109, 273, 381, 74, 135, 215, 335], + LEVEL4: [23, 168, 250, 390, 62, 117, 244, 367], }, { @@ -252,14 +250,14 @@ class BI014RiskPerformanceModel extends React.Component { ], CHARTZYRW1: { - NAME: ["一般任务", "关键任务", "许可作业"], - LEVEL1: [67, 81, 91], + NAME: ["许可作业", "关键任务", "一般任务"], + LEVEL1: [67, 81, 191], } , CHARTZYRW2: [ - { name: "一般任务", value: 67 }, + { name: "许可作业", value: 67 }, { name: "关键任务", value: 81 }, - { name: "许可作业", value: 91 }, + { name: "一般任务", value: 191 }, ], }, TotalCount: 0, @@ -527,6 +525,7 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, @@ -544,7 +543,6 @@ class BI014RiskPerformanceModel extends React.Component { } } }, - barWidth: 30, label: { normal: { show: true, @@ -664,6 +662,7 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, @@ -679,9 +678,10 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, - barWidth: 30 + }, { + barWidth: 20, name: "二级", type: "bar", data: Data.LEVEL2, @@ -699,6 +699,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "三级", type: "bar", data: Data.LEVEL3, @@ -716,6 +717,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "四级", type: "bar", data: Data.LEVEL4, @@ -788,6 +790,7 @@ class BI014RiskPerformanceModel extends React.Component { }, series: [ { + barWidth: 20, name: "露天矿", type: "bar", stack: "总量", @@ -797,9 +800,9 @@ class BI014RiskPerformanceModel extends React.Component { }, data: Data.LEVEL3.slice(0, 10), itemStyle: { color: this.state.level3Color }, - barWidth: 30 }, { + barWidth: 20, name: "选矿厂", type: "bar", stack: "总量", @@ -811,6 +814,7 @@ class BI014RiskPerformanceModel extends React.Component { itemStyle: { color: this.state.level1Color }, }, { + barWidth: 20, name: "尾矿库", type: "bar", stack: "总量", @@ -822,6 +826,7 @@ class BI014RiskPerformanceModel extends React.Component { itemStyle: { color: this.state.level2Color }, }, { + barWidth: 20, name: "职能部门", type: "bar", stack: "总量", @@ -843,10 +848,6 @@ class BI014RiskPerformanceModel extends React.Component { let myChart = echarts.init(chartZRDW); myChart.setOption( { - // title: { - // text: "责任单位(等级)", - // left: "center", - // }, tooltip: { trigger: "axis", axisPointer: { @@ -892,28 +893,68 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, itemStyle: { color: this.state.level1Color }, + label: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, }, { + barWidth: 20, name: "二级", type: "bar", data: Data.LEVEL2, itemStyle: { color: this.state.level2Color }, + label: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, }, { + barWidth: 20, name: "三级", type: "bar", data: Data.LEVEL3, itemStyle: { color: this.state.level3Color }, + label: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, }, { + barWidth: 20, name: "四级", type: "bar", data: Data.LEVEL4, itemStyle: { color: this.state.level4Color }, + label: { + show: true, + position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置 + formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数 + textStyle: { + fontSize: 12, // 字体大小 + color: '#333', // 字体颜色 + }, + }, }, ], }, @@ -969,6 +1010,7 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, @@ -986,6 +1028,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "二级", type: "bar", data: Data.LEVEL2, @@ -1003,6 +1046,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "三级", type: "bar", data: Data.LEVEL3, @@ -1020,6 +1064,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "四级", type: "bar", data: Data.LEVEL4, @@ -1093,6 +1138,7 @@ class BI014RiskPerformanceModel extends React.Component { }, series: [ { + barWidth: 20, name: "一级", type: "bar", stack: "总量", @@ -1102,9 +1148,9 @@ class BI014RiskPerformanceModel extends React.Component { }, data: Data.LEVEL1, itemStyle: { color: this.state.level1Color }, - barWidth: 30 }, { + barWidth: 20, name: "二级", type: "bar", stack: "总量", @@ -1116,6 +1162,7 @@ class BI014RiskPerformanceModel extends React.Component { itemStyle: { color: this.state.level2Color }, }, { + barWidth: 20, name: "三级", type: "bar", stack: "总量", @@ -1127,6 +1174,7 @@ class BI014RiskPerformanceModel extends React.Component { itemStyle: { color: this.state.level3Color }, }, { + barWidth: 20, name: "四级", type: "bar", stack: "总量", @@ -1172,6 +1220,7 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, @@ -1179,17 +1228,14 @@ class BI014RiskPerformanceModel extends React.Component { color: function (params) { switch (params.dataIndex) { case 0: - return "#c02e30"; // 第一个柱子颜色 + return "#f7aa52"; // 第一个柱子颜色 case 1: - return "#f7aa52"; // 第二个柱子颜色 + return "#fbe06a"; // 第二个柱子颜色 case 2: - return "#fbe06a"; // 第三个柱子颜色 - case 3: - return "#5185f3"; // 第四个柱子颜色 + return "#5185f3"; // 第三个柱子颜色 } } }, - barWidth: 30, label: { normal: { show: true, @@ -1222,7 +1268,7 @@ class BI014RiskPerformanceModel extends React.Component { legend: { left: "0%", bottom: "10%", - data: ["一般任务", "关键任务", "许可作业"], + data: ["许可作业", "关键任务", "一般任务"], }, series: [ { @@ -1234,13 +1280,11 @@ class BI014RiskPerformanceModel extends React.Component { color: function (params) { switch (params.dataIndex) { case 0: - return "#c02e30"; // 第一个柱子颜色 + return "#f7aa52"; // 第一个柱子颜色 case 1: - return "#f7aa52"; // 第二个柱子颜色 + return "#fbe06a"; // 第二个柱子颜色 case 2: - return "#fbe06a"; // 第三个柱子颜色 - case 3: - return "#5185f3"; // 第四个柱子颜色 + return "#5185f3"; // 第三个柱子颜色 } } }, @@ -1335,6 +1379,7 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, @@ -1351,9 +1396,9 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, - barWidth: 30 }, { + barWidth: 20, name: "二级", type: "bar", data: Data.LEVEL2, @@ -1372,6 +1417,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "三级", type: "bar", data: Data.LEVEL3, @@ -1390,6 +1436,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "四级", type: "bar", data: Data.LEVEL4, @@ -1468,6 +1515,7 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, @@ -1484,9 +1532,10 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, - barWidth: 30 + }, { + barWidth: 20, name: "二级", type: "bar", data: Data.LEVEL2, @@ -1505,6 +1554,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "三级", type: "bar", data: Data.LEVEL3, @@ -1523,6 +1573,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "四级", type: "bar", data: Data.LEVEL4, @@ -1601,6 +1652,7 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, @@ -1617,9 +1669,10 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, - barWidth: 30 + }, { + barWidth: 20, name: "二级", type: "bar", data: Data.LEVEL2, @@ -1638,6 +1691,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "三级", type: "bar", data: Data.LEVEL3, @@ -1656,6 +1710,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "四级", type: "bar", data: Data.LEVEL4, @@ -1734,6 +1789,7 @@ class BI014RiskPerformanceModel extends React.Component { ], series: [ { + barWidth: 20, name: "一级", type: "bar", data: Data.LEVEL1, @@ -1750,9 +1806,10 @@ class BI014RiskPerformanceModel extends React.Component { }, }, }, - barWidth: 30 + }, { + barWidth: 20, name: "二级", type: "bar", data: Data.LEVEL2, @@ -1771,6 +1828,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "三级", type: "bar", data: Data.LEVEL3, @@ -1789,6 +1847,7 @@ class BI014RiskPerformanceModel extends React.Component { }, }, { + barWidth: 20, name: "四级", type: "bar", data: Data.LEVEL4, @@ -1872,7 +1931,7 @@ class BI014RiskPerformanceModel extends React.Component { data: Data.LEVEL1, itemStyle: { color: this.state.level1Color }, stack: "总量", - barWidth: 30, + barWidth: 20, label: { normal: { show: true, @@ -1891,7 +1950,7 @@ class BI014RiskPerformanceModel extends React.Component { data: Data.LEVEL2, itemStyle: { color: this.state.level2Color }, stack: "总量", - barWidth: 30, + barWidth: 20, label: { normal: { show: true, @@ -1910,7 +1969,7 @@ class BI014RiskPerformanceModel extends React.Component { data: Data.LEVEL3, itemStyle: { color: this.state.level3Color }, stack: "总量", - barWidth: 30, + barWidth: 20, label: { normal: { show: true, @@ -1929,7 +1988,7 @@ class BI014RiskPerformanceModel extends React.Component { data: Data.LEVEL4, itemStyle: { color: this.state.level4Color }, stack: "总量", - barWidth: 30, + barWidth: 20, label: { normal: { show: true, diff --git a/src/components/CustomPages/HM/HM042ShowPrint.js b/src/components/CustomPages/HM/HM042ShowPrint.js index 4b3c951..ec027b7 100644 --- a/src/components/CustomPages/HM/HM042ShowPrint.js +++ b/src/components/CustomPages/HM/HM042ShowPrint.js @@ -83,12 +83,15 @@ class HM042ShowPrint extends React.Component { if (typeof this.props.data.onCancel != "undefined" && typeof this.props.data.onCancel == 'function') this.props.data.onCancel(); } + loadData = (dataId) => { let json = initFilter(this.props.login.OrgId); extendRule(json, 'ID', 1, dataId); extendInclude(json, 'Nav_InitiatingDepartment'); extendInclude(json, 'Nav_ReleaseUser'); extendInclude(json, 'Nav_Details.Nav_ChargeUser'); + extendInclude(json, 'Nav_Details.Nav_Areas.Nav_Area'); + extendInclude(json, 'Nav_Details.Nav_Identifyings.Nav_Identifying'); extendInclude(json, 'Nav_Files.Nav_ImgFile.Nav_File'); extendInclude(json, 'Nav_GroupLeader.Nav_UserSignFiles.Nav_ImgFile.Nav_File'); extendInclude(json, 'Nav_DeputyGroupLeader.Nav_UserSignFiles.Nav_ImgFile.Nav_File'); @@ -159,6 +162,43 @@ class HM042ShowPrint extends React.Component { tmpData: newtmpData, }); } + joinArea(data) { + let ret = []; + for (let it of data) { + if (it.Nav_Area && it.Nav_Area.NAME) { + ret.push(it.Nav_Area.NAME); + } + } + return ret.join('、'); + } + joinIdentifying(data) { + let ret = []; + for (let it of data) { + if (it.Nav_Identifying && it.Nav_Identifying.NAME) { + ret.push(it.Nav_Identifying.NAME); + } + } + return ret.join('、'); + } + renderLevel(level) { + let str = ''; + if (level == undefined) { + return str; + } + if (level.indexOf('0') >= 0) { + str += '部门 '; + } + if (level.indexOf('1') >= 0) { + str += '车间 '; + } + if (level.indexOf('2') >= 0) { + str += '班组 '; + } + if (level.indexOf('3') >= 0) { + str += '公司 '; + } + return str; + } render() { const { data } = this.state; return
@@ -217,6 +257,32 @@ class HM042ShowPrint extends React.Component { {data.GROUP_LEADER_OPINION == 1 ? {data.Nav_GroupLeader.NAME} 0 ? config.picServerHost + data.Nav_GroupLeader.Nav_UserSignFiles[0].Nav_ImgFile?.Nav_File.FILE_PATH : ''} /> : ""} + + + + + + + + + + + + { + data.Nav_Details && data.Nav_Details.map((item, i) => { + return + + + + + + + + + + }) + } +
开始时间结束时间层级辨识区域类别辨识对象负责人备注
{moment(item.START_TIME).format('YYYY-MM-DD')}{moment(item.END_TIME).format('YYYY-MM-DD')}{this.renderLevel(item.LEVEL)}{this.joinArea(item.Nav_Areas)}{this.joinIdentifying(item.Nav_Identifyings)}{this.props.app.enums.HMRiskTypeEnmu.enums[item.RISK_TYPE]}{item.Nav_ChargeUser?.NAME}{item.REMARK}