废水页面
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