fix:
wangyunfei
2 weeks ago
parent
57c5589df8
commit
ba305312c9
@ -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;
|
||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue