安全检查次数扩展表无数据存在情况
This commit is contained in:
parent
9ab5ae470e
commit
e9eaea5f96
@ -1,7 +1,7 @@
|
||||
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 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';
|
||||
@ -13,7 +13,6 @@ const formItemLayout = {
|
||||
|
||||
// 安全检查次数统计明细（首页）
|
||||
class BI054HomeDetail extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@ -23,40 +22,46 @@ class BI054HomeDetail extends React.Component {
|
||||
ListSafeCheckCountDepartment: [],
|
||||
countTypeTitle: [],
|
||||
columnsTb: [],
|
||||
tableData: [],
|
||||
showLoading: false,
|
||||
},
|
||||
// listSafeCheckTypeYear: [],
|
||||
// listCheckTypeYear: [],
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
componenthidMount() {
|
||||
if (!getIsPC()) {
|
||||
openNotificationMobile('bottomRight', notification)
|
||||
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);
|
||||
};
|
||||
this.loadData();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadData()
|
||||
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.setState((prevState) => ({
|
||||
data: {
|
||||
...prevState.data,
|
||||
showLoading: true,
|
||||
},
|
||||
}));
|
||||
|
||||
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',
|
||||
@ -64,130 +69,188 @@ class BI054HomeDetail extends React.Component {
|
||||
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)
|
||||
// })
|
||||
const rawData = result.ListSafeCheckCountDepartment;
|
||||
|
||||
// listName.push('班组名称')
|
||||
// result.ListSafeCheckCountDepartment[0].listChild[0].listName.forEach(e => {
|
||||
// listName.push(e)
|
||||
// })
|
||||
// 1. 提取 listName 作为列标题
|
||||
let countTypeTitle = rawData[0]?.listName || ['计划检查次数', '实际检查次数'];
|
||||
|
||||
var countTypeTitle = []
|
||||
var columnsTb = []
|
||||
if (result.ListSafeCheckCountDepartment != null && result.ListSafeCheckCountDepartment.length > 0) {
|
||||
countTypeTitle = result.ListSafeCheckCountDepartment[0].listName
|
||||
// 2. 构建层级数据：提取父级部门（去重）和对应的子级
|
||||
const parentMap = new Map();
|
||||
const childMap = new Map();
|
||||
|
||||
rawData.forEach((item) => {
|
||||
if (item.Parent) {
|
||||
// 有 Parent 的是子级
|
||||
const parentKey = item.Parent.Department_ID;
|
||||
if (!parentMap.has(parentKey)) {
|
||||
parentMap.set(parentKey, {
|
||||
DepartmentName: item.Parent.DepartmentName,
|
||||
Department_ID: parentKey,
|
||||
RowCount: item.Parent.RowCount || 1,
|
||||
listCount: item.Parent.listCount || [],
|
||||
children: [],
|
||||
});
|
||||
}
|
||||
|
||||
if (countTypeTitle.length < 1) {
|
||||
countTypeTitle.push('巡回检查')
|
||||
countTypeTitle.push('例行检查')
|
||||
countTypeTitle.push('专业检查')
|
||||
countTypeTitle.push('综合检查')
|
||||
// 子级记录（去重）
|
||||
if (!childMap.has(item.Department_ID)) {
|
||||
childMap.set(item.Department_ID, {
|
||||
DepartmentName: item.DepartmentName,
|
||||
Department_ID: item.Department_ID,
|
||||
listCount: item.listCount || [],
|
||||
Parent: item.Parent,
|
||||
});
|
||||
parentMap.get(parentKey).children.push(childMap.get(item.Department_ID));
|
||||
}
|
||||
|
||||
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?record.Parent.RowCount:0
|
||||
if (index > 0 && result.ListSafeCheckCountDepartment[index - 1].Parent?.DepartmentName == record.Parent?.DepartmentName) {
|
||||
RowCount = 0
|
||||
}
|
||||
const obj = {
|
||||
children: record.Parent?record.Parent.DepartmentName:record.DepartmentName,
|
||||
props: {
|
||||
'rowSpan': RowCount
|
||||
},
|
||||
};
|
||||
return obj;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//非头部
|
||||
|
||||
columnsTb.push({
|
||||
title: countTypeTitle[j],
|
||||
dataIndex: "NUM",
|
||||
key: (i * 10 + j),
|
||||
render: (value, record, index) => {
|
||||
RowCount = record.Parent?record.Parent.RowCount:0
|
||||
if (index > 0 && result.ListSafeCheckCountDepartment[index - 1].Parent?.DepartmentName == record.Parent?.DepartmentName) {
|
||||
RowCount = 0
|
||||
}
|
||||
const obj = {
|
||||
children: record.Parent?record.Parent.listCount[j]:record.DepartmentName,
|
||||
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;
|
||||
// 没有 Parent 的是顶级部门（去重）
|
||||
const parentKey = item.Department_ID;
|
||||
if (!parentMap.has(parentKey)) {
|
||||
parentMap.set(parentKey, {
|
||||
DepartmentName: item.DepartmentName,
|
||||
Department_ID: parentKey,
|
||||
RowCount: item.RowCount || 1,
|
||||
listCount: item.listCount || [],
|
||||
children: item.listChild || [],
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
columnsTb.push({
|
||||
title: countTypeTitle[j],
|
||||
key: (i * 10 + j),
|
||||
render: (value, record, index) => {
|
||||
const obj = {
|
||||
children: record.listCount[j],
|
||||
};
|
||||
return obj;
|
||||
}
|
||||
})
|
||||
// 转换为数组
|
||||
const parentList = Array.from(parentMap.values());
|
||||
|
||||
// 3. 构建表格数据源（扁平化结构，用于 Antd Table）
|
||||
const tableData = [];
|
||||
parentList.forEach((parent, parentIndex) => {
|
||||
if (parent.children && parent.children.length > 0) {
|
||||
// 有子级：为每个子级创建一行，父级信息通过 rowSpan 合并
|
||||
parent.children.forEach((child, index) => {
|
||||
tableData.push({
|
||||
key: child.Department_ID || `${parent.Department_ID}-${index}`,
|
||||
// 父级信息（用于 rowSpan 合并）
|
||||
parentName: parent.DepartmentName,
|
||||
parentCount: parent.listCount || [],
|
||||
parentRowSpan: index === 0 ? parent.children.length : 0,
|
||||
// 子级信息
|
||||
childName: child.DepartmentName,
|
||||
childCount: child.listCount || [],
|
||||
// 标记是否为子级行
|
||||
isChild: true,
|
||||
// 原始父级引用
|
||||
parentRef: parent,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 无子级：单独一行，车间/班组列显示 --
|
||||
tableData.push({
|
||||
key: parent.Department_ID || `parent-${parentIndex}`,
|
||||
parentName: parent.DepartmentName,
|
||||
parentCount: parent.listCount || [],
|
||||
parentRowSpan: 1,
|
||||
childName: '--',
|
||||
childCount: ['--', '--'],
|
||||
isChild: false,
|
||||
parentRef: parent,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 4. 构建 Antd Table 列
|
||||
const columnsTb = [
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'parentName',
|
||||
key: 'department',
|
||||
width: 120,
|
||||
render: (text, record) => ({
|
||||
children: text,
|
||||
props: {
|
||||
rowSpan: record.parentRowSpan || 0,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: countTypeTitle[0] || '计划检查次数',
|
||||
dataIndex: 'parentCount',
|
||||
key: 'parentCount1',
|
||||
width: 100,
|
||||
render: (counts, record) => ({
|
||||
children: counts && counts.length > 0 ? counts[0] : '--',
|
||||
props: {
|
||||
rowSpan: record.parentRowSpan || 0,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: countTypeTitle[1] || '实际检查次数',
|
||||
dataIndex: 'parentCount',
|
||||
key: 'parentCount2',
|
||||
width: 100,
|
||||
render: (counts, record) => ({
|
||||
children: counts && counts.length > 1 ? counts[1] : '--',
|
||||
props: {
|
||||
rowSpan: record.parentRowSpan || 0,
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: '车间/班组',
|
||||
dataIndex: 'childName',
|
||||
key: 'workshop',
|
||||
width: 120,
|
||||
render: (text) => text || '--',
|
||||
},
|
||||
{
|
||||
title: countTypeTitle[0] || '计划检查次数',
|
||||
dataIndex: 'childCount',
|
||||
key: 'childCount1',
|
||||
width: 100,
|
||||
render: (counts) => (counts && counts.length > 0 ? counts[0] : '--'),
|
||||
},
|
||||
{
|
||||
title: countTypeTitle[1] || '实际检查次数',
|
||||
dataIndex: 'childCount',
|
||||
key: 'childCount2',
|
||||
width: 100,
|
||||
render: (counts) => (counts && counts.length > 1 ? counts[1] : '--'),
|
||||
},
|
||||
];
|
||||
|
||||
// 5. 更新 state
|
||||
this.setState({
|
||||
data: {
|
||||
...this.state.data,
|
||||
countTypeTitle: countTypeTitle,
|
||||
columnsTb: columnsTb,
|
||||
// listName: listName,
|
||||
tableData: tableData,
|
||||
ListSafeCheckYearMonth: result.ListSafeCheckYearMonth,
|
||||
ListSafeCheckCountDepartment: result.ListSafeCheckCountDepartment,//车间 子集是 班组
|
||||
}
|
||||
})
|
||||
this.hiddenDangerTotal()
|
||||
}
|
||||
ListSafeCheckCountDepartment: result.ListSafeCheckCountDepartment,
|
||||
showLoading: false,
|
||||
},
|
||||
});
|
||||
|
||||
this.hiddenDangerTotal();
|
||||
} else {
|
||||
this.setState((prevState) => ({
|
||||
data: {
|
||||
...prevState.data,
|
||||
showLoading: false,
|
||||
tableData: [],
|
||||
},
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
this.setState((prevState) => ({
|
||||
data: {
|
||||
...prevState.data,
|
||||
showLoading: false,
|
||||
},
|
||||
}));
|
||||
}
|
||||
})
|
||||
|
||||
this.state.showLoading = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
hiddenDangerTotal = () => {
|
||||
if (this.state.data.ListSafeCheckYearMonth) {
|
||||
@ -221,47 +284,46 @@ class BI054HomeDetail extends React.Component {
|
||||
for (let i = 0; i < data3.length; i++) {
|
||||
series.push({
|
||||
name: seriesName[i],
|
||||
type: "bar",
|
||||
stack: "总量",
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
data: data3[i],
|
||||
barWidth: "40%",
|
||||
barWidth: '40%',
|
||||
});
|
||||
}
|
||||
|
||||
//图标2
|
||||
let dangerTotals = document.getElementById("dangerTotal2");
|
||||
let dangerTotals = document.getElementById('dangerTotal2');
|
||||
|
||||
if (dangerTotals) {
|
||||
let myChart = echarts.init(dangerTotals);
|
||||
myChart.setOption({
|
||||
color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
|
||||
color: ['#4285F4', '#72b85b', '#c92a2a', '#ffa94d'],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
type: 'shadow',
|
||||
},
|
||||
transitionDuration: 0,
|
||||
},
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "15%",
|
||||
top: "5%",
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '15%',
|
||||
top: '5%',
|
||||
containLabel: true,
|
||||
z: 22,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#0c3b71",
|
||||
color: '#0c3b71',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "rgb(170,170,170)",
|
||||
color: 'rgb(170,170,170)',
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
lineHeight: 14,
|
||||
@ -270,32 +332,31 @@ class BI054HomeDetail extends React.Component {
|
||||
},
|
||||
legend: {
|
||||
data: seriesName,
|
||||
left: "center",
|
||||
align: "left",
|
||||
bottom: "2%",
|
||||
left: 'center',
|
||||
align: 'left',
|
||||
bottom: '2%',
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
color: '#000',
|
||||
},
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
// itemGap: 15,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#f2f2f2"],
|
||||
color: ['#f2f2f2'],
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#0c3b71",
|
||||
color: '#0c3b71',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgb(170,170,170)",
|
||||
formatter: "{value} ",
|
||||
color: 'rgb(170,170,170)',
|
||||
formatter: '{value} ',
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
@ -306,92 +367,51 @@ class BI054HomeDetail extends React.Component {
|
||||
|
||||
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" }}>
|
||||
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 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" }}>
|
||||
<Row gutter={10} style={{ marginTop: '14px' }}>
|
||||
<Col span={1}></Col>
|
||||
<Col span={22} style={{ height: "100%" }}>
|
||||
|
||||
<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" />
|
||||
<Table
|
||||
dataSource={data.tableData || []}
|
||||
columns={data.columnsTb}
|
||||
pagination={false}
|
||||
bordered
|
||||
loading={data.showLoading}
|
||||
size="small"
|
||||
rowKey="key"
|
||||
/>
|
||||
</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)
|
||||
export default connect(({ login, app }) => ({ login, app }))(BI054HomeDetail);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user