1717 lines
49 KiB
JavaScript
1717 lines
49 KiB
JavaScript
import React, { useState, useEffect, useRef, Component } from "react";
|
||
import { connect } from "dva";
|
||
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||
import {
|
||
Table,
|
||
Row,
|
||
Col,
|
||
Button,
|
||
Select,
|
||
DatePicker,
|
||
message,
|
||
Modal,
|
||
} from "antd";
|
||
import echarts from "echarts";
|
||
import moment from "moment";
|
||
import IconFont from "../../../utils/iconFont";
|
||
class BI014RiskPerformanceModel extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
choose: 1,
|
||
chooseTwo: 1,
|
||
chooseThree: 1,
|
||
level1Color: "#c02e30",
|
||
level2Color: "#f7aa52",
|
||
level3Color: "#fbe06a",
|
||
level4Color: "#5185f3",
|
||
detailForm: {
|
||
isShow: false,
|
||
formCode: "",
|
||
title: "",
|
||
},
|
||
ret: {
|
||
IsSuccessful: true,
|
||
Data: {
|
||
DATECOUNTS: [
|
||
{ DATE: "2024-01-31 23:59:59", COUNT: 50, TYPE: 1 },
|
||
{ DATE: "2024-01-31 23:59:59", COUNT: 414, TYPE: 0 },
|
||
{ DATE: "2024-02-29 23:59:59", COUNT: 62, TYPE: 1 },
|
||
{ DATE: "2024-02-29 23:59:59", COUNT: 514, TYPE: 0 },
|
||
{ DATE: "2024-03-31 23:59:59", COUNT: 62, TYPE: 1 },
|
||
{ DATE: "2024-03-31 23:59:59", COUNT: 614, TYPE: 0 },
|
||
{ DATE: "2024-04-30 23:59:59", COUNT: 70, TYPE: 1 },
|
||
{ DATE: "2024-04-30 23:59:59", COUNT: 714, TYPE: 0 },
|
||
{ DATE: "2024-05-31 23:59:59", COUNT: 80, TYPE: 1 },
|
||
{ DATE: "2024-05-31 23:59:59", COUNT: 814, TYPE: 0 },
|
||
{ DATE: "2024-06-30 23:59:59", COUNT: 80, TYPE: 1 },
|
||
{ DATE: "2024-06-30 23:59:59", COUNT: 914, TYPE: 0 },
|
||
{ DATE: "2024-07-31 23:59:59", COUNT: 94, TYPE: 1 },
|
||
{ DATE: "2024-07-31 23:59:59", COUNT: 954, TYPE: 0 },
|
||
{ DATE: "2024-08-31 23:59:59", COUNT: 102, TYPE: 1 },
|
||
{ DATE: "2024-08-31 23:59:59", COUNT: 984, TYPE: 0 },
|
||
{ DATE: "2024-09-30 23:59:59", COUNT: 102, TYPE: 1 },
|
||
{ DATE: "2024-09-30 23:59:59", COUNT: 1014, TYPE: 0 },
|
||
{ DATE: "2024-10-31 23:59:59", COUNT: 112, TYPE: 1 },
|
||
{ DATE: "2024-10-31 23:59:59", COUNT: 1024, TYPE: 0 },
|
||
{ DATE: "2024-11-30 23:59:59", COUNT: 113, TYPE: 1 },
|
||
{ DATE: "2024-11-30 23:59:59", COUNT: 1114, TYPE: 0 },
|
||
{ 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 },
|
||
],
|
||
CHARTLIST: [
|
||
{
|
||
NAME: ["选矿厂", "尾矿库", "露天矿","职能部门"],
|
||
LEVEL1: [137, 190, 168,14],
|
||
LEVEL2: [251, 231, 242,15],
|
||
LEVEL3: [365, 346, 370,16],
|
||
LEVEL4: [437, 497, 478,17],
|
||
},
|
||
|
||
{
|
||
NAME: [
|
||
"容器爆炸",
|
||
"淹溺",
|
||
"物体打击",
|
||
"高处坠落",
|
||
"火灾",
|
||
"起重伤害",
|
||
"其他爆炸",
|
||
"中毒和窒息",
|
||
"放炮",
|
||
"冒顶片帮",
|
||
"坍塌",
|
||
"车辆伤害",
|
||
"触电",
|
||
"其他伤害",
|
||
"机械伤害",
|
||
"灼烫",
|
||
"火药爆炸",
|
||
],
|
||
LEVEL1: [
|
||
398, 395, 389, 372, 356, 343, 328, 315, 299, 286, 272, 261, 247,
|
||
235, 223, 199, 184,
|
||
],
|
||
LEVEL2: [
|
||
137, 145, 152, 161, 173, 186, 191, 203, 218, 229, 241, 260, 277,
|
||
293, 306, 321, 375,
|
||
],
|
||
LEVEL3: [
|
||
37, 56, 72, 89, 104, 127, 143, 158, 175, 191, 206, 227, 251,
|
||
273, 294, 320, 385,
|
||
],
|
||
LEVEL4: [
|
||
25, 37, 50, 62, 75, 88, 101, 119, 133, 147, 161, 178, 194, 211,
|
||
230, 255, 392,
|
||
],
|
||
},
|
||
|
||
{
|
||
NAME: [
|
||
"生产一班",
|
||
"选矿部",
|
||
"机电设备管理办公室",
|
||
"矿山部",
|
||
"财务部",
|
||
"办公室",
|
||
"非金属资源部筹备组",
|
||
"企业管理部",
|
||
"技术管理部",
|
||
"营销部",
|
||
],
|
||
LEVEL1: [35, 121, 227, 330, 97, 153, 178, 212, 25, 301],
|
||
LEVEL2: [39, 151, 202, 322, 45, 187, 239, 308, 112, 376],
|
||
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],
|
||
LEVEL3: [343, 121, 396, 78],
|
||
LEVEL4: [215, 331, 37, 292],
|
||
},
|
||
|
||
{
|
||
NAME: [
|
||
"容器爆炸",
|
||
"淹溺",
|
||
"物体打击",
|
||
"高处坠落",
|
||
"火灾",
|
||
"起重伤害",
|
||
"其他爆炸",
|
||
"中毒和窒息",
|
||
"放炮",
|
||
"冒顶片帮",
|
||
"坍塌",
|
||
"车辆伤害",
|
||
"触电",
|
||
"其他伤害",
|
||
"机械伤害",
|
||
"灼烫",
|
||
"火药爆炸",
|
||
],
|
||
LEVEL1: [
|
||
95, 122, 217, 78, 254, 153, 26, 192, 239, 170, 103, 145, 278,
|
||
212, 55, 189, 287,
|
||
],
|
||
LEVEL2: [
|
||
221, 135, 110, 243, 150, 199, 273, 148, 17, 290, 228, 201, 184,
|
||
92, 165, 106, 133,
|
||
],
|
||
LEVEL3: [
|
||
300, 23, 187, 86, 111, 250, 248, 137, 157, 260, 298, 53, 100,
|
||
129, 175, 142, 285,
|
||
],
|
||
LEVEL4: [
|
||
204, 162, 223, 291, 197, 109, 42, 274, 171, 118, 138, 232, 252,
|
||
167, 255, 124, 2,
|
||
],
|
||
},
|
||
|
||
{
|
||
NAME: ["部门", "车间", "班组", "公司"],
|
||
LEVEL1: [153, 124, 178, 190],
|
||
LEVEL2: [105, 132, 27, 185],
|
||
LEVEL3: [200, 14, 56, 139],
|
||
LEVEL4: [37, 176, 150, 120],
|
||
},
|
||
|
||
{
|
||
NAME: [
|
||
"生产一班",
|
||
"选矿部",
|
||
"机电设备管理办公室",
|
||
"矿山部",
|
||
"财务部",
|
||
"办公室",
|
||
"非金属资源部筹备组",
|
||
"企业管理部",
|
||
"技术管理部",
|
||
"营销部",
|
||
],
|
||
LEVEL1: [187, 152, 113, 199, 75, 141, 102, 34, 160, 128],
|
||
LEVEL2: [135, 194, 86, 162, 107, 43, 173, 155, 118, 181],
|
||
LEVEL3: [110, 131, 197, 27, 92, 150, 170, 180, 12, 178],
|
||
LEVEL4: [56, 183, 100, 125, 190, 171, 89, 140, 161, 137],
|
||
},
|
||
|
||
{
|
||
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],
|
||
},
|
||
],
|
||
},
|
||
TotalCount: 0,
|
||
MessageType: 0,
|
||
},
|
||
};
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.getBaseInfoData();
|
||
}
|
||
|
||
//获取数据
|
||
getBaseInfoDataOnline = (mineType) => {
|
||
const json2 = initFilter(this.props.login.OrgId);
|
||
extendOrder(json2, "CREATE_TIME", 1);
|
||
json2.Parameter1 = mineType;
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "BI/BIController/getRiskPerformanceData",
|
||
payload: json2,
|
||
onlyData: false,
|
||
onComplete: (ret) => {
|
||
this.chart4(ret?.Data.DATECOUNTS);
|
||
this.chart11(ret?.Data.CHART11);
|
||
this.chart12(ret?.Data.CHARTLIST[0]);
|
||
this.chart13(ret?.Data.CHARTLIST[1]);
|
||
this.chart14(ret?.Data.CHARTLIST[2]);
|
||
this.chart15(ret?.Data.CHARTLIST[3]);
|
||
|
||
this.chart16(ret?.Data.CHARTLIST[4]);
|
||
this.chart17(ret?.Data.CHARTLIST[5]);
|
||
this.chart18(ret?.Data.CHARTLIST[6]);
|
||
this.chart19(ret?.Data.CHARTLIST[7]);
|
||
},
|
||
});
|
||
};
|
||
getBaseInfoData = (mineType) => {
|
||
this.chart4(this.state.ret.Data.DATECOUNTS);
|
||
this.chart11(this.state.ret.Data.CHART11);
|
||
this.chart12(this.state.ret.Data.CHARTLIST[0]);
|
||
this.chart13(this.state.ret.Data.CHARTLIST[1]);
|
||
this.chart14(this.state.ret.Data.CHARTLIST[2]);
|
||
this.chart15(this.state.ret.Data.CHARTLIST[3]);
|
||
|
||
this.chart16(this.state.ret.Data.CHARTLIST[4]);
|
||
this.chart17(this.state.ret.Data.CHARTLIST[5]);
|
||
this.chart18(this.state.ret.Data.CHARTLIST[6]);
|
||
this.chart19(this.state.ret.Data.CHARTLIST[7]);
|
||
};
|
||
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("MM"));
|
||
} else {
|
||
hazardArr.push(data[i].COUNT);
|
||
}
|
||
}
|
||
let currMonth = dates.length;
|
||
let color = [
|
||
"#0090FF",
|
||
"#36CE9E",
|
||
"#FFC005",
|
||
"#FF515A",
|
||
"#8B5CFF",
|
||
"#00CA69",
|
||
];
|
||
const hexToRgba = (hex, opacity) => {
|
||
let rgbaColor = "";
|
||
let reg = /^#[\da-f]{6}$/i;
|
||
if (reg.test(hex)) {
|
||
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||
"0x" + hex.slice(3, 5)
|
||
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||
}
|
||
return rgbaColor;
|
||
};
|
||
for (let i = 1; i < 13 - currMonth; i++) {
|
||
dates.push(moment(dates[dates.length]).add(i, "months").format("MM"));
|
||
}
|
||
let chart4s = document.getElementById("chart4");
|
||
if (chart4s) {
|
||
let myChart = echarts.init(chart4s);
|
||
myChart.setOption(
|
||
{
|
||
color: color,
|
||
grid: {
|
||
left: "10%",
|
||
right: "5%",
|
||
},
|
||
legend: {
|
||
left: "center",
|
||
align: "left",
|
||
bottom: "2%",
|
||
textStyle: {
|
||
color: "#000",
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
},
|
||
// title: {
|
||
// text: "月度风险辨识统计走势",
|
||
// left: "center",
|
||
// top: "2%",
|
||
// },
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: dates,
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: "{value}月",
|
||
textStyle: {
|
||
color: "#333",
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D9D9D9",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#666",
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
color: "#666",
|
||
fontSize: 12,
|
||
lineHeight: 40,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "#E9E9E9",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "危险源/风险库",
|
||
data: riskArr,
|
||
type: "line",
|
||
smooth: true,
|
||
symbolSize: 8,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[0],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[0], 0.5),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: hexToRgba(color[0], 0.3),
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: hexToRgba(color[0], 0.1),
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: hexToRgba(color[0], 0.1),
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "职业危害库",
|
||
data: hazardArr,
|
||
type: "line",
|
||
smooth: true,
|
||
symbolSize: 8,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[1],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[1], 0.5),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: hexToRgba(color[1], 0.3),
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: hexToRgba(color[1], 0.1),
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: hexToRgba(color[1], 0.1),
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
chart11 = (Data) => {
|
||
let that = this;
|
||
let chart11s = document.getElementById("chart11");
|
||
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 (chart11s) {
|
||
let myChart = echarts.init(chart11s);
|
||
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) +
|
||
"%"
|
||
);
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["40%", "55%"],
|
||
center: ["30%", "50%"],
|
||
// radius: '65%',
|
||
// center: ['45%', '50%'],
|
||
data: Data,
|
||
itemStyle: {
|
||
//图形样式
|
||
normal: {
|
||
borderColor: "#ffffff",
|
||
borderWidth: 2,
|
||
padding: "0 20px",
|
||
},
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
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.chart13(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]
|
||
);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
};
|
||
chart12 = (Data) => {
|
||
let chart12s = document.getElementById("chart12");
|
||
if (chart12s) {
|
||
let myChart = echarts.init(chart12s);
|
||
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: "3%",
|
||
bottom: "12%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: Data.NAME,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
data: Data.LEVEL1,
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
name: "二级",
|
||
type: "bar",
|
||
data: Data.LEVEL2,
|
||
itemStyle: { color: this.state.level2Color },
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "bar",
|
||
data: Data.LEVEL3,
|
||
itemStyle: { color: this.state.level3Color },
|
||
},
|
||
{
|
||
name: "四级",
|
||
type: "bar",
|
||
data: Data.LEVEL4,
|
||
itemStyle: { color: this.state.level4Color },
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
chart13 = (Data) => {
|
||
let chart13s = document.getElementById("chart13");
|
||
if (chart13s) {
|
||
let myChart = echarts.init(chart13s);
|
||
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: "value",
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: Data.NAME.slice(0, 10),
|
||
},
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL1.slice(0, 10),
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
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
|
||
);
|
||
}
|
||
};
|
||
chart14 = (Data) => {
|
||
let chart14s = document.getElementById("chart14");
|
||
if (chart14s) {
|
||
let myChart = echarts.init(chart14s);
|
||
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: "3%",
|
||
bottom: "12%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: Data.NAME,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
formatter: function (value) {
|
||
return value;
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
data: Data.LEVEL1,
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
name: "二级",
|
||
type: "bar",
|
||
data: Data.LEVEL2,
|
||
itemStyle: { color: this.state.level2Color },
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "bar",
|
||
data: Data.LEVEL3,
|
||
itemStyle: { color: this.state.level3Color },
|
||
},
|
||
{
|
||
name: "四级",
|
||
type: "bar",
|
||
data: Data.LEVEL4,
|
||
itemStyle: { color: this.state.level4Color },
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
chart15 = (Data) => {
|
||
let chart15s = document.getElementById("chart15");
|
||
if (chart15s) {
|
||
let myChart = echarts.init(chart15s);
|
||
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: "3%",
|
||
bottom: "12%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: Data.NAME,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
data: Data.LEVEL1,
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
name: "二级",
|
||
type: "bar",
|
||
data: Data.LEVEL2,
|
||
itemStyle: { color: this.state.level2Color },
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "bar",
|
||
data: Data.LEVEL3,
|
||
itemStyle: { color: this.state.level3Color },
|
||
},
|
||
{
|
||
name: "四级",
|
||
type: "bar",
|
||
data: Data.LEVEL4,
|
||
itemStyle: { color: this.state.level4Color },
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
chart16 = (Data) => {
|
||
let chart16s = document.getElementById("chart16");
|
||
if (chart16s) {
|
||
let myChart = echarts.init(chart16s);
|
||
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: "10%",
|
||
top: "8%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: Data.NAME,
|
||
},
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL1,
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
name: "二级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL2,
|
||
itemStyle: { color: this.state.level2Color },
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL3,
|
||
itemStyle: { color: this.state.level3Color },
|
||
},
|
||
{
|
||
name: "四级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL4,
|
||
itemStyle: { color: this.state.level4Color },
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
chart17 = (Data) => {
|
||
let chart17s = document.getElementById("chart17");
|
||
if (chart17s) {
|
||
let myChart = echarts.init(chart17s);
|
||
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: "3%",
|
||
bottom: "12%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: Data.NAME,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
data: Data.LEVEL1,
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
name: "二级",
|
||
type: "bar",
|
||
data: Data.LEVEL2,
|
||
itemStyle: { color: this.state.level2Color },
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "bar",
|
||
data: Data.LEVEL3,
|
||
itemStyle: { color: this.state.level3Color },
|
||
},
|
||
{
|
||
name: "四级",
|
||
type: "bar",
|
||
data: Data.LEVEL4,
|
||
itemStyle: { color: this.state.level4Color },
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
chart18 = (Data) => {
|
||
let chart18s = document.getElementById("chart18");
|
||
if (chart18s) {
|
||
let myChart = echarts.init(chart18s);
|
||
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: "3%",
|
||
bottom: "12%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: Data.NAME,
|
||
axisLabel: {
|
||
interval: 0,
|
||
rotate: 0,
|
||
formatter: function (value) {
|
||
return value;
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
data: Data.LEVEL1,
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
name: "二级",
|
||
type: "bar",
|
||
data: Data.LEVEL2,
|
||
itemStyle: { color: this.state.level2Color },
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "bar",
|
||
data: Data.LEVEL3,
|
||
itemStyle: { color: this.state.level3Color },
|
||
},
|
||
{
|
||
name: "四级",
|
||
type: "bar",
|
||
data: Data.LEVEL4,
|
||
itemStyle: { color: this.state.level4Color },
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
chart19 = (Data) => {
|
||
let chart19s = document.getElementById("chart19");
|
||
if (chart19s) {
|
||
let myChart = echarts.init(chart19s);
|
||
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: "3%",
|
||
bottom: "12%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: Data.NAME,
|
||
},
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL1,
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
name: "二级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL2,
|
||
itemStyle: { color: this.state.level2Color },
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL3,
|
||
itemStyle: { color: this.state.level3Color },
|
||
},
|
||
{
|
||
name: "四级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL4,
|
||
itemStyle: { color: this.state.level4Color },
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
chart20 = (Data) => {
|
||
let chart20s = document.getElementById("chart20");
|
||
if (chart20s) {
|
||
let myChart = echarts.init(chart20s);
|
||
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: "value",
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: Data.NAME,
|
||
},
|
||
series: [
|
||
{
|
||
name: "一级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL1,
|
||
itemStyle: { color: this.state.level1Color },
|
||
},
|
||
{
|
||
name: "二级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL2,
|
||
itemStyle: { color: this.state.level2Color },
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL3,
|
||
itemStyle: { color: this.state.level3Color },
|
||
},
|
||
{
|
||
name: "四级",
|
||
type: "bar",
|
||
stack: "总量",
|
||
label: {
|
||
show: true,
|
||
position: "insideRight",
|
||
},
|
||
data: Data.LEVEL4,
|
||
itemStyle: { color: this.state.level4Color },
|
||
},
|
||
],
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
subtractRandomNotLessThanSelf = (obj) => {
|
||
function getRandomNotLessThan(num) {
|
||
return Math.floor(Math.random() * num);
|
||
}
|
||
for (let key in obj) {
|
||
if (Array.isArray(obj[key])) {
|
||
obj[key] = obj[key].map((number) => {
|
||
if (typeof number === "number") {
|
||
const randomSubtraction = getRandomNotLessThan(number);
|
||
return Math.floor(number - randomSubtraction); // 确保结果也为整数
|
||
} else {
|
||
return number;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
return obj;
|
||
};
|
||
|
||
|
||
//显示详情弹窗
|
||
showDetailModal = (formCode) => {
|
||
var titleTemp =
|
||
this.state.mineType == 20
|
||
? "尾矿库"
|
||
: this.state.mineType == 10
|
||
? "选矿厂"
|
||
: "露天矿";
|
||
if (formCode == "风险类别") {
|
||
titleTemp += "风险类别";
|
||
this.chart20(this.state.ret.Data.CHARTLIST[1]);
|
||
} else if (formCode == "生产单元") {
|
||
titleTemp += "生产单元";
|
||
//this.chart21(this.state.ret.Data.CHARTLIST[1]);
|
||
} else if (formCode == "") {
|
||
titleTemp += "";
|
||
} else if (formCode == "") {
|
||
titleTemp += "";
|
||
} else if (formCode == "") {
|
||
titleTemp += "";
|
||
}
|
||
|
||
const newtmpData = {
|
||
data: {
|
||
id: guid(),
|
||
mineType: this.state.mineType,
|
||
onCancel: this.handleCancel,
|
||
homeReload: true,
|
||
},
|
||
formCode: formCode,
|
||
};
|
||
this.setState({ tmpData: newtmpData }, () => {
|
||
var detailForm = {
|
||
isShow: true,
|
||
formCode: formCode,
|
||
title: titleTemp,
|
||
};
|
||
this.setState({
|
||
detailForm: detailForm,
|
||
});
|
||
});
|
||
};
|
||
//详情弹窗关闭（隐藏）
|
||
detailFormClose = () => {
|
||
var detailForm = {
|
||
isShow: false,
|
||
formCode: "",
|
||
title: "",
|
||
};
|
||
this.setState({
|
||
detailForm: detailForm,
|
||
});
|
||
};
|
||
choose = (index) => {
|
||
if (index == 2) {
|
||
this.setState(
|
||
{
|
||
choose: 2,
|
||
},
|
||
() => {
|
||
this.chart16(this.state.ret.Data.CHARTLIST[4]);
|
||
}
|
||
);
|
||
} else {
|
||
this.setState(
|
||
{
|
||
choose: 1,
|
||
},
|
||
() => {
|
||
this.chart13(this.state.ret.Data.CHARTLIST[1]);
|
||
}
|
||
);
|
||
}
|
||
};
|
||
chooseTwo = (index) => {
|
||
if (index == 2) {
|
||
this.setState(
|
||
{
|
||
chooseTwo: 2,
|
||
},
|
||
() => {
|
||
this.chart17(this.state.ret.Data.CHARTLIST[5]);
|
||
}
|
||
);
|
||
} else {
|
||
this.setState(
|
||
{
|
||
chooseTwo: 1,
|
||
},
|
||
() => {
|
||
this.chart15(this.state.ret.Data.CHARTLIST[3]);
|
||
}
|
||
);
|
||
}
|
||
};
|
||
chooseThree = (index) => {
|
||
if (index == 2) {
|
||
this.setState(
|
||
{
|
||
chooseThree: 2,
|
||
},
|
||
() => {
|
||
this.chart18(this.state.ret.Data.CHARTLIST[6]);
|
||
}
|
||
);
|
||
} else {
|
||
this.setState(
|
||
{
|
||
chooseThree: 1,
|
||
},
|
||
() => {
|
||
this.chart14(this.state.ret.Data.CHARTLIST[2]);
|
||
}
|
||
);
|
||
}
|
||
};
|
||
render() {
|
||
return (
|
||
<div
|
||
style={{
|
||
backgroundColor: "#fff", //F4F7FF
|
||
// width: "1200px",
|
||
top: "0",
|
||
bottom: "0",
|
||
left: "0",
|
||
right: "0",
|
||
margin: "auto",
|
||
// borderStyle: "solid",
|
||
// borderColor: "#ccc",
|
||
// borderWidth: "1px",
|
||
}}
|
||
>
|
||
<div style={{ display: "inline-block" }}>
|
||
<Modal
|
||
visible={this.state.detailForm.isShow}
|
||
title={this.state.detailForm.title}
|
||
maskClosable={false}
|
||
closeModal={this.detailFormClose}
|
||
onCancel={this.detailFormClose}
|
||
footer={null}
|
||
width="1300px"
|
||
getContainer={false}
|
||
>
|
||
<div id="chart20" style={{ width: "1200px", height:"700px", flex: 1 }}></div>
|
||
</Modal>
|
||
</div>
|
||
<Row gutter={12} style={{ marginTop: "5px" }}>
|
||
<Col span={1}></Col>
|
||
<Col span={9} className="risk-model-col" style={{ padding: 0 }}>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">（动态4个层级 公司 部门。。）风险等级</div>
|
||
</div>
|
||
</div>
|
||
<div id="chart11" style={{ width: "100%", height: "430px" }}></div>
|
||
</Col>
|
||
<Col span={1}></Col>
|
||
<Col span={9} className="risk-model-col" style={{ padding: 0 }}>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">生产单元</div>
|
||
</div>
|
||
<div onClick={() => this.showDetailModal("生产单元")}>
|
||
<IconFont
|
||
type="icon-24gl-expand2"
|
||
className="home-always-icon"
|
||
></IconFont>
|
||
</div>
|
||
</div>
|
||
<div id="chart12" style={{ width: "100%", height: "330px" }}></div>
|
||
</Col>
|
||
|
||
<Col span={1}></Col>
|
||
</Row>
|
||
<Row gutter={12} style={{ marginTop: "30px" }}>
|
||
<Col span={1}></Col>
|
||
<Col span={12} className="risk-model-col" style={{ padding: 0 }}>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">风险类别</div>
|
||
</div>
|
||
<div onClick={() => this.showDetailModal("风险类别")}>
|
||
<IconFont
|
||
type="icon-24gl-expand2"
|
||
className="home-always-icon"
|
||
></IconFont>
|
||
</div>
|
||
</div>
|
||
<div className="risk-chart" style={{ height: "430px" }}>
|
||
<div className="risk-model-tab">
|
||
<div
|
||
className={
|
||
this.state.choose == 1
|
||
? "risk-model-card-choose"
|
||
: "risk-model-card"
|
||
}
|
||
onClick={() => {
|
||
this.choose(1);
|
||
}}
|
||
>
|
||
选矿厂，尾矿库，露天矿
|
||
</div>
|
||
<div
|
||
className={
|
||
this.state.choose == 2
|
||
? "risk-model-card-choose"
|
||
: "risk-model-card"
|
||
}
|
||
onClick={() => {
|
||
this.choose(2);
|
||
}}
|
||
>
|
||
公司，部门，车间，班组
|
||
</div>
|
||
</div>
|
||
{this.state.choose == 1 ? (
|
||
<div id="chart13" style={{ width: "100%", flex: 1 }}></div>
|
||
) : (
|
||
<div id="chart16" style={{ width: "100%", flex: 1 }}></div>
|
||
)}
|
||
</div>
|
||
</Col>
|
||
<Col span={1}></Col>
|
||
<Col span={12} className="risk-model-col" style={{ padding: 0 }}>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">层级</div>
|
||
</div>
|
||
</div>
|
||
<div className="risk-chart" style={{ height: "330px" }}>
|
||
<div className="risk-model-tab">
|
||
<div
|
||
className={
|
||
this.state.chooseTwo == 1
|
||
? "risk-model-card-choose"
|
||
: "risk-model-card"
|
||
}
|
||
onClick={() => {
|
||
this.chooseTwo(1);
|
||
}}
|
||
>
|
||
按等级划分
|
||
</div>
|
||
<div
|
||
className={
|
||
this.state.chooseTwo == 2
|
||
? "risk-model-card-choose"
|
||
: "risk-model-card"
|
||
}
|
||
onClick={() => {
|
||
this.chooseTwo(2);
|
||
}}
|
||
>
|
||
按生产单元+等级划分
|
||
</div>
|
||
</div>
|
||
{this.state.chooseTwo == 1 ? (
|
||
<div id="chart15" style={{ width: "100%", flex: 1 }}></div>
|
||
) : (
|
||
<div id="chart17" style={{ width: "100%", flex: 1 }}></div>
|
||
)}
|
||
</div>
|
||
</Col>
|
||
<Col span={1}></Col>
|
||
</Row>
|
||
<Row gutter={12} style={{ marginTop: "30px" }}>
|
||
<Col span={1}></Col>
|
||
<Col span={22} className="risk-model-col" style={{ padding: 0 }}>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">责任单位</div>
|
||
</div>
|
||
</div>
|
||
<div className="risk-chart" style={{ height: "330px" }}>
|
||
<div className="risk-model-tab">
|
||
<div
|
||
className={
|
||
this.state.chooseThree == 1
|
||
? "risk-model-card-choose"
|
||
: "risk-model-card"
|
||
}
|
||
onClick={() => {
|
||
this.chooseThree(1);
|
||
}}
|
||
>
|
||
按等级划分
|
||
</div>
|
||
<div
|
||
className={
|
||
this.state.chooseThree == 2
|
||
? "risk-model-card-choose"
|
||
: "risk-model-card"
|
||
}
|
||
onClick={() => {
|
||
this.chooseThree(2);
|
||
}}
|
||
>
|
||
按生产单元+等级划分
|
||
</div>
|
||
</div>
|
||
{this.state.chooseThree == 1 ? (
|
||
<div id="chart14" style={{ width: "100%", flex: 1 }}></div>
|
||
) : (
|
||
<div id="chart18" style={{ width: "100%", flex: 1 }}></div>
|
||
)}
|
||
</div>
|
||
</Col>
|
||
<Col span={1}></Col>
|
||
</Row>
|
||
<Row gutter={12} style={{ marginTop: "30px" }}>
|
||
<Col span={1}></Col>
|
||
<Col span={9} className="risk-model-col" style={{ padding: 0 }}>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">月度风险辨识统计走势</div>
|
||
</div>
|
||
</div>
|
||
<div id="chart4" style={{ width: "100%", height: "330px" }}></div>
|
||
</Col>
|
||
<Col span={1}></Col>
|
||
<Col span={12} className="risk-model-col" style={{ padding: 0 }}>
|
||
<div className="home-always-title">
|
||
<div className="home-always-left">
|
||
<div className="home-always-badge"></div>
|
||
<div className="home-always-name">
|
||
区域（按生产单元+等级划分）
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="chart19" style={{ width: "100%", height: "330px" }}></div>
|
||
</Col>
|
||
<Col span={1}></Col>
|
||
</Row>
|
||
<Row gutter={10} style={{ marginTop: "20px" }}>
|
||
<Col span={1}></Col>
|
||
</Row>
|
||
<br />
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default connect(({ login, app }) => ({ login, app }))(
|
||
BI014RiskPerformanceModel
|
||
);
|