ccy/mh-sms-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

风险扩展假数据

Browse Source
This commit is contained in:
yunkexin 2024-04-03 11:02:59 +08:00
parent bc4a0b1a30
commit b692157795
1 changed files with 330 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

595
src/components/CustomPages/BI/BI013RiskAnalysisModel.js
View File

@ -36,9 +36,27 @@ class BI013RiskAnalysisModel extends React.Component {
} else { } else {
currentMineType = localStorage.getItem("currentMineType"); 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) => { getBaseInfoData = (mineType) => {
const json2 = initFilter(this.props.login.OrgId); const json2 = initFilter(this.props.login.OrgId);
@ -71,6 +89,7 @@ class BI013RiskAnalysisModel extends React.Component {
RISKTOTALCOUNT: ret.Data.RISKTOTALCOUNT, RISKTOTALCOUNT: ret.Data.RISKTOTALCOUNT,
MEASURESTOTALCOUNT: ret.Data.MEASURESTOTALCOUNT, MEASURESTOTALCOUNT: ret.Data.MEASURESTOTALCOUNT,
}); });
// this.state.LEVEL1TOTAL = level1all; // this.state.LEVEL1TOTAL = level1all;
// this.state.LEVEL2TOTAL = level2all; // this.state.LEVEL2TOTAL = level2all;
// this.state.LEVEL3TOTAL = level3all; // this.state.LEVEL3TOTAL = level3all;
@ -108,295 +127,340 @@ class BI013RiskAnalysisModel extends React.Component {
let chart1s = document.getElementById("chartone"); let chart1s = document.getElementById("chartone");
let myChart = echarts.init(chart1s); let myChart = echarts.init(chart1s);
myChart.setOption({ myChart.setOption(
color: color, {
title: [ color: color,
{ title: [
text: "风险分级占比1", {
left: "center", text: "风险分级占比1",
top: "2%", left: "center",
}, top: "2%",
{
text: allNum,
x: "26%",
y: "center",
textStyle: {
fontSize: 26,
fontWeight: "normal",
color: ["#333"],
}, },
}, {
], text: allNum,
tooltip: { x: "26%",
trigger: "item", y: "center",
formatter: "{b}:({d}%)", textStyle: {
}, fontSize: 26,
legend: { fontWeight: "normal",
orient: "vartical", color: ["#333"],
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",
}, },
}, },
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: { tooltip: {
trigger: "axis", trigger: "item",
axisPointer: { formatter: "{b}:({d}%)",
type: "shadow", },
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: { grid: {
left: "3%", left: 30,
right: "4%",
top: "10%",
bottom: "1%",
containLabel: true, containLabel: true,
bottom: 10,
top: 10,
right: 30,
}, },
xAxis: { series: [
show: false,
},
yAxis: [
{ {
triggerEvent: true, name: "访问来源",
show: true, type: "pie",
inverse: false, clockwise: false,
data: areaName, // minAngle: 20,
axisLine: { avoidLabelOverlap: false,
radius: ["45%", "65%"],
center: ["30%", "50%"],
itemStyle: {
//图形样式
normal: {
borderColor: "#ffffff",
borderWidth: 1,
padding: "0 20px",
},
},
label: {
show: false, show: false,
}, },
splitLine: { // color: color,
show: false, 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, grid: {
}, left: "3%",
axisLabel: { right: "4%",
interval: 0, top: "10%",
color: "#666", bottom: "1%",
align: "right", containLabel: true,
margin: 20, },
fontSize: 13, 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: { rich: {
idx0: { idx0: {
color: "#FB375E", color: "#FB375E",
backgroundColor: "#FFE8EC", backgroundColor: "#FFE8EC",
borderRadius: 100, borderRadius: 100,
padding: [5, 8], padding: [5, 8],
}, },
idx1: { idx1: {
color: "#FF9023", color: "#FF9023",
backgroundColor: "#FFEACF", backgroundColor: "#FFEACF",
borderRadius: 100, borderRadius: 100,
padding: [5, 8], padding: [5, 8],
}, },
idx2: { idx2: {
color: "#01B599", color: "#01B599",
backgroundColor: "#E1F7F3", backgroundColor: "#E1F7F3",
borderRadius: 100, borderRadius: 100,
padding: [5, 8], padding: [5, 8],
}, },
idx: { idx: {
color: "#333", color: "#333",
borderRadius: 100, borderRadius: 100,
padding: [5, 8], padding: [5, 8],
}, },
title: { title: {
width: 165, width: 165,
},
}, },
}, },
}, },
}, {
{ triggerEvent: true,
triggerEvent: true, show: true,
show: true, inverse: false,
inverse: false, data: areaCount,
data: areaCount, axisLine: {
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, show: false,
}, },
splitLine: { ],
show: false, },
}, true
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);
} }
}; };
chart4 = (data) => { chart4 = (data) => {
let riskArr = []; let riskArr = [2714, 2714, 2714, 2714];
let hazardArr = []; let hazardArr = [50, 50, 50, 50];
let dates = []; let dates = [
for (let i = 0; i < data.length; i++) { "2024/01",
if (data[i].TYPE == 0) { "2024/02",
riskArr.push(data[i].COUNT); "2024/03",
dates.push(moment(data[i].DATE).format("YYYY/MM")); "2024/04",
} else { "2024/05",
hazardArr.push(data[i].COUNT); "2024/06",
} "2024/07",
} "2024/08",
let currMonth = dates.length; "2024/09",
for (let i = 1; i < 13 - currMonth; i++) { "2024/10",
dates.push( "2024/11",
moment(dates[dates.length]).add(i, "months").format("YYYY/MM") "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"); let chart4s = document.getElementById("chart4");
if (chart4s) { if (chart4s) {
let myChart = echarts.init(chart4s); let myChart = echarts.init(chart4s);
myChart.setOption({ myChart.setOption(
color: ["#72b85b", "#f6841a", "#cc0404"], {
grid: { color: ["#72b85b", "#f6841a", "#cc0404"],
left: "5%", grid: {
right: "5%", left: "5%",
}, right: "5%",
legend: {
bottom: "0px",
},
title: {
text: "月度风险辨识统计走势",
left: "center",
top: "2%",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
}, },
}, legend: {
xAxis: { bottom: "0px",
type: "category",
data: dates,
axisLabel: {
showMaxLabel: true,
}, },
}, title: {
yAxis: { text: "月度风险辨识统计走势",
type: "value", left: "center",
}, top: "2%",
series: [
{
name: "危险源/风险库",
data: riskArr,
type: "line",
smooth: true,
}, },
{ tooltip: {
name: "职业危害库", trigger: "axis",
data: hazardArr, axisPointer: {
type: "line", type: "shadow",
smooth: true, },
}, },
], xAxis: {
}, true); 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() { render() {
@ -539,7 +603,10 @@ class BI013RiskAnalysisModel extends React.Component {
// className="dashboard-div-style" // className="dashboard-div-style"
style={{ border: "1px solid rgb(232,232,232)" }} style={{ border: "1px solid rgb(232,232,232)" }}
> >
<div id="chartone" style={{ width: "100%", height: "430px" }}></div> <div
id="chartone"
style={{ width: "100%", height: "430px" }}
></div>
</div> </div>
</Col> </Col>
<Col span={10} style={{ height: "430px" }}> <Col span={10} style={{ height: "430px" }}>
@ -568,7 +635,7 @@ class BI013RiskAnalysisModel extends React.Component {
alignItems: "center", alignItems: "center",
justifyContent: "space-around", justifyContent: "space-around",
border: "1px #888 solid", border: "1px #888 solid",
padding: "8px 0px" padding: "8px 0px",
}} }}
> >
<div <div
@ -658,9 +725,7 @@ class BI013RiskAnalysisModel extends React.Component {
<Row gutter={10} style={{ marginTop: "20px" }}> <Row gutter={10} style={{ marginTop: "20px" }}>
<Col span={1}></Col> <Col span={1}></Col>
<Col span={22}> <Col span={22}>
<div <div style={{ border: "1px solid rgb(232,232,232)" }}>
style={{ border: "1px solid rgb(232,232,232)" }}
>
<div id="chart4" style={{ width: "100%", height: "350px" }}></div> <div id="chart4" style={{ width: "100%", height: "350px" }}></div>
</div> </div>
</Col> </Col>