From f3318cb7398a6a3c273f15f5be2f1bcfc0e2ce86 Mon Sep 17 00:00:00 2001 From: yunkexin <760754045@qq.com> Date: Wed, 6 May 2026 15:08:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/FullOther/DangerJob.js | 27 ++++-- src/layout/FullOther/HiddenSolve.js | 144 ++++++++++++++++------------ src/layout/FullOther/HomeContent.js | 6 +- src/layout/FullScreenInter.js | 20 +--- src/layout/fullinter.less | 75 +++++++++++++++ 5 files changed, 182 insertions(+), 90 deletions(-) diff --git a/src/layout/FullOther/DangerJob.js b/src/layout/FullOther/DangerJob.js index e38e3c7..348588b 100644 --- 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 { > 当日各公司危险作业清单 -
+
+ {/* 自定义每页条数选择器 */} +
+ 每页显示： + +
`共 ${total} 条记录`} onChange={this.handlePageChange} - onShowSizeChange={this.handleShowSizeChange} - pageSizeOptions={['10', '20', '50']} + onShowSizeChange={false} + // pageSizeOptions={['10', '20']} /> diff --git a/src/layout/FullOther/HiddenSolve.js b/src/layout/FullOther/HiddenSolve.js index 0fd37fb..18815e1 100644 --- 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 ( - //
- // {selectedCompanyName ? `${selectedCompanyName} 暂无隐患排名数据` : '暂无隐患排名数据'} - //
- // ); - // } + // 如果没选中公司或筛选后没有数据，显示全部或空状态 + if (!selectedCompanyName || filteredRanking.length === 0) { + filteredRanking = selectedCompanyName ? [] : hiddenRanking; + } + // 表格列配置（与 RiskControl 样式保持一致） + const columns = [ + { + title: '序号', + dataIndex: 'index', + key: 'index', + align: 'center', + width: 80, + render: (text, record, index) => {index + 1}, + }, + { + title: '隐患名称', + dataIndex: 'hiddenName', + key: 'hiddenName', + align: 'center', + // 中间列自适应，不设置固定宽度 + render: (text) => {text}, + }, + { + title: '数量', + dataIndex: 'qty', + key: 'qty', + align: 'center', + width: 80, + render: (text) => {text}, + }, + ]; + + 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 (
- {/* 公司筛选器 - 与 TrainingContent 样式保持一致 */} - -
-
- - - - - - - - - {hiddenRanking.length > 0 ? ( - hiddenRanking.map((item, index) => ( - - - - - - )) - ) : ( -
{'暂无隐患排名数据'}
- )} - -
序号 - 隐患名称 - 数量
- - {index + 1} - - {item.hiddenName} - {item.qty} -
+
+ ); }; + // 添加 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(); } } diff --git a/src/layout/FullOther/HomeContent.js b/src/layout/FullOther/HomeContent.js index 08a095f..96afd16 100644 --- a/src/layout/FullOther/HomeContent.js +++ b/src/layout/FullOther/HomeContent.js @@ -905,11 +905,7 @@ class HomeContent extends React.Component { {trainingData.listVideoImg?.map((item, index) => (
- {`轮播图 +
))} diff --git a/src/layout/FullScreenInter.js b/src/layout/FullScreenInter.js index ecb8356..9740a48 100644 --- 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, }); } }, diff --git a/src/layout/fullinter.less b/src/layout/fullinter.less index 54e5648..acb7f3f 100644 --- 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 - 在文件末尾添加