398 lines
13 KiB
JavaScript
398 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 { notification, Button, Descriptions, Table, Row, Col } from 'antd';
|
||
|
|
import echarts from 'echarts';
|
||
|
|
import styles from '../HI/StepForm.css';
|
||
|
|
|
||
|
|
const formItemLayout = {
|
||
|
|
labelCol: { span: 6 },
|
||
|
|
wrapperCol: { span: 14 },
|
||
|
|
};
|
||
|
|
|
||
|
|
// 安全检查次数统计明细（首页）
|
||
|
|
class BI054HomeDetail extends React.Component {
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
data: {
|
||
|
|
listName: [],
|
||
|
|
ListSafeCheckYearMonth: [],
|
||
|
|
ListSafeCheckCountDepartment: [],
|
||
|
|
countTypeTitle: [],
|
||
|
|
columnsTb: [],
|
||
|
|
showLoading: false,
|
||
|
|
},
|
||
|
|
// listSafeCheckTypeYear: [],
|
||
|
|
// listCheckTypeYear: [],
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
componenthidMount() {
|
||
|
|
if (!getIsPC()) {
|
||
|
|
openNotificationMobile('bottomRight', notification)
|
||
|
|
this.state.displayStr = 'none';
|
||
|
|
this.state.displayNum = 24;
|
||
|
|
//alert('手机');
|
||
|
|
} else {
|
||
|
|
this.state.displayStr = '';
|
||
|
|
this.state.displayNum = 16;
|
||
|
|
//alert('PC');
|
||
|
|
}
|
||
|
|
this.loadData()
|
||
|
|
//定时器功能，暂时不开启
|
||
|
|
// this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
|
||
|
|
};
|
||
|
|
componentDidMount() {
|
||
|
|
this.loadData()
|
||
|
|
}
|
||
|
|
componentWillUnmount() {
|
||
|
|
// this.timerID && clearTimeout(this.timerID);
|
||
|
|
}
|
||
|
|
|
||
|
|
//加载数据赋值
|
||
|
|
loadData = () => {
|
||
|
|
this.state.showLoading = true;
|
||
|
|
// let json = initFilter(this.props.login.OrgId, this.props.data.mineType, "NUM");
|
||
|
|
let json = initFilter(this.props.login.OrgId, (this.props.data.mineType == null ? this.props.formParam.mineType : this.props.data.mineType), "NUM");
|
||
|
|
|
||
|
|
this.props.dispatch({
|
||
|
|
type: 'app/getDataByPost',
|
||
|
|
payload: json,
|
||
|
|
url: 'BI/BIHome/GetHomeDetailMonthCheckType',
|
||
|
|
onComplete: (result) => {
|
||
|
|
if (result) {
|
||
|
|
// let listName = []
|
||
|
|
if (result.ListSafeCheckCountDepartment != null && result.ListSafeCheckCountDepartment.length > 0) {
|
||
|
|
// listName.push('车间名称')
|
||
|
|
// result.ListSafeCheckCountDepartment[0].listName.forEach((e, i) => {
|
||
|
|
// listName.push(e)
|
||
|
|
// })
|
||
|
|
|
||
|
|
// listName.push('班组名称')
|
||
|
|
// result.ListSafeCheckCountDepartment[0].listChild[0].listName.forEach(e => {
|
||
|
|
// listName.push(e)
|
||
|
|
// })
|
||
|
|
|
||
|
|
var countTypeTitle = []
|
||
|
|
var columnsTb = []
|
||
|
|
if (result.ListSafeCheckCountDepartment != null && result.ListSafeCheckCountDepartment.length > 0) {
|
||
|
|
countTypeTitle = result.ListSafeCheckCountDepartment[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++) {
|
||
|
|
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 && result.ListSafeCheckCountDepartment[index - 1].Parent.DepartmentName == record.Parent.DepartmentName) {
|
||
|
|
RowCount = 0
|
||
|
|
}
|
||
|
|
const obj = {
|
||
|
|
children: record.Parent.DepartmentName,
|
||
|
|
props: {
|
||
|
|
'rowSpan': RowCount
|
||
|
|
},
|
||
|
|
};
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
//非头部
|
||
|
|
|
||
|
|
columnsTb.push({
|
||
|
|
title: countTypeTitle[j],
|
||
|
|
dataIndex: "NUM",
|
||
|
|
key: (i * 10 + j),
|
||
|
|
render: (value, record, index) => {
|
||
|
|
RowCount = record.Parent.RowCount
|
||
|
|
if (index > 0 && result.ListSafeCheckCountDepartment[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;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
columnsTb.push({
|
||
|
|
title: countTypeTitle[j],
|
||
|
|
key: (i * 10 + j),
|
||
|
|
render: (value, record, index) => {
|
||
|
|
const obj = {
|
||
|
|
children: record.listCount[j],
|
||
|
|
};
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
data: {
|
||
|
|
countTypeTitle: countTypeTitle,
|
||
|
|
columnsTb: columnsTb,
|
||
|
|
// listName: listName,
|
||
|
|
ListSafeCheckYearMonth: result.ListSafeCheckYearMonth,
|
||
|
|
ListSafeCheckCountDepartment: result.ListSafeCheckCountDepartment,//车间 子集是 班组
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.hiddenDangerTotal()
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.state.showLoading = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
hiddenDangerTotal = () => {
|
||
|
|
if (this.state.data.ListSafeCheckYearMonth) {
|
||
|
|
let data = this.state.data.ListSafeCheckYearMonth;
|
||
|
|
let xData = [];
|
||
|
|
let data1 = [];
|
||
|
|
let data2 = [];
|
||
|
|
let data3 = [];
|
||
|
|
let seriesName = [];
|
||
|
|
data.map((item) => {
|
||
|
|
if (item.MONTH>9){
|
||
|
|
xData.push(item.YEAR+'-'+ item.MONTH);
|
||
|
|
}else{
|
||
|
|
xData.push(item.YEAR+'-0'+ item.MONTH);
|
||
|
|
}
|
||
|
|
seriesName = item.listSOURCENAME;
|
||
|
|
data1.push(item.listListCount);
|
||
|
|
});
|
||
|
|
|
||
|
|
for (var i = 0; i < data[0].listListCount.length; i++) {
|
||
|
|
for (var j = 0; j < data.length; j++) {
|
||
|
|
data2.push(data1[j][i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0; i < data2.length; i += data.length) {
|
||
|
|
data3.push(data2.slice(i, i + data.length));
|
||
|
|
}
|
||
|
|
|
||
|
|
let series = [];
|
||
|
|
for (let i = 0; i < data3.length; i++) {
|
||
|
|
series.push({
|
||
|
|
name: seriesName[i],
|
||
|
|
type: "bar",
|
||
|
|
stack: "总量",
|
||
|
|
data: data3[i],
|
||
|
|
barWidth: "40%",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//图标2
|
||
|
|
let dangerTotals = document.getElementById("dangerTotal2");
|
||
|
|
|
||
|
|
if (dangerTotals) {
|
||
|
|
let myChart = echarts.init(dangerTotals);
|
||
|
|
myChart.setOption({
|
||
|
|
color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
axisPointer: {
|
||
|
|
// 坐标轴指示器，坐标轴触发有效
|
||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
|
|
},
|
||
|
|
transitionDuration: 0,
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: "5%",
|
||
|
|
right: "5%",
|
||
|
|
bottom: "15%",
|
||
|
|
top: "5%",
|
||
|
|
containLabel: true,
|
||
|
|
z: 22,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: "category",
|
||
|
|
data: xData,
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#0c3b71",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
color: "rgb(170,170,170)",
|
||
|
|
interval: 0,
|
||
|
|
textStyle: {
|
||
|
|
lineHeight: 14,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: seriesName,
|
||
|
|
left: "center",
|
||
|
|
align: "left",
|
||
|
|
bottom: "2%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#000",
|
||
|
|
},
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
// itemGap: 15,
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "value",
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: ["#f2f2f2"],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#0c3b71",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: "rgb(170,170,170)",
|
||
|
|
formatter: "{value} ",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: series,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { data } = this.state;
|
||
|
|
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="dangerTotal2" 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.data.ListSafeCheckCountDepartment} columns={this.state.data.columnsTb} pagination={false} bordered loading={this.state.data.showLoading} size="small" rowKey="1" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }} >
|
||
|
|
<table className={styles.tableRow} style={{ width: '100%', marginLeft: '0px' }}>
|
||
|
|
<tbody>
|
||
|
|
{
|
||
|
|
data.listName ? (
|
||
|
|
<tr>
|
||
|
|
{
|
||
|
|
data.listName.map(e => {
|
||
|
|
return <th>{e}</th>
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</tr>)
|
||
|
|
: (<tr> <th>车间名称</th><th>巡回检查</th><th>例行检查</th> <th>专业检查</th><th>综合检查</th><th>班组名称</th><th>巡回检查</th><th>例行检查</th><th>专业检查</th><th>综合检查</th></tr>)
|
||
|
|
}
|
||
|
|
|
||
|
|
{
|
||
|
|
data.ListSafeCheckCountDepartment ?
|
||
|
|
data.ListSafeCheckCountDepartment.map((e) => {
|
||
|
|
return e.listChild?.map((c, i) => {
|
||
|
|
if (i == 0) {
|
||
|
|
return (
|
||
|
|
<tr>
|
||
|
|
<td rowspan={e.RowCount} >{e.DepartmentName}</td>
|
||
|
|
{
|
||
|
|
e.listCount?.map(c => {
|
||
|
|
return <td rowspan={e.RowCount}>{c}</td>
|
||
|
|
})
|
||
|
|
}
|
||
|
|
<td>{c.DepartmentName}</td>
|
||
|
|
{
|
||
|
|
c.listCount?.map(k => {
|
||
|
|
return <td>{k}</td>
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</tr>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return (
|
||
|
|
<tr>
|
||
|
|
<td>{c.DepartmentName}</td>
|
||
|
|
{
|
||
|
|
c.listCount?.map(k => {
|
||
|
|
return <td>{k}</td>
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</tr>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}) : (
|
||
|
|
<tr>
|
||
|
|
<td colSpan={10}>暂无数据</td>
|
||
|
|
</tr>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div> */}
|
||
|
|
|
||
|
|
</Col>
|
||
|
|
<Col span={1}></Col>
|
||
|
|
</Row>
|
||
|
|
<br />
|
||
|
|
</div >
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default connect(({ login, app }) => ({ login, app }))(BI054HomeDetail)
|