风险扩展假数据
This commit is contained in:
parent
bc4a0b1a30
commit
b692157795
@ -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)" }}
|
||||
>
|
||||
<div id="chartone" style={{ width: "100%", height: "430px" }}></div>
|
||||
<div
|
||||
id="chartone"
|
||||
style={{ width: "100%", height: "430px" }}
|
||||
></div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={10} style={{ height: "430px" }}>
|
||||
@ -568,7 +635,7 @@ class BI013RiskAnalysisModel extends React.Component {
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
border: "1px #888 solid",
|
||||
padding: "8px 0px"
|
||||
padding: "8px 0px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -658,9 +725,7 @@ class BI013RiskAnalysisModel extends React.Component {
|
||||
<Row gutter={10} style={{ marginTop: "20px" }}>
|
||||
<Col span={1}></Col>
|
||||
<Col span={22}>
|
||||
<div
|
||||
style={{ border: "1px solid rgb(232,232,232)" }}
|
||||
>
|
||||
<div style={{ border: "1px solid rgb(232,232,232)" }}>
|
||||
<div id="chart4" style={{ width: "100%", height: "350px" }}></div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user