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

<!-- SidePanelItem.vue -->
<template>
    <SidePanelItem :title="title" :datetimePicker="datetimePicker" @update-values="handlePanelChange1">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <a-spin tip="加载中..." />
        </div>
        
        <!-- 无数据状态 -->
        <div v-else-if="!hasData" class="empty-container">
            <a-empty description="暂无数据" />
        </div>
        
        <!-- 正常显示图表 -->
        <div v-else 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, watch } from 'vue';
import * as echarts from 'echarts';
import type { ECharts } from 'echarts';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { yearGetYearFpStatistics } from '@/api/gyss';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";

// API 数据类型定义
interface FpFtpStatisticsVo {
    baseId: string;
    baseName: string;
    ftp: string;
    fishName: string;
    fcnt: number;
}

interface BasinData {
    fpCount: number;
    baseId: string;
    baseName: string;
    fpFtpStatitcsVos: FpFtpStatisticsVo[];
}

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

const JidiSelectEventStore = useJidiSelectEventStore();
const baseid = ref('');

const props = defineProps({
    title: { // 标题
        type: String,
        default: '过鱼总量'
    },
});

const datetimePicker = ref({
    show: true,
    value: `${new Date().getFullYear() - 1}`, // 上一年
    format: 'YYYY',
    picker: 'year' as const,
    options: []
});

// 状态管理
const loading = ref<boolean>(false);
const hasData = ref<boolean>(true);

// 数据缓存
const cachedApiData = ref<BasinData[]>([]); // 缓存 API 返回的全量数据
const currentYear = ref<string>(''); // 当前选中的年份

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

// 原始图表数据（多组数据用于跑马灯）
const originalChartData = ref<ChartDataItem[]>([]);

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

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

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

/**
 * 停止自动轮播
 */
const stopAutoPlay = () => {
    if (timer) {
        clearInterval(timer);
        timer = 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: '29%',
                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: 12,
                color: '#666'
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['30%', '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);
});

/**
 * 构建单一流域的图表数据
 */
const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataItem => {
    return {
        title: `${basin.baseName}`,
        data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
            name: fish.fishName,
            value: fish.fcnt
        }))
    };
};

/**
 * 构建全部流域的图表数据（包含流域对比图和各流域鱼类分布图）
 */
const buildAllBasinsChartData = (apiData: BasinData[], year: string): ChartDataItem[] => {
    const charts: ChartDataItem[] = [];
    
    // 1️⃣ 第一张：各流域总量对比图（使用 fpCount）
    const basinComparisonData = apiData
        .filter(basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0)
        .map(basin => ({
            name: basin.baseName,
            value: basin.fpCount
        }));
    
    if (basinComparisonData.length > 0) {
        charts.push({
            title: `总量`,
            data: basinComparisonData
        });
    }
    
    // 2️⃣ 后续：每个流域的鱼类分布图（使用 fcnt）
    apiData.forEach(basin => {
        if (basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0) {
            charts.push(buildSingleBasinChartData(basin, year));
        }
    });
    
    return charts;
};

/**
 * 重新构建图表实例（用于完全重建）
 */
const rebuildCharts = async () => {
    // 销毁旧图表实例
    chartInstances.value.forEach(instance => {
        if (instance) {
            instance.dispose();
        }
    });
    chartInstances.value = [];
    
    // 重新初始化渲染数据
    initRenderData();
    
    // 等待 DOM 更新
    await nextTick();
    
    // 重新初始化所有图表
    setTimeout(() => {
        renderChartData.value.forEach((_, index) => {
            initChart(index);
        });
    }, 100);
};

/**
 * 控制跑马灯的启停
 */
const controlCarousel = () => {
    // 判断是否需要停止跑马灯
    const shouldStop = baseid.value !== 'all' || originalChartData.value.length <= 1;
    
    if (shouldStop) {
        stopAutoPlay(); // 停止轮播，但不重置 currentIndex
    } else {
        startAutoPlay(); // 启动轮播
    }
};

/**
 * 根据当前 baseid 更新图表显示（不请求 API）
 */
const updateChartByBaseid = () => {
    if (!cachedApiData.value.length) {
        hasData.value = false;
        originalChartData.value = [];
        renderChartData.value = []; // 清空渲染数据
        stopAutoPlay(); // 停止轮播
        return;
    }
    
    if (baseid.value === 'all') {
        // === 全部流域模式 ===
        originalChartData.value = buildAllBasinsChartData(cachedApiData.value, currentYear.value);
    } else {
        // === 单一流域模式 ===
        const targetBasin = cachedApiData.value.find(item => item.baseId === baseid.value);
        
        if (!targetBasin || !targetBasin.fpFtpStatitcsVos || targetBasin.fpFtpStatitcsVos.length === 0) {
            hasData.value = false;
            originalChartData.value = [];
            renderChartData.value = []; // 清空渲染数据
            stopAutoPlay(); // 停止轮播
            return;
        }
        
        originalChartData.value = [buildSingleBasinChartData(targetBasin, currentYear.value)];
    }
    
    // 先构建渲染数据
    initRenderData();
    
    // 再设置为有数据状态
    hasData.value = true;
    
    // 等待 DOM 更新后初始化图表
    nextTick(() => {
        // 销毁旧图表实例
        chartInstances.value.forEach(instance => {
            if (instance) {
                instance.dispose();
            }
        });
        chartInstances.value = new Array(renderChartData.value.length).fill(null);
        chartRefs.value = new Array(renderChartData.value.length).fill(null);
        
        setTimeout(() => {
            renderChartData.value.forEach((_, index) => {
                initChart(index);
            });
        }, 100);
    });
    
    controlCarousel(); // 控制跑马灯启停
};

/**
 * 获取并处理图表数据
 */
const getechartsdata = async (yearOne: string) => {
    if (!baseid.value) {
        hasData.value = false;
        originalChartData.value = [];
        renderChartData.value = [];
        stopAutoPlay();
        return;
    }

    // 如果年份没变，且有缓存数据，直接使用缓存
    if (yearOne === currentYear.value && cachedApiData.value.length > 0) {
        updateChartByBaseid();
        return;
    }

    loading.value = true;
    
    try {
        const params = { year: yearOne };
        const res = await yearGetYearFpStatistics(params);
        // axios 返回的结构：res.data 才是真正的业务数据
        const responseData = res.data;
        if (!responseData || responseData.length === 0) {
            console.warn('无有效数据');
            hasData.value = false;
            originalChartData.value = [];
            renderChartData.value = [];
            cachedApiData.value = [];
            currentYear.value = '';
            stopAutoPlay();
            return;
        }
        // debugger
        // 缓存全量数据
        cachedApiData.value = responseData;
        currentYear.value = yearOne;
        // 根据 baseid 更新显示
        updateChartByBaseid();

    } catch (error) {
        console.error('获取过鱼统计数据失败:', error);
        hasData.value = false;
        originalChartData.value = [];
        renderChartData.value = [];
        cachedApiData.value = [];
        currentYear.value = '';
        stopAutoPlay();
    } finally {
        loading.value = false;
    }
};

const handlePanelChange1 = (data: any) => {
    if (data.datetime) {
        getechartsdata(data.datetime); // 年份变化，请求 API
    } else {
        // 置空图表数据，并显示暂无数据
        hasData.value = false;
        originalChartData.value = [];
        renderChartData.value = []; // 清空渲染数据
        cachedApiData.value = []; // 清空缓存
        currentYear.value = '';
        stopAutoPlay(); // 停止轮播
    }
};

watch(
    () => JidiSelectEventStore.selectedItem,
    (newVal) => {
        if (newVal && newVal.wbsCode) {
            baseid.value = newVal.wbsCode;
            
            // 切换流域时，不请求 API，只从缓存中筛选更新显示
            if (cachedApiData.value.length > 0) {
                updateChartByBaseid();
            }
        }
    },
    { deep: true, immediate: true }
);
</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;
                }
            }
        }
    }
}

// 加载状态样式
.loading-container {
    width: 100%;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
}

// 空状态样式
.empty-container {
    width: 100%;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>