From ba305312c9685e88b8533ed48411c797089a23eb Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Wed, 15 Oct 2025 09:24:44 +0800
Subject: [PATCH] fix:

---
 config/routes.js                              |   6 +
 .../components/AtmospherePollutantLibrary.js  | 337 ++++++++++++++++++
 .../AtmospherePollutantLibrary.less           | 166 +++++++++
 .../components/PollutionSourceManagement.js   |  10 +-
 .../nav_system_content/SystemContentList.js   |  15 +
 src/pages/topnavbar/TopNavBar.js              |   5 +
 6 files changed, 536 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/business_envInformation/components/AtmospherePollutantLibrary.js
 create mode 100644 src/pages/business_envInformation/components/AtmospherePollutantLibrary.less

diff --git a/config/routes.js b/config/routes.js
index 3aa5bb8..eefca20 100644
--- a/config/routes.js
+++ b/config/routes.js
@@ -30,6 +30,12 @@ export default [
                         name: 'envInformation',
                         component: './business_envInformation/EnvInformation',
                     },
+                    // 环保信息内隐藏菜单 ： 大气污染特征污染物名录库
+                    {
+                        path: '/topnavbar00/business/atmospherePollutantLibrary',
+                        name: 'atmospherePollutantLibrary',
+                        component: './business_envInformation/components/AtmospherePollutantLibrary',
+                    },
                     // 安全管理基础信息
                     {
                         path: '/topnavbar00/business/basicinformation',
diff --git a/src/pages/business_envInformation/components/AtmospherePollutantLibrary.js b/src/pages/business_envInformation/components/AtmospherePollutantLibrary.js
new file mode 100644
index 0000000..693905a
--- /dev/null
+++ b/src/pages/business_envInformation/components/AtmospherePollutantLibrary.js
@@ -0,0 +1,337 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Table, Input, Space, Tooltip, message, Card, Row, Col, Select } from 'antd';
+import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, ArrowLeftOutlined } from '@ant-design/icons';
+import { history } from 'umi';
+import StandardTable from '@/components/StandardTable';
+import styles from './AtmospherePollutantLibrary.less';
+
+const { Option } = Select;
+
+const AtmospherePollutantLibrary = () => {
+    const [loading, setLoading] = useState(false);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [tableData, setTableData] = useState({
+        list: [],
+        pagination: {
+            current: 1,
+            pageSize: 10,
+            total: 0
+        }
+    });
+
+    // 表格列定义
+    const columns = [
+        {
+            title: '污染物名称',
+            dataIndex: 'pollutantName',
+            key: 'pollutantName',
+            width: 150,
+        },
+        {
+            title: '污染物代码',
+            dataIndex: 'pollutantCode',
+            key: 'pollutantCode',
+            width: 120,
+        },
+        {
+            title: '污染物类型',
+            dataIndex: 'pollutantType',
+            key: 'pollutantType',
+            width: 120,
+        },
+        {
+            title: 'CAS号',
+            dataIndex: 'casNumber',
+            key: 'casNumber',
+            width: 120,
+        },
+        {
+            title: '分子式',
+            dataIndex: 'molecularFormula',
+            key: 'molecularFormula',
+            width: 120,
+        },
+        {
+            title: '分子量',
+            dataIndex: 'molecularWeight',
+            key: 'molecularWeight',
+            width: 100,
+        },
+        {
+            title: '排放标准',
+            dataIndex: 'emissionStandard',
+            key: 'emissionStandard',
+            width: 120,
+        },
+        {
+            title: '监测方法',
+            dataIndex: 'monitoringMethod',
+            key: 'monitoringMethod',
+            width: 150,
+        },
+        {
+            title: '危害特性',
+            dataIndex: 'hazardCharacteristics',
+            key: 'hazardCharacteristics',
+            width: 200,
+            ellipsis: true,
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 120,
+            render: (_, record) => (
+                <Space size="middle">
+                    <Tooltip title="编辑">
+                        <EditOutlined
+                            style={{ color: '#1890ff', cursor: 'pointer' }}
+                            onClick={() => handleEdit(record)}
+                        />
+                    </Tooltip>
+                    <Tooltip title="删除">
+                        <DeleteOutlined
+                            style={{ color: '#ff4d4f', cursor: 'pointer' }}
+                            onClick={() => handleDelete(record)}
+                        />
+                    </Tooltip>
+                </Space>
+            ),
+        },
+    ];
+
+    // 模拟表格数据
+    const mockTableData = [
+        {
+            key: '1',
+            pollutantName: '二氧化硫',
+            pollutantCode: 'SO2',
+            pollutantType: '气态污染物',
+            casNumber: '7446-09-5',
+            molecularFormula: 'SO2',
+            molecularWeight: '64.07',
+            emissionStandard: 'GB 16297-1996',
+            monitoringMethod: '定电位电解法',
+            hazardCharacteristics: '刺激性气体，对呼吸道有强烈刺激作用'
+        },
+        {
+            key: '2',
+            pollutantName: '氮氧化物',
+            pollutantCode: 'NOx',
+            pollutantType: '气态污染物',
+            casNumber: '10102-43-9',
+            molecularFormula: 'NO2',
+            molecularWeight: '46.01',
+            emissionStandard: 'GB 16297-1996',
+            monitoringMethod: '化学发光法',
+            hazardCharacteristics: '刺激性气体，可引起肺水肿'
+        },
+        {
+            key: '3',
+            pollutantName: '颗粒物',
+            pollutantCode: 'PM10',
+            pollutantType: '颗粒物',
+            casNumber: '-',
+            molecularFormula: '-',
+            molecularWeight: '-',
+            emissionStandard: 'GB 16297-1996',
+            monitoringMethod: '重量法',
+            hazardCharacteristics: '可吸入颗粒物，影响呼吸系统'
+        },
+        {
+            key: '4',
+            pollutantName: '一氧化碳',
+            pollutantCode: 'CO',
+            pollutantType: '气态污染物',
+            casNumber: '630-08-0',
+            molecularFormula: 'CO',
+            molecularWeight: '28.01',
+            emissionStandard: 'GB 16297-1996',
+            monitoringMethod: '非分散红外法',
+            hazardCharacteristics: '无色无味气体，与血红蛋白结合影响氧运输'
+        },
+        {
+            key: '5',
+            pollutantName: '挥发性有机物',
+            pollutantCode: 'VOCs',
+            pollutantType: '有机污染物',
+            casNumber: '-',
+            molecularFormula: '-',
+            molecularWeight: '-',
+            emissionStandard: 'GB 16297-1996',
+            monitoringMethod: '气相色谱法',
+            hazardCharacteristics: '具有挥发性，部分具有致癌性'
+        },
+        {
+            key: '6',
+            pollutantName: '苯',
+            pollutantCode: 'C6H6',
+            pollutantType: '有机污染物',
+            casNumber: '71-43-2',
+            molecularFormula: 'C6H6',
+            molecularWeight: '78.11',
+            emissionStandard: 'GB 16297-1996',
+            monitoringMethod: '气相色谱法',
+            hazardCharacteristics: '致癌物质，长期接触可导致白血病'
+        },
+        {
+            key: '7',
+            pollutantName: '甲苯',
+            pollutantCode: 'C7H8',
+            pollutantType: '有机污染物',
+            casNumber: '108-88-3',
+            molecularFormula: 'C7H8',
+            molecularWeight: '92.14',
+            emissionStandard: 'GB 16297-1996',
+            monitoringMethod: '气相色谱法',
+            hazardCharacteristics: '神经毒性，影响中枢神经系统'
+        },
+        {
+            key: '8',
+            pollutantName: '二甲苯',
+            pollutantCode: 'C8H10',
+            pollutantType: '有机污染物',
+            casNumber: '1330-20-7',
+            molecularFormula: 'C8H10',
+            molecularWeight: '106.17',
+            emissionStandard: 'GB 16297-1996',
+            monitoringMethod: '气相色谱法',
+            hazardCharacteristics: '神经毒性，长期接触可影响造血系统'
+        }
+    ];
+
+    useEffect(() => {
+        setTableData({
+            list: mockTableData,
+            pagination: {
+                current: 1,
+                pageSize: 10,
+                total: mockTableData.length
+            }
+        });
+    }, []);
+
+    // 处理编辑操作
+    const handleEdit = (record) => {
+        message.info(`编辑 ${record.pollutantName} 功能开发中`);
+    };
+
+    // 处理删除操作
+    const handleDelete = (record) => {
+        message.success(`删除 ${record.pollutantName} 成功`);
+    };
+
+    // 处理新增操作
+    const handleAdd = () => {
+        message.info('新增功能开发中');
+    };
+
+    // 处理表格变化
+    const handleTableChange = (pagination) => {
+        setTableData(prev => ({
+            ...prev,
+            pagination: {
+                ...prev.pagination,
+                current: pagination.current,
+                pageSize: pagination.pageSize
+            }
+        }));
+    };
+
+    // 处理搜索
+    const handleSearch = (value) => {
+        message.info(`搜索: ${value}`);
+    };
+
+    // 处理返回操作
+    const handleBack = () => {
+        history.goBack();
+    };
+
+    return (
+        <div className={styles.atmospherePollutantLibrary}>
+            {/* 页面头部 */}
+            <div className={styles.pageHeader}>
+                <div className={styles.headerLeft}>
+                    <Button 
+                        type="text" 
+                        icon={<ArrowLeftOutlined />} 
+                        onClick={handleBack}
+                        className={styles.backButton}
+                    >
+                        返回
+                    </Button>
+                    <div className={styles.pageTitle}>
+                        <h1>大气污染特征污染物名录库</h1>
+                        <p>待开发暂定</p>
+                    </div>
+                </div>
+            </div>
+
+            {/* 搜索和操作区域 */}
+            <Card className={styles.searchCard}>
+                <Row gutter={16} align="middle">
+                    <Col span={6}>
+                        <Input.Search
+                            placeholder="请输入污染物名称或代码"
+                            allowClear
+                            enterButton={<SearchOutlined />}
+                            onSearch={handleSearch}
+                            className={styles.searchInput}
+                        />
+                    </Col>
+                    <Col span={4}>
+                        <Select placeholder="污染物类型" allowClear className={styles.filterSelect}>
+                            <Option value="气态污染物">气态污染物</Option>
+                            <Option value="颗粒物">颗粒物</Option>
+                            <Option value="有机污染物">有机污染物</Option>
+                        </Select>
+                    </Col>
+                    <Col span={4}>
+                        <Select placeholder="排放标准" allowClear className={styles.filterSelect}>
+                            <Option value="GB 16297-1996">GB 16297-1996</Option>
+                            <Option value="GB 3095-2012">GB 3095-2012</Option>
+                        </Select>
+                    </Col>
+                    <Col span={4} offset={6}>
+                        <Button
+                            type="primary"
+                            icon={<PlusOutlined />}
+                            onClick={handleAdd}
+                            className={styles.addButton}
+                        >
+                            新增污染物
+                        </Button>
+                    </Col>
+                </Row>
+            </Card>
+
+            {/* 数据表格 */}
+            <Card className={styles.tableCard}>
+                <StandardTable
+                    columns={columns}
+                    data={tableData}
+                    onChange={handleTableChange}
+                    rowKey="key"
+                    size="small"
+                    rowSelection={{
+                        selectedRowKeys,
+                        onChange: setSelectedRowKeys,
+                        getCheckboxProps: (record) => ({
+                            name: record.pollutantName,
+                        }),
+                    }}
+                    pagination={{
+                        showTotal: (total, range) => `共 ${total} 条`,
+                        showSizeChanger: true,
+                        showQuickJumper: true,
+                        pageSizeOptions: ['10', '20', '50', '100'],
+                        defaultPageSize: 10,
+                        size: 'small',
+                    }}
+                />
+            </Card>
+        </div>
+    );
+};
+
+export default AtmospherePollutantLibrary;
diff --git a/src/pages/business_envInformation/components/AtmospherePollutantLibrary.less b/src/pages/business_envInformation/components/AtmospherePollutantLibrary.less
new file mode 100644
index 0000000..c31d65c
--- /dev/null
+++ b/src/pages/business_envInformation/components/AtmospherePollutantLibrary.less
@@ -0,0 +1,166 @@
+.atmospherePollutantLibrary {
+  padding: 24px;
+  background: #f5f5f5;
+  min-height: 100vh;
+
+  .pageHeader {
+    margin-bottom: 24px;
+    background: #fff;
+    padding: 24px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    .headerLeft {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      .backButton {
+        color: #1890ff;
+        font-size: 16px;
+        padding: 8px 16px;
+        height: auto;
+        border: 1px solid #d9d9d9;
+        border-radius: 6px;
+        transition: all 0.3s;
+
+        &:hover {
+          color: #40a9ff;
+          border-color: #40a9ff;
+          background: #f0f8ff;
+        }
+      }
+
+      .pageTitle {
+        h1 {
+          margin: 0;
+          font-size: 24px;
+          font-weight: 600;
+          color: #262626;
+          line-height: 1.4;
+        }
+
+        p {
+          margin: 8px 0 0 0;
+          font-size: 14px;
+          color: #8c8c8c;
+          line-height: 1.4;
+        }
+      }
+    }
+  }
+
+  .searchCard {
+    margin-bottom: 24px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    .searchInput {
+      .ant-input-search-button {
+        background: #1890ff;
+        border-color: #1890ff;
+
+        &:hover {
+          background: #40a9ff;
+          border-color: #40a9ff;
+        }
+      }
+    }
+
+    .filterSelect {
+      width: 100%;
+    }
+
+    .addButton {
+      background: #52c41a;
+      border-color: #52c41a;
+      font-weight: 500;
+
+      &:hover {
+        background: #73d13d;
+        border-color: #73d13d;
+      }
+    }
+  }
+
+  .tableCard {
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    :global(.ant-table) {
+      .ant-table-thead > tr > th {
+        background: #fafafa;
+        font-weight: 600;
+        color: #262626;
+        border-bottom: 2px solid #f0f0f0;
+      }
+
+      .ant-table-tbody > tr > td {
+        border-bottom: 1px solid #f0f0f0;
+      }
+
+      .ant-table-tbody > tr:hover > td {
+        background: #f5f5f5;
+      }
+    }
+
+    :global(.ant-pagination) {
+      margin-top: 16px;
+      text-align: right;
+
+      .ant-pagination-total-text {
+        color: #8c8c8c;
+        font-size: 14px;
+      }
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    padding: 16px;
+
+    .pageHeader {
+      padding: 16px;
+
+      .headerLeft {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+
+        .pageTitle h1 {
+          font-size: 20px;
+        }
+      }
+    }
+
+    .searchCard {
+      :global(.ant-row) {
+        .ant-col {
+          margin-bottom: 12px;
+        }
+      }
+    }
+  }
+
+  // 表格操作按钮样式
+  :global(.ant-table-tbody) {
+    .anticon {
+      font-size: 16px;
+      transition: all 0.3s;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  // 卡片阴影效果
+  .searchCard,
+  .tableCard {
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.js b/src/pages/business_envInformation/components/PollutionSourceManagement.js
index 299f9be..b87d4b0 100644
--- a/src/pages/business_envInformation/components/PollutionSourceManagement.js
+++ b/src/pages/business_envInformation/components/PollutionSourceManagement.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Select, Button, Table, Input, Space, Tooltip, message } from 'antd';
 import { SearchOutlined, PlusOutlined, FileTextOutlined, DeleteOutlined, EditOutlined, MoreOutlined, RobotOutlined } from '@ant-design/icons';
 import ReactECharts from 'echarts-for-react';
+import { history } from 'umi';
 import StandardTable from '@/components/StandardTable';
 import styles from './PollutionSourceManagement.less';
 import icon_water from '@/assets/business_envinformation/icon_water.svg';
@@ -467,6 +468,11 @@ const PollutionSourceManagement = () => {
         }));
     };
 
+    // 处理大气环境卡片点击
+    const handleAtmosphereCardClick = () => {
+        history.push('/topnavbar00/business/atmospherePollutantLibrary');
+    };
+
 
     return (
         <div className={styles.pollutionDashboard}>
@@ -552,12 +558,10 @@ const PollutionSourceManagement = () => {
                 {/* 环境分类卡片 */}
                 <div className={styles.environmentalCategories}>
 
-                    <div className={styles.categoryCard1}>
+                    <div className={styles.categoryCard1} onClick={handleAtmosphereCardClick}>
                         <div className={styles.airPollutionText}>AIR POLLUSION</div>
                         <div className={styles.categoryContent}>
                             <div className={styles.categoryInfo}>
-
-
                                 <div className={styles.titleContainer}>
                                     <div className={`${styles.categoryTitle} ${styles.atmosphereGradient}`}>大气环境</div>
                                     <div className={`${styles.categoryTitle} ${styles.atmosphereMirror}`}>大气环境</div>
diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js
index da5eb18..d30e6a6 100644
--- a/src/pages/nav_system_content/SystemContentList.js
+++ b/src/pages/nav_system_content/SystemContentList.js
@@ -102,6 +102,21 @@ const SystemContentList = (props) => {
                 "key": "/topnavbar00/business/envInformation",
                 "label": "环保信息管理"
             },
+            {
+                "path": "/topnavbar00/business/atmospherePollutantLibrary",
+                icon: <img 
+                    src={inforicon} 
+                    alt="大气污染特征污染物名录库" 
+                    style={{ 
+                        width: '16px', 
+                        height: '16px',
+                        opacity: selectedKey.includes('/topnavbar00/business/atmospherePollutantLibrary') ? 1 : 0.6
+                    }} 
+                />,
+                "key": "/topnavbar00/business/atmospherePollutantLibrary",
+                "label": "大气污染特征污染物名录库",
+                "hideInMenu": true  // 隐藏菜单，但允许路由匹配
+            },
             {
                 "path": "/topnavbar00/business/basicinformation",
                 icon: <img src={fireHydrant1} alt="安全管理基础信息" style={{ width: '16px', height: '16px' }} />,
diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js
index 3d95df7..06de15c 100644
--- a/src/pages/topnavbar/TopNavBar.js
+++ b/src/pages/topnavbar/TopNavBar.js
@@ -12,6 +12,11 @@ const menuItem = [
     label: '环保信息管理',
     key: '/topnavbar00/business/envInformation',
   },
+  // 环保信息内隐藏菜单 ： 大气污染特征污染物名录库
+  {
+    label: '大气污染特征污染物名录库',
+    key: '/topnavbar00/business/atmospherePollutantLibrary',
+  },
   {
     label: '安全管理基础信息',
     key: '/topnavbar00/business/basicinformation',