diff --git a/config/routes.js b/config/routes.js
index 0614436..a5d721d 100644
--- a/config/routes.js
+++ b/config/routes.js
@@ -24,6 +24,12 @@ export default [
name: 'business',
component: './nav_system_content/SystemContentList',
routes: [
+ // 应急资源管理
+ {
+ path: '/topnavbar00/business/emergencyResource',
+ name: 'emergencyResource',
+ component: './business_emergencyResource/EmergencyResource',
+ },
// 安全管理基础信息
{
path: '/topnavbar00/business/basicinformation',
diff --git a/src/assets/img/background_menu.png b/src/assets/img/background_menu.png
new file mode 100644
index 0000000..8c36051
Binary files /dev/null and b/src/assets/img/background_menu.png differ
diff --git a/src/assets/img/menuicon1.svg b/src/assets/img/menuicon1.svg
new file mode 100644
index 0000000..254e2b9
--- /dev/null
+++ b/src/assets/img/menuicon1.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/pages/business_envInformation copy/EnvInformation.js b/src/pages/business_emergencyResource copy 2/EmergencyResource.js
similarity index 98%
rename from src/pages/business_envInformation copy/EnvInformation.js
rename to src/pages/business_emergencyResource copy 2/EmergencyResource.js
index fd7e99a..07ab758 100644
--- a/src/pages/business_envInformation copy/EnvInformation.js
+++ b/src/pages/business_emergencyResource copy 2/EmergencyResource.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
-import styles from './EnvInformation.less';
+import styles from './EmergencyResource.less';
import ComplianceManagement from './components/ComplianceManagement'; //合规性管理
import OnlineMonitoring from './components/OnlineMonitoring'; //在线监测预警
import EnvironmentalPersonnelManagement from './components/EnvironmentalPersonnelManagement'; //环保人员管理
diff --git a/src/pages/business_envInformation copy/EnvInformation.less b/src/pages/business_emergencyResource copy 2/EmergencyResource.less
similarity index 100%
rename from src/pages/business_envInformation copy/EnvInformation.less
rename to src/pages/business_emergencyResource copy 2/EmergencyResource.less
diff --git a/src/pages/business_envInformation copy/components/AtmospherePollutantLibrary.js b/src/pages/business_emergencyResource copy 2/components/AtmospherePollutantLibrary.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/AtmospherePollutantLibrary.js
rename to src/pages/business_emergencyResource copy 2/components/AtmospherePollutantLibrary.js
diff --git a/src/pages/business_envInformation copy/components/AtmospherePollutantLibrary.less b/src/pages/business_emergencyResource copy 2/components/AtmospherePollutantLibrary.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/AtmospherePollutantLibrary.less
rename to src/pages/business_emergencyResource copy 2/components/AtmospherePollutantLibrary.less
diff --git a/src/pages/business_envInformation copy/components/ComplianceManagement.js b/src/pages/business_emergencyResource copy 2/components/ComplianceManagement.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/ComplianceManagement.js
rename to src/pages/business_emergencyResource copy 2/components/ComplianceManagement.js
diff --git a/src/pages/business_envInformation copy/components/ComplianceManagement.less b/src/pages/business_emergencyResource copy 2/components/ComplianceManagement.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/ComplianceManagement.less
rename to src/pages/business_emergencyResource copy 2/components/ComplianceManagement.less
diff --git a/src/pages/business_envInformation copy/components/EnvironmentalPersonnelManagement.js b/src/pages/business_emergencyResource copy 2/components/EnvironmentalPersonnelManagement.js
similarity index 99%
rename from src/pages/business_envInformation copy/components/EnvironmentalPersonnelManagement.js
rename to src/pages/business_emergencyResource copy 2/components/EnvironmentalPersonnelManagement.js
index ee14763..805e60e 100644
--- a/src/pages/business_envInformation copy/components/EnvironmentalPersonnelManagement.js
+++ b/src/pages/business_emergencyResource copy 2/components/EnvironmentalPersonnelManagement.js
@@ -14,10 +14,10 @@ import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png';
import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png';
import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png';
import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.png';
-import eqicon1 from '@/assets/business_basic/eqicon1.png';
-import eqicon2 from '@/assets/business_basic/eqicon2.png';
-import eqicon3 from '@/assets/business_basic/eqicon3.png';
-import eqicon4 from '@/assets/business_basic/eqicon4.png';
+// import eqicon1 from '@/assets/business_basic/eqicon1.png';
+// import eqicon2 from '@/assets/business_basic/eqicon2.png';
+// import eqicon3 from '@/assets/business_basic/eqicon3.png';
+// import eqicon4 from '@/assets/business_basic/eqicon4.png';
import viewIcon from '@/assets/business_envinformation/viewicon.svg';
import editIcon from '@/assets/business_envinformation/editicon.svg';
import deleteIcon from '@/assets/business_envinformation/deleteicon.svg';
diff --git a/src/pages/business_envInformation copy/components/EnvironmentalPersonnelManagement.less b/src/pages/business_emergencyResource copy 2/components/EnvironmentalPersonnelManagement.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/EnvironmentalPersonnelManagement.less
rename to src/pages/business_emergencyResource copy 2/components/EnvironmentalPersonnelManagement.less
diff --git a/src/pages/business_envInformation copy/components/EquipmentManagement.js b/src/pages/business_emergencyResource copy 2/components/EquipmentManagement.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/EquipmentManagement.js
rename to src/pages/business_emergencyResource copy 2/components/EquipmentManagement.js
diff --git a/src/pages/business_envInformation copy/components/EquipmentManagement.less b/src/pages/business_emergencyResource copy 2/components/EquipmentManagement.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/EquipmentManagement.less
rename to src/pages/business_emergencyResource copy 2/components/EquipmentManagement.less
diff --git a/src/pages/business_envInformation copy/components/EvaluationReport.js b/src/pages/business_emergencyResource copy 2/components/EvaluationReport.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/EvaluationReport.js
rename to src/pages/business_emergencyResource copy 2/components/EvaluationReport.js
diff --git a/src/pages/business_envInformation copy/components/EvaluationReport.less b/src/pages/business_emergencyResource copy 2/components/EvaluationReport.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/EvaluationReport.less
rename to src/pages/business_emergencyResource copy 2/components/EvaluationReport.less
diff --git a/src/pages/business_envInformation copy/components/OnlineMonitoring.js b/src/pages/business_emergencyResource copy 2/components/OnlineMonitoring.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/OnlineMonitoring.js
rename to src/pages/business_emergencyResource copy 2/components/OnlineMonitoring.js
diff --git a/src/pages/business_envInformation copy/components/OnlineMonitoring.less b/src/pages/business_emergencyResource copy 2/components/OnlineMonitoring.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/OnlineMonitoring.less
rename to src/pages/business_emergencyResource copy 2/components/OnlineMonitoring.less
diff --git a/src/pages/business_envInformation copy/components/PollutionSourceManagement.js b/src/pages/business_emergencyResource copy 2/components/PollutionSourceManagement.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/PollutionSourceManagement.js
rename to src/pages/business_emergencyResource copy 2/components/PollutionSourceManagement.js
diff --git a/src/pages/business_envInformation copy/components/PollutionSourceManagement.less b/src/pages/business_emergencyResource copy 2/components/PollutionSourceManagement.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/PollutionSourceManagement.less
rename to src/pages/business_emergencyResource copy 2/components/PollutionSourceManagement.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/DischargePermitManagement.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/DischargePermitManagement.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/DischargePermitManagement.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/DischargePermitManagement.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/DischargePermitManagement.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/DischargePermitManagement.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/DischargePermitManagement.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/DischargePermitManagement.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/EnvironmentalTaskList.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/EnvironmentalTaskList.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/EnvironmentalTaskList.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/EnvironmentalTaskList.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/EnvironmentalTaskList.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/EnvironmentalTaskList.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/EnvironmentalTaskList.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/EnvironmentalTaskList.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/InformationDisclosure.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/InformationDisclosure.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/InformationDisclosure.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/InformationDisclosure.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/InformationDisclosure.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/InformationDisclosure.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/InformationDisclosure.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/InformationDisclosure.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/PermitManagement.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/PermitManagement.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/PermitManagement.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/PermitManagement.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/PermitManagement.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/PermitManagement.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/PermitManagement.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/PermitManagement.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/PermitStatistics.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/PermitStatistics.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/PermitStatistics.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/PermitStatistics.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/PermitStatistics.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/PermitStatistics.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/PermitStatistics.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/PermitStatistics.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/ProtectionFacilityMaintenance.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/ProtectionFacilityMaintenance.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/ProtectionFacilityMaintenance.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/ProtectionFacilityMaintenance.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/ProtectionFacilityMaintenance.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/ProtectionFacilityMaintenance.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/ProtectionFacilityMaintenance.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/ProtectionFacilityMaintenance.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/RegulationCompliance.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/RegulationCompliance.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/RegulationCompliance.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/RegulationCompliance.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/RegulationCompliance.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/RegulationCompliance.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/RegulationCompliance.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/RegulationCompliance.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/SupervisionInspection.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/SupervisionInspection.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/SupervisionInspection.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/SupervisionInspection.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/SupervisionInspection.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/SupervisionInspection.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/SupervisionInspection.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/SupervisionInspection.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/WasteGasPollutionControl.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/WasteGasPollutionControl.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/WasteGasPollutionControl.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/WasteGasPollutionControl.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/WasteGasPollutionControl.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/WasteGasPollutionControl.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/WasteGasPollutionControl.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/WasteGasPollutionControl.less
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/WastewaterFacilityManagement.js b/src/pages/business_emergencyResource copy 2/components/secondary_menu/WastewaterFacilityManagement.js
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/WastewaterFacilityManagement.js
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/WastewaterFacilityManagement.js
diff --git a/src/pages/business_envInformation copy/components/secondary_menu/WastewaterFacilityManagement.less b/src/pages/business_emergencyResource copy 2/components/secondary_menu/WastewaterFacilityManagement.less
similarity index 100%
rename from src/pages/business_envInformation copy/components/secondary_menu/WastewaterFacilityManagement.less
rename to src/pages/business_emergencyResource copy 2/components/secondary_menu/WastewaterFacilityManagement.less
diff --git a/src/pages/business_emergencyResource copy 3/EmergencyResource.js b/src/pages/business_emergencyResource copy 3/EmergencyResource.js
new file mode 100644
index 0000000..07ab758
--- /dev/null
+++ b/src/pages/business_emergencyResource copy 3/EmergencyResource.js
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
+import styles from './EmergencyResource.less';
+import ComplianceManagement from './components/ComplianceManagement'; //合规性管理
+import OnlineMonitoring from './components/OnlineMonitoring'; //在线监测预警
+import EnvironmentalPersonnelManagement from './components/EnvironmentalPersonnelManagement'; //环保人员管理
+import EvaluationReport from './components/EvaluationReport'; //评估报告
+import EquipmentManagement from './components/EquipmentManagement'; //环保设备设施管理
+import PollutionSourceManagement from './components/PollutionSourceManagement'; //污染源管理
+
+
+
+const SafeMajorHazardList = () => {
+ const [activeModule, setActiveModule] = useState('organization');
+
+ const handleModuleClick = (module) => {
+ setActiveModule(module)
+ }
+
+
+ const renderModule = () => {
+ switch (activeModule) {
+ case 'organization':
+ return ;
+ case 'equipment':
+ return ;
+ case 'firefighting':
+ return ;
+ case 'other':
+ return ;
+ case 'equipmentManagement':
+ return ;
+ case 'pollutionSource':
+ return ;
+ default:
+ return ;
+ }
+ };
+
+
+ return (
+
+
+
+
+
+
+
+
+
+ {renderModule()}
+
+
handleEdit(record)}
+ />
+ 
handleDownload(record)}
+ /> */}
+ 
handleDelete(record)}
+ />
+
+ ),
+ },
+ ];
+
+ const handleSearch = (values) => {
+ console.log('搜索参数:', values);
+ // TODO: 实现搜索功能
+ };
+
+ const handleReset = () => {
+ form.resetFields();
+ // TODO: 重置搜索
+ };
+
+ const handleView = (record) => {
+ console.log('查看:', record);
+ // TODO: 实现查看功能
+ };
+
+ const handleEdit = (record) => {
+ console.log('编辑:', record);
+ // TODO: 实现编辑功能
+ };
+
+ const handleDownload = (record) => {
+ console.log('下载:', record);
+ // TODO: 实现下载功能
+ };
+
+ const handleDelete = (record) => {
+ console.log('删除:', record);
+ // TODO: 实现删除功能
+ };
+
+ const handleAdd = () => {
+ console.log('新增');
+ // TODO: 实现新增功能
+ };
+
+ const handleImport = () => {
+ console.log('导入');
+ // TODO: 实现导入功能
+ };
+
+ const handleQuery = () => {
+ console.log('查询');
+ // TODO: 实现查询功能
+ };
+
+ const handleTableChange = (pagination) => {
+ setPagination(pagination);
+ };
+
+ // 全选功能
+ const handleSelectAll = (checked) => {
+ if (checked) {
+ const allKeys = getCurrentPageData().map(item => item.key);
+ setSelectedRowKeys(allKeys);
+ } else {
+ setSelectedRowKeys([]);
+ }
+ };
+
+ // 批量操作
+ const handleBatchOperation = (operation) => {
+ console.log(`批量${operation}:`, selectedRowKeys);
+ // TODO: 实现批量操作功能
+ };
+
+ return (
+
+ {/* 页面头部 */}
+
+ 大气污染特征污染物名录库
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ // scroll={{ x: 3000}}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && 
}
+
+
+ {/* 左侧菜单 */}
+
+ {menuItems.map(item => (
+
handleMenuClick(item.key)}
+ >
+ {activeMenu === item.key &&
}
+
{item.label}
+
+ ))}
+
+
+ {/* 右侧内容区 */}
+
+ {renderContent()}
+
+
+
handleView(record)}
+ />
+
handleEdit(record)}
+ />
+
+
+ {/* 第一个div - 高度20% */}
+
+
+
+ {/* 块1 */}
+
+
+
环保总人数
+
258
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块2 */}
+
+
+
管理岗人数
+
58
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块3 */}
+
+
+
污水运行人数
+
51
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块4 */}
+
+
+
污水化验人数
+
28
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块5 */}
+
+
+
危废管理人员
+
50
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块6 */}
+
+
+
一般固体废物管理人员
+
58
+
截止到 2025-09-11 07:35
+
+
+
+
+
+
+
+
+
+ {/* 第三个div - 占满剩余位置 */}
+
+
+ {/* 第一行 - 表单控件 */}
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二行 - 表格 */}
+
+
+ `共 ${total} 条`,
+ }}
+ />
+
+
+
+
+ {/* 侧边抽屉 */}
+
查看}
+ placement="right"
+ onClose={handleCloseDrawer}
+ open={drawerVisible}
+ width={600}
+ closable={false}
+ bodyStyle={{ fontSize: '12px' }}
+ >
+ {selectedRecord && (
+
+ {/* 姓名和头像区域 */}
+
+
+
+ {selectedRecord.name}
+
+
+ {/* 基本信息 - 两列布局 */}
+
+
+
+ 工号：
+ {selectedRecord.employeeId}
+
+
+ 部门：
+ {selectedRecord.department}
+
+
+ 岗位：
+ {selectedRecord.position}
+
+
+ 性别：
+ {selectedRecord.gender}
+
+
+ 住址：
+ {selectedRecord.address}
+
+
+
+
+
+ 出生日期：
+ {selectedRecord.birthDate}
+
+
+ 入职时间：
+ {selectedRecord.joinDate}
+
+
+ 身份证号：
+ {selectedRecord.idCard}
+
+
+ 联系方式：
+ {selectedRecord.contact}
+
+
+
+
+
+ {/* 头像上传区域 */}
+
+
+
+
+
上传
+
+
+
+ {/* 岗位职责 */}
+
+
+ {/* 其他 */}
+
+
+
+ {/* 新增模态框 */}
+
+ 取消
+ ,
+
+ ]}
+ closable={true}
+ >
+
+
+
+ {/* 编辑抽屉 */}
+
编辑}
+ placement="right"
+ onClose={handleCloseEditDrawer}
+ open={editDrawerVisible}
+ width={600}
+ closable={false}
+ destroyOnClose={true}
+ bodyStyle={{ fontSize: '12px' }}
+ footer={[
+ ,
+
+ ]}
+ >
+ {selectedRecord && (
+
+ {/* 姓名和头像区域 */}
+
+
+
+ {selectedRecord.name}
+
+
+ {/* 基本信息 - 两列布局 */}
+
+
+
+ 工号：
+ {selectedRecord.employeeId}
+
+
+ 部门：
+ {selectedRecord.department}
+
+
+ 岗位：
+ {selectedRecord.position}
+
+
+ 性别：
+ {selectedRecord.gender}
+
+
+ 住址：
+ {selectedRecord.address}
+
+
+
+
+
+ 出生日期：
+ {selectedRecord.birthDate}
+
+
+ 入职时间：
+ {selectedRecord.joinDate}
+
+
+ 身份证号：
+ {selectedRecord.idCard}
+
+
+ 联系方式：
+ {selectedRecord.contact}
+
+
+
+
+
+ {/* 头像上传区域 */}
+
+
+
+
+
上传
+
+
+
+ {/* 岗位职责 */}
+
+
+ {/* 其他 */}
+
+
+
+
+
+ );
+};
+
+export default EquipmentManagement;
+
diff --git a/src/pages/business_emergencyResource copy 3/components/EquipmentManagement.less b/src/pages/business_emergencyResource copy 3/components/EquipmentManagement.less
new file mode 100644
index 0000000..e844009
--- /dev/null
+++ b/src/pages/business_emergencyResource copy 3/components/EquipmentManagement.less
@@ -0,0 +1,119 @@
+.container {
+ width: 100%;
+ height: 100%;
+ padding: 16px;
+ // background-color: #f5f5f5;
+
+ .tabs {
+ height: 100%;
+ background-color: transparent;
+ border-radius: 8px;
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ :global(.ant-tabs-nav) {
+ margin: 0;
+ padding: 0 0px;
+ background-color: transparent;
+ border-bottom: none;
+ }
+
+ :global(.ant-tabs-tab) {
+ padding: 16px 24px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ color: #AFAFAF !important;
+ background: transparent !important;
+ border: none !important;
+ position: relative;
+
+ &:hover {
+ color: #AFAFAF !important;
+ background-color: transparent !important;
+ }
+
+ &.ant-tabs-tab-active {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+
+
+ }
+ }
+
+ // 额外的全局样式覆盖，确保优先级足够高
+ :global(.ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 更强的选择器优先级
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 针对可能的嵌套结构
+ :global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // // 覆盖 Ant Design 5.x 的高优先级样式
+ // :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ // color: #009D6F !important;
+ // text-shadow: none !important;
+ // }
+
+ // 使用更高优先级的选择器
+ :global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 针对 CSS 模块的覆盖
+ :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 最高优先级覆盖
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 覆盖Ant Design的默认下划线
+ :global(.ant-tabs-ink-bar) {
+ background: none !important;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%) rotate(180deg);
+ width: 38.36132812500014px;
+ height: 3.3613271713256965px;
+ background-color: #009D6F;
+ opacity: 1;
+ border-radius: 2px;
+ z-index: 1;
+ }
+ }
+
+ :global(.ant-tabs-content-holder) {
+ height: calc(100% - 60px);
+ // padding: 20px;
+
+ .ant-tabs-content {
+ height: 100%;
+
+ .ant-tabs-tabpane {
+ height: 100%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/business_emergencyResource copy 3/components/EvaluationReport.js b/src/pages/business_emergencyResource copy 3/components/EvaluationReport.js
new file mode 100644
index 0000000..3015091
--- /dev/null
+++ b/src/pages/business_emergencyResource copy 3/components/EvaluationReport.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import styles from './EvaluationReport.less';
+
+// 导入子页面组件
+import PermitStatistics from './secondary_menu/PermitStatistics';
+import EnvironmentalTaskList from './secondary_menu/EnvironmentalTaskList';
+import DischargePermitManagement from './secondary_menu/DischargePermitManagement';
+
+const EvaluationReport = () => {
+ const [activeTab, setActiveTab] = useState('permit-statistics');
+
+ // 标签页配置
+ const tabItems = [
+ {
+ key: 'permit-statistics',
+ label: '许可证信息统计表',
+ children:
+ },
+ {
+ key: 'environmental-task-list',
+ label: '环保管理任务清单',
+ children:
+ },
+ {
+ key: 'discharge-permit-management',
+ label: '排污许可执行管理',
+ children:
+ }
+ ];
+
+ // 标签页切换处理
+ const handleTabChange = (key) => {
+ setActiveTab(key);
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default EvaluationReport;
diff --git a/src/pages/business_emergencyResource copy 3/components/EvaluationReport.less b/src/pages/business_emergencyResource copy 3/components/EvaluationReport.less
new file mode 100644
index 0000000..e844009
--- /dev/null
+++ b/src/pages/business_emergencyResource copy 3/components/EvaluationReport.less
@@ -0,0 +1,119 @@
+.container {
+ width: 100%;
+ height: 100%;
+ padding: 16px;
+ // background-color: #f5f5f5;
+
+ .tabs {
+ height: 100%;
+ background-color: transparent;
+ border-radius: 8px;
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ :global(.ant-tabs-nav) {
+ margin: 0;
+ padding: 0 0px;
+ background-color: transparent;
+ border-bottom: none;
+ }
+
+ :global(.ant-tabs-tab) {
+ padding: 16px 24px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ color: #AFAFAF !important;
+ background: transparent !important;
+ border: none !important;
+ position: relative;
+
+ &:hover {
+ color: #AFAFAF !important;
+ background-color: transparent !important;
+ }
+
+ &.ant-tabs-tab-active {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+
+
+ }
+ }
+
+ // 额外的全局样式覆盖，确保优先级足够高
+ :global(.ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 更强的选择器优先级
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 针对可能的嵌套结构
+ :global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // // 覆盖 Ant Design 5.x 的高优先级样式
+ // :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ // color: #009D6F !important;
+ // text-shadow: none !important;
+ // }
+
+ // 使用更高优先级的选择器
+ :global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 针对 CSS 模块的覆盖
+ :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 最高优先级覆盖
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 覆盖Ant Design的默认下划线
+ :global(.ant-tabs-ink-bar) {
+ background: none !important;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%) rotate(180deg);
+ width: 38.36132812500014px;
+ height: 3.3613271713256965px;
+ background-color: #009D6F;
+ opacity: 1;
+ border-radius: 2px;
+ z-index: 1;
+ }
+ }
+
+ :global(.ant-tabs-content-holder) {
+ height: calc(100% - 60px);
+ // padding: 20px;
+
+ .ant-tabs-content {
+ height: 100%;
+
+ .ant-tabs-tabpane {
+ height: 100%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/business_emergencyResource copy 3/components/OnlineMonitoring.js b/src/pages/business_emergencyResource copy 3/components/OnlineMonitoring.js
new file mode 100644
index 0000000..3e4b6b5
--- /dev/null
+++ b/src/pages/business_emergencyResource copy 3/components/OnlineMonitoring.js
@@ -0,0 +1,716 @@
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Card, Result, Select, Button } from 'antd';
+import * as echarts from 'echarts';
+import StandardTable from '@/components/StandardTable';
+import styles from './OnlineMonitoring.less';
+
+import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
+import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png';
+import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png';
+import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';
+import exportIcon from '@/assets/safe_majorHazard/online_monitoring/export.png';
+import deleteIcon from '@/assets/safe_majorHazard/online_monitoring/delete.png';
+
+const OnlineMonitoring = () => {
+ const chartRef = useRef(null);
+ const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+ const [selectedRows, setSelectedRows] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [dataSource, setDataSource] = useState([]);
+ const [pagination, setPagination] = useState({
+ current: 1,
+ pageSize: 5,
+ total: 0,
+ });
+
+ useEffect(() => {
+ if (chartRef.current) {
+ const chart = echarts.init(chartRef.current);
+
+ const option = {
+ color: ['#04A7F3', '#E7C42C', '#EC6941'],
+
+ legend: {
+ data: ['液位', '温度', '压力'],
+ top: "-3px",
+ left: "center",
+ itemGap: 40, // 图例间距
+ textStyle: {
+ fontSize: 10
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '2%',
+ top: '12%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
+ axisLabel: {
+ fontSize: 10
+ }
+ },
+ yAxis: {
+ type: 'value',
+ min: 0,
+ max: 500,
+ axisLabel: {
+ formatter: '{value}',
+ fontSize: 10
+ }
+ },
+ series: [
+ {
+ name: '液位',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#04A7F3'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: 'rgba(4, 167, 243, 0.3)' },
+ { offset: 1, color: 'rgba(4, 167, 243, 0)' }
+ ]
+ }
+ },
+ symbol: 'none', // 不显示数据点
+ data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140]
+ },
+ {
+ name: '温度',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#E7C42C'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: 'rgba(231, 196, 44, 0.3)' },
+ { offset: 1, color: 'rgba(231, 196, 44, 0)' }
+ ]
+ }
+ },
+ symbol: 'none',
+ data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75]
+ },
+ {
+ name: '压力',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#EC6941'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 1,
+ x2: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: 'rgba(236, 105, 65, 0)' },
+ { offset: 1, color: 'rgba(236, 105, 65, 0.3)' }
+ ]
+ }
+ },
+ symbol: 'none',
+ data: [200, 300, 250, 450, 400, 430, 480, 420, 480, 280, 320, 260, 240]
+ }
+ ]
+ };
+
+ chart.setOption(option);
+
+ // 响应式调整 - 使用ResizeObserver监听容器尺寸变化
+ let resizeTimer = null;
+ const handleResize = () => {
+ // 防抖处理，避免频繁调用resize
+ if (resizeTimer) {
+ clearTimeout(resizeTimer);
+ }
+ resizeTimer = setTimeout(() => {
+ chart.resize();
+ }, 100);
+ };
+
+ // 监听窗口大小变化
+ window.addEventListener('resize', handleResize);
+
+ // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
+ let resizeObserver = null;
+ if (window.ResizeObserver) {
+ resizeObserver = new ResizeObserver(() => {
+ // 使用setTimeout确保DOM更新完成后再调整图表
+ setTimeout(() => {
+ handleResize();
+ }, 0);
+ });
+ resizeObserver.observe(chartRef.current);
+ }
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ if (resizeObserver) {
+ resizeObserver.disconnect();
+ }
+ if (resizeTimer) {
+ clearTimeout(resizeTimer);
+ }
+ chart.dispose();
+ };
+ }
+ }, []);
+
+ // 表格列定义
+ const columns = [
+ {
+ title: '编号',
+ dataIndex: 'id',
+ key: 'id',
+ width: 80,
+ render: (text, record, index) => {
+ const page = pagination.current || 1;
+ const pageSize = pagination.pageSize || 5;
+ const number = (page - 1) * pageSize + index + 1;
+ return `0${number}`.slice(-2);
+ }
+ },
+ {
+ title: '报警时间',
+ dataIndex: 'alarmTime',
+ key: 'alarmTime',
+ width: 150,
+ },
+ {
+ title: '报警传感器名称',
+ dataIndex: 'sensorName',
+ key: 'sensorName',
+ width: 150,
+ },
+ {
+ title: '报警类型',
+ dataIndex: 'alarmType',
+ key: 'alarmType',
+ width: 120,
+ },
+ {
+ title: '报警内容',
+ dataIndex: 'alarmContent',
+ key: 'alarmContent',
+ width: 200,
+ },
+ {
+ title: '优先级',
+ dataIndex: 'priority',
+ key: 'priority',
+ width: 80,
+ render: (text) => {
+ const colorMap = {
+ '高': '#FF4D4F',
+ '中': '#FAAD14',
+ '低': '#52C41A'
+ };
+ return {text};
+ }
+ },
+ {
+ title: '处理状态',
+ dataIndex: 'status',
+ key: 'status',
+ width: 100,
+ render: (text) => {
+ const statusMap = {
+ '未处理': { color: '#FF4D4F', bg: '#FFF2F0' },
+ '处理中': { color: '#FAAD14', bg: '#FFFBE6' },
+ '已处理': { color: '#52C41A', bg: '#F6FFED' }
+ };
+ const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
+ return (
+
+ {text}
+
+ );
+ }
+ },
+ {
+ title: '处理时间',
+ dataIndex: 'processTime',
+ key: 'processTime',
+ width: 150,
+ },
+ {
+ title: '处理人',
+ dataIndex: 'processor',
+ key: 'processor',
+ width: 100,
+ },
+ {
+ title: '操作',
+ key: 'action',
+ width: 120,
+ render: (_, record) => (
+
+
+
+ ),
+ },
+ ];
+
+ // 模拟数据
+ const mockData = [
+ {
+ key: '1',
+ id: '001',
+ alarmTime: '2024-01-15 08:30:25',
+ sensorName: 'LNG储罐',
+ alarmType: '温度超限',
+ alarmContent: '储罐温度超过安全阈值',
+ priority: '高',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '2',
+ id: '002',
+ alarmTime: '2024-01-15 09:15:10',
+ sensorName: 'LNG储罐',
+ alarmType: '压力异常',
+ alarmContent: '管道压力异常波动',
+ priority: '中',
+ status: '处理中',
+ processTime: '2024-01-15 09:20:00',
+ processor: '张三',
+ },
+ {
+ key: '3',
+ id: '003',
+ alarmTime: '2024-01-15 10:45:30',
+ sensorName: 'LNG储罐',
+ alarmType: '液位异常',
+ alarmContent: '储罐液位低于警戒线',
+ priority: '高',
+ status: '已处理',
+ processTime: '2024-01-15 11:00:15',
+ processor: '李四',
+ },
+ {
+ key: '4',
+ id: '004',
+ alarmTime: '2024-01-15 11:20:45',
+ sensorName: 'LNG储罐',
+ alarmType: '气体泄漏',
+ alarmContent: '检测到可燃气体泄漏',
+ priority: '高',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '5',
+ id: '005',
+ alarmTime: '2024-01-15 12:10:20',
+ sensorName: 'LNG储罐',
+ alarmType: '设备振动',
+ alarmContent: '设备异常振动',
+ priority: '低',
+ status: '已处理',
+ processTime: '2024-01-15 12:30:00',
+ processor: '王五',
+ },
+ {
+ key: '6',
+ id: '006',
+ alarmTime: '2024-01-15 13:25:15',
+ sensorName: 'LNG管道',
+ alarmType: '流量异常',
+ alarmContent: '管道流量异常波动',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '7',
+ id: '007',
+ alarmTime: '2024-01-15 14:10:30',
+ sensorName: 'LNG储罐',
+ alarmType: '温度异常',
+ alarmContent: '储罐温度异常升高',
+ priority: '高',
+ status: '处理中',
+ processTime: '2024-01-15 14:15:00',
+ processor: '赵六',
+ },
+ {
+ key: '8',
+ id: '008',
+ alarmTime: '2024-01-15 15:45:20',
+ sensorName: 'LNG管道',
+ alarmType: '压力超限',
+ alarmContent: '管道压力超过安全阈值',
+ priority: '高',
+ status: '已处理',
+ processTime: '2024-01-15 16:00:00',
+ processor: '孙七',
+ },
+ {
+ key: '9',
+ id: '009',
+ alarmTime: '2024-01-15 16:30:45',
+ sensorName: 'LNG储罐',
+ alarmType: '液位超限',
+ alarmContent: '储罐液位超过警戒线',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '10',
+ id: '010',
+ alarmTime: '2024-01-15 17:15:10',
+ sensorName: 'LNG管道',
+ alarmType: '泄漏检测',
+ alarmContent: '检测到轻微气体泄漏',
+ priority: '低',
+ status: '已处理',
+ processTime: '2024-01-15 17:30:00',
+ processor: '周八',
+ },
+ {
+ key: '11',
+ id: '011',
+ alarmTime: '2024-01-15 18:20:35',
+ sensorName: 'LNG储罐',
+ alarmType: '设备故障',
+ alarmContent: '储罐阀门异常关闭',
+ priority: '高',
+ status: '处理中',
+ processTime: '2024-01-15 18:25:00',
+ processor: '吴九',
+ },
+ {
+ key: '12',
+ id: '012',
+ alarmTime: '2024-01-15 19:05:50',
+ sensorName: 'LNG管道',
+ alarmType: '温度异常',
+ alarmContent: '管道温度异常下降',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ ];
+
+ // 初始化数据
+ useEffect(() => {
+ setPagination(prev => ({ ...prev, total: mockData.length }));
+ }, []);
+
+ // 根据分页获取当前页数据
+ const getCurrentPageData = () => {
+ const { current, pageSize } = pagination;
+ const startIndex = (current - 1) * pageSize;
+ const endIndex = startIndex + pageSize;
+ return mockData.slice(startIndex, endIndex);
+ };
+
+ // 表格选择变化
+ const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+ setSelectedRowKeys(newSelectedRowKeys);
+ setSelectedRows(newSelectedRows);
+ };
+
+ // 分页变化处理
+ const handleTableChange = (pagination) => {
+ setPagination(prev => ({
+ ...prev,
+ current: pagination.current,
+ pageSize: pagination.pageSize,
+ }));
+ };
+
+ // 导出功能
+ const handleExport = () => {
+ console.log('导出数据');
+ // 这里可以添加导出逻辑
+ };
+
+ // 批量删除功能
+ const handleBatchDelete = () => {
+ if (selectedRowKeys.length === 0) {
+ console.log('没有选中任何行');
+ // 可以在这里添加提示用户选择行的逻辑
+ return;
+ }
+ console.log('批量删除', selectedRowKeys);
+ // 这里可以添加批量删除逻辑
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
总报警
+
1456
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
一级报警
+
357
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
二级报警
+
401
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
三级报警
+
556
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+ {/* 表格 */}
+
+ {/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
+
+
+
+
+
+
+
+
+
+ {/* 表格 5行10列 带页码 每页5条数据 */}
+
+
+ `共 ${total} 条`,
+ }}
+ scroll={{ x: 1200 }}
+ />
+
+
+
+
${data.name}
+
${item.status}
+
超标 ${item.exceedance}
+
大气环境特征污染物
+
+ {/* 顶部统计区域 */}
+
+ {/* 污染物排放统计 */}
+
+
+
污染物排放统计
+
+
+
+
+
+
+
+ {/*
超标污染物数量
*/}
+ {chartReady && (
+
+ )}
+
+
+
+ {/*
超标污染物种类
*/}
+ {chartReady && (
+
+ )}
+
+
+
+
+
+ {/* 超标排放统计 */}
+
+
+
超标排放统计
+
+
+
+
+
+
+ {chartReady && (
+
+ )}
+
+
+
+ {/* 环境分类卡片 */}
+
+
+
+
AIR POLLUSION
+
+
+
+
+
+
+
WATER POLLUSION
+
+
+
+
+
+
+
SOILPOLLUSION
+
+
+
+
+
+
+
+
+
+ {/* 污染源管理表格区域 */}
+
+
+
污染源管理
+
+ }
+ onClick={handleAdd}
+ className={styles.titleAddButton}
+ >
+ 新增
+
+ }
+ onClick={handleGenerateReport}
+ className={styles.titleReportButton}
+ >
+ 生成报表
+
+
+
+
+
({
+ name: record.name,
+ }),
+ }}
+ pagination={{
+ showTotal: (total, range) => `共 ${total} 条`,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ pageSizeOptions: ['5', '10', '20', '50', '100'],
+ defaultPageSize: 5,
+ size: 'small',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 筛选条件
+
+
+ }
+ className={styles.queryBtn}
+ >
+ 查询
+
+ }
+ className={styles.resetBtn}
+ >
+ 重置
+
+ }
+ className={styles.uploadBtn}
+ >
+ 上传
+
+
+
+
+
+
+
+
+
+
+
2) 环保管理任务清单
+
依据排污许可证副本中的环保要求,提供生成环保管理要求任务清单;
+
环保任务清单包括:大气排放口信息,大气污染物有组织排放许可年限值,大气污染物无组织排放年限制、企业大气排放总许可量;废水排放口、废水污染物排放许可限制;固体废物排放信息、自行贮存和自行利用/处置设施信息;工业噪声排放信息;
+
环境管理要求包括:自行检测及记录表、环境管理台账记录。
+
+
+
+
+ 共85条
+
+
+
+
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+
+
+ {/* 第一块：搜索表单 */}
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ }
+ }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
handleView(record)}
+ />
+ handleEdit(record)}
+ />
+ handleDownload(record)}
+ />
+ handleDelete(record)}
+ />
+
+ ),
+ },
+ ];
+
+ const handleSearch = (values) => {
+ console.log('搜索参数:', values);
+ // TODO: 实现搜索功能
+ };
+
+ const handleReset = () => {
+ form.resetFields();
+ // TODO: 重置搜索
+ };
+
+ const handleView = (record) => {
+ console.log('查看:', record);
+ // TODO: 实现查看功能
+ };
+
+ const handleEdit = (record) => {
+ console.log('编辑:', record);
+ // TODO: 实现编辑功能
+ };
+
+ const handleDownload = (record) => {
+ console.log('下载:', record);
+ // TODO: 实现下载功能
+ };
+
+ const handleDelete = (record) => {
+ console.log('删除:', record);
+ // TODO: 实现删除功能
+ };
+
+ const handleAdd = () => {
+ console.log('新增');
+ // TODO: 实现新增功能
+ };
+
+ const handleImport = () => {
+ console.log('导入');
+ // TODO: 实现导入功能
+ };
+
+ const handleQuery = () => {
+ console.log('查询');
+ // TODO: 实现查询功能
+ };
+
+ const handleTableChange = (pagination) => {
+ setPagination(pagination);
+ };
+
+ const getCurrentPageData = () => {
+ const { current, pageSize } = pagination;
+ const start = (current - 1) * pageSize;
+ const end = start + pageSize;
+ return dataSource.slice(start, end);
+ };
+
+ return (
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 导入
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：搜索表单 */}
+
+
+
+
+ {/* 第二块：表格区域 */}
+
+
+ {/* 法规合规管理块1 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-24
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块2 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-25
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块3 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-26
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块4 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-27
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块5 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-28
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块6 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-29
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块7 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-30
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块8 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-31
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块9 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-01
+
+
+ 发布部门 环保部门名称9
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块10 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-02
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块11 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-03
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块12 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-04
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+
+
+ {/* 静态分页组件 */}
+
+
+ 共85条
+ {/* */}
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+
+ {/* 抽屉详情 */}
+
+ {selectedRegulation && (
+
+
+ {selectedRegulation.name}
+
+
+ {selectedRegulation.publishDate}
+
+
+ {selectedRegulation.department}
+
+
+ {selectedRegulation.status}
+
+
+ {selectedRegulation.category}
+
+
+ {selectedRegulation.version}
+
+
+ {selectedRegulation.updateTime}
+
+
+
+ {selectedRegulation.content}
+
+
+
+ )}
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 上传
+
+ }
+ onClick={() => handleBatchOperation('下载')}
+ className={styles.importButton}
+ disabled={selectedRowKeys.length === 0}
+ >
+ 批量下载
+
+ {/* */}
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 上传
+
+ }
+ onClick={() => handleBatchOperation('下载')}
+ className={styles.importButton}
+ disabled={selectedRowKeys.length === 0}
+ >
+ 批量下载
+
+ {/* */}
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+
+
+
+
+
+
+
+
+ {renderModule()}
+
+
+ {/* 页面头部 */}
+
+ 大气污染特征污染物名录库
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ // scroll={{ x: 3000}}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 左侧菜单 */}
+
+ {menuItems.map(item => (
+
handleMenuClick(item.key)}
+ >
+ {activeMenu === item.key &&
}
+
{item.label}
+
+ ))}
+
+
+ {/* 右侧内容区 */}
+
+ {renderContent()}
+
+
+
handleView(record)}
+ />
+
handleEdit(record)}
+ />
+
+
+ {/* 第一个div - 高度20% */}
+
+
+
+ {/* 块1 */}
+
+
+
环保总人数
+
258
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块2 */}
+
+
+
管理岗人数
+
58
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块3 */}
+
+
+
污水运行人数
+
51
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块4 */}
+
+
+
污水化验人数
+
28
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块5 */}
+
+
+
危废管理人员
+
50
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块6 */}
+
+
+
一般固体废物管理人员
+
58
+
截止到 2025-09-11 07:35
+
+
+
+
+
+
+
+
+
+ {/* 第三个div - 占满剩余位置 */}
+
+
+ {/* 第一行 - 表单控件 */}
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二行 - 表格 */}
+
+
+ `共 ${total} 条`,
+ }}
+ />
+
+
+
+
+ {/* 侧边抽屉 */}
+
查看}
+ placement="right"
+ onClose={handleCloseDrawer}
+ open={drawerVisible}
+ width={600}
+ closable={false}
+ bodyStyle={{ fontSize: '12px' }}
+ >
+ {selectedRecord && (
+
+ {/* 姓名和头像区域 */}
+
+
+
+ {selectedRecord.name}
+
+
+ {/* 基本信息 - 两列布局 */}
+
+
+
+ 工号：
+ {selectedRecord.employeeId}
+
+
+ 部门：
+ {selectedRecord.department}
+
+
+ 岗位：
+ {selectedRecord.position}
+
+
+ 性别：
+ {selectedRecord.gender}
+
+
+ 住址：
+ {selectedRecord.address}
+
+
+
+
+
+ 出生日期：
+ {selectedRecord.birthDate}
+
+
+ 入职时间：
+ {selectedRecord.joinDate}
+
+
+ 身份证号：
+ {selectedRecord.idCard}
+
+
+ 联系方式：
+ {selectedRecord.contact}
+
+
+
+
+
+ {/* 头像上传区域 */}
+
+
+
+
+
上传
+
+
+
+ {/* 岗位职责 */}
+
+
+ {/* 其他 */}
+
+
+
+ {/* 新增模态框 */}
+
+ 取消
+ ,
+
+ ]}
+ closable={true}
+ >
+
+
+
+ {/* 编辑抽屉 */}
+
编辑}
+ placement="right"
+ onClose={handleCloseEditDrawer}
+ open={editDrawerVisible}
+ width={600}
+ closable={false}
+ destroyOnClose={true}
+ bodyStyle={{ fontSize: '12px' }}
+ footer={[
+ ,
+
+ ]}
+ >
+ {selectedRecord && (
+
+ {/* 姓名和头像区域 */}
+
+
+
+ {selectedRecord.name}
+
+
+ {/* 基本信息 - 两列布局 */}
+
+
+
+ 工号：
+ {selectedRecord.employeeId}
+
+
+ 部门：
+ {selectedRecord.department}
+
+
+ 岗位：
+ {selectedRecord.position}
+
+
+ 性别：
+ {selectedRecord.gender}
+
+
+ 住址：
+ {selectedRecord.address}
+
+
+
+
+
+ 出生日期：
+ {selectedRecord.birthDate}
+
+
+ 入职时间：
+ {selectedRecord.joinDate}
+
+
+ 身份证号：
+ {selectedRecord.idCard}
+
+
+ 联系方式：
+ {selectedRecord.contact}
+
+
+
+
+
+ {/* 头像上传区域 */}
+
+
+
+
+
上传
+
+
+
+ {/* 岗位职责 */}
+
+
+ {/* 其他 */}
+
+
+
+
+
+ );
+};
+
+export default EquipmentManagement;
+
diff --git a/src/pages/business_emergencyResource/components/EquipmentManagement.less b/src/pages/business_emergencyResource/components/EquipmentManagement.less
new file mode 100644
index 0000000..e844009
--- /dev/null
+++ b/src/pages/business_emergencyResource/components/EquipmentManagement.less
@@ -0,0 +1,119 @@
+.container {
+ width: 100%;
+ height: 100%;
+ padding: 16px;
+ // background-color: #f5f5f5;
+
+ .tabs {
+ height: 100%;
+ background-color: transparent;
+ border-radius: 8px;
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ :global(.ant-tabs-nav) {
+ margin: 0;
+ padding: 0 0px;
+ background-color: transparent;
+ border-bottom: none;
+ }
+
+ :global(.ant-tabs-tab) {
+ padding: 16px 24px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ color: #AFAFAF !important;
+ background: transparent !important;
+ border: none !important;
+ position: relative;
+
+ &:hover {
+ color: #AFAFAF !important;
+ background-color: transparent !important;
+ }
+
+ &.ant-tabs-tab-active {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+
+
+ }
+ }
+
+ // 额外的全局样式覆盖，确保优先级足够高
+ :global(.ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 更强的选择器优先级
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 针对可能的嵌套结构
+ :global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // // 覆盖 Ant Design 5.x 的高优先级样式
+ // :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ // color: #009D6F !important;
+ // text-shadow: none !important;
+ // }
+
+ // 使用更高优先级的选择器
+ :global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 针对 CSS 模块的覆盖
+ :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 最高优先级覆盖
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 覆盖Ant Design的默认下划线
+ :global(.ant-tabs-ink-bar) {
+ background: none !important;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%) rotate(180deg);
+ width: 38.36132812500014px;
+ height: 3.3613271713256965px;
+ background-color: #009D6F;
+ opacity: 1;
+ border-radius: 2px;
+ z-index: 1;
+ }
+ }
+
+ :global(.ant-tabs-content-holder) {
+ height: calc(100% - 60px);
+ // padding: 20px;
+
+ .ant-tabs-content {
+ height: 100%;
+
+ .ant-tabs-tabpane {
+ height: 100%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/business_emergencyResource/components/EvaluationReport.js b/src/pages/business_emergencyResource/components/EvaluationReport.js
new file mode 100644
index 0000000..3015091
--- /dev/null
+++ b/src/pages/business_emergencyResource/components/EvaluationReport.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import styles from './EvaluationReport.less';
+
+// 导入子页面组件
+import PermitStatistics from './secondary_menu/PermitStatistics';
+import EnvironmentalTaskList from './secondary_menu/EnvironmentalTaskList';
+import DischargePermitManagement from './secondary_menu/DischargePermitManagement';
+
+const EvaluationReport = () => {
+ const [activeTab, setActiveTab] = useState('permit-statistics');
+
+ // 标签页配置
+ const tabItems = [
+ {
+ key: 'permit-statistics',
+ label: '许可证信息统计表',
+ children:
+ },
+ {
+ key: 'environmental-task-list',
+ label: '环保管理任务清单',
+ children:
+ },
+ {
+ key: 'discharge-permit-management',
+ label: '排污许可执行管理',
+ children:
+ }
+ ];
+
+ // 标签页切换处理
+ const handleTabChange = (key) => {
+ setActiveTab(key);
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default EvaluationReport;
diff --git a/src/pages/business_emergencyResource/components/EvaluationReport.less b/src/pages/business_emergencyResource/components/EvaluationReport.less
new file mode 100644
index 0000000..e844009
--- /dev/null
+++ b/src/pages/business_emergencyResource/components/EvaluationReport.less
@@ -0,0 +1,119 @@
+.container {
+ width: 100%;
+ height: 100%;
+ padding: 16px;
+ // background-color: #f5f5f5;
+
+ .tabs {
+ height: 100%;
+ background-color: transparent;
+ border-radius: 8px;
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ :global(.ant-tabs-nav) {
+ margin: 0;
+ padding: 0 0px;
+ background-color: transparent;
+ border-bottom: none;
+ }
+
+ :global(.ant-tabs-tab) {
+ padding: 16px 24px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ color: #AFAFAF !important;
+ background: transparent !important;
+ border: none !important;
+ position: relative;
+
+ &:hover {
+ color: #AFAFAF !important;
+ background-color: transparent !important;
+ }
+
+ &.ant-tabs-tab-active {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+
+
+ }
+ }
+
+ // 额外的全局样式覆盖，确保优先级足够高
+ :global(.ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 更强的选择器优先级
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 针对可能的嵌套结构
+ :global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // // 覆盖 Ant Design 5.x 的高优先级样式
+ // :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ // color: #009D6F !important;
+ // text-shadow: none !important;
+ // }
+
+ // 使用更高优先级的选择器
+ :global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 针对 CSS 模块的覆盖
+ :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 最高优先级覆盖
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 覆盖Ant Design的默认下划线
+ :global(.ant-tabs-ink-bar) {
+ background: none !important;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%) rotate(180deg);
+ width: 38.36132812500014px;
+ height: 3.3613271713256965px;
+ background-color: #009D6F;
+ opacity: 1;
+ border-radius: 2px;
+ z-index: 1;
+ }
+ }
+
+ :global(.ant-tabs-content-holder) {
+ height: calc(100% - 60px);
+ // padding: 20px;
+
+ .ant-tabs-content {
+ height: 100%;
+
+ .ant-tabs-tabpane {
+ height: 100%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/business_emergencyResource/components/OnlineMonitoring.js b/src/pages/business_emergencyResource/components/OnlineMonitoring.js
new file mode 100644
index 0000000..3e4b6b5
--- /dev/null
+++ b/src/pages/business_emergencyResource/components/OnlineMonitoring.js
@@ -0,0 +1,716 @@
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Card, Result, Select, Button } from 'antd';
+import * as echarts from 'echarts';
+import StandardTable from '@/components/StandardTable';
+import styles from './OnlineMonitoring.less';
+
+import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
+import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png';
+import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png';
+import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';
+import exportIcon from '@/assets/safe_majorHazard/online_monitoring/export.png';
+import deleteIcon from '@/assets/safe_majorHazard/online_monitoring/delete.png';
+
+const OnlineMonitoring = () => {
+ const chartRef = useRef(null);
+ const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+ const [selectedRows, setSelectedRows] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [dataSource, setDataSource] = useState([]);
+ const [pagination, setPagination] = useState({
+ current: 1,
+ pageSize: 5,
+ total: 0,
+ });
+
+ useEffect(() => {
+ if (chartRef.current) {
+ const chart = echarts.init(chartRef.current);
+
+ const option = {
+ color: ['#04A7F3', '#E7C42C', '#EC6941'],
+
+ legend: {
+ data: ['液位', '温度', '压力'],
+ top: "-3px",
+ left: "center",
+ itemGap: 40, // 图例间距
+ textStyle: {
+ fontSize: 10
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '2%',
+ top: '12%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
+ axisLabel: {
+ fontSize: 10
+ }
+ },
+ yAxis: {
+ type: 'value',
+ min: 0,
+ max: 500,
+ axisLabel: {
+ formatter: '{value}',
+ fontSize: 10
+ }
+ },
+ series: [
+ {
+ name: '液位',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#04A7F3'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: 'rgba(4, 167, 243, 0.3)' },
+ { offset: 1, color: 'rgba(4, 167, 243, 0)' }
+ ]
+ }
+ },
+ symbol: 'none', // 不显示数据点
+ data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140]
+ },
+ {
+ name: '温度',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#E7C42C'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: 'rgba(231, 196, 44, 0.3)' },
+ { offset: 1, color: 'rgba(231, 196, 44, 0)' }
+ ]
+ }
+ },
+ symbol: 'none',
+ data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75]
+ },
+ {
+ name: '压力',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#EC6941'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 1,
+ x2: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: 'rgba(236, 105, 65, 0)' },
+ { offset: 1, color: 'rgba(236, 105, 65, 0.3)' }
+ ]
+ }
+ },
+ symbol: 'none',
+ data: [200, 300, 250, 450, 400, 430, 480, 420, 480, 280, 320, 260, 240]
+ }
+ ]
+ };
+
+ chart.setOption(option);
+
+ // 响应式调整 - 使用ResizeObserver监听容器尺寸变化
+ let resizeTimer = null;
+ const handleResize = () => {
+ // 防抖处理，避免频繁调用resize
+ if (resizeTimer) {
+ clearTimeout(resizeTimer);
+ }
+ resizeTimer = setTimeout(() => {
+ chart.resize();
+ }, 100);
+ };
+
+ // 监听窗口大小变化
+ window.addEventListener('resize', handleResize);
+
+ // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
+ let resizeObserver = null;
+ if (window.ResizeObserver) {
+ resizeObserver = new ResizeObserver(() => {
+ // 使用setTimeout确保DOM更新完成后再调整图表
+ setTimeout(() => {
+ handleResize();
+ }, 0);
+ });
+ resizeObserver.observe(chartRef.current);
+ }
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ if (resizeObserver) {
+ resizeObserver.disconnect();
+ }
+ if (resizeTimer) {
+ clearTimeout(resizeTimer);
+ }
+ chart.dispose();
+ };
+ }
+ }, []);
+
+ // 表格列定义
+ const columns = [
+ {
+ title: '编号',
+ dataIndex: 'id',
+ key: 'id',
+ width: 80,
+ render: (text, record, index) => {
+ const page = pagination.current || 1;
+ const pageSize = pagination.pageSize || 5;
+ const number = (page - 1) * pageSize + index + 1;
+ return `0${number}`.slice(-2);
+ }
+ },
+ {
+ title: '报警时间',
+ dataIndex: 'alarmTime',
+ key: 'alarmTime',
+ width: 150,
+ },
+ {
+ title: '报警传感器名称',
+ dataIndex: 'sensorName',
+ key: 'sensorName',
+ width: 150,
+ },
+ {
+ title: '报警类型',
+ dataIndex: 'alarmType',
+ key: 'alarmType',
+ width: 120,
+ },
+ {
+ title: '报警内容',
+ dataIndex: 'alarmContent',
+ key: 'alarmContent',
+ width: 200,
+ },
+ {
+ title: '优先级',
+ dataIndex: 'priority',
+ key: 'priority',
+ width: 80,
+ render: (text) => {
+ const colorMap = {
+ '高': '#FF4D4F',
+ '中': '#FAAD14',
+ '低': '#52C41A'
+ };
+ return {text};
+ }
+ },
+ {
+ title: '处理状态',
+ dataIndex: 'status',
+ key: 'status',
+ width: 100,
+ render: (text) => {
+ const statusMap = {
+ '未处理': { color: '#FF4D4F', bg: '#FFF2F0' },
+ '处理中': { color: '#FAAD14', bg: '#FFFBE6' },
+ '已处理': { color: '#52C41A', bg: '#F6FFED' }
+ };
+ const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
+ return (
+
+ {text}
+
+ );
+ }
+ },
+ {
+ title: '处理时间',
+ dataIndex: 'processTime',
+ key: 'processTime',
+ width: 150,
+ },
+ {
+ title: '处理人',
+ dataIndex: 'processor',
+ key: 'processor',
+ width: 100,
+ },
+ {
+ title: '操作',
+ key: 'action',
+ width: 120,
+ render: (_, record) => (
+
+
+
+ ),
+ },
+ ];
+
+ // 模拟数据
+ const mockData = [
+ {
+ key: '1',
+ id: '001',
+ alarmTime: '2024-01-15 08:30:25',
+ sensorName: 'LNG储罐',
+ alarmType: '温度超限',
+ alarmContent: '储罐温度超过安全阈值',
+ priority: '高',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '2',
+ id: '002',
+ alarmTime: '2024-01-15 09:15:10',
+ sensorName: 'LNG储罐',
+ alarmType: '压力异常',
+ alarmContent: '管道压力异常波动',
+ priority: '中',
+ status: '处理中',
+ processTime: '2024-01-15 09:20:00',
+ processor: '张三',
+ },
+ {
+ key: '3',
+ id: '003',
+ alarmTime: '2024-01-15 10:45:30',
+ sensorName: 'LNG储罐',
+ alarmType: '液位异常',
+ alarmContent: '储罐液位低于警戒线',
+ priority: '高',
+ status: '已处理',
+ processTime: '2024-01-15 11:00:15',
+ processor: '李四',
+ },
+ {
+ key: '4',
+ id: '004',
+ alarmTime: '2024-01-15 11:20:45',
+ sensorName: 'LNG储罐',
+ alarmType: '气体泄漏',
+ alarmContent: '检测到可燃气体泄漏',
+ priority: '高',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '5',
+ id: '005',
+ alarmTime: '2024-01-15 12:10:20',
+ sensorName: 'LNG储罐',
+ alarmType: '设备振动',
+ alarmContent: '设备异常振动',
+ priority: '低',
+ status: '已处理',
+ processTime: '2024-01-15 12:30:00',
+ processor: '王五',
+ },
+ {
+ key: '6',
+ id: '006',
+ alarmTime: '2024-01-15 13:25:15',
+ sensorName: 'LNG管道',
+ alarmType: '流量异常',
+ alarmContent: '管道流量异常波动',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '7',
+ id: '007',
+ alarmTime: '2024-01-15 14:10:30',
+ sensorName: 'LNG储罐',
+ alarmType: '温度异常',
+ alarmContent: '储罐温度异常升高',
+ priority: '高',
+ status: '处理中',
+ processTime: '2024-01-15 14:15:00',
+ processor: '赵六',
+ },
+ {
+ key: '8',
+ id: '008',
+ alarmTime: '2024-01-15 15:45:20',
+ sensorName: 'LNG管道',
+ alarmType: '压力超限',
+ alarmContent: '管道压力超过安全阈值',
+ priority: '高',
+ status: '已处理',
+ processTime: '2024-01-15 16:00:00',
+ processor: '孙七',
+ },
+ {
+ key: '9',
+ id: '009',
+ alarmTime: '2024-01-15 16:30:45',
+ sensorName: 'LNG储罐',
+ alarmType: '液位超限',
+ alarmContent: '储罐液位超过警戒线',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '10',
+ id: '010',
+ alarmTime: '2024-01-15 17:15:10',
+ sensorName: 'LNG管道',
+ alarmType: '泄漏检测',
+ alarmContent: '检测到轻微气体泄漏',
+ priority: '低',
+ status: '已处理',
+ processTime: '2024-01-15 17:30:00',
+ processor: '周八',
+ },
+ {
+ key: '11',
+ id: '011',
+ alarmTime: '2024-01-15 18:20:35',
+ sensorName: 'LNG储罐',
+ alarmType: '设备故障',
+ alarmContent: '储罐阀门异常关闭',
+ priority: '高',
+ status: '处理中',
+ processTime: '2024-01-15 18:25:00',
+ processor: '吴九',
+ },
+ {
+ key: '12',
+ id: '012',
+ alarmTime: '2024-01-15 19:05:50',
+ sensorName: 'LNG管道',
+ alarmType: '温度异常',
+ alarmContent: '管道温度异常下降',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ ];
+
+ // 初始化数据
+ useEffect(() => {
+ setPagination(prev => ({ ...prev, total: mockData.length }));
+ }, []);
+
+ // 根据分页获取当前页数据
+ const getCurrentPageData = () => {
+ const { current, pageSize } = pagination;
+ const startIndex = (current - 1) * pageSize;
+ const endIndex = startIndex + pageSize;
+ return mockData.slice(startIndex, endIndex);
+ };
+
+ // 表格选择变化
+ const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+ setSelectedRowKeys(newSelectedRowKeys);
+ setSelectedRows(newSelectedRows);
+ };
+
+ // 分页变化处理
+ const handleTableChange = (pagination) => {
+ setPagination(prev => ({
+ ...prev,
+ current: pagination.current,
+ pageSize: pagination.pageSize,
+ }));
+ };
+
+ // 导出功能
+ const handleExport = () => {
+ console.log('导出数据');
+ // 这里可以添加导出逻辑
+ };
+
+ // 批量删除功能
+ const handleBatchDelete = () => {
+ if (selectedRowKeys.length === 0) {
+ console.log('没有选中任何行');
+ // 可以在这里添加提示用户选择行的逻辑
+ return;
+ }
+ console.log('批量删除', selectedRowKeys);
+ // 这里可以添加批量删除逻辑
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
总报警
+
1456
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
一级报警
+
357
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
二级报警
+
401
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
三级报警
+
556
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+ {/* 表格 */}
+
+ {/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
+
+
+
+
+
+
+
+
+
+ {/* 表格 5行10列 带页码 每页5条数据 */}
+
+
+ `共 ${total} 条`,
+ }}
+ scroll={{ x: 1200 }}
+ />
+
+
+
+
${data.name}
+
${item.status}
+
超标 ${item.exceedance}
+
大气环境特征污染物
+
+ {/* 顶部统计区域 */}
+
+ {/* 污染物排放统计 */}
+
+
+
污染物排放统计
+
+
+
+
+
+
+
+ {/*
超标污染物数量
*/}
+ {chartReady && (
+
+ )}
+
+
+
+ {/*
超标污染物种类
*/}
+ {chartReady && (
+
+ )}
+
+
+
+
+
+ {/* 超标排放统计 */}
+
+
+
超标排放统计
+
+
+
+
+
+
+ {chartReady && (
+
+ )}
+
+
+
+ {/* 环境分类卡片 */}
+
+
+
+
AIR POLLUSION
+
+
+
+
+
+
+
WATER POLLUSION
+
+
+
+
+
+
+
SOILPOLLUSION
+
+
+
+
+
+
+
+
+
+ {/* 污染源管理表格区域 */}
+
+
+
污染源管理
+
+ }
+ onClick={handleAdd}
+ className={styles.titleAddButton}
+ >
+ 新增
+
+ }
+ onClick={handleGenerateReport}
+ className={styles.titleReportButton}
+ >
+ 生成报表
+
+
+
+
+
({
+ name: record.name,
+ }),
+ }}
+ pagination={{
+ showTotal: (total, range) => `共 ${total} 条`,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ pageSizeOptions: ['5', '10', '20', '50', '100'],
+ defaultPageSize: 5,
+ size: 'small',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 筛选条件
+
+
+ }
+ className={styles.queryBtn}
+ >
+ 查询
+
+ }
+ className={styles.resetBtn}
+ >
+ 重置
+
+ }
+ className={styles.uploadBtn}
+ >
+ 上传
+
+
+
+
+
+
+
+
+
+
+
2) 环保管理任务清单
+
依据排污许可证副本中的环保要求,提供生成环保管理要求任务清单;
+
环保任务清单包括:大气排放口信息,大气污染物有组织排放许可年限值,大气污染物无组织排放年限制、企业大气排放总许可量;废水排放口、废水污染物排放许可限制;固体废物排放信息、自行贮存和自行利用/处置设施信息;工业噪声排放信息;
+
环境管理要求包括:自行检测及记录表、环境管理台账记录。
+
+
+
+
+ 共85条
+
+
+
+
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+
+
+ {/* 第一块：搜索表单 */}
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ }
+ }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 导入
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：搜索表单 */}
+
+
+
+
+ {/* 第二块：表格区域 */}
+
+
+ {/* 法规合规管理块1 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-24
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块2 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-25
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块3 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-26
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块4 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-27
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块5 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-28
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块6 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-29
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块7 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-30
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块8 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-31
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块9 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-01
+
+
+ 发布部门 环保部门名称9
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块10 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-02
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块11 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-03
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块12 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-04
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+
+
+ {/* 静态分页组件 */}
+
+
+ 共85条
+ {/* */}
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+
+ {/* 抽屉详情 */}
+
+ {selectedRegulation && (
+
+
+ {selectedRegulation.name}
+
+
+ {selectedRegulation.publishDate}
+
+
+ {selectedRegulation.department}
+
+
+ {selectedRegulation.status}
+
+
+ {selectedRegulation.category}
+
+
+ {selectedRegulation.version}
+
+
+ {selectedRegulation.updateTime}
+
+
+
+ {selectedRegulation.content}
+
+
+
+ )}
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 上传
+
+ }
+ onClick={() => handleBatchOperation('下载')}
+ className={styles.importButton}
+ disabled={selectedRowKeys.length === 0}
+ >
+ 批量下载
+
+ {/* */}
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 上传
+
+ }
+ onClick={() => handleBatchOperation('下载')}
+ className={styles.importButton}
+ disabled={selectedRowKeys.length === 0}
+ >
+ 批量下载
+
+ {/* */}
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+
+
+
+
+
+
+
+
+ {renderModule()}
+
+
+ {/* 页面头部 */}
+
+ 大气污染特征污染物名录库
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ // scroll={{ x: 3000}}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 左侧菜单 */}
+
+ {menuItems.map(item => (
+
handleMenuClick(item.key)}
+ >
+ {activeMenu === item.key &&
}
+
{item.label}
+
+ ))}
+
+
+ {/* 右侧内容区 */}
+
+ {renderContent()}
+
+
+
handleView(record)}
+ />
+
handleEdit(record)}
+ />
+
+
+ {/* 第一个div - 高度20% */}
+
+
+
+ {/* 块1 */}
+
+
+
环保总人数
+
258
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块2 */}
+
+
+
管理岗人数
+
58
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块3 */}
+
+
+
污水运行人数
+
51
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块4 */}
+
+
+
污水化验人数
+
28
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块5 */}
+
+
+
危废管理人员
+
50
+
截止到 2025-09-11 07:35
+
+
+
+ {/* 块6 */}
+
+
+
一般固体废物管理人员
+
58
+
截止到 2025-09-11 07:35
+
+
+
+
+
+
+
+
+
+ {/* 第三个div - 占满剩余位置 */}
+
+
+ {/* 第一行 - 表单控件 */}
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二行 - 表格 */}
+
+
+ `共 ${total} 条`,
+ }}
+ />
+
+
+
+
+ {/* 侧边抽屉 */}
+
查看}
+ placement="right"
+ onClose={handleCloseDrawer}
+ open={drawerVisible}
+ width={600}
+ closable={false}
+ bodyStyle={{ fontSize: '12px' }}
+ >
+ {selectedRecord && (
+
+ {/* 姓名和头像区域 */}
+
+
+
+ {selectedRecord.name}
+
+
+ {/* 基本信息 - 两列布局 */}
+
+
+
+ 工号：
+ {selectedRecord.employeeId}
+
+
+ 部门：
+ {selectedRecord.department}
+
+
+ 岗位：
+ {selectedRecord.position}
+
+
+ 性别：
+ {selectedRecord.gender}
+
+
+ 住址：
+ {selectedRecord.address}
+
+
+
+
+
+ 出生日期：
+ {selectedRecord.birthDate}
+
+
+ 入职时间：
+ {selectedRecord.joinDate}
+
+
+ 身份证号：
+ {selectedRecord.idCard}
+
+
+ 联系方式：
+ {selectedRecord.contact}
+
+
+
+
+
+ {/* 头像上传区域 */}
+
+
+
+
+
上传
+
+
+
+ {/* 岗位职责 */}
+
+
+ {/* 其他 */}
+
+
+
+ {/* 新增模态框 */}
+
+ 取消
+ ,
+
+ ]}
+ closable={true}
+ >
+
+
+
+ {/* 编辑抽屉 */}
+
编辑}
+ placement="right"
+ onClose={handleCloseEditDrawer}
+ open={editDrawerVisible}
+ width={600}
+ closable={false}
+ destroyOnClose={true}
+ bodyStyle={{ fontSize: '12px' }}
+ footer={[
+ ,
+
+ ]}
+ >
+ {selectedRecord && (
+
+ {/* 姓名和头像区域 */}
+
+
+
+ {selectedRecord.name}
+
+
+ {/* 基本信息 - 两列布局 */}
+
+
+
+ 工号：
+ {selectedRecord.employeeId}
+
+
+ 部门：
+ {selectedRecord.department}
+
+
+ 岗位：
+ {selectedRecord.position}
+
+
+ 性别：
+ {selectedRecord.gender}
+
+
+ 住址：
+ {selectedRecord.address}
+
+
+
+
+
+ 出生日期：
+ {selectedRecord.birthDate}
+
+
+ 入职时间：
+ {selectedRecord.joinDate}
+
+
+ 身份证号：
+ {selectedRecord.idCard}
+
+
+ 联系方式：
+ {selectedRecord.contact}
+
+
+
+
+
+ {/* 头像上传区域 */}
+
+
+
+
+
上传
+
+
+
+ {/* 岗位职责 */}
+
+
+ {/* 其他 */}
+
+
+
+
+
+ );
+};
+
+export default EquipmentManagement;
+
diff --git a/src/pages/business_plan/components/EquipmentManagement.less b/src/pages/business_plan/components/EquipmentManagement.less
new file mode 100644
index 0000000..e844009
--- /dev/null
+++ b/src/pages/business_plan/components/EquipmentManagement.less
@@ -0,0 +1,119 @@
+.container {
+ width: 100%;
+ height: 100%;
+ padding: 16px;
+ // background-color: #f5f5f5;
+
+ .tabs {
+ height: 100%;
+ background-color: transparent;
+ border-radius: 8px;
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ :global(.ant-tabs-nav) {
+ margin: 0;
+ padding: 0 0px;
+ background-color: transparent;
+ border-bottom: none;
+ }
+
+ :global(.ant-tabs-tab) {
+ padding: 16px 24px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ color: #AFAFAF !important;
+ background: transparent !important;
+ border: none !important;
+ position: relative;
+
+ &:hover {
+ color: #AFAFAF !important;
+ background-color: transparent !important;
+ }
+
+ &.ant-tabs-tab-active {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+
+
+ }
+ }
+
+ // 额外的全局样式覆盖，确保优先级足够高
+ :global(.ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 更强的选择器优先级
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 针对可能的嵌套结构
+ :global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // // 覆盖 Ant Design 5.x 的高优先级样式
+ // :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ // color: #009D6F !important;
+ // text-shadow: none !important;
+ // }
+
+ // 使用更高优先级的选择器
+ :global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 针对 CSS 模块的覆盖
+ :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 最高优先级覆盖
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 覆盖Ant Design的默认下划线
+ :global(.ant-tabs-ink-bar) {
+ background: none !important;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%) rotate(180deg);
+ width: 38.36132812500014px;
+ height: 3.3613271713256965px;
+ background-color: #009D6F;
+ opacity: 1;
+ border-radius: 2px;
+ z-index: 1;
+ }
+ }
+
+ :global(.ant-tabs-content-holder) {
+ height: calc(100% - 60px);
+ // padding: 20px;
+
+ .ant-tabs-content {
+ height: 100%;
+
+ .ant-tabs-tabpane {
+ height: 100%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/business_plan/components/EvaluationReport.js b/src/pages/business_plan/components/EvaluationReport.js
new file mode 100644
index 0000000..3015091
--- /dev/null
+++ b/src/pages/business_plan/components/EvaluationReport.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import styles from './EvaluationReport.less';
+
+// 导入子页面组件
+import PermitStatistics from './secondary_menu/PermitStatistics';
+import EnvironmentalTaskList from './secondary_menu/EnvironmentalTaskList';
+import DischargePermitManagement from './secondary_menu/DischargePermitManagement';
+
+const EvaluationReport = () => {
+ const [activeTab, setActiveTab] = useState('permit-statistics');
+
+ // 标签页配置
+ const tabItems = [
+ {
+ key: 'permit-statistics',
+ label: '许可证信息统计表',
+ children:
+ },
+ {
+ key: 'environmental-task-list',
+ label: '环保管理任务清单',
+ children:
+ },
+ {
+ key: 'discharge-permit-management',
+ label: '排污许可执行管理',
+ children:
+ }
+ ];
+
+ // 标签页切换处理
+ const handleTabChange = (key) => {
+ setActiveTab(key);
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default EvaluationReport;
diff --git a/src/pages/business_plan/components/EvaluationReport.less b/src/pages/business_plan/components/EvaluationReport.less
new file mode 100644
index 0000000..e844009
--- /dev/null
+++ b/src/pages/business_plan/components/EvaluationReport.less
@@ -0,0 +1,119 @@
+.container {
+ width: 100%;
+ height: 100%;
+ padding: 16px;
+ // background-color: #f5f5f5;
+
+ .tabs {
+ height: 100%;
+ background-color: transparent;
+ border-radius: 8px;
+ // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ :global(.ant-tabs-nav) {
+ margin: 0;
+ padding: 0 0px;
+ background-color: transparent;
+ border-bottom: none;
+ }
+
+ :global(.ant-tabs-tab) {
+ padding: 16px 24px !important;
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ color: #AFAFAF !important;
+ background: transparent !important;
+ border: none !important;
+ position: relative;
+
+ &:hover {
+ color: #AFAFAF !important;
+ background-color: transparent !important;
+ }
+
+ &.ant-tabs-tab-active {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+
+
+ }
+ }
+
+ // 额外的全局样式覆盖，确保优先级足够高
+ :global(.ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 更强的选择器优先级
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // 针对可能的嵌套结构
+ :global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
+ color: #009D6F !important;
+ background-color: #fff !important;
+ border-bottom: none !important;
+ }
+
+ // // 覆盖 Ant Design 5.x 的高优先级样式
+ // :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ // color: #009D6F !important;
+ // text-shadow: none !important;
+ // }
+
+ // 使用更高优先级的选择器
+ :global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 针对 CSS 模块的覆盖
+ :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 最高优先级覆盖
+ :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+ color: #009D6F !important;
+ text-shadow: none !important;
+ }
+
+ // 覆盖Ant Design的默认下划线
+ :global(.ant-tabs-ink-bar) {
+ background: none !important;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%) rotate(180deg);
+ width: 38.36132812500014px;
+ height: 3.3613271713256965px;
+ background-color: #009D6F;
+ opacity: 1;
+ border-radius: 2px;
+ z-index: 1;
+ }
+ }
+
+ :global(.ant-tabs-content-holder) {
+ height: calc(100% - 60px);
+ // padding: 20px;
+
+ .ant-tabs-content {
+ height: 100%;
+
+ .ant-tabs-tabpane {
+ height: 100%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/business_plan/components/OnlineMonitoring.js b/src/pages/business_plan/components/OnlineMonitoring.js
new file mode 100644
index 0000000..3e4b6b5
--- /dev/null
+++ b/src/pages/business_plan/components/OnlineMonitoring.js
@@ -0,0 +1,716 @@
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Card, Result, Select, Button } from 'antd';
+import * as echarts from 'echarts';
+import StandardTable from '@/components/StandardTable';
+import styles from './OnlineMonitoring.less';
+
+import alarm0 from '@/assets/safe_majorHazard/online_monitoring/alarm0.png';
+import alarm1 from '@/assets/safe_majorHazard/online_monitoring/alarm1.png';
+import alarm2 from '@/assets/safe_majorHazard/online_monitoring/alarm2.png';
+import alarm3 from '@/assets/safe_majorHazard/online_monitoring/alarm3.png';
+import exportIcon from '@/assets/safe_majorHazard/online_monitoring/export.png';
+import deleteIcon from '@/assets/safe_majorHazard/online_monitoring/delete.png';
+
+const OnlineMonitoring = () => {
+ const chartRef = useRef(null);
+ const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+ const [selectedRows, setSelectedRows] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [dataSource, setDataSource] = useState([]);
+ const [pagination, setPagination] = useState({
+ current: 1,
+ pageSize: 5,
+ total: 0,
+ });
+
+ useEffect(() => {
+ if (chartRef.current) {
+ const chart = echarts.init(chartRef.current);
+
+ const option = {
+ color: ['#04A7F3', '#E7C42C', '#EC6941'],
+
+ legend: {
+ data: ['液位', '温度', '压力'],
+ top: "-3px",
+ left: "center",
+ itemGap: 40, // 图例间距
+ textStyle: {
+ fontSize: 10
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '2%',
+ top: '12%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
+ axisLabel: {
+ fontSize: 10
+ }
+ },
+ yAxis: {
+ type: 'value',
+ min: 0,
+ max: 500,
+ axisLabel: {
+ formatter: '{value}',
+ fontSize: 10
+ }
+ },
+ series: [
+ {
+ name: '液位',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#04A7F3'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: 'rgba(4, 167, 243, 0.3)' },
+ { offset: 1, color: 'rgba(4, 167, 243, 0)' }
+ ]
+ }
+ },
+ symbol: 'none', // 不显示数据点
+ data: [120, 200, 150, 300, 250, 400, 350, 280, 320, 180, 220, 160, 140]
+ },
+ {
+ name: '温度',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#E7C42C'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: 'rgba(231, 196, 44, 0.3)' },
+ { offset: 1, color: 'rgba(231, 196, 44, 0)' }
+ ]
+ }
+ },
+ symbol: 'none',
+ data: [80, 120, 100, 180, 160, 220, 200, 150, 170, 90, 110, 85, 75]
+ },
+ {
+ name: '压力',
+ type: 'line',
+ smooth: true,
+ lineStyle: {
+ width: 1.5,
+ color: '#EC6941'
+ },
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 1,
+ x2: 0,
+ y2: 0,
+ colorStops: [
+ { offset: 0, color: 'rgba(236, 105, 65, 0)' },
+ { offset: 1, color: 'rgba(236, 105, 65, 0.3)' }
+ ]
+ }
+ },
+ symbol: 'none',
+ data: [200, 300, 250, 450, 400, 430, 480, 420, 480, 280, 320, 260, 240]
+ }
+ ]
+ };
+
+ chart.setOption(option);
+
+ // 响应式调整 - 使用ResizeObserver监听容器尺寸变化
+ let resizeTimer = null;
+ const handleResize = () => {
+ // 防抖处理，避免频繁调用resize
+ if (resizeTimer) {
+ clearTimeout(resizeTimer);
+ }
+ resizeTimer = setTimeout(() => {
+ chart.resize();
+ }, 100);
+ };
+
+ // 监听窗口大小变化
+ window.addEventListener('resize', handleResize);
+
+ // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
+ let resizeObserver = null;
+ if (window.ResizeObserver) {
+ resizeObserver = new ResizeObserver(() => {
+ // 使用setTimeout确保DOM更新完成后再调整图表
+ setTimeout(() => {
+ handleResize();
+ }, 0);
+ });
+ resizeObserver.observe(chartRef.current);
+ }
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ if (resizeObserver) {
+ resizeObserver.disconnect();
+ }
+ if (resizeTimer) {
+ clearTimeout(resizeTimer);
+ }
+ chart.dispose();
+ };
+ }
+ }, []);
+
+ // 表格列定义
+ const columns = [
+ {
+ title: '编号',
+ dataIndex: 'id',
+ key: 'id',
+ width: 80,
+ render: (text, record, index) => {
+ const page = pagination.current || 1;
+ const pageSize = pagination.pageSize || 5;
+ const number = (page - 1) * pageSize + index + 1;
+ return `0${number}`.slice(-2);
+ }
+ },
+ {
+ title: '报警时间',
+ dataIndex: 'alarmTime',
+ key: 'alarmTime',
+ width: 150,
+ },
+ {
+ title: '报警传感器名称',
+ dataIndex: 'sensorName',
+ key: 'sensorName',
+ width: 150,
+ },
+ {
+ title: '报警类型',
+ dataIndex: 'alarmType',
+ key: 'alarmType',
+ width: 120,
+ },
+ {
+ title: '报警内容',
+ dataIndex: 'alarmContent',
+ key: 'alarmContent',
+ width: 200,
+ },
+ {
+ title: '优先级',
+ dataIndex: 'priority',
+ key: 'priority',
+ width: 80,
+ render: (text) => {
+ const colorMap = {
+ '高': '#FF4D4F',
+ '中': '#FAAD14',
+ '低': '#52C41A'
+ };
+ return {text};
+ }
+ },
+ {
+ title: '处理状态',
+ dataIndex: 'status',
+ key: 'status',
+ width: 100,
+ render: (text) => {
+ const statusMap = {
+ '未处理': { color: '#FF4D4F', bg: '#FFF2F0' },
+ '处理中': { color: '#FAAD14', bg: '#FFFBE6' },
+ '已处理': { color: '#52C41A', bg: '#F6FFED' }
+ };
+ const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
+ return (
+
+ {text}
+
+ );
+ }
+ },
+ {
+ title: '处理时间',
+ dataIndex: 'processTime',
+ key: 'processTime',
+ width: 150,
+ },
+ {
+ title: '处理人',
+ dataIndex: 'processor',
+ key: 'processor',
+ width: 100,
+ },
+ {
+ title: '操作',
+ key: 'action',
+ width: 120,
+ render: (_, record) => (
+
+
+
+ ),
+ },
+ ];
+
+ // 模拟数据
+ const mockData = [
+ {
+ key: '1',
+ id: '001',
+ alarmTime: '2024-01-15 08:30:25',
+ sensorName: 'LNG储罐',
+ alarmType: '温度超限',
+ alarmContent: '储罐温度超过安全阈值',
+ priority: '高',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '2',
+ id: '002',
+ alarmTime: '2024-01-15 09:15:10',
+ sensorName: 'LNG储罐',
+ alarmType: '压力异常',
+ alarmContent: '管道压力异常波动',
+ priority: '中',
+ status: '处理中',
+ processTime: '2024-01-15 09:20:00',
+ processor: '张三',
+ },
+ {
+ key: '3',
+ id: '003',
+ alarmTime: '2024-01-15 10:45:30',
+ sensorName: 'LNG储罐',
+ alarmType: '液位异常',
+ alarmContent: '储罐液位低于警戒线',
+ priority: '高',
+ status: '已处理',
+ processTime: '2024-01-15 11:00:15',
+ processor: '李四',
+ },
+ {
+ key: '4',
+ id: '004',
+ alarmTime: '2024-01-15 11:20:45',
+ sensorName: 'LNG储罐',
+ alarmType: '气体泄漏',
+ alarmContent: '检测到可燃气体泄漏',
+ priority: '高',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '5',
+ id: '005',
+ alarmTime: '2024-01-15 12:10:20',
+ sensorName: 'LNG储罐',
+ alarmType: '设备振动',
+ alarmContent: '设备异常振动',
+ priority: '低',
+ status: '已处理',
+ processTime: '2024-01-15 12:30:00',
+ processor: '王五',
+ },
+ {
+ key: '6',
+ id: '006',
+ alarmTime: '2024-01-15 13:25:15',
+ sensorName: 'LNG管道',
+ alarmType: '流量异常',
+ alarmContent: '管道流量异常波动',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '7',
+ id: '007',
+ alarmTime: '2024-01-15 14:10:30',
+ sensorName: 'LNG储罐',
+ alarmType: '温度异常',
+ alarmContent: '储罐温度异常升高',
+ priority: '高',
+ status: '处理中',
+ processTime: '2024-01-15 14:15:00',
+ processor: '赵六',
+ },
+ {
+ key: '8',
+ id: '008',
+ alarmTime: '2024-01-15 15:45:20',
+ sensorName: 'LNG管道',
+ alarmType: '压力超限',
+ alarmContent: '管道压力超过安全阈值',
+ priority: '高',
+ status: '已处理',
+ processTime: '2024-01-15 16:00:00',
+ processor: '孙七',
+ },
+ {
+ key: '9',
+ id: '009',
+ alarmTime: '2024-01-15 16:30:45',
+ sensorName: 'LNG储罐',
+ alarmType: '液位超限',
+ alarmContent: '储罐液位超过警戒线',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ {
+ key: '10',
+ id: '010',
+ alarmTime: '2024-01-15 17:15:10',
+ sensorName: 'LNG管道',
+ alarmType: '泄漏检测',
+ alarmContent: '检测到轻微气体泄漏',
+ priority: '低',
+ status: '已处理',
+ processTime: '2024-01-15 17:30:00',
+ processor: '周八',
+ },
+ {
+ key: '11',
+ id: '011',
+ alarmTime: '2024-01-15 18:20:35',
+ sensorName: 'LNG储罐',
+ alarmType: '设备故障',
+ alarmContent: '储罐阀门异常关闭',
+ priority: '高',
+ status: '处理中',
+ processTime: '2024-01-15 18:25:00',
+ processor: '吴九',
+ },
+ {
+ key: '12',
+ id: '012',
+ alarmTime: '2024-01-15 19:05:50',
+ sensorName: 'LNG管道',
+ alarmType: '温度异常',
+ alarmContent: '管道温度异常下降',
+ priority: '中',
+ status: '未处理',
+ processTime: '-',
+ processor: '-',
+ },
+ ];
+
+ // 初始化数据
+ useEffect(() => {
+ setPagination(prev => ({ ...prev, total: mockData.length }));
+ }, []);
+
+ // 根据分页获取当前页数据
+ const getCurrentPageData = () => {
+ const { current, pageSize } = pagination;
+ const startIndex = (current - 1) * pageSize;
+ const endIndex = startIndex + pageSize;
+ return mockData.slice(startIndex, endIndex);
+ };
+
+ // 表格选择变化
+ const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
+ setSelectedRowKeys(newSelectedRowKeys);
+ setSelectedRows(newSelectedRows);
+ };
+
+ // 分页变化处理
+ const handleTableChange = (pagination) => {
+ setPagination(prev => ({
+ ...prev,
+ current: pagination.current,
+ pageSize: pagination.pageSize,
+ }));
+ };
+
+ // 导出功能
+ const handleExport = () => {
+ console.log('导出数据');
+ // 这里可以添加导出逻辑
+ };
+
+ // 批量删除功能
+ const handleBatchDelete = () => {
+ if (selectedRowKeys.length === 0) {
+ console.log('没有选中任何行');
+ // 可以在这里添加提示用户选择行的逻辑
+ return;
+ }
+ console.log('批量删除', selectedRowKeys);
+ // 这里可以添加批量删除逻辑
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
总报警
+
1456
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
一级报警
+
357
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
二级报警
+
401
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
三级报警
+
556
+
+
+ 未处理 6
+
+
+ 处理中 10
+
+
+
+
+
+
+
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+
储罐液化装置区
+
R值: 1765
+
编号:XXXXXXXX
+
+
+
+
+
+ {/* 表格 */}
+
+ {/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
+
+
+
+
+
+
+
+
+
+ {/* 表格 5行10列 带页码 每页5条数据 */}
+
+
+ `共 ${total} 条`,
+ }}
+ scroll={{ x: 1200 }}
+ />
+
+
+
+
${data.name}
+
${item.status}
+
超标 ${item.exceedance}
+
大气环境特征污染物
+
+ {/* 顶部统计区域 */}
+
+ {/* 污染物排放统计 */}
+
+
+
污染物排放统计
+
+
+
+
+
+
+
+ {/*
超标污染物数量
*/}
+ {chartReady && (
+
+ )}
+
+
+
+ {/*
超标污染物种类
*/}
+ {chartReady && (
+
+ )}
+
+
+
+
+
+ {/* 超标排放统计 */}
+
+
+
超标排放统计
+
+
+
+
+
+
+ {chartReady && (
+
+ )}
+
+
+
+ {/* 环境分类卡片 */}
+
+
+
+
AIR POLLUSION
+
+
+
+
+
+
+
WATER POLLUSION
+
+
+
+
+
+
+
SOILPOLLUSION
+
+
+
+
+
+
+
+
+
+ {/* 污染源管理表格区域 */}
+
+
+
污染源管理
+
+ }
+ onClick={handleAdd}
+ className={styles.titleAddButton}
+ >
+ 新增
+
+ }
+ onClick={handleGenerateReport}
+ className={styles.titleReportButton}
+ >
+ 生成报表
+
+
+
+
+
({
+ name: record.name,
+ }),
+ }}
+ pagination={{
+ showTotal: (total, range) => `共 ${total} 条`,
+ showSizeChanger: true,
+ showQuickJumper: true,
+ pageSizeOptions: ['5', '10', '20', '50', '100'],
+ defaultPageSize: 5,
+ size: 'small',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 筛选条件
+
+
+ }
+ className={styles.queryBtn}
+ >
+ 查询
+
+ }
+ className={styles.resetBtn}
+ >
+ 重置
+
+ }
+ className={styles.uploadBtn}
+ >
+ 上传
+
+
+
+
+
+
+
+
+
+
+
2) 环保管理任务清单
+
依据排污许可证副本中的环保要求,提供生成环保管理要求任务清单;
+
环保任务清单包括:大气排放口信息,大气污染物有组织排放许可年限值,大气污染物无组织排放年限制、企业大气排放总许可量;废水排放口、废水污染物排放许可限制;固体废物排放信息、自行贮存和自行利用/处置设施信息;工业噪声排放信息;
+
环境管理要求包括:自行检测及记录表、环境管理台账记录。
+
+
+
+
+ 共85条
+
+
+
+
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+
+
+ {/* 第一块：搜索表单 */}
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ }
+ }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 导入
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+
+
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：搜索表单 */}
+
+
+
+
+ {/* 第二块：表格区域 */}
+
+
+ {/* 法规合规管理块1 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-24
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块2 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-25
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块3 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-26
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块4 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-27
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块5 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-28
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块6 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-29
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块7 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-30
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块8 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-08-31
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块9 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-01
+
+
+ 发布部门 环保部门名称9
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块10 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-02
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块11 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-03
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+ {/* 法规合规管理块12 */}
+
+ {/* 第一行：法规名称 */}
+
+
+ 2025排污许可条例
+
+
+ {/* 第二行：发布时间和发布部门 */}
+
+
+ 发布时间 2025-09-04
+
+
+ 发布部门 环保部门名称
+
+
+
+ {/* 第三行：操作按钮 */}
+
+
showDrawer(mockRegulationDetail)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+
+
+
+
+
+ {/* 静态分页组件 */}
+
+
+ 共85条
+ {/* */}
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+
+
+
+ {/* 抽屉详情 */}
+
+ {selectedRegulation && (
+
+
+ {selectedRegulation.name}
+
+
+ {selectedRegulation.publishDate}
+
+
+ {selectedRegulation.department}
+
+
+ {selectedRegulation.status}
+
+
+ {selectedRegulation.category}
+
+
+ {selectedRegulation.version}
+
+
+ {selectedRegulation.updateTime}
+
+
+
+ {selectedRegulation.content}
+
+
+
+ )}
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 上传
+
+ }
+ onClick={() => handleBatchOperation('下载')}
+ className={styles.importButton}
+ disabled={selectedRowKeys.length === 0}
+ >
+ 批量下载
+
+ {/* */}
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
+ {/* 第一块：操作按钮和筛选条件 */}
+
+
+ }
+ onClick={handleAdd}
+ className={styles.addButton}
+ >
+ 新增
+
+ }
+ onClick={handleImport}
+ className={styles.importButton}
+ >
+ 上传
+
+ }
+ onClick={() => handleBatchOperation('下载')}
+ className={styles.importButton}
+ disabled={selectedRowKeys.length === 0}
+ >
+ 批量下载
+
+ {/* */}
+
+
+
+ 筛选条件
+
+
+
+
+
+
+
+
+ {/* 第二块：表格 */}
+
+ `共 ${total} 条`,
+ showSizeChanger: false,
+ }
+ }}
+ onChange={handleTableChange}
+ scroll={{ x: 3000 }}
+ />
+
+
+ {/* 图片弹窗 */}
+
setIsModalVisible(false)}
+ footer={null}
+ closeIcon={}
+ width="auto"
+ centered
+ styles={{
+ mask: { backgroundColor: '#10101080' },
+ content: { padding: 0, background: 'transparent', boxShadow: 'none' }
+ }}
+ >
+ {currentImage && }
+
+
}
return item.icon;
@@ -87,6 +95,12 @@ const SystemContentList = (props) => {
setMenuItems(newList)
const fixedMenuItems = [
+ {
+ "path": "/topnavbar00/business/emergencyResource",
+ icon: 
,
+ "key": "/topnavbar00/business/emergencyResource",
+ "label": "应急资源管理"
+ },
{
"path": "/topnavbar00/business/basicinformation",
icon: 
,
@@ -191,6 +205,7 @@ const SystemContentList = (props) => {