From e9eaea5f96361472c166aacbf2e24d483653576c Mon Sep 17 00:00:00 2001 From: yunkexin <760754045@qq.com> Date: Mon, 20 Jul 2026 11:48:01 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E5=85=A8=E6=A3=80=E6=9F=A5=E6=AC=A1?= =?UTF-8?q?=E6=95=B0=E6=89=A9=E5=B1=95=E8=A1=A8=E6=97=A0=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=AD=98=E5=9C=A8=E6=83=85=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomPages/BI/BI054HomeDetail.js | 508 +++++++++--------- 1 file changed, 264 insertions(+), 244 deletions(-) diff --git a/src/components/CustomPages/BI/BI054HomeDetail.js b/src/components/CustomPages/BI/BI054HomeDetail.js index 7ea810a..bb75fd3 100644 --- a/src/components/CustomPages/BI/BI054HomeDetail.js +++ b/src/components/CustomPages/BI/BI054HomeDetail.js @@ -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); - }; - componentDidMount() { - this.loadData() + this.loadData(); } + + 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.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 - } - - 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?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; - } - }) - } - - columnsTb.push({ - title: countTypeTitle[j], - key: (i * 10 + j), - render: (value, record, index) => { - const obj = { - children: record.listCount[j], - }; - return obj; - } - }) + // 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 (!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)); + } + } else { + // 没有 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 || [], + }); } } - } + }); + // 转换为数组 + 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
- - - -
-
-
- - - + return ( +
+ + + +
+
+
+ + + - - - - -
- - - - {/*
-
- - { - data.listName ? ( - - { - data.listName.map(e => { - return - }) - } - ) - : () - } - - { - data.ListSafeCheckCountDepartment ? - data.ListSafeCheckCountDepartment.map((e) => { - return e.listChild?.map((c, i) => { - if (i == 0) { - return ( - - - { - e.listCount?.map(c => { - return - }) - } - - { - c.listCount?.map(k => { - return - }) - } - - ) - } - else { - return ( - - - { - c.listCount?.map(k => { - return - }) - } - - ) - } - }) - }) : ( - - - - ) - } - -
{e}
车间名称巡回检查例行检查 专业检查综合检查班组名称巡回检查例行检查专业检查综合检查
{e.DepartmentName}{c}{c.DepartmentName}{k}
{c.DepartmentName}{k}
暂无数据
-
*/} - - - - -
-
+ + + +
+ + + + + +
+ + ); } } -export default connect(({ login, app }) => ({ login, app }))(BI054HomeDetail) +export default connect(({ login, app }) => ({ login, app }))(BI054HomeDetail);