209 lines
7.3 KiB
JavaScript
209 lines
7.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";
|
|
import IconFont from "../../../utils/iconFont";
|
|
import { T } from "antd/lib/upload/utils";
|
|
|
|
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
|
class BI056Dilg3_2 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: "",
|
|
},
|
|
Data: {
|
|
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
checkTypeInfo: {
|
|
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
|
listLegendName: [
|
|
['巡回检查', '例行检查', '专业检查', '综合检查', '重大事故隐患专项排查'],
|
|
['巡回检查', '例行检查', '专业检查', '综合检查'],
|
|
['日常巡检', '防洪安全检查', '坝体安全检查', '库区安全检查', '重大事故隐患专项排查'],
|
|
['巡回检查', '例行检查', '专业检查', '综合检查', '重大事故隐患专项排查']
|
|
],
|
|
//每个生产单元 每种检查类型 1-12 月数量
|
|
checkTypeCount1: [[2, 3, 3, 5, 3, 2, 6, 2, 1, 0, 1, 2], [1, 2, 3, 3, 2, 4, 5, 3, 1, 0, 9, 8], [1, 2, 3, 4, 5, 3, 2, 4, 1, 1, 4, 0], [2, 1, 1, 0, 0, 3, 3, 2, 2, 0, 0, 1], [1, 1, 1, 3, 3, 1, 3, 1, 2, 2, 3, 4]],
|
|
checkTypeCount2: [[2, 3, 6, 6, 3, 2, 6, 3, 8, 0, 1, 2], [1, 2, 7, 3, 5, 4, 5, 4, 1, 4, 9, 2], [1, 2, 8, 4, 5, 3, 2, 4, 3, 4, 0, 6], [2, 3, 1, 0, 3, 3, 3, 6, 3, 4, 6, 1]],
|
|
checkTypeCount3: [[0, 0, 3, 3, 5, 5, 7, 7, 3, 4, 7, 1], [5, 7, 0, 0, 1, 1, 2, 1, 4, 0, 3, 6], [2, 2, 5, 7, 4, 0, 0, 4, 4, 0, 0, 4], [1, 5, 4, 2, 4, 0, 2, 0, 4, 0, 0, 4], [1, 1, 1, 0, 1, 0, 0, 5, 0, 0, 1, 0]],
|
|
checkTypeCount4: [[4, 2, 2, 5, 4, 0, 2, 5, 0, 2, 4, 4], [4, 0, 4, 0, 0, 4, 0, 0, 4, 0, 4, 0], [1, 0, 3, 0, 1, 3, 0, 7, 2, 0, 3, 0], [1, 0, 3, 1, 1, 3, 3, 3, 2, 0, 3, 0], [1, 0, 3, 0, 1, 3, 0, 2, 2, 1, 0, 2]],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
|
|
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.this.state.CheckCount(ret?.Data.checkMineType, "divCheckCount1");
|
|
},
|
|
});
|
|
};
|
|
|
|
getBaseInfoData = (mineType) => {
|
|
this.CheckCount(this.state.Data, "div1", 1);
|
|
this.CheckCount(this.state.Data, "div2", 2);
|
|
this.CheckCount(this.state.Data, "div3", 3);
|
|
this.CheckCount(this.state.Data, "div4", 4);
|
|
};
|
|
|
|
// index 从1开始
|
|
CheckCount = (Data, divId, index) => {
|
|
let divShow = document.getElementById(divId);
|
|
if (divShow) {
|
|
let myChart = echarts.init(divShow);
|
|
|
|
const labelOption = {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}',
|
|
textStyle: {
|
|
fontSize: 12, // 字体大小
|
|
color: '#333', // 字体颜色
|
|
}
|
|
};
|
|
var title = Data.checkTypeInfo.mineTypeName[index - 1]
|
|
var month = (new Date()).getMonth() + 1//取当前月
|
|
// checkTypeInfo.mineTypeName[] mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
|
var dataList = []
|
|
switch (index) {
|
|
case 1: dataList = Data.checkTypeInfo.checkTypeCount1
|
|
break;
|
|
case 2: dataList = Data.checkTypeInfo.checkTypeCount2
|
|
break;
|
|
case 3: dataList = Data.checkTypeInfo.checkTypeCount3
|
|
break;
|
|
case 4: dataList = Data.checkTypeInfo.checkTypeCount4
|
|
break;
|
|
}
|
|
|
|
var LegendName = Data.checkTypeInfo.listLegendName[index - 1]
|
|
var seriesShow = []
|
|
for (let i = 0; i < LegendName.length; i++) {
|
|
debugger
|
|
seriesShow.push({
|
|
name: LegendName[i],
|
|
barWidth: this.state.barWidth,
|
|
type: 'bar',
|
|
barGap: 0,
|
|
label: labelOption,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: dataList[i],//.slice(0, month),
|
|
itemStyle: { color: this.state.ColorShow[i] },
|
|
})
|
|
}
|
|
|
|
myChart.setOption(
|
|
{
|
|
// 检查类型次数统计
|
|
title: {
|
|
text: title,
|
|
left: "center",
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
},
|
|
legend: {
|
|
left: "center",
|
|
align: "left",
|
|
bottom: "2%",
|
|
textStyle: {
|
|
color: "#000",
|
|
},
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
data: Data.legendName
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: { show: false },
|
|
data: Data.axisLabelMonth,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0c3b71",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: "rgb(170,170,170)",
|
|
interval: 0,
|
|
textStyle: {
|
|
lineHeight: 14,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: seriesShow
|
|
},
|
|
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" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
|
</Col>
|
|
<Col span={1} > </Col>
|
|
<Col span={11} style={{ padding: 0 }}>
|
|
<div id="div2" className="risk-model-col" 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" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
|
</Col>
|
|
<Col span={1} > </Col>
|
|
<Col span={11} style={{ padding: 0 }}>
|
|
<div id="div4" className="risk-model-col" style={{ width: "100%", height: "330px" }}></div>
|
|
</Col>
|
|
</Row>
|
|
<br />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg3_2); |