WholeProcessPlatform/frontend/src/modules/churukushuiwenMod/index.vue

<!-- SidePanelItem.vue -->
<template>
    <SidePanelItem title="出入库水温">
        <div ref="chartContainer" class="chart-container"></div>
    </SidePanelItem>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import SidePanelItem from '@/components/SidePanelItem/index.vue';

// 定义组件名(便于调试和递归)
defineOptions({
    name: 'churukushuiwenMod'
});

const chartContainer = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

// 页面加载时执行的逻辑
onMounted(() => {
    // 延迟初始化,确保 DOM 渲染完成
    setTimeout(() => {
        if (chartContainer.value) {
            initChart();
            window.addEventListener('resize', handleResize);
        }
    }, 100);
});

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
    window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};

const initChart = () => {
    if (!chartContainer.value) return;

    // 检查容器实际高度,如果为 0 则延迟重试
    const containerHeight = chartContainer.value.offsetHeight;
    if (containerHeight === 0) {
        setTimeout(() => initChart(), 100);
        return;
    }

    chartInstance = echarts.init(chartContainer.value);

    const option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            borderColor: 'transparent',
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: 'rgba(91, 143, 249, 0.15)',
                    width: 30,
                    type: 'solid'
                }
            },
            formatter: function(params: any) {
                if (!params || params.length === 0) return '';
                const date = params[0].name;
                let result = `<div style="font-weight: bold; margin-bottom: 8px; font-size: 14px;">${date}</div>`;
                params.forEach((item: any) => {
                    result += `<div style="display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 14px;">
                        <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color};"></span>
                        <span>${item.seriesName}</span>
                        <span style="font-weight: bold; margin-left: auto;">${item.value}°C</span>
                    </div>`;
                });
                return result;
            }
        },
        title: {
            text: '水温(°C)',
            left: 17,
            top: 13,
            textStyle: {
                fontSize: 13,
                color: '#000000',
                fontWeight: 'normal'
            }
        },
        legend: {
            data: ['入库水温', '出库水温'],
            top: 13,
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 20,
            textStyle: {
                fontSize: 13,
                color: '#000000'
            }
        },
        grid: {
            left: '10%',
            right: '5%',
            top: '15%',
            bottom: '18%'
        },
        xAxis: {
            type: 'category',
            data: ['2026-04-01', '2026-04-02', '2026-04-03', '2026-04-04', '2026-04-05', '2026-04-06', '2026-04-07'],
            boundaryGap: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#000000'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#000000',
                fontSize: 13,
                margin: 10,
                interval: 2
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#bfbfbf',
                    type: 'solid'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100,
                minValueSpan: 2,
                zoomOnMouseWheel: true,
                moveOnMouseMove: true,
                moveOnMouseWheel: false,
                zoomLock: false,
                throttle: 50
            }
        ],
        yAxis: {
            type: 'value',
            min: 5.2,
            max: 5.9,
            interval: 0.1,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#000000',
                    width: 1
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#000000',
                    width: 1
                },
                length: 4
            },
            axisLabel: {
                color: '#000000',
                fontSize: 12,
                formatter: '{value}'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#bfbfbf',
                    type: 'solid'
                }
            }
        },
        series: [
            {
                name: '入库水温',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 2,
                    color: '#4b79ab'
                },
                itemStyle: {
                    color: '#4b79ab'
                },
                data: [5.4, 5.3, 5.6, 5.4, 5.5, 5.6, 5.6]
            },
            {
                name: '出库水温',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                lineStyle: {
                    width: 2,
                    color: '#78c300'
                },
                itemStyle: {
                    color: '#78c300'
                },
                data: [5.8, 5.8, 5.8, 5.8, 5.8, 5.8, 5.8]
            }
        ]
    };

    chartInstance.setOption(option);
    
    // 强制重绘,确保图表尺寸正确适配容器
    setTimeout(() => {
        if (chartInstance) {
            chartInstance.resize();
        }
    }, 50);
};
</script>

<style lang="scss" scoped>
.chart-container {
    width: 100%;
    height: 252px;
}
</style>