299 lines
9.3 KiB
JavaScript
299 lines
9.3 KiB
JavaScript
|
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 + '<br/>'
|
||
|
|
for (var i = 0; i < value.length; i++) {
|
||
|
|
if (value[i].componentSubType == "bar") {
|
||
|
|
tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "<br/>"
|
||
|
|
} 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 (
|
||
|
|
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto" }} >
|
||
|
|
|
||
|
|
{/* 第一行 */}
|
||
|
|
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center" }}>
|
||
|
|
<Col span={1} > </Col>
|
||
|
|
<Col span={11} style={{ padding: 0 }}>
|
||
|
|
<div id="div1" style={{ width: "100%", height: "330px" }}></div>
|
||
|
|
</Col>
|
||
|
|
<Col span={1} > </Col>
|
||
|
|
<Col span={11} style={{ padding: 0 }}>
|
||
|
|
<div id="div2" style={{ width: "100%", height: "330px" }}></div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row gutter={12} style={{ marginTop: "30px", textAlign: "center" }}>
|
||
|
|
<Col span={1} > </Col>
|
||
|
|
<Col span={11} style={{ padding: 0 }}>
|
||
|
|
<div id="div3" style={{ width: "100%", height: "330px" }}></div>
|
||
|
|
</Col>
|
||
|
|
<Col span={1} > </Col>
|
||
|
|
<Col span={11} style={{ padding: 0 }}>
|
||
|
|
<div id="div4" style={{ width: "100%", height: "330px" }}></div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg2_1);
|