From 67f022d15637e276e8c9018a6629a6a1397dd815 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Tue, 12 May 2026 14:34:58 +0800
Subject: [PATCH] =?UTF-8?q?=20=E5=8F=B3=E4=BE=A7=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JiuZhuZhanQingKuangJieShao.vue            | 286 +++++++++++
 .../xianZhiYanChenBianHua/index.vue           | 203 ++++++++
 frontend/src/modules/waterQuality/index.vue   | 479 ++++++++++++++++++
 frontend/src/permission.ts                    |  14 +-
 .../views/home/shuiDianKaiFaZhuangKuang.vue   |   4 +-
 5 files changed, 976 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
 create mode 100644 frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xianZhiYanChenBianHua/index.vue
 create mode 100644 frontend/src/modules/waterQuality/index.vue

diff --git a/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue b/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
new file mode 100644
index 0000000..e1ac0ce
--- /dev/null
+++ b/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
@@ -0,0 +1,286 @@
+<!-- SidePanelItem.vue -->
+<template>
+    <SidePanelItem title="植物园情况介绍">
+        <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 renderMediaData" :key="index" class="carousel-item">
+                    <!-- 图片 -->
+                    <img :src="item.url" alt="" />
+                    <!-- 说明文字（随媒体项移动） -->
+                    <div class="text">{{ item.text }}</div>
+                </div>
+            </div>
+
+            <!-- 面板指示器（固定在底部右侧） -->
+            <div class="pagination-dots-fixed">
+                <span 
+                    v-for="(dot, index) in originalMediaData" 
+                    :key="index"
+                    class="dot"
+                    :class="{ active: getCurrentRealIndex() === index }"
+                    @click="goToSlide(index)"
+                ></span>
+            </div>
+        </div>
+        
+        <!-- 独立的文字说明区域（随跑马灯切换而变化） -->
+        <div class="description-text">
+            {{ currentDescription }}
+        </div>
+    </SidePanelItem>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'zengZhiZhanJieShaoMod'
+});
+
+// 媒体类型定义
+interface MediaItem {
+    type: 'image' | 'video';
+    url: string;
+    text: string;
+    description: string;
+}
+
+// 原始媒体数据（3条测试数据）
+const originalMediaData = ref<MediaItem[]>([
+    {
+        type: 'image',
+        url: 'https://211.99.26.225:12125/?20230814205611342377136845462200&view=jpg&token=bearer c2e76c28-14db-4a0f-9ff2-10cc3f835920',
+        text: '松岗鱼类增殖站',
+        description: '松岗鱼类增殖放流站位于四川省阿坝藏族羌族自治州马尔康市松岗镇，主要服务于大渡河上游的双江口和金川两座水电站，同时还承担多种珍稀特有鱼类的救护和科研任务，实现工程建设与生态环境共同推进、相互促进。'
+    },
+    {
+        type: 'video',
+        url: 'https://211.99.26.225:12125/?20230805205848575430105387253710&view=jpg&token=bearer c2e76c28-14db-4a0f-9ff2-10cc3f835920', // 视频URL示例，您可替换为真实地址
+        text: '猴子岩鱼类增殖站',
+        description: '猴子岩水电站鱼类增殖放流站位于猴子岩水电站坝址下游约7.0km(业主营地下游约1.5km)，大渡河左岸桃花渣场顶部平台上，紧邻枢纽桃花大桥下游侧，占地面积47.3亩，其中一期工程27.0亩，预留二期工程用地20.3亩(二期工程目前为丹巴、巴底水电站预留工程)增殖放流站工作流程为:亲鱼收集购买、亲鱼驯养培育、人工催产和授精、人工孵化、苗种培育和放流。 猴子岩鱼类增殖放流站近期放流对象中齐口裂腹鱼、重口裂腹鱼、大渡软刺裸裂尻鱼增殖放流技术水平已趋于熟化，中期放流对象大渡软刺裸裂尻鱼人工繁殖技术逐渐趋于熟化'
+    },
+    {
+        type: 'image',
+        url: 'https://211.99.26.225:12125/?20230805205924378504010675106305&view=jpg&token=bearer c2e76c28-14db-4a0f-9ff2-10cc3f835920',
+        text: '黑马鱼类增殖站',
+        description: '大渡河黑马鱼类增殖放流站位于四川省甘洛县黑马乡黑马业主营地内，距离甘洛县城45km,区域交通路况较好。主要承担瀑布沟、深溪沟、大岗山、枕头坝一级、沙坪二级等五座水电站鱼类增殖放流的重任。放流鱼类包含:齐口裂腹鱼、重口裂腹鱼、鲈鲤、长薄鳅、白甲鱼、中华倒刺？、长吻脆、稀有鮊鲫、华鲮、侧沟爬岩鳅等10个种类，共计约918.07万尾珍稀特有鱼苗。'
+    }
+]);
+
+// 克隆首尾项后的渲染数组（用于无缝循环）
+// 结构：[最后一项克隆, 原始数据..., 第一项克隆]
+const renderMediaData = ref<MediaItem[]>([]);
+
+// 当前显示索引（指向renderMediaData）
+const currentIndex = ref(1); // 从1开始，跳过克隆的首项
+
+// 定时器引用
+let timer: any = null;
+
+// 鼠标悬停状态
+const isHovering = ref(false);
+
+// 是否正在切换动画中（用于禁用transition）
+const isTransitioning = ref(false);
+
+// 初始化渲染数组（克隆首尾项）
+const initRenderData = () => {
+    const length = originalMediaData.value.length;
+    if (length === 0) return;
+
+    renderMediaData.value = [
+        originalMediaData.value[length - 1], // 克隆最后一项
+        ...originalMediaData.value,           // 原始数据
+        originalMediaData.value[0]            // 克隆第一项
+    ];
+};
+
+// 启动自动轮播
+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 = originalMediaData.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;
+};
+
+// 计算当前显示的描述文字
+const currentDescription = computed(() => {
+    const realIndex = getCurrentRealIndex();
+    return originalMediaData.value[realIndex]?.description || '';
+});
+
+// 页面加载时执行
+onMounted(() => {
+    initRenderData();
+    startAutoPlay();
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+    if (timer) clearInterval(timer);
+});
+
+// 获取当前真实的索引（排除克隆项的影响）
+const getCurrentRealIndex = () => {
+    const realLength = originalMediaData.value.length;
+    let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
+
+    // 处理边界情况（无缝循环时的克隆项）
+    if (realIndex < 0) realIndex = realLength - 1;
+    if (realIndex >= realLength) realIndex = 0;
+
+    return realIndex;
+};
+
+// 跳转到指定幻灯片
+const goToSlide = (targetIndex: number) => {
+    if (isTransitioning.value) return;
+
+    // 计算目标索引（考虑克隆项偏移）
+    currentIndex.value = targetIndex + 1;
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 100%;
+    height: 228px;
+    // 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; // 防止被压缩
+
+            img,
+            video {
+                width: 100%;
+                height: 100%;
+                object-fit: cover; // 保持比例填充
+            }
+
+            .text {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 22px;
+                line-height: 22px;
+                background: rgba(0, 0, 0, 0.1);
+                color: #fff;
+                padding-left: 10px;
+            }
+        }
+    }
+
+    // 固定的面板指示器
+    .pagination-dots-fixed {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        display: flex;
+        gap: 6px;
+        z-index: 10; // 确保在文字上方
+
+        .dot {
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background-color: #D8D8D8;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+
+            &.active {
+                background-color: #005293;
+            }
+
+            &:hover {
+                opacity: 0.8;
+            }
+        }
+    }
+}
+
+// 独立的文字说明区域
+.description-text {
+    // padding: 8px 12px;
+    font-size: 14px;
+    line-height: 1.5;
+    // min-height: 40px;
+    transition: all 0.3s ease;
+    margin-bottom: 20px;
+    
+    // 多行文本溢出省略
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xianZhiYanChenBianHua/index.vue b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xianZhiYanChenBianHua/index.vue
new file mode 100644
index 0000000..6e33b0f
--- /dev/null
+++ b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xianZhiYanChenBianHua/index.vue
@@ -0,0 +1,203 @@
+<!-- SidePanelItem.vue -->
+<template>
+    <div>
+        <SidePanelItem title="生态流量限值沿程变化" :select="select"  :datetimePicker="datetimePicker" >
+            <!-- 图表容器 -->
+            <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+        </SidePanelItem>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import * as echarts from 'echarts';
+import type { EChartsOption } from 'echarts';
+
+// 定义组件名
+defineOptions({
+    name: 'xieFangFenBu'
+});
+const select = ref({
+    show: true,
+    value: undefined,
+    options: [
+      
+    ]
+});
+const datetimePicker = ref({
+    show: true,
+    value: undefined,
+    format: 'YYYY-MM', //YYYY-MM-DD HH
+    picker: 'month' //date | week | month | quarter | year
+});
+
+// 模拟数据
+const chartData = ref([
+    { stnm: '站点A001', qecLimit: 120.5 },
+    { stnm: '站点B002', qecLimit: 135.8 },
+    { stnm: '站点C003', qecLimit: 98.3 },
+    { stnm: '站点D004', qecLimit: 142.6 },
+    { stnm: '站点E005', qecLimit: 115.2 },
+    { stnm: '站点F006', qecLimit: 128.9 },
+    { stnm: '站点G007', qecLimit: 105.4 },
+    { stnm: '站点H008', qecLimit: 138.7 },
+    { stnm: '站点I009', qecLimit: 122.1 },
+    { stnm: '站点J010', qecLimit: 145.3 },
+    { stnm: '站点K011', qecLimit: 110.6 },
+    { stnm: '站点L012', qecLimit: 132.4 },
+    { stnm: '站点M013', qecLimit: 118.9 },
+    { stnm: '站点N014', qecLimit: 140.2 },
+    { stnm: '站点O015', qecLimit: 125.7 }
+]);
+
+// 流量单位
+const flowUnit = ref('m³/s');
+
+// 生成适中的随机颜色
+const generateModerateColor = () => {
+    const hue = Math.floor(Math.random() * 360);
+    const saturation = 50 + Math.floor(Math.random() * 30); // 50-80%
+    const lightness = 45 + Math.floor(Math.random() * 20);  // 45-65%
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+};
+
+// 图表配置
+const chartOption = computed<EChartsOption>(() => {
+    const dataLength = chartData.value.length;
+    
+    return {
+        legend: {
+            data: ['生态流量限值'],
+            center: true,
+            icon: 'rect',
+            itemHeight: 3
+        },
+        grid: {
+            top: 40,
+            left: 40,
+            right: 20,
+            bottom: 60
+        },
+        tooltip: {
+            trigger: 'axis',
+            confine: true,
+            formatter: function (params: any) {
+                if (!params || params.length === 0) return '';
+                const value = params[0].value ?? '-';
+                return `<h3 style="color:#FFF">${params[0].name}</h3>
+                        <div>${params[0].marker}生态流量限值: &nbsp;&nbsp;&nbsp;&nbsp;<span style="float:right">${value} ${flowUnit.value}</span></div>`;
+            },
+            axisPointer: {
+                type: 'line'
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: chartData.value.map((item: any) => item.stnm),
+            axisLabel: {
+                interval: dataLength > 12 ? 2 : 0,
+                rotate: 0,
+                formatter: (value: string, index: number) => {
+                    const displayText = value.substring(0, 6) + (value.length > 6 ? '...' : '');
+                    
+                    if (dataLength === 2) {
+                        return `{a|${displayText}}`;
+                    } else if (index % 2 !== 0) {
+                        // 奇数索引：上方显示
+                        return `{a|${displayText}}`;
+                    } else {
+                        // 偶数索引：下方显示（通过换行实现错位）
+                        return '\n{b|}' + `{b|${displayText}}`;
+                    }
+                },
+                rich: {
+                    a: {
+                        height: 20,
+                        align: 'center'
+                    },
+                    b: {
+                        height: 30,
+                        align: 'center'
+                    }
+                }
+            },
+            axisTick: {
+                show: false
+            }
+        },
+        yAxis: [{
+            type: 'value',
+            name: `流量(${flowUnit.value})`
+        }],
+        dataZoom: [
+            {
+                type: 'inside',
+                show: false
+            },
+            {
+                type: 'slider',
+                show: false
+            }
+        ],
+        series: [
+            {
+                name: '生态流量限值',
+                type: 'line',
+                data: chartData.value.map((item: any) => item.qecLimit),
+                smooth: false,
+                showSymbol: true,
+                symbolSize: 6
+            }
+        ],
+        color: [generateModerateColor()]
+    };
+});
+
+// 图表实例引用
+let chartInstance: echarts.ECharts | null = null;
+const chartRef = ref<HTMLDivElement>();
+
+// 初始化图表
+const initChart = () => {
+    if (!chartRef.value) {
+        console.warn('图表容器未找到');
+        return;
+    }
+    
+    console.log('开始初始化图表...');
+    chartInstance = echarts.init(chartRef.value);
+    chartInstance.setOption(chartOption.value);
+    console.log('图表初始化完成');
+    
+    // 监听窗口大小变化
+    window.addEventListener('resize', handleResize);
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+    chartInstance?.resize();
+};
+
+// 更新图表配置
+watch(chartOption, (newOption) => {
+    if (chartInstance) {
+        chartInstance.setOption(newOption, true);
+    }
+});
+
+onMounted(() => {
+    initChart();
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResize);
+    chartInstance?.dispose();
+    chartInstance = null;
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/waterQuality/index.vue b/frontend/src/modules/waterQuality/index.vue
new file mode 100644
index 0000000..d8cb6b6
--- /dev/null
+++ b/frontend/src/modules/waterQuality/index.vue
@@ -0,0 +1,479 @@
+<!-- SidePanelItem.vue -->
+
+<template>
+    <SidePanelItem title="沿程水质变化" :datetimePicker="datetimePicker">
+        <div class="chart-container" ref="chartRef"></div>
+    </SidePanelItem>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import type { EChartsOption } from 'echarts';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+    name: 'waterQuality'
+});
+
+// ==================== 响应式数据 ====================
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+// 获取当天早上8:00的时间
+const now = new Date();
+const todayAtEightAM = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0);
+const defaultValue = `${todayAtEightAM.getFullYear()}-${String(todayAtEightAM.getMonth() + 1).padStart(2, '0')}-${String(todayAtEightAM.getDate()).padStart(2, '0')} ${String(todayAtEightAM.getHours()).padStart(2, '0')}:${String(todayAtEightAM.getMinutes()).padStart(2, '0')}`;
+
+const datetimePicker = ref({
+    show: true,
+    value: defaultValue,
+    format: 'YYYY-MM-DD hh:mm',
+    picker: 'date',
+    options: []
+});
+
+// ==================== 可见系列队列（最多2个）====================
+const visibleSeriesQueue = ref<string[]>([]);
+
+// ==================== 模拟数据 ====================
+const generateMockData = () => {
+    const stations = [
+        { stnm: '两河口', stcd: 'ST001', type: '0' },
+        { stnm: '锦屏一级', stcd: 'ST002', type: '1' },
+        { stnm: '桐子林', stcd: 'ST003', type: '0' },
+        { stnm: '溪洛渡', stcd: 'ST004', type: '0' },
+        { stnm: '向家坝', stcd: 'ST005', type: '1' },
+        { stnm: '三峡', stcd: 'ST006', type: '0' },
+        { stnm: '葛洲坝', stcd: 'ST007', type: '0' }
+    ];
+
+    const tm = '2024-01-15 08:00:00';
+
+    return stations.map((station, index) => ({
+        ...station,
+        tm,
+        SORT: index + 1,
+        ph: 7.2 + Math.random() * 0.8,
+        dox: 6.5 + Math.random() * 2.5,
+        codmn: 1.5 + Math.random() * 2.0,
+        nh3n: 0.15 + Math.random() * 0.35,
+        tp: 0.05 + Math.random() * 0.15,
+        tn: 0.8 + Math.random() * 1.2
+    }));
+};
+
+const mockData = ref(generateMockData());
+
+// ==================== 指标配置 ====================
+const indicatorConfig = [
+    { key: 'ph', name: 'pH', unit: '', color: '#5470C6' },
+    { key: 'dox', name: '溶解氧', unit: 'mg/L', color: '#91CC75' },
+    { key: 'codmn', name: '高锰酸盐指数', unit: 'mg/L', color: '#FAC858' },
+    { key: 'nh3n', name: '氨氮', unit: 'mg/L', color: '#EE6666' },
+    { key: 'tp', name: '总磷', unit: 'mg/L', color: '#73C0DE' },
+    { key: 'tn', name: '总氮', unit: 'mg/L', color: '#3BA272' }
+];
+
+// ==================== 图表配置生成 ====================
+const getChartOption = (): EChartsOption => {
+    const data = mockData.value;
+    
+    if (!data || data.length === 0) {
+        return {};
+    }
+
+    // X轴数据（站点名称）
+    const xData = data.map((item, index) => ({
+        value: item.stnm,
+        textStyle: {
+            padding: index % 2 !== 0 ? [16, 0, 0, 0] : 0
+        }
+    }));
+
+    // 电站标记线数据
+    const markLineData: any[] = [];
+    data.forEach((item, index) => {
+        if (item.type === '1') {
+            markLineData.push({ xAxis: index });
+        }
+    });
+
+    // 图例数据
+    const legendData = indicatorConfig.map(item => item.name);
+    
+    // 根据可见队列构建选中状态
+    const selectedState: Record<string, boolean> = {};
+    indicatorConfig.forEach(config => {
+        selectedState[config.name] = visibleSeriesQueue.value.includes(config.name);
+    });
+
+    // Series 数据
+    const seriesData = indicatorConfig.map((config, index) => {
+        const _key = config.key === 'dox' ? 'do' : config.key;
+        return {
+            name: config.name,
+            type: 'line' as const,
+            yAxisIndex: index,
+            smooth: true,
+            connectNulls: true,
+            symbol: 'circle' as const,
+            symbolSize: 6,
+            itemStyle: {
+                color: config.color
+            },
+            data: data.map(item => {
+                const value = item[config.key as keyof typeof item];
+                return typeof value === 'number' && !isNaN(value) ? value : null;
+            }),
+            markLine: index === 0 ? {
+                symbol: ['none', 'none'],
+                label: { show: false },
+                lineStyle: {
+                    color: '#ccc',
+                    type: 'dashed' as const
+                },
+                data: markLineData
+            } : undefined
+        };
+    });
+
+    // Y轴配置（左1右N原则）
+    const yAxisData = indicatorConfig.map((config, index) => {
+        const isLeft = index === 0;
+        const offset = index < 2 ? 0 : (index - 1) * 60;
+        
+        return {
+            type: 'value' as const,
+            name: config.name,
+            position: isLeft ? ('left' as const) : ('right' as const),
+            offset,
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: config.color
+                }
+            },
+            axisLabel: {
+                color: config.color,
+                formatter: (value: number) => {
+                    const decimalCount = (value.toString().split('.')[1] || '').length;
+                    return decimalCount >= 2 ? value.toFixed(1) : value;
+                }
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#e0e0e0',
+                    type: 'solid' as const
+                }
+            },
+            show: selectedState[config.name]
+        };
+    });
+
+    const option: EChartsOption = {
+        tooltip: {
+            trigger: 'axis',
+            confine: true,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            borderColor: 'transparent',
+            textStyle: {
+                color: '#ffffff'
+            },
+            formatter: (params: any) => {
+                if (!params || params.length === 0) return '';
+                
+                const tm = data.find(item => item.stnm === params[0].name)?.tm;
+                let result = tm ? `${new Date(tm).toLocaleString('zh-CN')}<br/>` : '';
+                result += `${params[0].name}<br/>`;
+                
+                params.forEach((param: any) => {
+                    const config = indicatorConfig.find(c => c.name === param.seriesName);
+                    const unit = config?.unit || '';
+                    
+                    if (param.value !== null && param.value !== undefined) {
+                        // 将数值转换为数字类型并判断小数位数
+                        const numValue = Number(param.value);
+                        let displayValue = param.value;
+                        
+                        // 如果是数字且小数位超过2位，则保留两位小数
+                        if (!isNaN(numValue)) {
+                            const decimalPart = param.value.toString().split('.')[1];
+                            if (decimalPart && decimalPart.length > 2) {
+                                displayValue = numValue.toFixed(2);
+                            }
+                        }
+                        
+                        result += `${param.marker}${param.seriesName}：${displayValue}${unit}<br/>`;
+                    }
+                });
+                
+                return result;
+            }
+        },
+        legend: {
+            type: 'scroll',
+            top: 0,
+            data: legendData,
+            selected: selectedState,
+            inactiveColor: '#ccc',
+            itemWidth: 16,
+            itemHeight: 12,
+            itemGap: 8,
+            textStyle: {
+                fontSize: 14
+            }
+        },
+        grid: {
+            top: 60,
+            bottom: 50,
+            left: '20px',
+            right: '20px',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: xData,
+            axisLabel: {
+                interval: 0,
+                color: '#333',
+                fontSize: 12
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#8f8f8f'
+                }
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: '#e0e0e0',
+                    type: 'solid' as const
+                }
+            }
+        },
+        yAxis: yAxisData,
+        series: seriesData
+    };
+
+    return option;
+};
+
+// ==================== 图例选择事件处理（最多2个系列）====================
+const handleLegendSelectChanged = (params: any) => {
+    if (!chartInstance) return;
+    
+    const { selected, name } = params;
+    const clickedName = name;
+    const isNowSelected = selected[clickedName];
+    
+    console.log(`图例点击: ${clickedName}, 当前状态: ${isNowSelected ? '显示' : '隐藏'}`);
+    console.log('当前可见队列:', visibleSeriesQueue.value);
+    
+    if (isNowSelected) {
+        // 用户想要显示这个系列
+        if (visibleSeriesQueue.value.length >= 2) {
+            // 已满2个，移除最早的（队列头部）
+            const removed = visibleSeriesQueue.value.shift();
+            console.log(`已达上限，移除最早系列: ${removed}`);
+        }
+        // 添加到队列尾部
+        if (!visibleSeriesQueue.value.includes(clickedName)) {
+            visibleSeriesQueue.value.push(clickedName);
+        }
+    } else {
+        // 用户想要隐藏这个系列
+        const index = visibleSeriesQueue.value.indexOf(clickedName);
+        if (index > -1) {
+            visibleSeriesQueue.value.splice(index, 1);
+            console.log(`从队列中移除: ${clickedName}`);
+        }
+    }
+    
+    console.log('更新后可见队列:', visibleSeriesQueue.value);
+    
+    // 根据队列构建最终的 selected 状态
+    const finalSelected: Record<string, boolean> = {};
+    indicatorConfig.forEach(config => {
+        finalSelected[config.name] = visibleSeriesQueue.value.includes(config.name);
+    });
+    
+    // 深拷贝当前配置
+    const currentOption = JSON.parse(JSON.stringify(chartInstance.getOption()));
+    
+    // 同步图例选中状态
+    currentOption.legend[0].selected = finalSelected;
+    
+    // 根据图例状态更新 Y 轴显隐
+    const newYAxis = currentOption.yAxis.map((item: any) => {
+        let isShow = false;
+        for (const key in finalSelected) {
+            if (key === item.name) {
+                isShow = finalSelected[key];
+                break;
+            }
+        }
+        return { ...item, show: isShow };
+    });
+    
+    currentOption.yAxis = newYAxis;
+    
+    // 动态调整 Y 轴布局
+    yAxisShowDynamic(finalSelected, currentOption);
+    
+    // 完全替换模式更新
+    try {
+        chartInstance.setOption(currentOption, true);
+        console.log('图表配置已更新');
+    } catch (error) {
+        console.error('图表更新失败:', error);
+    }
+};
+
+// ==================== Y轴动态布局调整 ====================
+const yAxisShowDynamic = (selected: Record<string, boolean>, options: any) => {
+    const allShow = options.yAxis?.filter((item: any) => item.show);
+    const showCount = allShow?.length || 0;
+
+    // 没有显示的Y轴
+    if (showCount === 0) {
+        return;
+    }
+
+    // 只有一个Y轴：统一置于左侧
+    if (showCount === 1) {
+        delete options.grid.right;
+        options.grid.left = '80px';
+
+        options.yAxis = options.yAxis.map((item: any) => {
+            if (item.show) {
+                return {
+                    ...item,
+                    position: 'left',
+                    offset: 0
+                };
+            }
+            return item;
+        });
+        return;
+    }
+
+    // 两个及以上Y轴：左侧1个，右侧其余
+    if (showCount >= 2) {
+        let leftIndex = 0;
+        let rightIndex = 0;
+
+        options.yAxis = options.yAxis.map((item: any) => {
+            if (!item.show) {
+                return item;
+            }
+
+            // 第一个可见的Y轴放在左侧
+            if (leftIndex === 0) {
+                leftIndex++;
+                delete options.grid.right;
+                options.grid.left = '80px';
+
+                return {
+                    ...item,
+                    position: 'left',
+                    offset: 0
+                };
+            } else {
+                // 其余Y轴放在右侧
+                rightIndex++;
+
+                if (rightIndex > 1) {
+                    options.grid.right = '100px';
+                    return {
+                        ...item,
+                        position: 'right',
+                        offset: 60
+                    };
+                } else {
+                    options.grid.right = '60px';
+                    return {
+                        ...item,
+                        position: 'right',
+                        offset: 0
+                    };
+                }
+            }
+        });
+    }
+};
+
+// ==================== 图表初始化 ====================
+const initChart = async () => {
+    if (!chartRef.value) {
+        console.warn('图表容器未就绪');
+        return;
+    }
+
+    // 检查容器尺寸
+    const rect = chartRef.value.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+        console.warn('图表容器尺寸为0，等待渲染...');
+        await new Promise(resolve => setTimeout(resolve, 50));
+        return initChart();
+    }
+
+    // 初始化可见队列：默认只显示第一个系列
+    visibleSeriesQueue.value = [indicatorConfig[0].name];
+    console.log('初始化可见队列:', visibleSeriesQueue.value);
+
+    // 初始化 ECharts 实例
+    chartInstance = echarts.init(chartRef.value);
+
+    // 设置初始配置
+    const option = getChartOption();
+    chartInstance.setOption(option);
+
+    // 监听图例选择变化事件
+    chartInstance.on('legendselectchanged', handleLegendSelectChanged);
+
+    // 强制 resize 确保正确渲染
+    setTimeout(() => {
+        chartInstance?.resize();
+    }, 50);
+
+    console.log('图表初始化成功');
+};
+
+// ==================== 窗口大小变化处理 ====================
+const handleResize = () => {
+    chartInstance?.resize();
+};
+
+// ==================== 生命周期钩子 ====================
+onMounted(async () => {
+    await nextTick();
+    // 增加额外延迟确保容器完全渲染
+    setTimeout(() => {
+        initChart();
+    }, 50);
+
+    window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResize);
+    
+    if (chartInstance) {
+        chartInstance.off('legendselectchanged', handleLegendSelectChanged);
+        chartInstance.dispose();
+        chartInstance = null;
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+    width: 100%;
+    height: 280px;
+    min-height: 231px;
+}
+</style>
diff --git a/frontend/src/permission.ts b/frontend/src/permission.ts
index d4ac5cb..ce1a107 100644
--- a/frontend/src/permission.ts
+++ b/frontend/src/permission.ts
@@ -16,17 +16,17 @@ function normalizeRoutes(routes: any[]): any[] {
   return routes.map(route => {
     // 创建副本以避免直接修改原始数据（可选，视具体需求而定）
     const normalizedRoute = { ...route };
-
+    
     // 修正当前路由的 path
     if (normalizedRoute.path && !normalizedRoute.path.startsWith('/')) {
       normalizedRoute.path = `/${normalizedRoute.path}`;
     }
-
+    
     // 递归修正子路由
     if (normalizedRoute.children && normalizedRoute.children.length > 0) {
       normalizedRoute.children = normalizeRoutes(normalizedRoute.children);
     }
-
+    
     return normalizedRoute;
   });
 }
@@ -55,8 +55,6 @@ router.beforeEach(async (to, from, next) => {
 
   if (userStore.Token) {
     // 登录成功，跳转到首页
-    if (to.path === '/login') {
-      //login
     if (to.path === '/login') {
       //login
       next({ path: '/' });
@@ -84,10 +82,12 @@ router.beforeEach(async (to, from, next) => {
           const { roles } = await userStore.getInfo();
           let accessRoutes: RouteRecordRaw[] =
             await permissionStore.generateRoutes(roles);
-
+          
           // ✅ 关键修复：在添加路由前，标准化所有路径
           accessRoutes = normalizeRoutes(accessRoutes);
 
+          console.log('Normalized Access Routes:', accessRoutes);
+
           accessRoutes.forEach((route: any) => {
             console.log('Adding Route:', route.path);
             router.addRoute(route);
@@ -125,4 +125,4 @@ router.beforeEach(async (to, from, next) => {
 
 router.afterEach(() => {
   NProgress.done();
-});
+});
\ No newline at end of file
diff --git a/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue b/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
index 17d7a41..b81a98d 100644
--- a/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
+++ b/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
@@ -29,14 +29,12 @@ const showMapModal = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "ENG";
   modelStore.title = "三峡 详情信息";
-  modelStore.currentTabKey = "basicInfo";
   modelStore.isBasicEdit = true;
 };
 const showMapModal1 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "zh";
-  modelStore.title = "三峡222 详情信息";
-  modelStore.currentTabKey = "basicInfo";
+  modelStore.title = "水质 详情信息";
   modelStore.isBasicEdit = false;
   // modelStore.modalVisible = true;
   // modelStore.params.sttp = "zh";