dyf-vue-ui/src/views/homeIndex/components/AlarmCount.vue

<template>
    <div class="vchartPage">
        <div ref="chartRef" class="chartRef"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { getMonthlyAlarmStatistics } from '@/api/homeIndex';

const chartRef = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;
let dataTimer: NodeJS.Timeout | null = null;

// 初始化图表
const initChart = () => {
    if (!chartRef.value) return;
    myChart = echarts.init(chartRef.value);
    updateChartData();
    window.addEventListener('resize', handleResize);
};
// 更新图表数据
const updateChartData = () => {
    if (!myChart) return;
    getMonthlyAlarmStatistics({}).then((res) => {
        const monthlyData = res.data.monthlyStatistics || {};
        // 提取1-12月数据并转为数字
        const alarmData = [
            monthlyData.m1,
            monthlyData.m2,
            monthlyData.m3,
            monthlyData.m4,
            monthlyData.m5,
            monthlyData.m6,
            monthlyData.m7,
            monthlyData.m8,
            monthlyData.m9,
            monthlyData.m10,
            monthlyData.m11,
            monthlyData.m12
        ].map(Number);

        const maxValue = Math.max(...alarmData);
        const maxIndex = alarmData.indexOf(maxValue);
        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

        const option = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '10%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: months,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: '#DEEFFF',
                    fontSize: 12
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: '#DEEFFF',
                    fontSize: 12,
                    formatter: '{value}'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)',
                        type: 'dashed'
                    }
                },
                boundaryGap: [0, '30%']
            },
            series: [
                {
                    type: 'line',
                    data: alarmData,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    emphasis: {
                        showSymbol: true,
                        symbolSize: 8
                    },
                    lineStyle: {
                        color: '#22E1DB',
                        width: 2
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(34,225,219, 0.6)' },
                            { offset: 1, color: 'rgba(34,225,219, 0)' }
                        ])
                    },
                    itemStyle: {
                        color: (params: any) => {
                           if (params.dataIndex === maxIndex) {
                                return '#fff'; // 最大值的点标为白色
                            }
                            return '#22E1DB';
                        }
                    },
                    label: {
                        show: (params: any) => params.dataIndex === maxIndex,
                        position: 'top',
                        color: '#22E1DB',
                        formatter: '{c}', // 显示当前数据值
                        fontSize: 12,
                    }
                }
            ],
        };

        myChart.setOption(option);
    }).catch(err => {
        console.error('获取月度报警统计数据失败:', err);
    });
};

const handleResize = () => {
    if (myChart) {
        myChart.resize();
    }
};
// 开始数据定时器
const startDataTimer = () => {
    if (dataTimer) {
        clearInterval(dataTimer);
    }
    // 每300秒（5分钟
    dataTimer = setInterval(updateChartData, 300000);
};

// 清除数据定时器
const clearDataTimer = () => {
    if (dataTimer) {
        clearInterval(dataTimer);
        dataTimer = null;
    }
};

onMounted(() => {
    initChart();
    startDataTimer();
});

onUnmounted(() => {
    // 清除定时器
    clearDataTimer();
    // 移除事件监听
    window.removeEventListener('resize', handleResize);
    // 销毁图表
    if (myChart) {
        myChart.dispose();
        myChart = null;
    }
});
</script>

<style scoped lang="scss">
.vchartPage {
    margin-top: 7.4vh;
}

.chartRef {
    width: 100%;
    height: 24vh;
}
</style>