优化

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}
+            onShowSizeChange={false}
-            pageSizeOptions={['10', '20', '50']}
+            // pageSizeOptions={['10', '20']}
           />
         </div>
       </div>

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 (
+    if (!selectedCompanyName || filteredRanking.length === 0) {
-    //     <div style={{ textAlign: 'center', padding: '50px', color: '#999' }}>
+      filteredRanking = selectedCompanyName ? [] : hiddenRanking;
-    //       {selectedCompanyName ? `${selectedCompanyName} 暂无隐患排名数据` : '暂无隐患排名数据'}
+    }
-    //     </div>
-    //   );
-    // }
 
+    // 表格列配置（与 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, padding: '10px' }}>
-
+          <Table
-        <div style={{ flex: 1, overflow: 'auto', padding: '0 20px 20px 20px' }}>
+            columns={columns}
-          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            dataSource={tableData}
-            <thead>
+            pagination={false}
-              <tr style={{ backgroundColor: '#f5f5f5', borderBottom: '2px solid #e8e8e8' }}>
+            scroll={scrollConfig}
-                <th style={{ padding: '12px 8px', textAlign: 'center', fontWeight: 'bold', color: '#000' }}>序号</th>
+            size="small"
-                <th style={{ padding: '12px 8px', textAlign: 'center', fontWeight: 'bold', color: '#000' }}>
+            bordered={false}
-                  隐患名称
+            className={styles.hiddenTable}
-                </th>
+            style={{ border: 'none' }}
-                <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>
       </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 变化时重新渲染图表
+    const prevHiddenList = prevProps.hiddenSubData?.hiddenList;
-    if (
+    const currentHiddenList = this.props.hiddenSubData?.hiddenList;
-      prevProps.hiddenSubData !== this.props.hiddenSubData ||
+    const prevHiddenRectifyList = prevProps.hiddenSubData?.hiddenRectifyList;
-      prevProps.selectedCompany !== this.props.selectedCompany
+    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();
     }
   }

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
+                            <img src={configc.picServerHost + item.FILE_PATH} className={styles.mediaImage} />
-                              src={configc.picServerHost + item.FILE_PATH}
-                              alt={`轮播图 ${index + 1}`}
-                              className={styles.mediaImage}
-                            />
                           </div>
                         ))}
                       </Slider>

src/layout/FullScreenInter.js

@@ -507,9 +507,7 @@ class FullScreen extends React.Component {
 
   // 隐患治理公司筛选变化处理
   handleHiddenCompanyChange = (company) => {
-    this.setState({ selectedHiddenCompany: company }, () => {
+    this.setState({ selectedHiddenCompany: company });
-      this.getHiddenSubData();
-    });
   };
 
   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,
           });
         }
       },

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 - 在文件末尾添加