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

<!-- SidePanelItem.vue -->
<template>
    <SidePanelItem :title="title" :datetimePicker="datetimePicker">
        <div 
            class="container"
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
        >
            <!-- 跑马灯轨道容器 -->
            <div 
                class="carousel-track"
                :class="{ 'no-transition': isTransitioning }"
                :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
            >
                <!-- 遍历所有图表项（包含克隆项） -->
                <div 
                    v-for="(item, index) in renderChartData" 
                    :key="index"
                    class="carousel-item"
                >
                    <div class="pie-chart-container">
                        <!-- 图表区域 -->
                        <div :ref="el => setChartRef(el, index)" class="chart"></div>
                        <!-- 标题 -->
                        <div class="title">{{ item.title }}</div>
                    </div>
                </div>
            </div>
        </div>
    </SidePanelItem>
</template>

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

// 定义组件名（便于调试和递归）
defineOptions({
    name: 'GYZLLB'
});
const props = defineProps({
    title: { // 标题
        type: String,
        default: '过鱼总量'
    },
});
const datetimePicker = ref({
    show: true,
    value: `${new Date().getFullYear() - 1}`, // 上一年
    format: 'YYYY',
    picker: 'year' as const,
    options: []
});

// 图表相关
interface ChartDataItem {
    title: string;
    data: Array<{ name: string; value: number }>;
}

// 原始图表数据（多组数据用于跑马灯）
const originalChartData = ref<ChartDataItem[]>(
    [
    {
        title: '过鱼总量统计 - 2025年',
        data: [
            { name: '草鱼', value: 1250 },
            { name: '鲢鱼', value: 980 },
            { name: '鳙鱼', value: 760 },
            { name: '青鱼', value: 540 },
            { name: '鲤鱼', value: 430 },
            { name: '鲫鱼', value: 320 },
            { name: '其他', value: 280 }
        ]
    },
    {
        title: '过鱼总量统计 - 2024年',
        data: [
            { name: '草鱼1', value: 1250 },
            { name: '鲢鱼1', value: 980 },
            { name: '鳙鱼1', value: 760 },
            { name: '青鱼1', value: 540 },
            { name: '鲤鱼1', value: 430 },
            { name: '鲫鱼1', value: 320 },
            { name: '其他1', value: 280 }
        ]
    },
    {
        title: '过鱼总量统计 - 2023年',
        data: [
            { name: '草鱼2', value: 1250 },
            { name: '鲢鱼2', value: 980 },
            { name: '鳙鱼2', value: 760 },
            { name: '青鱼2', value: 540 },
            { name: '鲤鱼2', value: 430 },
            { name: '鲫鱼2', value: 320 },
            { name: '其他2', value: 280 }
        ]
    }
]);

// 克隆首尾项后的渲染数组（用于无缝循环）
const renderChartData = ref<ChartDataItem[]>([]);

// 当前显示索引（指向renderChartData）
const currentIndex = ref(1); // 从1开始，跳过克隆的首项

// 定时器引用
let timer: any = null;

// 鼠标悬停状态
const isHovering = ref(false);

// 是否正在切换动画中（用于禁用transition）
const isTransitioning = ref(false);

// 图表实例数组
const chartInstances = ref<(ECharts | null)[]>([]);
const chartRefs = ref<(HTMLElement | null)[]>([]);

// 设置图表ref
const setChartRef = (el: any, index: number) => {
    if (el) {
        chartRefs.value[index] = el;
    }
};

// 单位配置（模拟函数）
const getUnitConfigByCode = (code: string, type: string): { unit: string } => {
    if (type === 'FCNT') {
        return { unit: '尾' };
    } else if (type === 'SL') {
        return { unit: '万尾' };
    }
    return { unit: '尾' };
};

// 生成随机颜色（根据名称）- 生成适中亮度颜色
const generateRandomColor = (names: string[]): string[] => {
    const colors: string[] = [];
    
    names.forEach(() => {
        // 生成 HSL 颜色，控制饱和度和亮度在适中范围
        // H: 0-360 (色相)
        // S: 40-70% (饱和度，避免过于鲜艳或灰暗)
        // L: 45-65% (亮度，避免过亮或过暗)
        const hue = Math.floor(Math.random() * 360);
        const saturation = 40 + Math.floor(Math.random() * 30); // 40-70%
        const lightness = 45 + Math.floor(Math.random() * 20);  // 45-65%
        
        // 将 HSL 转换为 HEX
        const h = hue / 360;
        const s = saturation / 100;
        const l = lightness / 100;
        
        let r, g, b;
        
        if (s === 0) {
            r = g = b = l;
        } else {
            const hue2rgb = (p: number, q: number, t: number) => {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1/6) return p + (q - p) * 6 * t;
                if (t < 1/2) return q;
                if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            };
            
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }
        
        const toHex = (x: number) => {
            const hex = Math.round(x * 255).toString(16);
            return hex.length === 1 ? '0' + hex : hex;
        };
        
        colors.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`);
    });
    
    return colors;
};

// 计算总量
const getTotalAmount = (data: Array<{ name: string; value: number }>) => {
    return data.reduce((sum, item) => sum + item.value, 0);
};

// 获取单位
const getUnit = () => {
    const fyunit = getUnitConfigByCode('FPSSRL_R', 'FCNT')?.unit ?? '尾';
    return fyunit;
};

// 初始化单个图表
const initChart = (index: number) => {
    const chartRef = chartRefs.value[index];
    if (!chartRef) return;

    const rect = chartRef.getBoundingClientRect();
    if (rect.width === 0 || rect.height === 0) {
        console.warn(`图表容器尺寸为0，延迟重试... 索引: ${index}`);
        setTimeout(() => initChart(index), 100);
        return;
    }

    const chartInstance = echarts.init(chartRef);
    chartInstances.value[index] = chartInstance;
    updateChart(index);
};

// 更新单个图表配置
const updateChart = (index: number) => {
    const chartInstance = chartInstances.value[index];
    const chartData = renderChartData.value[index];
    
    if (!chartInstance || !chartData) return;

    const colorNames = chartData.data.map(item => item.name);
    const colors = generateRandomColor(colorNames);
    const totalAmount = getTotalAmount(chartData.data);
    const unit = getUnit();

    const option: echarts.EChartsOption = {
        tooltip: {
            trigger: 'item',
            formatter: `{b}: {c} ${unit} ({d}%)`,
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            borderColor: 'transparent',
            textStyle: {
                color: '#fff',
                fontSize: 12
            }
        },
        title: [
            {
                text: `${totalAmount}`,
                subtext: `总量(${unit})`,
                left: '34%',
                top: '45%',
                textAlign: 'center',
                textVerticalAlign: 'middle',
                textStyle: {
                    fontSize: 24,
                    fontWeight: 'bold',
                    color: '#333',
                },
                subtextStyle: {
                    fontSize: 12,
                    color: '#999',
                    align: 'center',
                }
            }
        ],
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 5,
            top: 'middle',
            bottom: 25,
            itemWidth: 25,
            itemHeight: 13,
            itemGap: 8,
            pageIconColor: '#333',
            pageIconInactiveColor: '#ccc',
            pageIconSize: 12,
            pageFormatter: '{current}/{total}',
            formatter: function(name: string) {
                const found = chartData.data.find(item => item.name === name);
                const value = found ? found.value : '-';
                const maxLength = 7;
                const truncatedName = name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
                return `${truncatedName} ${value}${unit}`;
            },
            textStyle: {
                fontSize: 13,
                color: '#666'
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['35%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 4,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: false
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                    }
                },
                labelLine: {
                    show: false
                },
                data: chartData.data.map((item, idx) => ({
                    ...item,
                    itemStyle: {
                        color: colors[idx]
                    }
                }))
            }
        ]
    };

    chartInstance.setOption(option, true);
};

// 处理窗口大小变化
const handleResize = () => {
    chartInstances.value.forEach(instance => {
        if (instance) {
            instance.resize();
        }
    });
};

// 初始化渲染数组（克隆首尾项）
const initRenderData = () => {
    const length = originalChartData.value.length;
    if (length === 0) return;
    
    renderChartData.value = [
        originalChartData.value[length - 1], // 克隆最后一项
        ...originalChartData.value,           // 原始数据
        originalChartData.value[0]            // 克隆第一项
    ];
    
    // 初始化图表实例数组
    chartInstances.value = new Array(renderChartData.value.length).fill(null);
    chartRefs.value = new Array(renderChartData.value.length).fill(null);
};

// 启动自动轮播
const startAutoPlay = () => {
    if (timer) clearInterval(timer);
    timer = setInterval(() => {
        if (!isHovering.value && !isTransitioning.value) {
            nextSlide();
        }
    }, 4000);
};

// 切换到下一张
const nextSlide = () => {
    currentIndex.value++;
    
    // 延迟检查是否需要无缝跳转
    setTimeout(() => {
        checkSeamlessJump();
    }, 500); // 与transition时间一致
};

// 检查是否需要无缝跳转（克隆项处理）
const checkSeamlessJump = () => {
    const realLength = originalChartData.value.length;
    
    // 如果到达克隆的最后一项（索引 = realLength + 1）
    if (currentIndex.value >= realLength + 1) {
        // 1. 禁用过渡动画，实现瞬间跳转
        isTransitioning.value = true;
        
        // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
        currentIndex.value = 1;
        
        // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                isTransitioning.value = false;
            });
        });
    }
};

// 处理鼠标进入
const handleMouseEnter = () => {
    isHovering.value = true;
};

// 处理鼠标离开
const handleMouseLeave = () => {
    isHovering.value = false;
};

// 页面加载时执行
onMounted(async () => {
    initRenderData();
    
    // 等待DOM渲染完成
    await nextTick();
    setTimeout(() => {
        // 初始化所有图表
        renderChartData.value.forEach((_, index) => {
            initChart(index);
        });
        
        // 监听窗口大小变化
        window.addEventListener('resize', handleResize);
        
        // 启动自动轮播
        startAutoPlay();
    }, 100);
});

// 组件卸载时清理
onUnmounted(() => {
    if (timer) clearInterval(timer);
    
    // 销毁所有图表实例
    chartInstances.value.forEach(instance => {
        if (instance) {
            instance.dispose();
        }
    });
    
    window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 290px;
    // border: 1px solid #7fd6ff;
    border-radius: 5px;
    position: relative;
    overflow: hidden; // 隐藏超出容器的内容
    
    // 跑马灯轨道
    .carousel-track {
        display: flex; // 横向排列所有媒体项
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
        
        // 禁用过渡动画（用于无缝跳转）
        &.no-transition {
            transition: none;
        }
        
        // 单个图表项
        .carousel-item {
            min-width: 100%; // 每个项目占满容器宽度
            height: 100%;
            position: relative;
            flex-shrink: 0; // 防止被压缩
            
            .pie-chart-container {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                padding: 10px;

                .chart {
                    flex: 1;
                    min-height: 0;
                }

                .title {
                    text-align: center;
                    font-size: 14px;
                    color: #333;
                    padding-top: 8px;
                }
            }
        }
    }
}
</style>