dq-emgms/src/pages/business_emergencyResource/components/secondary_menu/DischargePermitManagement.js

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 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 [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 (
        <div className={styles.dischargePermitManagement}>   
            <div className={styles.tabContainer}>
                <div className={styles.tabButtons}>
                    <Button 
                        className={`${styles.tabButton} ${activeTab === 'actual' ? styles.active : ''}`}
                        onClick={() => setActiveTab('actual')}
                    >
                        实际排放
                    </Button>
                    <Button 
                        className={`${styles.tabButton} ${activeTab === 'excessive' ? styles.active : ''}`}
                        onClick={() => setActiveTab('excessive')}
                    >
                        超标排放
                    </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>
    );
};

export default DischargePermitManagement;