418 lines
13 KiB
JavaScript
418 lines
13 KiB
JavaScript
|
import React from 'react'
|
||
|
|
import { connect } from 'dva'
|
||
|
|
import { initFilter, extendRule, extendInclude, getIsPC, openNotificationMobile } from "../../../utils/common"
|
||
|
|
import { ChartBarShow_Vertical, LineShow } from "../../../utils/commonEcharsShow"
|
||
|
|
import { Table, Row, Progress, Col } from 'antd';
|
||
|
|
import echarts from 'echarts';
|
||
|
|
import styles from '../HI/StepForm.css';
|
||
|
|
|
||
|
|
const formItemLayout = {
|
||
|
|
labelCol: { span: 6 },
|
||
|
|
wrapperCol: { span: 14 },
|
||
|
|
};
|
||
|
|
|
||
|
|
// 月度隐患整改情况明细（首页）
|
||
|
|
class BI055HomeDetail extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
ListC: [],
|
||
|
|
ListSafeCheckYearMonth: [],
|
||
|
|
pagination: {},
|
||
|
|
countTypeTitle: [],
|
||
|
|
columnsTb: [],
|
||
|
|
showLoading: false,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
componenthidMount() {
|
||
|
|
if (!getIsPC()) {
|
||
|
|
openNotificationMobile('bottomRight', notification)
|
||
|
|
this.state.displayStr = 'none';
|
||
|
|
this.state.displayNum = 24;
|
||
|
|
} else {
|
||
|
|
this.state.displayStr = '';
|
||
|
|
this.state.displayNum = 16;
|
||
|
|
}
|
||
|
|
this.loadData()
|
||
|
|
//定时器功能，暂时不开启
|
||
|
|
// this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
|
||
|
|
};
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.loadData();
|
||
|
|
}
|
||
|
|
|
||
|
|
renderSpeedColumn = () => {
|
||
|
|
return { className: 'redTableCell' }
|
||
|
|
}
|
||
|
|
loadData = () => {
|
||
|
|
this.state.showLoading = true;
|
||
|
|
// var mineType = ''
|
||
|
|
// // let mineType = this.props.data.mineType;
|
||
|
|
// if (this.props.data.mineType == null || this.props.data.mineType == undefined) {
|
||
|
|
// mineType = this.props.data.mineType;
|
||
|
|
// } else {
|
||
|
|
// mineType = this.props.formParam.mineType;
|
||
|
|
// }
|
||
|
|
debugger
|
||
|
|
let json = initFilter(this.props.login.OrgId, (this.props.data.mineType == null ? this.props.formParam.mineType : this.props.data.mineType));
|
||
|
|
this.props.dispatch({
|
||
|
|
type: "app/getDataByPost",
|
||
|
|
url: "BI/BIHome/GetHomeDetailMonthRisk",
|
||
|
|
payload: json,
|
||
|
|
onlyData: false,
|
||
|
|
onComplete: (data) => {
|
||
|
|
if (data && data.IsSuccessful && data.Data && (data.Data.ListC || data.Data.ListSafeCheckYearMonth)) {
|
||
|
|
var countTypeTitle = []
|
||
|
|
var countTypeDataIndex = []
|
||
|
|
var columnsTb = []
|
||
|
|
if (data.Data.ListSafeCheckYearMonth != null && data.Data.ListSafeCheckYearMonth.length > 0) {
|
||
|
|
countTypeTitle = data.Data.ListSafeCheckYearMonth[0].listName
|
||
|
|
}
|
||
|
|
|
||
|
|
if (countTypeTitle.length < 1) {
|
||
|
|
countTypeTitle.push('按时整改隐患')
|
||
|
|
countTypeTitle.push('超期整改隐患')
|
||
|
|
countTypeTitle.push('未整改隐患')
|
||
|
|
countTypeTitle.push('隐患整改率')
|
||
|
|
}
|
||
|
|
|
||
|
|
var typeName = ['车间名称', '班组名称']
|
||
|
|
var RowCount = 0
|
||
|
|
for (let i = 0; i < 2; i++) {
|
||
|
|
for (let j = 0; j < countTypeTitle.length; j++) {
|
||
|
|
countTypeDataIndex.push(j)
|
||
|
|
if (i == 0) {
|
||
|
|
if (j == 0) {
|
||
|
|
//头部
|
||
|
|
columnsTb.push({
|
||
|
|
title: typeName[i],
|
||
|
|
dataIndex: "NUM",
|
||
|
|
key: (i * 10 + j),
|
||
|
|
render: (value, record, index) => {
|
||
|
|
RowCount = record.Parent.RowCount
|
||
|
|
if (index > 0 && this.state.ListSafeCheckYearMonth[index - 1].Parent.DepartmentName == record.Parent.DepartmentName) {
|
||
|
|
RowCount = 0
|
||
|
|
}
|
||
|
|
const obj = {
|
||
|
|
children: record.Parent.DepartmentName,
|
||
|
|
props: {
|
||
|
|
'rowSpan': RowCount
|
||
|
|
},
|
||
|
|
};
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
//非头部
|
||
|
|
if (countTypeTitle[j].indexOf('率') > -1) {
|
||
|
|
columnsTb.push({
|
||
|
|
title: countTypeTitle[j],
|
||
|
|
dataIndex: "NUM",
|
||
|
|
key: (i * 10 + j),
|
||
|
|
render: (value, record, index) => {
|
||
|
|
RowCount = record.Parent.RowCount
|
||
|
|
if (index > 0 && this.state.ListSafeCheckYearMonth[index - 1].Parent.DepartmentName == record.Parent.DepartmentName) {
|
||
|
|
RowCount = 0
|
||
|
|
}
|
||
|
|
const obj = {
|
||
|
|
children: <Progress percent={record.Parent.listCount[j] / 100} status="active" strokeColor={{ from: "#108ee9", to: "#108ee9" }} />,
|
||
|
|
props: {
|
||
|
|
'rowSpan': RowCount,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
columnsTb.push({
|
||
|
|
title: countTypeTitle[j],
|
||
|
|
dataIndex: "NUM",
|
||
|
|
key: (i * 10 + j),
|
||
|
|
render: (value, record, index) => {
|
||
|
|
RowCount = record.Parent.RowCount
|
||
|
|
if (index > 0 && this.state.ListSafeCheckYearMonth[index - 1].Parent.DepartmentName == record.Parent.DepartmentName) {
|
||
|
|
RowCount = 0
|
||
|
|
}
|
||
|
|
const obj = {
|
||
|
|
children: record.Parent.listCount[j],
|
||
|
|
props: {
|
||
|
|
'rowSpan': RowCount
|
||
|
|
},
|
||
|
|
};
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
//班组
|
||
|
|
if (j == 0) {
|
||
|
|
columnsTb.push({
|
||
|
|
title: typeName[i],
|
||
|
|
key: (i * 10 + j),
|
||
|
|
render: (value, record, index) => {
|
||
|
|
const obj = {
|
||
|
|
children: record.DepartmentName,
|
||
|
|
};
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
if (countTypeTitle[j].indexOf('率') > -1) {
|
||
|
|
columnsTb.push({
|
||
|
|
title: countTypeTitle[j],
|
||
|
|
key: (i * 10 + j),
|
||
|
|
render: (text, record) => (
|
||
|
|
<Progress
|
||
|
|
percent={record.listCount[j] / 100}
|
||
|
|
status="active"
|
||
|
|
strokeColor={{ from: "#108ee9", to: "#108ee9" }}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
})
|
||
|
|
|
||
|
|
} else {
|
||
|
|
columnsTb.push({
|
||
|
|
title: countTypeTitle[j],
|
||
|
|
key: (i * 10 + j),
|
||
|
|
render: (value, record, index) => {
|
||
|
|
const obj = {
|
||
|
|
children: record.listCount[j],
|
||
|
|
};
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
countTypeTitle: countTypeTitle,
|
||
|
|
columnsTb: columnsTb,
|
||
|
|
ListC: data.Data.ListC,
|
||
|
|
ListSafeCheckYearMonth: data.Data.ListSafeCheckYearMonth,
|
||
|
|
});
|
||
|
|
|
||
|
|
this.safeChekDanger()
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
this.state.showLoading = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
paginationConfig = {
|
||
|
|
pageSizeOptions: ["10", "20", "50"],
|
||
|
|
pageSize: 20,
|
||
|
|
showSizeChanger: true,
|
||
|
|
size: "small",
|
||
|
|
};
|
||
|
|
|
||
|
|
// 安全检查和隐患整改
|
||
|
|
safeChekDanger = () => {
|
||
|
|
let xData = [];
|
||
|
|
let ydata = [];
|
||
|
|
let sourceName = [];
|
||
|
|
if (this.state.ListC) {
|
||
|
|
this.state.ListC.map((item) => {
|
||
|
|
let name = item.NAME.split(",");
|
||
|
|
xData.push(name);
|
||
|
|
sourceName.push(item.SOURCENAME);
|
||
|
|
let valu = item.Val.split(",");
|
||
|
|
ydata.push(valu);
|
||
|
|
});
|
||
|
|
let safeInspections = document.getElementById("safeInspection2");
|
||
|
|
if (safeInspections) {
|
||
|
|
let myChart = echarts.init(safeInspections);
|
||
|
|
myChart.setOption(
|
||
|
|
{
|
||
|
|
color: ["#72b85b", "#f6841a", "#cc0404", "#4285F4"],
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
axisPointer: {
|
||
|
|
// 坐标轴指示器，坐标轴触发有效
|
||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
|
|
},
|
||
|
|
transitionDuration: 0,
|
||
|
|
formatter: function (params) {
|
||
|
|
return (
|
||
|
|
params[0].name +
|
||
|
|
"</br>" +
|
||
|
|
params[0].marker +
|
||
|
|
params[0].seriesName +
|
||
|
|
" : " +
|
||
|
|
params[0].value +
|
||
|
|
"</br>" +
|
||
|
|
params[1].marker +
|
||
|
|
params[1].seriesName +
|
||
|
|
" : " +
|
||
|
|
params[1].value +
|
||
|
|
"</br>" +
|
||
|
|
params[2].marker +
|
||
|
|
params[2].seriesName +
|
||
|
|
" : " +
|
||
|
|
params[2].value +
|
||
|
|
"</br>" +
|
||
|
|
params[3].marker +
|
||
|
|
params[3].seriesName +
|
||
|
|
" : " +
|
||
|
|
params[3].value +
|
||
|
|
"%"
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: "10%",
|
||
|
|
// right: "10%",
|
||
|
|
bottom: "15%",
|
||
|
|
top: "5%",
|
||
|
|
containLabel: true,
|
||
|
|
z: 22,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: "category",
|
||
|
|
data: xData[0],
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#0c3b71",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
color: "rgb(170,170,170)",
|
||
|
|
interval: 0,
|
||
|
|
textStyle: {
|
||
|
|
lineHeight: 14,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: sourceName,
|
||
|
|
left: "center",
|
||
|
|
align: "left",
|
||
|
|
bottom: "2%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#000",
|
||
|
|
},
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
// itemGap: 35,
|
||
|
|
},
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: "value",
|
||
|
|
position: "left",
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: ["#f2f2f2"],
|
||
|
|
// opacity:0.2
|
||
|
|
// zlevel: -1,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#0c3b71",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: "rgb(170,170,170)",
|
||
|
|
formatter: "{value} ",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "value",
|
||
|
|
position: "right",
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: ["#f2f2f2"],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#f2f2f2",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: "rgb(170,170,170)",
|
||
|
|
formatter: "{value} %",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: sourceName[0],
|
||
|
|
type: "bar",
|
||
|
|
data: ydata[0],
|
||
|
|
barWidth: "20%",
|
||
|
|
barGap: "10%",
|
||
|
|
stack: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: sourceName[1],
|
||
|
|
type: "bar",
|
||
|
|
data: ydata[1],
|
||
|
|
barWidth: "20%",
|
||
|
|
barGap: "10%",
|
||
|
|
stack: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: sourceName[2],
|
||
|
|
type: "bar",
|
||
|
|
data: ydata[2],
|
||
|
|
barWidth: "20%",
|
||
|
|
barGap: "10%",
|
||
|
|
stack: null,
|
||
|
|
// zlevel: 99,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: sourceName[3],
|
||
|
|
type: "line",
|
||
|
|
data: ydata[3],
|
||
|
|
yAxisIndex: 1,
|
||
|
|
// zlevel:100,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
, true
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div style={{ backgroundColor: "white", width: "1200px", top: "0", bottom: "0", left: "0", right: "0", margin: "auto", borderStyle: "solid", borderColor: "#ccc", borderWidth: "1px" }} >
|
||
|
|
<Row gutter={10} style={{ marginTop: "44px" }}>
|
||
|
|
<Col span={1}> </Col>
|
||
|
|
<Col span={22}>
|
||
|
|
<div style={{ border: "1px solid rgb(232,232,232)" }}>
|
||
|
|
<div id="safeInspection2" style={{ width: "100%", height: "350px" }}></div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<Col span={1}></Col>
|
||
|
|
</Row>
|
||
|
|
<Row gutter={10} style={{ marginTop: "14px" }}>
|
||
|
|
<Col span={1}></Col>
|
||
|
|
<Col span={22} style={{ height: "100%" }}>
|
||
|
|
<div className="bi001-table" >
|
||
|
|
<Table dataSource={this.state.ListSafeCheckYearMonth} columns={this.state.columnsTb} pagination={false} bordered loading={this.state.showLoading} size="small" rowKey="1" />
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<Col span={1}></Col>
|
||
|
|
</Row>
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default connect(({ login, app }) => ({ login, app }))(BI055HomeDetail)
|