Merge branch 'master' of http://121.41.2.71:3000/wyw/mh_jy_safe_web

2026-05-07 14:58:40 +08:00 · 2026-05-07 14:58:40 +08:00 · 7286069b22
commit 7286069b22
parent fc412a9468 f3318cb739
5 changed files with 182 additions and 90 deletions
--- a/src/layout/FullOther/DangerJob.js
+++ b/src/layout/FullOther/DangerJob.js
@ -10,7 +10,7 @@ class DangerJob extends React.Component {
    super(props);
    this.state = {
      currentPage: 1,
-      pageSize: 10,
+      pageSize: 20,
    };
    this.isUnmounted = false;
  }
@ -216,7 +216,7 @@ class DangerJob extends React.Component {
        >
          当日各公司危险作业清单
        </div>
-        <div style={{ flex: 1, overflow: 'auto', padding: '10px' }}>
+        <div style={{ flex: 1, padding: '10px' }}>
          <Table
            columns={columns}
            dataSource={dataSource}
@ -231,22 +231,37 @@ class DangerJob extends React.Component {
        <div
          style={{
            display: 'flex',
-            justifyContent: 'flex-end',
+            justifyContent: 'space-between',
+            alignItems: 'center',
            padding: '12px 16px',
            borderTop: '1px solid #f0f0f0',
            backgroundColor: '#fff',
          }}
        >
+          {/* 自定义每页条数选择器 */}
+          <div>
+            <span style={{ marginRight: '8px' }}>每页显示：</span>
+            <Select
+              value={pageSize}
+              onChange={(size) => {
+                this.setState({ currentPage: 1, pageSize: size });
+              }}
+              style={{ width: 80 }}
+            >
+              <Option value={10}>10条</Option>
+              <Option value={20}>20条</Option>
+            </Select>
+          </div>
          <Pagination
            current={currentPage}
            pageSize={pageSize}
            total={total}
-            showSizeChanger
+            // showSizeChanger
            showQuickJumper
            showTotal={(total) => `共 ${total} 条记录`}
            onChange={this.handlePageChange}
-            onShowSizeChange={this.handleShowSizeChange}
-            pageSizeOptions={['10', '20', '50']}
+            onShowSizeChange={false}
+            // pageSizeOptions={['10', '20']}
          />
        </div>
      </div>
--- a/src/layout/FullOther/HiddenSolve.js
+++ b/src/layout/FullOther/HiddenSolve.js
@ -1,6 +1,6 @@
 // HiddenSolve.js - 隐患解决页面组件
 import React from 'react';
-import { Select } from 'antd';
+import { Select, Table } from 'antd';
 import styles from './../fullinter.less';
 import echarts from 'echarts';

@ -15,6 +15,9 @@ class HiddenSolve extends React.Component {
    };
    this.chartResizeHandlers = {};
    this.isUnmounted = false;
+    // 添加缓存，用于比较数据是否真正变化
+    this.lastHiddenList = null;
+    this.lastHiddenRectifyList = null;
  }

  // 获取公司选项（使用 props 传入的 companyData，与 TrainingContent 一致）
@ -397,20 +400,53 @@ class HiddenSolve extends React.Component {
    const { hiddenSubData, selectedCompany, onCompanyChange, companyData } = this.props;
    let hiddenRanking = hiddenSubData?.hiddenRanking || [];

-    // 根据选中的公司筛选数据
+    // 根据选中的公司筛选数据（前端筛选）
    const selectedCompanyName = this.getSelectedCompanyName();
+    let filteredRanking = hiddenRanking;
    if (selectedCompanyName) {
-      hiddenRanking = hiddenRanking.filter((item) => item.companyName === selectedCompanyName);
+      filteredRanking = hiddenRanking.filter((item) => item.companyName === selectedCompanyName);
    }

-    // if (hiddenRanking.length === 0) {
-    //   return (
-    //     <div style={{ textAlign: 'center', padding: '50px', color: '#999' }}>
-    //       {selectedCompanyName ? `${selectedCompanyName} 暂无隐患排名数据` : '暂无隐患排名数据'}
-    //     </div>
-    //   );
-    // }
+    // 如果没选中公司或筛选后没有数据，显示全部或空状态
+    if (!selectedCompanyName || filteredRanking.length === 0) {
+      filteredRanking = selectedCompanyName ? [] : hiddenRanking;
+    }

+    // 表格列配置（与 RiskControl 样式保持一致）
+    const columns = [
+      {
+        title: '序号',
+        dataIndex: 'index',
+        key: 'index',
+        align: 'center',
+        width: 80,
+        render: (text, record, index) => <span style={{ fontWeight: 'bold' }}>{index + 1}</span>,
+      },
+      {
+        title: '隐患名称',
+        dataIndex: 'hiddenName',
+        key: 'hiddenName',
+        align: 'center',
+        // 中间列自适应，不设置固定宽度
+        render: (text) => <span style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}>{text}</span>,
+      },
+      {
+        title: '数量',
+        dataIndex: 'qty',
+        key: 'qty',
+        align: 'center',
+        width: 80,
+        render: (text) => <span style={{ fontWeight: 'bold' }}>{text}</span>,
+      },
+    ];
+
+    const tableData = filteredRanking.map((item, index) => ({
+      key: index,
+      index: index + 1,
+      hiddenName: item.hiddenName,
+      qty: item.qty,
+    }));
+    const scrollConfig = filteredRanking.length > 5 ? { y: 300 } : {};
    return (
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div
@ -436,56 +472,33 @@ class HiddenSolve extends React.Component {
            {this.getCompanyOptions()}
          </Select>
        </div>
-        {/* 公司筛选器 - 与 TrainingContent 样式保持一致 */}
-
-        <div style={{ flex: 1, overflow: 'auto', padding: '0 20px 20px 20px' }}>
-          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-            <thead>
-              <tr style={{ backgroundColor: '#f5f5f5', borderBottom: '2px solid #e8e8e8' }}>
-                <th style={{ padding: '12px 8px', textAlign: 'center', fontWeight: 'bold', color: '#000' }}>序号</th>
-                <th style={{ padding: '12px 8px', textAlign: 'center', fontWeight: 'bold', color: '#000' }}>
-                  隐患名称
-                </th>
-                <th style={{ padding: '12px 8px', textAlign: 'center', fontWeight: 'bold', color: '#000' }}>数量</th>
-              </tr>
-            </thead>
-            <tbody>
-              {hiddenRanking.length > 0 ? (
-                hiddenRanking.map((item, index) => (
-                  <tr
-                    key={index}
-                    style={{
-                      borderBottom: '1px solid #e8e8e8',
-                      backgroundColor: index % 2 === 0 ? '#fafafa' : '#fff',
-                    }}
-                  >
-                    <td style={{ padding: '10px 8px', textAlign: 'center', color: '#000' }}>
-                      <span
-                        style={{
-                          padding: '10px 8px',
-                          textAlign: 'center',
-                          color: '#000',
-                          fontWeight: 'bold',
-                        }}
-                      >
-                        {index + 1}
-                      </span>
-                    </td>
-                    <td style={{ padding: '10px 8px', textAlign: 'center', color: '#000' }}>{item.hiddenName}</td>
-                    <td style={{ padding: '10px 8px', textAlign: 'center', color: '#000' }}>
-                      <span style={{ color: '#4285F4', fontWeight: 'bold' }}>{item.qty}</span>
-                    </td>
-                  </tr>
-                ))
-              ) : (
-                <div style={{ textAlign: 'center', padding: '50px', color: '#999' }}>{'暂无隐患排名数据'}</div>
-              )}
-            </tbody>
-          </table>
+        <div style={{ flex: 1, padding: '10px' }}>
+          <Table
+            columns={columns}
+            dataSource={tableData}
+            pagination={false}
+            scroll={scrollConfig}
+            size="small"
+            bordered={false}
+            className={styles.hiddenTable}
+            style={{ border: 'none' }}
+          />
        </div>
      </div>
    );
  };
+  // 添加 shouldComponentUpdate 优化性能
+  shouldComponentUpdate(nextProps, nextState) {
+    // 只有当这些 props 变化时才重新渲染
+    if (
+      this.props.hiddenSubData?.hiddenRanking !== nextProps.hiddenSubData?.hiddenRanking ||
+      this.props.selectedCompany !== nextProps.selectedCompany ||
+      this.props.companyData !== nextProps.companyData
+    ) {
+      return true;
+    }
+    return false;
+  }

  setupResizeHandler = (chartName, renderMethod) => {
    const resizeHandler = () => {
@ -532,12 +545,21 @@ class HiddenSolve extends React.Component {
  }

  componentDidUpdate(prevProps) {
-    // 当 hiddenSubData 或 selectedCompany 变化时重新渲染图表
-    if (
-      prevProps.hiddenSubData !== this.props.hiddenSubData ||
-      prevProps.selectedCompany !== this.props.selectedCompany
-    ) {
+    const prevHiddenList = prevProps.hiddenSubData?.hiddenList;
+    const currentHiddenList = this.props.hiddenSubData?.hiddenList;
+    const prevHiddenRectifyList = prevProps.hiddenSubData?.hiddenRectifyList;
+    const currentHiddenRectifyList = this.props.hiddenSubData?.hiddenRectifyList;
+
+    // 检查 hiddenList 是否变化
+    const hiddenListChanged = JSON.stringify(prevHiddenList) !== JSON.stringify(currentHiddenList);
+    // 检查 hiddenRectifyList 是否变化
+    const hiddenRectifyListChanged = JSON.stringify(prevHiddenRectifyList) !== JSON.stringify(currentHiddenRectifyList);
+
+    // 只在数据真正变化时重新渲染图表
+    if (hiddenListChanged) {
      this.renderHiddenBarChart();
+    }
+    if (hiddenRectifyListChanged) {
      this.renderHiddenRectifyChart();
    }
  }
--- a/src/layout/FullOther/HomeContent.js
+++ b/src/layout/FullOther/HomeContent.js
@ -905,11 +905,7 @@ class HomeContent extends React.Component {
                      <Slider ref={this.sliderRef} {...slickSettings} className={styles.carousel}>
                        {trainingData.listVideoImg?.map((item, index) => (
                          <div key={index} className={styles.carouselItem}>
-                            <img
-                              src={configc.picServerHost + item.FILE_PATH}
-                              alt={`轮播图 ${index + 1}`}
-                              className={styles.mediaImage}
-                            />
+                            <img src={configc.picServerHost + item.FILE_PATH} className={styles.mediaImage} />
                          </div>
                        ))}
                      </Slider>
--- a/src/layout/FullScreenInter.js
+++ b/src/layout/FullScreenInter.js
@ -507,9 +507,7 @@ class FullScreen extends React.Component {

  // 隐患治理公司筛选变化处理
  handleHiddenCompanyChange = (company) => {
-    this.setState({ selectedHiddenCompany: company }, () => {
-      this.getHiddenSubData();
-    });
+    this.setState({ selectedHiddenCompany: company });
  };

  getHiddenSubData = () => {
@ -522,22 +520,8 @@ class FullScreen extends React.Component {
      url: 'BI/BIKanBanController/HiddenManage',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
-          let filteredData = ret;
-          if (this.state.selectedHiddenCompany) {
-            const selectedCompanyObj = this.state.hiddenCompanyData?.find(
-              (company) => company.ID === this.state.selectedHiddenCompany
-            );
-            const selectedCompanyName = selectedCompanyObj?.NAME;
-
-            if (selectedCompanyName) {
-              // 筛选 hiddenRanking
-              filteredData.hiddenRanking = filteredData.hiddenRanking.filter(
-                (item) => item.companyName === selectedCompanyName
-              );
-            }
-          }
          this.setState({
-            hiddenSubData: filteredData,
+            hiddenSubData: ret,
          });
        }
      },
--- a/src/layout/fullinter.less
+++ b/src/layout/fullinter.less
@ -718,6 +718,81 @@
    }
  }
 }
+.hiddenTable {
+  margin-bottom: 20px;
+  :global {
+    .ant-table {
+      font-size: 12px;
+      border: none !important;
+    }
+
+    // 移除整个表格容器的边框
+    .ant-table-container {
+      border: none !important;
+    }
+
+    // 表头行和单元格
+    .ant-table-thead > tr > th {
+      background-color: #fff !important;
+      color: #000 !important;
+      font-weight: bold;
+      padding: 8px;
+      white-space: nowrap;
+      border: none !important; // 移除所有边框
+      border-bottom: none !important; // 移除底部边框
+    }
+
+    // 表体单元格
+    .ant-table-tbody > tr > td {
+      border: none !important;
+      border-bottom: none !important;
+    }
+
+    // 移除表格内容区域的边框
+    .ant-table-content,
+    .ant-table-body,
+    .ant-table-cell {
+      border: none !important;
+    }
+
+    // 如果有滚动条，滚动容器也移除边框
+    .ant-table-body {
+      border: none !important;
+    }
+
+    // 虚拟滚动边框移除
+    .ant-table-header {
+      border: none !important;
+    }
+
+    // 表格底部边框移除
+    .ant-table-footer {
+      border: none !important;
+    }
+
+    // 表头样式
+    .ant-table-thead > tr > th {
+      background-color: #fff !important;
+      color: #000 !important;
+      font-weight: bold;
+      padding: 8px;
+      white-space: nowrap;
+    }
+    tbody tr:nth-child(odd) {
+      background-color: #fdf9ff;
+    }
+
+    // 偶数行（2, 4, 6...）
+    tbody tr:nth-child(even) {
+      background-color: #fff;
+    }
+
+    // hover 效果
+    .ant-table-tbody > tr:hover > td {
+      background-color: #e6f7ff;
+    }
+  }
+}

 // fullinter.less - 在文件末尾添加