From 891ec936288b02b37c03f4bcd5fe56533598ac31 Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Wed, 15 Oct 2025 11:27:10 +0800 Subject: [PATCH] =?UTF-8?q?=E7=8E=AF=E4=BF=9D=E9=A1=B5=E9=9D=A2=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_envinformation/icon_add.svg | 10 + .../components/AtmospherePollutantLibrary.js | 690 +++++++++++------- .../AtmospherePollutantLibrary.less | 312 ++++---- .../components/PollutionSourceManagement.js | 2 +- .../nav_system_content/SystemContentList.js | 23 +- src/pages/topnavbar/TopNavBar.js | 14 +- 6 files changed, 646 insertions(+), 405 deletions(-) create mode 100644 src/assets/business_envinformation/icon_add.svg diff --git a/src/assets/business_envinformation/icon_add.svg b/src/assets/business_envinformation/icon_add.svg new file mode 100644 index 0000000..e422e92 --- /dev/null +++ b/src/assets/business_envinformation/icon_add.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/pages/business_envInformation/components/AtmospherePollutantLibrary.js b/src/pages/business_envInformation/components/AtmospherePollutantLibrary.js index 693905a..a16f589 100644 --- a/src/pages/business_envInformation/components/AtmospherePollutantLibrary.js +++ b/src/pages/business_envInformation/components/AtmospherePollutantLibrary.js @@ -1,335 +1,511 @@ -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 React, { useState } from 'react'; +import { Form, Input, Button, DatePicker, Space, Modal, Select } from 'antd'; +import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined, PlusOutlined, UploadOutlined, EditOutlined, DownloadOutlined } from '@ant-design/icons'; import StandardTable from '@/components/StandardTable'; import styles from './AtmospherePollutantLibrary.less'; - -const { Option } = Select; +import licence1 from '@/assets/business_envinformation/image1.svg'; +import licence2 from '@/assets/business_envinformation/image2.svg'; +import viewicon from '@/assets/business_envinformation/viewicon.svg'; +import editicon from '@/assets/business_envinformation/editicon.svg'; +import downloadicon from '@/assets/business_envinformation/downloadicon.svg'; +import deleteicon from '@/assets/business_envinformation/deleteicon.svg'; +import icon_add from '@/assets/business_envinformation/icon_add.svg'; const AtmospherePollutantLibrary = () => { - const [loading, setLoading] = useState(false); - const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [tableData, setTableData] = useState({ - list: [], - pagination: { - current: 1, - pageSize: 10, - total: 0 - } + const [form] = Form.useForm(); + const [isModalVisible, setIsModalVisible] = useState(false); + const [currentImage, setCurrentImage] = useState(null); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 10, + total: 19, }); - - // 表格列定义 - const columns = [ + const [selectedRowKeys, setSelectedRowKeys] = useState([]); + const [dataSource, setDataSource] = useState([ { - title: '污染物名称', - dataIndex: 'pollutantName', - key: 'pollutantName', - width: 150, + key: 1, + serialNumber: 1, + pollutantName: '对乙酰氨基酚栓', + category: 25, + mainFeatures: '在接受调查的19为华尔街分析师...', + monitoringPoint: 1.25, + emittingEnterprise: '每日协通(北京)咨询有限公司', + monthlyEmission: 4.6, + quarterlyEmission: 4.6, + yearlyEmission: 5.0, }, { - title: '污染物代码', - dataIndex: 'pollutantCode', - key: 'pollutantCode', - width: 120, + key: 2, + serialNumber: 2, + pollutantName: '萘普生缓释胶囊(适洛特)', + category: 27, + mainFeatures: '热到融化的马路、无穷无尽的野火...', + monitoringPoint: 1.25, + emittingEnterprise: '赢王科技有限公司', + monthlyEmission: 1.1, + quarterlyEmission: 1.1, + yearlyEmission: 1.8, }, { - title: '污染物类型', - dataIndex: 'pollutantType', - key: 'pollutantType', - width: 120, + key: 3, + serialNumber: 3, + pollutantName: '复方感冒灵片', + category: 44, + mainFeatures: '从病虫害探测、土壤墒情监测智能...', + monitoringPoint: 1.25, + emittingEnterprise: '北京福商商务服务有限公司', + monthlyEmission: 2.4, + quarterlyEmission: 2.4, + yearlyEmission: 5.0, }, { - title: 'CAS号', - dataIndex: 'casNumber', - key: 'casNumber', - width: 120, + key: 4, + serialNumber: 4, + pollutantName: '红药片', + category: 21, + mainFeatures: '近日,有科普博主发帖称,某社交...', + monitoringPoint: 1.25, + emittingEnterprise: '实华国际租赁有限公司', + monthlyEmission: 3.6, + quarterlyEmission: 3.6, + yearlyEmission: 4.7, }, { - title: '分子式', - dataIndex: 'molecularFormula', - key: 'molecularFormula', - width: 120, + key: 5, + serialNumber: 5, + pollutantName: '布洛芬混悬液(翔宇赛可)', + category: 56, + mainFeatures: '在七八十年代,这种面料做成的服...', + monitoringPoint: 1.25, + emittingEnterprise: '北京冠钧财经策划有限公司', + monthlyEmission: 3.0, + quarterlyEmission: 3.0, + yearlyEmission: 4.7, }, { - title: '分子量', - dataIndex: 'molecularWeight', - key: 'molecularWeight', - width: 100, + key: 6, + serialNumber: 6, + pollutantName: '阿莫西林胶囊', + category: 32, + mainFeatures: '抗生素类药物，用于治疗细菌感染...', + monitoringPoint: 1.15, + emittingEnterprise: '华北制药集团有限责任公司', + monthlyEmission: 2.8, + quarterlyEmission: 2.8, + yearlyEmission: 3.5, }, { - title: '排放标准', - dataIndex: 'emissionStandard', - key: 'emissionStandard', - width: 120, + key: 7, + serialNumber: 7, + pollutantName: '头孢拉定胶囊', + category: 28, + mainFeatures: '头孢类抗生素，广谱抗菌药物...', + monitoringPoint: 1.30, + emittingEnterprise: '石药集团欧意药业有限公司', + monthlyEmission: 1.9, + quarterlyEmission: 1.9, + yearlyEmission: 2.3, }, { - title: '监测方法', - dataIndex: 'monitoringMethod', - key: 'monitoringMethod', - width: 150, + key: 8, + serialNumber: 8, + pollutantName: '复方甘草片', + category: 35, + mainFeatures: '镇咳祛痰药物，含有甘草提取物...', + monitoringPoint: 1.20, + emittingEnterprise: '太极集团重庆桐君阁药厂有限公司', + monthlyEmission: 3.2, + quarterlyEmission: 3.2, + yearlyEmission: 4.1, }, { - title: '危害特性', - dataIndex: 'hazardCharacteristics', - key: 'hazardCharacteristics', - width: 200, - ellipsis: true, + key: 9, + serialNumber: 9, + pollutantName: '板蓝根颗粒', + category: 41, + mainFeatures: '清热解毒，凉血利咽的中成药...', + monitoringPoint: 1.10, + emittingEnterprise: '广州白云山和记黄埔中药有限公司', + monthlyEmission: 4.5, + quarterlyEmission: 4.5, + yearlyEmission: 5.8, }, { - title: '操作', - key: 'action', - width: 120, + key: 10, + serialNumber: 10, + pollutantName: '维生素C片', + category: 22, + mainFeatures: '补充维生素C，增强免疫力...', + monitoringPoint: 1.35, + emittingEnterprise: '华润三九医药股份有限公司', + monthlyEmission: 2.1, + quarterlyEmission: 2.1, + yearlyEmission: 2.7, + }, + { + key: 11, + serialNumber: 11, + pollutantName: '感冒清热颗粒', + category: 38, + mainFeatures: '疏风散寒，解表清热的中成药...', + monitoringPoint: 1.25, + emittingEnterprise: '北京同仁堂股份有限公司', + monthlyEmission: 3.7, + quarterlyEmission: 3.7, + yearlyEmission: 4.9, + }, + { + key: 12, + serialNumber: 12, + pollutantName: '双氯芬酸钠缓释片', + category: 29, + mainFeatures: '非甾体抗炎药，用于缓解疼痛...', + monitoringPoint: 1.18, + emittingEnterprise: '扬子江药业集团有限公司', + monthlyEmission: 1.6, + quarterlyEmission: 1.6, + yearlyEmission: 2.0, + }, + { + key: 13, + serialNumber: 13, + pollutantName: '藿香正气水', + category: 43, + mainFeatures: '解表化湿，理气和中的中成药...', + monitoringPoint: 1.22, + emittingEnterprise: '云南白药集团股份有限公司', + monthlyEmission: 2.9, + quarterlyEmission: 2.9, + yearlyEmission: 3.8, + }, + { + key: 14, + serialNumber: 14, + pollutantName: '蒙脱石散', + category: 26, + mainFeatures: '止泻药物，保护胃肠黏膜...', + monitoringPoint: 1.28, + emittingEnterprise: '博福-益普生制药有限公司', + monthlyEmission: 1.4, + quarterlyEmission: 1.4, + yearlyEmission: 1.9, + }, + { + key: 15, + serialNumber: 15, + pollutantName: '复方丹参片', + category: 37, + mainFeatures: '活血化瘀，理气止痛的中成药...', + monitoringPoint: 1.16, + emittingEnterprise: '天津中新药业集团股份有限公司', + monthlyEmission: 3.3, + quarterlyEmission: 3.3, + yearlyEmission: 4.2, + }, + { + key: 16, + serialNumber: 16, + pollutantName: '奥美拉唑肠溶胶囊', + category: 31, + mainFeatures: '质子泵抑制剂，治疗胃溃疡...', + monitoringPoint: 1.33, + emittingEnterprise: '阿斯利康制药有限公司', + monthlyEmission: 2.2, + quarterlyEmission: 2.2, + yearlyEmission: 2.8, + }, + { + key: 17, + serialNumber: 17, + pollutantName: '六味地黄丸', + category: 45, + mainFeatures: '滋阴补肾的经典中成药...', + monitoringPoint: 1.12, + emittingEnterprise: '仲景宛西制药股份有限公司', + monthlyEmission: 4.1, + quarterlyEmission: 4.1, + yearlyEmission: 5.3, + }, + { + key: 18, + serialNumber: 18, + pollutantName: '阿司匹林肠溶片', + category: 24, + mainFeatures: '解热镇痛抗炎药，预防血栓...', + monitoringPoint: 1.27, + emittingEnterprise: '拜耳医药保健有限公司', + monthlyEmission: 1.8, + quarterlyEmission: 1.8, + yearlyEmission: 2.4, + }, + { + key: 19, + serialNumber: 19, + pollutantName: '复方黄连素片', + category: 39, + mainFeatures: '清热燥湿，行气止痛的中成药...', + monitoringPoint: 1.21, + emittingEnterprise: '哈药集团三精制药有限公司', + monthlyEmission: 2.6, + quarterlyEmission: 2.6, + yearlyEmission: 3.4, + }, + ]); + + const getCurrentPageData = () => { + const { current, pageSize } = pagination; + const start = (current - 1) * pageSize; + const end = start + pageSize; + return dataSource.slice(start, end); + }; + + const columns = [ + { + title: ( + 0} + onChange={(e) => handleSelectAll(e.target.checked)} + /> + ), + key: 'selection', + width: 60, + align: 'center', + fixed: 'left', render: (_, record) => ( - - - handleEdit(record)} - /> - - - handleDelete(record)} - /> - - + { + if (e.target.checked) { + setSelectedRowKeys([...selectedRowKeys, record.key]); + } else { + setSelectedRowKeys(selectedRowKeys.filter(key => key !== record.key)); + } + }} + /> ), }, - ]; - - // 模拟表格数据 - const mockTableData = [ { - key: '1', - pollutantName: '二氧化硫', - pollutantCode: 'SO2', - pollutantType: '气态污染物', - casNumber: '7446-09-5', - molecularFormula: 'SO2', - molecularWeight: '64.07', - emissionStandard: 'GB 16297-1996', - monitoringMethod: '定电位电解法', - hazardCharacteristics: '刺激性气体，对呼吸道有强烈刺激作用' + title: '序号', + dataIndex: 'serialNumber', + key: 'serialNumber', + width: 80, + align: 'center', }, { - key: '2', - pollutantName: '氮氧化物', - pollutantCode: 'NOx', - pollutantType: '气态污染物', - casNumber: '10102-43-9', - molecularFormula: 'NO2', - molecularWeight: '46.01', - emissionStandard: 'GB 16297-1996', - monitoringMethod: '化学发光法', - hazardCharacteristics: '刺激性气体，可引起肺水肿' + title: '特征污染物名称', + dataIndex: 'pollutantName', + key: 'pollutantName', + width: 200, + align: 'center', }, { - key: '3', - pollutantName: '颗粒物', - pollutantCode: 'PM10', - pollutantType: '颗粒物', - casNumber: '-', - molecularFormula: '-', - molecularWeight: '-', - emissionStandard: 'GB 16297-1996', - monitoringMethod: '重量法', - hazardCharacteristics: '可吸入颗粒物，影响呼吸系统' + title: '种类', + dataIndex: 'category', + key: 'category', + width: 100, + align: 'center', }, { - key: '4', - pollutantName: '一氧化碳', - pollutantCode: 'CO', - pollutantType: '气态污染物', - casNumber: '630-08-0', - molecularFormula: 'CO', - molecularWeight: '28.01', - emissionStandard: 'GB 16297-1996', - monitoringMethod: '非分散红外法', - hazardCharacteristics: '无色无味气体，与血红蛋白结合影响氧运输' + title: '主要特征', + dataIndex: 'mainFeatures', + key: 'mainFeatures', + width: 300, }, { - key: '5', - pollutantName: '挥发性有机物', - pollutantCode: 'VOCs', - pollutantType: '有机污染物', - casNumber: '-', - molecularFormula: '-', - molecularWeight: '-', - emissionStandard: 'GB 16297-1996', - monitoringMethod: '气相色谱法', - hazardCharacteristics: '具有挥发性，部分具有致癌性' + title: '环境监测点', + dataIndex: 'monitoringPoint', + key: 'monitoringPoint', + width: 120, + align: 'center', }, { - key: '6', - pollutantName: '苯', - pollutantCode: 'C6H6', - pollutantType: '有机污染物', - casNumber: '71-43-2', - molecularFormula: 'C6H6', - molecularWeight: '78.11', - emissionStandard: 'GB 16297-1996', - monitoringMethod: '气相色谱法', - hazardCharacteristics: '致癌物质，长期接触可导致白血病' + title: '排放企业', + dataIndex: 'emittingEnterprise', + key: 'emittingEnterprise', + width: 200, }, { - key: '7', - pollutantName: '甲苯', - pollutantCode: 'C7H8', - pollutantType: '有机污染物', - casNumber: '108-88-3', - molecularFormula: 'C7H8', - molecularWeight: '92.14', - emissionStandard: 'GB 16297-1996', - monitoringMethod: '气相色谱法', - hazardCharacteristics: '神经毒性，影响中枢神经系统' + title: '本月排放量', + dataIndex: 'monthlyEmission', + key: 'monthlyEmission', + width: 120, + align: 'center', }, { - key: '8', - pollutantName: '二甲苯', - pollutantCode: 'C8H10', - pollutantType: '有机污染物', - casNumber: '1330-20-7', - molecularFormula: 'C8H10', - molecularWeight: '106.17', - emissionStandard: 'GB 16297-1996', - monitoringMethod: '气相色谱法', - hazardCharacteristics: '神经毒性，长期接触可影响造血系统' - } + title: '本季度排放量', + dataIndex: 'quarterlyEmission', + key: 'quarterlyEmission', + width: 130, + align: 'center', + }, + { + title: '本年度排放量', + dataIndex: 'yearlyEmission', + key: 'yearlyEmission', + width: 130, + align: 'center', + }, + { + title: '操作', + key: 'action', + width: 140, + align: 'center', + fixed: 'right', + render: (_, record) => ( + + {/* 编辑 handleEdit(record)} + /> + 下载 handleDownload(record)} + /> */} + 删除 handleDelete(record)} + /> + + ), + }, ]; - useEffect(() => { - setTableData({ - list: mockTableData, - pagination: { - current: 1, - pageSize: 10, - total: mockTableData.length - } - }); - }, []); + const handleSearch = (values) => { + console.log('搜索参数:', values); + // TODO: 实现搜索功能 + }; + + const handleReset = () => { + form.resetFields(); + // TODO: 重置搜索 + }; + + const handleView = (record) => { + console.log('查看:', record); + // TODO: 实现查看功能 + }; - // 处理编辑操作 const handleEdit = (record) => { - message.info(`编辑 ${record.pollutantName} 功能开发中`); + console.log('编辑:', record); + // TODO: 实现编辑功能 + }; + + const handleDownload = (record) => { + console.log('下载:', record); + // TODO: 实现下载功能 }; - // 处理删除操作 const handleDelete = (record) => { - message.success(`删除 ${record.pollutantName} 成功`); + console.log('删除:', record); + // TODO: 实现删除功能 }; - // 处理新增操作 const handleAdd = () => { - message.info('新增功能开发中'); + console.log('新增'); + // TODO: 实现新增功能 + }; + + const handleImport = () => { + console.log('导入'); + // TODO: 实现导入功能 + }; + + const handleQuery = () => { + console.log('查询'); + // TODO: 实现查询功能 }; - // 处理表格变化 const handleTableChange = (pagination) => { - setTableData(prev => ({ - ...prev, - pagination: { - ...prev.pagination, - current: pagination.current, - pageSize: pagination.pageSize - } - })); + setPagination(pagination); }; - // 处理搜索 - const handleSearch = (value) => { - message.info(`搜索: ${value}`); + // 全选功能 + const handleSelectAll = (checked) => { + if (checked) { + const allKeys = getCurrentPageData().map(item => item.key); + setSelectedRowKeys(allKeys); + } else { + setSelectedRowKeys([]); + } }; - // 处理返回操作 - const handleBack = () => { - history.goBack(); + // 批量操作 + const handleBatchOperation = (operation) => { + console.log(`批量${operation}:`, selectedRowKeys); + // TODO: 实现批量操作功能 }; return (
{/* 页面头部 */}
-
+ 大气污染特征污染物名录库 +
+ {/* 第一块：操作按钮和筛选条件 */} +
+
+ -
-

大气污染特征污染物名录库

-

待开发暂定

-
- {/* 搜索和操作区域 */} - - - - } - onSearch={handleSearch} - className={styles.searchInput} - /> - - - - - - - - - - - - - - {/* 数据表格 */} - + {/* 第二块：表格 */} +
({ - name: record.pollutantName, - }), - }} - pagination={{ - showTotal: (total, range) => `共 ${total} 条`, - showSizeChanger: true, - showQuickJumper: true, - pageSizeOptions: ['10', '20', '50', '100'], - defaultPageSize: 10, - size: 'small', + data={{ + list: getCurrentPageData(), + pagination: { + ...pagination, + total: dataSource.length, + showTotal: (total) => `共 ${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 && 许可证} +
); }; diff --git a/src/pages/business_envInformation/components/AtmospherePollutantLibrary.less b/src/pages/business_envInformation/components/AtmospherePollutantLibrary.less index c31d65c..d1550dc 100644 --- a/src/pages/business_envInformation/components/AtmospherePollutantLibrary.less +++ b/src/pages/business_envInformation/components/AtmospherePollutantLibrary.less @@ -1,166 +1,218 @@ .atmospherePollutantLibrary { - padding: 24px; - background: #f5f5f5; - min-height: 100vh; + width: 100%; + height: 100%; + // padding: 20px; + // background-color: #fff; + display: flex; + flex-direction: column; + margin: 0; + padding: 0; .pageHeader { - margin-bottom: 24px; + margin-bottom: 15px; background: #fff; - padding: 24px; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + padding: 15px 15px 15px 20px; + border-radius: 2px; + color: #333333; + font-size: 16px; + font-weight: 500; + } + + .searchSection { + background: #fff; + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; - .headerLeft { + .leftButtons { 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; + gap: 12px; + + .addButton { + background-color: #00D48A; + color: #fff; + height: 28px; + border-radius: 4px; + display: flex; + align-items: center; + gap: 4px; &:hover { - color: #40a9ff; - border-color: #40a9ff; - background: #f0f8ff; + background-color: #00D48A; + border-color: #00D48A; } } - .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; + .importButton { + display: flex; + align-items: center; + background-color: #fff; + border-color: #D7D7D7; + color: #333; + height: 28px; + border-radius: 4px; &:hover { - background: #40a9ff; border-color: #40a9ff; + color: #40a9ff; } } } - .filterSelect { - width: 100%; - } - - .addButton { - background: #52c41a; - border-color: #52c41a; - font-weight: 500; - - &:hover { - background: #73d13d; - border-color: #73d13d; - } - } + // .rightControls { + // display: flex; + // align-items: center; + // gap: 12px; + + // .filterLabel { + // color: #333; + // font-size: 14px; + // white-space: nowrap; + // } + + // .queryButton { + // background-color: #52c41a; + // border-color: #52c41a; + // color: white; + // height: 28px; + // border-radius: 4px; + // display: flex; + // align-items: center; + // justify-content: center; + + // &:hover { + // background-color: #73d13d; + // border-color: #73d13d; + // } + // } + + // .selectInput { + // :global { + // .ant-select-selector { + // display: flex; + // align-items: center; + // height: 28px !important; + // } + + // .ant-select-selection-item { + // display: flex; + // align-items: center; + // line-height: 1; + // } + + // .ant-select-selection-placeholder { + // display: flex; + // align-items: center; + // line-height: 1; + // } + // } + // } + // } } - .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; + .tableSection { + flex: 1; + display: flex; + flex-direction: column; + padding: 0 25px 0; + background-color: #fff; + overflow: hidden; // 只设置垂直隐藏 + min-width: 0; // 确保可以收缩 + + :global { + .ant-spin-nested-loading { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + + .ant-spin-container { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + + .ant-table-wrapper { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + margin: 0; + padding: 0; + } + } } - } - :global(.ant-pagination) { - margin-top: 16px; - text-align: right; + .ant-table { + font-size: 12px; + + .ant-table-thead>tr>th { + background-color: #FAFAFA; + font-weight: 400; + color: #000000D9; + border-right: none; + text-align: center; + white-space: nowrap; // 防止换行 + overflow: hidden; + text-overflow: ellipsis; + } - .ant-pagination-total-text { - color: #8c8c8c; - font-size: 14px; - } - } - } + .ant-table-tbody>tr>td { + border-right: none; + color: #000000D9; + font-weight: 400; + text-align: center; + white-space: nowrap; // 防止换行 + overflow: hidden; + text-overflow: ellipsis; + } - // 响应式设计 - @media (max-width: 768px) { - padding: 16px; + .ant-table-tbody>tr:hover>td { + background-color: #f5f5f5; + } - .pageHeader { - padding: 16px; + // 固定列样式 + .ant-table-thead>tr>th.ant-table-cell-fix-left, + .ant-table-tbody>tr>td.ant-table-cell-fix-left { + background-color: #FAFAFA; + z-index: 1; + } - .headerLeft { - flex-direction: column; - align-items: flex-start; - gap: 12px; + .ant-table-thead>tr>th.ant-table-cell-fix-right, + .ant-table-tbody>tr>td.ant-table-cell-fix-right { + background-color: #FAFAFA; + z-index: 1; + } - .pageTitle h1 { - font-size: 20px; + // 固定列阴影效果 + .ant-table-cell-fix-left { + // box-shadow: 0px 0 4px 0px #00000040; } - } - } - .searchCard { - :global(.ant-row) { - .ant-col { - margin-bottom: 12px; + .ant-table-cell-fix-right { + // box-shadow: 0px 0 4px 0px #00000040; } - } - } - } - // 表格操作按钮样式 - :global(.ant-table-tbody) { - .anticon { - font-size: 16px; - transition: all 0.3s; + a { + color: #1890ff; + text-decoration: none; - &:hover { - transform: scale(1.1); + &:hover { + color: #40a9ff; + } + } } - } - } - - // 卡片阴影效果 - .searchCard, - .tableCard { - transition: box-shadow 0.3s; - &:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + // 页码距离上边距 + .ant-pagination { + text-align: right; + margin-top: 70px !important; + } } } -} +} \ No newline at end of file diff --git a/src/pages/business_envInformation/components/PollutionSourceManagement.js b/src/pages/business_envInformation/components/PollutionSourceManagement.js index b87d4b0..40494a0 100644 --- a/src/pages/business_envInformation/components/PollutionSourceManagement.js +++ b/src/pages/business_envInformation/components/PollutionSourceManagement.js @@ -468,7 +468,7 @@ const PollutionSourceManagement = () => { })); }; - // 处理大气环境卡片点击 + // 处理大气环境点击 const handleAtmosphereCardClick = () => { history.push('/topnavbar00/business/atmospherePollutantLibrary'); }; diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js index d30e6a6..5ffb225 100644 --- a/src/pages/nav_system_content/SystemContentList.js +++ b/src/pages/nav_system_content/SystemContentList.js @@ -102,21 +102,6 @@ const SystemContentList = (props) => { "key": "/topnavbar00/business/envInformation", "label": "环保信息管理" }, - { - "path": "/topnavbar00/business/atmospherePollutantLibrary", - icon: 大气污染特征污染物名录库, - "key": "/topnavbar00/business/atmospherePollutantLibrary", - "label": "大气污染特征污染物名录库", - "hideInMenu": true // 隐藏菜单，但允许路由匹配 - }, { "path": "/topnavbar00/business/basicinformation", icon: 安全管理基础信息, @@ -134,7 +119,13 @@ const SystemContentList = (props) => { // 初始化默认路由 const defaultRoute = fixedMenuItems[0]?.key || '' const mathRoute = matchRoutes(fixedMenuItems, pathName) - setRouteActive({ key: mathRoute?.length ? pathName : defaultRoute }, fixedMenuItems) + + // 特殊 大气污染特征污染物名录库页面，直接使用当前路径 + if (pathName === '/topnavbar00/business/atmospherePollutantLibrary') { + setRouteActive({ key: pathName }, fixedMenuItems) + } else { + setRouteActive({ key: mathRoute?.length ? pathName : defaultRoute }, fixedMenuItems) + } }, [pathName]) const setRouteActive = (value, menu) => { diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js index 06de15c..335cf55 100644 --- a/src/pages/topnavbar/TopNavBar.js +++ b/src/pages/topnavbar/TopNavBar.js @@ -52,11 +52,23 @@ const TopNavBar = (props) => { }) }) + // 特殊处理：如果是大气污染特征污染物名录库页面，确保菜单项存在 + if (pathName === '/topnavbar00/business/atmospherePollutantLibrary') { + const hasAtmosphereItem = newList.some(item => item.key === '/topnavbar00/business/atmospherePollutantLibrary') + if (!hasAtmosphereItem) { + newList.push({ + key: '/topnavbar00/business/atmospherePollutantLibrary', + label: '大气污染特征污染物名录库', + icon: null + }) + } + } + setActiveKey(newList?.filter(item => pathName.indexOf(item.key) !== -1)[0]?.key ?? '') } setMenuItems(newList) - }, [dynamicRoute]) + }, [dynamicRoute, pathName]) const setRouteActive = value => { const curKey = value.key