废水页面
wangyunfei
2 weeks ago
parent
9880ef1c57
commit
e5cbd53d42
@ -0,0 +1,746 @@
|
|||||||
|
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 './WastewaterFacilityManagement.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 WastewaterFacilityManagement = () => {
|
||||||
|
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',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 2,
|
||||||
|
recordTime: '2025-09-02',
|
||||||
|
recorder: '王嘉祺',
|
||||||
|
reviewer: '赵子峰',
|
||||||
|
facilityName: '复方水杨酸甲酯乳膏(曼秀雷敦)',
|
||||||
|
code: '65.177.48.116',
|
||||||
|
facilityModel: '3D8d4ffa-bD7e-AffF-ED68-839DAFe74c27',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '14:10',
|
||||||
|
endRunTime: '03:06',
|
||||||
|
isNormal: '异常',
|
||||||
|
pollutantOutletFlow: '2',
|
||||||
|
pollutantFactor: '烟尘2',
|
||||||
|
treatmentEfficiency: '93.81',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '59.12',
|
||||||
|
treatmentMethod: '95',
|
||||||
|
powerConsumption: '34',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-08-24 05:16',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 3,
|
||||||
|
recordTime: '2025-09-06',
|
||||||
|
recorder: '王嘉琪',
|
||||||
|
reviewer: '郑清予',
|
||||||
|
facilityName: '口炎清颗粒(大神)',
|
||||||
|
code: '111.161.135.125',
|
||||||
|
facilityModel: '19b89EB2-ae94-6bF7-2355-6DBC2d6a6009',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '12:26',
|
||||||
|
endRunTime: '03:26',
|
||||||
|
isNormal: '异常',
|
||||||
|
pollutantOutletFlow: '2',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '91.40',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '59.95',
|
||||||
|
treatmentMethod: '90',
|
||||||
|
powerConsumption: '56',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-08-30 18:34',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 4,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 5,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 6,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 7,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 8,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 9,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 10,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 11,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
reagentName: '乳酸钠葡萄糖',
|
||||||
|
reagentAdditionTime: '2025-09-01 07:53',
|
||||||
|
reagentAdditionAmount: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 12,
|
||||||
|
recordTime: '2025-08-29',
|
||||||
|
recorder: '赵吾行',
|
||||||
|
reviewer: '郑叶飞',
|
||||||
|
facilityName: '塞隆风湿酒(同仁堂)',
|
||||||
|
code: '35.236.217.212',
|
||||||
|
facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
|
||||||
|
parameterName: '重量',
|
||||||
|
designValue: '2',
|
||||||
|
unit: 't',
|
||||||
|
startRunTime: '00:46',
|
||||||
|
endRunTime: '03:55',
|
||||||
|
isNormal: '正常',
|
||||||
|
pollutantOutletFlow: '1',
|
||||||
|
pollutantFactor: '烟尘',
|
||||||
|
treatmentEfficiency: '95.32',
|
||||||
|
dataSource: '实时采集',
|
||||||
|
dischargeDestination: '2',
|
||||||
|
sludgeProduction: '50.48',
|
||||||
|
treatmentMethod: '100',
|
||||||
|
powerConsumption: '39',
|
||||||
|
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: 'facilityModel',
|
||||||
|
key: 'facilityModel',
|
||||||
|
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: 'pollutantOutletFlow',
|
||||||
|
key: 'pollutantOutletFlow',
|
||||||
|
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: '排放去向',
|
||||||
|
dataIndex: 'dischargeDestination',
|
||||||
|
key: 'dischargeDestination',
|
||||||
|
width: 120,
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '污泥产生量(t)',
|
||||||
|
dataIndex: 'sludgeProduction',
|
||||||
|
key: 'sludgeProduction',
|
||||||
|
width: 130,
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '处理方式',
|
||||||
|
dataIndex: 'treatmentMethod',
|
||||||
|
key: 'treatmentMethod',
|
||||||
|
width: 120,
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '耗电量(kWh)',
|
||||||
|
dataIndex: 'powerConsumption',
|
||||||
|
key: 'powerConsumption',
|
||||||
|
width: 120,
|
||||||
|
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.wastewaterFacilityContainer}>
|
||||||
|
{/* 第一块：操作按钮和筛选条件 */}
|
||||||
|
<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 WastewaterFacilityManagement;
|
||||||
@ -0,0 +1,206 @@
|
|||||||
|
.wastewaterFacilityContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// padding: 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.searchSection {
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.leftButtons {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.addButton {
|
||||||
|
background-color: #52c41a;
|
||||||
|
border-color: #52c41a;
|
||||||
|
color: white;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #73d13d;
|
||||||
|
border-color: #73d13d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.importButton {
|
||||||
|
background-color: white;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
color: #333;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #40a9ff;
|
||||||
|
color: #40a9ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableSection {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 20px 0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-table-tbody > tr > td {
|
||||||
|
border-right: none;
|
||||||
|
color: #000000D9;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap; // 防止换行
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr:hover > td {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 固定列样式
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 固定列阴影效果
|
||||||
|
.ant-table-cell-fix-left {
|
||||||
|
box-shadow: 0px 0 4px 0px #00000040;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-cell-fix-right {
|
||||||
|
box-shadow: 0px 0 4px 0px #00000040;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #1890ff;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #40a9ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-pagination {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 25px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Button } from 'antd';
|
|
||||||
import styles from './WastewaterFacilityManagement.less';
|
|
||||||
|
|
||||||
const WastewaterFacilityManagement = () => {
|
|
||||||
return (
|
|
||||||
<div className={styles.wastewaterFacilityManagement}>
|
|
||||||
<div className={styles.content}>
|
|
||||||
<Button type="primary" className={styles.button}>废水设置运行管理</Button>
|
|
||||||
<div className={styles.status}>
|
|
||||||
待开发
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default WastewaterFacilityManagement;
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
.wastewaterFacilityManagement {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
border-bottom: 1px solid #e8e8e8;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
.placeholder {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 300px;
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue