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