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

src/components/CustomPages/BI/BI054HomeDetail.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React from 'react';
-import { connect } from 'dva'
+import { connect } from 'dva';
-import { initFilter, extendRule, extendInclude, getIsPC, openNotificationMobile } from "../../../utils/common"
+import { initFilter, extendRule, extendInclude, getIsPC, openNotificationMobile } from '../../../utils/common';
-import { ChartBarShow_Vertical, LineShow } from "../../../utils/commonEcharsShow"
+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.loadData();
-    //定时器功能，暂时不开启
-    // this.timerID = setInterval(() => this.getBaseInfoData(1, this.state.tableKey, 5), 120000);
-  };
-  componentDidMount() {
-    this.loadData()
   }
+
+  componentDidMount() {
+    this.loadData();
+  }
+
   componentWillUnmount() {
     // this.timerID && clearTimeout(this.timerID);
   }
 
   //加载数据赋值
   loadData = () => {
-    this.state.showLoading = true;
+    this.setState((prevState) => ({
-    // let json = initFilter(this.props.login.OrgId, this.props.data.mineType, "NUM");
+      data: {
-    let json = initFilter(this.props.login.OrgId, (this.props.data?.mineType == null ? this.props.formParam?.mineType : this.props.data?.mineType), "NUM");
+        ...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('车间名称')
+            const rawData = result.ListSafeCheckCountDepartment;
-            // result.ListSafeCheckCountDepartment[0].listName.forEach((e, i) => {
-            //   listName.push(e)
-            // })
 
-            // listName.push('班组名称')
+            // 1. 提取 listName 作为列标题
-            // result.ListSafeCheckCountDepartment[0].listChild[0].listName.forEach(e => {
+            let countTypeTitle = rawData[0]?.listName || ['计划检查次数', '实际检查次数'];
-            //   listName.push(e)
-            // })
 
-            var countTypeTitle = []
+            // 2. 构建层级数据：提取父级部门（去重）和对应的子级
-            var columnsTb = []
+            const parentMap = new Map();
-            if (result.ListSafeCheckCountDepartment != null && result.ListSafeCheckCountDepartment.length > 0) {
+            const childMap = new Map();
-              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;
-                    }
-                  })
 
+            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,//车间 子集是 班组
+                ListSafeCheckCountDepartment: result.ListSafeCheckCountDepartment,
-              }
+                showLoading: false,
-            })
+              },
-            this.hiddenDangerTotal()
+            });
+
+            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){
+        if (item.MONTH > 9) {
-          xData.push(item.YEAR+'-'+ item.MONTH);
+          xData.push(item.YEAR + '-' + item.MONTH);
-        }else{
+        } else {
-          xData.push(item.YEAR+'-0'+ item.MONTH);
+          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",
+          type: 'bar',
-          stack: "总量",
+          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',
-              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
             },
             transitionDuration: 0,
           },
           grid: {
-            left: "5%",
+            left: '5%',
-            right: "5%",
+            right: '5%',
-            bottom: "15%",
+            bottom: '15%',
-            top: "5%",
+            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",
+            left: 'center',
-            align: "left",
+            align: 'left',
-            bottom: "2%",
+            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)",
+              color: 'rgb(170,170,170)',
-              formatter: "{value} ",
+              formatter: '{value} ',
             },
           },
           series: series,
@@ -306,92 +367,51 @@ class BI054HomeDetail extends React.Component {
 
   render() {
     const { data } = this.state;
-    return <div style={{
+    return (
-      backgroundColor: "white", width: "1200px", top: "0", bottom: "0", left: "0", right: "0", margin: "auto", borderStyle: "solid", borderColor: "#ccc", borderWidth: "1px"
+      <div
-    }}  >
+        style={{
-      <Row gutter={10} style={{ marginTop: "44px" }}>
+          backgroundColor: 'white',
-        <Col span={1}> </Col>
+          width: '1200px',
-        <Col span={22}>
+          top: '0',
-          <div style={{ border: "1px solid rgb(232,232,232)" }}   >
+          bottom: '0',
-            <div id="dangerTotal2" style={{ width: "100%", height: "350px" }}></div>
+          left: '0',
-          </div>
+          right: '0',
-        </Col>
+          margin: 'auto',
-        <Col span={1}></Col>
+          borderStyle: 'solid',
-      </Row>
+          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" }}>
+        <Row gutter={10} style={{ marginTop: '14px' }}>
-        <Col span={1}></Col>
+          <Col span={1}></Col>
-        <Col span={22} style={{ height: "100%" }}>
+          <Col span={22} style={{ height: '100%' }}>
-
+            <div className="bi001-table">
-          <div className="bi001-table" >
+              <Table
-            <Table dataSource={this.state.data.ListSafeCheckCountDepartment} columns={this.state.data.columnsTb} pagination={false} bordered loading={this.state.data.showLoading} size="small" rowKey="1" />
+                dataSource={data.tableData || []}
-          </div>
+                columns={data.columnsTb}
-
+                pagination={false}
-          {/* <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}   >
+                bordered
-            <table className={styles.tableRow} style={{ width: '100%', marginLeft: '0px' }}>
+                loading={data.showLoading}
-              <tbody>
+                size="small"
-                {
+                rowKey="key"
-                  data.listName ? (
+              />
-                    <tr>
+            </div>
-                      {
+          </Col>
-                        data.listName.map(e => {
+          <Col span={1}></Col>
-                          return <th>{e}</th>
+        </Row>
-                        })
+        <br />
-                      }
+      </div>
-                    </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);