wyw/mh_jy_safe_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

安全检查次数扩展表无数据存在情况

Browse Source
This commit is contained in:
yunkexin 2026-07-20 11:48:01 +08:00
parent 9ab5ae470e
commit e9eaea5f96
1 changed files with 264 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

470
src/components/CustomPages/BI/BI054HomeDetail.js
View File

@ -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) {
@ -198,10 +261,10 @@ class BI054HomeDetail extends React.Component {
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);
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);
@ -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%" }}>
<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" />
<Col span={22} style={{ height: '100%' }}>
<div className="bi001-table">
<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 >
</div>
);
}
}
export default connect(({ login, app }) => ({ login, app }))(BI054HomeDetail)
export default connect(({ login, app }) => ({ login, app }))(BI054HomeDetail);