import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import { initFilter, extendOrder, guid } from "../../../utils/common";
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
import echarts from "echarts";
import moment from "moment";
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
class BI056Dilg2_1 extends React.Component {
constructor(props) {
super(props);
this.state = {
ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
barWidth: this.props.barWidth,
isShow1: false,
isShow2: false,
dtStart: null,//开始时间
dtEnd: null,//结束时间
mineType: 0,//生产单元
detailForm: {
formCode: "",
title: "",
},
ret: {
IsSuccessful: true,
Data: {
legendName: ['已整改', '未整改', '整改率'],
titleMineType: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
xAxisName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
countDeal: [[5, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [7, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [13, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6], [15, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6]],
countNotDeal: [[1, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [2, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [3, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2], [4, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2]],
linePercent: [[100.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67], [70.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67], [80.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 90], [90.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 80]],
}
}
}
}
componenthidMount() {
this.getBaseInfoData();
}
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.CheckCount(this.state.ret.Data)
},
});
};
getBaseInfoData = (mineType) => {
this.RiskDeal(this.state.ret.Data, 1)
this.RiskDeal(this.state.ret.Data, 2)
this.RiskDeal(this.state.ret.Data, 3)
this.RiskDeal(this.state.ret.Data, 4)
};
RiskDeal = (Data, index) => {
let divID = document.getElementById("div" + index)
if (divID) {
let myChart = echarts.init(divID);
var listseries = []
var title = Data.titleMineType[index - 1] + "隐患整改情况"
for (let i = 0; i < Data.legendName.length; i++) {
if (i < 2) {
listseries.push({
name: Data.legendName[i],
type: "bar",
stack: "总量",
label: {
show: true,
position: "insideRight",
},
data: i == 0 ? Data.countDeal[index - 1] : (i == 1 ? Data.countNotDeal[index - 1] : Data.linePercent[index - 1]),
itemStyle: { color: this.state.ColorShow[i] },
barWidth: 30,// this.state.barWidth
})
} else {
listseries.push(
{
name: Data.legendName[i],
type: "line",
label: {
show: true,
position: "top",
formatter: "{c}%"
},
lineStyle: {
color: "#ffb122"
},
data: Data.linePercent[index - 1],
itemStyle: { color: this.state.ColorShow[i] },
yAxisIndex: 1
})
}
}
myChart.setOption(
{
title: {
text: title,
left: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (value) {
var tooltipShow = ''
if (value.length > 0) {
tooltipShow += value[0].axisValueLabel + '
'
for (var i = 0; i < value.length; i++) {
if (value[i].componentSubType == "bar") {
tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "
"
} else {
tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "%"
}
}
}
return tooltipShow
}
},
legend: {
left: "center",
align: "left",
bottom: "2%",
textStyle: {
color: "#000",
},
itemWidth: 10,
itemHeight: 10,
data: Data.legendName,
},
grid: {
left: "3%",
right: "3%",
bottom: "12%",
top: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: Data.xAxisName,
axisLabel: {
interval: 0,
rotate: 20,
formatter: function (value) {
return value
}
}
},
yAxis: [
{
name: '整改情况',
type: 'value',
}, {
name: "完成率(%)",
type: "value",
min: 0,
max: 70,
position: "middle",// "right",
formatter: "{value}%",
min: 0,
max: 100,
axisLabel: {
// textStyle: { fontSize: 20 },
formatter: '{value} %', // 给坐标轴标签加单位
},
splitLine: { //网格线
show: false
}
}
],
series: listseries
},
true
);
}
};
CheckCount = (Data) => {
let divRiskCount = document.getElementById("divRiskCount");
if (divRiskCount) {
let myChart = echarts.init(divRiskCount);
var listSeries = []
for (var i = 0; i < Data.legendName.length; i++) {
listSeries.push({
name: Data.legendName[i],
data: Data.checkrisk[i],
type: "bar",
itemStyle: { color: this.state.ColorShow[i] },
barWidth: this.state.barWidth,//横轴的柱状图宽度
label: {
normal: {
show: true,
position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
textStyle: {
fontSize: 12, // 字体大小
color: '#333', // 字体颜色
},
},
},
})
}
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: Data.legendName,
},
grid: {
left: "3%",
right: "3%",
bottom: "12%",
top: "10%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: Data.axisLabelMonth,
},
],
yAxis: [
{
type: "value",
},
],
series: listSeries
},
true
);
}
};
render() {
return (
);
}
}
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg2_1);