dq-emgms/src/pages/business_emergencyAccident/components/EventWarningManagement.js

import React, { useState, useEffect, useRef } from 'react';
import { Button, Segmented, Tag, Drawer, Form, Input, Select } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './EventWarningManagement.less';
import bgMan2 from '@/assets/business_Emergency/bgMan2.svg';
import bgMan3 from '@/assets/business_Emergency/bgMan3.svg';
import bgMan4 from '@/assets/business_Emergency/bgMan4.svg';
import bgMan5 from '@/assets/business_Emergency/bgMan5.svg';

const EventWarningManagement = () => {
    const [form] = Form.useForm();
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [timeType, setTimeType] = useState('month');
    const lineChartRef = useRef(null);
    const lineChartInstanceRef = useRef(null);
    const donutChartRef = useRef(null);
    const donutChartInstanceRef = useRef(null);
    const [tableData, setTableData] = useState({
        list: [
            {
                key: '1',
                alertId: '#ALRT-20230512-001',
                alertType: '气象预警',
                alertLevel: '高级',
                sourceChannel: '气象监测数据',
                affectedArea: '东城区、西城区',
                alertLevelColor: '红色预警',
                alertTime: '2025-10-20 01:32:25',
                status: '处理中',
                statusType: 'processing'
            },
            {
                key: '2',
                alertId: '#ALRT-20230512-002',
                alertType: '火灾隐患',
                alertLevel: '中级',
                sourceChannel: '安全监测设备',
                affectedArea: '南山区工业园区',
                alertLevelColor: '橙色预警',
                alertTime: '2025-10-18 21:15:07',
                status: '处理中',
                statusType: 'processing'
            },
            {
                key: '3',
                alertId: '#ALRT-20230512-003',
                alertType: '疫情传播',
                alertLevel: '中级',
                sourceChannel: '社会舆情信息',
                affectedArea: '全市范围',
                alertLevelColor: '蓝色预警',
                alertTime: '2025-10-15 12:24:25',
                status: '待处理',
                statusType: 'pending'
            },
            {
                key: '4',
                alertId: '#ALRT-20230512-004',
                alertType: '化工泄漏',
                alertLevel: '低级',
                sourceChannel: '安全监测设备',
                affectedArea: '化工园区A区',
                alertLevelColor: '蓝色预警',
                alertTime: '2025-10-17 06:49:59',
                status: '已处理',
                statusType: 'processed'
            }
        ],
        pagination: {
            current: 3,
            currentPage: 3,
            pageSize: 10,
            total: 48,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共${total}条`
        }
    });

    // 折线图配置
    useEffect(() => {
        if (!lineChartRef.current) return;

        if (!lineChartInstanceRef.current) {
            lineChartInstanceRef.current = echarts.init(lineChartRef.current);
        }

        const option = {
            grid: {
                left: '3%',
                right: '4%',
                top: '15%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data: ['气象灾害', '安全事故', '公共卫生'],
                top: '0%',
                left: 'center',
                itemGap: 30,
                itemWidth: 18,  // 图例图标宽度
                itemHeight: 8, // 图例图标高度
                textStyle: {
                    color: '#666666',
                    fontSize: 12
                }
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLabel: {
                    color: '#666666',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: '#E5E5E5'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#E5E5E5',
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 12,
                interval: 2,
                axisLabel: {
                    color: '#666666',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#E5E5E5',
                        type: 'dashed'
                    }
                }
            },
            series: [
                {
                    name: '气象灾害',
                    type: 'line',
                    smooth: true,
                    data: [4, 5, 6, 7, 10, 8, 6, 7, 8, 9, 10, 12],
                    itemStyle: {
                        color: '#ffffff',
                        borderColor: '#8979FF',
                        borderWidth: 1
                    },
                    lineStyle: {
                        color: '#8979FF',
                        width: 1
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(137, 121, 255, 0.3)' },
                                { offset: 1, color: 'rgba(137, 121, 255, 0.05)' }
                            ]
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    symbolKeepAspect: true,
                    emphasis: {
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#8979FF',
                            borderWidth: 1
                        }
                    }
                },
                {
                    name: '安全事故',
                    type: 'line',
                    smooth: true,
                    data: [2, 3, 5, 4, 3, 4, 5, 4, 3, 6, 5, 7],
                    itemStyle: {
                        color: '#ffffff',
                        borderColor: '#FF928A',
                        borderWidth: 1
                    },
                    lineStyle: {
                        color: '#FF928A',
                        width: 1
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(255, 146, 138, 0.3)' },
                                { offset: 1, color: 'rgba(255, 146, 138, 0.05)' }
                            ]
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    symbolKeepAspect: true,
                    emphasis: {
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#FF928A',
                            borderWidth: 1
                        }
                    }
                },
                {
                    name: '公共卫生',
                    type: 'line',
                    smooth: true,
                    data: [3, 5, 2, 1, 2, 3, 4, 2, 1, 2, 3, 2],
                    itemStyle: {
                        color: '#ffffff',
                        borderColor: '#3CC3DF',
                        borderWidth: 1
                    },
                    lineStyle: {
                        color: '#3CC3DF',
                        width: 1
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(60, 195, 223, 0.3)' },
                                { offset: 1, color: 'rgba(60, 195, 223, 0.05)' }
                            ]
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    symbolKeepAspect: true,
                    emphasis: {
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#3CC3DF',
                            borderWidth: 1
                        }
                    }
                }
            ]
        };

        lineChartInstanceRef.current.setOption(option);

        const resizeObserver = new ResizeObserver(() => {
            lineChartInstanceRef.current?.resize();
        });

        if (lineChartRef.current) {
            resizeObserver.observe(lineChartRef.current);
        }

        const handleResize = () => {
            lineChartInstanceRef.current?.resize();
        };
        window.addEventListener('resize', handleResize);

        return () => {
            resizeObserver.disconnect();
            window.removeEventListener('resize', handleResize);
        };
    }, [timeType]);

    // 环形图配置
    useEffect(() => {
        if (!donutChartRef.current) return;

        if (!donutChartInstanceRef.current) {
            donutChartInstanceRef.current = echarts.init(donutChartRef.current);
        }

        const option = {
            legend: {
                orient: 'vertical',
                right: 30,
                top: 'center',
                itemGap: 15,
                itemWidth: 14,
                itemHeight: 3,
                textStyle: {
                    color: '#666666',
                    fontSize: 12
                },
                formatter: function (name) {
                    return name;
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['45%', '75%'],
                    center: ['35%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 65, name: '气象灾害', itemStyle: { color: '#4B69F1' } },
                        { value: 10, name: '社会安全', itemStyle: { color: '#44BB5F' } },
                        { value: 20, name: '公共卫生', itemStyle: { color: '#A493FB' } },
                        { value: 5, name: '安全事故', itemStyle: { color: '#FFD85A' } }
                    ]
                }
            ]
        };

        donutChartInstanceRef.current.setOption(option);

        const resizeObserver = new ResizeObserver(() => {
            donutChartInstanceRef.current?.resize();
        });

        if (donutChartRef.current) {
            resizeObserver.observe(donutChartRef.current);
        }

        const handleResize = () => {
            donutChartInstanceRef.current?.resize();
        };
        window.addEventListener('resize', handleResize);

        return () => {
            resizeObserver.disconnect();
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    // 组件卸载时销毁图表
    useEffect(() => {
        return () => {
            lineChartInstanceRef.current?.dispose();
            donutChartInstanceRef.current?.dispose();
        };
    }, []);

    // 表格列定义
    const columns = [
        {
            title: '预警编号',
            dataIndex: 'alertId',
            key: 'alertId',
            width: 180,
            align: 'center'
        },
        {
            title: '预警类型',
            dataIndex: 'alertType',
            key: 'alertType',
            width: 110,
            align: 'center'
        },
        {
            title: '来源渠道',
            dataIndex: 'sourceChannel',
            key: 'sourceChannel',
            width: 130,
            align: 'center'
        },
        {
            title: '影响区域',
            dataIndex: 'affectedArea',
            key: 'affectedArea',
            width: 160,
            align: 'center'
        },
        {
            title: '预警级别',
            dataIndex: 'alertLevelColor',
            key: 'alertLevelColor',
            width: 120,
            align: 'center',
            render: (text) => {
                let color = '#FF3E48';
                let backgroundColor = '#FFE0E2';

                if (text === '橙色预警') {
                    color = '#FF8800';
                    backgroundColor = '#FFF3E9';
                } else if (text === '蓝色预警') {
                    color = '#00AAFA';
                    backgroundColor = '#DAF3FF';
                }

                return (
                    <Tag style={{ color, backgroundColor, border: 'none' }}>
                        {text}
                    </Tag>
                );
            }
        },
        {
            title: '预警时间',
            dataIndex: 'alertTime',
            key: 'alertTime',
            width: 180,
            align: 'center'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            align: 'center',
            render: (text) => {
                let color = "#00AAFA";
                let backgroundColor = "#DAF3FF";
                if (text === '处理中') {
                    color = '#FF8800';
                    backgroundColor = '#FFF3E9';
                } else if (text === '已处理') {
                    color = '#44BB5F';
                    backgroundColor = '#D8F7DE';
                }
                return (
                    <Tag style={{ color, backgroundColor, border: 'none' }}>{text}</Tag>
                );
            }
        },
        {
            title: '操作',
            key: 'action',
            width: 140,
            align: 'center',
            render: () => (
                <div className={styles.actionButtons}>
                    <Button type="link" size="small" style={{ color: "#2E4CD4" }}>编辑</Button>
                    <Button type="link" size="small" style={{ color: "#2E4CD4" }}>查看</Button>
                </div>
            )
        }
    ];

    // 显示添加预警抽屉
    const showAddDrawer = () => {
        setDrawerVisible(true);
    };

    // 关闭抽屉
    const onCloseDrawer = () => {
        setDrawerVisible(false);
        form.resetFields();
    };

    // 提交表单
    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            console.log('提交的表单数据:', values);
            // TODO: 调用API提交数据
            // 提交成功后关闭抽屉并刷新表格
            onCloseDrawer();
            // 刷新表格数据
        } catch (error) {
            console.error('表单验证失败:', error);
        }
    };

    return (
        <div className={styles.container}>
            {/* A块：顶部统计区域 */}
            <div className={styles.blockA}>
                {/* a块：左侧70% */}
                <div className={styles.blockA_a}>
                    <div className={styles.sectionHeader}>
                        <div className={styles.titleBar}></div>
                        <div className={styles.titleText}>今日预警统计</div>
                    </div>
                    <div className={styles.threeCards}>
                        <img src={bgMan3} alt="" style={{ width: '140px', height: '75px' }} />
                        <img src={bgMan2} alt="" style={{ width: '140px', height: '75px' }} />
                        <img src={bgMan3} alt="" style={{ width: '140px', height: '75px' }} />
                    </div>
                </div>
                {/* b块：右侧30% */}
                <div className={styles.blockA_b}>
                    <div className={styles.imageTextCard}>
                        <div className={styles.cardIcon}>
                            <img src={bgMan4} alt="待处理指令" />
                        </div>
                        <div className={styles.cardContent}>
                            <div className={styles.cardNumber}>12</div>
                            <div className={styles.cardText}>待处理指令</div>
                        </div>
                    </div>
                    <div className={styles.imageTextCard}>
                        <div className={styles.cardIcon}>
                            <img src={bgMan5} alt="待审核上报" />
                        </div>
                        <div className={styles.cardContent}>
                            <div className={styles.cardNumber}>10</div>
                            <div className={styles.cardText}>待审核上报</div>
                        </div>
                    </div>
                </div>
            </div>

            {/* B块：中间图表区域 */}
            <div className={styles.blockB}>
                {/* c块：左侧70% */}
                <div className={styles.blockB_c}>
                    <div className={styles.chartHeader}>
                        <div className={styles.sectionHeader}>
                            <div className={styles.titleBar}></div>
                            <div className={styles.titleText}>演练数据统计</div>
                        </div>
                        <Segmented
                            options={['年', '月', '周']}
                            value={timeType}
                            onChange={setTimeType}
                            className={styles.timeFilter}
                        />
                    </div>
                    <div className={styles.chartContent}>
                        <div ref={lineChartRef} className={styles.lineChart}></div>
                    </div>
                </div>
                {/* d块：右侧30% */}
                <div className={styles.blockB_d}>
                    <div className={styles.sectionHeader}>
                        <div className={styles.titleBar}></div>
                        <div className={styles.titleText}>预警类型分布</div>
                    </div>
                    <div className={styles.chartContent}>
                        <div ref={donutChartRef} className={styles.donutChart}></div>
                    </div>
                </div>
            </div>

            {/* C块：底部表格区域 */}
            <div className={styles.blockC}>
                <div className={styles.tableHeader}>
                    <div className={styles.sectionHeader}>
                        <div className={styles.titleBar}></div>
                        <div className={styles.titleText}>事件预警信息</div>
                    </div>
                    <Button 
                        type="primary" 
                        icon={<PlusOutlined />} 
                        className={styles.addButton}
                        onClick={showAddDrawer}
                    >
                        添加预警
                    </Button>
                </div>
                <div className={styles.tableContent}>
                    <StandardTable
                        data={tableData}
                        columns={columns}
                        rowKey="key"
                    />
                </div>
            </div>

            {/* 添加事件预警抽屉 */}
            <Drawer
                title="添加事件预警"
                placement="right"
                onClose={onCloseDrawer}
                open={drawerVisible}
                width={400}
                maskClosable={true}
                className={styles.eventWarningDrawer}
                headerStyle={{
                    backgroundColor: '#F6F7FF',
                    padding: '16px 24px'
                }}
                bodyStyle={{
                    color: '#333333',
                    padding: '24px'
                }}
                footer={
                    <div className={styles.drawerFooter}>
                        <Button 
                            onClick={onCloseDrawer} 
                            className={styles.drawerCancelBtn}
                        >
                            取消
                        </Button>
                        <Button 
                            onClick={handleSubmit}
                            className={styles.drawerSubmitBtn}
                        >
                            提交
                        </Button>
                    </div>
                }
            >
                <Form
                    form={form}
                    layout="vertical"
                    style={{ padding: 0 }}
                >
                    <Form.Item
                        label="预警类型"
                        name="alertType"
                        rules={[{ required: true, message: '请选择预警类型' }]}
                    >
                        <Select placeholder="请选择预警类型">
                            <Select.Option value="气象预警">气象预警</Select.Option>
                            <Select.Option value="火灾隐患">火灾隐患</Select.Option>
                            <Select.Option value="疫情传播">疫情传播</Select.Option>
                            <Select.Option value="化工泄漏">化工泄漏</Select.Option>
                            <Select.Option value="安全事故">安全事故</Select.Option>
                            <Select.Option value="公共卫生">公共卫生</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="预警级别"
                        name="alertLevel"
                        rules={[{ required: true, message: '请选择预警级别' }]}
                    >
                        <Select placeholder="请选择预警级别">
                            <Select.Option value="高级">高级</Select.Option>
                            <Select.Option value="中级">中级</Select.Option>
                            <Select.Option value="低级">低级</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="来源渠道"
                        name="sourceChannel"
                        rules={[{ required: true, message: '请输入来源渠道' }]}
                    >
                        <Input placeholder="请输入来源渠道" />
                    </Form.Item>

                    <Form.Item
                        label="影响区域"
                        name="affectedArea"
                        rules={[{ required: true, message: '请输入影响区域' }]}
                    >
                        <Input placeholder="请输入影响区域" />
                    </Form.Item>

                    <Form.Item
                        label="预警内容"
                        name="alertContent"
                        rules={[{ required: true, message: '请输入预警内容' }]}
                    >
                        <Input.TextArea 
                            placeholder="请输入预警内容..." 
                            rows={6}
                        />
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    );
};

export default EventWarningManagement;