2270 lines
72 KiB
JavaScript
2270 lines
72 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 = {
|
|
level1Color: "#c02e30",
|
|
level2Color: "#f7aa52",
|
|
level3Color: "#fbe06a",
|
|
level4Color: "#5185f3",
|
|
isShow1: false,
|
|
isShow2: false,
|
|
detailForm: {
|
|
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 },
|
|
],
|
|
CHARTFXDJ1:
|
|
{
|
|
NAME: ["一级", "二级", "三级", "四级"],
|
|
LEVEL1: [3, 8, 181, 1112],
|
|
},
|
|
CHARTFXDJ2: [
|
|
{ name: "一级", value: 3 },
|
|
{ name: "二级", value: 8 },
|
|
{ name: "三级", value: 181 },
|
|
{ name: "四级", value: 1112 },
|
|
],
|
|
CHARTLIST: [
|
|
{
|
|
NAME: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
|
LEVEL1: [1, 0, 1, 1],
|
|
LEVEL2: [0, 3, 2, 2],
|
|
LEVEL3: [1, 3, 70, 105],
|
|
LEVEL4: [203, 223, 211, 475],
|
|
},
|
|
|
|
{
|
|
NAME: [
|
|
"容器爆炸",
|
|
"淹溺",
|
|
"物体打击",
|
|
"高处坠落",
|
|
"火灾",
|
|
"起重伤害",
|
|
"其他爆炸",
|
|
"中毒和窒息",
|
|
"放炮",
|
|
"冒顶片帮",
|
|
"坍塌",
|
|
"车辆伤害",
|
|
"触电",
|
|
"其他伤害",
|
|
"机械伤害",
|
|
"灼烫",
|
|
"火药爆炸",
|
|
],
|
|
LEVEL1: [
|
|
1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
|
0, 0, 0, 0,
|
|
],
|
|
LEVEL2: [
|
|
3, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
|
|
0, 0, 0, 0,
|
|
],
|
|
LEVEL3: [
|
|
95, 46, 15, 10, 7, 6, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0, 0
|
|
],
|
|
LEVEL4: [
|
|
260, 200, 120, 50, 20, 15, 10, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0
|
|
],
|
|
},
|
|
|
|
{
|
|
NAME: [
|
|
"安全环保管理部",
|
|
"选矿部",
|
|
"机电设备管理办公室",
|
|
"矿山部",
|
|
"财务部",
|
|
"非金属资源部筹备组",
|
|
"企业管理部",
|
|
"技术管理部",
|
|
],
|
|
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],
|
|
},
|
|
|
|
{
|
|
NAME: ["公司", "部门", "车间", "班组"],
|
|
LEVEL1: [2, 1, 0, 0],
|
|
LEVEL2: [2, 2, 2, 2],
|
|
LEVEL3: [343, 121, 396, 78],
|
|
LEVEL4: [215, 331, 37, 292],
|
|
},
|
|
{
|
|
NAME: [
|
|
"破碎车间",
|
|
"磨重车间",
|
|
"尾矿库库区",
|
|
"钨细泥回收车间",
|
|
"高压配电室",
|
|
"炸药库区",
|
|
"修理场",
|
|
"矿山",
|
|
"加油站-采场",
|
|
"排土场",
|
|
],
|
|
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: [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: ["尾矿一班", "尾矿二班", "尾矿三班", "尾矿机修班"],
|
|
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]
|
|
},
|
|
],
|
|
CHARTZYRW1:
|
|
{
|
|
NAME: ["许可作业", "关键任务", "一般任务"],
|
|
LEVEL1: [67, 81, 191],
|
|
}
|
|
,
|
|
CHARTZYRW2: [
|
|
{ name: "许可作业", value: 67 },
|
|
{ name: "关键任务", value: 81 },
|
|
{ name: "一般任务", value: 191 },
|
|
],
|
|
},
|
|
TotalCount: 0,
|
|
MessageType: 0,
|
|
},
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getBaseInfoDataOnline();
|
|
}
|
|
|
|
//获取数据
|
|
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.state.ret = ret;
|
|
this.chart4(ret?.Data.DATECOUNTS);
|
|
this.chartFXDJ1(ret?.Data.CHARTFXDJ1);
|
|
this.chartFXDJ2(ret?.Data.CHARTFXDJ2);
|
|
this.chartSCDY(ret?.Data.CHARTLIST[0]);
|
|
this.chartFXLB1(ret?.Data.CHARTLIST[1]);
|
|
this.chartCJ(ret?.Data.CHARTLIST[3]);
|
|
this.chartZRDW(ret?.Data.CHARTLIST[2]);
|
|
this.chartQY(ret?.Data.CHARTLIST[4]);
|
|
this.chartZYRW1(ret?.Data.CHARTZYRW1);
|
|
this.chartZYRW2(ret?.Data.CHARTZYRW2);
|
|
},
|
|
});
|
|
};
|
|
getBaseInfoData = (mineType) => {
|
|
this.chart4(this.state.ret.Data.DATECOUNTS);
|
|
this.chartFXDJ1(this.state.ret.Data.CHARTFXDJ1);
|
|
this.chartFXDJ2(this.state.ret.Data.CHARTFXDJ2);
|
|
this.chartSCDY(this.state.ret.Data.CHARTLIST[0]);
|
|
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 = [];
|
|
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
|
|
);
|
|
}
|
|
};
|
|
chartFXDJ1 = (Data) => {
|
|
let chartFXDJ1 = document.getElementById("chartFXDJ1");
|
|
if (chartFXDJ1) {
|
|
let myChart = echarts.init(chartFXDJ1);
|
|
myChart.setOption(
|
|
{
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: Data.NAME,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
barWidth: 20,
|
|
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"; // 第四个柱子颜色
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
chartFXDJ2 = (Data) => {
|
|
let that = this;
|
|
let chartFXDJ2 = document.getElementById("chartFXDJ2");
|
|
if (chartFXDJ2) {
|
|
let myChart = echarts.init(chartFXDJ2);
|
|
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
|
|
);
|
|
}
|
|
};
|
|
chartSCDY = (Data) => {
|
|
let chartSCDY = document.getElementById("chartSCDY");
|
|
let myChart = echarts.init(chartSCDY);
|
|
myChart.setOption(
|
|
{
|
|
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: [
|
|
{
|
|
barWidth: 20,
|
|
name: "一级",
|
|
type: "bar",
|
|
data: Data.LEVEL1,
|
|
itemStyle: { color: this.state.level1Color },
|
|
label: {
|
|
normal: {
|
|
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: {
|
|
normal: {
|
|
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: {
|
|
normal: {
|
|
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: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
};
|
|
|
|
chartFXLB1 = (Data) => {
|
|
let chartFXLB1 = document.getElementById("chartFXLB1");
|
|
let myChart = echarts.init(chartFXLB1);
|
|
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: [
|
|
{
|
|
barWidth: 20,
|
|
name: "露天矿",
|
|
type: "bar",
|
|
stack: "总量",
|
|
label: {
|
|
show: true,
|
|
position: "insideRight",
|
|
},
|
|
data: Data.LEVEL3.slice(0, 10),
|
|
itemStyle: { color: this.state.level3Color },
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "选矿厂",
|
|
type: "bar",
|
|
stack: "总量",
|
|
label: {
|
|
show: true,
|
|
position: "insideRight",
|
|
},
|
|
data: Data.LEVEL1.slice(0, 10),
|
|
itemStyle: { color: this.state.level1Color },
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "尾矿库",
|
|
type: "bar",
|
|
stack: "总量",
|
|
label: {
|
|
show: true,
|
|
position: "insideRight",
|
|
},
|
|
data: Data.LEVEL2.slice(0, 10),
|
|
itemStyle: { color: this.state.level2Color },
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "职能部门",
|
|
type: "bar",
|
|
stack: "总量",
|
|
label: {
|
|
show: true,
|
|
position: "insideRight",
|
|
},
|
|
data: Data.LEVEL4.slice(0, 10),
|
|
itemStyle: { color: this.state.level4Color },
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
};
|
|
chartZRDW = (Data) => {
|
|
let chartZRDW = document.getElementById("chartZRDW");
|
|
if (chartZRDW) {
|
|
let myChart = echarts.init(chartZRDW);
|
|
myChart.setOption(
|
|
{
|
|
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: 20,
|
|
formatter: function (value) {
|
|
return value;
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
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', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
chartCJ = (Data) => {
|
|
let chartCJ = document.getElementById("chartCJ");
|
|
if (chartCJ) {
|
|
let myChart = echarts.init(chartCJ);
|
|
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: [
|
|
{
|
|
barWidth: 20,
|
|
name: "一级",
|
|
type: "bar",
|
|
data: Data.LEVEL1,
|
|
itemStyle: { color: this.state.level1Color },
|
|
label: {
|
|
normal: {
|
|
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: {
|
|
normal: {
|
|
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: {
|
|
normal: {
|
|
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: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
chartQY = (Data) => {
|
|
let chartQY = document.getElementById("chartQY");
|
|
if (chartQY) {
|
|
let myChart = echarts.init(chartQY);
|
|
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: 20,
|
|
formatter: function (value) {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
barWidth: 20,
|
|
name: "一级",
|
|
type: "bar",
|
|
stack: "总量",
|
|
label: {
|
|
show: true,
|
|
position: "insideRight",
|
|
},
|
|
data: Data.LEVEL1,
|
|
itemStyle: { color: this.state.level1Color },
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "二级",
|
|
type: "bar",
|
|
stack: "总量",
|
|
label: {
|
|
show: true,
|
|
position: "insideRight",
|
|
},
|
|
data: Data.LEVEL2,
|
|
itemStyle: { color: this.state.level2Color },
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "三级",
|
|
type: "bar",
|
|
stack: "总量",
|
|
label: {
|
|
show: true,
|
|
position: "insideRight",
|
|
},
|
|
data: Data.LEVEL3,
|
|
itemStyle: { color: this.state.level3Color },
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "四级",
|
|
type: "bar",
|
|
stack: "总量",
|
|
label: {
|
|
show: true,
|
|
position: "insideRight",
|
|
},
|
|
data: Data.LEVEL4,
|
|
itemStyle: { color: this.state.level4Color },
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
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: [
|
|
{
|
|
barWidth: 20,
|
|
name: "一级",
|
|
type: "bar",
|
|
data: Data.LEVEL1,
|
|
itemStyle: {
|
|
color: function (params) {
|
|
switch (params.dataIndex) {
|
|
case 0:
|
|
return "#f7aa52"; // 第一个柱子颜色
|
|
case 1:
|
|
return "#fbe06a"; // 第二个柱子颜色
|
|
case 2:
|
|
return "#5185f3"; // 第三个柱子颜色
|
|
}
|
|
}
|
|
},
|
|
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 "#f7aa52"; // 第一个柱子颜色
|
|
case 1:
|
|
return "#fbe06a"; // 第二个柱子颜色
|
|
case 2:
|
|
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);
|
|
}
|
|
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;
|
|
};
|
|
chart21 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => {
|
|
let chart21s = document.getElementById("chart21");
|
|
if (chart21s) {
|
|
let myChart = echarts.init(chart21s);
|
|
myChart.setOption(
|
|
{
|
|
title: {
|
|
text: Title,
|
|
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: 30,
|
|
formatter: function (value) {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
barWidth: 20,
|
|
name: "一级",
|
|
type: "bar",
|
|
data: Data.LEVEL1,
|
|
stack: Stack1,
|
|
itemStyle: { color: this.state.level1Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "二级",
|
|
type: "bar",
|
|
data: Data.LEVEL2,
|
|
stack: Stack2,
|
|
itemStyle: { color: this.state.level2Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "三级",
|
|
type: "bar",
|
|
data: Data.LEVEL3,
|
|
stack: Stack3,
|
|
itemStyle: { color: this.state.level3Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "四级",
|
|
type: "bar",
|
|
data: Data.LEVEL4,
|
|
stack: Stack4,
|
|
itemStyle: { color: this.state.level4Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
chart22 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => {
|
|
let chart22s = document.getElementById("chart22");
|
|
if (chart22s) {
|
|
let myChart = echarts.init(chart22s);
|
|
myChart.setOption(
|
|
{
|
|
title: {
|
|
text: Title,
|
|
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: 30,
|
|
formatter: function (value) {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
barWidth: 20,
|
|
name: "一级",
|
|
type: "bar",
|
|
data: Data.LEVEL1,
|
|
stack: Stack1,
|
|
itemStyle: { color: this.state.level1Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "二级",
|
|
type: "bar",
|
|
data: Data.LEVEL2,
|
|
stack: Stack2,
|
|
itemStyle: { color: this.state.level2Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "三级",
|
|
type: "bar",
|
|
data: Data.LEVEL3,
|
|
stack: Stack3,
|
|
itemStyle: { color: this.state.level3Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "四级",
|
|
type: "bar",
|
|
data: Data.LEVEL4,
|
|
stack: Stack4,
|
|
itemStyle: { color: this.state.level4Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
chart23 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => {
|
|
let chart23s = document.getElementById("chart23");
|
|
if (chart23s) {
|
|
let myChart = echarts.init(chart23s);
|
|
myChart.setOption(
|
|
{
|
|
title: {
|
|
text: Title,
|
|
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: 30,
|
|
formatter: function (value) {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
barWidth: 20,
|
|
name: "一级",
|
|
type: "bar",
|
|
data: Data.LEVEL1,
|
|
stack: Stack1,
|
|
itemStyle: { color: this.state.level1Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "二级",
|
|
type: "bar",
|
|
data: Data.LEVEL2,
|
|
stack: Stack2,
|
|
itemStyle: { color: this.state.level2Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "三级",
|
|
type: "bar",
|
|
data: Data.LEVEL3,
|
|
stack: Stack3,
|
|
itemStyle: { color: this.state.level3Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "四级",
|
|
type: "bar",
|
|
data: Data.LEVEL4,
|
|
stack: Stack4,
|
|
itemStyle: { color: this.state.level4Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
chart24 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => {
|
|
let chart24s = document.getElementById("chart24");
|
|
if (chart24s) {
|
|
let myChart = echarts.init(chart24s);
|
|
myChart.setOption(
|
|
{
|
|
title: {
|
|
text: Title,
|
|
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: 30,
|
|
formatter: function (value) {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
barWidth: 20,
|
|
name: "一级",
|
|
type: "bar",
|
|
data: Data.LEVEL1,
|
|
stack: Stack1,
|
|
itemStyle: { color: this.state.level1Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "二级",
|
|
type: "bar",
|
|
data: Data.LEVEL2,
|
|
stack: Stack2,
|
|
itemStyle: { color: this.state.level2Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "三级",
|
|
type: "bar",
|
|
data: Data.LEVEL3,
|
|
stack: Stack3,
|
|
itemStyle: { color: this.state.level3Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
barWidth: 20,
|
|
name: "四级",
|
|
type: "bar",
|
|
data: Data.LEVEL4,
|
|
stack: Stack4,
|
|
itemStyle: { color: this.state.level4Color },
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
chart25 = (Data, Title) => {
|
|
let chart25s = document.getElementById("chart25");
|
|
if (chart25s) {
|
|
let myChart = echarts.init(chart25s);
|
|
myChart.setOption(
|
|
{
|
|
// title: {
|
|
// text: Title,
|
|
// 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: 20,
|
|
formatter: function (value) {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "一级",
|
|
type: "bar",
|
|
data: Data.LEVEL1,
|
|
itemStyle: { color: this.state.level1Color },
|
|
stack: "总量",
|
|
barWidth: 20,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "二级",
|
|
type: "bar",
|
|
data: Data.LEVEL2,
|
|
itemStyle: { color: this.state.level2Color },
|
|
stack: "总量",
|
|
barWidth: 20,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "三级",
|
|
type: "bar",
|
|
data: Data.LEVEL3,
|
|
itemStyle: { color: this.state.level3Color },
|
|
stack: "总量",
|
|
barWidth: 20,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "四级",
|
|
type: "bar",
|
|
data: Data.LEVEL4,
|
|
itemStyle: { color: this.state.level4Color },
|
|
stack: "总量",
|
|
barWidth: 20,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
|
|
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
true
|
|
);
|
|
}
|
|
};
|
|
//显示详情弹窗
|
|
showDetailModal = (formCode) => {
|
|
var titleTemp ="";
|
|
if (formCode == "风险类别1") {
|
|
titleTemp += "风险类别";
|
|
this.chart25(this.state.ret.Data.CHARTLIST[1]);
|
|
this.setState({ isShow2: true })
|
|
} else if (formCode == "风险类别2") {
|
|
titleTemp += "风险类别";
|
|
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.SCDYLIST[0], "露天矿", "1", "2", "3", "4");
|
|
this.chart22(this.state.ret.Data.SCDYLIST[1], "选矿厂", "1", "2", "3", "4");
|
|
this.chart23(this.state.ret.Data.SCDYLIST[2], "尾矿库", "1", "2", "3", "4");
|
|
this.chart24(this.state.ret.Data.SCDYLIST[3], "职能部门", "1", "2", "3", "4");
|
|
} else if (formCode == "层级") {
|
|
this.setState({ isShow1: true })
|
|
titleTemp += "层级";
|
|
this.chart21(this.state.ret.Data.CJLIST[0], "公司", "1", "2", "3", "4");
|
|
this.chart22(this.state.ret.Data.CJLIST[1], "部门", "1", "2", "3", "4");
|
|
this.chart23(this.state.ret.Data.CJLIST[2], "车间", "1", "2", "3", "4");
|
|
this.chart24(this.state.ret.Data.CJLIST[3], "班组", "1", "2", "3", "4");
|
|
} else if (formCode == "责任单位") {
|
|
this.setState({ isShow1: true })
|
|
titleTemp += "责任单位";
|
|
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.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 = {
|
|
data: {
|
|
id: guid(),
|
|
mineType: this.state.mineType,
|
|
onCancel: this.handleCancel,
|
|
homeReload: true,
|
|
},
|
|
formCode: formCode,
|
|
};
|
|
this.setState({ tmpData: newtmpData }, () => {
|
|
var detailForm = {
|
|
formCode: formCode,
|
|
title: titleTemp,
|
|
};
|
|
this.setState({
|
|
detailForm: detailForm,
|
|
});
|
|
});
|
|
};
|
|
//详情弹窗关闭（隐藏）
|
|
detailFormClose = () => {
|
|
var detailForm = {
|
|
formCode: "",
|
|
title: "",
|
|
};
|
|
this.setState({
|
|
isShow1: false,
|
|
isShow2: false,
|
|
detailForm: detailForm,
|
|
});
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundColor: "#fff",
|
|
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.isShow1}
|
|
title={this.state.detailForm.title}
|
|
maskClosable={false}
|
|
closeModal={this.detailFormClose}
|
|
onCancel={this.detailFormClose}
|
|
footer={null}
|
|
width="1300px"
|
|
getContainer={false}
|
|
>
|
|
<Row gutter={12} style={{ marginTop: "5px" }}>
|
|
<Col span={12}>
|
|
<div id="chart21" style={{ width: "500px", height: "300px", flex: 1 }}></div>
|
|
<div id="chart23" style={{ width: "500px", height: "300px", flex: 1 }}></div>
|
|
</Col>
|
|
<Col span={12}>
|
|
<div id="chart22" style={{ width: "500px", height: "300px", flex: 1 }}></div>
|
|
<div id="chart24" style={{ width: "500px", height: "300px", flex: 1 }}></div>
|
|
</Col>
|
|
</Row>
|
|
</Modal>
|
|
<Modal
|
|
visible={this.state.isShow2}
|
|
title={this.state.detailForm.title}
|
|
maskClosable={false}
|
|
closeModal={this.detailFormClose}
|
|
onCancel={this.detailFormClose}
|
|
footer={null}
|
|
width="1300px"
|
|
getContainer={false}
|
|
>
|
|
<div id="chart25" style={{ width: "1200px", height: "700px", flex: 1 }}></div>
|
|
</Modal>
|
|
</div>
|
|
<Row gutter={12} style={{ marginTop: "5px" }}>
|
|
<Col span={1}></Col>
|
|
<Col span={11} 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="chartFXDJ1" style={{ width: "45%", height: "330px", float: "left" }}></div>
|
|
<div id="chartFXDJ2" style={{ width: "45%", height: "330px", float: "left" }}></div>
|
|
</Col>
|
|
<Col span={1}></Col>
|
|
<Col span={10} 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>
|
|
</Row>
|
|
<Row gutter={12} style={{ marginTop: "30px" }}>
|
|
<Col span={1}></Col>
|
|
<Col span={11} 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="chartSCDY" style={{ width: "100%", height: "330px" }}></div>
|
|
</Col>
|
|
<Col span={1}></Col>
|
|
<Col span={10} 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: "330px" }}>
|
|
<div id="chartCJ" style={{ width: "100%", flex: 1 }}></div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={12} style={{ marginTop: "30px" }}>
|
|
<Col span={1}></Col>
|
|
<Col span={11} 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: "330px" }}>
|
|
<div id="chartZRDW" style={{ width: "100%", flex: 1 }}></div>
|
|
</div>
|
|
</Col>
|
|
<Col span={1}></Col>
|
|
<Col span={10} 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="chartQY" style={{ width: "100%", height: "330px" }}></div>
|
|
</Col>
|
|
<Col span={1}></Col>
|
|
</Row>
|
|
<Row gutter={12} style={{ marginTop: "30px" }}>
|
|
<Col span={1}></Col>
|
|
<Col span={11} 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("风险类别2")}>
|
|
<IconFont
|
|
type="icon-24gl-expand2"
|
|
className="home-always-icon"
|
|
></IconFont>
|
|
</div>
|
|
</div>
|
|
<div className="risk-chart" style={{ height: "330px" }}>
|
|
<div id="chartFXLB1" style={{ width: "100%", flex: 1 }}></div>
|
|
</div>
|
|
</Col>
|
|
<Col span={1}></Col>
|
|
<Col span={10} 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="chartZYRW1" style={{ width: "45%", height: "330px", float: "left" }}></div>
|
|
<div id="chartZYRW2" style={{ width: "45%", height: "330px", float: "left" }}></div>
|
|
</Col>
|
|
<Col span={1}></Col>
|
|
</Row>
|
|
<br />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
export default connect(({ login, app }) => ({ login, app }))(
|
|
BI014RiskPerformanceModel
|
|
);
|