From b6921577950cf39d4ac11c4fa4352632c4792848 Mon Sep 17 00:00:00 2001
From: yunkexin <760754045@qq.com>
Date: Wed, 3 Apr 2024 11:02:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A3=8E=E9=99=A9=E6=89=A9=E5=B1=95=E5=81=87?=
=?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../CustomPages/BI/BI013RiskAnalysisModel.js | 595 ++++++++++--------
1 file changed, 330 insertions(+), 265 deletions(-)
diff --git a/src/components/CustomPages/BI/BI013RiskAnalysisModel.js b/src/components/CustomPages/BI/BI013RiskAnalysisModel.js
index 4eccf96..2122d2a 100644
--- a/src/components/CustomPages/BI/BI013RiskAnalysisModel.js
+++ b/src/components/CustomPages/BI/BI013RiskAnalysisModel.js
@@ -36,9 +36,27 @@ class BI013RiskAnalysisModel extends React.Component {
} else {
currentMineType = localStorage.getItem("currentMineType");
}
- this.getBaseInfoData(currentMineType);
+ // this.getBaseInfoData(currentMineType);
+ this.getBaseData();
}
+ getBaseData = () => {
+ this.setState({
+ LEVEL1TOTAL: 0,
+ LEVEL2TOTAL: 82,
+ LEVEL3TOTAL: 381,
+ LEVEL4TOTAL: 2212,
+ HAZARDTOTALCOUNT: 50,
+ RISKTOTALCOUNT: 2714,
+ MEASURESTOTALCOUNT: 653,
+ },()=>{
+ this.chart1();
+ this.chart2();
+ this.chart4();
+ });
+
+ };
+
//获取数据
getBaseInfoData = (mineType) => {
const json2 = initFilter(this.props.login.OrgId);
@@ -71,6 +89,7 @@ class BI013RiskAnalysisModel extends React.Component {
RISKTOTALCOUNT: ret.Data.RISKTOTALCOUNT,
MEASURESTOTALCOUNT: ret.Data.MEASURESTOTALCOUNT,
});
+
// this.state.LEVEL1TOTAL = level1all;
// this.state.LEVEL2TOTAL = level2all;
// this.state.LEVEL3TOTAL = level3all;
@@ -108,295 +127,340 @@ class BI013RiskAnalysisModel extends React.Component {
let chart1s = document.getElementById("chartone");
let myChart = echarts.init(chart1s);
- myChart.setOption({
- color: color,
- title: [
- {
- text: "风险分级占比1",
- left: "center",
- top: "2%",
- },
- {
- text: allNum,
- x: "26%",
- y: "center",
- textStyle: {
- fontSize: 26,
- fontWeight: "normal",
- color: ["#333"],
+ myChart.setOption(
+ {
+ color: color,
+ title: [
+ {
+ text: "风险分级占比1",
+ left: "center",
+ top: "2%",
},
- },
- ],
- tooltip: {
- trigger: "item",
- formatter: "{b}:({d}%)",
- },
- legend: {
- orient: "vartical",
- x: "left",
- top: "35%",
- left: "65%",
- bottom: "0%",
- data: showData,
- // itemWidth: 20,
- // itemHeight: 14,
- // itemGap :15,
- formatter: function (name) {
- //通过name获取到数组对象中的单个对象
- let singleData = showData.filter(function (item) {
- return item.name == name;
- });
- let countAll = 0;
- showData.map((item) => {
- countAll = countAll + item.value;
- });
-
- return (
- name +
- " | " +
- singleData[0].value +
- " | " +
- Number((singleData[0].value / countAll) * 100).toFixed(2) +
- "%"
- );
- },
- },
- grid: {
- left: 30,
- containLabel: true,
- bottom: 10,
- top: 10,
- right: 30,
- },
- series: [
- {
- name: "访问来源",
- type: "pie",
- clockwise: false,
- // minAngle: 20,
- avoidLabelOverlap: false,
- radius: ["45%", "65%"],
- center: ["30%", "50%"],
- itemStyle: {
- //图形样式
- normal: {
- borderColor: "#ffffff",
- borderWidth: 1,
- padding: "0 20px",
+ {
+ text: allNum,
+ x: "26%",
+ y: "center",
+ textStyle: {
+ fontSize: 26,
+ fontWeight: "normal",
+ color: ["#333"],
},
},
- label: {
- show: false,
- },
- // color: color,
- data: showData,
- },
- ],
- }, true);
- };
- chart2 = (data) => {
- let areaName = [];
- let areaCount = [];
- data.forEach((item) => {
- areaName.push(item.AREANAME);
- areaCount.push(item.AREACOUNT);
- });
- let chart2s = document.getElementById("chart2");
- if (chart2s) {
- let myChart = echarts.init(chart2s);
- myChart.setOption({
- title: {
- text: "风险区域统计",
- left: "center",
- top: "2%",
- },
+ ],
tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
+ trigger: "item",
+ formatter: "{b}:({d}%)",
+ },
+ legend: {
+ orient: "vartical",
+ x: "left",
+ top: "35%",
+ left: "65%",
+ bottom: "0%",
+ data: showData,
+ // itemWidth: 20,
+ // itemHeight: 14,
+ // itemGap :15,
+ formatter: function (name) {
+ //通过name获取到数组对象中的单个对象
+ let singleData = showData.filter(function (item) {
+ return item.name == name;
+ });
+ let countAll = 0;
+ showData.map((item) => {
+ countAll = countAll + item.value;
+ });
+
+ return (
+ name +
+ " | " +
+ singleData[0].value +
+ " | " +
+ Number((singleData[0].value / countAll) * 100).toFixed(2) +
+ "%"
+ );
},
},
grid: {
- left: "3%",
- right: "4%",
- top: "10%",
- bottom: "1%",
+ left: 30,
containLabel: true,
+ bottom: 10,
+ top: 10,
+ right: 30,
},
- xAxis: {
- show: false,
- },
- yAxis: [
+ series: [
{
- triggerEvent: true,
- show: true,
- inverse: false,
- data: areaName,
- axisLine: {
+ name: "访问来源",
+ type: "pie",
+ clockwise: false,
+ // minAngle: 20,
+ avoidLabelOverlap: false,
+ radius: ["45%", "65%"],
+ center: ["30%", "50%"],
+ itemStyle: {
+ //图形样式
+ normal: {
+ borderColor: "#ffffff",
+ borderWidth: 1,
+ padding: "0 20px",
+ },
+ },
+ label: {
show: false,
},
- splitLine: {
- show: false,
+ // color: color,
+ data: showData,
+ },
+ ],
+ },
+ true
+ );
+ };
+ chart2 = (data) => {
+ let areaName = [
+ "破碎车间-粗碎单元",
+ "综合回收车间-精多金属仓库单元",
+ "磨重车间-脱泥单元",
+ "食堂",
+ "综合回收车间-精矿烘干单元",
+ "尾矿库截渗池回水单元",
+ "破碎车间-辊磨单元",
+ "磨重车间-中矿再磨单元",
+ "磨重车间-粗粒选别单元",
+ "加油站-采场",
+ "尾矿库截洪单元",
+ "采场道路",
+ "破碎车间-放矿运输单元",
+ "卢家边回水单元",
+ "钨细泥回收车间-回水单元",
+ "综合回收车间-硫化矿综合回收单元",
+ "磨重车间-细粒选别单元",
+ "尾矿库库区",
+ "磨重车间-磨矿分级单元",
+ "截渗池回水单元",
+ ];
+ let areaCount = [
+ 1, 2, 3, 3, 4, 4, 6, 9, 9, 11, 19, 20, 21, 22, 22, 23, 27, 31, 32, 32,
+ ];
+ // data.forEach((item) => {
+ // areaName.push(item.AREANAME);
+ // areaCount.push(item.AREACOUNT);
+ // });
+ let chart2s = document.getElementById("chart2");
+ if (chart2s) {
+ let myChart = echarts.init(chart2s);
+ myChart.setOption(
+ {
+ title: {
+ text: "风险区域统计",
+ left: "center",
+ top: "2%",
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
},
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- color: "#666",
- align: "right",
- margin: 20,
- fontSize: 13,
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ top: "10%",
+ bottom: "1%",
+ containLabel: true,
+ },
+ xAxis: {
+ show: false,
+ },
+ yAxis: [
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: false,
+ data: areaName,
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ interval: 0,
+ color: "#666",
+ align: "right",
+ margin: 20,
+ fontSize: 13,
- rich: {
- idx0: {
- color: "#FB375E",
- backgroundColor: "#FFE8EC",
- borderRadius: 100,
- padding: [5, 8],
- },
- idx1: {
- color: "#FF9023",
- backgroundColor: "#FFEACF",
- borderRadius: 100,
- padding: [5, 8],
- },
- idx2: {
- color: "#01B599",
- backgroundColor: "#E1F7F3",
- borderRadius: 100,
- padding: [5, 8],
- },
- idx: {
- color: "#333",
- borderRadius: 100,
- padding: [5, 8],
- },
- title: {
- width: 165,
+ rich: {
+ idx0: {
+ color: "#FB375E",
+ backgroundColor: "#FFE8EC",
+ borderRadius: 100,
+ padding: [5, 8],
+ },
+ idx1: {
+ color: "#FF9023",
+ backgroundColor: "#FFEACF",
+ borderRadius: 100,
+ padding: [5, 8],
+ },
+ idx2: {
+ color: "#01B599",
+ backgroundColor: "#E1F7F3",
+ borderRadius: 100,
+ padding: [5, 8],
+ },
+ idx: {
+ color: "#333",
+ borderRadius: 100,
+ padding: [5, 8],
+ },
+ title: {
+ width: 165,
+ },
},
},
},
- },
- {
- triggerEvent: true,
- show: true,
- inverse: false,
- data: areaCount,
- axisLine: {
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: false,
+ data: areaCount,
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ interval: 0,
+ color: "#666",
+ align: "left",
+ margin: 20,
+ fontSize: 12,
+ },
+ },
+ ],
+ series: [
+ {
+ name: "数量",
+ type: "bar",
+ // label: {
+ // show: true,
+ // position: "insideRight",
+ // color: "#fff",
+ // formatter: "{c}",
+ // fontSize: "12",
+ // },
+ barWidth: 10,
+ itemStyle: {
+ color: "#1990FF",
+ barBorderRadius: 30,
+ },
+ // itemStyle: {
+ // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ // { offset: 0, color: "#01AEF6" },
+ // { offset: 1, color: "#9999FF" },
+ // ]),
+ // },
+ data: areaCount,
show: false,
},
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- color: "#666",
- align: "left",
- margin: 20,
- fontSize: 12,
- },
- },
- ],
- series: [
- {
- name: "数量",
- type: "bar",
- // label: {
- // show: true,
- // position: "insideRight",
- // color: "#fff",
- // formatter: "{c}",
- // fontSize: "12",
- // },
- barWidth: 10,
- itemStyle: {
- color: "#1990FF",
- barBorderRadius: 30,
- },
- // itemStyle: {
- // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- // { offset: 0, color: "#01AEF6" },
- // { offset: 1, color: "#9999FF" },
- // ]),
- // },
- data: areaCount,
- show: false,
- },
- ],
- }, true);
+ ],
+ },
+ true
+ );
}
};
chart4 = (data) => {
- let riskArr = [];
- let hazardArr = [];
- let dates = [];
- for (let i = 0; i < data.length; i++) {
- if (data[i].TYPE == 0) {
- riskArr.push(data[i].COUNT);
- dates.push(moment(data[i].DATE).format("YYYY/MM"));
- } else {
- hazardArr.push(data[i].COUNT);
- }
- }
- let currMonth = dates.length;
- for (let i = 1; i < 13 - currMonth; i++) {
- dates.push(
- moment(dates[dates.length]).add(i, "months").format("YYYY/MM")
- );
- }
+ let riskArr = [2714, 2714, 2714, 2714];
+ let hazardArr = [50, 50, 50, 50];
+ let dates = [
+ "2024/01",
+ "2024/02",
+ "2024/03",
+ "2024/04",
+ "2024/05",
+ "2024/06",
+ "2024/07",
+ "2024/08",
+ "2024/09",
+ "2024/10",
+ "2024/11",
+ "2024/12",
+ ];
+ // for (let i = 0; i < data.length; i++) {
+ // if (data[i].TYPE == 0) {
+ // riskArr.push(data[i].COUNT);
+ // dates.push(moment(data[i].DATE).format("YYYY/MM"));
+ // } else {
+ // hazardArr.push(data[i].COUNT);
+ // }
+ // }
+ // let currMonth = dates.length;
+ // for (let i = 1; i < 13 - currMonth; i++) {
+ // dates.push(
+ // moment(dates[dates.length]).add(i, "months").format("YYYY/MM")
+ // );
+ // }
let chart4s = document.getElementById("chart4");
if (chart4s) {
let myChart = echarts.init(chart4s);
- myChart.setOption({
- color: ["#72b85b", "#f6841a", "#cc0404"],
- grid: {
- left: "5%",
- right: "5%",
- },
- legend: {
- bottom: "0px",
- },
- title: {
- text: "月度风险辨识统计走势",
- left: "center",
- top: "2%",
- },
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
+ myChart.setOption(
+ {
+ color: ["#72b85b", "#f6841a", "#cc0404"],
+ grid: {
+ left: "5%",
+ right: "5%",
},
- },
- xAxis: {
- type: "category",
- data: dates,
- axisLabel: {
- showMaxLabel: true,
+ legend: {
+ bottom: "0px",
},
- },
- yAxis: {
- type: "value",
- },
- series: [
- {
- name: "危险源/风险库",
- data: riskArr,
- type: "line",
- smooth: true,
+ title: {
+ text: "月度风险辨识统计走势",
+ left: "center",
+ top: "2%",
},
- {
- name: "职业危害库",
- data: hazardArr,
- type: "line",
- smooth: true,
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
},
- ],
- }, true);
+ xAxis: {
+ type: "category",
+ data: dates,
+ axisLabel: {
+ showMaxLabel: true,
+ },
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ name: "危险源/风险库",
+ data: riskArr,
+ type: "line",
+ smooth: true,
+ },
+ {
+ name: "职业危害库",
+ data: hazardArr,
+ type: "line",
+ smooth: true,
+ },
+ ],
+ },
+ true
+ );
}
};
render() {
@@ -539,7 +603,10 @@ class BI013RiskAnalysisModel extends React.Component {
// className="dashboard-div-style"
style={{ border: "1px solid rgb(232,232,232)" }}
>
-
+
@@ -568,7 +635,7 @@ class BI013RiskAnalysisModel extends React.Component {
alignItems: "center",
justifyContent: "space-around",
border: "1px #888 solid",
- padding: "8px 0px"
+ padding: "8px 0px",
}}
>