dq-fms/src/pages/business_firewarning/components/DataAnalysisWarning.js

import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, Select, Button, Segmented, Progress, Input } from 'antd';
import { CheckCircleOutlined, ExportOutlined, HeartFilled, LineHeightOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './DataAnalysisWarning.less';

import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';
import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png';
import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png';
import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png';
import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.png';
import eqicon1 from '@/assets/business_basic/eqicon1.png';
import eqicon2 from '@/assets/business_basic/eqicon2.png';
import eqicon3 from '@/assets/business_basic/eqicon3.png';
import eqicon4 from '@/assets/business_basic/eqicon4.png';

const DataAnalysisWarning = () => {
    const chartRef = useRef(null);
    const pieChartRef = useRef(null);
    const faultPieChartRef = useRef(null);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [selectedRows, setSelectedRows] = useState([]);
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 5,
        total: 0,
    });
    const [searchText, setSearchText] = useState('');

    // 柱状图初始化
    useEffect(() => {
        if (pieChartRef.current) {
            const barChart = echarts.init(pieChartRef.current);

            const barOption = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '18%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLabel: {
                        fontSize: 12,
                        color: '#333',
                        interval: 0,
                        rotate: 0
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 35,
                    interval: 5,
                    axisLabel: {
                        fontSize: 12,
                        color: '#666',
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#00001A26',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: '火灾报警',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 20,
                        data: [12, 8, 15, 10, 18, 14, 16, 13, 11, 17, 19, 15],
                        itemStyle: {
                            color: '#8979FF'
                        }
                    },
                    {
                        name: '故障报警',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 20,
                        data: [6, 9, 7, 12, 8, 11, 9, 14, 10, 7, 8, 6],
                        itemStyle: {
                            color: '#FF928A'
                        }
                    },
                    {
                        name: '误报',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 20,
                        data: [3, 5, 4, 7, 6, 8, 5, 9, 7, 4, 6, 5],
                        itemStyle: {
                            color: '#3CC3DF'
                        }
                    }
                ],
                legend: {
                    show: true,
                    top: '8%',
                    left: 'center',
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        fontSize: 12,
                        color: '#333'
                    },
                    data: [
                        {
                            name: '火灾报警',
                            icon: 'rect',
                            itemStyle: {
                                color: '#8979FF'
                            }
                        },
                        {
                            name: '故障报警',
                            icon: 'rect',
                            itemStyle: {
                                color: '#FF928A'
                            }
                        },
                        {
                            name: '误报',
                            icon: 'rect',
                            itemStyle: {
                                color: '#3CC3DF'
                            }
                        }
                    ]
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let result = `${params[0].name}<br/>`;
                        params.forEach(param => {
                            result += `${param.seriesName}: ${param.value}<br/>`;
                        });
                        return result;
                    }
                }
            };

            barChart.setOption(barOption);

            // 响应式调整
            const handleBarResize = () => {
                if (barChart && !barChart.isDisposed()) {
                    barChart.resize();
                }
            };

            window.addEventListener('resize', handleBarResize);

            return () => {
                window.removeEventListener('resize', handleBarResize);
                if (barChart && !barChart.isDisposed()) {
                    barChart.dispose();
                }
            };
        }
    }, []);

    // 设备运行状态趋势折线图初始化
    useEffect(() => {
        if (faultPieChartRef.current) {
            const faultPieChart = echarts.init(faultPieChartRef.current);

            const faultPieOption = {
                legend: {
                    show: true,
                    top: '5%',
                    left: 'center',
                    itemWidth: 20,
                    itemHeight: 8,
                    textStyle: {
                        color: '#333',
                        fontSize: 12
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: '#E5E5E5'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: 12,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: 12,
                        formatter: '{value}%'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#00001A26',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: '正常运行率',
                        type: 'line',
                        data: [85, 78, 92, 88, 95, 90, 87, 93, 89, 91, 86, 88],
                        smooth: false,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            color: '#3CC3DF',
                            width: 1
                        },
                        itemStyle: {
                            color: '#FFF',
                            borderColor: '#3CC3DF',
                            borderWidth: 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)'
                                }]
                            }
                        }
                    },
                    {
                        name: '故障率',
                        type: 'line',
                        data: [15, 22, 8, 12, 5, 10, 13, 7, 11, 9, 14, 12],
                        smooth: false,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            color: '#8979FF',
                            width: 1
                        },
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#8979FF',
                            borderWidth: 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)'
                                }]
                            }
                        }
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: function (params) {
                        let result = `${params[0].name}<br/>`;
                        params.forEach(param => {
                            result += `${param.seriesName}: ${param.value}%<br/>`;
                        });
                        return result;
                    }
                }
            };

            faultPieChart.setOption(faultPieOption);

            // 响应式调整
            const handleFaultPieResize = () => {
                if (faultPieChart && !faultPieChart.isDisposed()) {
                    faultPieChart.resize();
                }
            };

            window.addEventListener('resize', handleFaultPieResize);

            return () => {
                window.removeEventListener('resize', handleFaultPieResize);
                if (faultPieChart && !faultPieChart.isDisposed()) {
                    faultPieChart.dispose();
                }
            };
        }
    }, []);

    useEffect(() => {
        if (chartRef.current) {
            const chart = echarts.init(chartRef.current);

            // 强制初始化时调整大小
            setTimeout(() => {
                if (chart && !chart.isDisposed()) {
                    chart.resize();
                }
            }, 100);

            const option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '4%',
                    left: 'center',
                    itemWidth: 16,
                    itemHeight: 5,
                    textStyle: {
                        fontSize: 12,
                    }
                },
                series: [
                    {
                        name: '设备故障原因',
                        type: 'pie',
                        radius: ['20%', '65%'],
                        center: ['50%', '40%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 8,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         fontSize: 40,
                        //         fontWeight: 'bold'
                        //     }
                        // },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '环境因素（粉尘）', itemStyle: { color: '#44BB5F' } },
                            { value: 735, name: '环境因素（湿度）', itemStyle: { color: '#F8C541' } },
                            { value: 580, name: '设备故障', itemStyle: { color: '#A493FB' } },
                            { value: 484, name: '施工干扰', itemStyle: { color: '#4B69F1' } },
                            { value: 300, name: '其他', itemStyle: { color: '#949FD0' } }
                        ]
                    }
                ]
            };

            chart.setOption(option);

            // 响应式调整 - 使用多种方式监听容器尺寸变化
            let resizeTimer = null;
            const handleResize = () => {
                // 防抖处理，避免频繁调用resize
                if (resizeTimer) {
                    clearTimeout(resizeTimer);
                }
                resizeTimer = setTimeout(() => {
                    if (chart && !chart.isDisposed()) {
                        chart.resize();
                    }
                }, 50); // 减少延迟时间
            };

            // 监听窗口大小变化
            window.addEventListener('resize', handleResize);

            // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
            let resizeObserver = null;
            if (window.ResizeObserver) {
                resizeObserver = new ResizeObserver((entries) => {
                    for (let entry of entries) {
                        // 使用requestAnimationFrame确保在下一帧执行
                        requestAnimationFrame(() => {
                            handleResize();
                        });
                    }
                });
                resizeObserver.observe(chartRef.current);
            }

            // 额外监听父容器的尺寸变化
            const parentContainer = chartRef.current?.parentElement;
            let parentObserver = null;
            if (parentContainer && window.ResizeObserver) {
                parentObserver = new ResizeObserver((entries) => {
                    for (let entry of entries) {
                        requestAnimationFrame(() => {
                            handleResize();
                        });
                    }
                });
                parentObserver.observe(parentContainer);
            }

            // 使用MutationObserver监听DOM结构变化（菜单展开收起时）
            const mutationObserver = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.type === 'attributes' &&
                        (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
                        // 延迟执行，确保DOM更新完成
                        setTimeout(() => {
                            handleResize();
                        }, 200);
                    }
                });
            });

            // 监听整个页面的class和style变化
            mutationObserver.observe(document.body, {
                attributes: true,
                attributeFilter: ['class', 'style'],
                subtree: true
            });

            return () => {
                window.removeEventListener('resize', handleResize);
                if (resizeObserver) {
                    resizeObserver.disconnect();
                }
                if (parentObserver) {
                    parentObserver.disconnect();
                }
                if (mutationObserver) {
                    mutationObserver.disconnect();
                }
                if (resizeTimer) {
                    clearTimeout(resizeTimer);
                }
                if (chart && !chart.isDisposed()) {
                    chart.dispose();
                }
            };
        }
    }, []);

    // 表格列定义
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            width: 60,
            render: (text, record, index) => {
                const page = pagination.current || 1;
                const pageSize = pagination.pageSize || 5;
                const number = (page - 1) * pageSize + index + 1;
                return number;
            }
        },
        {
            title: '区域',
            dataIndex: 'area',
            key: 'area',
            width: 120,
        },
        {
            title: '火灾报警',
            dataIndex: 'fireAlarm',
            key: 'fireAlarm',
            width: 100,
        },
        {
            title: '故障报警',
            dataIndex: 'faultAlarm',
            key: 'faultAlarm',
            width: 100,
        },
        {
            title: '误报',
            dataIndex: 'falseAlarm',
            key: 'falseAlarm',
            width: 100,
        },
        {
            title: '总计',
            dataIndex: 'total',
            key: 'total',
            width: 100,
        },
        {
            title: '同比变化',
            dataIndex: 'yearOverYear',
            key: 'yearOverYear',
            width: 120,
            render: (text) => {
                const isPositive = text.includes('↑');
                const color = isPositive ? '#FF3E48' : '#44BB5F';
                const icon = isPositive ? '↑' : '↓';
                return (
                    <span style={{ color }}>
                        {text}
                    </span>
                );
            }
        },
    ];

    // 模拟数据
    const mockData = [
        {
            key: '1',
            id: '1',
            area: 'A栋',
            fireAlarm: 3,
            faultAlarm: 7,
            falseAlarm: 10,
            total: 23,
            yearOverYear: '↓ 12%',
        },
        {
            key: '2',
            id: '2',
            area: 'B栋',
            fireAlarm: 2,
            faultAlarm: 9,
            falseAlarm: 6,
            total: 18,
            yearOverYear: '↑ 8%',
        },
        {
            key: '3',
            id: '3',
            area: 'C栋',
            fireAlarm: 1,
            faultAlarm: 5,
            falseAlarm: 8,
            total: 16,
            yearOverYear: '↓ 15%',
        },
        {
            key: '4',
            id: '4',
            area: 'D栋',
            fireAlarm: 0,
            faultAlarm: 2,
            falseAlarm: 7,
            total: 11,
            yearOverYear: '↓ 16%',
        },
        {
            key: '5',
            id: '5',
            area: 'E栋',
            fireAlarm: 4,
            faultAlarm: 6,
            falseAlarm: 5,
            total: 15,
            yearOverYear: '↓ 5%',
        },
        {
            key: '6',
            id: '6',
            area: 'F栋',
            fireAlarm: 2,
            faultAlarm: 8,
            falseAlarm: 9,
            total: 19,
            yearOverYear: '↑ 3%',
        },
        {
            key: '7',
            id: '7',
            area: 'G栋',
            fireAlarm: 1,
            faultAlarm: 4,
            falseAlarm: 6,
            total: 11,
            yearOverYear: '↓ 8%',
        },
        {
            key: '8',
            id: '8',
            area: 'H栋',
            fireAlarm: 3,
            faultAlarm: 3,
            falseAlarm: 4,
            total: 10,
            yearOverYear: '↓ 20%',
        },
        {
            key: '9',
            id: '9',
            area: 'I栋',
            fireAlarm: 0,
            faultAlarm: 1,
            falseAlarm: 3,
            total: 4,
            yearOverYear: '↓ 25%',
        },
        {
            key: '10',
            id: '10',
            area: 'J栋',
            fireAlarm: 2,
            faultAlarm: 5,
            falseAlarm: 7,
            total: 14,
            yearOverYear: '↑ 2%',
        },
    ];

    // 初始化数据
    useEffect(() => {
        setPagination(prev => ({ ...prev, total: mockData.length }));
    }, []);

    // 根据分页获取当前页数据
    const getCurrentPageData = () => {
        const { current, pageSize } = pagination;
        const startIndex = (current - 1) * pageSize;
        const endIndex = startIndex + pageSize;
        return mockData.slice(startIndex, endIndex);
    };

    // 表格选择变化
    const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
        setSelectedRowKeys(newSelectedRowKeys);
        setSelectedRows(newSelectedRows);
    };

    // 新增设备按钮点击事件
    const handleAddDevice = () => {
        console.log('新增设备');
        // TODO: 实现新增设备逻辑
    };

    // 导出数据按钮点击事件
    const handleExportData = () => {
        console.log('导出数据');
        // TODO: 实现导出数据逻辑
    };

    // 分页变化处理
    const handleTableChange = (pagination) => {
        setPagination(prev => ({
            ...prev,
            current: pagination.current,
            pageSize: pagination.pageSize,
        }));
    };

    // 搜索处理
    const handleSearchChange = (e) => {
        setSearchText(e.target.value);
        console.log('搜索:', e.target.value);
        // TODO: 实现搜索逻辑，根据设备名称、编号等筛选数据
    };

    return (
        <div className={styles.analysisContainer}>

            <div className={styles.analysisContainerMiddle}>
                <div className={styles.analysisSectionContent}>

                    <div className={styles.analysisMiddleBlock2}>
                        <div className={styles.analysisMiddleBlock2Title}>
                            <div className={styles.analysisTitleLeft}>
                                <div className={styles.analysisTitleIcon}></div>
                                <div>误报原因分析</div>
                            </div>
                        </div>
                        <div className={styles.analysisMiddleBlock2Chart} ref={chartRef}>
                        </div>
                    </div>


                    <div className={styles.analysisMiddleBlock1}>
                        <div className={styles.analysisBlock1Header}>
                            <div className={styles.analysisBlock1Title}>
                                <div className={styles.analysisTitleIcon}></div>
                                报表统计生成
                            </div>
                        </div>
                        <div className={styles.analysisDeviceStatusChart} ref={pieChartRef}>
                        </div>
                    </div>

                    <div className={styles.analysisMiddleBlock12}>
                        <div className={styles.analysisBlock1Header}>
                            <div className={styles.analysisBlock1Title}>
                                <div className={styles.analysisTitleIcon}></div>
                                设备运行状态趋势
                            </div>
                        </div>

                        <div className={styles.analysisDeviceStatusChart} ref={faultPieChartRef}>
                        </div>
                    </div>


                </div>
            </div>

            {/* 底部区域 */}
            <div className={styles.analysisBottom}>
                {/* 左侧维护提醒 */}
                <div className={styles.analysisMaintenanceSection}>
                    <div className={styles.analysisMaintenanceTitle}>
                        <div className={styles.analysisTitleIcon}></div>
                        <div>实时预警信息</div>
                    </div>
                    <div className={styles.analysisMaintenanceContent}>
                        <div className={styles.analysisMaintenanceItem1}>
                            <div className={styles.analysisMaintenanceLeft}>
                                <div className={styles.analysisMaintenanceText1}>电路线路过载预警</div>
                                <div className={styles.analysisMaintenanceText2}>B栋3层配电室丨15分钟前</div>
                                <div className={styles.analysisMaintenanceText3}>电流持续上升，已超过正常阈值</div>
                            </div>
                            <div className={styles.analysisMaintenanceRight}>
                                <div className={styles.analysisMaintenanceStatus}>紧急</div>
                            </div>
                        </div>
                        <div className={styles.analysisMaintenanceItem2}>
                            <div className={styles.analysisMaintenanceLeft}>
                                <div className={styles.analysisMaintenanceText1}>2号防排烟风机异常</div>
                                <div className={styles.analysisMaintenanceText2}>地下车库丨2小时前</div>
                                <div className={styles.analysisMaintenanceText3}>震动频率异常, 建议尽快检修</div>
                            </div>
                            <div className={styles.analysisMaintenanceRight2}>
                                <div className={styles.analysisMaintenanceStatus}>警告</div>
                            </div>
                        </div>
                        <div className={styles.analysisMaintenanceItem3}>
                            <div className={styles.analysisMaintenanceLeft}>
                                <div className={styles.analysisMaintenanceText1}>消防水泵预测维护</div>
                                <div className={styles.analysisMaintenanceText2}>A栋水泵房丨今天</div>
                                <div className={styles.analysisMaintenanceText3}>预计15天后需要维护，请提前安排</div>
                            </div>
                            <div className={styles.analysisMaintenanceRight2}>
                                <div className={styles.analysisMaintenanceStatus2}>提示</div>
                            </div>
                        </div>
                        <div className={styles.analysisMaintenanceItem4}>
                            <div className={styles.analysisMaintenanceLeft}>
                                <div className={styles.analysisMaintenanceText1}>消防水泵预测维护</div>
                                <div className={styles.analysisMaintenanceText2}>A栋水泵房丨今天</div>
                                <div className={styles.analysisMaintenanceText3}>预计15天后需要维护，请提前安排</div>
                            </div>
                            <div className={styles.analysisMaintenanceRight2}>
                                <div className={styles.analysisMaintenanceStatus2}>提示</div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* 右侧表格 */}
                <div className={styles.analysisTableSection}>
                    <div className={styles.analysisTableHeader}>
                        <div className={styles.analysisTableTitle}>
                            <div className={styles.analysisTitleIcon}></div>
                            <div>月度报警统计</div>
                        </div>
                        <div className={styles.analysisTableActions}>
                            <button className={styles.analysisActionButton} onClick={handleExportData}>
                                <span className={styles.analysisButtonIcon}><ExportOutlined /></span>
                                <span>导出数据</span>
                            </button>
                        </div>
                    </div>

                    <div className={styles.analysisTableContainer}>
                        <StandardTable
                            columns={columns}
                            data={{
                                list: getCurrentPageData(),
                                pagination: pagination
                            }}
                            loading={loading}
                            selectionType="checkbox"
                            onSelectRow={onSelectChange}
                            onChange={handleTableChange}
                            pagination={{
                                ...pagination,
                                showSizeChanger: false,
                                showQuickJumper: true,
                                showTotal: (total, range) =>
                                    `共 ${total} 条`,
                            }}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DataAnalysisWarning;