303 lines
11 KiB
JavaScript
303 lines
11 KiB
JavaScript
import React, { useState, useEffect, useRef, Component } from "react";
|
||
import { connect } from "dva";
|
||
import { initFilter, extendOrder, guid } from "../../../utils/common";
|
||
import { Row, Col, Select, Modal, Table, Button, DatePicker, message } from "antd";
|
||
import echarts from "echarts";
|
||
|
||
// 年度安全检查统计 弹窗 年度安全检查统计 按月 按生产单元
|
||
class BI056Dilg1_1 extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
var month = (new Date()).getMonth() + 1
|
||
var selectSeason = 1
|
||
var isShowbtn2 = false
|
||
var isShowbtn3 = false
|
||
var isShowbtn4 = false
|
||
|
||
switch (month) {
|
||
case 4:
|
||
case 5:
|
||
case 6:
|
||
selectSeason = 2
|
||
isShowbtn2 = true
|
||
break;
|
||
case 7:
|
||
case 8:
|
||
case 9:
|
||
selectSeason = 3
|
||
isShowbtn2 = true
|
||
isShowbtn3 = true
|
||
break;
|
||
case 10:
|
||
case 11:
|
||
case 12:
|
||
selectSeason = 4
|
||
isShowbtn2 = true
|
||
isShowbtn3 = true
|
||
isShowbtn4 = true
|
||
break;
|
||
}
|
||
|
||
this.state = {
|
||
ColorShow: this.props.data.ColorShow,// ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
|
||
month: month,
|
||
barWidth: this.props.data.barWidth,
|
||
seasonIndex: selectSeason,
|
||
isShowbtn2: isShowbtn2,
|
||
isShowbtn3: isShowbtn3,
|
||
isShowbtn4: isShowbtn4,
|
||
dtStart: null,//开始时间
|
||
dtEnd: null,//结束时间
|
||
mineType: 0,//生产单元
|
||
detailForm: {
|
||
formCode: "",
|
||
title: "",
|
||
},
|
||
Data: {
|
||
legendName: ["公司级", "部门级", "车间级", "班组级"],
|
||
axisLabelMonth: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||
checkCountMonth: [
|
||
//有几月的数据就统计到几月 时间不到不统计 也不能放入0
|
||
// 公司级 、 部门级 车间级 班组级 各一个数组
|
||
// [公司级露天矿1月数据,公司级选矿厂1月数据,公司级尾矿库1月数据,公司级职能部门1月数据 ,公司级露天矿2月数据,公司级选矿厂2月数据,公司级尾矿库2月数据,公司级职能部门2月数据]
|
||
|
||
// 公司级
|
||
[1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 11, 11, 12, 12, 12, 12],
|
||
// 部门级
|
||
[4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
|
||
// 车间级
|
||
[28, 29, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
|
||
// 班组级
|
||
[55, 56, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60]
|
||
]
|
||
}
|
||
}
|
||
}
|
||
|
||
componenthidMount() {
|
||
// this.getBaseInfoData();
|
||
this.getBaseInfoDataOnline();
|
||
}
|
||
|
||
componentDidMount() {
|
||
// this.getBaseInfoData();
|
||
this.getBaseInfoDataOnline();
|
||
}
|
||
|
||
//获取数据
|
||
getBaseInfoDataOnline = (mineType, seasonIndex) => {
|
||
const json = initFilter(this.props.login.OrgId);
|
||
// extendOrder(json, "CREATE_TIME", 1);
|
||
json.Parameter1 = mineType;
|
||
json.Keyword = (seasonIndex == undefined ? this.state.seasonIndex : seasonIndex)
|
||
this.props.dispatch({
|
||
type: "app/getDataByPost",
|
||
url: "BI/BISafe/GetBI056_1_1",
|
||
payload: json,
|
||
onlyData: false,
|
||
onComplete: (ret) => {
|
||
if (ret && ret.IsSuccessful) {
|
||
this.setState({ //设置setState全局变量
|
||
Data: {
|
||
legendName: ret.Data.lisLevelOrder,// ["公司级", "部门级", "车间级", "班组级"],
|
||
axisLabelMonth: this.state.Data.axisLabelMonth,// ret.Data.lisMineTypeOrder,//["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
mineTypeName: ret.Data.lisMineTypeOrder,//["露天矿", "选矿厂", "尾矿库", "职能部门"],
|
||
checkCountMonth: ret.Data.Count,// [
|
||
}, //将ret对象赋值给data, data供页面调用
|
||
})
|
||
this.CheckCount(this.state.Data, this.state.seasonIndex - 1);
|
||
} else {
|
||
message.error("获取信息失败，请刷新后再试！");
|
||
}
|
||
},
|
||
});
|
||
};
|
||
|
||
getBaseInfoData = (mineType) => {
|
||
this.CheckCount(this.state.Data, this.state.seasonIndex - 1);
|
||
};
|
||
|
||
onSelectChange(seasonIndex) {
|
||
// this.CheckCount(this.state.Data, seasonIndex - 1);
|
||
this.getBaseInfoDataOnline(null, seasonIndex)
|
||
};
|
||
|
||
// seasonIndex 从0开始
|
||
CheckCount = (Data, seasonIndex) => {
|
||
let divShow = document.getElementById("divShow");
|
||
if (divShow) {
|
||
let myChart = echarts.init(divShow);
|
||
|
||
// 3 一个季度 3个月
|
||
var axisLabelMonth = []
|
||
for (let i = 0; i < 3; i++) {
|
||
axisLabelMonth.push((i + 1 + seasonIndex * 3) + '月');
|
||
}
|
||
var xAxisName = []
|
||
for (let i = 0; i < 3; i++) {
|
||
for (let j = 0; j < Data.mineTypeName.length; j++) {
|
||
xAxisName.push((i + 1 + seasonIndex * 3) + '月 ' + Data.mineTypeName[j])//3个月一图表
|
||
}
|
||
}
|
||
|
||
const labelOption = {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: '{c}',
|
||
textStyle: {
|
||
fontSize: 12, // 字体大小
|
||
color: '#333', // 字体颜色
|
||
}
|
||
};
|
||
|
||
|
||
var month = this.state.month
|
||
var seriesShow = []
|
||
|
||
for (let i = 0; i < Data.mineTypeName.length; i++) {
|
||
var seriesData = []//数据 在每组数据中获取 Data.checkCountMonth[i]
|
||
|
||
var dateIndexMin = 0
|
||
var dateIndexMax = 0
|
||
|
||
if ((seasonIndex * 3) < month) {
|
||
dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
|
||
// 12 = 3*Data.mineTypeName.length
|
||
dateIndexMax = (dateIndexMin + 12) > (month * Data.mineTypeName.length) ? (month * Data.mineTypeName.length) : (dateIndexMin + 12)
|
||
} else {
|
||
dateIndexMin = (seasonIndex * 3) * Data.mineTypeName.length
|
||
dateIndexMax = month * Data.mineTypeName.length
|
||
|
||
if (dateIndexMin > dateIndexMax) {
|
||
dateIndexMin = dateIndexMax
|
||
}
|
||
}
|
||
|
||
// for (let j = dateIndexMin; j < dateIndexMax; j++) {
|
||
// if (Data.checkCountMonth[i].length > j) {
|
||
// seriesData.push(Data.checkCountMonth[i][j])
|
||
// }
|
||
// }
|
||
seriesData = Data.checkCountMonth[i]
|
||
|
||
seriesShow.push({
|
||
name: Data.legendName[i],
|
||
barWidth: this.state.barWidth,
|
||
type: 'bar',
|
||
barGap: 0,
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: seriesData,
|
||
itemStyle: { color: this.state.ColorShow[i] },
|
||
})
|
||
}
|
||
|
||
myChart.setOption(
|
||
{
|
||
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: xAxisName,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0c3b71",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
color: "rgb(170,170,170)",
|
||
interval: 0,
|
||
textStyle: {
|
||
lineHeight: 14,
|
||
},
|
||
formatter: function (param) {
|
||
return param.split("月")[1];//X轴显示 把月份去除 加是以为 鼠标事件要显示月份
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: 'category',
|
||
position: 'bottom', // 将分组x轴位置定至底部，不然默认在顶部
|
||
offset: 40, // 向下偏移，使分组文字显示位置不与原x轴重叠
|
||
axisLine: {
|
||
show: false // 隐藏分组x轴的轴线
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
length: 40, // 延长刻度线做分组线
|
||
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
|
||
// lineStyle: {
|
||
// color: '#ff9800'
|
||
// }, // 非必须，仅为了演示，明显标示出分组刻度线
|
||
},
|
||
axisLabel: {
|
||
inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
|
||
interval: 0, // 强制显示全部刻度名
|
||
formatter: function (val, index) {
|
||
// console.log('测试999 val--- ', val);
|
||
// console.log('测试999 index--- ', index);
|
||
return ' ' + val // 这儿可以根据 返回 空字符串，来调整 第二个 x 轴值出现的位置。
|
||
}
|
||
},
|
||
data: axisLabelMonth// ['1月', '2月','3月']
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: seriesShow
|
||
},
|
||
true
|
||
);
|
||
}
|
||
};
|
||
|
||
render() {
|
||
return (
|
||
<div style={{ backgroundColor: "#fff", top: "0", bottom: "0", left: "0", right: "0", margin: "auto",width:"100%" }} >
|
||
|
||
{/* 第一行 */}
|
||
<Row gutter={12} style={{ marginTop: "5px", textAlign: "center",width:"100%" }}>
|
||
{/* <Col span={1} > </Col> */}
|
||
<Col span={24} style={{ padding: 0 }}>
|
||
<div style={{ float: "right", zIndex: 2 }}>
|
||
<Select onChange={value => this.onSelectChange(value)} defaultValue={this.state.seasonIndex} style={{ zIndex: 2, height: "30px", width: "100px", marginRight: "100px" }}>
|
||
<option value={1}>第一季度</option>
|
||
{this.state.isShowbtn2 ? <option value={2}>第二季度</option> : null}
|
||
{this.state.isShowbtn3 ? <option value={3}>第三季度</option> : null}
|
||
{this.state.isShowbtn4 ? <option value={4}>第四季度</option> : null}
|
||
</Select>
|
||
</div>
|
||
<div id="divShow" style={{ width: "100%", height: "380px", marginTop: "30px", zIndex: 0 }}></div>
|
||
</Col>
|
||
{/* <Col span={1} > </Col> */}
|
||
</Row>
|
||
<br />
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default connect(({ login, app }) => ({ login, app }))(BI056Dilg1_1); |