You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

804 lines
27 KiB
JavaScript

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 './WasteGasPollutionControl.less';
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';
const WasteGasPollutionControl = () => {
const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false);
const [currentImage, setCurrentImage] = useState(null);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 10,
total: 12,
});
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [dataSource, setDataSource] = useState([
{
key: 1,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 2,
recordTime: '2025-09-02',
recorder: '王嘉琪',
reviewer: '赵子能',
facilityName: '复方水杨酸甲酯乳膏(曼秀雷敦)',
code: '65.177.48.116',
equipmentModel: '3D8d4ffa-bD7e-AffF-ED68-839DAFe74c27',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '14:10',
endRunTime: '03:06',
isNormal: '异常',
pollutantFlueGasVolume: '2',
pollutantFactor: '烟尘2',
treatmentEfficiency: '93.81',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '59.12',
pressure: '95',
emissionTime: '100',
powerConsumption: '34',
byproductName: '二氧化碳',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-08-24 05:16',
reagentAdditionAmount: '2',
},
{
key: 3,
recordTime: '2025-09-06',
recorder: '王嘉琪',
reviewer: '郑清予',
facilityName: '口炎清颗粒(大神)',
code: '111.161.135.125',
equipmentModel: '19b89E82-ae94-6bF7-2355-8DBC2d6a6009',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '12:26',
endRunTime: '03:26',
isNormal: '异常',
pollutantFlueGasVolume: '2',
pollutantFactor: '烟尘',
treatmentEfficiency: '91.40',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '59.95',
pressure: '90',
emissionTime: '95',
powerConsumption: '55',
byproductName: '二氧化碳',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-08-30 18:34',
reagentAdditionAmount: '2',
},
{
key: 4,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 5,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 6,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 7,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 8,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 9,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 10,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 11,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
{
key: 12,
recordTime: '2025-08-29',
recorder: '赵喜行',
reviewer: '郑叶飞',
facilityName: '塞隆风湿酒(同仁堂)',
code: '35.236.217.212',
equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
parameterName: '重量',
designValue: '2',
unit: 't',
startRunTime: '00:46',
endRunTime: '03:55',
isNormal: '正常',
pollutantFlueGasVolume: '1',
pollutantFactor: '烟尘',
treatmentEfficiency: '95.32',
dataSource: '实时采集',
exhaustStackHeight: '2',
exhaustTemperature: '50.48',
pressure: '100',
emissionTime: '115',
powerConsumption: '39',
byproductName: '氮气',
byproductProduction: '2',
reagentName: '乳酸钠葡萄糖',
reagentAdditionTime: '2025-09-01 07:53',
reagentAdditionAmount: '2',
},
]);
const getCurrentPageData = () => {
const { current, pageSize } = pagination;
const start = (current - 1) * pageSize;
const end = start + pageSize;
return dataSource.slice(start, end);
};
const columns = [
{
title: (
<input
type="checkbox"
checked={selectedRowKeys.length === getCurrentPageData().length && getCurrentPageData().length > 0}
onChange={(e) => handleSelectAll(e.target.checked)}
/>
),
key: 'selection',
width: 60,
align: 'center',
fixed: 'left',
render: (_, record) => (
<input
type="checkbox"
checked={selectedRowKeys.includes(record.key)}
onChange={(e) => {
if (e.target.checked) {
setSelectedRowKeys([...selectedRowKeys, record.key]);
} else {
setSelectedRowKeys(selectedRowKeys.filter(key => key !== record.key));
}
}}
/>
),
},
{
title: '记录时间',
dataIndex: 'recordTime',
key: 'recordTime',
width: 120,
align: 'center',
},
{
title: '记录人',
dataIndex: 'recorder',
key: 'recorder',
width: 100,
align: 'center',
},
{
title: '审核人',
dataIndex: 'reviewer',
key: 'reviewer',
width: 100,
align: 'center',
},
{
title: '设施名称',
dataIndex: 'facilityName',
key: 'facilityName',
width: 200,
},
{
title: '编码',
dataIndex: 'code',
key: 'code',
width: 150,
},
{
title: '设备型号',
dataIndex: 'equipmentModel',
key: 'equipmentModel',
width: 200,
},
{
title: '参数名称',
dataIndex: 'parameterName',
key: 'parameterName',
width: 120,
align: 'center',
},
{
title: '设计值',
dataIndex: 'designValue',
key: 'designValue',
width: 100,
align: 'center',
},
{
title: '单位',
dataIndex: 'unit',
key: 'unit',
width: 80,
align: 'center',
},
{
title: '开始运行时间',
dataIndex: 'startRunTime',
key: 'startRunTime',
width: 120,
align: 'center',
},
{
title: '结束运行时间',
dataIndex: 'endRunTime',
key: 'endRunTime',
width: 120,
align: 'center',
},
{
title: '是否正常',
dataIndex: 'isNormal',
key: 'isNormal',
width: 100,
align: 'center',
render: (text) => (
<span style={{
color: text === '异常' ? '#ff4d4f' : '#52c41a',
backgroundColor: text === '异常' ? '#FFF1F0' : '#F6FFED',
border: text === '异常' ? '1px solid #FFA39E' : '1px solid #B7EB8F',
padding: '2px 8px',
borderRadius: '4px',
display: 'inline-block'
}}>
{text}
</span>
),
},
{
title: '污染物烟气量(m³/h)',
dataIndex: 'pollutantFlueGasVolume',
key: 'pollutantFlueGasVolume',
width: 150,
align: 'center',
},
{
title: '污染因子',
dataIndex: 'pollutantFactor',
key: 'pollutantFactor',
width: 120,
align: 'center',
},
{
title: '治理效率(%)',
dataIndex: 'treatmentEfficiency',
key: 'treatmentEfficiency',
width: 120,
align: 'center',
},
{
title: '数据来源',
dataIndex: 'dataSource',
key: 'dataSource',
width: 120,
align: 'center',
},
{
title: '排气筒高度(m)',
dataIndex: 'exhaustStackHeight',
key: 'exhaustStackHeight',
width: 130,
align: 'center',
},
{
title: '排气温度(℃)',
dataIndex: 'exhaustTemperature',
key: 'exhaustTemperature',
width: 130,
align: 'center',
},
{
title: '压力(kpa)',
dataIndex: 'pressure',
key: 'pressure',
width: 100,
align: 'center',
},
{
title: '排放时间(h)',
dataIndex: 'emissionTime',
key: 'emissionTime',
width: 120,
align: 'center',
},
{
title: '耗电量(kWh)',
dataIndex: 'powerConsumption',
key: 'powerConsumption',
width: 120,
align: 'center',
},
{
title: '副产物名称',
dataIndex: 'byproductName',
key: 'byproductName',
width: 120,
align: 'center',
},
{
title: '副产物产生量(t)',
dataIndex: 'byproductProduction',
key: 'byproductProduction',
width: 140,
align: 'center',
},
{
title: '药剂名称',
dataIndex: 'reagentName',
key: 'reagentName',
width: 120,
align: 'center',
},
{
title: '药剂添加时间',
dataIndex: 'reagentAdditionTime',
key: 'reagentAdditionTime',
width: 150,
align: 'center',
},
{
title: '药剂添加量(t)',
dataIndex: 'reagentAdditionAmount',
key: 'reagentAdditionAmount',
width: 140,
align: 'center',
},
{
title: '操作',
key: 'action',
width: 140,
align: 'center',
fixed: 'right',
render: (_, record) => (
<Space size={18}>
{/* <img
src={viewicon}
alt="查看"
style={{ width: 16, height: 16, cursor: 'pointer' }}
onClick={() => handleView(record)}
/> */}
<img
src={editicon}
alt="编辑"
style={{ width: 16, height: 16, cursor: 'pointer' }}
onClick={() => handleEdit(record)}
/>
<img
src={downloadicon}
alt="下载"
style={{ width: 16, height: 16, cursor: 'pointer' }}
onClick={() => handleDownload(record)}
/>
<img
src={deleteicon}
alt="删除"
style={{ width: 16, height: 16, cursor: 'pointer' }}
onClick={() => handleDelete(record)}
/>
</Space>
),
},
];
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 (
<div className={styles.wasteGasContainer}>
{/* 第一块:操作按钮和筛选条件 */}
<div className={styles.searchSection}>
<div className={styles.leftButtons}>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={handleAdd}
className={styles.addButton}
>
新增
</Button>
<Button
// icon={<UploadOutlined />}
onClick={handleImport}
className={styles.importButton}
>
上传
</Button>
<Button
// icon={<UploadOutlined />}
onClick={() => handleBatchOperation('下载')}
className={styles.importButton}
disabled={selectedRowKeys.length === 0}
>
批量下载
</Button>
{/* <Button
onClick={() => handleBatchOperation('删除')}
className={styles.importButton}
disabled={selectedRowKeys.length === 0}
>
批量删除
</Button> */}
</div>
<div className={styles.rightControls}>
<span className={styles.filterLabel}>筛选条件</span>
<Select
placeholder="请选择"
style={{ width: 140, height: 28 }}
allowClear
className={styles.selectInput}
/>
<Input
placeholder="请输入"
style={{ width: 160, height: 28 }}
/>
<Button
onClick={handleQuery}
className={styles.queryButton}
>
查询
</Button>
<Button
onClick={handleReset}
className={styles.resetButton}
>
重置
</Button>
</div>
</div>
{/* 第二块:表格 */}
<div className={styles.tableSection}>
<StandardTable
columns={columns}
data={{
list: getCurrentPageData(),
pagination: {
...pagination,
total: dataSource.length,
showTotal: (total) => `${total}`,
showSizeChanger: false,
}
}}
onChange={handleTableChange}
scroll={{ x: 3000 }}
/>
</div>
{/* 图片弹窗 */}
<Modal
open={isModalVisible}
onCancel={() => setIsModalVisible(false)}
footer={null}
closeIcon={<CloseOutlined style={{ color: '#fff', fontSize: 20 }} />}
width="auto"
centered
styles={{
mask: { backgroundColor: '#10101080' },
content: { padding: 0, background: 'transparent', boxShadow: 'none' }
}}
>
{currentImage && <img src={currentImage} alt="许可证" style={{ width: '100%', display: 'block' }} />}
</Modal>
</div>
);
};
export default WasteGasPollutionControl;