环保设备
wangyunfei
2 weeks ago
parent
f24ad5e7f5
commit
9880ef1c57
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.2663 17.1003L17.0663 11.3003C17.2996 11.067 17.1329 10.6337 16.7996 10.6337H13.6663C13.4329 10.6337 13.2663 10.467 13.2663 10.2337V2.06699C13.2663 1.83367 13.0996 1.66699 12.8663 1.66699H9.16627C8.93295 1.66699 8.76627 1.83367 8.76627 2.06699V10.2337C8.76627 10.467 8.59961 10.6337 8.36627 10.6337H5.23295C4.86627 10.6337 4.69961 11.067 4.96627 11.3003L10.7329 17.1003C10.8663 17.2337 11.1329 17.2337 11.2663 17.1003ZM3.09961 20.3337H18.8996C19.2663 20.3337 19.5996 20.0337 19.5996 19.6337C19.5996 19.267 19.2996 18.9337 18.8996 18.9337H3.06627C2.69961 18.9337 2.36627 19.2337 2.36627 19.6337C2.39961 20.0337 2.69961 20.3337 3.09961 20.3337Z" fill="#A4A4A4"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 776 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 205 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 202 KiB |
@ -1,42 +1,119 @@
|
|||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
padding: 16px;
|
||||||
justify-content: center;
|
// background-color: #f5f5f5;
|
||||||
align-items: center;
|
|
||||||
background-color: #fff;
|
.tabs {
|
||||||
border-radius: 4px;
|
height: 100%;
|
||||||
padding: 20px;
|
background-color: transparent;
|
||||||
|
border-radius: 8px;
|
||||||
.developingBox {
|
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
:global(.ant-tabs-nav) {
|
||||||
align-items: center;
|
margin: 0;
|
||||||
justify-content: center;
|
padding: 0 0px;
|
||||||
padding: 60px 80px;
|
background-color: transparent;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-bottom: none;
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
|
|
||||||
|
|
||||||
.developingText {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #ffffff;
|
|
||||||
letter-spacing: 4px;
|
|
||||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
|
||||||
animation: pulse 2s ease-in-out infinite;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
:global(.ant-tabs-tab) {
|
||||||
0%, 100% {
|
padding: 16px 24px !important;
|
||||||
opacity: 1;
|
font-size: 14px !important;
|
||||||
transform: scale(1);
|
font-weight: 400 !important;
|
||||||
}
|
color: #AFAFAF !important;
|
||||||
50% {
|
background: transparent !important;
|
||||||
opacity: 0.8;
|
border: none !important;
|
||||||
transform: scale(1.05);
|
position: relative;
|
||||||
}
|
|
||||||
}
|
&:hover {
|
||||||
|
color: #AFAFAF !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ant-tabs-tab-active {
|
||||||
|
color: #009D6F !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 额外的全局样式覆盖，确保优先级足够高
|
||||||
|
:global(.ant-tabs-tab.ant-tabs-tab-active) {
|
||||||
|
color: #009D6F !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更强的选择器优先级
|
||||||
|
:global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active) {
|
||||||
|
color: #009D6F !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 针对可能的嵌套结构
|
||||||
|
:global(.ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active) {
|
||||||
|
color: #009D6F !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// // 覆盖 Ant Design 5.x 的高优先级样式
|
||||||
|
// :global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
||||||
|
// color: #009D6F !important;
|
||||||
|
// text-shadow: none !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 使用更高优先级的选择器
|
||||||
|
:global(.ant-tabs.ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
||||||
|
color: #009D6F !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 针对 CSS 模块的覆盖
|
||||||
|
:global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
||||||
|
color: #009D6F !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最高优先级覆盖
|
||||||
|
:global(.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
||||||
|
color: #009D6F !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 覆盖Ant Design的默认下划线
|
||||||
|
:global(.ant-tabs-ink-bar) {
|
||||||
|
background: none !important;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) rotate(180deg);
|
||||||
|
width: 38.36132812500014px;
|
||||||
|
height: 3.3613271713256965px;
|
||||||
|
background-color: #009D6F;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 2px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ant-tabs-content-holder) {
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
// padding: 20px;
|
||||||
|
|
||||||
|
.ant-tabs-content {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.ant-tabs-tabpane {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,25 +1,345 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { Button, Input, Select } from 'antd';
|
||||||
|
import { SearchOutlined, RedoOutlined, UploadOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||||
|
import StandardTable from '@/components/StandardTable';
|
||||||
import styles from './DischargePermitManagement.less';
|
import styles from './DischargePermitManagement.less';
|
||||||
|
// import attachment from '@/assets/business_envinformation/attachment.svg';
|
||||||
|
import downloadicon from '@/assets/business_envinformation/downloadicon.svg';
|
||||||
|
import deleteicon from '@/assets/business_envinformation/deleteicon.svg';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const DischargePermitManagement = () => {
|
const DischargePermitManagement = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState('actual');
|
||||||
|
|
||||||
|
// 实际排放数据
|
||||||
|
const actualEmissionData = [
|
||||||
|
{ key: 1, emissionType: '前林市', pollutant: '51669811', outletType: '信用风险管理与法律防', outletName: '北京那蓝国际贸易有限公司', permittedEmission: '5年', annualTotal: '2025-08-15' },
|
||||||
|
{ key: 2, emissionType: '拉萨市', pollutant: '34887875', outletType: '涉外警务', outletName: '中瀚石林企业咨询(上海)有限公司', permittedEmission: '5年', annualTotal: '2025-08-15' },
|
||||||
|
{ key: 3, emissionType: '长家界市', pollutant: '12345678', outletType: '环境设计', outletName: '上海环境科技有限公司', permittedEmission: '5年', annualTotal: '2025-08-15' },
|
||||||
|
{ key: 4, emissionType: '北京市', pollutant: '87654321', outletType: '污染治理', outletName: '北京环保科技有限公司', permittedEmission: '5年', annualTotal: '2025-08-15' },
|
||||||
|
{ key: 5, emissionType: '上海市', pollutant: '11223344', outletType: '排放监测', outletName: '上海监测技术有限公司', permittedEmission: '5年', annualTotal: '2025-08-15' },
|
||||||
|
{ key: 6, emissionType: '广州市', pollutant: '55667788', outletType: '工业废水', outletName: '广州环保科技股份有限公司', permittedEmission: '3年', annualTotal: '2025-09-10' },
|
||||||
|
{ key: 7, emissionType: '深圳市', pollutant: '99887766', outletType: '生活污水', outletName: '深圳水务集团有限公司', permittedEmission: '4年', annualTotal: '2025-07-20' },
|
||||||
|
{ key: 8, emissionType: '杭州市', pollutant: '33445566', outletType: '农业面源', outletName: '杭州农业科技有限公司', permittedEmission: '2年', annualTotal: '2025-10-05' },
|
||||||
|
{ key: 9, emissionType: '南京市', pollutant: '77889900', outletType: '工业废气', outletName: '南京工业集团股份有限公司', permittedEmission: '6年', annualTotal: '2025-06-15' },
|
||||||
|
{ key: 10, emissionType: '武汉市', pollutant: '11223355', outletType: '交通污染', outletName: '武汉交通发展有限公司', permittedEmission: '3年', annualTotal: '2025-11-20' },
|
||||||
|
{ key: 11, emissionType: '成都市', pollutant: '66778899', outletType: '建筑扬尘', outletName: '成都建筑工程有限公司', permittedEmission: '5年', annualTotal: '2025-05-30' },
|
||||||
|
{ key: 12, emissionType: '西安市', pollutant: '44556677', outletType: '餐饮油烟', outletName: '西安餐饮管理有限公司', permittedEmission: '4年', annualTotal: '2025-12-10' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 超标排放数据
|
||||||
|
const excessiveEmissionData = [
|
||||||
|
{ key: 1, emissionType: '俞林市', pollutant: '51669811', outletType: '信用风险管理与法律防', outletName: '北京那蓝国际贸易有限公司', permittedEmission: '5年', annualTotal: '2025-08-15' },
|
||||||
|
{ key: 2, emissionType: '拉萨市', pollutant: '34887875', outletType: '涉外警务', outletName: '中瀚石林企业咨询(上海)有限公司', permittedEmission: '5年', annualTotal: '2025-08-09' },
|
||||||
|
{ key: 3, emissionType: '长家界市', pollutant: '1716652546', outletType: '环境设计', outletName: '水木晨曦(北京)科技有限公司', permittedEmission: '5年', annualTotal: '2025-08-17' },
|
||||||
|
{ key: 4, emissionType: '潭市', pollutant: '384654762', outletType: '电子竞技运动与管理', outletName: '亚商桥(北京)咨询有限公司', permittedEmission: '5年', annualTotal: '2025-08-18' },
|
||||||
|
{ key: 5, emissionType: '次州市', pollutant: '34669295254', outletType: '精算学', outletName: '中讯通讯科技有限公司', permittedEmission: '5年', annualTotal: '2025-08-13' },
|
||||||
|
{ key: 6, emissionType: '驻马店市', pollutant: '4347052411', outletType: '数字媒体艺术', outletName: '嘉实瑞沃德(北京)商贸有限公司', permittedEmission: '5年', annualTotal: '2025-08-21' },
|
||||||
|
{ key: 7, emissionType: '三亚市', pollutant: '388946891', outletType: '技术侦察学', outletName: '中大国际文化有限公司', permittedEmission: '5年', annualTotal: '2025-08-17' },
|
||||||
|
{ key: 8, emissionType: '巢湖市', pollutant: '7190228566', outletType: '财政学', outletName: '嘉实瑞沃德(北京)商贸有限公司', permittedEmission: '5年', annualTotal: '2025-08-20' },
|
||||||
|
{ key: 9, emissionType: '东营市', pollutant: '6656363924', outletType: '保险学', outletName: '北京济丰国际医院管理有限公司', permittedEmission: '5年', annualTotal: '2025-08-27' },
|
||||||
|
{ key: 10, emissionType: '九龙', pollutant: '622145211', outletType: '英语', outletName: '北京庆奔科贸有限公司', permittedEmission: '5年', annualTotal: '2025-08-28' },
|
||||||
|
{ key: 11, emissionType: '深圳市', pollutant: '99887766', outletType: '生活污水', outletName: '深圳水务集团有限公司', permittedEmission: '4年', annualTotal: '2025-07-20' },
|
||||||
|
{ key: 12, emissionType: '杭州市', pollutant: '33445566', outletType: '农业面源', outletName: '杭州农业科技有限公司', permittedEmission: '2年', annualTotal: '2025-10-05' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 污染治理设备异常情况数据
|
||||||
|
const equipmentAbnormalData = [
|
||||||
|
{ key: 1, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 2, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 3, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 4, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 5, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 6, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 7, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 8, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 9, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 10, emissionType: '类型1', pollutant: '10:15:10—10:50:10', outletType: '管道', outletName: '老化', permittedEmission: '因子名称', annualTotal: '管口5m内' },
|
||||||
|
{ key: 11, emissionType: '类型2', pollutant: '11:20:15—11:45:30', outletType: '风机', outletName: '磨损', permittedEmission: '因子名称2', annualTotal: '风机10m内' },
|
||||||
|
{ key: 12, emissionType: '类型3', pollutant: '14:30:20—15:10:40', outletType: '泵站', outletName: '堵塞', permittedEmission: '因子名称3', annualTotal: '泵站15m内' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 实际排放和超标排放的表格列定义
|
||||||
|
const normalColumns = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'key',
|
||||||
|
key: 'key',
|
||||||
|
width: 80,
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排放物类型',
|
||||||
|
dataIndex: 'emissionType',
|
||||||
|
key: 'emissionType',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '污染物',
|
||||||
|
dataIndex: 'pollutant',
|
||||||
|
key: 'pollutant',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排放口类型',
|
||||||
|
dataIndex: 'outletType',
|
||||||
|
key: 'outletType',
|
||||||
|
width: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排放口编号/排放口名称',
|
||||||
|
dataIndex: 'outletName',
|
||||||
|
key: 'outletName',
|
||||||
|
width: 220,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '许可排放量(吨)',
|
||||||
|
dataIndex: 'permittedEmission',
|
||||||
|
key: 'permittedEmission',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '年度合计',
|
||||||
|
dataIndex: 'annualTotal',
|
||||||
|
key: 'annualTotal',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '第一季度',
|
||||||
|
key: 'q1',
|
||||||
|
width: 80,
|
||||||
|
render: () => <a href="#" className={styles.attachmentLink}>附件</a>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '二季度',
|
||||||
|
key: 'q2',
|
||||||
|
width: 80,
|
||||||
|
render: () => <a href="#" className={styles.attachmentLink}>附件</a>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '三季度',
|
||||||
|
key: 'q3',
|
||||||
|
width: 80,
|
||||||
|
render: () => <a href="#" className={styles.attachmentLink}>附件</a>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '四季度',
|
||||||
|
key: 'q4',
|
||||||
|
width: 80,
|
||||||
|
render: () => <a href="#" className={styles.attachmentLink}>附件</a>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
width: 100,
|
||||||
|
render: (_, record) => (
|
||||||
|
<div className={styles.actionButtons}>
|
||||||
|
<img
|
||||||
|
src={downloadicon}
|
||||||
|
alt="下载"
|
||||||
|
className={styles.downloadIcon}
|
||||||
|
title="下载"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={deleteicon}
|
||||||
|
alt="删除"
|
||||||
|
className={styles.deleteIcon}
|
||||||
|
title="删除"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 污染治理设备异常情况的表格列定义
|
||||||
|
const equipmentColumns = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
dataIndex: 'key',
|
||||||
|
key: 'key',
|
||||||
|
width: 80,
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '故障类型',
|
||||||
|
dataIndex: 'emissionType',
|
||||||
|
key: 'emissionType',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '超标时段(开始时段—结束时段)',
|
||||||
|
dataIndex: 'pollutant',
|
||||||
|
key: 'pollutant',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '故障设施',
|
||||||
|
dataIndex: 'outletType',
|
||||||
|
key: 'outletType',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '故障原因',
|
||||||
|
dataIndex: 'outletName',
|
||||||
|
key: 'outletName',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排放因子',
|
||||||
|
dataIndex: 'permittedEmission',
|
||||||
|
key: 'permittedEmission',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排放范围',
|
||||||
|
dataIndex: 'annualTotal',
|
||||||
|
key: 'annualTotal',
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排放因子浓度(mg/m³或dB(A))',
|
||||||
|
key: 'concentration',
|
||||||
|
width: 200,
|
||||||
|
render: () => '2025-08-15',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '应对',
|
||||||
|
key: 'response',
|
||||||
|
width: 80,
|
||||||
|
render: () => '—',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
width: 120,
|
||||||
|
render: (_, record) => (
|
||||||
|
<div className={styles.actionButtons}>
|
||||||
|
<img
|
||||||
|
src={downloadicon}
|
||||||
|
alt="下载"
|
||||||
|
className={styles.downloadIcon}
|
||||||
|
title="下载"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={deleteicon}
|
||||||
|
alt="删除"
|
||||||
|
className={styles.deleteIcon}
|
||||||
|
title="删除"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 获取当前标签页的数据
|
||||||
|
const getCurrentData = () => {
|
||||||
|
switch (activeTab) {
|
||||||
|
case 'actual':
|
||||||
|
return actualEmissionData;
|
||||||
|
case 'excessive':
|
||||||
|
return excessiveEmissionData;
|
||||||
|
case 'equipment':
|
||||||
|
return equipmentAbnormalData;
|
||||||
|
default:
|
||||||
|
return actualEmissionData;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取当前标签页的列定义
|
||||||
|
const getCurrentColumns = () => {
|
||||||
|
switch (activeTab) {
|
||||||
|
case 'actual':
|
||||||
|
case 'excessive':
|
||||||
|
return normalColumns;
|
||||||
|
case 'equipment':
|
||||||
|
return equipmentColumns;
|
||||||
|
default:
|
||||||
|
return normalColumns;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页配置
|
||||||
|
const pagination = {
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 12,
|
||||||
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.dischargePermitManagement}>
|
||||||
<div className={styles.content}>
|
<div className={styles.tabContainer}>
|
||||||
<h2>排污许可执行管理</h2>
|
<div className={styles.tabButtons}>
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
<Button
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
className={`${styles.tabButton} ${activeTab === 'actual' ? styles.active : ''}`}
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
onClick={() => setActiveTab('actual')}
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
>
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
实际排放
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
</Button>
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
<Button
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
className={`${styles.tabButton} ${activeTab === 'excessive' ? styles.active : ''}`}
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
onClick={() => setActiveTab('excessive')}
|
||||||
<p>此页面用于展示和管理排污许可的执行情况</p>
|
>
|
||||||
{/* 这里可以添加具体的排污许可管理表格和功能 */}
|
超标排放
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className={`${styles.tabButton} ${activeTab === 'equipment' ? styles.active : ''}`}
|
||||||
|
onClick={() => setActiveTab('equipment')}
|
||||||
|
>
|
||||||
|
污染治理设备异常情况
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.filterSection}>
|
||||||
|
<span className={styles.filterLabel}>筛选条件</span>
|
||||||
|
<Select
|
||||||
|
className={styles.filterSelect}
|
||||||
|
placeholder="请选择"
|
||||||
|
style={{ width: 120 }}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
className={styles.filterInput}
|
||||||
|
placeholder="请输入"
|
||||||
|
style={{ width: 200 }}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
// icon={<SearchOutlined />}
|
||||||
|
className={styles.queryBtn}
|
||||||
|
>
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
// icon={<RedoOutlined />}
|
||||||
|
className={styles.resetBtn}
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
// icon={<UploadOutlined />}
|
||||||
|
className={styles.uploadBtn}
|
||||||
|
>
|
||||||
|
上传
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.tableContent}>
|
||||||
|
<StandardTable
|
||||||
|
columns={getCurrentColumns()}
|
||||||
|
data={{
|
||||||
|
list: getCurrentData(),
|
||||||
|
pagination: pagination
|
||||||
|
}}
|
||||||
|
rowKey="key"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DischargePermitManagement;
|
export default DischargePermitManagement;
|
||||||
@ -1,26 +1,159 @@
|
|||||||
.container {
|
.dischargePermitManagement {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
||||||
.content {
|
.tabContainer {
|
||||||
text-align: center;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
h2 {
|
align-items: center;
|
||||||
font-size: 24px;
|
margin-bottom: 15px;
|
||||||
color: #333;
|
padding: 0 ;
|
||||||
margin-bottom: 16px;
|
// border-bottom: 1px solid #e8e8e8;
|
||||||
font-weight: 500;
|
|
||||||
|
.tabButtons {
|
||||||
|
display: flex;
|
||||||
|
gap: 0;
|
||||||
|
background-color: #F4F4F4;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tabButton {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1890ff;
|
||||||
|
background-color: rgba(24, 144, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #03C598;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filterSection {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.filterLabel {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterSelect {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterInput {
|
||||||
|
min-width: 200px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queryBtn {
|
||||||
|
background-color: #00D48A;
|
||||||
|
border-color: #00D48A;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #389e0d;
|
||||||
|
border-color: #389e0d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.resetBtn, .uploadBtn {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1890ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableContent {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
p {
|
// 覆盖表头样式
|
||||||
font-size: 16px;
|
:global {
|
||||||
color: #666;
|
.ant-table-thead > tr > th {
|
||||||
margin: 0;
|
font-weight: 400 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
color: #333 !important;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-tbody > tr > td {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachmentLink {
|
||||||
|
color: #1890ff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionButtons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.downloadIcon, .deleteIcon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloadIcon {
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.deleteIcon {
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(1.2) saturate(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,26 +1,105 @@
|
|||||||
.container {
|
.environmentalTaskListContainer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 72vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.environmentalTaskListContent {
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #fff;
|
padding: 0px 20px;
|
||||||
padding: 20px;
|
}
|
||||||
|
|
||||||
.content {
|
.environmentalTaskListText {
|
||||||
text-align: center;
|
max-width: 800px;
|
||||||
|
text-align: left;
|
||||||
h2 {
|
line-height: 1.6;
|
||||||
font-size: 24px;
|
|
||||||
color: #333;
|
h2 {
|
||||||
margin-bottom: 16px;
|
font-size: 20px;
|
||||||
font-weight: 500;
|
color: #333;
|
||||||
}
|
margin-bottom: 20px;
|
||||||
|
font-weight: 600;
|
||||||
p {
|
}
|
||||||
font-size: 16px;
|
|
||||||
color: #666;
|
p {
|
||||||
margin: 0;
|
font-size: 16px;
|
||||||
}
|
color: #333;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.environmentalTaskListPagination {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationInfo {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationControls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageSizeSelect {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNumbers {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageButton, .pageNumber {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1890ff;
|
||||||
|
color: #1890ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pageNumber.active {
|
||||||
|
background: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageEllipsis {
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import styles from './ProtectionFacilityMaintenance.less';
|
||||||
|
|
||||||
|
const ProtectionFacilityMaintenance = () => {
|
||||||
|
return (
|
||||||
|
<div className={styles.protectionFacilityMaintenance}>
|
||||||
|
<div className={styles.content}>
|
||||||
|
<Button type="primary" className={styles.button}>防护设施检维修管理</Button>
|
||||||
|
<div className={styles.status}>
|
||||||
|
待开发
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProtectionFacilityMaintenance;
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
.protectionFacilityMaintenance {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,802 @@
|
|||||||
|
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={13}>
|
||||||
|
<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}
|
||||||
|
/>
|
||||||
|
</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;
|
||||||
@ -0,0 +1,238 @@
|
|||||||
|
.wasteGasContainer {
|
||||||
|
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;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 20px 0;
|
||||||
|
|
||||||
|
// 添加水平滚动条
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: 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;
|
||||||
|
overflow-x: auto; // 添加水平滚动
|
||||||
|
|
||||||
|
.ant-table {
|
||||||
|
flex: 1;
|
||||||
|
overflow: visible; // 改为visible让滚动条显示
|
||||||
|
margin: 0;
|
||||||
|
min-width: 3000px; // 增加最小宽度确保所有列都能显示
|
||||||
|
|
||||||
|
.ant-table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
min-width: 3000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-content {
|
||||||
|
overflow-x: auto;
|
||||||
|
min-width: 3000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-body {
|
||||||
|
overflow-x: auto;
|
||||||
|
min-width: 3000px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-pagination {
|
||||||
|
flex-shrink: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
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;
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
.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