diff --git a/frontend-sjgl/package.json b/frontend-sjgl/package.json
index fcc7ec75..2f998f0e 100644
--- a/frontend-sjgl/package.json
+++ b/frontend-sjgl/package.json
@@ -3,7 +3,7 @@
   "version": "1.2.0",
   "scripts": {
     "dev": "vite serve --mode development",
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode production",
+    "build": "vite build --mode production",
     "build:mvn": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode production",
     "serve": "vite preview",
     "lint": "eslint src/**/*.{ts,js,vue} --fix",
diff --git a/frontend-sjgl/src/components/MapModal/index.vue b/frontend-sjgl/src/components/MapModal/index.vue
index a169f0e0..87d717d1 100644
--- a/frontend-sjgl/src/components/MapModal/index.vue
+++ b/frontend-sjgl/src/components/MapModal/index.vue
@@ -29,15 +29,10 @@
 
     <!-- Tabs 区域 - 等待加载完成后显示 -->
     <a-tabs v-else :active-key="currentActiveKey" @change="onTabChange">
-      <a-tab-pane v-for="tab in tabsConfig" :key="tab.key" :tab="tab.name">
-      </a-tab-pane>
+      <a-tab-pane v-for="tab in tabsConfig" :key="tab.key" :tab="tab.name"> </a-tab-pane>
       <template #rightExtra v-if="anchor.sttp == 'ENG' || anchor.sttp == 'eng'">
         <a-tooltip :title="!hasPowerStatData ? '该电站无专题配置' : ''">
-          <a-button
-            type="primary"
-            :disabled="!hasPowerStatData"
-            @click="gotoEngTopic"
-          >
+          <a-button type="primary" :disabled="!hasPowerStatData" @click="gotoEngTopic">
             <i class="icon iconfont icon-topic mr-[5px]"></i>
             电站专题
           </a-button></a-tooltip
@@ -90,11 +85,7 @@
           v-show="currentActiveKey === 'WaterTemperature'"
           :is-active="currentActiveKey === 'WaterTemperature'"
           :code="getTabCode('WaterTemperature')"
-          :stcd="
-            getTabCode('WaterTemperature') == 'qxd.tabs.jcsj'
-              ? qxdSelectedStcd
-              : ''
-          "
+          :stcd="getTabCode('WaterTemperature') == 'qxd.tabs.jcsj' ? qxdSelectedStcd : ''"
           :wt-config="modelStore.wtConfig"
         />
         <!-- 监测数据 - 垂向水温 ✅️ -->
@@ -108,11 +99,7 @@
           v-show="currentActiveKey === 'WaterQuality'"
           :is-active="currentActiveKey === 'WaterQuality'"
           :code="getTabCode('WaterQuality')"
-          :stcd="
-            getTabCode('WaterQuality') == 'qxd.tabs.szjc'
-              ? qxdSelectedStcdWq
-              : ''
-          "
+          :stcd="getTabCode('WaterQuality') == 'qxd.tabs.szjc' ? qxdSelectedStcdWq : ''"
           :wq-show="modelStore.wqShow"
         />
         <!-- 监测数据 - 水电站告警情况 -->
@@ -132,11 +119,7 @@
           :is-active="currentActiveKey === 'FlowMeasure'"
           :url="getTabUrl('FlowMeasure')"
           :code="getTabCode('FlowMeasure')"
-          :stcd="
-            getTabCode('FlowMeasure') == 'qxd.tabs.lcjs'
-              ? qxdSelectedStcdZq
-              : ''
-          "
+          :stcd="getTabCode('FlowMeasure') == 'qxd.tabs.lcjs' ? qxdSelectedStcdZq : ''"
         />
         <!-- 在线监测数据 -->
         <FishFacilityMonitorData
@@ -247,46 +230,46 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed, toRef } from 'vue';
+import { ref, watch, computed, toRef } from "vue";
 // 导入预定义的 Tab 内容组件
-import BasicInfo from './components/BasicInfo.vue'; // 基本信息
-import VideoInfo from './components/videoInfo.vue'; // 实时视频
-import NoLiveVideo from './components/NoLiveVideo.vue'; // 录像视频
-import PanoramaInfo from './components/PanoramaInfo.vue'; // 全景影像
-import MonitorInfo from './components/MonitorInfo.vue'; // 电站运行过程线
-import WaterTemperature from './components/WaterTemperature.vue'; // 水温
-import VerticalWaterTemperature from './components/VerticalWaterTemperature.vue'; // 垂向水温
-import WaterQuality from './components/WaterQuality.vue'; // 水质
-import AIYXSB from './components/AIYXSB/index.vue'; // AI运行识别
-import EarlyWarningAlert from './components/EarlyWarningAlert.vue'; // 预警提示
-import FlowMeasure from './components/FlowMeasure.vue'; // 流量监测
-import FishFacilityMonitorData from './components/FishFacilityMonitorData.vue'; // 在线监测数据
-import FishFacilityRunState from './components/FishFacilityRunState.vue'; // 运行情况
-import FlowDischarge from './components/FlowDischarge.vue'; // 生态流量泄放设施 - 监测数据
-import FishFacilityBuildState from './components/FishFacilityBuildState.vue'; // 建设情况
+import BasicInfo from "./components/BasicInfo.vue"; // 基本信息
+import VideoInfo from "./components/videoInfo.vue"; // 实时视频
+import NoLiveVideo from "./components/NoLiveVideo.vue"; // 录像视频
+import PanoramaInfo from "./components/PanoramaInfo.vue"; // 全景影像
+import MonitorInfo from "./components/MonitorInfo.vue"; // 电站运行过程线
+import WaterTemperature from "./components/WaterTemperature.vue"; // 水温
+import VerticalWaterTemperature from "./components/VerticalWaterTemperature.vue"; // 垂向水温
+import WaterQuality from "./components/WaterQuality.vue"; // 水质
+import AIYXSB from "./components/AIYXSB/index.vue"; // AI运行识别
+import EarlyWarningAlert from "./components/EarlyWarningAlert.vue"; // 预警提示
+import FlowMeasure from "./components/FlowMeasure.vue"; // 流量监测
+import FishFacilityMonitorData from "./components/FishFacilityMonitorData.vue"; // 在线监测数据
+import FishFacilityRunState from "./components/FishFacilityRunState.vue"; // 运行情况
+import FlowDischarge from "./components/FlowDischarge.vue"; // 生态流量泄放设施 - 监测数据
+import FishFacilityBuildState from "./components/FishFacilityBuildState.vue"; // 建设情况
 // 鱼类增殖站
-import NormalOperationData from './components/NormalOperationData/index.vue'; // 运行数据
-import ProcessDiagram from './components/ProcessDiagram.vue'; // 过程图
-import NormalAddedSituation from './components/NormalAddedSituation.vue'; // 增值放流情况
-import NormalResearchSituation from './components/NormalResearchSituation.vue'; // 科研情况
+import NormalOperationData from "./components/NormalOperationData/index.vue"; // 运行数据
+import ProcessDiagram from "./components/ProcessDiagram.vue"; // 过程图
+import NormalAddedSituation from "./components/NormalAddedSituation.vue"; // 增值放流情况
+import NormalResearchSituation from "./components/NormalResearchSituation.vue"; // 科研情况
 // 珍惜植物园
-import NormalDataMonitoring2 from './components/NormalDataMonitoring2.vue'; // 运行数据
+import NormalDataMonitoring2 from "./components/NormalDataMonitoring2.vue"; // 运行数据
 // 野生动物检测 -现场录像
-import liveFootage from './components/liveFootage.vue'; // 现场录像
-import onSitePhoto from './components/onSitePhoto.vue'; // 现场照片
+import liveFootage from "./components/liveFootage.vue"; // 现场录像
+import onSitePhoto from "./components/onSitePhoto.vue"; // 现场照片
 /// 动物救助站
-import Normal from './components/Normal.vue'; // 监测数据
+import Normal from "./components/Normal.vue"; // 监测数据
 // 水生生态调查断面
-import Ecology from './components/Ecology.vue'; // 监测数据
+import Ecology from "./components/Ecology.vue"; // 监测数据
 // 水电站告警情况
-import DZGJ from './components/DZGJ.vue'; // 水电站告警情况
+import DZGJ from "./components/DZGJ.vue"; // 水电站告警情况
 
-import FishZHFX from './components/FishZHFX.vue'; // 鱼类繁殖适宜性分析
-import EcologicalFlow from './components/EcologicalFlow.vue'; // 生态流量
-import Attachment from './components/Attachment.vue'; // 查看报告/批复文件
-import WaterTemperatureRep from './components/WaterTemperatureRep.vue'; // 水温对比数据
-import { useModelStore } from '@/store/modules/model';
-import { handleTabs } from './setting.config';
+import FishZHFX from "./components/FishZHFX.vue"; // 鱼类繁殖适宜性分析
+import EcologicalFlow from "./components/EcologicalFlow.vue"; // 生态流量
+import Attachment from "./components/Attachment.vue"; // 查看报告/批复文件
+import WaterTemperatureRep from "./components/WaterTemperatureRep.vue"; // 水温对比数据
+import { useModelStore } from "@/store/modules/model";
+import { handleTabs } from "./setting.config";
 import {
   getMonitorDataWt,
   getMonitorDataWq,
@@ -298,9 +281,9 @@ import {
   getVideoList,
   getMonitorDataWaterTempPowerStation,
   getMonitorDataWaterTempPowerStation2,
-  checkPowerStationTopic
-} from '@/api/mapModal';
-import { useDraggable } from '@/utils/drag';
+  checkPowerStationTopic,
+} from "@/api/mapModal";
+import { useDraggable } from "@/utils/drag";
 // import { useRouter } from 'vue-router';
 
 const modelStore = useModelStore();
@@ -312,7 +295,7 @@ const isLoading = ref(true);
 // 电站专题配置数据状态
 const hasPowerStatData = ref(false);
 // 电站专题 URL 参数（仅 hbb）
-const hbbSearchParams = '?menu=dianZhanZhuanTi&page=dianZhanZhuanTi';
+const hbbSearchParams = "?menu=dianZhanZhuanTi&page=dianZhanZhuanTi";
 // 判断当前是否在电站专题页面
 const isPowerStatPage = computed(() => {
   return window.location.search === hbbSearchParams;
@@ -331,26 +314,26 @@ const checkPowerStationTopicData = async (stcd: string) => {
   try {
     const res = await checkPowerStationTopic({
       filter: {
-        logic: 'and',
+        logic: "and",
         filters: [
           {
-            field: 'stcd',
-            operator: 'eq',
-            dataType: 'string',
-            value: stcd
+            field: "stcd",
+            operator: "eq",
+            dataType: "string",
+            value: stcd,
           },
           {
-            field: 'bclData',
-            operator: 'contains',
-            dataType: 'string',
-            value: 'image/png'
-          }
-        ]
-      }
+            field: "bclData",
+            operator: "contains",
+            dataType: "string",
+            value: "image/png",
+          },
+        ],
+      },
     });
     hasPowerStatData.value = res?.data?.data && res?.data?.data?.length > 0;
   } catch (error) {
-    console.error('查询电站专题配置失败:', error);
+    console.error("查询电站专题配置失败:", error);
     hasPowerStatData.value = false;
   }
 };
@@ -377,14 +360,14 @@ const gotoEngTopic = () => {
   // 使用 Vue Router 跳转
   // router.push(url);
   */
-  console.log('电站专题跳转（暂未实现）:', modelStore.params.stcd);
+  console.log("电站专题跳转（暂未实现）:", modelStore.params.stcd);
 };
 
 // 环境判断变量（与 React 版本对齐）
-const app = 'hbb'; // 模拟 React 中的 Session.getAppCode()
-const env = 'hbb'; // 模拟 React 中的 window.__env__
-const isLCJ = env?.startsWith('lcj');
-const sttpList = ['ENG', 'WT', 'WQ', 'FP', 'FB', 'VP', 'DW', 'EQ', 'VA'];
+const app = "hbb"; // 模拟 React 中的 Session.getAppCode()
+const env = "hbb"; // 模拟 React 中的 window.__env__
+const isLCJ = env?.startsWith("lcj");
+const sttpList = ["ENG", "WT", "WQ", "FP", "FB", "VP", "DW", "EQ", "VA"];
 
 // ==================== 异步 Tab 过滤逻辑 ====================
 // 功能8: 鱼类栖息地数据类型检查 (React: isLCJ && sttpCode === 'WE')
@@ -395,20 +378,18 @@ const checkFishTab = async (stcd: string) => {
     if (data && data.length > 0) {
       modelStore.fishTabInfo = data[0];
       // 根据 hasWt/hasWq/hasFv 过滤 FlowMeasure 的子 Tab
-      const flowTab = tabsConfig.value.find(
-        (item: any) => item.key === 'FlowMeasure'
-      );
+      const flowTab = tabsConfig.value.find((item: any) => item.key === "FlowMeasure");
       if (flowTab && flowTab.tabs) {
         flowTab.tabs = flowTab.tabs.filter((tab: any) => {
-          if (tab.name === '水温(℃)' && !data[0].hasWt) return false;
-          if (tab.name === '水质' && !data[0].hasWq) return false;
-          if (tab.name === '流速(m/s)' && !data[0].hasFv) return false;
+          if (tab.name === "水温(℃)" && !data[0].hasWt) return false;
+          if (tab.name === "水质" && !data[0].hasWq) return false;
+          if (tab.name === "流速(m/s)" && !data[0].hasFv) return false;
           return true;
         });
       }
     }
   } catch (error) {
-    console.error('鱼类数据检查失败:', error);
+    console.error("鱼类数据检查失败:", error);
   }
 };
 
@@ -417,25 +398,25 @@ const checkAnalysisAvailability = async (stcd: string) => {
   try {
     const filter = {
       filter: {
-        logic: 'and',
+        logic: "and",
         filters: [
-          { field: 'stcd', operator: 'eq', value: stcd },
-          { field: 'mway', operator: 'eq', value: '2' },
-          { field: 'dtinType', operator: 'eq', value: '0' },
+          { field: "stcd", operator: "eq", value: stcd },
+          { field: "mway", operator: "eq", value: "2" },
+          { field: "dtinType", operator: "eq", value: "0" },
           {
-            logic: 'or',
+            logic: "or",
             filters: [
-              { field: 'engLctn3Code', operator: 'isnotnull' },
-              { field: 'engLctn1Code', operator: 'isnotnull' }
-            ]
-          }
-        ]
-      }
+              { field: "engLctn3Code", operator: "isnotnull" },
+              { field: "engLctn1Code", operator: "isnotnull" },
+            ],
+          },
+        ],
+      },
     };
     const res = await checkAnalysisShow(filter);
     modelStore.wqShow = !!res?.data;
   } catch (error) {
-    console.error('水质 AI 预测检查失败:', error);
+    console.error("水质 AI 预测检查失败:", error);
     modelStore.wqShow = false;
   }
 };
@@ -448,26 +429,26 @@ const checkWaterTempConfig = async (stcd: string) => {
       getMonitorDataWaterTempPowerStation2({ stcd }),
       getBuildState({
         filter: {
-          logic: 'and',
-          filters: [{ field: 'stcd', operator: 'eq', value: stcd }]
-        }
-      })
+          logic: "and",
+          filters: [{ field: "stcd", operator: "eq", value: stcd }],
+        },
+      }),
     ]);
 
     modelStore.wtConfig = {
       ioWtrv: configRes?.data?.ioWtrv,
-      hasRstcdWtvt: dwRes?.data
+      hasRstcdWtvt: dwRes?.data,
     };
 
     // 检查出入库水温对比
     const buildData = buildRes?.data?.[0];
     if (!buildData?.engIwtCode && !buildData?.engDwtCode) {
       tabsConfig.value = tabsConfig.value.filter(
-        (item: any) => item.name !== '出入库水温对比'
+        (item: any) => item.name !== "出入库水温对比"
       );
     }
   } catch (error) {
-    console.error('水温配置检查失败:', error);
+    console.error("水温配置检查失败:", error);
   }
 };
 
@@ -476,28 +457,23 @@ const checkBuildState = async (stcd: string) => {
   try {
     const res = await getBuildState({
       filter: {
-        logic: 'and',
-        filters: [{ field: 'stcd', operator: 'eq', value: stcd }]
-      }
+        logic: "and",
+        filters: [{ field: "stcd", operator: "eq", value: stcd }],
+      },
     });
 
     const buid = res?.data?.[0]?.bldsttCcode;
     // 0 未建  1 在建  2 已建
-    const zj = ['基础信息', '实时视频', '全景影像', '查看报告'];
-    const wj = ['基础信息', '查看报告'];
+    const zj = ["基础信息", "实时视频", "全景影像", "查看报告"];
+    const wj = ["基础信息", "查看报告"];
 
     if (res?.data?.length > 0) {
-      const zJTabData = tabsConfig.value?.filter((item: any) =>
-        zj.includes(item.name)
-      );
-      const wJTabData = tabsConfig.value?.filter((item: any) =>
-        wj.includes(item.name)
-      );
-      tabsConfig.value =
-        buid == 1 ? zJTabData : buid == 0 ? wJTabData : tabsConfig.value;
+      const zJTabData = tabsConfig.value?.filter((item: any) => zj.includes(item.name));
+      const wJTabData = tabsConfig.value?.filter((item: any) => wj.includes(item.name));
+      tabsConfig.value = buid == 1 ? zJTabData : buid == 0 ? wJTabData : tabsConfig.value;
     }
   } catch (error) {
-    console.error('建设状态检查失败:', error);
+    console.error("建设状态检查失败:", error);
   }
 };
 
@@ -507,17 +483,17 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
 
   try {
     // 1. 电站建设状态过滤
-    if (modelStore.params.sttp == 'ENG' && modelStore.params.eqtp != 'QEC') {
+    if (modelStore.params.sttp == "ENG" && modelStore.params.eqtp != "QEC") {
       const res = await getBuildState({
         filter: {
-          logic: 'and',
-          filters: [{ field: 'stcd', operator: 'eq', value: stcd }]
-        }
+          logic: "and",
+          filters: [{ field: "stcd", operator: "eq", value: stcd }],
+        },
       });
 
       const buid = res?.data?.[0]?.bldsttCcode;
-      const zj = ['基础信息', '实时视频', '全景影像', '查看报告'];
-      const wj = ['基础信息', '查看报告'];
+      const zj = ["基础信息", "实时视频", "全景影像", "查看报告"];
+      const wj = ["基础信息", "查看报告"];
 
       if (res?.data?.length > 0) {
         const zJTabData = tabs?.filter((item: any) => zj.includes(item.name));
@@ -531,20 +507,16 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
     let newTabs = [...tabs];
     if (res4 && res4.data && res4.data.relList) {
       const relList = res4.data.relList;
-      const jianCei = relList.find((item: any) => item.sttpCode === 'WTVT');
-      const aiShiBie = relList.filter((item: any) =>
-        item?.sttpCode?.startsWith('AI')
-      );
+      const jianCei = relList.find((item: any) => item.sttpCode === "WTVT");
+      const aiShiBie = relList.filter((item: any) => item?.sttpCode?.startsWith("AI"));
 
       if (!jianCei) {
-        newTabs = newTabs.filter(
-          item => item.type !== 'VerticalWaterTemperature'
-        );
+        newTabs = newTabs.filter((item) => item.type !== "VerticalWaterTemperature");
       } else {
         modelStore.verticalWaterStcd = jianCei.stcd;
       }
       if (!aiShiBie.length) {
-        newTabs = newTabs.filter(item => item.type !== 'AIYXSB');
+        newTabs = newTabs.filter((item) => item.type !== "AIYXSB");
       } else {
         modelStore.aiSites = aiShiBie;
       }
@@ -553,65 +525,65 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
     // 3. 视频存在性检查
     let params = {
       filter: {
-        logic: 'and',
+        logic: "and",
         filters: [
           {
-            field: 'sttpCode',
-            operator: 'startswith',
-            value: 'VD_'
+            field: "sttpCode",
+            operator: "startswith",
+            value: "VD_",
           },
           {
-            logic: 'or',
+            logic: "or",
             filters: [
               {
-                field: 'rstcd',
-                operator: 'eq',
-                dataType: 'string',
-                value: stcd
+                field: "rstcd",
+                operator: "eq",
+                dataType: "string",
+                value: stcd,
               },
               {
-                field: 'stcd',
-                operator: 'eq',
-                dataType: 'string',
-                value: stcd
+                field: "stcd",
+                operator: "eq",
+                dataType: "string",
+                value: stcd,
               },
               {
-                field: 'fhstcd',
-                operator: 'eq',
-                dataType: 'string',
-                value: stcd
+                field: "fhstcd",
+                operator: "eq",
+                dataType: "string",
+                value: stcd,
               },
               {
-                field: 'stCode',
-                operator: 'eq',
-                dataType: 'string',
-                value: stcd
-              }
-            ]
-          }
-        ]
+                field: "stCode",
+                operator: "eq",
+                dataType: "string",
+                value: stcd,
+              },
+            ],
+          },
+        ],
       },
-      select: ['stcd', 'stnm', 'sttpCode', 'sttpName', 'playWay', 'url'],
+      select: ["stcd", "stnm", "sttpCode", "sttpName", "playWay", "url"],
       sort: [
         {
-          field: 'stnm',
-          dir: 'asc'
-        }
-      ]
+          field: "stnm",
+          dir: "asc",
+        },
+      ],
     };
     const res2 = await getVideoList(params);
-    console.log('', modelStore.params.sttp);
+    console.log("", modelStore.params.sttp);
     if (
       res2?.data?.data?.length > 0 ||
       res2?.data?.records?.length > 0 ||
-      modelStore.params.sttp == 'WQ'
+      modelStore.params.sttp == "WQ"
     ) {
       tabsConfig.value = newTabs;
     } else {
-      tabsConfig.value = newTabs.filter((item: any) => item.type != 'video');
+      tabsConfig.value = newTabs.filter((item: any) => item.type != "video");
     }
   } catch (error) {
-    console.error('QGC Tab 过滤失败:', error);
+    console.error("QGC Tab 过滤失败:", error);
   }
 };
 
@@ -628,38 +600,36 @@ const applyTabFilters = async (params: any) => {
     if (!stcd) return;
 
     // 按照 React 的分支逻辑执行（注意运算符优先级）
-    if (isLCJ && sttpCode === 'VP') {
+    if (isLCJ && sttpCode === "VP") {
       // LCJ 珍稀植物园视频检查
       const res = await getVideoList({
         filter: {
-          logic: 'and',
-          filters: [{ field: 'stcd', operator: 'eq', value: stcd }]
-        }
+          logic: "and",
+          filters: [{ field: "stcd", operator: "eq", value: stcd }],
+        },
       });
       if (!res?.data?.data?.length && !res?.data?.records?.length) {
-        tabsConfig.value = tabsConfig.value.filter(
-          item => item.name != '实时视频'
-        );
+        tabsConfig.value = tabsConfig.value.filter((item) => item.name != "实时视频");
       }
-    } else if (isLCJ && sttpCode === 'WE') {
+    } else if (isLCJ && sttpCode === "WE") {
       // LCJ 鱼类栖息地数据类型检查
       await checkFishTab(stcd);
-    } else if (sttpCode === 'WQ' || sttpCode === 'WQFB' || sttpCode === 'wq') {
+    } else if (sttpCode === "WQ" || sttpCode === "WQFB" || sttpCode === "wq") {
       // 水质 AI 预测检查（React 逻辑：WQ 需要条件，WQFB/wq 无条件）
       await checkAnalysisAvailability(stcd);
-    } else if (sttpCode === 'WT' || sttpCode === 'wt') {
+    } else if (sttpCode === "WT" || sttpCode === "wt") {
       // 水温站特殊处理（React 逻辑：WT 需要条件，wt 无条件）
       await checkWaterTempConfig(stcd);
     } else if (
       sttpList.includes(sttpCode?.toUpperCase()) ||
-      sttpCode?.startsWith('FP_') ||
-      sttpCode?.includes('DW')
+      sttpCode?.startsWith("FP_") ||
+      sttpCode?.includes("DW")
     ) {
       // QGC 完整 Tab 过滤（包含建设状态、垂向水温、AI识别、视频检查）
       await setQGCTabList(tabsConfig.value, stcd);
     }
   } catch (error) {
-    console.error('Tab 过滤逻辑执行失败:', error);
+    console.error("Tab 过滤逻辑执行失败:", error);
   } finally {
     isLoading.value = false; // 无论成功失败都停止加载
   }
@@ -675,31 +645,31 @@ const qxdConfigMap: Record<
     selectProp: string;
   }
 > = {
-  'qxd.tabs.jcsj': {
+  "qxd.tabs.jcsj": {
     // 水温
-    sttpCode: 'WTRV',
+    sttpCode: "WTRV",
     apiFn: getMonitorDataWt,
-    selectProp: 'qxdSelectedStcd'
+    selectProp: "qxdSelectedStcd",
   },
-  'qxd.tabs.szjc': {
+  "qxd.tabs.szjc": {
     // 水质
-    sttpCode: 'WQ',
+    sttpCode: "WQ",
     apiFn: getMonitorDataWq,
-    selectProp: 'qxdSelectedStcdWq'
+    selectProp: "qxdSelectedStcdWq",
   },
-  'qxd.tabs.lcjs': {
+  "qxd.tabs.lcjs": {
     // 流量监测
-    sttpCode: 'ZQ',
+    sttpCode: "ZQ",
     apiFn: getMonitorDataZq,
-    selectProp: 'qxdSelectedStcdZq'
-  }
+    selectProp: "qxdSelectedStcdZq",
+  },
 };
 
 // 各模式的站点选项和选中值
 const qxdStationOptions = ref<{ label: string; value: string }[]>([]);
-const qxdSelectedStcd = ref<string>('');
-const qxdSelectedStcdWq = ref<string>('');
-const qxdSelectedStcdZq = ref<string>('');
+const qxdSelectedStcd = ref<string>("");
+const qxdSelectedStcdWq = ref<string>("");
+const qxdSelectedStcdZq = ref<string>("");
 const qxdLoadedCodes = ref<Set<string>>(new Set());
 
 // 获取当前tab对应的qxd配置
@@ -711,16 +681,16 @@ const getCurrentQxdConfig = (tabKey: string) => {
 // 获取选中的stcd
 const getQxdSelectedStcd = (tabKey: string) => {
   const config = getCurrentQxdConfig(tabKey);
-  if (!config) return '';
+  if (!config) return "";
   switch (config.selectProp) {
-    case 'qxdSelectedStcd':
+    case "qxdSelectedStcd":
       return qxdSelectedStcd.value;
-    case 'qxdSelectedStcdWq':
+    case "qxdSelectedStcdWq":
       return qxdSelectedStcdWq.value;
-    case 'qxdSelectedStcdZq':
+    case "qxdSelectedStcdZq":
       return qxdSelectedStcdZq.value;
     default:
-      return '';
+      return "";
   }
 };
 
@@ -729,13 +699,13 @@ const setQxdSelectedStcd = (tabKey: string, value: string) => {
   const config = getCurrentQxdConfig(tabKey);
   if (!config) return;
   switch (config.selectProp) {
-    case 'qxdSelectedStcd':
+    case "qxdSelectedStcd":
       qxdSelectedStcd.value = value;
       break;
-    case 'qxdSelectedStcdWq':
+    case "qxdSelectedStcdWq":
       qxdSelectedStcdWq.value = value;
       break;
-    case 'qxdSelectedStcdZq':
+    case "qxdSelectedStcdZq":
       qxdSelectedStcdZq.value = value;
       break;
   }
@@ -751,30 +721,30 @@ const loadQxdStationList = async (tabKey: string) => {
   try {
     const params = {
       filter: {
-        logic: 'and',
+        logic: "and",
         filters: [
           {
-            field: 'fhstcd',
-            operator: 'eq',
-            dataType: 'string',
-            value: modelStore.params.stcd
+            field: "fhstcd",
+            operator: "eq",
+            dataType: "string",
+            value: modelStore.params.stcd,
           },
           {
-            field: 'sttpCode',
-            operator: 'eq',
-            dataType: 'string',
-            value: config.sttpCode
-          }
-        ]
+            field: "sttpCode",
+            operator: "eq",
+            dataType: "string",
+            value: config.sttpCode,
+          },
+        ],
       },
-      select: ['stcd', 'stnm']
+      select: ["stcd", "stnm"],
     };
     const res = await config.apiFn(params);
     const stations = res?.data?.data || res?.data?.records || [];
     if (stations.length > 0) {
       qxdStationOptions.value = stations.map((item: any) => ({
         label: item.stnm,
-        value: item.stcd
+        value: item.stcd,
       }));
       setQxdSelectedStcd(tabKey, stations[0].stcd);
     }
@@ -787,7 +757,7 @@ const loadQxdStationList = async (tabKey: string) => {
 // 获取当前激活tab对应的选中stcd (支持v-model双向绑定)
 const currentQxdSelectedStcd = computed({
   get: () => getQxdSelectedStcd(currentActiveKey.value),
-  set: (val: string) => setQxdSelectedStcd(currentActiveKey.value, val)
+  set: (val: string) => setQxdSelectedStcd(currentActiveKey.value, val),
 });
 
 // 判断是否是qxd模式
@@ -812,7 +782,7 @@ interface TabItem {
 // 获取 Tab 配置项的 URL
 const getTabUrl = (key: string) => {
   const tab = tabsConfig.value.find((item: any) => item.key === key);
-  return tab?.url || '';
+  return tab?.url || "";
 };
 // 获取 Tab 配置项的子 Tab
 const getTabChildren = (key: string) => {
@@ -823,7 +793,7 @@ const getTabChildren = (key: string) => {
 // 获取 Tab 配置项的 code
 const getTabCode = (key: string) => {
   const tab = tabsConfig.value.find((item: any) => item.key === key);
-  return tab?.code || '';
+  return tab?.code || "";
 };
 // 定义 Props
 const props = defineProps<{
@@ -834,22 +804,22 @@ const props = defineProps<{
 }>();
 
 // 启用弹窗拖拽（限制在可视区域内）
-useDraggable(toRef(props, 'visible'), { boundary: true, resetOnOpen: true });
+useDraggable(toRef(props, "visible"), { boundary: true, resetOnOpen: true });
 // 定义 Emits
 // 添加 'update:activeKey' 以支持 v-model:active-key
 const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-  (e: 'change', key: string): void;
+  (e: "update:visible", value: boolean): void;
+  (e: "change", key: string): void;
 }>();
 
 // 内部维护的 activeKey
-const currentActiveKey = ref<string>('');
-const anchor = ref<any>('');
+const currentActiveKey = ref<string>("");
+const anchor = ref<any>("");
 
 // 监听外部传入的 activeKey 变化，同步到内部状态
 watch(
   () => props.activeKey,
-  newVal => {
+  (newVal) => {
     if (newVal && newVal !== currentActiveKey.value) {
       currentActiveKey.value = newVal;
     }
@@ -858,14 +828,14 @@ watch(
 );
 watch(
   () => modelStore.params,
-  async newVal => {
+  async (newVal) => {
     if (!newVal || Object.keys(newVal).length === 0) return;
     console.log(newVal);
     anchor.value = newVal;
     let params = newVal;
-    if (['VD', 'WTRV', 'ZQ', 'WQ'].includes(params?.sttpCode)) {
+    if (["VD", "WTRV", "ZQ", "WQ"].includes(params?.sttpCode)) {
       params.sttp = params.sttpCode;
-    } else if (['ENG_ALARM'].includes(params?.sttpMap)) {
+    } else if (["ENG_ALARM"].includes(params?.sttpMap)) {
       params.sttp = params.sttpMap;
     }
     tabsConfig.value = handleTabs({ ...params });
@@ -874,8 +844,8 @@ watch(
     currentActiveKey.value = value?.key;
 
     // 电站类型时，查询电站专题配置数据
-    if (params?.sttp?.toUpperCase() === 'ENG') {
-      checkPowerStationTopicData(params.stcd);
+    if (params?.sttp?.toUpperCase() === "ENG") {
+      // checkPowerStationTopicData(params.stcd);
     }
 
     // 应用异步 Tab 过滤（非阻塞式）
@@ -887,7 +857,7 @@ watch(
 // 监听 tab 切换，如果是 qxd 模式，加载站点列表
 watch(
   () => currentActiveKey.value,
-  activeKey => {
+  (activeKey) => {
     const code = getTabCode(activeKey);
     if (code && qxdConfigMap[code]) {
       loadQxdStationList(activeKey);
@@ -900,42 +870,42 @@ const onTabChange = (key: string) => {
   currentActiveKey.value = key;
   // 通知父组件更新 activeKey (支持 v-model)
   // 通知父组件发生了切换事件 (用于业务逻辑，如加载数据)
-  emit('change', key);
+  emit("change", key);
 };
 
 // 关闭弹窗
 const handleClose = () => {
-  emit('update:visible', false);
+  emit("update:visible", false);
   modelStore.params = {
-    sttp: 'eng',
-    stcd: '',
-    date: '',
+    sttp: "eng",
+    stcd: "",
+    date: "",
     show: true,
-    enfc: '0',
-    eqtp: '',
-    baseId: '',
-    sttpCode: '',
-    sttpMap: ''
+    enfc: "0",
+    eqtp: "",
+    baseId: "",
+    sttpCode: "",
+    sttpMap: "",
   };
   // 清理状态,避免影响下次打开
   modelStore.showStcdSelector = false;
   modelStore.stcdOptions = [];
   // 清理qxd模式状态
   qxdStationOptions.value = [];
-  qxdSelectedStcd.value = '';
-  qxdSelectedStcdWq.value = '';
-  qxdSelectedStcdZq.value = '';
+  qxdSelectedStcd.value = "";
+  qxdSelectedStcdWq.value = "";
+  qxdSelectedStcdZq.value = "";
   qxdLoadedCodes.value = new Set();
   // 清理电站专题状态
   hasPowerStatData.value = false;
-  modelStore.verticalWaterStcd = '';
+  modelStore.verticalWaterStcd = "";
   modelStore.aiSites = [];
   modelStore.wtConfig = {};
   modelStore.filter = {
-    stllgzlx: '', // 生态流量 - 规则类型
-    stllTmType: '', // 生态流量 - 时间类型
-    tm: '',
-    rangeTm: []
+    stllgzlx: "", // 生态流量 - 规则类型
+    stllTmType: "", // 生态流量 - 时间类型
+    tm: "",
+    rangeTm: [],
   };
   modelStore.wqShow = false;
   modelStore.fishTabInfo = null;
@@ -945,7 +915,7 @@ const handleClose = () => {
 const modalData = ref(props.data);
 watch(
   () => props.data,
-  newVal => {
+  (newVal) => {
     modalData.value = newVal;
   }
 );
@@ -956,7 +926,7 @@ const filterOption = (input: string, option: any) => {
 
 // 处理测站切换
 const handleStcdChange = (newStcd: string) => {
-  console.log('【测站切换】', newStcd);
+  console.log("【测站切换】", newStcd);
   // 由于 BasicInfo.vue 监听了 stcd 变化,这里只需更新 store
   // 如果需要刷新所有 tab 的数据,可以在这里触发事件
 };
diff --git a/frontend/.env.development b/frontend/.env.development
index da81cc8d..c4d2bfd2 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -11,7 +11,7 @@ VITE_APP_BASE_URL = 'http://localhost:8093'
 # 测试环境
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
 # 汤伟
-VITE_APP_BASE_URL = 'http://10.84.111.235:8093'
+VITE_APP_BASE_URL = 'http://10.84.216.252:8093'
 # 李林 
 # VITE_APP_BASE_URL = 'http://10.84.111.25:8093'
 # VITE_APP_BASE_URL = 'http://10.84.111.211:8093'
diff --git a/frontend/src/assets/svg/Application.svg b/frontend/src/assets/svg/Application.svg
new file mode 100644
index 00000000..c43cf7ff
--- /dev/null
+++ b/frontend/src/assets/svg/Application.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1786 -829 )">
+    <path d="M 11.9999999556426 0  L 4.00000004435742 0  C 3.053226196683 0  2.28571434669061 0.818679320547503  2.28571434669061 1.82857143452381  L 2.28571434669061 3.1512380952381  C 1.60057497972548 3.40981403899944  1.14264753458247 4.10097919714247  1.14285720933208 4.87619047023809  L 1.14285720933208 6.19885714880952  C 0.457717842367174 6.45743309257087  -0.000209602775839812 7.1485982507139  0 7.92380952380952  L 0 12.8000000059524  C 0 14.48315352556  1.27918649766411 15.8476190416667  2.85714290699912 15.8476190416667  L 13.1428570930009 15.8476190416667  C 14.7208135023359 15.8476190416667  15.9999999187803 14.48315352556  15.9999999280262 12.8000000059524  L 15.9999999280262 7.92380952380952  C 16.0002096027758 7.1485982507139  15.5422821576328 6.45743309257087  14.8571427906679 6.19885714880952  L 14.8571427906679 4.87619047023809  C 14.8573524654175 4.10097919714247  14.3994250202745 3.40981403899944  13.7142856533094 3.1512380952381  L 13.7142856533094 1.82857143452381  C 13.7142856533094 0.818679320547503  12.946773803317 0  11.9999999556426 0  Z M 13.7142856533094 4.87619047023809  L 13.7142856533094 6.0952380952381  L 10.2857142579755 6.0952380952381  C 9.97012297849938 6.0952380952381  9.71428569766704 6.36813119743816  9.71428569766704 6.70476189880952  C 9.71428569766704 7.71465401278583  8.94677384767442 8.53333332738094  8 8.53333332738094  C 7.05322615232558 8.53333332738094  6.28571430233296 7.71465401278583  6.28571430233296 6.70476189880952  C 6.28571430233296 6.36813119743816  6.02987702150062 6.0952380952381  5.71428574202446 6.0952380952381  L 2.28571434669061 6.0952380952381  L 2.28571434669061 4.8761904702381  C 2.28571434669061 4.53955976886673  2.54155162752295 4.26666666666667  2.85714290699912 4.26666666666667  L 13.1428570930009 4.26666666666667  C 13.4584483724771 4.26666666666667  13.7142856533094 4.53955976886673  13.7142856533094 4.87619047023809  Z M 1.14285720933208 7.92380952380952  C 1.14285720933208 7.58717882243816  1.39869449016464 7.3142857202381  1.71428576964081 7.3142857202381  L 5.20000003272435 7.31428572023809  C 5.47269110222078 8.73247492680181  6.64277123544298 9.75055874974881  8 9.75055874974881  C 9.35722876455702 9.75055874974881  10.5273088977792 8.73247492680181  10.7999999672757 7.3142857202381  L 14.2857142303592 7.3142857202381  C 14.6013055098354 7.3142857202381  14.8571427906679 7.58717882243816  14.8571427906679 7.92380952380952  L 14.8571427906679 12.8000000059524  C 14.8571427906679 13.8098921199287  14.0896309406753 14.6285714345238  13.1428570930009 14.6285714345238  L 2.85714290699912 14.6285714345238  C 1.91036905932469 14.6285714345238  1.14285720933208 13.8098921199287  1.14285720933208 12.8000000059524  L 1.14285720933208 7.92380952380952  Z M 12.5714285326922 1.82857143452381  L 12.5714285326922 3.04761904166666  L 3.42857146730785 3.04761904166666  L 3.42857146730785 1.82857143452381  C 3.42857146730785 1.49194071529531  3.68440874814019 1.21904761309524  4.00000002761635 1.21904761309524  L 11.9999999556426 1.21904761309524  C 12.3155912518598 1.21904761309524  12.5714285326922 1.49194071529531  12.5714285326922 1.82857141666667  Z M 5.71428574202446 12.1904761845238  C 5.71428574202446 11.8538454831524  5.9701230228568 11.5809523809524  6.28571430233296 11.5809523809524  L 9.71428569766704 11.5809523809524  C 10.0298769817662 11.5809523809524  10.2857142663461 11.8538454871499  10.2857142663461 12.1904761934524  C 10.2857142663461 12.5271068997549  10.0298769817662 12.8000000059524  9.71428569766704 12.8000000059524  L 6.28571430233296 12.8000000059524  C 5.9701230228568 12.8000000059524  5.71428574202446 12.5271069037523  5.71428574202446 12.1904762023809  Z " fill-rule="nonzero" fill="#255aa7" stroke="none" transform="matrix(1 0 0 1 1786 829 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/edit.svg b/frontend/src/assets/svg/edit.svg
new file mode 100644
index 00000000..bd468820
--- /dev/null
+++ b/frontend/src/assets/svg/edit.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1754 -829 )">
+    <path d="M 0.89038789844335 0  L 10.9513354812796 0  C 11.1287252776408 0  11.2174193247947 0.0886947998772105  11.3061150796195 0.177389650310463  L 11.3948099806087 0.266084455805011  L 14.4104339965652 3.45909741428739  C 14.5878237929264 3.6364869971898  14.6765186939158 3.81387679916839  14.6765186939158 4.07996106960125  L 14.6765186939158 8.69209156199027  C 14.6765186939158 9.0468711603301  14.4104339965652 9.31295500384528  14.0556543982254 9.31295500384528  C 13.7008747998855 9.31295500384528  13.4347909563703 9.0468711603301  13.4347909563703 8.69209156199027  L 13.4347909563703 5.23299390615734  L 10.5965567423925 5.23299390615734  C 10.1530822430634 5.23299390615734  9.70960946263972 4.87821473473519  9.62091456165035 4.34604576695179  L 9.62091456165035 1.33042209927024  L 1.24516733949781 1.33042209927024  L 1.24516733949781 14.6346450355716  L 9.00004994577171 14.6346450355716  C 9.35482954411145 14.6346450355716  9.62091338762662 14.9007280196341  9.62091338762662 15.2555076179739  L 9.62091338762662 15.3442025189632  C 9.62091338762662 15.698982117303  9.35482954411145 15.9650668146536  9.08874399292563 15.9650668146536  L 0.979082855606066 15.9650668146536  C 0.535608732638593 15.9650668146536  0.092134716400551 15.6102872163137  0 15.0781195349007  L 0 0.975642933465427  C 0.00343992214061473 0.443474044324756  0.35821911603216 0  0.89038789844335 0  Z M 13.1687062590199 3.99126662361633  L 10.9513354868971 1.59650647643252  L 10.9513354868971 3.99126662361633  L 13.1687054051845 3.99126662361633  Z M 12.7252317596908 10.2885980608921  C 13.6121798988963 10.2885980608921  14.4991288919373 10.7320725602213  14.9426033912664 11.5303257984375  C 15.3860778905955 12.3285790366538  15.3860778905955 13.3042220768486  14.9426033912664 14.1024753150649  L 15.7408557756471 14.9007276994458  C 16.0069404729977 15.1668123967963  16.0069404729977 15.5215919951362  15.7408557756471 15.7876766924867  C 15.4747727915847 16.0537596765492  15.1199914799568 16.0537596765492  14.8539084958943 15.8763698801879  L 14.7652135949052 15.7876766924867  L 13.9669603566888 14.9894225948178  C 13.080013076936 15.5215919895188  11.9269802403799 15.4328970941469  11.0400312417216 14.8120327984565  C 10.2417780035053 14.1024753150649  9.88699840516551 13.0381373794981  10.2417780035053 11.9738002977667  C 10.6852525028344 10.9981581170245  11.6608946835765 10.2885980608921  12.725233478596 10.2885980608921  Z M 13.9669594972361 12.7720535416003  C 13.9669594972361 12.0624952043733  13.3460960553812 11.5303257984375  12.7252317596908 11.5303257984375  C 12.2817581198142 11.5303257984375  11.8382844799378 11.7964096419527  11.6608938241238 12.1511892402925  C 11.3948099806087 12.5059688386324  11.3948099806087 13.0381373794981  11.6608938241238 13.3929169778379  C 11.9269785214744 13.7476965761778  12.2817581198142 14.0137804196929  12.7252317596908 14.0137804196929  C 13.4347909563703 14.0137804196929  13.9669594972361 13.4816118788272  13.9669594972361 12.7720535416003  Z M 3.12549730248907 5.36519114038518  C 3.21419198440231 4.92030965519137  3.39158199983967 4.69786826379193  3.83505563971607 4.69786826379193  L 7.95345164763125 4.69786826379193  C 8.39692528750766 4.69786826379193  8.66300998485826 4.92030964957403  8.66300998485826 5.36519114038518  C 8.66300998485826 5.81007263119633  8.39692528750766 6.03251444389611  7.95345164763125 6.03251444389611  L 3.83505563971607 6.03251444389611  C 3.39158199983967 6.03251444389611  3.12549730248907 5.81007305811402  3.12549730248907 5.36519114038518  Z M 3.21419199001957 8.14570312899906  C 3.21419198440231 7.81204254734647  3.39158199983967 7.47838025240581  3.74636117126192 7.47838025240581  L 10.3482113678974 7.47838025240581  C 10.7029909662372 7.47838025240581  10.8803807625984 7.70082035181753  10.8803807625984 8.14570312899906  C 10.8803807625984 8.5905859061806  10.7029909662372 8.81302600559231  10.3482113678974 8.81302600559231  L 3.74636117126192 8.81302600559231  C 3.39158199983967 8.81302600559231  3.21419199001957 8.5905859061806  3.21419199001957 8.14570312899906  Z M 3.12549730248907 11.0374355942365  C 3.21419198440231 10.592553682125  3.39158199983967 10.3701127176432  3.83505563971607 10.3701127176432  L 7.95345164763125 10.3701127176432  C 8.39692528750766 10.3701127176432  8.66300998485826 10.5925536765076  8.66300998485826 11.0374355942365  C 8.66300998485826 11.482318371418  8.39692528750766 11.7047593302824  7.95345164763125 11.7047593302824  L 3.83505563971607 11.7047593302824  C 3.39158199983967 11.7047593302824  3.12549730248907 11.482318371418  3.12549730248907 11.0374355942365  Z " fill-rule="nonzero" fill="#255aa7" stroke="none" transform="matrix(1 0 0 1 1754 829 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/station.svg b/frontend/src/assets/svg/station.svg
new file mode 100644
index 00000000..4191c540
--- /dev/null
+++ b/frontend/src/assets/svg/station.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -672 -170 )">
+    <path d="M 14.3232142857144 16  C 15.2428571428571 15.9232142857143  15.9875 15.1785714285714  16 14.2589285714286  L 16 1.66249999999999  C 15.9875 0.74464285714285  15.2428571428571 0  14.325 0  L 1.72857142857151 0  C 0.80892857142851 0  0.0642857142856883 0.74464285714285  0 1.66428571428571  L 0 14.2589285714286  C 0.0642857142856883 15.1785714285714  0.80892857142851 15.9232142857143  1.72857142857151 16  L 14.3232142857144 16  Z M 12.2446428571428 7.625  C 12.3125 7.53214285714286  11.7571428571429 7.0125  11.6875 6.9375  C 10.6964285714286 5.86785714285715  9.48214285714289 4.68214285714285  9.48214285714289 3.11607142857142  C 9.4803571428572 1.6125  10.7 0.394642857142856  12.2035714285714 0.394642857142856  C 13.7071428571428 0.394642857142856  14.925 1.6125  14.925 3.11607142857142  C 14.925 4.96250000000001  13.3589285714286 6.18571428571428  12.325 7.51964285714286  C 12.2982142857143 7.55535714285715  12.2714285714285 7.58928571428571  12.2446428571428 7.625  Z M 11.2375 11.1071428571428  L 14.8464285714285 7.28035714285714  C 14.9857142857143 7.13214285714285  15.2196428571428 7.125  15.3696428571428 7.26428571428571  C 15.5178571428571 7.40535714285714  15.525 7.63928571428571  15.3839285714286 7.78749999999999  L 11.7660714285714 11.625  L 14.3732142857143 14.1803571428571  C 14.5196428571428 14.3232142857143  14.5214285714285 14.5571428571428  14.3785714285715 14.7035714285714  C 14.3053571428571 14.7767857142857  14.2107142857143 14.8142857142857  14.1142857142856 14.8142857142857  C 14.0214285714285 14.8142857142857  13.9267857142856 14.7785714285714  13.8553571428572 14.7089285714286  L 8.46785714285716 9.42857142857142  L 3.93035714285713 14.2392857142857  C 3.85714285714289 14.3160714285714  3.75892857142856 14.3553571428571  3.66071428571433 14.3553571428571  C 3.56964285714287 14.3553571428571  3.47857142857151 14.3214285714286  3.40714285714284 14.2553571428571  C 3.25892857142856 14.1160714285714  3.25178571428569 13.8821428571428  3.39107142857142 13.7321428571428  L 7.93928571428569 8.91071428571429  L 5.68571428571431 6.70178571428571  L 2.18928571428569 10.4089285714286  C 2.11607142857144 10.4857142857143  2.01785714285711 10.525  1.91964285714289 10.525  C 1.82857142857142 10.525  1.73749999999995 10.4910714285714  1.66607142857151 10.425  C 1.51785714285711 10.2857142857143  1.51071428571436 10.0517857142857  1.64999999999998 9.90178571428571  L 5.15535714285716 6.18392857142857  L 1.68035714285713 2.77857142857142  C 1.53392857142853 2.63571428571429  1.53214285714284 2.40178571428571  1.67499999999995 2.25535714285715  C 1.81785714285718 2.10892857142856  2.05178571428564 2.10714285714286  2.19821428571436 2.25  L 8.44821428571436 8.37321428571428  L 9.57321428571436 7.18035714285713  C 9.71249999999998 7.03214285714286  9.94642857142856 7.02500000000001  10.0964285714285 7.16428571428571  C 10.2446428571428 7.30357142857142  10.2517857142857 7.53749999999999  10.1125 7.6875  L 8.97857142857151 8.88928571428571  L 11.2375 11.1071428571428  Z M 13.625 2.87142857142857  C 13.625 2.08639524845481  12.9886047515453 1.45  12.2035714285714 1.45  C 11.4185381055977 1.45  10.7821428571428 2.08639524845481  10.7821428571428 2.87142857142857  C 10.7821428571428 3.65646189440234  11.4185381055977 4.29285714285714  12.2035714285714 4.29285714285714  C 12.9886047515453 4.29285714285714  13.625 3.65646189440234  13.625 2.87142857142857  Z " fill-rule="nonzero" fill="#005293" stroke="none" transform="matrix(1 0 0 1 672 170 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/version.svg b/frontend/src/assets/svg/version.svg
new file mode 100644
index 00000000..17dac44a
--- /dev/null
+++ b/frontend/src/assets/svg/version.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -565 -875 )">
+    <path d="M 0 8  C 0 3.58181818749995  3.58181818749995 0  8 0  C 12.4181818125001 0  16 3.58181818749995  16 8  C 16 12.4181818125001  12.4181818125001 16  8 16  C 3.58181818749995 16  0 12.4181818125001  0 8  Z M 7.23490909374993 4.18436364062495  L 7.27999999999997 4.18200000000002  L 7.23509090624998 4.18436364062495  L 5.10563635937501 4.34854545312498  C 4.71454545312497 4.378727265625  4.37836362500002 4.71400000000006  4.3481818125 5.10545454687497  L 4.184545453125 7.23490909374993  C 4.16616282204484 7.47433213284717  4.25329832724606 7.70983708702352  4.42309090625008 7.87963635937501  L 8.12090909375002 11.5770909062501  C 8.27478417521331 11.7320563374394  8.48434384064558 11.8188926242638  8.70272726562496 11.8181818125  C 8.9210035982984 11.8186207899432  9.13040619707181 11.731822466318  9.28436364062497 11.5770909062501  L 11.5774545468751 9.28363635937501  C 11.8982525597308 8.96207485258412  11.898415190837 8.44158010127046  11.5778181875 8.11981818749996  L 7.88 4.42254545312494  C 7.7100917776836 4.25272220670638  7.47440966938086 4.16570316615639  7.23490909374993 4.18436364062495  Z M 5.66798476241524 6.28836102379478  C 5.66798476241524 5.94604586717719  5.94495902002711 5.66826642423223  6.28727273437494 5.66727273437505  C 6.62979956582933 5.66796697062637  6.90710481095891 5.94583482992755  6.90710481095891 6.28836236492305  C 6.90710481095891 6.45242147490467  6.84219401306905 6.6098168600837  6.72654545312503 6.72618181250004  C 6.48382821774419 6.96799606812897  6.09126268850582 6.96799606812897  5.84854545312498 6.72618181250004  C 5.7328960771963 6.60981674757102  5.66798476241524 6.45242078878493  5.66798476241524 6.28836102379478  Z " fill-rule="nonzero" fill="#ff424f" stroke="none" transform="matrix(1 0 0 1 565 875 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/views/system/pushManagement/components/ConfigManagement/CronPicker.vue b/frontend/src/components/CronPicker/index.vue
similarity index 97%
rename from frontend/src/views/system/pushManagement/components/ConfigManagement/CronPicker.vue
rename to frontend/src/components/CronPicker/index.vue
index 15323954..df9bc8d5 100644
--- a/frontend/src/views/system/pushManagement/components/ConfigManagement/CronPicker.vue
+++ b/frontend/src/components/CronPicker/index.vue
@@ -162,7 +162,7 @@
                 value="specify"
                 class="zhding"
               >
-                <span class="option-label" style="min-width: 30px;">指定</span>
+                <span class="option-label" style="min-width: 30px">指定</span>
                 <div v-if="field.key === 'hour'" class="hour-grid">
                   <a-checkbox-group
                     v-model:value="fieldData[field.key].specifyValues"
@@ -368,22 +368,10 @@ const formatHour = (val: number) => {
   return val.toString().padStart(2, '0');
 };
 
-const isDaySpecific = () => {
-  const day = fieldData.day;
-  return day.type !== 'all' && day.type !== 'lastDay';
-};
-
-const isWeekSpecific = () => {
-  const week = fieldData.week;
-  return week.type !== 'all' && week.type !== 'none';
-};
-
 const generateFieldValue = (key: string) => {
   const data = fieldData[key];
   switch (data.type) {
     case 'all':
-      if (key === 'day' && isWeekSpecific()) return '?';
-      if (key === 'week' && isDaySpecific()) return '?';
       if (key === 'year') return '';
       return '*';
     case 'none':
@@ -404,8 +392,6 @@ const generateFieldValue = (key: string) => {
       return 'L';
     case 'specify':
       if (data.specifyValues.length === 0) {
-        if (key === 'day' && isWeekSpecific()) return '?';
-        if (key === 'week' && isDaySpecific()) return '?';
         return '*';
       }
       return data.specifyValues
@@ -527,6 +513,12 @@ const validateCron = (
       errorMessage: '日和周不能同时指定，请将其中一个设为"不指定"'
     };
   }
+  if (day === '?' && week === '?') {
+    return {
+      valid: false,
+      errorMessage: '日和周不能同时为不指定，请至少指定其中一个'
+    };
+  }
 
   return { valid: true, errorMessage: '' };
 };
@@ -699,8 +691,8 @@ watch(
     align-items: flex-start !important;
     // margin-top: px;
   }
-  :deep(.ant-radio){
-    align-self:auto !important;
+  :deep(.ant-radio) {
+    align-self: auto !important;
     // margin-top: 0px !important;
   }
 }
diff --git a/frontend/src/components/MapModal/components/DZGJ.vue b/frontend/src/components/MapModal/components/DZGJ.vue
index d31327e3..6075ff15 100644
--- a/frontend/src/components/MapModal/components/DZGJ.vue
+++ b/frontend/src/components/MapModal/components/DZGJ.vue
@@ -35,7 +35,6 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
-import dayjs from 'dayjs';
 import { message } from 'ant-design-vue';
 import BasicTable from '@/components/BasicTable/index.vue';
 import { queryPostUrlList } from '@/api/mapModal';
diff --git a/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue b/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
index a9e993cb..b6cd1dfa 100644
--- a/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
+++ b/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
@@ -49,7 +49,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch, computed, h } from 'vue';
+import { ref, watch, computed, h } from 'vue';
 import { Button } from 'ant-design-vue';
 import BasicTable from '@/components/BasicTable/index.vue';
 import { getMonitorDataFpq, getMonitorDataOnline } from '@/api/mapModal';
@@ -60,7 +60,6 @@ import { useDraggable } from '@/utils/drag';
 
 const loading = ref(false);
 const modelStore = useModelStore();
-const hasLoaded = ref(false);
 const tableRef = ref();
 const searchParams = ref([
   dayjs().subtract(5, 'year').format('YYYY-MM-DD HH:mm:ss'),
@@ -276,7 +275,6 @@ const initData = async () => {
   const res1 = await getMonitorDataFpq(params1);
   const res = await getMonitorDataFpq(params);
   let stcd = '';
-  console.log(res1);
   if (res) {
     if (res?.data?.data?.length > 0) {
       stcd = res.data.data.map(item => item.stcd);
@@ -291,7 +289,6 @@ const initData = async () => {
       }
     }
   }
-  console.log(stcd);
   const filter = {
     logic: 'and',
     filters: [
diff --git a/frontend/src/components/MapModal/components/MonitorInfo.vue b/frontend/src/components/MapModal/components/MonitorInfo.vue
index 35111e8e..42412883 100644
--- a/frontend/src/components/MapModal/components/MonitorInfo.vue
+++ b/frontend/src/components/MapModal/components/MonitorInfo.vue
@@ -85,9 +85,12 @@ const updateChart = (data: any[]) => {
     return;
   }
 
-  const sorted = [...data].sort(
-    (a, b) => new Date(a.tm).getTime() - new Date(b.tm).getTime()
-  );
+  const toTime = (tm: any) => {
+    if (!tm) return 0;
+    const t = new Date(tm).getTime();
+    return Number.isNaN(t) ? 0 : t;
+  };
+  const sorted = [...data].sort((a, b) => toTime(a.tm) - toTime(b.tm));
 
   const xAxisData = sorted.map(item => {
     const hm = dayjs(item.tm).format('HH:mm');
@@ -399,57 +402,65 @@ const initDateRange = (): [Dayjs, Dayjs] => {
 };
 const dateRange = ref<[Dayjs, Dayjs] | undefined>(initDateRange());
 
+// 空值兜底：null/undefined/空串/'-'占位符/NaN 均显示为 '-'
+const formatCell = (
+  text: any,
+  formatter: (num: number) => string = num => String(num)
+) => {
+  if (text === null || text === undefined || text === '' || text === '-') {
+    return '-';
+  }
+  const num = Number(text);
+  if (Number.isNaN(num)) return '-';
+  return formatter(num);
+};
+
 // 表格列配置
 const tableColumns = [
   {
     title: '时间',
     dataIndex: 'tm',
-    width: 180,
+    width: 150,
     fixed: 'left',
     customRender: ({ text }: any) =>
-      text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'
+      text && text !== '-' ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'
   },
   {
     title: '坝上水位(m)',
     dataIndex: 'rz',
-    width: 130,
-    customRender: ({ text }: any) =>
-      text !== undefined && text !== null ? Number(text).toFixed(2) : '-'
+    width: 100,
+    customRender: ({ text }: any) => formatCell(text, v => v.toFixed(2))
   },
   {
     title: '坝下水位(m)',
     dataIndex: 'dz',
-    width: 130,
-    customRender: ({ text }: any) =>
-      text !== undefined && text !== null ? Number(text).toFixed(2) : '-'
+    width: 100,
+    customRender: ({ text }: any) => formatCell(text, v => v.toFixed(2))
   },
   {
     title: '入库流量(m³/s)',
     dataIndex: 'qi',
-    width: 130,
+    width: 120,
     customRender: ({ text }: any) =>
-      text !== undefined && text !== null ? Math.round(Number(text)) : '-'
+      formatCell(text, v => String(Math.round(v)))
   },
   {
     title: '出库流量(m³/s)',
     dataIndex: 'qo',
-    width: 130,
-    customRender: ({ text }: any) =>
-      text !== undefined && text !== null ? Number(text) : '-'
+    width: 120,
+    customRender: ({ text }: any) => formatCell(text, v => String(v))
   },
   {
     title: '生态流量(m³/s)',
     dataIndex: 'qec',
-    width: 130,
-    customRender: ({ text }: any) =>
-      text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
+    width: 120,
+    customRender: ({ text }: any) => formatCell(text, v => v.toFixed(1))
   },
   {
     title: '生态流量限值(m³/s)',
     dataIndex: 'qecLimit',
-    width: 150,
-    customRender: ({ text }: any) =>
-      text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
+    width: 140,
+    customRender: ({ text }: any) => formatCell(text, v => v.toFixed(1))
   }
 ];
 const tableScrollX = tableColumns.reduce((s, c) => s + (c.width || 100), 0);
diff --git a/frontend/src/components/MapModal/components/PanoramaInfo.vue b/frontend/src/components/MapModal/components/PanoramaInfo.vue
index 78d5e043..db2b0ec6 100644
--- a/frontend/src/components/MapModal/components/PanoramaInfo.vue
+++ b/frontend/src/components/MapModal/components/PanoramaInfo.vue
@@ -6,6 +6,7 @@
         :src="iframeUrl"
         class="panorama-info-iframe"
         frameborder="0"
+        allowfullscreen
       ></iframe>
       <a-select
         v-show="iframeUrl != ''"
diff --git a/frontend/src/components/MapModal/components/SsspLayer.vue b/frontend/src/components/MapModal/components/SsspLayer.vue
deleted file mode 100644
index 8efeb435..00000000
--- a/frontend/src/components/MapModal/components/SsspLayer.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <div>
-        视频
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-</script>
-
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/gis/map.cesium.ts b/frontend/src/components/gis/map.cesium.ts
index 473f8d84..4cbdeb66 100644
--- a/frontend/src/components/gis/map.cesium.ts
+++ b/frontend/src/components/gis/map.cesium.ts
@@ -3916,10 +3916,41 @@ export class MapCesium implements MapInterface {
     );
   }
 
-  /** 获取 eng 渲染优先级：告警=300, eng=200, 普通=100（与 2D 完全一致） */
+  /** 获取 eng 渲染优先级：大型=300/中型=200，同规模已建>在建>未建，其他 eng=150，普通=100（与 2D 完全一致，报警点同规格内 +10） */
   private getEntityEngRenderPriority(entity: Cesium.Entity): number {
-    if (this.isEntityEngAlarm(entity)) return 300;
-    return this.isEntityEng(entity) ? 200 : 100;
+    const e = entity as any;
+    const rawData: Record<string, any> = e._rawData || {};
+    const legendState = String(rawData.anchoPointState || '')
+      .trim()
+      .toLowerCase();
+    const isAlarm = this.isEntityEngAlarm(entity);
+
+    // 建设状态权重：已建 > 在建 > 未建
+    let buildRank = 0;
+    if (legendState.includes('_ubuilt')) {
+      buildRank = 2;
+    } else if (legendState.includes('_nbuilt')) {
+      buildRank = 1;
+    } else if (legendState.includes('_built')) {
+      buildRank = 3;
+    }
+
+    let base = 100;
+
+    // 大型电站优先级高于中型电站，同规模内已建优先
+    if (legendState.startsWith('large_eng_')) {
+      base = 300 + buildRank * 30;
+    } else if (legendState.startsWith('mid_eng_')) {
+      base = 200 + buildRank * 30;
+    } else if (this.isEntityEng(entity)) {
+      base = 150;
+    }
+
+    // 报警范围点仅在同规格内略微提升，不跨越大型/中型与建设状态层级
+    if (isAlarm) {
+      base += 10;
+    }
+    return base;
   }
 
   // ==================== 文本像素级精确测量 ====================
diff --git a/frontend/src/components/gis/map.ol.ts b/frontend/src/components/gis/map.ol.ts
index ac65bf55..d08d0b3c 100644
--- a/frontend/src/components/gis/map.ol.ts
+++ b/frontend/src/components/gis/map.ol.ts
@@ -47,7 +47,7 @@ const VITE_APP_MAP_URL = import.meta.env.VITE_APP_MAP_URL;
 const CENTER_positionCN = [114.17112499999996, 38]; // OpenLayers 使用 [lon, lat]
 const MIN_ZOOM = 4.23;
 const MAX_ZOOM = 22;
-const INITIAL_ZOOM = 4.5;
+const INITIAL_ZOOM = 4.4;
 const BATCH_POPUP_MODE_ZOOM = 15;
 const FULL_DISPLAY_NO_COLLISION_ZOOM = Number.POSITIVE_INFINITY;
 const POINT_FADE_DURATION = 300; // 锚点/文字碰撞显隐的淡入淡出时长(ms)
@@ -153,9 +153,9 @@ export class MapOl implements MapInterface {
       });
 
       const mouseWheelInteraction = new MouseWheelZoom({
-        duration: 100, // 缩放动画持续时间 (ms)，Leaflet 默认也有动画
-        maxDelta: 2,
-        constrainResolution: false // ✅ 关键：false 允许缩放到非整数级别 (如 4.5, 4.6)，实现平滑缩放
+        duration: 100, // 缩放动画持续时间 (ms)
+        maxDelta: 1, // 每滚一格最大缩放步长，对齐 Mapbox 的 ~0.5 缩放幅度
+        constrainResolution: false // 允许缩放到非整数级别，实现平滑缩放
       });
 
       this.map = new OlMap({
@@ -496,15 +496,11 @@ export class MapOl implements MapInterface {
     }
 
     const currentZoom: any = this.view ? this.view.getZoom() : 4.5;
-    const cachedDensityVisible = feature.get('_densityVisible');
-    const densityVisible =
-      typeof cachedDensityVisible === 'boolean'
-        ? cachedDensityVisible
-        : currentZoom >= this.getFeatureDensityMinZoom(feature);
+    const iconCollisionVisible = feature.get('_iconCollisionVisible') !== false;
     const iconTargetVisible =
       legendVisible !== false &&
       regionVisible !== false &&
-      densityVisible &&
+      iconCollisionVisible &&
       this.shouldRenderNearbyFeature();
 
     const dynamicScale = this.getDynamicPointScale(currentZoom);
@@ -518,7 +514,6 @@ export class MapOl implements MapInterface {
       dynamicScale,
       labelLineCount
     );
-    const iconCollisionVisible = feature.get('_iconCollisionVisible') !== false;
     const labelCollisionVisible =
       feature.get('_labelCollisionVisible') === true;
 
@@ -1029,35 +1024,10 @@ export class MapOl implements MapInterface {
 
     if (currentZoom >= FULL_DISPLAY_NO_COLLISION_ZOOM) {
       viewportEntries.forEach(entry => {
-        const minZoom = this.getFeatureDensityMinZoom(entry.feature);
-        const densityVisible =
-          currentZoom >= minZoom ||
-          (entry.legendVisible &&
-            entry.regionVisible &&
-            !!entry.layerKey &&
-            entry.pixelX !== undefined &&
-            entry.pixelY !== undefined &&
-            !this.hasNearbyViewportFeature(
-              {
-                feature: entry.feature,
-                layerKey: entry.layerKey,
-                pixelX: entry.pixelX,
-                pixelY: entry.pixelY
-              },
-              densityPixelGrid,
-              densityIsolationThreshold
-            ));
-        this.syncFeatureDensityVisible(
-          entry.feature,
-          densityVisible,
-          dirtyLayerKeys
-        );
         const shouldRenderIcon =
           !!entry.iconUrl &&
-          this.isIconReady(entry.iconUrl) &&
           entry.legendVisible &&
           entry.regionVisible &&
-          densityVisible &&
           entry.nearbyVisible;
         const hasLabel = !!entry.labelText;
 
@@ -1103,23 +1073,11 @@ export class MapOl implements MapInterface {
 
       const shouldRenderIcon =
         !!entry.iconUrl &&
-        this.isIconReady(entry.iconUrl) &&
         entry.legendVisible &&
         entry.regionVisible &&
-        densityVisible &&
         entry.nearbyVisible;
 
       if (!shouldRenderIcon) {
-        this.syncFeatureIconCollisionVisible(
-          entry.feature,
-          false,
-          dirtyLayerKeys
-        );
-        this.syncFeatureLabelCollisionVisible(
-          entry.feature,
-          false,
-          dirtyLayerKeys
-        );
         return;
       }
 
@@ -1138,9 +1096,18 @@ export class MapOl implements MapInterface {
       }
 
       const dynamicScale = this.getDynamicPointScale(currentZoom);
-      // 备注：图标碰撞盒适当小于视觉图标尺寸，允许相邻站点轻微贴近显示，
-      // 避免像“小浪底/三门峡”这类近点被过早裁掉成只剩一个点。
-      const iconCollisionSize = Math.max(14, 24 * dynamicScale);
+      // 备注：图标碰撞盒使用实际图标尺寸（从 iconSizeCache 获取），
+      // 再乘 0.9 略小于视觉尺寸，避免碰撞盒大于视觉图标导致误杀。
+      // 当缓存不可用时（图标尚未加载完），回退到固定 24px。
+      const cachedIconSize = this.iconSizeCache.get(entry.iconUrl);
+      const iconCollisionSize = cachedIconSize
+        ? Math.max(
+            14,
+            Math.max(cachedIconSize.width, cachedIconSize.height) *
+              dynamicScale *
+              0.9
+          )
+        : Math.max(14, 24 * dynamicScale);
       const iconPadding = 0;
       const iconLeft = entry.pixelX - iconCollisionSize / 2 - iconPadding;
       const iconRight = entry.pixelX + iconCollisionSize / 2 + iconPadding;
@@ -1611,16 +1578,6 @@ export class MapOl implements MapInterface {
     iconRect: { left: number; right: number; top: number; bottom: number },
     labelRect: { left: number; right: number; top: number; bottom: number }
   ) {
-    // 标签避让图标时仅保留图标中心更小的保护区，并允许边缘接触不算碰撞，
-    // 避免像“三峡/黄龙滩”这类仅在边界轻微擦到时把文字过度压掉。
-    const inset = 4;
-    const padding = 0;
-    const narrowedIconRect = {
-      left: iconRect.left + inset,
-      right: iconRect.right - inset,
-      top: iconRect.top + inset,
-      bottom: iconRect.bottom - inset
-    };
     // 标签块向上扩展避让边距（等价于给文字加"上边距"），
     // 让下方锚点文字不再紧贴上方锚点图标底部（含文字描边/图标视觉边缘）看着像重叠
     const extendedLabelRect = {
@@ -1631,10 +1588,10 @@ export class MapOl implements MapInterface {
     };
 
     return !(
-      narrowedIconRect.right + padding <= extendedLabelRect.left ||
-      narrowedIconRect.left - padding >= extendedLabelRect.right ||
-      narrowedIconRect.bottom + padding <= extendedLabelRect.top ||
-      narrowedIconRect.top - padding >= extendedLabelRect.bottom
+      iconRect.right <= extendedLabelRect.left ||
+      iconRect.left >= extendedLabelRect.right ||
+      iconRect.bottom <= extendedLabelRect.top ||
+      iconRect.top >= extendedLabelRect.bottom
     );
   }
 
@@ -1776,10 +1733,37 @@ export class MapOl implements MapInterface {
   }
 
   private getFeatureEngRenderPriority(feature: Feature): number {
-    if (this.isFeatureEngAlarm(feature)) {
-      return 300;
+    const legendState = String(feature.get('anchoPointState') || '')
+      .trim()
+      .toLowerCase();
+    const isAlarm = this.isFeatureEngAlarm(feature);
+
+    // 建设状态权重：已建 > 在建 > 未建
+    let buildRank = 0;
+    if (legendState.includes('_ubuilt')) {
+      buildRank = 2;
+    } else if (legendState.includes('_nbuilt')) {
+      buildRank = 1;
+    } else if (legendState.includes('_built')) {
+      buildRank = 3;
     }
-    return this.isFeatureEng(feature) ? 200 : 100;
+
+    let base = 100;
+
+    // 大型电站优先级高于中型电站，同规模内已建优先
+    if (legendState.startsWith('large_eng_')) {
+      base = 300 + buildRank * 30;
+    } else if (legendState.startsWith('mid_eng_')) {
+      base = 200 + buildRank * 30;
+    } else if (this.isFeatureEng(feature)) {
+      base = 150;
+    }
+
+    // 报警范围点仅在同规格内略微提升，不跨越大型/中型与建设状态层级
+    if (isAlarm) {
+      base += 10;
+    }
+    return base;
   }
 
   /**
diff --git a/frontend/src/components/mapFilter/index.vue b/frontend/src/components/mapFilter/index.vue
index ca397261..01b82033 100644
--- a/frontend/src/components/mapFilter/index.vue
+++ b/frontend/src/components/mapFilter/index.vue
@@ -45,6 +45,13 @@
               </a-checkbox>
             </a-form-item>
           </a-col>
+          <a-col v-if="isMenu('shengTaiDiaoCha/luShengShengTaiDiaoCha')">
+            <a-form-item label="" name="">
+              <a-checkbox v-model:checked="formModel.fishSurveyZhuanZhi">
+                动物分布
+              </a-checkbox>
+            </a-form-item>
+          </a-col>
           <a-col v-if="formModel.fishSurveyZhuanZhi">
             <a-form-item label="" name="">
               <a-date-picker
@@ -71,6 +78,7 @@
                 :loading="fishSpeciesLoading"
                 :max-tag-count="1"
                 option-filter-prop="label"
+                @change="fishSurveyZhuanZhiParamsChange"
               >
                 <a-select-option
                   v-for="item in fishSpeciesOptions"
@@ -160,6 +168,8 @@ const DRAWER_STTP_CODES = [
   'AIVD',
   'DW',
   'WE',
+  'WVA',
+  'FPRD'
 ];
 const siteRangePicker = [
   { label: '全部', value: 'all' },
@@ -354,9 +364,9 @@ const fetchFishSurveyOptions = async (
 
     fishPointOptions.value = nextFishPointOptions;
     fishSpeciesOptions.value = nextFishSpeciesOptions;
-    fishSurveyZhuanZhiParams.value.value = nextFishSpeciesOptions.map(
-      item => item.value
-    );
+    // fishSurveyZhuanZhiParams.value.value = nextFishSpeciesOptions.map(
+    //   item => item.value
+    // );
     syncFishAnchorPointSelection(nextFishPointOptions);
   } finally {
     fishPointLoading.value = false;
@@ -552,6 +562,9 @@ const resetFishSurveyState = () => {
   fishPointLoading.value = false;
   fishSpeciesLoading.value = false;
   syncFishPointLayerData([]);
+  // 退出鱼种筛选时，重置抽屉内容模式与选中物种
+  modelStore.selectedFishSpecies = [];
+  modelStore.globalDrawerMode = 'basicInfo';
 };
 
 // 备注：搜索下拉只从当前缓存点位和运行态筛选条件派生，不直接驱动地图行为。
@@ -702,6 +715,14 @@ const focusSelectedAnchorPoint = () => {
 // 抽屉是否弹出由选中点位的 sttpCode 决定（命中 DRAWER_STTP_CODES 才弹）。
 const handleAnchorPointChange = (value: string) => {
   if (value == null) {
+    // 鱼种筛选仍选中时：清空锚点后切回“物种介绍”展示，不收起抽屉
+    if (
+      formModel.value.fishSurveyZhuanZhi &&
+      fishSurveyZhuanZhiParams.value.value.length > 0
+    ) {
+      modelStore.globalDrawerMode = 'speciesIntro';
+      return;
+    }
     // 清空：退出搜索状态，先收起全局抽屉，等完全关闭后再恢复页面自带抽屉
     uiStore.setIsSearchActive(false);
     uiStore.setGlobalDrawerOpen(false);
@@ -727,6 +748,34 @@ const handleAnchorPointChange = (value: string) => {
     return;
   }
   // 需要抽屉：进入搜索状态，先收起页面自带抽屉，等完全关闭后再展示全局抽屉
+  // 切换为“基础信息”模式（与鱼种下拉的“物种介绍”模式互斥，后选者覆盖前者，且不关闭抽屉）
+  modelStore.globalDrawerMode = 'basicInfo';
+  uiStore.setIsSearchActive(true);
+  uiStore.setDrawerOpen(false);
+  setTimeout(() => {
+    uiStore.setGlobalDrawerOpen(true);
+  }, 300);
+};
+const fishSurveyZhuanZhiParamsChange = (value: string[]) => {
+  const selectedValues = Array.isArray(value) ? value : [];
+  // 鱼种清空：同步清空锚点检索框，并关闭全局抽屉、恢复页面自带抽屉
+  if (!selectedValues.length) {
+    fishSurveyZhuanZhiParams.value.anchorPointSelect = null;
+    modelStore.selectedFishSpecies = [];
+    modelStore.globalDrawerMode = 'basicInfo';
+    uiStore.setIsSearchActive(false);
+    uiStore.setGlobalDrawerOpen(false);
+    setTimeout(() => {
+      uiStore.setDrawerOpen(true);
+    }, 300);
+    return;
+  }
+  const selectedSpecies = selectedValues
+    .map(v => fishSpeciesOptions.value.find(item => item.value === v))
+    .filter(Boolean) as { label: string; value: string }[];
+  // 记录选中物种并切换全局抽屉为“物种介绍”模式；抽屉已打开时仅替换内容
+  modelStore.selectedFishSpecies = selectedSpecies;
+  modelStore.globalDrawerMode = 'speciesIntro';
   uiStore.setIsSearchActive(true);
   uiStore.setDrawerOpen(false);
   setTimeout(() => {
diff --git a/frontend/src/layout/components/AppMain.vue b/frontend/src/layout/components/AppMain.vue
index f466d8cb..e191148b 100644
--- a/frontend/src/layout/components/AppMain.vue
+++ b/frontend/src/layout/components/AppMain.vue
@@ -7,6 +7,7 @@ import ylfbModal from '@/components/ylfbModal/index.vue';
 import GlobalRightDrawer from '@/components/GlobalRightDrawer/index.vue';
 import basicInfoMod from '@/modules/rightSearchDrawer/basicInfo/index.vue';
 import monitoringTableMod from '@/modules/rightSearchDrawer/monitoringTable/index.vue';
+import speciesIntroMod from '@/modules/rightSearchDrawer/speciesIntro/index.vue';
 import { useModelStore } from '@/store/modules/model';
 import GisView from '@/components/gis/GisView.vue';
 
@@ -36,8 +37,15 @@ const isZhiNengPeiTu = computed(() => {
 
     <div class="global-drawer-wrap">
       <GlobalRightDrawer>
-        <basicInfoMod />
-        <monitoringTableMod />
+        <!-- 物种介绍模式：鱼种下拉选择时展示（动物/植物介绍 + 监测表格）；否则展示基础信息 + 监测表格 -->
+        <template v-if="modelStore.globalDrawerMode === 'speciesIntro'">
+          <speciesIntroMod />
+          <monitoringTableMod />
+        </template>
+        <template v-else>
+          <basicInfoMod />
+          <monitoringTableMod />
+        </template>
       </GlobalRightDrawer>
     </div>
 
diff --git a/frontend/src/modules/EnvironmentalQuality/index.vue b/frontend/src/modules/EnvironmentalQuality/index.vue
index 560a28e7..a3636749 100644
--- a/frontend/src/modules/EnvironmentalQuality/index.vue
+++ b/frontend/src/modules/EnvironmentalQuality/index.vue
@@ -1,46 +1,95 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="地表水水质达标率" :select="select" :datetimePicker="datetimePicker"
-        @update-values="handlePanelChange1" :style="chartData.length === 0 && !loading && baseid != 'all' ? 'height: 300px' : 'height: 650px'">
-        <div class="body_item">
-            <div v-if="baseid == 'all'" class="tabs_all">
-                <div :class="tabs == '0' ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(0)">自建水质站</div>
-                <div :class="tabs == '1' ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(1)">国家水质站</div>
-            </div>
-            <div v-show="tabs == '0' || tabs == '1'" class="tabs_body">
-                <a-spin :spinning="loading">
-                    <!-- 始终渲染图表容器，确保有固定宽高 -->
-                    <div ref="chartRef" class="chart-container"></div>
-                    <!-- 无数据时显示Empty，但不影响容器尺寸 -->
-                    <div v-if="chartData.length === 0 && !loading" class="empty-overlay"   :style="chartData.length === 0 && !loading && baseid != 'all' ? 'height: 300px' : 'height: 650px'">
-                        <a-empty description="暂无数据" />
-                    </div>
-                </a-spin>
-            </div>
+  <SidePanelItem
+    title="地表水水质达标率"
+    :select="select"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+    :style="
+      chartData.length === 0 && !loading && baseid != 'all'
+        ? 'height: 300px'
+        : 'height: 650px'
+    "
+  >
+    <div class="body_item">
+      <div v-if="baseid == 'all'" class="tabs_all">
+        <div
+          :class="tabs == '0' ? 'zhong_tabs' : 'no_tabs'"
+          @click="handleTabChange(0)"
+        >
+          自建水质站
         </div>
+        <div
+          :class="tabs == '1' ? 'zhong_tabs' : 'no_tabs'"
+          @click="handleTabChange(1)"
+        >
+          国家水质站
+        </div>
+      </div>
+      <div v-show="tabs == '0' || tabs == '1'" class="tabs_body">
+        <a-spin :spinning="loading">
+          <!-- 始终渲染图表容器，确保有固定宽高 -->
+          <div ref="chartRef" class="chart-container"></div>
+          <!-- 无数据时显示Empty，但不影响容器尺寸 -->
+          <div
+            v-if="chartData.length === 0 && !loading"
+            class="empty-overlay"
+            :style="
+              chartData.length === 0 && !loading && baseid != 'all'
+                ? 'height: 300px'
+                : 'height: 650px'
+            "
+          >
+            <a-empty description="暂无数据" />
+          </div>
+        </a-spin>
+      </div>
+    </div>
+  </SidePanelItem>
 
-    </SidePanelItem>
-
-    <!-- 环境质量满足度弹框 -->
-    <a-modal v-model:open="modalVisible" title="环境质量满足度" width="1536px" :footer="null" centered>
-        <EnvironmentalQualityTwoLayers :datas="(baseid == 'all' ? JidiSelectEventStore.jidiData : stationListForModal)" :type="select.value"
-            :dateValue="datetimePicker.value" :dataDimensionVal="(clickedBarData?.selectedId || baseid)"
-            :buildType="tabs" :typeOne="fieldOne" :baseid="baseid" />
-    </a-modal>
+  <!-- 环境质量满足度弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    title="环境质量满足度"
+    width="1536px"
+    :footer="null"
+    centered
+  >
+    <EnvironmentalQualityTwoLayers
+      :datas="
+        baseid == 'all' ? JidiSelectEventStore.jidiData : stationListForModal
+      "
+      :type="select.value"
+      :dateValue="datetimePicker.value"
+      :dataDimensionVal="clickedBarData?.selectedId || baseid"
+      :buildType="tabs"
+      :typeOne="fieldOne"
+      :baseid="baseid"
+    />
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch, nextTick, computed, inject } from 'vue';
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  watch,
+  nextTick,
+  computed,
+  inject,
+  defineOptions
+} from 'vue';
 import * as echarts from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { wqGetKendoListCust } from '@/api/sz'
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
-import EnvironmentalQualityTwoLayers from "./TwoLayers/EnvironmentalQualityTwoLayers.vue"
+import { wqGetKendoListCust } from '@/api/sz';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import EnvironmentalQualityTwoLayers from './TwoLayers/EnvironmentalQualityTwoLayers.vue';
 import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'EnvironmentalQuality'
+  name: 'ShuiZhiDaBiaoQingKuang'
 });
 const JidiSelectEventStore = useJidiSelectEventStore();
 const tabs: any = ref('0');
@@ -49,910 +98,951 @@ let chartInstance: echarts.ECharts | null = null;
 const loading = ref(false);
 
 // 响式图表数据
-const chartData = ref<Array<{ name: string; current: number | null; lastYear: number | null }>>([]);
+const chartData = ref<
+  Array<{ name: string; current: number | null; lastYear: number | null }>
+>([]);
 
 // 新增：存储当前基地下的电站列表（用于弹框传递）
-const stationListForModal = ref<Array<{ baseid: string; basename: string }>>([]);
+const stationListForModal = ref<Array<{ baseid: string; basename: string }>>(
+  []
+);
 
 // 新增：存储图表数据索引与 baseid/rstcd 的映射关系
 const chartDataIdMap = ref<Array<string>>([]);
 
 const select = ref({
-    show: true,
-    value: 'month',
-    options: [
-        { value: 'month', label: '月度' },
-        { value: 'year', label: '年度' }
-    ],
-    picker: undefined,
-    format: undefined,
+  show: true,
+  value: 'month',
+  options: [
+    { value: 'month', label: '月度' },
+    { value: 'year', label: '年度' }
+  ],
+  picker: undefined,
+  format: undefined
 });
 
 // 日期选择器配置
 const datetimePicker = ref({
-    show: true,
-    value: (() => {
-        const now = new Date();
-        const year = now.getFullYear();
-        const month = String(now.getMonth() + 1).padStart(2, '0');
-        return `${year}-${month}`;
-    })(),
-    format: "YYYY-MM",
-    picker: "month" as const,
-    options: [],
+  show: true,
+  value: (() => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    return `${year}-${month}`;
+  })(),
+  format: 'YYYY-MM',
+  picker: 'month' as const,
+  options: []
 });
-const baseid = ref("")
-const fieldOne = ref('')
+const baseid = ref('');
+const fieldOne = ref('');
 // 解析API返回的嵌套数据（支持两种结构）
-const parseApiResponse = (items: any[], currentValueForApi: string, lastYearValue: string) => {
-    const result: Array<{ name: string; current: number | null; lastYear: number | null }> = [];
-    fieldOne.value = ''
-    // 新增：清空 ID 映射数组
-    chartDataIdMap.value = [];
+const parseApiResponse = (
+  items: any[],
+  currentValueForApi: string,
+  lastYearValue: string
+) => {
+  const result: Array<{
+    name: string;
+    current: number | null;
+    lastYear: number | null;
+  }> = [];
+  fieldOne.value = '';
+  // 新增：清空 ID 映射数组
+  chartDataIdMap.value = [];
 
-    // 新增：提取电站列表（仅当 baseid != 'all' 时）
-    const stations: Array<{ baseid: string; basename: string }> = [];
+  // 新增：提取电站列表（仅当 baseid != 'all' 时）
+  const stations: Array<{ baseid: string; basename: string }> = [];
 
-    console.log('=== parseApiResponse 开始解析 ===');
-    console.log('currentValueForApi:', currentValueForApi);
-    console.log('lastYearValue:', lastYearValue);
-    console.log('items数量:', items?.length);
+  console.log('=== parseApiResponse 开始解析 ===');
+  console.log('currentValueForApi:', currentValueForApi);
+  console.log('lastYearValue:', lastYearValue);
+  console.log('items数量:', items?.length);
 
-    items.forEach((group, groupIndex) => {
-        console.log(`\n--- 处理第${groupIndex + 1}个group ---`);
-        console.log('group.key:', group.key);
-        console.log('group.items数量:', group.items?.length);
+  items.forEach((group, groupIndex) => {
+    console.log(`\n--- 处理第${groupIndex + 1}个group ---`);
+    console.log('group.key:', group.key);
+    console.log('group.items数量:', group.items?.length);
 
-        group.items?.forEach((mainGroup, mainIndex) => {
-            console.log(`  → 第${mainIndex + 1}个mainGroup:`);
-            console.log('    field:', mainGroup.field);
-            console.log('    key:', mainGroup.key);
+    group.items?.forEach((mainGroup, mainIndex) => {
+      console.log(`  → 第${mainIndex + 1}个mainGroup:`);
+      console.log('    field:', mainGroup.field);
+      console.log('    key:', mainGroup.key);
 
-            // 判断是哪种结构：检查第二层的field字段
-            const field = mainGroup.field;
+      // 判断是哪种结构：检查第二层的field字段
+      const field = mainGroup.field;
 
-            if (field === 'ennm' || field === 'baseId') {
-                // 提取中文名称：从mainGroup.key获取（站点名或基地ID）
-                let displayName = '';
+      if (field === 'ennm' || field === 'baseId') {
+        // 提取中文名称：从mainGroup.key获取（站点名或基地ID）
+        let displayName = '';
 
-                // mainGroup.key 可能是站点名（如"两河口"）或基地ID（如"02"）
-                if (mainGroup.key && typeof mainGroup.key === 'string') {
-                    displayName = mainGroup.key;
-                    console.log('    从mainGroup.key获取名称:', displayName);
-                }
+        // mainGroup.key 可能是站点名（如"两河口"）或基地ID（如"02"）
+        if (mainGroup.key && typeof mainGroup.key === 'string') {
+          displayName = mainGroup.key;
+          console.log('    从mainGroup.key获取名称:', displayName);
+        }
 
-                // 如果mainGroup.key不是有效的中文名称，尝试从subGroup.key获取
-                if (!displayName || !/[\u4e00-\u9fa5]/.test(displayName)) {
-                    const subGroup = mainGroup.items?.[0];
-                    console.log('    subGroup.key:', subGroup?.key);
-                    if (subGroup && subGroup.key && typeof subGroup.key === 'string') {
-                        displayName = subGroup.key; // 这里应该是中文名（如"雅砻江干流"）
-                        console.log('    从subGroup.key获取名称:', displayName);
-                    }
-                }
+        // 如果mainGroup.key不是有效的中文名称，尝试从subGroup.key获取
+        if (!displayName || !/[\u4e00-\u9fa5]/.test(displayName)) {
+          const subGroup = mainGroup.items?.[0];
+          console.log('    subGroup.key:', subGroup?.key);
+          if (subGroup && subGroup.key && typeof subGroup.key === 'string') {
+            displayName = subGroup.key; // 这里应该是中文名（如"雅砻江干流"）
+            console.log('    从subGroup.key获取名称:', displayName);
+          }
+        }
 
-                // 如果还是没有，尝试从最内层数据获取
-                if (!displayName) {
-                    const subGroup = mainGroup.items?.[0];
-                    const firstMonthGroup = subGroup?.items?.[0];
-                    const dataItem = firstMonthGroup?.items?.[0];
-                    if (dataItem) {
-                        if (field === 'ennm') {
-                            displayName = dataItem.ENNM || '';
-                        } else if (field === 'baseId') {
-                            displayName = dataItem.BASENAME || '';
-                        }
-                        console.log('    从最内层数据获取名称:', displayName);
-                    }
-                }
-
-                if (!displayName) {
-                    console.log('    ⚠️ 跳过：没有名称');
-                    return; // 跳过没有名称的数据
-                }
-
-                let currentPeriodValue: number | null = null;
-                let lastYearPeriodValue: number | null = null;
-
-                // 遍历时间分组：需要深入到第3层
-                const subGroup = mainGroup.items?.[0];
-                console.log('    subGroup.items数量:', subGroup?.items?.length);
-
-                subGroup?.items?.forEach(monthGroup => {
-                    const periodKey = monthGroup.key; // "2026-05" 或 "2025-05" 或 "2026" 或 "2025"
-                    const dataItem = monthGroup.items?.[0];
-
-                    if (dataItem) {
-                        // 兼容月度数据（COUNT_DRMONTH/wqRate）和年度数据（COUNT_DRYEAR）
-                        const value = dataItem.COUNT_DRMONTH ?? dataItem.COUNT_DRYEAR ?? dataItem.wqRate;
-                        console.log(`    时间:${periodKey}, 值:${value}`);
-
-                        // 判断是当前期还是去年同期
-                        if (periodKey === currentValueForApi) {
-                            currentPeriodValue = value != null ? Number(value) : null;
-                            console.log(`    ✓ 当前期值: ${currentPeriodValue}`);
-                        } else if (periodKey === lastYearValue) {
-                            lastYearPeriodValue = value != null ? Number(value) : null;
-                            console.log(`    ✓ 去年同期值: ${lastYearPeriodValue}`);
-                        }
-                    }
-                });
-
-                // 添加换行符：在"干流"前添加\n
-                const finalDisplayName = displayName.replace(/干流$/, '\n干流');
-
-                console.log(`  → 最终数据: {name: "${finalDisplayName}", current: ${currentPeriodValue}, lastYear: ${lastYearPeriodValue}}`);
-
-                // 新增：记录 ID 映射关系
-                if (field === 'baseId') {
-                    fieldOne.value = 'all'
-                    // baseid == 'all' 时，记录基地 ID
-                    chartDataIdMap.value.push(mainGroup.key); // "02", "03" 等
-                    console.log('    记录基地ID:', mainGroup.key);
-                } else if (field === 'ennm') {
-                    fieldOne.value = 'other'
-                    // baseid != 'all' 时，记录电站编码
-                    const stationCode = subGroup?.key; // "008660306300000001"
-                    chartDataIdMap.value.push(stationCode || '');
-                    console.log('    记录电站编码:', stationCode);
-
-                    // 同时提取电站列表
-                    if (displayName && stationCode) {
-                        stations.push({
-                            baseid: stationCode,
-                            basename: displayName
-                        });
-                    }
-                }
-
-                result.push({
-                    name: finalDisplayName,
-                    current: currentPeriodValue,
-                    lastYear: lastYearPeriodValue
-                });
+        // 如果还是没有，尝试从最内层数据获取
+        if (!displayName) {
+          const subGroup = mainGroup.items?.[0];
+          const firstMonthGroup = subGroup?.items?.[0];
+          const dataItem = firstMonthGroup?.items?.[0];
+          if (dataItem) {
+            if (field === 'ennm') {
+              displayName = dataItem.ENNM || '';
+            } else if (field === 'baseId') {
+              displayName = dataItem.BASENAME || '';
             }
+            console.log('    从最内层数据获取名称:', displayName);
+          }
+        }
+
+        if (!displayName) {
+          console.log('    ⚠️ 跳过：没有名称');
+          return; // 跳过没有名称的数据
+        }
+
+        let currentPeriodValue: number | null = null;
+        let lastYearPeriodValue: number | null = null;
+
+        // 遍历时间分组：需要深入到第3层
+        const subGroup = mainGroup.items?.[0];
+        console.log('    subGroup.items数量:', subGroup?.items?.length);
+
+        subGroup?.items?.forEach(monthGroup => {
+          const periodKey = monthGroup.key; // "2026-05" 或 "2025-05" 或 "2026" 或 "2025"
+          const dataItem = monthGroup.items?.[0];
+
+          if (dataItem) {
+            // 兼容月度数据（COUNT_DRMONTH/wqRate）和年度数据（COUNT_DRYEAR）
+            const value =
+              dataItem.COUNT_DRMONTH ??
+              dataItem.COUNT_DRYEAR ??
+              dataItem.wqRate;
+            console.log(`    时间:${periodKey}, 值:${value}`);
+
+            // 判断是当前期还是去年同期
+            if (periodKey === currentValueForApi) {
+              currentPeriodValue = value != null ? Number(value) : null;
+              console.log(`    ✓ 当前期值: ${currentPeriodValue}`);
+            } else if (periodKey === lastYearValue) {
+              lastYearPeriodValue = value != null ? Number(value) : null;
+              console.log(`    ✓ 去年同期值: ${lastYearPeriodValue}`);
+            }
+          }
         });
+
+        // 添加换行符：在"干流"前添加\n
+        const finalDisplayName = displayName.replace(/干流$/, '\n干流');
+
+        console.log(
+          `  → 最终数据: {name: "${finalDisplayName}", current: ${currentPeriodValue}, lastYear: ${lastYearPeriodValue}}`
+        );
+
+        // 新增：记录 ID 映射关系
+        if (field === 'baseId') {
+          fieldOne.value = 'all';
+          // baseid == 'all' 时，记录基地 ID
+          chartDataIdMap.value.push(mainGroup.key); // "02", "03" 等
+          console.log('    记录基地ID:', mainGroup.key);
+        } else if (field === 'ennm') {
+          fieldOne.value = 'other';
+          // baseid != 'all' 时，记录电站编码
+          const stationCode = subGroup?.key; // "008660306300000001"
+          chartDataIdMap.value.push(stationCode || '');
+          console.log('    记录电站编码:', stationCode);
+
+          // 同时提取电站列表
+          if (displayName && stationCode) {
+            stations.push({
+              baseid: stationCode,
+              basename: displayName
+            });
+          }
+        }
+
+        result.push({
+          name: finalDisplayName,
+          current: currentPeriodValue,
+          lastYear: lastYearPeriodValue
+        });
+      }
     });
+  });
 
-    // 新增：如果提取到了电站列表，更新响应式变量
-    if (stations.length > 0) {
-        stationListForModal.value = stations;
-        console.log('提取到的电站列表:', stations);
-    } else {
-        stationListForModal.value = [];
-    }
+  // 新增：如果提取到了电站列表，更新响应式变量
+  if (stations.length > 0) {
+    stationListForModal.value = stations;
+    console.log('提取到的电站列表:', stations);
+  } else {
+    stationListForModal.value = [];
+  }
 
-    console.log('ID 映射关系:', chartDataIdMap.value);
-    console.log('\n=== parseApiResponse 解析完成 ===');
-    console.log('result数量:', result.length);
-    console.log('result:', result);
+  console.log('ID 映射关系:', chartDataIdMap.value);
+  console.log('\n=== parseApiResponse 解析完成 ===');
+  console.log('result数量:', result.length);
+  console.log('result:', result);
 
-    return result;
+  return result;
 };
 
 // 处理tab切换
 const handleTabChange = (tab: number) => {
-    tabs.value = tab;
-    getEchartsData()
+  tabs.value = tab;
+  getEchartsData();
 };
 
 //监听tabs变化，处理图表刷新
-watch(tabs, (newVal) => {
-    if (newVal === '0' || newVal === '1') {
-        nextTick(() => {
-            setTimeout(() => {
-                getEchartsData();
-
-            }, 50);
-        });
-    }
+watch(tabs, newVal => {
+  if (newVal === '0' || newVal === '1') {
+    nextTick(() => {
+      setTimeout(() => {
+        getEchartsData();
+      }, 50);
+    });
+  }
 });
 // 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
 const injectedStation = inject<any>('dianZhanStation', null);
-const stationSource = computed(() => injectedStation?.value || JidiSelectEventStore.selectedItem);
+const stationSource = computed(
+  () => injectedStation?.value || JidiSelectEventStore.selectedItem
+);
 
 watch(
-    () => stationSource.value,
-    (newVal) => {
-        if (newVal && newVal.wbsCode) {
-            baseid.value = newVal.wbsCode;
-            getEchartsData();
-        }
-    },
-    { deep: true }
+  () => stationSource.value,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
+      getEchartsData();
+    }
+  },
+  { deep: true }
 );
 
 // 初始化图表实例（仅创建实例，不设置option）
 const initChart = (): Promise<void> => {
-    return new Promise((resolve, reject) => {
-        if (!chartRef.value) {
-            console.error('图表容器ref不存在');
-            reject(new Error('图表容器不存在'));
-            return;
-        }
+  return new Promise((resolve, reject) => {
+    if (!chartRef.value) {
+      console.error('图表容器ref不存在');
+      reject(new Error('图表容器不存在'));
+      return;
+    }
 
-        if (chartInstance) {
-            resolve();
-            return;
-        }
+    if (chartInstance) {
+      resolve();
+      return;
+    }
 
-        const domElement = chartRef.value;
+    const domElement = chartRef.value;
 
-        // 检查 DOM 尺寸
-        if (domElement.clientWidth === 0 || domElement.clientHeight === 0) {
-            console.warn('图表容器尺寸为0，等待DOM布局完成...', {
-                clientWidth: domElement.clientWidth,
-                clientHeight: domElement.clientHeight,
-                offsetWidth: domElement.offsetWidth,
-                offsetHeight: domElement.offsetHeight
-            });
+    // 检查 DOM 尺寸
+    if (domElement.clientWidth === 0 || domElement.clientHeight === 0) {
+      console.warn('图表容器尺寸为0，等待DOM布局完成...', {
+        clientWidth: domElement.clientWidth,
+        clientHeight: domElement.clientHeight,
+        offsetWidth: domElement.offsetWidth,
+        offsetHeight: domElement.offsetHeight
+      });
 
-            // 使用多次重试机制
-            let retryCount = 0;
-            const maxRetries = 10;
+      // 使用多次重试机制
+      let retryCount = 0;
+      const maxRetries = 10;
 
-            const tryInit = () => {
-                retryCount++;
+      const tryInit = () => {
+        retryCount++;
 
-                if (domElement.clientWidth > 0 && domElement.clientHeight > 0) {
-                    chartInstance = echarts.init(domElement);
-                    console.log('图表实例已创建（第' + retryCount + '次尝试）');
-                    resolve();
-                } else if (retryCount < maxRetries) {
-                    console.log(`第${retryCount}次尝试，容器尺寸仍为0，继续等待...`);
-                    requestAnimationFrame(tryInit);
-                } else {
-                    console.error('图表容器尺寸仍为0，已达到最大重试次数', {
-                        clientWidth: domElement.clientWidth,
-                        clientHeight: domElement.clientHeight
-                    });
-                    reject(new Error('图表容器尺寸为0'));
-                }
-            };
-
-            // 开始重试
-            requestAnimationFrame(tryInit);
+        if (domElement.clientWidth > 0 && domElement.clientHeight > 0) {
+          chartInstance = echarts.init(domElement);
+          console.log('图表实例已创建（第' + retryCount + '次尝试）');
+          resolve();
+        } else if (retryCount < maxRetries) {
+          console.log(`第${retryCount}次尝试，容器尺寸仍为0，继续等待...`);
+          requestAnimationFrame(tryInit);
         } else {
-            // 尺寸正常，直接初始化
-            chartInstance = echarts.init(domElement);
-            console.log('图表实例已创建');
-            resolve();
+          console.error('图表容器尺寸仍为0，已达到最大重试次数', {
+            clientWidth: domElement.clientWidth,
+            clientHeight: domElement.clientHeight
+          });
+          reject(new Error('图表容器尺寸为0'));
         }
-    });
+      };
+
+      // 开始重试
+      requestAnimationFrame(tryInit);
+    } else {
+      // 尺寸正常，直接初始化
+      chartInstance = echarts.init(domElement);
+      console.log('图表实例已创建');
+      resolve();
+    }
+  });
 };
 
 //获取图表数据
 const getEchartsData = async () => {
-    // 1. 格式验证
-    const currentValue = datetimePicker.value.value;
-    // 
-    if (select.value.value === 'year') {
-        // 年度模式：验证是否为 YYYY 格式（4位数字）
-        if (!/^\d{4}$/.test(currentValue)) {
-            console.warn('年度模式下日期格式不正确，应为 YYYY 格式');
-            return;
-        }
-    } else if (select.value.value === 'month') {
-        // 月度模式：验证是否为 YYYY-MM 格式
-        if (!/^\d{4}-\d{2}$/.test(currentValue)) {
-            console.warn('月度模式下日期格式不正确，应为 YYYY-MM 格式');
-            return;
-        }
-    } else {
-        console.warn('未知的选择器类型');
-        return;
+  // 1. 格式验证
+  const currentValue = datetimePicker.value.value;
+  //
+  if (select.value.value === 'year') {
+    // 年度模式：验证是否为 YYYY 格式（4位数字）
+    if (!/^\d{4}$/.test(currentValue)) {
+      console.warn('年度模式下日期格式不正确，应为 YYYY 格式');
+      return;
     }
-
-    // 2. 计算当前值和上一年的值
-    let currentValueForApi: string;  // 第一个值：当前选择
-    let lastYearValue: string;       // 第二个值：上一年同期
-
-    if (select.value.value === 'year') {
-        // 年模式
-        currentValueForApi = currentValue;  // "2025"
-        lastYearValue = String(Number(currentValue) - 1);  // "2024"
-    } else {
-        // 月模式
-        currentValueForApi = currentValue;  // "2025-03"
-
-        // 提取年份和月份
-        const [year, month] = currentValue.split('-');
-        // 年份减1，月份保持不变
-        const lastYear = String(Number(year) - 1);
-        lastYearValue = `${lastYear}-${month}`;  // "2024-03"
+  } else if (select.value.value === 'month') {
+    // 月度模式：验证是否为 YYYY-MM 格式
+    if (!/^\d{4}-\d{2}$/.test(currentValue)) {
+      console.warn('月度模式下日期格式不正确，应为 YYYY-MM 格式');
+      return;
     }
+  } else {
+    console.warn('未知的选择器类型');
+    return;
+  }
 
-    // 3. 构建请求参数
-    console.log(baseid.value)
-    if( ! baseid.value){
-        return
-    }
-    // 
-    let params = {
-        "filter": {
-            "logic": "and",
-            "filters": [
-                baseid.value != 'all' ? {
-                    "field": "baseId",
-                    "operator": "eq",
-                    "value": baseid.value
-                } : null,
-                {
-                    "field": "type",
-                    "operator": "eq",
-                    "value": select.value.value == "year" ? "YEAR" : "MON"
-                },
-                baseid.value == 'all' ? {
-                    "field": "dtinType",
-                    "operator": "eq",
-                    "value":tabs.value
-                } : {
-                    "field": "rstcd",
-                    "operator": "isnotnull"
-                }, ,
-                {
-                    "logic": "or",
-                    "filters": [
-                        {
-                            "field": select.value.value == "year" ? "drYear" : "drMonth",
-                            "operator": "eq",
-                            "value": currentValueForApi,  // 当前值（年或年月）
-                            "dataType": "string"
-                        },
-                        {
-                            "field": select.value.value == "year" ? "drYear" : "drMonth",
-                            "operator": "eq",
-                            "value": lastYearValue,  // 上一年同期
-                            "dataType": "string"
-                        }
-                    ]
-                }
-            ].filter(Boolean)
+  // 2. 计算当前值和上一年的值
+  let currentValueForApi: string; // 第一个值：当前选择
+  let lastYearValue: string; // 第二个值：上一年同期
+
+  if (select.value.value === 'year') {
+    // 年模式
+    currentValueForApi = currentValue; // "2025"
+    lastYearValue = String(Number(currentValue) - 1); // "2024"
+  } else {
+    // 月模式
+    currentValueForApi = currentValue; // "2025-03"
+
+    // 提取年份和月份
+    const [year, month] = currentValue.split('-');
+    // 年份减1，月份保持不变
+    const lastYear = String(Number(year) - 1);
+    lastYearValue = `${lastYear}-${month}`; // "2024-03"
+  }
+
+  // 3. 构建请求参数
+  console.log(baseid.value);
+  if (!baseid.value) {
+    return;
+  }
+  //
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        baseid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              value: baseid.value
+            }
+          : null,
+        {
+          field: 'type',
+          operator: 'eq',
+          value: select.value.value == 'year' ? 'YEAR' : 'MON'
         },
-        "group": [
-            baseid.value == 'all' ? {
-                "dir": "des",
-                "field": "baseStepSort"
-            } : {
-                "dir": "asc",
-                "field": "rstcdStepSort"
-            }, ,
-            baseid.value == 'all' ? {
-                "dir": "des",
-                "field": "baseId"
-            } : {
-                "dir": "asc",
-                "field": "ennm"
+        baseid.value == 'all'
+          ? {
+              field: 'dtinType',
+              operator: 'eq',
+              value: tabs.value
+            }
+          : {
+              field: 'rstcd',
+              operator: 'isnotnull'
             },
-            baseid.value == 'all' ? {
-                "dir": "des",
-                "field": "baseName"
-            } : {
-                "dir": "des",
-                "field": "rstcd"
+        ,
+        {
+          logic: 'or',
+          filters: [
+            {
+              field: select.value.value == 'year' ? 'drYear' : 'drMonth',
+              operator: 'eq',
+              value: currentValueForApi, // 当前值（年或年月）
+              dataType: 'string'
             },
             {
-                "dir": "desc",
-                "field": select.value.value == "year" ? "drYear" : "drMonth"
+              field: select.value.value == 'year' ? 'drYear' : 'drMonth',
+              operator: 'eq',
+              value: lastYearValue, // 上一年同期
+              dataType: 'string'
             }
-        ].filter(Boolean),
-        "groupResultFlat": false,
-        "aggregate": [
-            {
-                "aggregate": "sum",
-                "field": "wqRate"
-            }
-        ]
-    };
-    console.log('请求参数：', params);
-    // 
-    // 4. 调用API并处理数据
-    loading.value = true;
-    try {
-        const res = await wqGetKendoListCust(params);
-
-        console.log('=== API返回数据调试 ===');
-        console.log('res:', res);
-        console.log('res.data:', res?.data);
-        console.log('res.data.data:', res?.data?.data);
-        console.log('currentValueForApi:', currentValueForApi);
-        console.log('lastYearValue:', lastYearValue);
-
-        if (!res?.data?.data) {
-            console.warn('数据获取失败或数据为空');
-            chartData.value = [];
-            // 清空图表中原有的数据
-            if (chartInstance) {
-                chartInstance.clear();
-                console.log('图表已清空（数据获取失败）');
-            }
-            return;
+          ]
         }
+      ].filter(Boolean)
+    },
+    group: [
+      baseid.value == 'all'
+        ? {
+            dir: 'des',
+            field: 'baseStepSort'
+          }
+        : {
+            dir: 'asc',
+            field: 'rstcdStepSort'
+          },
+      ,
+      baseid.value == 'all'
+        ? {
+            dir: 'des',
+            field: 'baseId'
+          }
+        : {
+            dir: 'asc',
+            field: 'ennm'
+          },
+      baseid.value == 'all'
+        ? {
+            dir: 'des',
+            field: 'baseName'
+          }
+        : {
+            dir: 'des',
+            field: 'rstcd'
+          },
+      {
+        dir: 'desc',
+        field: select.value.value == 'year' ? 'drYear' : 'drMonth'
+      }
+    ].filter(Boolean),
+    groupResultFlat: false,
+    aggregate: [
+      {
+        aggregate: 'sum',
+        field: 'wqRate'
+      }
+    ]
+  };
+  console.log('请求参数：', params);
+  //
+  // 4. 调用API并处理数据
+  loading.value = true;
+  try {
+    const res = await wqGetKendoListCust(params);
 
-        // 解析数据
-        const parsedData = parseApiResponse(res.data.data, currentValueForApi, lastYearValue);
+    console.log('=== API返回数据调试 ===');
+    console.log('res:', res);
+    console.log('res.data:', res?.data);
+    console.log('res.data.data:', res?.data?.data);
+    console.log('currentValueForApi:', currentValueForApi);
+    console.log('lastYearValue:', lastYearValue);
 
-        console.log('解析后的数据 parsedData:', parsedData);
-
-        // 只有当有数据时才更新
-        if (parsedData.length > 0) {
-            chartData.value = parsedData;
-
-            console.log('chartData.value:', chartData.value);
-
-            // 等待 DOM 更新后，再初始化和更新图表
-            await nextTick();
-
-            try {
-                // 如果图表实例不存在，先初始化（等待完成）
-                if (!chartInstance) {
-                    await initChart();
-                }
-
-                // 更新图表
-                if (chartInstance) {
-                    updateChartData(currentValueForApi, lastYearValue);
-                    console.log('图表已更新');
-                } else {
-                    console.error('图表实例创建失败');
-                }
-            } catch (error) {
-                console.error('图表初始化失败:', error);
-            }
-        } else {
-            chartData.value = [];
-            console.warn('解析后数据为空');
-            // 清空图表中原有的数据
-            if (chartInstance) {
-                chartInstance.clear();
-                console.log('图表已清空（解析后数据为空）');
-            }
-        }
-    } catch (error) {
-        console.error('获取图表数据失败:', error);
-        chartData.value = [];
-        // 清空图表中原有的数据
-        if (chartInstance) {
-            chartInstance.clear();
-            console.log('图表已清空（发生错误）');
-        }
-    } finally {
-        loading.value = false;
+    if (!res?.data?.data) {
+      console.warn('数据获取失败或数据为空');
+      chartData.value = [];
+      // 清空图表中原有的数据
+      if (chartInstance) {
+        chartInstance.clear();
+        console.log('图表已清空（数据获取失败）');
+      }
+      return;
     }
+
+    // 解析数据
+    const parsedData = parseApiResponse(
+      res.data.data,
+      currentValueForApi,
+      lastYearValue
+    );
+
+    console.log('解析后的数据 parsedData:', parsedData);
+
+    // 只有当有数据时才更新
+    if (parsedData.length > 0) {
+      chartData.value = parsedData;
+
+      console.log('chartData.value:', chartData.value);
+
+      // 等待 DOM 更新后，再初始化和更新图表
+      await nextTick();
+
+      try {
+        // 如果图表实例不存在，先初始化（等待完成）
+        if (!chartInstance) {
+          await initChart();
+        }
+
+        // 更新图表
+        if (chartInstance) {
+          updateChartData(currentValueForApi, lastYearValue);
+          console.log('图表已更新');
+        } else {
+          console.error('图表实例创建失败');
+        }
+      } catch (error) {
+        console.error('图表初始化失败:', error);
+      }
+    } else {
+      chartData.value = [];
+      console.warn('解析后数据为空');
+      // 清空图表中原有的数据
+      if (chartInstance) {
+        chartInstance.clear();
+        console.log('图表已清空（解析后数据为空）');
+      }
+    }
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+    chartData.value = [];
+    // 清空图表中原有的数据
+    if (chartInstance) {
+      chartInstance.clear();
+      console.log('图表已清空（发生错误）');
+    }
+  } finally {
+    loading.value = false;
+  }
 };
 
 // 更新图表数据
 const updateChartData = (currentLabel: string, lastYearLabel: string) => {
-    if (!chartInstance) return;
+  if (!chartInstance) return;
 
-    // 动态生成图例标签
-    const modeText = select.value.value === 'year' ? '' : ' 月度';
-    const legendCurrentLabel = currentLabel + modeText;
-    const legendLastYearLabel = ' 去年同期';
+  // 动态生成图例标签
+  const modeText = select.value.value === 'year' ? '' : ' 月度';
+  const legendCurrentLabel = currentLabel + modeText;
+  const legendLastYearLabel = ' 去年同期';
 
-    const option = {
-        // 图例配置
-        legend: {
-            top: 10,
-            itemWidth: 18,
-            itemHeight: 12,
-            itemGap: 20,
-            icon: 'roundRect',
-            data: [
-                { name: legendCurrentLabel, itemStyle: { color: '#4A8BC2' } },
-                { name: legendLastYearLabel, itemStyle: { color: '#9B59B6' } }
-            ],
-            textStyle: {
-                fontSize: 12,
-                color: '#333'
-            }
+  const option = {
+    // 图例配置
+    legend: {
+      top: 10,
+      itemWidth: 18,
+      itemHeight: 12,
+      itemGap: 20,
+      icon: 'roundRect',
+      data: [
+        { name: legendCurrentLabel, itemStyle: { color: '#4A8BC2' } },
+        { name: legendLastYearLabel, itemStyle: { color: '#9B59B6' } }
+      ],
+      textStyle: {
+        fontSize: 12,
+        color: '#333'
+      }
+    },
+
+    // 提示框配置
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(200, 200, 200, 0.2)'
         },
-
-        // 提示框配置
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                shadowStyle: {
-                    color: 'rgba(200, 200, 200, 0.2)'
-                },
-                label: {
-                    show: false
-                }
-            },
-            backgroundColor: '#fff',
-            borderColor: '#e8e8e8',
-            borderWidth: 1,
-            padding: 12,
-            textStyle: {
-                color: '#333',
-                fontSize: 12
-            },
-            formatter: (params: any) => {
-                const name = params[0].name.replace('\n', '');
-                let result = `<div style="font-weight: bold; margin-bottom: 8px;">${name}</div>`;
-                params.forEach((item: any) => {
-                    const value = item.value != null ? Number(item.value) : '-';
-                    result += `<div style="display: flex; align-items: center; margin-bottom: 4px;">
+        label: {
+          show: false
+        }
+      },
+      backgroundColor: '#fff',
+      borderColor: '#e8e8e8',
+      borderWidth: 1,
+      padding: 12,
+      textStyle: {
+        color: '#333',
+        fontSize: 12
+      },
+      formatter: (params: any) => {
+        const name = params[0].name.replace('\n', '');
+        let result = `<div style="font-weight: bold; margin-bottom: 8px;">${name}</div>`;
+        params.forEach((item: any) => {
+          const value = item.value != null ? Number(item.value) : '-';
+          result += `<div style="display: flex; align-items: center; margin-bottom: 4px;">
                         <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${item.color}; margin-right: 8px;"></span>
                         <span>${item.seriesName}:</span>
                         <span style="margin-left: auto; font-weight: bold;">${value}%</span>
                     </div>`;
-                });
-                return result;
-            }
-        },
+        });
+        return result;
+      }
+    },
 
-        // 网格配置
-        grid: {
-            left: 60,
-            right: 10,
-            top: 60,
-            bottom: 60
-        },
+    // 网格配置
+    grid: {
+      left: 60,
+      right: 10,
+      top: 60,
+      bottom: 60
+    },
 
-        // X轴配置
-        xAxis: {
-            type: 'value',
-            min: 0,
-            max: 100,
-            axisLine: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: '#e8e8e8',
-                    type: 'solid'
-                }
-            },
-            axisLabel: {
-                fontSize: 12,
-                color: '#666'
-            }
-        },
-
-        // Y轴配置
-        yAxis: {
-            type: 'category',
-            data: chartData.value.map(item => item.name),
-            inverse: true,
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: '#333',
-                    width: 1
-                }
-            },
-            axisTick: {
-                show: true,
-                length: 4,
-                lineStyle: {
-                    color: '#333',
-                    width: 1
-                }
-            },
-            axisLabel: {
-                fontSize: 12,
-                color: '#333',
-                margin: 12
-            },
-            // 在Y轴底部添加"达标率(%)"标签
-            name: '达标率(%)',
-            nameLocation: 'end',
-            nameGap: 20,
-            nameTextStyle: {
-                fontSize: 12,
-                color: '#666',
-                align: 'left'
-            }
-        },
-
-        // 系列配置
-        series: [
-            {
-                name: legendCurrentLabel,
-                type: 'bar',
-                data: chartData.value.map(item => item.current != null ? Math.floor(Number(item.current)) : null),
-                barWidth: 10,
-                barGap: '20%',
-                itemStyle: {
-                    color: '#4A8BC2',
-                    borderRadius: [0, 3, 3, 0]
-                }
-            },
-            {
-                name: legendLastYearLabel,
-                type: 'bar',
-                data: chartData.value.map(item => item.lastYear != null ? Math.floor(Number(item.lastYear)) : null),
-                barWidth: 10,
-                barGap: '20%',
-                itemStyle: {
-                    color: '#9B59B6',
-                    borderRadius: [0, 3, 3, 0]
-                }
-            }
-        ]
-    };
-
-    chartInstance.setOption(option, { notMerge: true });
-
-    // 移除旧的点击事件监听
-    chartInstance.off('click');
-
-    // 绑定点击事件
-    chartInstance.on('click', (params: any) => {
-        if (params.componentType === 'series' && params.seriesType === 'bar') {
-            // 获取点击的柱子对应的数据
-            const dataIndex = params.dataIndex;
-            const barData = chartData.value[dataIndex];
-
-            if (barData) {
-                // 新增：获取对应的 baseid 或 rstcd
-                const selectedId = chartDataIdMap.value[dataIndex] || '';
-                // 
-                clickedBarData.value = {
-                    name: barData.name.replace('\n', ''), // 去除换行符
-                    current: barData.current,
-                    lastYear: barData.lastYear,
-                    selectedId: selectedId  // 新增：存储选中的 ID
-                };
-                modalVisible.value = true;
-            }
+    // X轴配置
+    xAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e8e8e8',
+          type: 'solid'
         }
-    });
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#666'
+      }
+    },
+
+    // Y轴配置
+    yAxis: {
+      type: 'category',
+      data: chartData.value.map(item => item.name),
+      inverse: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+          width: 1
+        }
+      },
+      axisTick: {
+        show: true,
+        length: 4,
+        lineStyle: {
+          color: '#333',
+          width: 1
+        }
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#333',
+        margin: 12
+      },
+      // 在Y轴底部添加"达标率(%)"标签
+      name: '达标率(%)',
+      nameLocation: 'end',
+      nameGap: 20,
+      nameTextStyle: {
+        fontSize: 12,
+        color: '#666',
+        align: 'left'
+      }
+    },
+
+    // 系列配置
+    series: [
+      {
+        name: legendCurrentLabel,
+        type: 'bar',
+        data: chartData.value.map(item =>
+          item.current != null ? Math.floor(Number(item.current)) : null
+        ),
+        barWidth: 10,
+        barGap: '20%',
+        itemStyle: {
+          color: '#4A8BC2',
+          borderRadius: [0, 3, 3, 0]
+        }
+      },
+      {
+        name: legendLastYearLabel,
+        type: 'bar',
+        data: chartData.value.map(item =>
+          item.lastYear != null ? Math.floor(Number(item.lastYear)) : null
+        ),
+        barWidth: 10,
+        barGap: '20%',
+        itemStyle: {
+          color: '#9B59B6',
+          borderRadius: [0, 3, 3, 0]
+        }
+      }
+    ]
+  };
+
+  chartInstance.setOption(option, { notMerge: true });
+
+  // 移除旧的点击事件监听
+  chartInstance.off('click');
+
+  // 绑定点击事件
+  chartInstance.on('click', (params: any) => {
+    if (params.componentType === 'series' && params.seriesType === 'bar') {
+      // 获取点击的柱子对应的数据
+      const dataIndex = params.dataIndex;
+      const barData = chartData.value[dataIndex];
+
+      if (barData) {
+        // 新增：获取对应的 baseid 或 rstcd
+        const selectedId = chartDataIdMap.value[dataIndex] || '';
+        //
+        clickedBarData.value = {
+          name: barData.name.replace('\n', ''), // 去除换行符
+          current: barData.current,
+          lastYear: barData.lastYear,
+          selectedId: selectedId // 新增：存储选中的 ID
+        };
+        modalVisible.value = true;
+      }
+    }
+  });
 };
 
 // 监听 datetimePicker.value.value 的变化
 watch(
-    () => datetimePicker.value.value,
-    async (newValue, oldValue) => {
-        // 确保新值和旧值不同，且图表已初始化
-        if (newValue !== oldValue && chartInstance) {
-            await nextTick();
-            getEchartsData();
-        }
+  () => datetimePicker.value.value,
+  async (newValue, oldValue) => {
+    // 确保新值和旧值不同，且图表已初始化
+    if (newValue !== oldValue && chartInstance) {
+      await nextTick();
+      getEchartsData();
     }
+  }
 );
 
 //监听子组件的数据变化
-const handlePanelChange1 = async (data) => {
-    console.log('当前所有控件状态:', data);
-    // 当选择器或日期变化时,重新加载图表数据
-    if (data.select || data.datetime) {
-        await (select.value.value = data.select)
+const handlePanelChange1 = async data => {
+  console.log('当前所有控件状态:', data);
+  // 当选择器或日期变化时,重新加载图表数据
+  if (data.select || data.datetime) {
+    await (select.value.value = data.select);
 
-        // 根据 select 的值决定 datetime 的格式
-        let formattedDatetime = data.datetime;
-        if (data.select === 'year') {
-            // 如果是年度模式，将 datetime 转换为 YYYY 格式
-            if (data.datetime && typeof data.datetime === 'string') {
-                // 提取年份部分（假设原格式为 YYYY-MM）
-                const yearMatch = data.datetime.match(/^(\d{4})/);
-                if (yearMatch) {
-                    formattedDatetime = yearMatch[1];
-                }
-            }
+    // 根据 select 的值决定 datetime 的格式
+    let formattedDatetime = data.datetime;
+    if (data.select === 'year') {
+      // 如果是年度模式，将 datetime 转换为 YYYY 格式
+      if (data.datetime && typeof data.datetime === 'string') {
+        // 提取年份部分（假设原格式为 YYYY-MM）
+        const yearMatch = data.datetime.match(/^(\d{4})/);
+        if (yearMatch) {
+          formattedDatetime = yearMatch[1];
         }
-        // 如果是 month 模式，保持 datetime 原值不变
-
-        await (datetimePicker.value.value = formattedDatetime)
-        await (datetimePicker.value.picker = data.select)
-        await (datetimePicker.value.format = data.select == 'month' ? 'YYYY-MM' : 'YYYY')
-        getEchartsData()
+      }
     }
-}
+    // 如果是 month 模式，保持 datetime 原值不变
+
+    await (datetimePicker.value.value = formattedDatetime);
+    await (datetimePicker.value.picker = data.select);
+    await (datetimePicker.value.format =
+      data.select == 'month' ? 'YYYY-MM' : 'YYYY');
+    getEchartsData();
+  }
+};
 //获取图表数据
 
-
-
 // 页面加载时执行
 onMounted(() => {
-    // 延迟初始化，确保容器已渲染
-    setTimeout(() => {
-        initChart();
-        // 如果已有 selectedItem，触发数据加载
-        const currentStation = injectedStation?.value || JidiSelectEventStore.selectedItem;
-        if (currentStation?.wbsCode) {
-            baseid.value = currentStation.wbsCode;
-            getEchartsData();
-        }
-    }, 100);
+  // 延迟初始化，确保容器已渲染
+  setTimeout(() => {
+    initChart();
+    // 如果已有 selectedItem，触发数据加载
+    const currentStation =
+      injectedStation?.value || JidiSelectEventStore.selectedItem;
+    if (currentStation?.wbsCode) {
+      baseid.value = currentStation.wbsCode;
+      getEchartsData();
+    }
+  }, 100);
 
-    // 监听窗口resize
-    window.addEventListener('resize', () => {
-        chartInstance?.resize();
-    });
+  // 监听窗口resize
+  window.addEventListener('resize', () => {
+    chartInstance?.resize();
+  });
 });
 
 // 组件卸载时清理
 onUnmounted(() => {
-    chartInstance?.dispose();
-    chartInstance = null;
-    chartData.value = [];
-    window.removeEventListener('resize', () => {
-        chartInstance?.resize();
-    });
+  chartInstance?.dispose();
+  chartInstance = null;
+  chartData.value = [];
+  window.removeEventListener('resize', () => {
+    chartInstance?.resize();
+  });
 });
 
 // 弹框相关状态
 const modalVisible = ref(false);
-const clickedBarData = ref<{ name: string; current: number | null; lastYear: number | null; selectedId?: string } | null>(null);
+const clickedBarData = ref<{
+  name: string;
+  current: number | null;
+  lastYear: number | null;
+  selectedId?: string;
+} | null>(null);
 useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
-
-
 </script>
 
 <style lang="scss" scoped>
 .body_item {
-    width: 100%;
+  width: 100%;
+  height: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .tabs_all {
+    width: 28px;
+    height: 500px;
+    box-sizing: border-box;
+    border: 2px solid #2f6b98;
+    border-radius: 5px;
+
+    .zhong_tabs {
+      width: 100%;
+      height: 50%;
+      background: #2f6b98;
+      color: #fff;
+      font-size: 14px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      text-shadow: 0 0 0.25px currentcolor;
+      cursor: pointer;
+    }
+
+    .no_tabs {
+      width: 100%;
+      height: 50%;
+      font-size: 14px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      cursor: pointer;
+    }
+
+    .no_tabs:hover {
+      color: #40a9ff;
+    }
+  }
+
+  .tabs_body {
+    width: 368px;
     height: 600px;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    position: relative;
+    /* 为empty-overlay提供定位上下文 */
 
-    .tabs_all {
-        width: 28px;
-        height: 500px;
-        box-sizing: border-box;
-        border: 2px solid #2f6b98;
-        border-radius: 5px;
-
-        .zhong_tabs {
-            width: 100%;
-            height: 50%;
-            background: #2f6b98;
-            color: #fff;
-            font-size: 14px;
-            text-align: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            text-shadow: 0 0 .25px currentcolor;
-            cursor: pointer;
-        }
-
-        .no_tabs {
-            width: 100%;
-            height: 50%;
-            font-size: 14px;
-            text-align: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-            cursor: pointer;
-        }
-
-        .no_tabs:hover {
-            color: #40a9ff;
-        }
+    .chart-container {
+      width: 100% !important;
+      height: 100% !important;
+      min-width: 368px;
+      /* 强制最小宽度 */
+      min-height: 600px;
+      /* 强制最小高度 */
     }
 
-    .tabs_body {
-        width: 368px;
-        height: 600px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        /* 为empty-overlay提供定位上下文 */
-
-        .chart-container {
-            width: 100% !important;
-            height: 100% !important;
-            min-width: 368px;
-            /* 强制最小宽度 */
-            min-height: 600px;
-            /* 强制最小高度 */
-        }
-
-        .empty-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 300px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: rgba(255, 255, 255, 0.9);
-            z-index: 10;
-        }
+    .empty-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.9);
+      z-index: 10;
     }
+  }
 }
 
 .modal-content {
-    padding: 20px;
+  padding: 20px;
 
-    .detail-info {
-        .info-header {
-            margin-bottom: 24px;
-            padding-bottom: 16px;
-            border-bottom: 2px solid #e8e8e8;
+  .detail-info {
+    .info-header {
+      margin-bottom: 24px;
+      padding-bottom: 16px;
+      border-bottom: 2px solid #e8e8e8;
 
-            h3 {
-                margin: 0 0 8px 0;
-                font-size: 20px;
-                color: #333;
-                font-weight: bold;
-            }
+      h3 {
+        margin: 0 0 8px 0;
+        font-size: 20px;
+        color: #333;
+        font-weight: bold;
+      }
 
-            .time-info {
-                margin: 0;
-                font-size: 14px;
-                color: #666;
-            }
-        }
-
-        .info-body {
-            .info-item {
-                display: flex;
-                align-items: center;
-                margin-bottom: 16px;
-                padding: 12px 16px;
-                background: #f5f7fa;
-                border-radius: 4px;
-
-                .label {
-                    font-size: 14px;
-                    color: #666;
-                    min-width: 140px;
-                }
-
-                .value {
-                    font-size: 16px;
-                    font-weight: bold;
-
-                    &.current {
-                        color: #4A8BC2;
-                    }
-
-                    &.last-year {
-                        color: #9B59B6;
-                    }
-
-                    &.change {
-                        &.positive {
-                            color: #52c41a;
-                        }
-
-                        &.negative {
-                            color: #ff4d4f;
-                        }
-
-                        &.neutral {
-                            color: #666;
-                        }
-                    }
-                }
-            }
-
-            .custom-section {
-                margin-top: 24px;
-                padding: 16px;
-                background: #fafafa;
-                border-radius: 4px;
-                border: 1px solid #e8e8e8;
-
-                h4 {
-                    margin: 0 0 12px 0;
-                    font-size: 16px;
-                    color: #333;
-                }
-
-                p {
-                    margin: 0;
-                    font-size: 14px;
-                    color: #666;
-                    line-height: 1.6;
-                }
-            }
-        }
+      .time-info {
+        margin: 0;
+        font-size: 14px;
+        color: #666;
+      }
     }
+
+    .info-body {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        padding: 12px 16px;
+        background: #f5f7fa;
+        border-radius: 4px;
+
+        .label {
+          font-size: 14px;
+          color: #666;
+          min-width: 140px;
+        }
+
+        .value {
+          font-size: 16px;
+          font-weight: bold;
+
+          &.current {
+            color: #4a8bc2;
+          }
+
+          &.last-year {
+            color: #9b59b6;
+          }
+
+          &.change {
+            &.positive {
+              color: #52c41a;
+            }
+
+            &.negative {
+              color: #ff4d4f;
+            }
+
+            &.neutral {
+              color: #666;
+            }
+          }
+        }
+      }
+
+      .custom-section {
+        margin-top: 24px;
+        padding: 16px;
+        background: #fafafa;
+        border-radius: 4px;
+        border: 1px solid #e8e8e8;
+
+        h4 {
+          margin: 0 0 12px 0;
+          font-size: 16px;
+          color: #333;
+        }
+
+        p {
+          margin: 0;
+          font-size: 14px;
+          color: #666;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/IntelligentQA/index.vue b/frontend/src/modules/IntelligentQA/index.vue
index c26f98b8..f7eeb56c 100644
--- a/frontend/src/modules/IntelligentQA/index.vue
+++ b/frontend/src/modules/IntelligentQA/index.vue
@@ -3,211 +3,65 @@
   <div class="qa-container">
     <!-- ==================== 左侧侧边栏 ==================== -->
     <div class="qa-sidebar-left" :class="{ collapsed: leftCollapsed }">
-      <!-- 顶部切换栏（历史记录 / 常用问题） -->
-      <div class="sidebar-tabs">
-        <div
-          class="tab-item"
-          :class="{ active: leftTabKey === 'history' }"
-          @click="leftTabKey = 'history'"
-        >
-          <span>历史记录</span>
+      <!-- 标题区域 -->
+      <div class="qa-title">
+        <span class="qa-title-text" :title="pageTitle">{{ pageTitle }}</span>
+        <a class="qa-title-edit" @click="onTitleEditOpen">
+          <EditOutlined />
+        </a>
+      </div>
+
+      <!-- 筛选区域 -->
+      <div class="filter-area">
+        <div class="filter-item">
+          <span class="filter-label">水电基地</span>
+          <a-select
+            v-model:value="filterBase"
+            placeholder="请选择水电基地"
+            allow-clear
+            :options="baseOptions"
+          />
         </div>
-        <div
-          class="tab-item"
-          :class="{ active: leftTabKey === 'common' }"
-          @click="leftTabKey = 'common'"
-        >
-          <div>常用问题</div>
+        <div class="filter-item">
+          <span class="filter-label">电站</span>
+          <a-select
+            v-model:value="filterStation"
+            placeholder="请选择电站"
+            allow-clear
+            :options="stationOptions"
+          />
+        </div>
+        <div class="filter-item">
+          <span class="filter-label">调查类型</span>
+          <a-select
+            v-model:value="filterType"
+            placeholder="请选择调查类型"
+            allow-clear
+            :options="typeOptions"
+          />
+        </div>
+        <div class="filter-item">
+          <span class="filter-label">时间范围</span>
+          <a-select
+            v-model:value="filterTime"
+            placeholder="请选择时间范围"
+            allow-clear
+            :options="timeOptions"
+          />
+        </div>
+        <div class="filter-item">
+          <span class="filter-label">知识文献</span>
+          <a-select
+            v-model:value="filterDoc"
+            placeholder="请选择知识文献"
+            allow-clear
+            :options="docOptions"
+          />
         </div>
       </div>
 
-      <!-- 新增对话按钮 -->
-      <div class="new-chat-btn">
-        <a-button type="primary" block>
-          <template #icon
-            ><img src="@/assets/svg/add.svg" alt="新增对话"
-          /></template>
-          新增对话
-        </a-button>
-      </div>
-
-      <!-- 搜索框 -->
-      <div class="sidebar-search">
-        <a-input placeholder="请输入关键字检索" allow-clear>
-          <template #suffix><SearchOutlined /></template>
-        </a-input>
-      </div>
-
-      <!-- 对话列表（按日期分组） -->
-      <div class="sidebar-list">
-        <template v-for="group in groupedConversations" :key="group.date">
-          <!-- 日期分组头（不可选中，独立于列表项） -->
-          <div
-            class="date-header"
-            :class="{ 'date-header-pinned': group.date === '__pinned__' }"
-          >
-            {{ group.displayDate }}
-          </div>
-          <a-list :data-source="group.items" :split="false">
-            <template #renderItem="{ item }">
-              <a-list-item
-                class="list-item"
-                :class="{ selected: selectedId === item.id }"
-                @click="onConversationClick(item)"
-              >
-                <a-list-item-meta>
-                  <template #title>
-                    <!-- 重命名状态：显示输入框 -->
-                    <div v-if="editingId === item.id" style="width: 100%">
-                      <a-input
-                        ref="renameInputRef"
-                        v-model:value="editingText"
-                        size="small"
-                        class="rename-input"
-                        @pressEnter="onRenameSubmit(item)"
-                        @blur="onRenameSubmit(item)"
-                        @click.stop
-                      />
-                    </div>
-                    <!-- 普通状态：显示文本 -->
-                    <div v-else class="list-item-title" :title="item.title">
-                      <span class="title-text">{{ item.title }}</span>
-                    </div>
-                  </template>
-                </a-list-item-meta>
-                <!-- hover 时显示的更多按钮 -->
-                <template #actions v-if="editingId != item.id">
-                  <a-dropdown :trigger="['click']" placement="bottomLeft">
-                    <div
-                      class="list-item-more"
-                      @click="e => e.stopPropagation()"
-                    >
-                      <EllipsisOutlined />
-                    </div>
-                    <template #overlay>
-                      <a-menu>
-                        <a-menu-item
-                          key="top"
-                          @click="
-                            e => {
-                              e.stopPropagation();
-                              togglePin(item);
-                            }
-                          "
-                        >
-                          <PushpinOutlined
-                            :style="
-                              isPinned(item.id) ? { color: '#1677ff' } : {}
-                            "
-                          />
-                          {{ isPinned(item.id) ? '取消置顶' : '置顶' }}
-                        </a-menu-item>
-                        <a-menu-item
-                          key="rename"
-                          @click="
-                            e => {
-                              e.stopPropagation();
-                              onStartRename(item);
-                            }
-                          "
-                        >
-                          <EditOutlined /> 重命名
-                        </a-menu-item>
-                        <a-menu-item
-                          key="delete"
-                          @click="
-                            e => {
-                              e.stopPropagation();
-                              showDeleteConfirm(item);
-                            }
-                          "
-                        >
-                          <DeleteOutlined /> 删除
-                        </a-menu-item>
-                      </a-menu>
-                    </template>
-                  </a-dropdown>
-                </template>
-              </a-list-item>
-            </template>
-          </a-list>
-        </template>
-      </div>
-    </div>
-
-    <!-- 左侧收起/展开按钮（始终悬浮在 300px 右侧边缘中间） -->
-    <div
-      class="collapse-float-btn left-float-btn"
-      :class="{ collapsed: leftCollapsed }"
-      @click="leftCollapsed = !leftCollapsed"
-    >
-      <LeftOutlined v-if="!leftCollapsed" />
-      <DoubleRightOutlined v-else />
-    </div>
-
-    <!-- ==================== 中间主区域 ==================== -->
-    <div class="qa-main">
-      <!-- 滚动内容区 -->
-      <div class="main-content">
-        <!-- 空状态提示 -->
-        <div v-if="!messages.length" class="empty-state">
-          <p class="qa-card-placeholder">
-            你好！我是 AI 助手，有什么可以帮你的吗？
-          </p>
-        </div>
-
-        <!-- 消息列表（最新的在最上面） -->
-        <div v-for="msg in messages" :key="msg.id" class="msg-item msg-user">
-          <div class="msg-sender">
-            <UserOutlined class="msg-avatar" />
-            <span class="msg-label">我</span>
-          </div>
-          <div class="msg-bubble">
-            <div class="msg-text">
-              <!-- 文件标签内联在文字前面，跟随文字一起换行 -->
-              <span
-                v-for="(file, idx) in msg.files"
-                :key="idx"
-                class="msg-file-inline"
-                :title="file.name"
-              >
-                <img
-                  v-if="file.ext === 'pdf'"
-                  :src="pdfIcon"
-                  class="msg-file-icon"
-                />
-                <img
-                  v-else-if="file.ext === 'doc' || file.ext === 'docx'"
-                  :src="docIcon"
-                  class="msg-file-icon"
-                />
-                <img v-else :src="xlsxIcon" class="msg-file-icon" />
-                <span class="msg-file-name">{{ file.name }}</span> </span
-              ><span class="msg-text-inner">{{ msg.text }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 卡片操作按钮组 -->
-      <!-- <div class="card-actions">
-        <div class="card-actions-left">
-          <a-button type="text" size="small" title="复制">
-            <template #icon><CopyOutlined /></template>
-          </a-button>
-          <a-button type="text" size="small" title="重新生成">
-            <template #icon><i class="iconfont icon-Redo" /></template>
-          </a-button>
-          <a-button type="text" size="small" title="下载">
-            <template #icon><DownloadOutlined /></template>
-          </a-button>
-        </div>
-      </div> -->
-
-      <!-- 底部输入区（固定在最底部） -->
+      <!-- 底部输入区（从中间移过来） -->
       <div class="main-footer">
-        <!-- 已上传文件列表（输入框上方） -->
-
         <div class="input-wrapper">
           <div v-if="uploadedFiles.length" class="file-cards">
             <div
@@ -218,7 +72,6 @@
               @mouseleave="file.showClose = false"
             >
               <a-tooltip :title="file.name" placement="topLeft" :z-index="9999">
-                <!-- 文件类型图标（根据扩展名显示对应 SVG） -->
                 <img
                   v-if="file.ext === 'pdf'"
                   :src="pdfIcon"
@@ -244,7 +97,6 @@
                   <span class="file-size">{{ file.size }}</span>
                 </div>
               </div>
-              <!-- 右上角删除按钮（hover 1s 后显示） -->
               <div
                 class="file-close"
                 :class="{ visible: file.showClose }"
@@ -304,98 +156,221 @@
       </div>
     </div>
 
-    <!-- ==================== 右侧侧边栏 ==================== -->
-    <div class="qa-sidebar-right" :class="{ collapsed: rightCollapsed }">
-      <!-- 顶部标题 + 上传按钮 -->
-      <div class="right-header">
-        <span class="right-header-title">知识文献</span>
-        <a-button type="text" size="small" title="上传文件">
-          <template #icon>
-            <img src="@/assets/svg/upload.svg" alt="上传图标"
-          /></template>
-        </a-button>
-      </div>
+    <!-- 左侧收起/展开按钮 -->
+    <div
+      class="collapse-float-btn left-float-btn"
+      :class="{ collapsed: leftCollapsed }"
+      @click="leftCollapsed = !leftCollapsed"
+    >
+      <LeftOutlined v-if="!leftCollapsed" />
+      <DoubleRightOutlined v-else />
+    </div>
 
-      <!-- 搜索框 -->
-      <div class="sidebar-search">
-        <a-input placeholder="搜索文献" allow-clear>
-          <template #suffix><SearchOutlined /></template>
-        </a-input>
-      </div>
+    <!-- ==================== 中间主区域 ==================== -->
+    <div class="qa-main">
+      <div class="main-content">
+        <!-- 空状态提示 -->
+        <div v-if="!messages.length" class="empty-state">
+          <p class="qa-card-placeholder">
+            你好！我是 AI 助手，有什么可以帮你的吗？
+          </p>
+        </div>
 
-      <!-- 文献列表 -->
-      <div class="sidebar-list">
-        <a-list :data-source="documentList" :split="false">
-          <template #renderItem="{ item }">
-            <a-list-item class="list-item" @click="onDocClick(item)">
-              <a-list-item-meta>
-                <template #title>
-                  <!-- 重命名状态：显示输入框 -->
-                  <div v-if="editingId === item.id" style="width: 100%">
-                    <a-input
-                      ref="renameInputRef"
-                      v-model:value="editingText"
-                      size="small"
-                      class="rename-input"
-                      @pressEnter="onRenameSubmit(item)"
-                      @blur="onRenameSubmit(item)"
-                      @click.stop
-                    />
-                  </div>
-                  <!-- 普通状态：显示文本 -->
-                  <div v-else class="list-item-title" :title="item.title">
-                    <img
-                      src="@/assets/svg/pdf.svg"
-                      alt="logo"
-                      class="list-item-logo"
-                    />
-                    <span class="title-text">{{ item.title }}</span>
-                  </div>
-                </template>
-              </a-list-item-meta>
-              <template #actions>
-                <a-dropdown :trigger="['click']" placement="bottomRight">
-                  <div class="list-item-more" @click="e => e.stopPropagation()">
-                    <EllipsisOutlined />
-                  </div>
-                  <template #overlay>
-                    <a-menu>
-                      <a-menu-item key="quote">
-                        <LinkOutlined /> 引用
-                      </a-menu-item>
-                      <a-menu-item
-                        key="rename"
-                        @click="
-                          e => {
-                            e.stopPropagation();
-                            onStartRename(item);
-                          }
-                        "
-                      >
-                        <EditOutlined /> 重命名
-                      </a-menu-item>
-                      <a-menu-item
-                        key="delete"
-                        @click="
-                          e => {
-                            e.stopPropagation();
-                            showDeleteConfirm(item, 'document');
-                          }
-                        "
-                      >
-                        <DeleteOutlined /> 删除
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-              </template>
-            </a-list-item>
-          </template>
-        </a-list>
+        <!-- 消息列表（最新的在最上面） -->
+        <div v-for="msg in messages" :key="msg.id" class="msg-item msg-user">
+          <div class="msg-sender">
+            <UserOutlined class="msg-avatar" />
+            <span class="msg-label">我</span>
+          </div>
+          <div class="msg-bubble">
+            <div class="msg-text">
+              <span
+                v-for="(file, idx) in msg.files"
+                :key="idx"
+                class="msg-file-inline"
+                :title="file.name"
+              >
+                <img
+                  v-if="file.ext === 'pdf'"
+                  :src="pdfIcon"
+                  class="msg-file-icon"
+                />
+                <img
+                  v-else-if="file.ext === 'doc' || file.ext === 'docx'"
+                  :src="docIcon"
+                  class="msg-file-icon"
+                />
+                <img v-else :src="xlsxIcon" class="msg-file-icon" />
+                <span class="msg-file-name">{{ file.name }}</span>
+              </span>
+              <span class="msg-text-inner">{{ msg.text }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
-    <!-- 右侧收起/展开按钮（始终悬浮在 300px 左侧边缘中间） -->
+    <!-- ==================== 右侧侧边栏 ==================== -->
+    <div class="qa-sidebar-right" :class="{ collapsed: rightCollapsed }">
+      <!-- ===== 上半部分：历史记录 / 常用问题 ===== -->
+      <div class="right-top">
+        <div class="sidebar-tabs">
+          <div
+            class="tab-item"
+            :class="{ active: rightTabKey === 'history' }"
+            @click="rightTabKey = 'history'"
+          >
+            <span>历史记录</span>
+          </div>
+          <div
+            class="tab-item"
+            :class="{ active: rightTabKey === 'common' }"
+            @click="rightTabKey = 'common'"
+          >
+            <span>常用问题</span>
+          </div>
+        </div>
+
+        <div class="new-chat-btn">
+          <a-button type="primary" block @click="onNewChat">
+            <template #icon
+              ><img src="@/assets/svg/add.svg" alt="新增对话"
+            /></template>
+            新增对话
+          </a-button>
+        </div>
+
+        <div class="sidebar-search">
+          <a-input
+            v-model:value="rightSearchText"
+            placeholder="请输入关键字检索"
+            allow-clear
+          >
+            <template #suffix><SearchOutlined /></template>
+          </a-input>
+        </div>
+
+        <!-- 对话列表 / 常用问题列表 -->
+        <div class="sidebar-list">
+          <!-- 历史记录 -->
+          <template v-if="rightTabKey === 'history'">
+            <template
+              v-for="group in filteredGroupedConversations"
+              :key="group.date"
+            >
+              <div
+                class="date-header"
+                :class="{ 'date-header-pinned': group.date === '__pinned__' }"
+              >
+                {{ group.displayDate }}
+              </div>
+              <a-list :data-source="group.items" :split="false">
+                <template #renderItem="{ item }">
+                  <a-list-item
+                    class="list-item"
+                    :class="{ selected: selectedId === item.id }"
+                    @click="onConversationClick(item)"
+                  >
+                    <a-list-item-meta>
+                      <template #title>
+                        <div v-if="editingId === item.id" style="width: 100%">
+                          <a-input
+                            ref="renameInputRef"
+                            v-model:value="editingText"
+                            size="small"
+                            class="rename-input"
+                            @pressEnter="onRenameSubmit(item)"
+                            @blur="onRenameSubmit(item)"
+                            @click.stop
+                          />
+                        </div>
+                        <div v-else class="list-item-title" :title="item.title">
+                          <span class="title-text">{{ item.title }}</span>
+                        </div>
+                      </template>
+                    </a-list-item-meta>
+                    <template #actions v-if="editingId != item.id">
+                      <a-dropdown :trigger="['click']" placement="bottomLeft">
+                        <div
+                          class="list-item-more"
+                          @click="e => e.stopPropagation()"
+                        >
+                          <EllipsisOutlined />
+                        </div>
+                        <template #overlay>
+                          <a-menu>
+                            <a-menu-item
+                              key="top"
+                              @click="
+                                e => {
+                                  e.stopPropagation();
+                                  togglePin(item);
+                                }
+                              "
+                            >
+                              <PushpinOutlined
+                                :style="
+                                  isPinned(item.id) ? { color: '#1677ff' } : {}
+                                "
+                              />
+                              {{ isPinned(item.id) ? '取消置顶' : '置顶' }}
+                            </a-menu-item>
+                            <a-menu-item
+                              key="rename"
+                              @click="
+                                e => {
+                                  e.stopPropagation();
+                                  onStartRename(item);
+                                }
+                              "
+                            >
+                              <EditOutlined /> 重命名
+                            </a-menu-item>
+                            <a-menu-item
+                              key="delete"
+                              @click="
+                                e => {
+                                  e.stopPropagation();
+                                  showDeleteConfirm(item, 'conversation');
+                                }
+                              "
+                            >
+                              <DeleteOutlined /> 删除
+                            </a-menu-item>
+                          </a-menu>
+                        </template>
+                      </a-dropdown>
+                    </template>
+                  </a-list-item>
+                </template>
+              </a-list>
+            </template>
+          </template>
+
+          <!-- 常用问题 -->
+          <template v-if="rightTabKey === 'common'">
+            <a-list :data-source="filteredCommonQuestions" :split="false">
+              <template #renderItem="{ item }">
+                <a-list-item
+                  class="list-item common-item"
+                  @click="onCommonClick(item)"
+                >
+                  <a-list-item-meta>
+                    <template #title>
+                      <div class="list-item-title">
+                        <span class="title-text">{{ item.title }}</span>
+                      </div>
+                    </template>
+                  </a-list-item-meta>
+                </a-list-item>
+              </template>
+            </a-list>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧收起/展开按钮 -->
     <div
       class="collapse-float-btn right-float-btn"
       :class="{ collapsed: rightCollapsed }"
@@ -404,6 +379,26 @@
       <RightOutlined v-if="!rightCollapsed" />
       <DoubleLeftOutlined v-else />
     </div>
+
+    <!-- 修改标题弹窗 -->
+    <a-modal
+      v-model:open="titleEditVisible"
+      title="修改标题"
+      ok-text="确定"
+      cancel-text="取消"
+      width="360px"
+      :z-index="99999"
+      @ok="onTitleEditOk"
+    >
+      <a-input
+        v-model:value="titleDraft"
+        placeholder="请输入标题"
+        maxlength="30"
+        show-count
+        @pressEnter="onTitleEditOk"
+      />
+    </a-modal>
+
     <!-- 删除确认弹窗 -->
     <a-modal
       width="400px"
@@ -446,30 +441,70 @@ import {
   UserOutlined
 } from '@ant-design/icons-vue';
 
-// ============ 状态 ============
+// ============ 类型定义 ============
+interface ListItem {
+  id: number;
+  title: string;
+  time: string;
+}
 
-// 侧边栏收起状态
+interface UploadedFile {
+  name: string;
+  ext: string;
+  size: string;
+  showClose: boolean;
+}
+
+interface MessageItem {
+  id: number;
+  text: string;
+  files: { name: string; ext: string }[];
+}
+
+// ============ 侧边栏收起状态 ============
 const leftCollapsed = ref(false);
 const rightCollapsed = ref(false);
 
-// 左侧 Tab 当前激活 key
-const leftTabKey = ref('history');
+// ============ 页面标题 ============
+const pageTitle = ref('智能问答');
+const titleEditVisible = ref(false);
+const titleDraft = ref('');
 
-// 输入框文本
+function onTitleEditOpen() {
+  titleDraft.value = pageTitle.value;
+  titleEditVisible.value = true;
+}
+
+function onTitleEditOk() {
+  const trimmed = titleDraft.value.trim();
+  if (trimmed) {
+    pageTitle.value = trimmed;
+  }
+  titleEditVisible.value = false;
+}
+
+// ============ 右侧 Tab ============
+const rightTabKey = ref('history'); // 'history' | 'common'
+
+// ============ 右侧搜索 ============
+const rightSearchText = ref('');
+
+// ============ 文献搜索 ============
+const docSearchText = ref('');
+
+// ============ 输入框文本 ============
 const inputText = ref('');
 
-// 当前选中的对话 id
+// ============ 当前选中的对话 id ============
 const selectedId = ref<number | null>(null);
 
-/** 置顶列表（按置顶时间排序，最先置顶的在前面） */
+// ============ 置顶 ============
 const pinnedIds = ref<number[]>([]);
 
-/** 判断是否已置顶 */
 function isPinned(id: number): boolean {
   return pinnedIds.value.includes(id);
 }
 
-/** 切换置顶/取消置顶 */
 function togglePin(item: ListItem) {
   const idx = pinnedIds.value.indexOf(item.id);
   if (idx >= 0) {
@@ -480,27 +515,19 @@ function togglePin(item: ListItem) {
 }
 
 // ============ 重命名 ============
-
-/** 正在编辑重命名的对话 id（null 表示未在编辑） */
 const editingId = ref<number | null>(null);
-/** 编辑框中的文本 */
 const editingText = ref('');
-
-/** 重命名输入框模板引用 */
 const renameInputRef = ref();
 
-/** 开始重命名，自动聚焦并将光标移至文字末尾 */
 async function onStartRename(item: ListItem) {
   editingId.value = item.id;
   editingText.value = item.title;
   await nextTick();
-
   const el = renameInputRef.value;
   if (!el) return;
   if (typeof el.focus === 'function') {
     el.focus();
   }
-  // 将光标移至文字末尾
   const nativeInput = el.$el?.querySelector('input');
   if (nativeInput) {
     const len = nativeInput.value.length;
@@ -508,7 +535,6 @@ async function onStartRename(item: ListItem) {
   }
 }
 
-/** 提交重命名（回车或失焦） */
 function onRenameSubmit(item: ListItem) {
   if (editingId.value !== item.id) return;
   const trimmed = editingText.value.trim();
@@ -520,19 +546,13 @@ function onRenameSubmit(item: ListItem) {
 }
 
 // ============ 删除 ============
-
-/** 删除确认弹窗是否可见 */
 const deleteVisible = ref(false);
-/** 待删除的对话项 */
 const deleteTarget = ref<ListItem | null>(null);
-/** 删除类型：'conversation' 对话 / 'document' 文献 */
 const deleteType = ref<'conversation' | 'document'>('conversation');
-/** 删除类目中文名（用于弹窗文案） */
 const deleteLabel = computed(() =>
   deleteType.value === 'conversation' ? '对话' : '文献'
 );
 
-/** 打开删除确认弹窗 */
 function showDeleteConfirm(
   item: ListItem,
   type: 'conversation' | 'document' = 'conversation'
@@ -542,19 +562,16 @@ function showDeleteConfirm(
   deleteVisible.value = true;
 }
 
-/** 确认删除（从对话列表或文献列表中移除） */
 function onDeleteOk() {
   if (!deleteTarget.value) return;
   const id = deleteTarget.value.id;
 
-  // 从对话列表移除
   const convIdx = conversationList.value.findIndex(item => item.id === id);
   if (convIdx >= 0) {
     conversationList.value.splice(convIdx, 1);
     if (selectedId.value === id) selectedId.value = null;
   }
 
-  // 从文献列表移除
   const docIdx = documentList.value.findIndex(item => item.id === id);
   if (docIdx >= 0) {
     documentList.value.splice(docIdx, 1);
@@ -564,7 +581,6 @@ function onDeleteOk() {
   deleteVisible.value = false;
 }
 
-/** 取消删除 */
 function onDeleteCancel() {
   deleteTarget.value = null;
   deleteVisible.value = false;
@@ -572,28 +588,6 @@ function onDeleteCancel() {
 
 // ============ 模拟数据 ============
 
-// 对话列表
-interface ListItem {
-  id: number;
-  title: string;
-  time: string;
-}
-
-/** 上传文件信息 */
-interface UploadedFile {
-  name: string;
-  ext: string;
-  size: string;
-  showClose: boolean;
-}
-
-/** 单条消息 */
-interface MessageItem {
-  id: number;
-  text: string;
-  files: { name: string; ext: string }[];
-}
-
 const conversationList = ref<ListItem[]>([
   {
     id: 1,
@@ -608,7 +602,6 @@ const conversationList = ref<ListItem[]>([
   { id: 7, title: '水库调度运行方案讨论', time: '2026-07-25' }
 ]);
 
-// 文献列表
 const documentList = ref<ListItem[]>([
   {
     id: 1,
@@ -621,9 +614,62 @@ const documentList = ref<ListItem[]>([
   { id: 5, title: '水土保持方案编制指南.pdf', time: '2026-07-25' }
 ]);
 
-// ============ 日期工具 ============
+// 常用问题
+const commonQuestions = ref<ListItem[]>([
+  { id: 101, title: '如何查询水资源管理政策？', time: '' },
+  { id: 102, title: '水电站生态流量监测标准是什么？', time: '' },
+  { id: 103, title: '河长制工作流程是怎样的？', time: '' },
+  { id: 104, title: '防汛应急响应预案如何制定？', time: '' },
+  { id: 105, title: '水文数据采集有哪些方法？', time: '' },
+  { id: 106, title: '水利工程安全评估包括哪些内容？', time: '' }
+]);
 
-/** 格式化日期显示：今天/昨天/具体日期 */
+// ============ 筛选下拉选项 ============
+// 知识文献（来自 documentList）
+const docOptions = computed(() =>
+  documentList.value.map(d => ({ label: d.title, value: d.id }))
+);
+
+const timeOptions = [
+  { label: '今天', value: 'today' },
+  { label: '昨天', value: 'yesterday' },
+  { label: '最近7天', value: 'week' },
+  { label: '最近30天', value: 'month' },
+  { label: '自定义', value: 'custom' }
+];
+
+const typeOptions = [
+  { label: '水利工程', value: '水利工程' },
+  { label: '水文监测', value: '水文监测' },
+  { label: '防汛抗旱', value: '防汛抗旱' },
+  { label: '水资源管理', value: '水资源管理' },
+  { label: '水生态保护', value: '水生态保护' }
+];
+
+const stationOptions = [
+  { label: '三峡水电站', value: '三峡' },
+  { label: '葛洲坝水电站', value: '葛洲坝' },
+  { label: '溪洛渡水电站', value: '溪洛渡' },
+  { label: '向家坝水电站', value: '向家坝' },
+  { label: '白鹤滩水电站', value: '白鹤滩' }
+];
+
+const baseOptions = [
+  { label: '金沙江水电基地', value: '金沙江' },
+  { label: '长江上游水电基地', value: '长江上游' },
+  { label: '黄河上游水电基地', value: '黄河上游' },
+  { label: '澜沧江水电基地', value: '澜沧江' },
+  { label: '雅砻江水电基地', value: '雅砻江' }
+];
+
+// ============ 筛选绑定 ============
+const filterDoc = ref<number | undefined>(undefined);
+const filterTime = ref<string | undefined>(undefined);
+const filterType = ref<string | undefined>(undefined);
+const filterStation = ref<string | undefined>(undefined);
+const filterBase = ref<string | undefined>(undefined);
+
+// ============ 日期工具 ============
 function formatDate(dateStr: string): string {
   const today = new Date();
   const yesterday = new Date(today);
@@ -639,29 +685,27 @@ function formatDate(dateStr: string): string {
 
   if (dateStr === todayStr) return '今天';
   if (dateStr === yesterdayStr) return '昨天';
-  // 同一年只显示月-日
   const year = dateStr.slice(0, 4);
   if (year === String(today.getFullYear())) {
-    return dateStr.slice(5); // "MM-DD"
+    return dateStr.slice(5);
   }
   return dateStr;
 }
 
 // ============ 计算属性 ============
 
-/** 按日期分组（倒序），每组包含 displayDate */
 interface ConversationGroup {
   date: string;
   displayDate: string;
   items: ListItem[];
 }
 
+// 分组（置顶 + 按日期）
 const groupedConversations = computed<ConversationGroup[]>(() => {
   const pinnedSet = new Set(pinnedIds.value);
   const pinnedItems: ListItem[] = [];
   const unpinnedItems: ListItem[] = [];
 
-  // 分离置顶与未置顶
   for (const item of conversationList.value) {
     if (pinnedSet.has(item.id)) {
       pinnedItems.push(item);
@@ -672,7 +716,6 @@ const groupedConversations = computed<ConversationGroup[]>(() => {
 
   const groups: ConversationGroup[] = [];
 
-  // 置顶组（最新置顶的排最前面）
   if (pinnedItems.length > 0) {
     pinnedItems.sort(
       (a, b) => pinnedIds.value.indexOf(b.id) - pinnedIds.value.indexOf(a.id)
@@ -684,7 +727,6 @@ const groupedConversations = computed<ConversationGroup[]>(() => {
     });
   }
 
-  // 未置顶项按日期分组（倒序）
   const map = new Map<string, ListItem[]>();
   for (const item of unpinnedItems) {
     if (!map.has(item.time)) {
@@ -704,53 +746,101 @@ const groupedConversations = computed<ConversationGroup[]>(() => {
   return groups;
 });
 
+// 搜索过滤后的对话分组
+const filteredGroupedConversations = computed<ConversationGroup[]>(() => {
+  const keyword = rightSearchText.value.trim().toLowerCase();
+  if (!keyword) return groupedConversations.value;
+
+  const result: ConversationGroup[] = [];
+  for (const group of groupedConversations.value) {
+    const filteredItems = group.items.filter(item =>
+      item.title.toLowerCase().includes(keyword)
+    );
+    if (filteredItems.length) {
+      result.push({
+        ...group,
+        items: filteredItems
+      });
+    }
+  }
+  return result;
+});
+
+// 搜索过滤后的常用问题
+const filteredCommonQuestions = computed(() => {
+  const keyword = rightSearchText.value.trim().toLowerCase();
+  if (!keyword) return commonQuestions.value;
+  return commonQuestions.value.filter(item =>
+    item.title.toLowerCase().includes(keyword)
+  );
+});
+
+// 搜索过滤后的文献列表
+const filteredDocumentList = computed(() => {
+  const keyword = docSearchText.value.trim().toLowerCase();
+  if (!keyword) return documentList.value;
+  return documentList.value.filter(item =>
+    item.title.toLowerCase().includes(keyword)
+  );
+});
+
 // ============ 方法 ============
 
-/** 点击对话项 */
 function onConversationClick(item: ListItem) {
   selectedId.value = item.id;
   console.log('选中对话：', item.title);
 }
 
-/** 点击文献项 */
 function onDocClick(item: ListItem) {
   console.log('选中文献：', item.title);
 }
 
-// ============ 发送消息 ============
+function onCommonClick(item: ListItem) {
+  // 点击常用问题，自动填入输入框并发送
+  inputText.value = item.title;
+  onSend();
+}
 
-/** 消息列表（最新的在最前面） */
+function onNewChat() {
+  // 新建对话
+  const newId = Date.now();
+  conversationList.value.unshift({
+    id: newId,
+    title: '新对话',
+    time: new Date().toISOString().slice(0, 10)
+  });
+  selectedId.value = newId;
+  rightTabKey.value = 'history';
+  // 触发重命名
+  const newItem = conversationList.value.find(item => item.id === newId);
+  if (newItem) {
+    onStartRename(newItem);
+  }
+}
+
+// ============ 发送消息 ============
 const messages = ref<MessageItem[]>([]);
-/** 自增 ID */
 let msgId = 0;
 
-/** 发送消息 */
 function onSend() {
   if (!inputText.value.trim()) return;
-  // 构建消息：文本 + 当前已上传的文件
   messages.value.unshift({
     id: ++msgId,
     text: inputText.value.trim(),
     files: uploadedFiles.value.map(f => ({ name: f.name, ext: f.ext }))
   });
-  // 清空输入
   inputText.value = '';
   uploadedFiles.value = [];
 }
 
 // ============ 文件上传 ============
-
-/** 已上传的文件列表 */
 const uploadedFiles = ref<UploadedFile[]>([]);
-/** 隐藏的 file input 引用 */
 const fileInputRef = ref<HTMLInputElement>();
 
-/** 触发文件选择 */
 function triggerFileUpload() {
   fileInputRef.value?.click();
 }
 
-/** 文件选取后的处理 */
 function onFileSelected(e: Event) {
   const target = e.target as HTMLInputElement;
   if (!target.files?.length) return;
@@ -762,31 +852,26 @@ function onFileSelected(e: Event) {
       showClose: false
     });
   }
-  // 重置 input 允许重复选择相同文件
   target.value = '';
 }
 
-/** 获取文件扩展名（小写） */
 function getFileExt(name: string): string {
   const idx = name.lastIndexOf('.');
   return idx > 0 ? name.slice(idx + 1).toLowerCase() : '';
 }
 
-/** 格式化文件大小（K / M） */
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) return bytes + 'B';
   if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + 'K';
   return (bytes / 1024 / 1024).toFixed(1) + 'M';
 }
 
-/** 移除文件 */
 function removeFile(index: number) {
   uploadedFiles.value.splice(index, 1);
 }
 </script>
 
 <style lang="scss" scoped>
-// 主色变量
 $primary-color: #1677ff;
 $sidebar-bg: #ffffff;
 $sidebar-width: 300px;
@@ -804,9 +889,7 @@ $border-color: #ebeef5;
   pointer-events: all;
 }
 
-// ============ 通用 ============
-
-/* 展开态收起按钮（悬浮在侧边栏外侧边缘中间） */
+// ============ 收起按钮 ============
 .collapse-float-btn {
   position: absolute;
   top: 50%;
@@ -849,6 +932,7 @@ $border-color: #ebeef5;
     }
   }
 }
+
 // ============ 左侧侧边栏 ============
 .qa-sidebar-left {
   width: $sidebar-width;
@@ -860,7 +944,6 @@ $border-color: #ebeef5;
   position: relative;
   overflow: hidden;
   transform: translateX(0);
-  /* 宽度（影响布局）与平移（视觉效果）同步变化 */
   transition: width 0.3s ease, transform 0.3s ease;
 
   &.collapsed {
@@ -875,6 +958,331 @@ $border-color: #ebeef5;
   }
 }
 
+// ============ 标题区域 ============
+.qa-title {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 16px 8px;
+  border-bottom: 1px solid $border-color;
+
+  .qa-title-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .qa-title-edit {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: $primary-color;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+// ============ 筛选区域 ============
+.filter-area {
+  flex: 1;
+  padding: 16px 16px 8px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .filter-label {
+    font-size: 12px;
+    color: #666;
+    font-weight: 500;
+    display: inline-block;
+    width: 80px;
+  }
+
+  :deep(.ant-select) {
+    width: 100%;
+    .ant-select-selector {
+      border-radius: 6px;
+    }
+  }
+}
+
+// ============ 底部输入区 ============
+.main-footer {
+  flex-shrink: 0;
+  padding: 8px 12px 16px;
+  border-top: 1px solid $border-color;
+  background: $sidebar-bg;
+}
+
+.input-wrapper {
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  padding: 8px 12px 16px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:focus-within {
+    border-color: $primary-color;
+    box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
+  }
+}
+
+.file-cards {
+  margin-bottom: 8px;
+  max-height: 120px;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.file-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  position: relative;
+  background: #fafafa;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  padding: 6px 10px;
+  padding-right: 26px;
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: #d9d9d9;
+  }
+}
+
+.file-icon {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name {
+  font-size: 12px;
+  color: #333;
+  line-height: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-meta {
+  font-size: 10px;
+  color: #999;
+  line-height: 16px;
+  display: flex;
+  gap: 8px;
+}
+
+.file-type {
+  color: #666;
+}
+.file-size {
+  color: #999;
+}
+
+.file-close {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: bold;
+  color: #ffffff;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  background: #666666;
+}
+
+.file-close.visible {
+  opacity: 1;
+}
+
+.qa-textarea {
+  resize: none;
+  font-size: 13px;
+  padding: 0 !important;
+}
+
+.input-tools {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 4px;
+
+  button {
+    min-width: 30px !important;
+    width: 30px !important;
+    height: 30px !important;
+    line-height: 30px !important;
+    padding: 0 !important;
+    border: none;
+  }
+}
+
+.input-tools-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-right: 12px;
+
+  button {
+    background: #f1f3f5;
+    border-radius: 50%;
+  }
+}
+
+// ============ 中间主区域 ============
+.qa-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #f5f7fa;
+  position: relative;
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 40px 16px;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.qa-card-placeholder {
+  color: #999;
+  font-size: 14px;
+  line-height: 1.8;
+  margin: 0;
+}
+
+// ============ 消息 ============
+.msg-item {
+  display: flex;
+  gap: 10px;
+  padding: 12px 0;
+}
+.msg-item:last-child {
+  border-bottom: none;
+}
+.msg-user {
+  flex-direction: row-reverse;
+}
+.msg-user .msg-bubble {
+  background: #eaeffd;
+}
+.msg-user .msg-text {
+  text-align: left;
+}
+
+.msg-sender {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  width: 40px;
+}
+.msg-avatar {
+  font-size: 18px;
+  color: #1677ff;
+  background: #e6f0ff;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+.msg-label {
+  font-size: 11px;
+  color: #999;
+  line-height: 1;
+}
+.msg-bubble {
+  max-width: 70%;
+  width: fit-content;
+  min-width: 0;
+  background: #f6f8fa;
+  border-radius: 8px;
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+}
+.msg-text {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.6;
+  word-break: break-word;
+}
+.msg-text-inner {
+  white-space: pre-wrap;
+}
+.msg-file-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 12px;
+  line-height: 20px;
+  vertical-align: middle;
+  margin-right: 4px;
+}
+.msg-file-icon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+.msg-file-name {
+  font-size: 12px;
+  color: #666;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 // ============ 右侧侧边栏 ============
 .qa-sidebar-right {
   width: $sidebar-width;
@@ -900,8 +1308,23 @@ $border-color: #ebeef5;
   }
 }
 
-// ============ 侧边栏公共样式 ============
+// ============ 右侧上下分区 ============
+.right-top {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
 
+.right-divider {
+  height: 1px;
+  background: $border-color;
+  flex-shrink: 0;
+  margin: 0 12px;
+}
+
+// ============ 右侧公共样式 ============
 .sidebar-tabs {
   display: flex;
   margin-top: 8px;
@@ -911,6 +1334,7 @@ $border-color: #ebeef5;
   padding: 0 12px;
   padding-bottom: 10px;
   border-bottom: 1px solid $border-color;
+  flex-shrink: 0;
 }
 
 .tab-item {
@@ -938,7 +1362,8 @@ $border-color: #ebeef5;
       height: 2px;
       position: absolute;
       bottom: -12px;
-      left: 40px;
+      left: 50%;
+      transform: translateX(-50%);
       background-color: $primary-color;
       border-radius: 0 0 2px 2px;
     }
@@ -947,7 +1372,9 @@ $border-color: #ebeef5;
 
 .new-chat-btn {
   padding: 0 12px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+  flex-shrink: 0;
+
   button {
     background-color: #edf2fd;
     color: #4b7bea;
@@ -959,10 +1386,12 @@ $border-color: #ebeef5;
     align-items: center;
     justify-content: center;
     gap: 8px;
+
     img {
       width: 14px;
       height: 14px;
     }
+
     &:hover {
       background-color: #d9e7ff;
       color: #4b7bea;
@@ -973,7 +1402,9 @@ $border-color: #ebeef5;
 .sidebar-search {
   padding: 0 12px;
   margin-bottom: 8px;
-  .ant-input-affix-wrapper {
+  flex-shrink: 0;
+
+  :deep(.ant-input-affix-wrapper) {
     border-radius: 6px;
   }
 }
@@ -984,7 +1415,10 @@ $border-color: #ebeef5;
   padding: 0 8px;
 }
 
-/* 日期分组头 */
+.doc-list {
+  padding-bottom: 8px;
+}
+
 .date-header {
   font-size: 11px;
   color: #999;
@@ -993,21 +1427,18 @@ $border-color: #ebeef5;
   user-select: none;
 }
 
-/* 置顶分组头 */
 .date-header-pinned {
   color: $primary-color;
   font-weight: 500;
   font-size: 12px;
 }
 
-/* 重命名输入框 */
 .rename-input {
   height: 28px;
   font-size: 13px;
   width: 100%;
 }
 
-/* 列表项 */
 .list-item {
   padding: 8px 12px !important;
   margin: 0 0 4px;
@@ -1019,13 +1450,11 @@ $border-color: #ebeef5;
   &:hover {
     background: #eef1f6;
 
-    /* hover 时显示更多图标 */
     .list-item-more {
       opacity: 1;
     }
   }
 
-  /* 选中态高亮 */
   &.selected {
     background: #e6f0ff;
 
@@ -1039,28 +1468,35 @@ $border-color: #ebeef5;
   }
 }
 
+.common-item {
+  &:hover {
+    background: #eef1f6;
+  }
+}
+
 .list-item-title {
   font-size: 13px;
   color: #333;
   display: flex;
   align-items: center;
   gap: 8px;
-  img {
+
+  .list-item-logo {
     width: 20px;
     height: 20px;
-    flex-shrink: 0; // 图片不收缩
+    flex-shrink: 0;
     display: inline-block;
   }
+
   .title-text {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    flex: 1; // 占据剩余空间
-    min-width: 0; // 关键：允许 flex 子项收缩到内容宽度以下
+    flex: 1;
+    min-width: 0;
   }
 }
 
-/* 列表项右侧更多图标（默认隐藏） */
 .list-item-more {
   opacity: 0;
   transition: opacity 0.2s;
@@ -1080,328 +1516,30 @@ $border-color: #ebeef5;
   }
 }
 
-/* 覆盖 ant-list-item-action 默认样式 */
 :deep(.ant-list-item-action) {
   margin-left: 0 !important;
 }
 
-// ============ 右侧侧边栏顶部 ============
-.right-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid $border-color;
-  margin-bottom: 12px;
-
-  .right-header-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #333;
-  }
-  img {
-    width: 14px;
-    height: 14px;
-    display: inline-block;
-  }
-}
-
-// ============ 中间主区域 ============
-.qa-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: #f5f7fa;
-  position: relative;
-}
-
-/* 可滚动内容区 */
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 40px 16px;
-}
-
-// ============ 空状态提示 ============
-
-.empty-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-}
-
-.qa-card-placeholder {
-  color: #999;
-  font-size: 14px;
-  line-height: 1.8;
-  margin: 0;
-}
-
-// ============ 消息列表 ============
-
-.msg-item {
-  display: flex;
-  gap: 10px;
-  padding: 12px 0;
-}
-
-.msg-item:last-child {
-  border-bottom: none;
-}
-
-/* 用户消息靠右显示 */
-.msg-user {
-  flex-direction: row-reverse;
-}
-
-.msg-user .msg-bubble {
-  background: #eaeffd;
-}
-
-.msg-user .msg-text {
-  text-align: left;
-}
-
-.msg-sender {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  width: 40px;
-}
-
-.msg-avatar {
-  font-size: 18px;
-  color: #1677ff;
-  background: #e6f0ff;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-}
-
-.msg-label {
-  font-size: 11px;
-  color: #999;
-  line-height: 1;
-}
-
-.msg-bubble {
-  max-width: 70%;
-  width: fit-content;
-  min-width: 0;
-  background: #f6f8fa;
-  border-radius: 8px;
-  padding: 10px 14px;
-  display: flex;
-  align-items: center;
-}
-
-.msg-text {
-  font-size: 14px;
-  color: #333;
-  line-height: 1.6;
-  word-break: break-word;
-}
-
-/* 文字内联包装，保留输入的换行 */
-.msg-text-inner {
-  white-space: pre-wrap;
-}
-
-/* 消息文字内联的文件标签 */
-.msg-file-inline {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  background: #fff;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  padding: 2px 6px;
-  font-size: 12px;
-  line-height: 20px;
-  vertical-align: middle;
-  margin-right: 4px;
-}
-
-.msg-file-icon {
-  width: 16px;
-  height: 16px;
-  object-fit: contain;
-}
-
-.msg-file-name {
-  font-size: 12px;
-  color: #666;
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// ============ 已上传文件卡片 ============
-
-.file-cards {
-  margin-bottom: 8px;
-  max-height: 240px;
-  overflow-y: auto;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.file-card {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 250px;
-  position: relative;
-  background: #fff;
-  border: 1px solid #e8e8e8;
-  border-radius: 6px;
-  padding: 8px 10px;
-  padding-right: 26px;
-  transition: border-color 0.2s;
-}
-
-.file-card:hover {
-  border-color: #d9d9d9;
-}
-
-/* 左侧文件类型图标 */
-.file-icon {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-  flex-shrink: 0;
-}
-
-/* 右侧文件信息 */
-.file-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.file-name {
-  font-size: 13px;
-  color: #333;
-  line-height: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-meta {
-  font-size: 11px;
-  color: #999;
-  line-height: 18px;
-  display: flex;
-  gap: 8px;
-}
-
-.file-type {
-  color: #666;
-}
-
-.file-size {
-  color: #999;
-}
-
-/* 右上角删除按钮 */
-.file-close {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 10px;
-  font-weight: bold;
-  color: #ffffff;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  background: #666666;
-}
-
-.file-close.visible {
-  opacity: 1;
-}
-
-// ============ 底部输入区（固定在最底下） ============
-.main-footer {
-  padding: 12px 40px 20px;
-  flex-shrink: 0;
-  background: #f5f7fa;
-}
-
-.input-wrapper {
-  background: #fff;
-  border: 1px solid #d9d9d9;
-  border-radius: 8px;
-  padding: 8px 12px 16px;
-  transition: border-color 0.2s, box-shadow 0.2s;
-
-  &:focus-within {
-    border-color: $primary-color;
-    box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
-  }
-}
-
-.qa-textarea {
-  resize: none;
-  font-size: 13px;
-  padding: 0 !important;
-}
-
-.input-tools {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: 4px;
-  button {
-    min-width: 30px !important;
-    width: 30px !important;
-    height: 30px !important;
-    line-height: 30px !important;
-    padding: 0 !important;
-    border: none;
-  }
-}
-
-.input-tools-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-right: 12px;
-  button {
-    background: #f1f3f5;
-    border-radius: 50%;
-  }
-}
-
 // ============ 滚动条美化 ============
 .sidebar-list::-webkit-scrollbar,
-.main-content::-webkit-scrollbar {
+.main-content::-webkit-scrollbar,
+.filter-area::-webkit-scrollbar,
+.file-cards::-webkit-scrollbar {
   width: 4px;
 }
 
 .sidebar-list::-webkit-scrollbar-thumb,
-.main-content::-webkit-scrollbar-thumb {
+.main-content::-webkit-scrollbar-thumb,
+.filter-area::-webkit-scrollbar-thumb,
+.file-cards::-webkit-scrollbar-thumb {
   background: #d0d5dd;
   border-radius: 2px;
 }
 
 .sidebar-list::-webkit-scrollbar-track,
-.main-content::-webkit-scrollbar-track {
+.main-content::-webkit-scrollbar-track,
+.filter-area::-webkit-scrollbar-track,
+.file-cards::-webkit-scrollbar-track {
   background: transparent;
 }
 </style>
diff --git a/frontend/src/modules/ShuiZhiDaBiaoQingKuang/TwoLayers/EnvironmentalQualityTwoLayers.vue b/frontend/src/modules/ShuiZhiDaBiaoQingKuang/TwoLayers/EnvironmentalQualityTwoLayers.vue
new file mode 100644
index 00000000..86ee6a7e
--- /dev/null
+++ b/frontend/src/modules/ShuiZhiDaBiaoQingKuang/TwoLayers/EnvironmentalQualityTwoLayers.vue
@@ -0,0 +1,967 @@
+<template>
+    <div class="environmental-quality-container">
+        <!-- 搜索区域 -->
+        <a-form ref="formRef" :model="formState" layout="inline" class="search-form">
+            <a-space wrap>
+                <a-form-item label="所属基地" name="dataDimensionVal">
+                    <a-select v-model:value="formState.dataDimensionVal" placeholder="请选择" style="width: 140px"
+                        show-search :filter-option="filterBaseOption" option-filter-prop="label"
+                        @change="handleBaseChange">
+                        <a-select-option v-for="item in baseList" :key="item.wbsCode" :value="item.wbsCode"
+                            :label="item.wbsName">
+                            {{ item.wbsName }}
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item v-if="typeOne == 'all'" label="测站类型" name="dtinType">
+                    <a-select v-model:value="formState.dtinType" placeholder="请选择" style="width: 120px" show-search
+                        :filter-option="filterOption" option-filter-prop="label">
+                        <a-select-option :value="''" label="全部">全部</a-select-option>
+                        <a-select-option :value="'0'" label="自建水质站">自建水质站</a-select-option>
+                        <a-select-option :value="'1'" label="国家水质站">国家水质站</a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item label="时间维度" name="types">
+                    <a-select v-model:value="formState.types" placeholder="请选择" style="width: 80px" show-search
+                        :filter-option="filterOption" option-filter-prop="label">
+                        <a-select-option value="year" label="年度">年度</a-select-option>
+                        <a-select-option value="month" label="月度">月度</a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item label="达标状态" name="sfdb">
+                    <a-select v-model:value="formState.sfdb" placeholder="请选择" style="width: 160px" show-search
+                        :filter-option="filterOption" option-filter-prop="label">
+                        <a-select-option value="" label="全部">全部</a-select-option>
+                        <a-select-option value="0" label="不达标">不达标</a-select-option>
+                        <a-select-option value="1" label="达标">达标</a-select-option>
+                        <a-select-option value="2" label="无目标等级/无数据">无目标等级/无数据</a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item label="时间" name="dateValues">
+                    <a-date-picker v-model:value="formState.dateValues"
+                        :format="formState.types === 'month' ? 'YYYY-MM' : 'YYYY'" :picker="formState.types"
+                        placeholder="请选择月份" style="width: 100px" :disabled-date="disabledMonthDate" />
+
+                </a-form-item>
+
+                <a-form-item label="断面名称" name="stnm">
+                    <a-input v-model:value="formState.stnm" placeholder="请输入断面名称" style="width: 180px" allow-clear />
+                </a-form-item>
+
+                <a-form-item>
+                    <a-space>
+                        <a-button type="primary" @click="handleSearch">查询</a-button>
+                        <a-button @click="handleReset">重置</a-button>
+                    </a-space>
+                </a-form-item>
+            </a-space>
+        </a-form>
+
+        <!-- 图表和表格布局区域 -->
+        <div class="content-layout">
+            <!-- 左侧饼图区域 -->
+            <div class="chart-section">
+                <a-spin :spinning="pieLoading" tip="加载中...">
+                    <div ref="pieChartRef" class="pie-chart-container"></div>
+                    <div v-if="!showPieChart && !pieLoading" class="empty-overlay">
+                        <a-empty description="暂无数据" />
+                    </div>
+                </a-spin>
+            </div>
+
+            <!-- 右侧表格区域 -->
+            <div class="table-section">
+                <BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="wqGetKendoList"
+                    :search-params="{ sort: sortConfig }" :transform-data="customTransform">
+                    <template #action="{ record }">
+                        <!-- 操作列 -->
+                        <a @click="handleViewDetail(record)" class="text-link">
+                            查看详情
+                        </a>
+                    </template>
+                </BasicTable>
+            </div>
+        </div>
+
+        <!-- 详情弹窗 -->
+        <a-modal v-model:open="detailModalVisible" :title="`${detailData.stnm || ''} 详细信息`" width="1536px" :footer="null"
+            @cancel="handleDetailModalClose">
+            <HJMZDTwoLays v-if="detailModalVisible" :tc="{
+                stcd: detailData.stcd || '',
+                startTime: detailData.tm,
+                endTime: (typeof detailData.tm === 'string' ? detailData.tm.split(' ')[0] : dayjs(detailData.tm).format('YYYY-MM-DD')) + ' 23:59:59',
+                sfdb: formState.sfdb || ''
+            }" :calculateFlag="{ calculateFlag: 0 }" />
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, onBeforeUnmount, watch, nextTick, h } from 'vue'
+import { message } from 'ant-design-vue'
+import * as echarts from 'echarts'
+import dayjs, { Dayjs } from 'dayjs'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import BasicTable from '@/components/BasicTable/index.vue'
+import { wqGetKendoList } from '@/api/sz'
+import HJMZDTwoLays from "./HJMZDTwoLays.vue"
+import { useDraggable } from '@/utils/drag';
+
+// 注册 dayjs 插件
+dayjs.extend(isSameOrAfter)
+
+// Props 定义
+const props = defineProps<{
+    datas?: Array<{ wbsCode: string; wbsName: string }>  // 基地列表
+    type?: string  // 时间维度
+    modalData?: string  // 模态框数据
+    dateValue?: string | Dayjs  // 日期值
+    dataDimensionVal?: string  // 数据维度值
+    buildType?: string | number  // 建设类型
+    typeOne: string //区分基地和站点
+    baseid: string
+}>()
+
+// Refs
+const formRef = ref()
+const tableRef = ref()
+const pieChartRef = ref<HTMLElement | null>(null)
+let pieChartInstance: echarts.ECharts | null = null
+
+// State
+const baseid = ref(props.baseid || '')
+const typeOne = ref(props.typeOne || '')
+const originalMonth = ref<string>('')  // 保存原始月份，用于年度切回月度时恢复
+const formState = reactive({
+    dataDimensionVal: props.dataDimensionVal || '',
+    dtinType: props.buildType.toString() || '',
+    types: props.type || 'month',
+    sfdb: '',
+    dateValues: props.dateValue ? (typeof props.dateValue === 'string' ? dayjs(props.dateValue, props.type === 'month' ? 'YYYY-MM' : 'YYYY') : props.dateValue) : dayjs(),
+    stnm: ''
+})
+const kong = ref(true)
+const baseList = computed(() => props.datas || [])
+const pieLoading = ref(false)
+const showPieChart = ref(true)
+const pieCode = ref<string[]>([])  // 饼图选中的代码，用于过滤表格
+const displayTotal = ref<number>(0)  // 饼图中心显示的总数（动态更新）
+
+// 弹窗相关
+const detailModalVisible = ref(false)
+const detailData = ref<any>({})
+const mapModalVisible = ref(false)
+const mapModalData = ref<any>({})
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
+// 排序配置
+const sortConfig = computed(() => [
+    { field: 'rstcdStepSort', dir: 'asc' },
+    { field: 'stnm', dir: 'asc' },
+    { field: 'tm', dir: 'desc' }
+])
+
+
+
+// 自定义数据转换
+const customTransform = (res: any) => {
+    return {
+        records: res?.data?.data || [],
+        total: res?.data?.total || 0
+    }
+}
+
+// 计算断面名称合并信息
+const getStnmMergeInfo = (records: any[]) => {
+    if (!records || records.length === 0) return {}
+
+    const mergeInfo: Record<number, { rowSpan: number }> = {}
+    let i = 0
+
+    while (i < records.length) {
+        const currentStnm = records[i].stnm
+        let rowSpan = 1
+
+        // 查找后续相同断面名称的行
+        let j = i + 1
+        while (j < records.length && records[j].stnm === currentStnm) {
+            rowSpan++
+            j++
+        }
+
+        // 设置第一行的 rowSpan
+        mergeInfo[i] = { rowSpan }
+
+        // 设置后续行的 rowSpan 为 0（隐藏）
+        for (let k = i + 1; k < j; k++) {
+            mergeInfo[k] = { rowSpan: 0 }
+        }
+
+        i = j
+    }
+
+    return mergeInfo
+}
+
+
+
+// 表格列定义
+const columns = [
+    {
+        title: '日期',
+        dataIndex: 'tm',
+        key: 'tm',
+        width: 120,
+        customRender: ({ record }: any) => {
+            const date = record.tm
+            if (!date) return '-'
+            if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
+                return date
+            }
+            if (typeof date === 'string' && date.includes(' ')) {
+                return date.split(' ')[0]
+            }
+            return date
+        }
+    },
+    {
+        title: '断面名称',
+        dataIndex: 'stnm',
+        key: 'stnm',
+        width: 200,
+        ellipsis: true,
+        customCell: (record: any, rowIndex: number) => {
+            const tableData = tableRef.value?.tableData || []
+            const mergeInfo = getStnmMergeInfo(tableData)
+            return mergeInfo[rowIndex] || { rowSpan: 1 }
+        }
+    },
+    {
+        title: '测站类型',
+        dataIndex: 'sttypeName',
+        key: 'sttypeName',
+        width: 80
+    },
+    {
+        title: '达标状态',
+        dataIndex: 'sfdbName',
+        key: 'sfdbName',
+        width: 80,
+        customRender: ({ record }: any) => {
+            const sfdb = record.sfdbName
+            let color = '#000000'
+
+            if (sfdb === '达标') {
+                color = '#008000' // 达标 - 绿色
+            } else if (sfdb === '不达标') {
+                color = '#FF0000' // 不达标 - 红色
+            }
+
+            return h('span', { style: { color } }, record.sfdbName || '-')
+        }
+    },
+    {
+        title: '水质要求',
+        dataIndex: 'wwqtgName',
+        key: 'wwqtgName',
+        width: 80
+    },
+    {
+        title: '当前水质',
+        dataIndex: 'wqGrdName',
+        key: 'wqGrdName',
+        width: 80
+    },
+    {
+        title: '去年同期水质',
+        dataIndex: 'beforeWqGrdName',
+        key: 'beforeWqGrdName',
+        width: 140
+    },
+    {
+        title: '操作',
+        key: 'action',
+        width: 100,
+        fixed: 'right',
+        slots: { customRender: 'action' }
+    }
+]
+
+// 禁用未来月份
+const disabledMonthDate = (current: Dayjs) => {
+    if (!current) return false
+    const now = dayjs()
+    return current.isAfter(now, 'month')
+}
+
+
+// 基地选择器搜索过滤函数
+const filterBaseOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+// 通用下拉框搜索过滤函数
+const filterOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+// 获取饼图数据
+const fetchPieData = async () => {
+    pieLoading.value = true
+
+    try {
+        // 计算时间参数
+        const timeFormat = formState.types === 'month' ? 'YYYY-MM' : 'YYYY'
+        const startTime = formState.dateValues ? formState.dateValues.format(timeFormat) : ''
+
+        if (!startTime || !formState.dataDimensionVal) {
+            showPieChart.value = false
+            return
+        }
+
+        // 构建请求参数
+        const filters: any[] = [
+            formState.dataDimensionVal != 'all' ? {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: typeOne.value == 'all' ? formState.dataDimensionVal : baseid.value
+            } : null,
+            formState.types === 'month' ? {
+                field: 'drMonth',
+                operator: 'eq',
+                dataType: 'string',
+                value: startTime
+            } : {
+                field: 'drYear',
+                operator: 'eq',
+                dataType: 'string',
+                value: startTime
+            },
+            {
+                field: 'TYPE',
+                operator: 'eq',
+                dataType: 'string',
+                value: 'DAY'
+            },
+            typeOne.value != 'all' ? {
+                field: 'rstcd',
+                operator: 'eq',
+                dataType: 'string',
+                value: formState.dataDimensionVal
+            } : null,
+            pieCode.value.length > 0 ? {
+                field: 'sfdb',
+                operator: 'in',
+                dataType: 'string',
+                value: pieCode.value
+            } : (formState.sfdb ? {
+                field: 'sfdb',
+                operator: 'eq',
+                dataType: 'string',
+                value: formState.sfdb
+            } : null),
+            formState.stnm ? {
+                field: 'stnm',
+                operator: 'contains',
+                dataType: 'string',
+                value: formState.stnm
+            } : null,
+            typeOne.value == 'all' && formState.dtinType != '' ? {
+                field: 'dtinType',
+                operator: 'eq',
+                dataType: 'string',
+                value: formState.dtinType
+            } : null
+        ].filter(Boolean)
+
+        const params = {
+            filter: {
+                logic: 'and',
+                filters
+            },
+            group: [
+                {
+                    "dir": "des",
+                    "field": "sfdb"
+                }
+            ]
+        }
+
+        // 调用API获取饼图数据
+        const res = await wqGetKendoList(params)
+
+        let data = res?.data?.data || res?.data || []
+
+        if (data.length === 0) {
+            // 销毁图表实例
+            if (pieChartInstance) {
+                pieChartInstance.dispose()
+                pieChartInstance = null
+            }
+
+            // 重置相关状态
+            displayTotal.value = 0
+            pieCode.value = []
+            showPieChart.value = false
+
+            return
+        }
+
+        // 转换数据格式 - 为每个数据项设置对应颜色
+        const dataSource = data.map((item: any) => {
+            const name = item.keyName || 'null'
+            // 根据名称设置颜色：达标-绿色，不达标-红色，其他-灰色
+            let color = '#d9d9d9'
+            if (name === '达标') {
+                color = '#52c41a' // 绿色
+            } else if (name === '不达标') {
+                color = '#ff4d4f' // 红色
+            }
+
+            return {
+                name: name,
+                value: item.count,
+                key: item.keyName === '达标' ? 'DB_STATUS_1' : item.keyName === '不达标' ? 'DB_STATUS_0' : 'CURNODATA',
+                keyData: item?.key,
+                itemStyle: {
+                    color: color
+                }
+            }
+        })
+
+        // 使用所有数据项，包括"无数据"
+        const filteredDataSource = dataSource
+
+        if (filteredDataSource.length === 0) {
+            showPieChart.value = false
+            return
+        }
+
+        showPieChart.value = true
+
+        // 初始化或更新饼图
+        await nextTick()
+        initPieChart(filteredDataSource)
+
+    } catch (error) {
+        console.error('获取饼图数据失败:', error)
+        message.error('获取饼图数据失败')
+        showPieChart.value = false
+    } finally {
+        pieLoading.value = false
+    }
+}
+
+// 初始化饼图
+const initPieChart = (data: any[]) => {
+    if (!pieChartRef.value) return
+
+    // 如果实例已存在，先销毁
+    if (pieChartInstance) {
+        pieChartInstance.dispose()
+        pieChartInstance = null
+    }
+
+    pieChartInstance = echarts.init(pieChartRef.value)
+
+    // 计算总数并初始化 displayTotal
+    const total = data.reduce((sum, item) => sum + item.value, 0)
+    displayTotal.value = total
+
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c} 次 ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            right: '10%',
+            top: '10%',
+            data: data.map(item => item.name)
+        },
+        title: [
+            {
+                text: displayTotal.value.toString(),
+                left: '39%',
+                top: '38%',
+                textAlign: 'center',
+                textStyle: {
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    color: '#2f6b98'
+                }
+            },
+            {
+                text: '监测总次数',
+                left: '39%',
+                top: '44%',
+                textAlign: 'center',
+                textStyle: {
+                    fontSize: 13,
+                    color: '#333333',
+                    fontWeight: '500'
+                }
+            },
+            {
+                text: '(次)',
+                left: '39%',
+                top: '49%',
+                textAlign: 'center',
+                textStyle: {
+                    fontSize: 13,
+                    color: '#333333',
+                    fontWeight: '500'
+                }
+            }
+        ],
+        series: [
+            {
+                name: '断面总数量',
+                type: 'pie',
+                radius: ['25%', '35%'],
+                center: ['40%', '45%'],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                label: {
+                    show: true,
+                    formatter: '{b}'
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 14,
+                        fontWeight: 'bold'
+                    }
+                },
+                data: data
+            }
+        ]
+    }
+
+    pieChartInstance.setOption(option)
+
+    // 绑定点击事件 - 过滤表格数据
+    pieChartInstance.on('legendselectchanged', (params: any) => {
+        kong.value = false
+        const selectedKeys = Object.keys(params.selected).filter(key => params.selected[key])
+        const allFalse = Object.values(params.selected).every(value => value === false)
+
+        // 动态计算当前显示的总数
+        if (allFalse) {
+            // 所有图例都取消选中，显示 0
+            displayTotal.value = 0
+        } else {
+            // 只统计被选中图例的数量总和
+            displayTotal.value = data
+                .filter(item => selectedKeys.includes(item.name))
+                .reduce((sum, item) => sum + item.value, 0)
+        }
+
+        // 局部更新 title 文本
+        pieChartInstance.setOption({
+            title: [
+                {
+                    text: displayTotal.value.toString()
+                }
+            ]
+        })
+
+        const selectedCodes = data
+            .filter(item => selectedKeys.includes(item.name))
+            .map(item => item.keyData)
+
+        pieCode.value = allFalse ? ['5'] : selectedCodes
+        // 刷新表格
+        handleSearch()
+    })
+}
+
+// 基地变化处理
+const handleBaseChange = () => {
+    formState.stnm = ''
+    handleSearch()
+}
+
+// 查询处理
+const handleSearch = () => {
+    const timeFormat = formState.types === 'month' ? 'YYYY-MM' : 'YYYY'
+    const startTime = formState.dateValues ? formState.dateValues.format(timeFormat) : ''
+    // console.log( typeOne.value )
+    // console.log( formState.dtinType )
+    // console.log(typeOne.value == 'all' && formState.dtinType !='')
+    //  
+    const filters: any[] = [
+        formState.dataDimensionVal != 'all' ? {
+            field: 'baseId',
+            operator: 'eq',
+            dataType: 'string',
+            value: typeOne.value == 'all' ? formState.dataDimensionVal : baseid.value
+        } : null,
+        formState.types === 'month' ? {
+            field: 'drMonth',
+            operator: 'eq',
+            dataType: 'string',
+            value: startTime
+        } : {
+            field: 'drYear',
+            operator: 'eq',
+            dataType: 'string',
+            value: startTime
+        },
+        {
+            field: 'TYPE',
+            operator: 'eq',
+            dataType: 'string',
+            value: 'DAY'
+        },
+        typeOne.value != 'all' ? {
+            field: 'rstcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: formState.dataDimensionVal
+        } : null,
+        pieCode.value.length > 0 ? {
+            field: 'sfdb',
+            operator: 'in',
+            dataType: 'string',
+            value: pieCode.value
+        } : (formState.sfdb ? {
+            field: 'sfdb',
+            operator: 'eq',
+            dataType: 'string',
+            value: formState.sfdb
+        } : null),
+        formState.stnm ? {
+            field: 'stnm',
+            operator: 'contains',
+            dataType: 'string',
+            value: formState.stnm
+        } : null,
+        typeOne.value == 'all' && formState.dtinType != '' ? {
+            field: 'dtinType',
+            operator: 'eq',
+            dataType: 'string',
+            value: formState.dtinType
+        } : null
+    ].filter(Boolean)
+
+    const filter = {
+        logic: 'and',
+        filters
+    }
+
+    // 刷新表格
+    tableRef.value?.getList(filter)
+    if (kong.value) {
+        // 
+        fetchPieData()
+    }
+    kong.value = true
+
+}
+
+// 重置处理
+const handleReset = () => {
+    formState.dataDimensionVal = props.dataDimensionVal || ''
+    formState.dtinType = ''
+    formState.types = props.type || 'month'
+    formState.sfdb = ''
+    formState.dateValues =props.dateValue ? (typeof props.dateValue === 'string' ? dayjs(props.dateValue, props.type === 'month' ? 'YYYY-MM' : 'YYYY') : props.dateValue) : dayjs(),
+    formState.stnm = ''
+    pieCode.value = []
+
+    handleSearch()
+}
+
+// 查看详情
+const handleViewDetail = (record: any) => {
+    detailData.value = { ...record }
+    detailModalVisible.value = true
+}
+
+// 详情弹窗关闭
+const handleDetailModalClose = () => {
+    detailModalVisible.value = false
+    detailData.value = {}
+}
+// 地图弹窗关闭
+const handleMapModalClose = () => {
+    mapModalVisible.value = false
+    mapModalData.value = {}
+}
+
+// 监听日期变化
+watch(
+    () => formState.dateValues,
+    () => {
+        handleSearch()
+    }
+)
+
+// 监听 props.dataDimensionVal 变化，重置表单状态并重新加载数据
+watch(
+    () => props.dataDimensionVal,
+    (newVal) => {
+        // 重置表单状态
+        formState.dataDimensionVal = newVal || ''
+        formState.dtinType = props.buildType.toString() || ''
+        formState.sfdb = ''
+        formState.stnm = ''
+        pieCode.value = []
+        // 重新加载数据
+        nextTick(() => {
+            handleSearch()
+        })
+    }
+)
+
+// 监听 props.type 变化，同步更新时间维度和日期格式
+watch(
+    () => props.type,
+    (newType) => {
+        if (!newType || newType === formState.types) return
+
+        // 转换日期格式以匹配新的时间维度
+        const currentValue: any = formState.dateValues
+        if (currentValue) {
+            if (newType === 'year') {
+                // 切换到年度模式：保存当前月份
+                if (typeof currentValue.year === 'function') {
+                    // dayjs 对象，保存月份
+                    originalMonth.value = String(currentValue.month() + 1).padStart(2, '0')
+                    const year = currentValue.year()
+                    formState.dateValues = dayjs(String(year), 'YYYY')
+                } else if (typeof currentValue === 'string') {
+                    // 字符串，提取并保存月份
+                    const monthMatch = currentValue.match(/^(\d{4})-(\d{2})/)
+                    if (monthMatch) {
+                        originalMonth.value = monthMatch[2]
+                        formState.dateValues = dayjs(monthMatch[1], 'YYYY')
+                    } else {
+                        const yearMatch = currentValue.match(/^(\d{4})/)
+                        if (yearMatch) {
+                            formState.dateValues = dayjs(yearMatch[1], 'YYYY')
+                        }
+                    }
+                }
+            } else if (newType === 'month') {
+                // 切换到月度模式：恢复原来保存的月份
+                const monthToUse = originalMonth.value || '01'
+                if (typeof currentValue.year === 'function') {
+                    const year = currentValue.year()
+                    formState.dateValues = dayjs(`${year}-${monthToUse}`, 'YYYY-MM')
+                } else if (typeof currentValue === 'string') {
+                    const yearMatch = currentValue.match(/^(\d{4})/)
+                    if (yearMatch) {
+                        formState.dateValues = dayjs(`${yearMatch[1]}-${monthToUse}`, 'YYYY-MM')
+                    }
+                }
+            }
+        }
+
+        // 更新时间维度
+        formState.types = newType
+
+        // 重新加载数据
+        nextTick(() => {
+            handleSearch()
+        })
+    }
+)
+
+// 监听 props.typeOne 变化,同步更新本地 state
+watch(
+    () => props.typeOne,
+    (newVal) => {
+        typeOne.value = newVal
+        // 
+    }
+)
+
+// 监听 props.baseid 变化，同步更新本地 state
+watch(
+    () => props.baseid,
+    (newVal) => {
+        baseid.value = newVal || ''
+    }
+)
+
+// 监听时间维度变化，自动转换日期格式
+watch(
+    () => formState.types,
+    (newType, oldType) => {
+        if (!formState.dateValues || newType === oldType) return
+        // 
+        const currentValue: any = formState.dateValues
+
+        if (newType === 'year') {
+            // 从月度切换到年度：保存当前月份
+            if (currentValue && typeof currentValue.year === 'function') {
+                // dayjs 对象，保存月份
+                originalMonth.value = String(currentValue.month() + 1).padStart(2, '0')
+                const year = currentValue.year()
+                formState.dateValues = dayjs(String(year), 'YYYY')
+            } else if (typeof currentValue === 'string') {
+                // 字符串，提取并保存月份
+                const monthMatch = currentValue.match(/^(\d{4})-(\d{2})/)
+                if (monthMatch) {
+                    originalMonth.value = monthMatch[2]
+                    formState.dateValues = dayjs(monthMatch[1], 'YYYY')
+                } else {
+                    const yearMatch = currentValue.match(/^(\d{4})/)
+                    if (yearMatch) {
+                        formState.dateValues = dayjs(yearMatch[1], 'YYYY')
+                    }
+                }
+            }
+        } else if (newType === 'month') {
+            // 从年度切换到月度：恢复原来保存的月份
+            const monthToUse = originalMonth.value || '01'
+            if (currentValue && typeof currentValue.year === 'function') {
+                const year = currentValue.year()
+                formState.dateValues = dayjs(`${year}-${monthToUse}`, 'YYYY-MM')
+            } else if (typeof currentValue === 'string') {
+                const yearMatch = currentValue.match(/^(\d{4})/)
+                if (yearMatch) {
+                    formState.dateValues = dayjs(`${yearMatch[1]}-${monthToUse}`, 'YYYY-MM')
+                }
+            }
+        }
+
+        // 日期格式转换后，重新获取数据
+        nextTick(() => {
+            handleSearch()
+        })
+    }
+)
+
+// 初始化
+onMounted(async () => {
+    await nextTick()
+    handleSearch()
+
+    // 监听窗口resize
+    window.addEventListener('resize', () => {
+        pieChartInstance?.resize()
+    })
+})
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+    pieChartInstance?.dispose()
+    pieChartInstance = null
+    window.removeEventListener('resize', () => {
+        pieChartInstance?.resize()
+    })
+})
+
+// 暴露方法给父组件
+defineExpose({
+    handleSearch
+})
+
+</script>
+
+<style scoped lang="scss">
+.environmental-quality-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .search-form {
+        background: #fff;
+        border-radius: 4px;
+        padding: 0px 0px 16px 0px;
+
+        :deep(.ant-space) {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        :deep(.ant-form-item) {
+            margin-bottom: 0;
+        }
+    }
+
+    .content-layout {
+        flex: 1;
+        display: flex;
+        gap: 16px;
+        overflow: hidden;
+
+        .chart-section {
+            width: 35%;
+            min-width: 300px;
+            background: #fff;
+            border-radius: 4px;
+            padding: 16px;
+            position: relative;
+
+            .pie-chart-container {
+                width: 100%;
+                height: 482px;
+            }
+
+            .empty-overlay {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: rgba(255, 255, 255, 0.9);
+                z-index: 10;
+            }
+        }
+
+        .table-section {
+            flex: 1;
+            background: #fff;
+            border-radius: 4px;
+            padding: 16px;
+            overflow: hidden;
+        }
+    }
+
+    .text-link {
+        color: #2f6b98;
+
+        &:hover {
+            color: #40a9ff;
+        }
+    }
+
+    .modal-content {
+        padding: 20px;
+        max-height: 600px;
+        overflow-y: auto;
+
+        pre {
+            background: #f5f5f5;
+            padding: 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            margin-top: 16px;
+        }
+    }
+}
+
+:deep(.ant-spin-nested-loading) {
+    height: 100%;
+}
+
+:deep(.ant-spin-container) {
+    height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/modules/ShuiZhiDaBiaoQingKuang/TwoLayers/HJMZDTwoLays.vue b/frontend/src/modules/ShuiZhiDaBiaoQingKuang/TwoLayers/HJMZDTwoLays.vue
new file mode 100644
index 00000000..33d3ab2a
--- /dev/null
+++ b/frontend/src/modules/ShuiZhiDaBiaoQingKuang/TwoLayers/HJMZDTwoLays.vue
@@ -0,0 +1,595 @@
+<template>
+  <div>
+    <!-- 搜索表单 - 使用 Ant Design Vue 原生组件 -->
+    <a-form
+      ref="formRef"
+      :model="formState"
+      layout="inline"
+      @finish="onFinish"
+      style="margin-bottom: 16px"
+    >
+      <a-form-item label="达标状态" name="sfdb">
+        <a-select
+          v-model:value="formState.sfdb"
+          placeholder="请选择"
+          allow-clear
+          style="width: 160px"
+        >
+          <a-select-option value="">全部</a-select-option>
+          <a-select-option :value="'0'">不达标</a-select-option>
+          <a-select-option :value="'1'">达标</a-select-option>
+          <a-select-option :value="'2'">无目标等级/无数据</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item>
+        <a-space>
+          <a-button type="primary" html-type="submit">查询</a-button>
+          <Tooltip title="重置">
+            <a-button @click="handleReset">重置</a-button>
+          </Tooltip>
+        </a-space>
+      </a-form-item>
+    </a-form>
+
+    <!-- 数据表格 -->
+    <BasicTable
+      ref="tableRef"
+      :columns="columns"
+      :list-url="
+        props.calculateFlag?.calculateFlag == 1
+          ? dataGetKendoListCust
+          : NodataGetKendoListCust
+      "
+      :scrollY="500"
+      :search-params="{ sort: [{ field: 'tm', dir: 'desc' }] }"
+      :transform-data="customTransform"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, h, nextTick } from 'vue';
+import { omit } from 'lodash';
+import { Button, Tooltip, Popover } from 'ant-design-vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import {
+  ruleGetKendoListCust,
+  noAuthGetKendoListCust,
+  stbprpGetStbprpYsByStcd,
+  dataGetKendoListCust,
+  NodataGetKendoListCust
+} from '@/api/sz';
+
+// ==================== Props 定义 ====================
+interface Props {
+  tc: {
+    stcd: string;
+    startTime: string;
+    endTime: string;
+    sfdb: string;
+  };
+  calculateFlag?: {
+    calculateFlag: number;
+  };
+}
+
+const props = defineProps<Props>();
+
+// ==================== 响应式状态 ====================
+const formRef = ref();
+const tableRef = ref();
+const col = ref<any[]>([]);
+
+// ✅ 表单状态（替代之前的 sfdb ref）
+const formState = reactive({
+  sfdb: '1'
+});
+
+// ==================== 固定列配置 ====================
+const columnList = [
+  {
+    dataIndexRaw: '',
+    key: 'tm',
+    title: '时间',
+    dataIndex: 'tm',
+    children: [],
+    visible: true,
+    fixed: '',
+    ellipsis: true,
+    wrap: false,
+    dictType: '',
+    dictCode: '',
+    dictDatas: {},
+    fromType: '',
+    dataType: 'date',
+    dataFormat: '',
+    selectMode: '',
+    unit: '',
+    remark: '',
+    rules: '',
+    ruleTips: '',
+    setting: {},
+    chartColor: '',
+    elementCode: '',
+    disabledDate: true,
+    sorter: true,
+    multiLink: false,
+    width: 160
+  },
+  {
+    dataIndexRaw: '',
+    key: 'wwqtg',
+    title: '水质要求',
+    dataIndex: 'wwqtgName',
+    children: [],
+    visible: true,
+    fixed: '',
+    ellipsis: true,
+    wrap: false,
+    dictType: '',
+    dictCode: '',
+    dictDatas: {},
+    fromType: '',
+    dataFormat: '',
+    selectMode: '',
+    unit: '',
+    remark: '',
+    rules: '',
+    ruleTips: '',
+    setting: {},
+    chartColor: '',
+    elementCode: '',
+    sorter: true,
+    disabledDate: true,
+    multiLink: false,
+    width: 100
+  },
+  {
+    dataIndexRaw: '',
+    key: 'wqGrd',
+    title: '水质等级',
+    dataIndex: 'wqgrdName',
+    children: [],
+    visible: true,
+    fixed: '',
+    ellipsis: true,
+    wrap: false,
+    dictType: '',
+    dictCode: '',
+    dictDatas: {},
+    fromType: '',
+    dataFormat: '',
+    selectMode: '',
+    unit: '',
+    remark: '',
+    rules: '',
+    ruleTips: '',
+    setting: {},
+    chartColor: '',
+    elementCode: '',
+    sorter: true,
+    disabledDate: true,
+    multiLink: false,
+    width: 100
+  },
+  {
+    dataIndexRaw: 'sfdb',
+    key: 'sfdb',
+    title: '是否达标',
+    dataIndex: 'sfdbName',
+    children: [],
+    visible: true,
+    fixed: '',
+    ellipsis: true,
+    wrap: false,
+    // TODO: 【您需要实现】字典转换逻辑 - BasicTable 不支持 dictType/dictCode
+    // 需要在 customRender 中手动处理
+    dictType: 'dataDict',
+    dictCode: 'sd_wq_r.sfdb',
+    dictDatas: {},
+    fromType: 'select',
+    dataFormat: '',
+    selectMode: '',
+    unit: '',
+    remark: '',
+    rules: '',
+    ruleTips: '',
+    setting: {},
+    chartColor: '',
+    elementCode: '',
+    sorter: true,
+    disabledDate: true,
+    multiLink: false,
+    width: 100,
+    // ✅ Vue3 版本需要添加 customRender
+    customRender: ({ record }: any) => {
+      // TODO: 【您需要实现】字典转换逻辑
+      // 示例：return getDictLabel('sd_wq_r.sfdb', record.sfdbName)
+      return record.sfdbName; // 暂时直接显示原始值
+    }
+  }
+];
+
+// ==================== 动态列计算 ====================
+const columns = computed(() => {
+  if (!col.value.length) return columnList;
+  return [...columnList, ...col.value];
+});
+
+// ==================== 筛选条件计算 ====================
+const tableFilter = computed(() => {
+  let res: any = {
+    stcd: props.tc.stcd,
+    sfdb: formState.sfdb === '2' ? '' : formState.sfdb,
+    startTime: props.tc.startTime,
+    endTime: props.tc.endTime
+  };
+  if (res.sfdb === '') res = omit(res, 'sfdb');
+  return res;
+});
+
+// ==================== 方法定义 ====================
+
+// 搜索表单提交
+const onFinish = () => {
+  const filters: any[] = [
+    {
+      field: 'stcd',
+      operator: 'eq',
+      dataType: 'string',
+      value: tableFilter.value.stcd
+    },
+    formState.sfdb
+      ? {
+          field: 'sfdb',
+          operator: 'eq',
+          dataType: 'string',
+          value: formState.sfdb
+        }
+      : null,
+    {
+      field: 'tm',
+      operator: 'gte',
+      dataType: 'date',
+      value: tableFilter.value.startTime
+    },
+    {
+      field: 'tm',
+      operator: 'lte',
+      dataType: 'date',
+      value: tableFilter.value.endTime
+    }
+  ].filter(Boolean);
+  const filter = {
+    logic: 'and',
+    filters
+  };
+  // 触发表格刷新
+  tableRef.value?.getList(filter);
+};
+
+// 重置表单
+const handleReset = () => {
+  formState.sfdb = '1';
+  onFinish();
+};
+
+// TODO: 【预留】获取动态列配置 - 您需要实现的API调用逻辑
+const getCol = async (params: any) => {
+  try {
+    const lo = await columYaoshu(params);
+    col.value = lo || [];
+  } catch (error) {
+    console.error('获取列配置失败:', error);
+  }
+};
+
+// TODO: 【预留】处理列配置的核心逻辑 - 您需要实现
+const columYaoshu = async (params: any) => {
+  // API 1: 获取预警规则限值
+  let params3 = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: params?.stcd
+        }
+      ]
+    }
+  };
+  const MaxData = await ruleGetKendoListCust(params3);
+
+  // API 2: 获取数据范围
+  let params2 = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: params?.stcd
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: params?.endTime
+        },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: params?.startTime
+        }
+      ]
+    }
+  };
+  const noAuthRes = await noAuthGetKendoListCust(params2);
+  const noAuthResData = noAuthRes?.data?.data || [];
+
+  // API 3: 获取要素配置
+  let params1 = {
+    stcd: params?.stcd,
+    tbCode: 'WQ_R',
+    endTime: params.endTime,
+    startTime: params.startTime
+  };
+  const res = await stbprpGetStbprpYsByStcd(params1);
+  if (res?.data?.data) {
+    const processedColumns = res.data.data
+      .filter((item: any) => item.enable === '1')
+      .map((item: any) => {
+        const _t = item.ysShowName;
+        const reg = /[(（][^(（）)]+[)）]/;
+
+        // TODO: 【您需要实现】单位转换工具函数
+        const _u = getUnitConfigByCode('WQ_R', item.ys)?.unit;
+        if (_u) {
+          item.ysShowName = reg.test(_t)
+            ? _t.replace(reg, `(${_u})`)
+            : `${_t}(${_u})`;
+        }
+
+        let showValue = '';
+        if (noAuthResData.length) {
+          const { max, min } = noAuthResData[0];
+          const ys = item.ys;
+          const maxValue = max.filter((e: any) => e[ys]);
+          const minValue = min.filter((e: any) => e[ys]);
+
+          if (maxValue.length && minValue.length) {
+            showValue = `(${minValue[0]?.[ys]}-${maxValue[0]?.[ys]})`;
+          } else {
+            if (minValue.length) {
+              showValue = `（>${minValue[0]?.[ys]}）`;
+            }
+            if (maxValue.length) {
+              showValue = `（<${maxValue[0]?.[ys]}）`;
+            }
+          }
+        }
+
+        return {
+          dataIndexRaw: '',
+          key: item.ys.toLowerCase(),
+          // ✅ Vue3 版本：title 支持函数返回 VNode
+          title: () =>
+            h('div', [
+              h(
+                'p',
+                {
+                  style: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    wordBreak: 'keep-all'
+                  }
+                },
+                item.ysShowName
+              ),
+              h('p', showValue)
+            ]),
+          dataIndex: item.ys.toLowerCase(),
+          children: [],
+          visible: true,
+          fixed: '',
+          sorter: true,
+          ellipsis: true,
+          wrap: false,
+          dictType: '',
+          dictCode: '',
+          dictDatas: {},
+          // ✅ Vue3 版本：使用 customRender 替代 render
+          customRender: ({ record }: any) => {
+            // TODO: 【您需要传入】MaxData 数据
+            const datalist = MaxData?.data?.data;
+            const dynamicDataIndex = item.ys;
+            const dynamicDataName = item.ysShowName;
+            const matchedItem = datalist.find(
+              (m: any) => m.ys === dynamicDataIndex
+            );
+
+            // 判断是否超标
+            if (
+              matchedItem &&
+              (matchedItem.isAsc == 1
+                ? matchedItem?.maxVal
+                : matchedItem.minVal) &&
+              record[dynamicDataIndex?.toLowerCase()] &&
+              ((matchedItem.isAsc == 1 &&
+                record[dynamicDataIndex?.toLowerCase()] >
+                  matchedItem?.maxVal) ||
+                (matchedItem.isAsc != 1 &&
+                  record[dynamicDataIndex?.toLowerCase()] < matchedItem.minVal))
+            ) {
+              // ✅ Vue3 版本：使用 h() 函数创建 VNode
+              return h(
+                Popover,
+                {
+                  content: h(
+                    'div',
+                    `预警标准： ${
+                      matchedItem.isAsc === 1
+                        ? `>${matchedItem.maxVal}`
+                        : `<${matchedItem.minVal}`
+                    }`
+                  ),
+                  trigger: 'hover'
+                },
+                () =>
+                  h(
+                    'span',
+                    {
+                      style: { color: 'red', cursor: 'pointer' }
+                      // TODO: 【您需要实现】单位转换渲染
+                    },
+                    transUnitRender(
+                      record[dynamicDataIndex?.toLowerCase()],
+                      'WQ_R',
+                      dynamicDataIndex
+                    )
+                  )
+              );
+            }
+
+            // 正常显示
+            // TODO: 【您需要实现】单位转换渲染
+            return transUnitRender(
+              record[dynamicDataIndex?.toLowerCase()],
+              'WQ_R',
+              dynamicDataIndex
+            );
+          },
+          fromType: '',
+          dataType: '',
+          dataFormat: '',
+          selectMode: '',
+          unit: '',
+          remark: '',
+          rules: '',
+          ruleTips: '',
+          setting: {},
+          chartColor: '',
+          elementCode: '',
+          disabledDate: true,
+          multiLink: false
+        };
+      });
+    console.log(processedColumns);
+    onFinish();
+    return processedColumns || [];
+  }
+};
+
+// TODO: 【预留】单位转换工具函数 - 您需要实现
+// ==================== 单位转换工具函数区域 ====================
+
+/**
+ * 根据表代码和要素代码获取单位配置
+ * @param tbCode 表代码 (如 'WQ_R')
+ * @param ys 要素代码 (如 'DOX', 'CODCR')
+ * @returns 单位配置对象 { unit: string }
+ */
+const getUnitConfigByCode = (tbCode: string, ys: string) => {
+  // TODO: 【您需要实现】单位配置映射
+  const unitConfig: Record<string, Record<string, { unit: string }>> = {
+    WQ_R: {
+      PH: { unit: '' },
+      DOX: { unit: 'mg/L' },
+      CODMN: { unit: 'mg/L' },
+      CODCR: { unit: 'mg/L' },
+      NH3N: { unit: 'mg/L' },
+      TP: { unit: 'mg/L' },
+      TN: { unit: 'mg/L' },
+      WTMP: { unit: '℃' },
+      COND: { unit: 'μS/cm' },
+      CLARITY: { unit: 'm' }
+    }
+  };
+
+  return unitConfig[tbCode]?.[ys] || { unit: '' };
+};
+
+/**
+ * 带单位的值渲染（根据要素类型设置不同小数位数，不带单位）
+ * @param value 数值
+ * @param tbCode 表代码
+ * @param ys 要素代码
+ * @returns 格式化后的字符串（不带单位）
+ */
+const transUnitRender = (value: any, tbCode: string, ys: string) => {
+  if (value === null || value === undefined || value === '') return '-';
+
+  const numValue = Number(value);
+  if (isNaN(numValue)) return String(value);
+
+  // 根据不同要素类型设置小数位数
+  let formattedValue: string;
+
+  if (ys === 'WTMP' || ys === 'PH') {
+    // 水温和PH保留一位小数
+    formattedValue = numValue.toFixed(1);
+  } else if (ys === 'COND') {
+    // 电导率不要小数
+    formattedValue = Math.round(numValue).toString();
+  } else {
+    // 其他要素保留两位小数
+    formattedValue = numValue.toFixed(2);
+  }
+
+  return formattedValue;
+};
+
+/**
+ * 纯单位转换（不带渲染）
+ * @param value 数值
+ * @param tbCode 表代码
+ * @param ys 要素代码
+ * @returns 转换后的数值
+ */
+const transUnit = (value: any, tbCode: string, ys: string) => {
+  if (value === null || value === undefined) return null;
+  return Number(value);
+};
+
+// ==================== 监听器 ====================
+
+// 监听 tc 和 formState.sfdb 变化，重新获取列配置
+// watch(
+//   () => [props.tc.stcd, props.tc.startTime, props.tc.endTime, formState.sfdb],
+//   ([stcd, startTime, endTime]) => {
+//     if (!stcd) {
+//       return;
+//     }
+//     // 
+//     tableRef.value.tableData = [];
+//     getCol({ stcd, startTime, endTime });
+//   },
+//   { immediate: false } // 不在初始化时立即执行，由 onMounted 处理
+// );
+
+// 初始化
+onMounted(() => {
+  nextTick(() => {});
+  getCol({
+    stcd: props.tc.stcd,
+    startTime: props.tc.startTime,
+    endTime: props.tc.endTime
+  });
+});
+// 自定义数据转换
+const customTransform = (res: any) => {
+  return {
+    records: res?.data?.data || [],
+    total: res?.data?.total || 0
+  };
+};
+</script>
+
+<style scoped>
+/* 如需添加样式，请在此处编写 */
+</style>
diff --git a/frontend/src/modules/ShuiZhiDaBiaoQingKuang/index.vue b/frontend/src/modules/ShuiZhiDaBiaoQingKuang/index.vue
new file mode 100644
index 00000000..892e4a7a
--- /dev/null
+++ b/frontend/src/modules/ShuiZhiDaBiaoQingKuang/index.vue
@@ -0,0 +1,1049 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <SidePanelItem
+    title="各基地水质达标情况"
+    :select="select"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+    :style="
+      chartData.length === 0 && !loading && baseid != 'all'
+        ? 'height: 300px'
+        : 'height: 650px'
+    "
+  >
+    <div class="body_item">
+      <div v-if="baseid == 'all'" class="tabs_all">
+        <div
+          :class="tabs == '0' ? 'zhong_tabs' : 'no_tabs'"
+          @click="handleTabChange(0)"
+        >
+          自建水质站
+        </div>
+        <div
+          :class="tabs == '1' ? 'zhong_tabs' : 'no_tabs'"
+          @click="handleTabChange(1)"
+        >
+          国家水质站
+        </div>
+      </div>
+      <div v-show="tabs == '0' || tabs == '1'" class="tabs_body">
+        <a-spin :spinning="loading">
+          <!-- 始终渲染图表容器，确保有固定宽高 -->
+          <div ref="chartRef" class="chart-container"></div>
+          <!-- 无数据时显示Empty，但不影响容器尺寸 -->
+          <div
+            v-if="chartData.length === 0 && !loading"
+            class="empty-overlay"
+            :style="
+              chartData.length === 0 && !loading && baseid != 'all'
+                ? 'height: 300px'
+                : 'height: 650px'
+            "
+          >
+            <a-empty description="暂无数据" />
+          </div>
+        </a-spin>
+      </div>
+    </div>
+  </SidePanelItem>
+
+  <!-- 环境质量满足度弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    title="环境质量满足度"
+    width="1536px"
+    :footer="null"
+    centered
+  >
+    <EnvironmentalQualityTwoLayers
+      :datas="
+        baseid == 'all' ? JidiSelectEventStore.jidiData : stationListForModal
+      "
+      :type="select.value"
+      :dateValue="datetimePicker.value"
+      :dataDimensionVal="clickedBarData?.selectedId || baseid"
+      :buildType="tabs"
+      :typeOne="fieldOne"
+      :baseid="baseid"
+    />
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  watch,
+  nextTick,
+  computed,
+  inject,
+  defineOptions
+} from 'vue';
+import * as echarts from 'echarts';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import { wqGetKendoListCust } from '@/api/sz';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import EnvironmentalQualityTwoLayers from './TwoLayers/EnvironmentalQualityTwoLayers.vue';
+import { useDraggable } from '@/utils/drag';
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+  name: 'EnvironmentalQuality'
+});
+const JidiSelectEventStore = useJidiSelectEventStore();
+const tabs: any = ref('0');
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+const loading = ref(false);
+
+// 响式图表数据
+const chartData = ref<
+  Array<{ name: string; current: number | null; lastYear: number | null }>
+>([]);
+
+// 新增：存储当前基地下的电站列表（用于弹框传递）
+const stationListForModal = ref<Array<{ baseid: string; basename: string }>>(
+  []
+);
+
+// 新增：存储图表数据索引与 baseid/rstcd 的映射关系
+const chartDataIdMap = ref<Array<string>>([]);
+
+const select = ref({
+  show: true,
+  value: 'month',
+  minWidth: '80px',
+  options: [
+    { value: 'month', label: '月度' },
+    { value: 'year', label: '年度' }
+  ],
+  picker: undefined,
+  format: undefined
+});
+
+// 日期选择器配置
+const datetimePicker = ref({
+  show: true,
+  value: (() => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    return `${year}-${month}`;
+  })(),
+  format: 'YYYY-MM',
+  picker: 'month' as const,
+  options: []
+});
+const baseid = ref('');
+const fieldOne = ref('');
+// 解析API返回的嵌套数据（支持两种结构）
+const parseApiResponse = (
+  items: any[],
+  currentValueForApi: string,
+  lastYearValue: string
+) => {
+  const result: Array<{
+    name: string;
+    current: number | null;
+    lastYear: number | null;
+  }> = [];
+  fieldOne.value = '';
+  // 新增：清空 ID 映射数组
+  chartDataIdMap.value = [];
+
+  // 新增：提取电站列表（仅当 baseid != 'all' 时）
+  const stations: Array<{ baseid: string; basename: string }> = [];
+
+  console.log('=== parseApiResponse 开始解析 ===');
+  console.log('currentValueForApi:', currentValueForApi);
+  console.log('lastYearValue:', lastYearValue);
+  console.log('items数量:', items?.length);
+
+  items.forEach((group, groupIndex) => {
+    console.log(`\n--- 处理第${groupIndex + 1}个group ---`);
+    console.log('group.key:', group.key);
+    console.log('group.items数量:', group.items?.length);
+
+    group.items?.forEach((mainGroup, mainIndex) => {
+      console.log(`  → 第${mainIndex + 1}个mainGroup:`);
+      console.log('    field:', mainGroup.field);
+      console.log('    key:', mainGroup.key);
+
+      // 判断是哪种结构：检查第二层的field字段
+      const field = mainGroup.field;
+
+      if (field === 'ennm' || field === 'baseId') {
+        // 提取中文名称：从mainGroup.key获取（站点名或基地ID）
+        let displayName = '';
+
+        // mainGroup.key 可能是站点名（如"两河口"）或基地ID（如"02"）
+        if (mainGroup.key && typeof mainGroup.key === 'string') {
+          displayName = mainGroup.key;
+          console.log('    从mainGroup.key获取名称:', displayName);
+        }
+
+        // 如果mainGroup.key不是有效的中文名称，尝试从subGroup.key获取
+        if (!displayName || !/[\u4e00-\u9fa5]/.test(displayName)) {
+          const subGroup = mainGroup.items?.[0];
+          console.log('    subGroup.key:', subGroup?.key);
+          if (subGroup && subGroup.key && typeof subGroup.key === 'string') {
+            displayName = subGroup.key; // 这里应该是中文名（如"雅砻江干流"）
+            console.log('    从subGroup.key获取名称:', displayName);
+          }
+        }
+
+        // 如果还是没有，尝试从最内层数据获取
+        if (!displayName) {
+          const subGroup = mainGroup.items?.[0];
+          const firstMonthGroup = subGroup?.items?.[0];
+          const dataItem = firstMonthGroup?.items?.[0];
+          if (dataItem) {
+            if (field === 'ennm') {
+              displayName = dataItem.ENNM || '';
+            } else if (field === 'baseId') {
+              displayName = dataItem.BASENAME || '';
+            }
+            console.log('    从最内层数据获取名称:', displayName);
+          }
+        }
+
+        if (!displayName) {
+          console.log('    ⚠️ 跳过：没有名称');
+          return; // 跳过没有名称的数据
+        }
+
+        let currentPeriodValue: number | null = null;
+        let lastYearPeriodValue: number | null = null;
+
+        // 遍历时间分组：需要深入到第3层
+        const subGroup = mainGroup.items?.[0];
+        console.log('    subGroup.items数量:', subGroup?.items?.length);
+
+        subGroup?.items?.forEach(monthGroup => {
+          const periodKey = monthGroup.key; // "2026-05" 或 "2025-05" 或 "2026" 或 "2025"
+          const dataItem = monthGroup.items?.[0];
+
+          if (dataItem) {
+            // 兼容月度数据（COUNT_DRMONTH/wqRate）和年度数据（COUNT_DRYEAR）
+            const value =
+              dataItem.COUNT_DRMONTH ??
+              dataItem.COUNT_DRYEAR ??
+              dataItem.wqRate;
+            console.log(`    时间:${periodKey}, 值:${value}`);
+
+            // 判断是当前期还是去年同期
+            if (periodKey === currentValueForApi) {
+              currentPeriodValue = value != null ? Number(value) : null;
+              console.log(`    ✓ 当前期值: ${currentPeriodValue}`);
+            } else if (periodKey === lastYearValue) {
+              lastYearPeriodValue = value != null ? Number(value) : null;
+              console.log(`    ✓ 去年同期值: ${lastYearPeriodValue}`);
+            }
+          }
+        });
+
+        // 添加换行符：在"干流"前添加\n
+        const finalDisplayName = displayName.replace(/干流$/, '\n干流');
+
+        console.log(
+          `  → 最终数据: {name: "${finalDisplayName}", current: ${currentPeriodValue}, lastYear: ${lastYearPeriodValue}}`
+        );
+
+        // 新增：记录 ID 映射关系
+        if (field === 'baseId') {
+          fieldOne.value = 'all';
+          // baseid == 'all' 时，记录基地 ID
+          chartDataIdMap.value.push(mainGroup.key); // "02", "03" 等
+          console.log('    记录基地ID:', mainGroup.key);
+        } else if (field === 'ennm') {
+          fieldOne.value = 'other';
+          // baseid != 'all' 时，记录电站编码
+          const stationCode = subGroup?.key; // "008660306300000001"
+          chartDataIdMap.value.push(stationCode || '');
+          console.log('    记录电站编码:', stationCode);
+
+          // 同时提取电站列表
+          if (displayName && stationCode) {
+            stations.push({
+              baseid: stationCode,
+              basename: displayName
+            });
+          }
+        }
+
+        result.push({
+          name: finalDisplayName,
+          current: currentPeriodValue,
+          lastYear: lastYearPeriodValue
+        });
+      }
+    });
+  });
+
+  // 新增：如果提取到了电站列表，更新响应式变量
+  if (stations.length > 0) {
+    stationListForModal.value = stations;
+    console.log('提取到的电站列表:', stations);
+  } else {
+    stationListForModal.value = [];
+  }
+
+  console.log('ID 映射关系:', chartDataIdMap.value);
+  console.log('\n=== parseApiResponse 解析完成 ===');
+  console.log('result数量:', result.length);
+  console.log('result:', result);
+
+  return result;
+};
+
+// 处理tab切换
+const handleTabChange = (tab: number) => {
+  tabs.value = tab;
+  getEchartsData();
+};
+
+//监听tabs变化，处理图表刷新
+watch(tabs, newVal => {
+  if (newVal === '0' || newVal === '1') {
+    nextTick(() => {
+      setTimeout(() => {
+        getEchartsData();
+      }, 50);
+    });
+  }
+});
+// 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
+const injectedStation = inject<any>('dianZhanStation', null);
+const stationSource = computed(
+  () => injectedStation?.value || JidiSelectEventStore.selectedItem
+);
+
+watch(
+  () => stationSource.value,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
+      getEchartsData();
+    }
+  },
+  { deep: true }
+);
+
+// 初始化图表实例（仅创建实例，不设置option）
+const initChart = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    if (!chartRef.value) {
+      console.error('图表容器ref不存在');
+      reject(new Error('图表容器不存在'));
+      return;
+    }
+
+    if (chartInstance) {
+      resolve();
+      return;
+    }
+
+    const domElement = chartRef.value;
+
+    // 检查 DOM 尺寸
+    if (domElement.clientWidth === 0 || domElement.clientHeight === 0) {
+      console.warn('图表容器尺寸为0，等待DOM布局完成...', {
+        clientWidth: domElement.clientWidth,
+        clientHeight: domElement.clientHeight,
+        offsetWidth: domElement.offsetWidth,
+        offsetHeight: domElement.offsetHeight
+      });
+
+      // 使用多次重试机制
+      let retryCount = 0;
+      const maxRetries = 10;
+
+      const tryInit = () => {
+        retryCount++;
+
+        if (domElement.clientWidth > 0 && domElement.clientHeight > 0) {
+          chartInstance = echarts.init(domElement);
+          console.log('图表实例已创建（第' + retryCount + '次尝试）');
+          resolve();
+        } else if (retryCount < maxRetries) {
+          console.log(`第${retryCount}次尝试，容器尺寸仍为0，继续等待...`);
+          requestAnimationFrame(tryInit);
+        } else {
+          console.error('图表容器尺寸仍为0，已达到最大重试次数', {
+            clientWidth: domElement.clientWidth,
+            clientHeight: domElement.clientHeight
+          });
+          reject(new Error('图表容器尺寸为0'));
+        }
+      };
+
+      // 开始重试
+      requestAnimationFrame(tryInit);
+    } else {
+      // 尺寸正常，直接初始化
+      chartInstance = echarts.init(domElement);
+      console.log('图表实例已创建');
+      resolve();
+    }
+  });
+};
+
+//获取图表数据
+const getEchartsData = async () => {
+  // 1. 格式验证
+  const currentValue = datetimePicker.value.value;
+  //
+  if (select.value.value === 'year') {
+    // 年度模式：验证是否为 YYYY 格式（4位数字）
+    if (!/^\d{4}$/.test(currentValue)) {
+      console.warn('年度模式下日期格式不正确，应为 YYYY 格式');
+      return;
+    }
+  } else if (select.value.value === 'month') {
+    // 月度模式：验证是否为 YYYY-MM 格式
+    if (!/^\d{4}-\d{2}$/.test(currentValue)) {
+      console.warn('月度模式下日期格式不正确，应为 YYYY-MM 格式');
+      return;
+    }
+  } else {
+    console.warn('未知的选择器类型');
+    return;
+  }
+
+  // 2. 计算当前值和上一年的值
+  let currentValueForApi: string; // 第一个值：当前选择
+  let lastYearValue: string; // 第二个值：上一年同期
+
+  if (select.value.value === 'year') {
+    // 年模式
+    currentValueForApi = currentValue; // "2025"
+    lastYearValue = String(Number(currentValue) - 1); // "2024"
+  } else {
+    // 月模式
+    currentValueForApi = currentValue; // "2025-03"
+
+    // 提取年份和月份
+    const [year, month] = currentValue.split('-');
+    // 年份减1，月份保持不变
+    const lastYear = String(Number(year) - 1);
+    lastYearValue = `${lastYear}-${month}`; // "2024-03"
+  }
+
+  // 3. 构建请求参数
+  console.log(baseid.value);
+  if (!baseid.value) {
+    return;
+  }
+  //
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        baseid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              value: baseid.value
+            }
+          : null,
+        {
+          field: 'type',
+          operator: 'eq',
+          value: select.value.value == 'year' ? 'YEAR' : 'MON'
+        },
+        baseid.value == 'all'
+          ? {
+              field: 'dtinType',
+              operator: 'eq',
+              value: tabs.value
+            }
+          : {
+              field: 'rstcd',
+              operator: 'isnotnull'
+            },
+        ,
+        {
+          logic: 'or',
+          filters: [
+            {
+              field: select.value.value == 'year' ? 'drYear' : 'drMonth',
+              operator: 'eq',
+              value: currentValueForApi, // 当前值（年或年月）
+              dataType: 'string'
+            },
+            {
+              field: select.value.value == 'year' ? 'drYear' : 'drMonth',
+              operator: 'eq',
+              value: lastYearValue, // 上一年同期
+              dataType: 'string'
+            }
+          ]
+        }
+      ].filter(Boolean)
+    },
+    group: [
+      baseid.value == 'all'
+        ? {
+            dir: 'des',
+            field: 'baseStepSort'
+          }
+        : {
+            dir: 'asc',
+            field: 'rstcdStepSort'
+          },
+      ,
+      baseid.value == 'all'
+        ? {
+            dir: 'des',
+            field: 'baseId'
+          }
+        : {
+            dir: 'asc',
+            field: 'ennm'
+          },
+      baseid.value == 'all'
+        ? {
+            dir: 'des',
+            field: 'baseName'
+          }
+        : {
+            dir: 'des',
+            field: 'rstcd'
+          },
+      {
+        dir: 'desc',
+        field: select.value.value == 'year' ? 'drYear' : 'drMonth'
+      }
+    ].filter(Boolean),
+    groupResultFlat: false,
+    aggregate: [
+      {
+        aggregate: 'sum',
+        field: 'wqRate'
+      }
+    ]
+  };
+  console.log('请求参数：', params);
+  //
+  // 4. 调用API并处理数据
+  loading.value = true;
+  try {
+    const res = await wqGetKendoListCust(params);
+
+    console.log('=== API返回数据调试 ===');
+    console.log('res:', res);
+    console.log('res.data:', res?.data);
+    console.log('res.data.data:', res?.data?.data);
+    console.log('currentValueForApi:', currentValueForApi);
+    console.log('lastYearValue:', lastYearValue);
+
+    if (!res?.data?.data) {
+      console.warn('数据获取失败或数据为空');
+      chartData.value = [];
+      // 清空图表中原有的数据
+      if (chartInstance) {
+        chartInstance.clear();
+        console.log('图表已清空（数据获取失败）');
+      }
+      return;
+    }
+
+    // 解析数据
+    const parsedData = parseApiResponse(
+      res.data.data,
+      currentValueForApi,
+      lastYearValue
+    );
+
+    console.log('解析后的数据 parsedData:', parsedData);
+
+    // 只有当有数据时才更新
+    if (parsedData.length > 0) {
+      chartData.value = parsedData;
+
+      console.log('chartData.value:', chartData.value);
+
+      // 等待 DOM 更新后，再初始化和更新图表
+      await nextTick();
+
+      try {
+        // 如果图表实例不存在，先初始化（等待完成）
+        if (!chartInstance) {
+          await initChart();
+        }
+
+        // 更新图表
+        if (chartInstance) {
+          updateChartData(currentValueForApi, lastYearValue);
+          console.log('图表已更新');
+        } else {
+          console.error('图表实例创建失败');
+        }
+      } catch (error) {
+        console.error('图表初始化失败:', error);
+      }
+    } else {
+      chartData.value = [];
+      console.warn('解析后数据为空');
+      // 清空图表中原有的数据
+      if (chartInstance) {
+        chartInstance.clear();
+        console.log('图表已清空（解析后数据为空）');
+      }
+    }
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+    chartData.value = [];
+    // 清空图表中原有的数据
+    if (chartInstance) {
+      chartInstance.clear();
+      console.log('图表已清空（发生错误）');
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 更新图表数据
+const updateChartData = (currentLabel: string, lastYearLabel: string) => {
+  if (!chartInstance) return;
+
+  // 动态生成图例标签
+  const modeText = select.value.value === 'year' ? '' : ' 月度';
+  const legendCurrentLabel = currentLabel + modeText;
+  const legendLastYearLabel = ' 去年同期';
+
+  const option = {
+    // 图例配置
+    legend: {
+      top: 10,
+      itemWidth: 18,
+      itemHeight: 12,
+      itemGap: 20,
+      icon: 'roundRect',
+      data: [
+        { name: legendCurrentLabel, itemStyle: { color: '#4A8BC2' } },
+        { name: legendLastYearLabel, itemStyle: { color: '#9B59B6' } }
+      ],
+      textStyle: {
+        fontSize: 12,
+        color: '#333'
+      }
+    },
+
+    // 提示框配置
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(200, 200, 200, 0.2)'
+        },
+        label: {
+          show: false
+        }
+      },
+      backgroundColor: '#fff',
+      borderColor: '#e8e8e8',
+      borderWidth: 1,
+      padding: 12,
+      textStyle: {
+        color: '#333',
+        fontSize: 12
+      },
+      formatter: (params: any) => {
+        const name = params[0].name.replace('\n', '');
+        let result = `<div style="font-weight: bold; margin-bottom: 8px;">${name}</div>`;
+        params.forEach((item: any) => {
+          const value = item.value != null ? Number(item.value) : '-';
+          result += `<div style="display: flex; align-items: center; margin-bottom: 4px;">
+                        <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${item.color}; margin-right: 8px;"></span>
+                        <span>${item.seriesName}:</span>
+                        <span style="margin-left: auto; font-weight: bold;">${value}%</span>
+                    </div>`;
+        });
+        return result;
+      }
+    },
+
+    // 网格配置
+    grid: {
+      left: 60,
+      right: 10,
+      top: 60,
+      bottom: 60
+    },
+
+    // X轴配置
+    xAxis: {
+      type: 'value',
+      min: 0,
+      max: 100,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e8e8e8',
+          type: 'solid'
+        }
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#666'
+      }
+    },
+
+    // Y轴配置
+    yAxis: {
+      type: 'category',
+      data: chartData.value.map(item => item.name),
+      inverse: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#333',
+          width: 1
+        }
+      },
+      axisTick: {
+        show: true,
+        length: 4,
+        lineStyle: {
+          color: '#333',
+          width: 1
+        }
+      },
+      axisLabel: {
+        fontSize: 12,
+        color: '#333',
+        margin: 12
+      },
+      // 在Y轴底部添加"达标率(%)"标签
+      name: '达标率(%)',
+      nameLocation: 'end',
+      nameGap: 20,
+      nameTextStyle: {
+        fontSize: 12,
+        color: '#666',
+        align: 'left'
+      }
+    },
+
+    // 系列配置
+    series: [
+      {
+        name: legendCurrentLabel,
+        type: 'bar',
+        data: chartData.value.map(item =>
+          item.current != null ? Math.floor(Number(item.current)) : null
+        ),
+        barWidth: 10,
+        barGap: '20%',
+        itemStyle: {
+          color: '#4A8BC2',
+          borderRadius: [0, 3, 3, 0]
+        }
+      },
+      {
+        name: legendLastYearLabel,
+        type: 'bar',
+        data: chartData.value.map(item =>
+          item.lastYear != null ? Math.floor(Number(item.lastYear)) : null
+        ),
+        barWidth: 10,
+        barGap: '20%',
+        itemStyle: {
+          color: '#9B59B6',
+          borderRadius: [0, 3, 3, 0]
+        }
+      }
+    ]
+  };
+
+  chartInstance.setOption(option, { notMerge: true });
+
+  // 移除旧的点击事件监听
+  chartInstance.off('click');
+
+  // 绑定点击事件
+  chartInstance.on('click', (params: any) => {
+    if (params.componentType === 'series' && params.seriesType === 'bar') {
+      // 获取点击的柱子对应的数据
+      const dataIndex = params.dataIndex;
+      const barData = chartData.value[dataIndex];
+
+      if (barData) {
+        // 新增：获取对应的 baseid 或 rstcd
+        const selectedId = chartDataIdMap.value[dataIndex] || '';
+        //
+        clickedBarData.value = {
+          name: barData.name.replace('\n', ''), // 去除换行符
+          current: barData.current,
+          lastYear: barData.lastYear,
+          selectedId: selectedId // 新增：存储选中的 ID
+        };
+        modalVisible.value = true;
+      }
+    }
+  });
+};
+
+// 监听 datetimePicker.value.value 的变化
+watch(
+  () => datetimePicker.value.value,
+  async (newValue, oldValue) => {
+    // 确保新值和旧值不同，且图表已初始化
+    if (newValue !== oldValue && chartInstance) {
+      await nextTick();
+      getEchartsData();
+    }
+  }
+);
+
+//监听子组件的数据变化
+const handlePanelChange1 = async data => {
+  console.log('当前所有控件状态:', data);
+  // 当选择器或日期变化时,重新加载图表数据
+  if (data.select || data.datetime) {
+    await (select.value.value = data.select);
+
+    // 根据 select 的值决定 datetime 的格式
+    let formattedDatetime = data.datetime;
+    if (data.select === 'year') {
+      // 如果是年度模式，将 datetime 转换为 YYYY 格式
+      if (data.datetime && typeof data.datetime === 'string') {
+        // 提取年份部分（假设原格式为 YYYY-MM）
+        const yearMatch = data.datetime.match(/^(\d{4})/);
+        if (yearMatch) {
+          formattedDatetime = yearMatch[1];
+        }
+      }
+    }
+    // 如果是 month 模式，保持 datetime 原值不变
+
+    await (datetimePicker.value.value = formattedDatetime);
+    await (datetimePicker.value.picker = data.select);
+    await (datetimePicker.value.format =
+      data.select == 'month' ? 'YYYY-MM' : 'YYYY');
+    getEchartsData();
+  }
+};
+//获取图表数据
+
+// 页面加载时执行
+onMounted(() => {
+  // 延迟初始化，确保容器已渲染
+  setTimeout(() => {
+    initChart();
+    // 如果已有 selectedItem，触发数据加载
+    const currentStation =
+      injectedStation?.value || JidiSelectEventStore.selectedItem;
+    if (currentStation?.wbsCode) {
+      baseid.value = currentStation.wbsCode;
+      getEchartsData();
+    }
+  }, 100);
+
+  // 监听窗口resize
+  window.addEventListener('resize', () => {
+    chartInstance?.resize();
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  chartInstance?.dispose();
+  chartInstance = null;
+  chartData.value = [];
+  window.removeEventListener('resize', () => {
+    chartInstance?.resize();
+  });
+});
+
+// 弹框相关状态
+const modalVisible = ref(false);
+const clickedBarData = ref<{
+  name: string;
+  current: number | null;
+  lastYear: number | null;
+  selectedId?: string;
+} | null>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+</script>
+
+<style lang="scss" scoped>
+.body_item {
+  width: 100%;
+  height: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .tabs_all {
+    width: 28px;
+    height: 500px;
+    box-sizing: border-box;
+    border: 2px solid #2f6b98;
+    border-radius: 5px;
+
+    .zhong_tabs {
+      width: 100%;
+      height: 50%;
+      background: #2f6b98;
+      color: #fff;
+      font-size: 14px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      text-shadow: 0 0 0.25px currentcolor;
+      cursor: pointer;
+    }
+
+    .no_tabs {
+      width: 100%;
+      height: 50%;
+      font-size: 14px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      cursor: pointer;
+    }
+
+    .no_tabs:hover {
+      color: #40a9ff;
+    }
+  }
+
+  .tabs_body {
+    width: 368px;
+    height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    /* 为empty-overlay提供定位上下文 */
+
+    .chart-container {
+      width: 100% !important;
+      height: 100% !important;
+      min-width: 368px;
+      /* 强制最小宽度 */
+      min-height: 600px;
+      /* 强制最小高度 */
+    }
+
+    .empty-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.9);
+      z-index: 10;
+    }
+  }
+}
+
+.modal-content {
+  padding: 20px;
+
+  .detail-info {
+    .info-header {
+      margin-bottom: 24px;
+      padding-bottom: 16px;
+      border-bottom: 2px solid #e8e8e8;
+
+      h3 {
+        margin: 0 0 8px 0;
+        font-size: 20px;
+        color: #333;
+        font-weight: bold;
+      }
+
+      .time-info {
+        margin: 0;
+        font-size: 14px;
+        color: #666;
+      }
+    }
+
+    .info-body {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        padding: 12px 16px;
+        background: #f5f7fa;
+        border-radius: 4px;
+
+        .label {
+          font-size: 14px;
+          color: #666;
+          min-width: 140px;
+        }
+
+        .value {
+          font-size: 16px;
+          font-weight: bold;
+
+          &.current {
+            color: #4a8bc2;
+          }
+
+          &.last-year {
+            color: #9b59b6;
+          }
+
+          &.change {
+            &.positive {
+              color: #52c41a;
+            }
+
+            &.negative {
+              color: #ff4d4f;
+            }
+
+            &.neutral {
+              color: #666;
+            }
+          }
+        }
+      }
+
+      .custom-section {
+        margin-top: 24px;
+        padding: 16px;
+        background: #fafafa;
+        border-radius: 4px;
+        border: 1px solid #e8e8e8;
+
+        h4 {
+          margin: 0 0 12px 0;
+          font-size: 16px;
+          color: #333;
+        }
+
+        p {
+          margin: 0;
+          font-size: 14px;
+          color: #666;
+          line-height: 1.6;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/modules/ZhenXiZhiWuYuanMod/Dwjzqk/index.vue b/frontend/src/modules/ZhenXiZhiWuYuanMod/Dwjzqk/index.vue
index e23d04fc..d8f990af 100644
--- a/frontend/src/modules/ZhenXiZhiWuYuanMod/Dwjzqk/index.vue
+++ b/frontend/src/modules/ZhenXiZhiWuYuanMod/Dwjzqk/index.vue
@@ -1,6 +1,6 @@
 <!-- SidePanelItem.vue -->
 <template>
-  <SidePanelItem title="动物救助情况">
+  <SidePanelItem title="动物救助站情况">
     <!-- Loading 状态 -->
     <div v-if="loading" class="loading-container">
       <a-spin />
@@ -164,7 +164,7 @@ const getData = async () => {
   const res = await wvaGetKendoListCust(params);
   if (res?.data?.data?.length > 0) {
     // 过滤掉 imgPath 为 null 的对象
-    const filteredData = res.data.data
+    const filteredData = res.data.data;
     originalMediaData.value = filteredData.map((item: any) => {
       return {
         url: `${baseUrl}?${item.fid}&view=jpg`,
@@ -205,23 +205,23 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
- // Loading 容器
-  .loading-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height:290px;
-  }
+// Loading 容器
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 290px;
+}
 
-  // 暂无数据容器
-  .empty-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 290px;
-  }
+// 暂无数据容器
+.empty-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 290px;
+}
 .container {
   width: 100%;
   height: 290px;
@@ -230,8 +230,6 @@ onUnmounted(() => {
   position: relative;
   overflow: hidden; // 隐藏超出容器的内容
 
- 
-
   // 跑马灯轨道
   .carousel-track {
     display: flex; // 横向排列所有媒体项
@@ -285,7 +283,7 @@ onUnmounted(() => {
     }
   }
 }
-:deep(.ant-empty-description){
-    text-indent:0em !important;
+:deep(.ant-empty-description) {
+  text-indent: 0em !important;
 }
 </style>
diff --git a/frontend/src/modules/churukushuiwenMod/index.vue b/frontend/src/modules/churukushuiwenMod/index.vue
index b8e71b73..2e3d000a 100644
--- a/frontend/src/modules/churukushuiwenMod/index.vue
+++ b/frontend/src/modules/churukushuiwenMod/index.vue
@@ -8,7 +8,6 @@
 <template>
   <SidePanelItem
     title="出入库水温"
-    :moreSelect="select"
     :scopeDate="scopeDate"
     @update-values="handlePanelChange1"
   >
@@ -573,9 +572,10 @@ const handleChartClick = (params: any) => {
     };
 
     // 获取站点名称
-    stationName.value = select.value.options?.find(
-      (item: any) => item.value === select.value.value
-    )?.title || '未知站点';
+    stationName.value =
+      select.value.options?.find(
+        (item: any) => item.value === select.value.value
+      )?.title || '未知站点';
 
     // 打开弹框
     modalVisible.value = true;
@@ -597,11 +597,10 @@ const handleModalClose = () => {
  */
 const handlePanelChange1 = (data: any, type: string) => {
   // TODO: 后续可扩展联动逻辑
-  if (data.moreSelect && data.scopeDate) {
-    select.value.value = data.moreSelect;
-     paramsOne.value.tm = data.scopeDate;
-      fetchChartData();
-  } 
+  if (data.scopeDate) {
+    paramsOne.value.tm = data.scopeDate;
+    fetchChartData();
+  }
   if (data?.selectedNodeExtra?.lttd && data?.selectedNodeExtra?.lgtd) {
     const mapClass = MapClass.getInstance();
     mapClass.flyTopanto(
diff --git a/frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue b/frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue
index 02cc7d52..90f1b9e6 100644
--- a/frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue
+++ b/frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue
@@ -52,18 +52,18 @@
       :search-params="searchParams"
       :transform-data="customTransform"
     >
-      <template #coenvwState="{ column, record }">
+      <template #coenvwState="{ record }">
         <a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
           {{ record.coenvwState > 0 ? '在线' : '离线' }}
         </a-tag>
       </template>
-      <template #dvtp="{ column, record }">
+      <template #dvtp="{ record }">
         {{ dvtpText(record.dvtp) }}
       </template>
-      <template #stindxForEng="{ column, record }">
+      <template #stindxForEng="{ record }">
         {{ record.dvtp == 2 ? '生态流量' : '出库流量' }}
       </template>
-      <template #action="{ column, record }">
+      <template #action="{ record }">
         <a @click="handleViewDetail(record, 'detail')" class="text-link">
           查看详情
         </a>
@@ -73,10 +73,14 @@
 </template>
 
 <script lang="ts" setup>
+import dayjs from 'dayjs';
 import { ref, computed, onMounted, h } from 'vue';
 import { Tooltip } from 'ant-design-vue';
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
-import { vmsstbprptGetKendoList,overviewvmsstbprptGetKendoList } from '@/api/home';
+import {
+  vmsstbprptGetKendoList,
+  overviewvmsstbprptGetKendoList
+} from '@/api/home';
 import BasicTable from '@/components/BasicTable/index.vue';
 import { useModelStore } from '@/store/modules/model';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
@@ -142,11 +146,25 @@ const columns = computed(() => {
         title: '建成时间',
         dataIndex: 'jcdt',
         width: '150px',
-        sort: true
+        sort: true,
+        customRender: ({ text }) =>
+          text ? dayjs(text).format('YYYY-MM-DD') : '-'
       },
       {
         key: 'coenvwState',
-        title: h(Tooltip, { title: '最近1天有监测数据为在线，否则为离线' }, { default: () => h('span', null, ['监测状态', h(QuestionCircleOutlined, { style: { marginLeft: '4px', color: '#000' } })]) }),
+        title: h(
+          Tooltip,
+          { title: '最近1天有监测数据为在线，否则为离线' },
+          {
+            default: () =>
+              h('span', null, [
+                '监测状态',
+                h(QuestionCircleOutlined, {
+                  style: { marginLeft: '4px', color: '#000' }
+                })
+              ])
+          }
+        ),
         dataIndex: 'coenvwState',
         width: '120px',
         slots: { customRender: 'coenvwState' }
@@ -190,7 +208,9 @@ const columns = computed(() => {
       title: '建成时间',
       dataIndex: 'jcdt',
       width: '150px',
-      sort: true
+      sort: true,
+      customRender: ({ text }) =>
+        text ? dayjs(text).format('YYYY-MM-DD') : '-'
     },
     {
       key: 'stindx',
@@ -204,7 +224,19 @@ const columns = computed(() => {
   if (tabIndex.value !== '4') {
     baseColumns.push({
       key: 'coenvwState',
-      title: h(Tooltip, { title: '最近1天有监测数据为在线，否则为离线' }, { default: () => h('span', null, ['监测状态', h(QuestionCircleOutlined, { style: { marginLeft: '4px', color: '#999' } })]) }),
+      title: h(
+        Tooltip,
+        { title: '最近1天有监测数据为在线，否则为离线' },
+        {
+          default: () =>
+            h('span', null, [
+              '监测状态',
+              h(QuestionCircleOutlined, {
+                style: { marginLeft: '4px', color: '#999' }
+              })
+            ])
+        }
+      ),
       dataIndex: 'coenvwState',
       width: '120px',
       slots: { customRender: 'coenvwState' }
@@ -315,7 +347,7 @@ const getRstcdData = async () => {
     select: ['stcd', 'stnm']
   };
   const res = await overviewvmsstbprptGetKendoList(parmas);
-  rstcdOptions.value = res.data.data.map((item) => {
+  rstcdOptions.value = res.data.data.map(item => {
     return {
       value: item.stcd,
       label: item.stnm
@@ -323,7 +355,7 @@ const getRstcdData = async () => {
   });
 };
 const handleBaseChange = () => {
-  searchData.value.stcd = null
+  searchData.value.stcd = null;
   getRstcdData();
   // handleSearch();
 };
@@ -344,7 +376,7 @@ const handleSearch = () => {
       value: searchData.value.baseId
     });
   }
-  if(searchData.value.stcd){
+  if (searchData.value.stcd) {
     filters.push({
       field: 'stcd',
       operator: 'eq',
@@ -507,7 +539,7 @@ const handleReset = () => {
     stnm: null,
     stcd: null
   };
-  getRstcdData()
+  getRstcdData();
   handleSearch();
 };
 
@@ -622,7 +654,7 @@ onMounted(() => {
       value: element.wbsCode
     });
   });
-  getRstcdData()
+  getRstcdData();
   handleSearch();
 });
 </script>
diff --git a/frontend/src/modules/lushengshebeitongji/LsstjkTk.vue b/frontend/src/modules/lushengshebeitongji/LsstjkTk.vue
new file mode 100644
index 00000000..0294c6d6
--- /dev/null
+++ b/frontend/src/modules/lushengshebeitongji/LsstjkTk.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="lsstjk-table">
+    <!-- 表格 -->
+    <div class="table-wrapper">
+      <BasicTable
+        ref="tableRef"
+        :columns="columns"
+        :scroll-y="500"
+        :scroll-x="800"
+        :list-url="listUrl"
+        :search-params="searchParams"
+        :transform-data="customTransform"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import { getVmsstbprptList, getTetSpecList } from '@/api/stdc';
+import dayjs from 'dayjs';
+
+// ==================== Props ====================
+const props = defineProps<{
+  selectDateTime?: any;
+  orderIndex?: string;
+  hbrvcd?: string;
+}>();
+
+// ==================== 搜索状态 ====================
+const tableRef = ref();
+const yearValue = ref(
+  props.selectDateTime ? dayjs(props.selectDateTime) : dayjs()
+);
+
+// ==================== 接口URL ====================
+const listUrl = computed(() => {
+  return props.orderIndex === '20' ? getTetSpecList : getVmsstbprptList;
+});
+
+// ==================== 表格列配置 ====================
+const columns = computed(() => {
+  if (props.orderIndex === '20') {
+    return [
+      {
+        key: 'name',
+        title: '名称',
+        dataIndex: 'name',
+        fixed: 'left' as const,
+        width: 200,
+        ellipsis: true
+      },
+      {
+        key: 'nameEn',
+        title: '英文名称',
+        dataIndex: 'nameEn',
+        width: 200,
+        ellipsis: true
+      },
+      {
+        key: 'protectlvlName',
+        title: '保护级别',
+        dataIndex: 'protectlvlName',
+        width: 200,
+        ellipsis: true
+      }
+    ];
+  }else{
+      // orderIndex === '16' 红外相机
+  return [
+    {
+      key: 'box',
+      title: '监测区域',
+      dataIndex: 'box',
+      fixed: 'left' as const,
+      width: 200,
+      ellipsis: true
+    },
+    {
+      key: 'stnm',
+      title: '站点名称',
+      dataIndex: 'stnm',
+      width: 200,
+      ellipsis: true
+    },
+    {
+      key: 'baseName',
+      title: '所属基地',
+      dataIndex: 'baseName',
+      width: 200,
+      ellipsis: true
+    },
+    {
+      key: 'stlc',
+      title: '所在地址',
+      dataIndex: 'stlc',
+      width: 200,
+      ellipsis: true
+    }
+  ];
+  }
+
+});
+
+// ==================== 搜索参数 ====================
+const searchParams = computed(() => {
+  const filters: any[] = [];
+
+  if (props.hbrvcd) {
+    filters.push({
+      field: 'hbrvcd',
+      operator: 'in',
+      dataType: 'string',
+      value: props.hbrvcd
+    });
+  }
+
+  if (props.orderIndex === '20') {
+    filters.push({
+      field: 'sttpCode',
+      operator: 'eq',
+      dataType: 'string',
+      value: 'TE_ANIMALS'
+    });
+  }
+
+  const startTime = `${dayjs(yearValue.value).format('YYYY')}-01-01 00:00:00`;
+  const endTime = `${dayjs(yearValue.value).format('YYYY')}-12-31 23:59:59`;
+  filters.push({
+    field: 'startTime',
+    operator: 'gte',
+    dataType: 'date',
+    value: startTime
+  });
+  filters.push({
+    field: 'endTime',
+    operator: 'lte',
+    dataType: 'date',
+    value: endTime
+  });
+
+  return {
+    filter: {
+      logic: 'and',
+      filters
+    },
+    sort: [],
+    group: [],
+    select: [],
+    groupResultFlat: false
+  };
+});
+
+// ==================== 数据转换 ====================
+const customTransform = (res: any) => {
+  return {
+    records: res?.data?.data || [],
+    total: res?.data?.total || 0
+  };
+};
+
+// ==================== 搜索与重置 ====================
+const handleSearch = () => {
+  const filter = getFilter();
+  tableRef.value?.getList(filter);
+};
+
+const getFilter = () => {
+  const filters: any[] = [
+    {
+      field: 'sttpCode',
+      operator: 'eq',
+      dataType: 'string',
+      value: 'WVA'
+    }
+  ];
+
+  if (props.hbrvcd) {
+    filters.push({
+      field: 'hbrvcd',
+      operator: 'in',
+      dataType: 'string',
+      value: props.hbrvcd
+    });
+  }
+
+  return {
+    logic: 'and',
+    filters
+  };
+};
+
+// ==================== 监听 selectDateTime 变化 ====================
+watch(
+  () => props.selectDateTime,
+  newVal => {
+    if (newVal) {
+      yearValue.value = dayjs(newVal);
+      handleSearch();
+    }
+  },
+  { immediate: false }
+);
+
+// ==================== 监听 orderIndex 变化 ====================
+watch(
+  () => props.orderIndex,
+  () => {
+    handleSearch();
+  }
+);
+
+// ==================== 挂载时执行 ====================
+onMounted(() => {
+  handleSearch();
+});
+</script>
+
+<style lang="scss" scoped>
+.lsstjk-table {
+  width: 100%;
+
+  .search-form {
+    padding: 16px 0;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 16px;
+  }
+
+  .table-wrapper {
+    width: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/modules/lushengshebeitongji/index.vue b/frontend/src/modules/lushengshebeitongji/index.vue
new file mode 100644
index 00000000..e234891d
--- /dev/null
+++ b/frontend/src/modules/lushengshebeitongji/index.vue
@@ -0,0 +1,378 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <SidePanelItem title="监测设备统计">
+    <a-spin :spinning="dataLoading" tip="加载中...">
+      <div class="facility-grid">
+        <div
+          v-for="facility in facilities"
+          :key="facility.name"
+          class="facility-card"
+          @click="handleCardClick(facility)"
+        >
+          <div
+            style="
+              width: 60px;
+              height: 62px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            "
+          >
+            <div class="facility-icon">
+              <i
+                style="color: #fff"
+                :class="facility.icon"
+                type="icon-shengtailiuliang2"
+              ></i>
+            </div>
+          </div>
+
+          <div class="facility-info">
+            <div class="facility-name">{{ facility.name }}</div>
+            <div style="font-size: 16px">
+              <span class="facility-count">{{ facility.count }}</span>
+              <span>{{ facility.unit }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </SidePanelItem>
+
+  <!-- 陆生生态调查概况弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    :title="currentOrderIndex === '16' ? '红外相机信息' : '重点陆生动物'"
+    width="1536px"
+    :footer="null"
+    @cancel="handleModalClose"
+  >
+    <LsstjkTk
+      v-if="modalVisible"
+      :selectDateTime="datetimePicker.value"
+      :orderIndex="currentOrderIndex"
+      :hbrvcd="select.value"
+    />
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  watch,
+  inject,
+  computed,
+  defineOptions
+} from 'vue';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import LsstjkTk from './LsstjkTk.vue';
+import { wbsbGetKendoList, getEvnmAutoMonitor } from '@/api/stdc';
+import moment from 'moment';
+import { useDraggable } from '@/utils/drag';
+
+// 定义组件名
+defineOptions({
+  name: 'LSJCSBTJ'
+});
+
+const JidiSelectEventStore = useJidiSelectEventStore();
+const baseid = ref('');
+const dataLoading = ref(false);
+
+// ==================== 弹框状态 ====================
+const modalVisible = ref(false);
+const currentOrderIndex = ref('16');
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+// ==================== 响应式变量定义 ====================
+// 选择器配置
+const select = ref({
+  show: true,
+  value: undefined,
+  options: [],
+  picker: undefined,
+  format: undefined,
+  width: '120px'
+});
+
+// 日期选择器配置
+const datetimePicker = ref({
+  show: true,
+  value: `${new Date().getFullYear()}`,
+  format: 'YYYY',
+  picker: 'year' as const,
+  options: []
+});
+
+const facilities: any = ref([
+  {
+    name: '红外摄像机',
+    count: 0,
+    unit: '个',
+    icon: 'icon iconfont icon-dongwujiuzhuzhan',
+    orderInx: '16'
+  },
+  {
+    name: '鸟类智能识别装置',
+    count: 0,
+    unit: '种',
+    icon: 'icon iconfont icon-shipinjiankongshebei',
+    orderInx: '20'
+  },
+  {
+    name: '动物智能识别装置',
+    count: 0,
+    unit: '个',
+    icon: 'icon iconfont icon-dongwujiuzhuzhan',
+    orderInx: '21'
+  }
+]);
+
+// ==================== 事件处理 ====================
+const handlePanelChange = (data: any) => {
+  console.log('当前所有控件状态:', data);
+  if (data.select) {
+    select.value.value = data.select;
+  }
+  if (data.datetime) {
+    datetimePicker.value.value = data.datetime;
+  }
+  // 选择器或日期变化时，重新获取统计数据
+  getCardData();
+};
+
+const handleCardClick = (facility: any) => {
+  console.log('卡片被点击，准备打开弹框');
+  currentOrderIndex.value = facility.orderInx;
+  modalVisible.value = true;
+};
+
+const handleModalClose = () => {
+  modalVisible.value = false;
+};
+
+// ==================== 获取卡片统计数据 ====================
+const getCardData = async () => {
+  if (!datetimePicker.value.value) return;
+
+  dataLoading.value = true;
+
+  try {
+    const year = moment(datetimePicker.value.value).format('YYYY');
+    const startTime = `${year}-01-01 00:00:00`;
+    const endTime = `${year}-12-31 23:59:59`;
+
+    const filters: any[] = [
+      {
+        field: 'showIds',
+        operator: 'in',
+        value: ['16', '20']
+      },
+      {
+        field: 'startTime',
+        operator: 'gte',
+        dataType: 'date',
+        value: startTime
+      },
+      {
+        field: 'endTime',
+        operator: 'lte',
+        dataType: 'date',
+        value: endTime
+      }
+    ];
+
+    if (baseid.value && baseid.value !== 'all') {
+      filters.unshift({
+        field: 'hbrvcd',
+        operator: 'in',
+        value: [baseid.value]
+      });
+    }
+
+    const params = {
+      filter: {
+        logic: 'and',
+        filters
+      }
+    };
+
+    const res = await getEvnmAutoMonitor(params);
+    const data = res?.data?.data;
+
+    if (data && Array.isArray(data)) {
+      const wildAnimalItem = data.find((item: any) => item.orderInx === 16);
+      const keyAnimalItem = data.find((item: any) => item.orderInx === 20);
+
+      // facilities.value = [
+      //   {
+      //     name: '野生动物监测',
+      //     count: wildAnimalItem?.cnt ?? 0,
+      //     unit: '个',
+      //     icon: 'icon iconfont icon-dongwujiuzhuzhan',
+      //     orderInx: '16'
+      //   },
+      //   {
+      //     name: '重点陆生动物',
+      //     count: keyAnimalItem?.cnt ?? 0,
+      //     unit: '种',
+      //     icon: 'icon iconfont icon-shipinjiankongshebei',
+      //     orderInx: '20'
+      //   }
+      // ];
+    }
+  } catch (error) {
+    console.error('获取统计数据失败:', error);
+    facilities.value = [
+      {
+        name: '野生动物监测',
+        count: 0,
+        unit: '个',
+        icon: 'icon iconfont icon-dongwujiuzhuzhan',
+        orderInx: '16'
+      },
+      {
+        name: '重点陆生动物',
+        count: 0,
+        unit: '种',
+        icon: 'icon iconfont icon-shipinjiankongshebei',
+        orderInx: '20'
+      }
+    ];
+  } finally {
+    dataLoading.value = false;
+  }
+};
+
+// ==================== 获取选择器数据 ====================
+const getSelectData = async () => {
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'wbsType',
+          operator: 'eq',
+          value: 'PSB_RVCD'
+        },
+        baseid.value != 'all'
+          ? {
+              field: 'objId',
+              operator: 'eq',
+              value: baseid.value
+            }
+          : null
+      ].filter(Boolean)
+    },
+    group: [
+      {
+        dir: 'asc',
+        field: 'orderIndex'
+      },
+      {
+        dir: 'asc',
+        field: 'wbsCode'
+      },
+      {
+        dir: 'asc',
+        field: 'wbsName'
+      },
+      {
+        dir: 'asc',
+        field: 'objid'
+      }
+    ],
+    groupResultFlat: true
+  };
+  const res = await wbsbGetKendoList(params);
+  let data = res?.data?.data;
+  select.value.options = data.map((item: any) => {
+    return {
+      value: item.wbsCode,
+      label: item.wbsName
+    };
+  });
+};
+
+// 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
+const injectedStation = inject<any>('dianZhanStation', null);
+const stationSource = computed(
+  () => injectedStation?.value || JidiSelectEventStore.selectedItem
+);
+
+// ==================== 监听基地变化 ====================
+watch(
+  () => stationSource.value,
+  async newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
+      getSelectData();
+      getCardData();
+    }
+  },
+  { deep: true, immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.facility-grid {
+  width: 406px;
+  flex-flow: wrap;
+  display: flex;
+  justify-content: space-between;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+.facility-card {
+  width: 200px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 0px;
+  background: #fff;
+  border: 1px solid rgb(229, 236, 245);
+  border-radius: 2px;
+  transition: all 0.3s;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.facility-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: #2f6b98;
+  border-radius: 50%;
+
+  .anticon {
+    font-size: 24px;
+    color: #fff;
+  }
+}
+
+.facility-info {
+  flex: 1;
+}
+
+.facility-name {
+  font-size: 16px;
+  color: #333;
+}
+
+.facility-count {
+  font-size: 18px;
+  color: #2f6b98;
+}
+
+:deep(.ant-spin-nested-loading) {
+  min-height: 72px;
+}
+</style>
diff --git a/frontend/src/modules/map/domain/nearby-point-rules.ts b/frontend/src/modules/map/domain/nearby-point-rules.ts
index 77d99e51..aeb4e516 100644
--- a/frontend/src/modules/map/domain/nearby-point-rules.ts
+++ b/frontend/src/modules/map/domain/nearby-point-rules.ts
@@ -131,25 +131,45 @@ const isAlarmRangeLegendState = (legendState: string): boolean => {
 
 const getPointRenderPriority = (point: Record<string, any>): number => {
   const layerKey = String(point.layerKey || point.type || '').toLowerCase();
-  const legendState = String(point.anchoPointState || '').trim().toLowerCase();
+  const legendState = String(point.anchoPointState || '')
+    .trim()
+    .toLowerCase();
 
-  if (
+  const isAlarm =
     layerKey.includes('eng_alarm_point') ||
     layerKey.includes('alarm_range') ||
-    isAlarmRangeLegendState(legendState)
-  ) {
-    return 300;
+    isAlarmRangeLegendState(legendState);
+  const isLarge = legendState.startsWith('large_eng_');
+  const isMid = legendState.startsWith('mid_eng_');
+  const isEng = layerKey.includes('eng_point') || isLarge || isMid;
+
+  // 建设状态权重：已建 > 在建 > 未建
+  let buildRank = 0;
+  if (legendState.includes('_ubuilt')) {
+    buildRank = 2;
+  } else if (legendState.includes('_nbuilt')) {
+    buildRank = 1;
+  } else if (legendState.includes('_built')) {
+    buildRank = 3;
   }
 
-  if (
-    layerKey.includes('eng_point') ||
-    legendState.startsWith('large_eng_') ||
-    legendState.startsWith('mid_eng_')
-  ) {
-    return 200;
+  let base = 100;
+
+  // 大型电站优先级最高，中型电站次之；同规模内已建优先
+  if (isLarge) {
+    base = 300 + buildRank * 30;
+  } else if (isMid) {
+    base = 200 + buildRank * 30;
+  } else if (isEng) {
+    base = 150;
   }
 
-  return 100;
+  // 报警范围点仅在同规格内略微提升，不跨越大型/中型与建设状态层级
+  if (isAlarm) {
+    base += 10;
+  }
+
+  return base;
 };
 
 const normalizeText = (value: unknown): string => {
diff --git a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
index 29fabddb..41830f61 100644
--- a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
+++ b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
@@ -1,6 +1,6 @@
 <!-- SidePanelItem.vue -->
 <template>
-  <SidePanelItem title="栖息地保护工作开展情况">
+  <SidePanelItem title="栖息地监测设备统计">
     <a-spin :spinning="loading" tip="加载中...">
       <div class="facility-grid">
         <div
diff --git a/frontend/src/modules/qixidifenbutongji/index.vue b/frontend/src/modules/qixidifenbutongji/index.vue
new file mode 100644
index 00000000..c030b70d
--- /dev/null
+++ b/frontend/src/modules/qixidifenbutongji/index.vue
@@ -0,0 +1,817 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <SidePanelItem
+    title="栖息地分布统计"
+    :select="select"
+    :scopeDate="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <div class="chart-wrapper">
+      <a-spin :spinning="loading">
+        <!-- 始终渲染图表容器，确保有固定宽高 -->
+        <div ref="chartRef" class="water-temp-chart"></div>
+        <!-- 无数据时显示Empty，但不影响容器尺寸 -->
+        <div v-if="!loading && !hasData" class="empty-overlay">
+          <a-empty description="暂无数据" />
+        </div>
+      </a-spin>
+    </div>
+  </SidePanelItem>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  watch,
+  inject,
+  computed,
+  type Ref
+} from 'vue';
+import * as echarts from 'echarts';
+import type { EChartsOption } from 'echarts';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { msstbprptGetKendoList, sdrvwtsGetKendoList } from '@/api/qxd';
+import { useModelStore } from '@/store/modules/model';
+import dayjs from 'dayjs';
+// 定义组件名
+defineOptions({
+  name: 'qixidishuiwenbianhua'
+});
+
+// ==================== 响应式变量定义 ====================
+const JidiSelectEventStore = useJidiSelectEventStore();
+// 图表容器引用
+const chartRef = ref<HTMLDivElement>();
+let chartInstance: echarts.ECharts | null = null;
+const baseid = ref('');
+
+// Loading 状态和数据状态
+const loading = ref(true);
+const hasData = ref(true); // 初始化为 true，因为 initChart 时会渲染
+
+// 选择器配置
+const select = ref({
+  show: true,
+  value: undefined,
+  options: [],
+  picker: undefined,
+  format: undefined
+});
+
+// 日期选择器配置
+const datetimePicker: any = ref({
+  show: true,
+  value: (() => {
+    const now = new Date();
+    const currentMonth = `${now.getFullYear()}-${String(
+      now.getMonth() + 1
+    ).padStart(2, '0')}`;
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    const lastMonthStr = `${lastMonth.getFullYear()}-${String(
+      lastMonth.getMonth() + 1
+    ).padStart(2, '0')}`;
+    return [lastMonthStr, currentMonth];
+  })(),
+  format: 'YY-MM',
+  picker: 'month' as const,
+  options: []
+});
+
+// 图表数据
+const echartsData = ref<any[]>([]);
+const modelStore = useModelStore();
+// 单位配置
+const unita = ref('℃');
+
+// 颜色配置 - 使用HSL色彩空间生成舒适的颜色
+const Color = [
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#73c0de',
+  '#3ba272',
+  '#fc8452',
+  '#9a60b4'
+];
+
+// ==================== 工具函数 ====================
+
+/**
+ * 生成模拟数据 - 季节性水温变化
+ */
+const generateMockData = () => {
+  const data = [];
+  const baseTemp = 15; // 基础温度
+
+  for (let i = 0; i < 12; i++) {
+    const month = String(i + 1).padStart(2, '0');
+    // 模拟季节性变化：夏季高，冬季低
+    // 正弦波模拟：峰值在7-8月，谷值在1-2月
+    const temp =
+      baseTemp +
+      Math.sin((i / 12) * Math.PI * 2 - Math.PI / 2) * 10 +
+      Math.random() * 2;
+
+    data.push({
+      dt: `2024-${month}`,
+      wt: parseFloat(temp.toFixed(1))
+    });
+  }
+
+  return data;
+};
+
+/**
+ * 初始化图表
+ */
+const initChart = () => {
+  if (!chartRef.value) {
+    console.warn('图表容器未找到');
+    return;
+  }
+
+  // 销毁已存在的实例
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+
+  // 创建新实例
+  chartInstance = echarts.init(chartRef.value);
+
+  // 绑定数据点点击事件
+  chartInstance.on('click', handleDataPointClick);
+
+  // 更新图表
+  updateChart();
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize);
+};
+
+/**
+ * 更新图表配置
+ */
+const updateChart = () => {
+  if (!chartInstance) return;
+
+  const _legendData = [`水温(${unita.value})`];
+
+  // 处理空数据情况
+  const hasData = echartsData.value && echartsData.value.length > 0;
+
+  const option: EChartsOption = {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#ffffff'
+      },
+      formatter: function (params: any) {
+        if (!params || params.length === 0) return '';
+
+        let res = `${params[0].name} <br/>`;
+
+        for (const item of params) {
+          const seriesName = item.seriesName ?? '';
+          let regx = /\(([^()]+?)\)/;
+          let unit = seriesName.match(regx);
+          // 数据保留一位小数
+          const finalValue =
+            item.value !== undefined && item.value !== null
+              ? Number(item.value).toFixed(1)
+              : '-';
+
+          if (item.value !== undefined && item.value !== null) {
+            res += `<span style="background: ${
+              item.color
+            }; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${
+              item.seriesName
+            } ${finalValue}${unit?.[1] || ''} <br/>`;
+          }
+        }
+        return res;
+      }
+    },
+    // axisPointer 配置：鼠标经过时显示阴影块
+    axisPointer: {
+      type: 'shadow',
+      label: {
+        show: false
+      },
+      shadowStyle: {
+        color: 'rgba(84, 112, 198, 0.2)'
+      }
+    },
+    color: Color,
+    legend: {
+      data: _legendData,
+      top: 0,
+      left: 'center',
+      selectedMode: 'multiple'
+    },
+    grid: {
+      top: 25,
+      left: '3%',
+      right: '3%',
+      bottom: '3%',
+      containLabel: true
+    },
+    dataZoom: {
+      type: 'inside',
+      start: 0,
+      end: 100
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: echartsData.value?.map((item: any) => item.dt) || [],
+        boundaryGap: true,
+        // X轴标签配置 - 最多显示4个标签，强制显示第一个
+        axisLabel: {
+          show: true,
+          rotate: 0, // 不倾斜
+          interval: (index: number, value: string): boolean => {
+            const total = echartsData.value?.length || 0;
+            if (total <= 4) return true; // 数据少于4条，全部显示
+
+            // 强制显示第一个
+            if (index === 0) return true;
+
+            // 其余均匀分布3个标签（总共4个）
+            const step = Math.floor((total - 1) / 3);
+            return index % step === 0 && index < total;
+          },
+          formatter: function (value: string) {
+            // 显示完整日期 "YYYY-MM-DD" 格式
+            return value;
+          }
+        },
+        // X轴网格线（垂直方向）
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'solid',
+            color: '#e0e0e0'
+          }
+        },
+        // X轴的axisPointer配置：鼠标经过时显示阴影块
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: {
+            color: 'rgba(84, 112, 198, 0.2)'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        // 移除 name，避免与 legend 重复，在刻度上显示单位
+        name: _legendData[0], // 显示 "水温(℃)"
+        nameLocation: 'end', // 显示在 Y 轴顶部
+        nameGap: 8, // 与轴线距离 20px
+        nameTextStyle: {
+          color: '#333333',
+          fontSize: 12
+        },
+        // 计算 Y 轴范围：最小值向下取整，最大值向上取整
+        min:
+          hasData && echartsData.value.length > 0
+            ? Math.floor(Math.min(...echartsData.value.map(item => item.wt)))
+            : undefined,
+        max:
+          hasData && echartsData.value.length > 0
+            ? Math.ceil(Math.max(...echartsData.value.map(item => item.wt)))
+            : undefined,
+        // 确保显示刻度和标签，保持整数
+        axisLabel: {
+          show: true,
+          color: '#333',
+          formatter: (value: number) => `${Math.round(value)} ℃` // 取整并显示单位
+        },
+        axisTick: {
+          show: true
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#333'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'solid'
+          }
+        },
+        // 确保 Y 轴刻度为整数
+        minInterval: 1,
+        maxInterval: 1
+      }
+    ],
+    series: [
+      {
+        name: _legendData[0],
+        data: hasData
+          ? echartsData.value?.map((item: any) => item.wt) || []
+          : [],
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        lineStyle: {
+          width: 2
+        }
+      }
+    ]
+  };
+  // 使用完全替换模式更新配置
+  chartInstance.setOption(option, true);
+};
+
+/**
+ * 处理窗口大小变化
+ */
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+/**
+ * 处理数据点点击事件
+ */
+const handleDataPointClick = (params: any) => {
+  console.log('=== 数据点点击事件 ===');
+  console.log('点击参数:', params);
+
+  if (!params || !params.dataIndex) {
+    console.warn('无效的数据点点击');
+    return;
+  }
+
+  const dataIndex = params.dataIndex;
+  const dataItem = echartsData.value[dataIndex];
+
+  if (dataItem) {
+    console.log('点击的数据:', {
+      日期: dataItem.dt,
+      水温: dataItem.wt,
+      测站代码: dataItem.stcd,
+      索引: dataIndex
+    });
+    modelStore.modalVisible = true;
+    modelStore.params.sttp = 'WT';
+    modelStore.title = '水温监测';
+    modelStore.params.stcd = dataItem.stcd;
+    modelStore.showStcdSelector = true;
+    modelStore.stcdOptions = select.value.options;
+    modelStore.filter.rangeTm = [
+      dayjs(dataItem.dt).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+      dayjs(dataItem.dt).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+    ];
+  }
+};
+
+/**
+ * 加载模拟数据
+ */
+const loadData = async () => {
+  try {
+    // 生成模拟数据
+    echartsData.value = generateMockData();
+
+    // 数据加载完成后更新图表
+    await nextTick();
+    updateChart();
+  } catch (error) {
+    console.error('加载水温数据失败:', error);
+  }
+};
+
+/**
+ * 加载图表数据
+ * @param startDate 开始日期 (格式: YYYY-MM-DD HH:mm:ss)
+ * @param endDate 结束日期 (格式: YYYY-MM-DD HH:mm:ss)
+ * @param stcd 测站代码
+ */
+const getChartData = async (
+  startDate: string,
+  endDate: string,
+  stcd: string
+) => {
+  try {
+    console.log('=== 开始加载图表数据 ===');
+    console.log('请求参数:', { startDate, endDate, stcd });
+
+    // 设置 loading 状态
+    loading.value = true;
+    hasData.value = false;
+
+    // TODO: 实现API调用逻辑
+    // 参考选中的代码结构，构建请求参数
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'DT',
+            operator: 'gte',
+            value: startDate // 例如: "2026-05-01 00:00:00"
+          },
+          {
+            field: 'DT',
+            operator: 'lte',
+            value: endDate // 例如: "2026-06-30 23:59:59"
+          },
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: stcd
+          }
+        ]
+      },
+      sort: [
+        {
+          field: 'dt',
+          dir: 'asc'
+        }
+      ]
+    };
+
+    // 调用实际的API获取数据
+    const res = await sdrvwtsGetKendoList(params);
+    console.log('API返回结果:', res);
+
+    let data = res?.data?.data || [];
+    console.log('原始数据条数:', data.length);
+
+    // 处理空数据情况
+    if (!data || data.length === 0) {
+      echartsData.value = [];
+      hasData.value = false;
+      await nextTick();
+      updateChart();
+      console.warn('未查询到水温数据');
+      return;
+    }
+
+    // 转换数据格式：提取日期部分用于X轴显示，并进行数据验证和类型转换
+    echartsData.value = data
+      .map(item => {
+        // 验证必要字段
+        if (!item.dt || typeof item.dt !== 'string') {
+          console.warn('无效的日期数据:', item);
+          return null;
+        }
+
+        // 确保 wt 是数值类型
+        const wt = typeof item.wt === 'number' ? item.wt : parseFloat(item.wt);
+        if (isNaN(wt)) {
+          console.warn('无效的水温数据:', item);
+          return null;
+        }
+
+        return {
+          dt: item.dt.substring(0, 10), // 提取 "2026-05-02" 格式
+          wt: wt, // 确保是 number 类型
+          stcd: item.stcd || stcd // 保留 stcd 字段，如果 API 返回中没有则使用传入的 stcd
+        };
+      })
+      .filter(Boolean); // 过滤掉无效数据
+
+    console.log('转换后的图表数据:', echartsData.value);
+    console.log('数据类型检查:', {
+      第一条数据: echartsData.value[0],
+      dt类型: typeof echartsData.value[0]?.dt,
+      wt类型: typeof echartsData.value[0]?.wt,
+      wt값: echartsData.value[0]?.wt
+    });
+
+    // 判断是否有数据
+    hasData.value = echartsData.value.length > 0;
+    console.log('hasData 设置为:', hasData.value);
+
+    // 数据加载完成后更新图表
+    await nextTick();
+    updateChart();
+    console.log('✅ 图表数据加载完成');
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+    hasData.value = false;
+  } finally {
+    // 关闭 loading 状态
+    await nextTick();
+    console.log('关闭 loading 状态');
+    loading.value = false;
+  }
+};
+
+/**
+ * 将 YY-MM 格式转换为完整的日期时间范围
+ * @param dateRange ['26-05', '26-06'] 格式的数组
+ * @returns { startDate: string, endDate: string } 格式化后的日期范围
+ */
+const convertDateRange = (dateRange: string[]) => {
+  if (!dateRange || dateRange.length !== 2) {
+    return null;
+  }
+  //
+
+  const [startStr, endStr] = dateRange;
+
+  // 获取今天的日期（日部分）
+  const today = new Date();
+  const currentDay = today.getDate();
+
+  // 解析开始日期 YY-MM
+  const [startYearStr, startMonthStr] = startStr.split('-');
+  const startYear = parseInt(startYearStr);
+  const startMonth = parseInt(startMonthStr);
+  const fullStartYear = startYear < 100 ? 2000 + startYear : startYear;
+
+  // 解析结束日期 YY-MM
+  const [endYearStr, endMonthStr] = endStr.split('-');
+  const endYear = parseInt(endYearStr);
+  const endMonth = parseInt(endMonthStr);
+  const fullEndYear = endYear < 100 ? 2000 + endYear : endYear;
+
+  // 开始日期：基于第一个值的年月 + 今天的日期 + 00:00:00
+  // 需要处理月份天数边界问题（如今天是31号，但2月只有28天）
+  const startMonthLastDay = new Date(fullStartYear, startMonth, 0).getDate();
+  const actualStartDay = Math.min(currentDay, startMonthLastDay);
+  const startDate = `${fullStartYear}-${String(startMonth).padStart(
+    2,
+    '0'
+  )}-${String(actualStartDay).padStart(2, '0')} 00:00:00`;
+
+  // 结束日期：基于第二个值的年月 + 今天的日期 + 23:59:59
+  // 同样需要处理月份天数边界问题
+  const endMonthLastDay = new Date(fullEndYear, endMonth, 0).getDate();
+  const actualEndDay = Math.min(currentDay, endMonthLastDay);
+  const endDate = `${fullEndYear}-${String(endMonth).padStart(2, '0')}-${String(
+    actualEndDay
+  ).padStart(2, '0')} 23:59:59`;
+
+  return {
+    startDate,
+    endDate
+  };
+};
+
+const handlePanelChange1 = async data => {
+  console.log('=== 用户交互触发 ===');
+  console.log('当前所有控件状态:', data);
+  // scopeDate: ['26-05', '26-06']
+  // select: "0836000011"
+  if (data.scopeDate && data.scopeDate.length > 0 && data.select) {
+    console.log('参数验证通过，开始加载数据');
+    // 转换日期格式并加载数据
+    const dateRange = convertDateRange(data.scopeDate);
+    if (dateRange) {
+      console.log('日期转换结果:', dateRange);
+      await getChartData(dateRange.startDate, dateRange.endDate, data.select);
+    } else {
+      console.error('日期转换失败');
+    }
+  } else {
+    loading.value = false;
+    hasData.value = false;
+    // 清空图表数据
+    echartsData.value = [];
+    // 更新图表显示空状态
+    await nextTick();
+    updateChart();
+    console.warn('参数不完整:', {
+      scopeDate: data.scopeDate,
+      select: data.select
+    });
+  }
+};
+//获取水温监测下拉框
+const getselsectData = async () => {
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        baseid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: baseid.value
+            }
+          : null,
+        {
+          field: 'fhstcd',
+          operator: 'isnotnull'
+        },
+        {
+          logic: 'or',
+          filters: [
+            {
+              field: 'sttpCode',
+              operator: 'eq',
+              dataType: 'string',
+              value: 'WTRV'
+            }
+          ]
+        }
+      ].filter(Boolean)
+    },
+    select: ['stcd', 'stnm', 'fhstcd', 'fhstnm', 'sttpCode']
+  };
+  let res = await msstbprptGetKendoList(params);
+  console.log(res);
+  if (!res?.data?.data || res.data.data.length == 0) {
+    select.value.value = '';
+    select.value.options = [];
+    return;
+  }
+
+  select.value.value = res.data.data[0].stcd;
+  select.value.options = res.data.data.map((item: any) => {
+    return {
+      label: item.stnm,
+      value: item.stcd
+    };
+  });
+  //
+};
+////
+// 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
+const injectedStation = inject<any>('dianZhanStation', null);
+const stationSource = computed(
+  () => injectedStation?.value || JidiSelectEventStore.selectedItem
+);
+
+watch(
+  () => stationSource.value,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getselsectData();
+  },
+  { deep: true, immediate: true }
+);
+
+// ==================== ppbclTagList 配置 ====================
+const MODULE_PATH = '@/modules/qixidishuiwenbianhua/index.vue';
+
+const ppbclConfigMap = inject<
+  Ref<Record<string, { isShow: number; tagValue: string }>>
+>('ppbclConfigMap', ref({}));
+
+/** 根据 tagValue 计算默认日期范围（YY-MM 格式） */
+function getDateRangeFromTagValue(tagValue: string): [string, string] | null {
+  const now = dayjs();
+  let start: dayjs.Dayjs;
+
+  switch (tagValue) {
+    case '7d':
+      start = now.subtract(7, 'day');
+      break;
+    case '1M':
+      start = now.subtract(1, 'month');
+      break;
+    case 'a1M':
+      start = now.subtract(1, 'month').startOf('month');
+      break;
+    case '3M':
+      start = now.subtract(3, 'month');
+      break;
+    case 'a3M':
+      start = now.subtract(3, 'month').startOf('month');
+      break;
+    case '1y':
+      start = now.subtract(1, 'year');
+      break;
+    case '3y':
+      start = now.subtract(3, 'year');
+      break;
+    case '5y':
+      start = now.subtract(5, 'year');
+      break;
+    default:
+      return null;
+  }
+
+  return [start.format('YYYY-MM'), now.format('YYYY-MM')];
+}
+
+watch(
+  () => ppbclConfigMap?.value?.[MODULE_PATH],
+  config => {
+    if (config) {
+      // isShow 控制时间选择器显隐
+      datetimePicker.value.show = config.isShow !== 0;
+
+      // tagValue 设置默认时间范围
+      if (config.tagValue) {
+        const dateRange = getDateRangeFromTagValue(config.tagValue);
+        if (dateRange) {
+          datetimePicker.value.value = dateRange;
+        }
+      }
+    }
+  },
+  { immediate: true }
+);
+
+// ==================== 生命周期钩子 ====================
+
+// 页面加载时执行
+onMounted(() => {
+  // 双重等待确保DOM和样式计算完成
+  nextTick(() => {
+    setTimeout(() => {
+      // 校验容器尺寸
+      if (chartRef.value) {
+        const rect = chartRef.value.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+          initChart();
+          // 注释掉模拟数据加载，等待用户交互后加载真实数据
+          // loadData();
+          console.log('✅ 图表初始化完成，等待用户交互加载数据');
+        } else {
+          console.warn('图表容器尺寸为0，启动重试机制');
+          // 指数退避重试
+          let retryCount = 0;
+          const maxRetries = 5;
+          const retryInit = () => {
+            if (retryCount < maxRetries) {
+              retryCount++;
+              setTimeout(() => {
+                const newRect = chartRef.value?.getBoundingClientRect();
+                if (newRect && newRect.width > 0 && newRect.height > 0) {
+                  initChart();
+                  // loadData();
+                  console.log('✅ 图表初始化完成（重试成功）');
+                } else {
+                  retryInit();
+                }
+              }, 50 * Math.pow(2, retryCount));
+            } else {
+              console.error('图表容器初始化失败，已达到最大重试次数');
+            }
+          };
+          retryInit();
+        }
+      }
+    }, 50);
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 移除事件监听
+  window.removeEventListener('resize', handleResize);
+
+  // 销毁图表实例
+  if (chartInstance) {
+    // 解绑数据点点击事件
+    chartInstance.off('click', handleDataPointClick);
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.chart-wrapper {
+  width: 100%;
+  height: 231px;
+  min-height: 231px;
+  position: relative;
+  /* 为empty-overlay提供定位上下文 */
+
+  .water-temp-chart {
+    width: 100% !important;
+    height: 100% !important;
+    min-width: 100%;
+    min-height: 231px;
+  }
+
+  .empty-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255);
+    z-index: 10;
+  }
+}
+:deep(.ant-spin-nested-loading > div > .ant-spin) {
+  background: rgba(255, 255, 255) !important;
+}
+</style>
diff --git a/frontend/src/modules/qixidijiancejieguotongji/index.vue b/frontend/src/modules/qixidijiancejieguotongji/index.vue
new file mode 100644
index 00000000..c2860ff8
--- /dev/null
+++ b/frontend/src/modules/qixidijiancejieguotongji/index.vue
@@ -0,0 +1,817 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <SidePanelItem
+    title="监测结果统计"
+    :select="select"
+    :scopeDate="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <div class="chart-wrapper">
+      <a-spin :spinning="loading">
+        <!-- 始终渲染图表容器，确保有固定宽高 -->
+        <div ref="chartRef" class="water-temp-chart"></div>
+        <!-- 无数据时显示Empty，但不影响容器尺寸 -->
+        <div v-if="!loading && !hasData" class="empty-overlay">
+          <a-empty description="暂无数据" />
+        </div>
+      </a-spin>
+    </div>
+  </SidePanelItem>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  watch,
+  inject,
+  computed,
+  type Ref
+} from 'vue';
+import * as echarts from 'echarts';
+import type { EChartsOption } from 'echarts';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { msstbprptGetKendoList, sdrvwtsGetKendoList } from '@/api/qxd';
+import { useModelStore } from '@/store/modules/model';
+import dayjs from 'dayjs';
+// 定义组件名
+defineOptions({
+  name: 'qixidishuiwenbianhua'
+});
+
+// ==================== 响应式变量定义 ====================
+const JidiSelectEventStore = useJidiSelectEventStore();
+// 图表容器引用
+const chartRef = ref<HTMLDivElement>();
+let chartInstance: echarts.ECharts | null = null;
+const baseid = ref('');
+
+// Loading 状态和数据状态
+const loading = ref(true);
+const hasData = ref(true); // 初始化为 true，因为 initChart 时会渲染
+
+// 选择器配置
+const select = ref({
+  show: true,
+  value: undefined,
+  options: [],
+  picker: undefined,
+  format: undefined
+});
+
+// 日期选择器配置
+const datetimePicker: any = ref({
+  show: true,
+  value: (() => {
+    const now = new Date();
+    const currentMonth = `${now.getFullYear()}-${String(
+      now.getMonth() + 1
+    ).padStart(2, '0')}`;
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    const lastMonthStr = `${lastMonth.getFullYear()}-${String(
+      lastMonth.getMonth() + 1
+    ).padStart(2, '0')}`;
+    return [lastMonthStr, currentMonth];
+  })(),
+  format: 'YY-MM',
+  picker: 'month' as const,
+  options: []
+});
+
+// 图表数据
+const echartsData = ref<any[]>([]);
+const modelStore = useModelStore();
+// 单位配置
+const unita = ref('℃');
+
+// 颜色配置 - 使用HSL色彩空间生成舒适的颜色
+const Color = [
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#73c0de',
+  '#3ba272',
+  '#fc8452',
+  '#9a60b4'
+];
+
+// ==================== 工具函数 ====================
+
+/**
+ * 生成模拟数据 - 季节性水温变化
+ */
+const generateMockData = () => {
+  const data = [];
+  const baseTemp = 15; // 基础温度
+
+  for (let i = 0; i < 12; i++) {
+    const month = String(i + 1).padStart(2, '0');
+    // 模拟季节性变化：夏季高，冬季低
+    // 正弦波模拟：峰值在7-8月，谷值在1-2月
+    const temp =
+      baseTemp +
+      Math.sin((i / 12) * Math.PI * 2 - Math.PI / 2) * 10 +
+      Math.random() * 2;
+
+    data.push({
+      dt: `2024-${month}`,
+      wt: parseFloat(temp.toFixed(1))
+    });
+  }
+
+  return data;
+};
+
+/**
+ * 初始化图表
+ */
+const initChart = () => {
+  if (!chartRef.value) {
+    console.warn('图表容器未找到');
+    return;
+  }
+
+  // 销毁已存在的实例
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+
+  // 创建新实例
+  chartInstance = echarts.init(chartRef.value);
+
+  // 绑定数据点点击事件
+  chartInstance.on('click', handleDataPointClick);
+
+  // 更新图表
+  updateChart();
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize);
+};
+
+/**
+ * 更新图表配置
+ */
+const updateChart = () => {
+  if (!chartInstance) return;
+
+  const _legendData = [`水温(${unita.value})`];
+
+  // 处理空数据情况
+  const hasData = echartsData.value && echartsData.value.length > 0;
+
+  const option: EChartsOption = {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#ffffff'
+      },
+      formatter: function (params: any) {
+        if (!params || params.length === 0) return '';
+
+        let res = `${params[0].name} <br/>`;
+
+        for (const item of params) {
+          const seriesName = item.seriesName ?? '';
+          let regx = /\(([^()]+?)\)/;
+          let unit = seriesName.match(regx);
+          // 数据保留一位小数
+          const finalValue =
+            item.value !== undefined && item.value !== null
+              ? Number(item.value).toFixed(1)
+              : '-';
+
+          if (item.value !== undefined && item.value !== null) {
+            res += `<span style="background: ${
+              item.color
+            }; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${
+              item.seriesName
+            } ${finalValue}${unit?.[1] || ''} <br/>`;
+          }
+        }
+        return res;
+      }
+    },
+    // axisPointer 配置：鼠标经过时显示阴影块
+    axisPointer: {
+      type: 'shadow',
+      label: {
+        show: false
+      },
+      shadowStyle: {
+        color: 'rgba(84, 112, 198, 0.2)'
+      }
+    },
+    color: Color,
+    legend: {
+      data: _legendData,
+      top: 0,
+      left: 'center',
+      selectedMode: 'multiple'
+    },
+    grid: {
+      top: 25,
+      left: '3%',
+      right: '3%',
+      bottom: '3%',
+      containLabel: true
+    },
+    dataZoom: {
+      type: 'inside',
+      start: 0,
+      end: 100
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: echartsData.value?.map((item: any) => item.dt) || [],
+        boundaryGap: true,
+        // X轴标签配置 - 最多显示4个标签，强制显示第一个
+        axisLabel: {
+          show: true,
+          rotate: 0, // 不倾斜
+          interval: (index: number, value: string): boolean => {
+            const total = echartsData.value?.length || 0;
+            if (total <= 4) return true; // 数据少于4条，全部显示
+
+            // 强制显示第一个
+            if (index === 0) return true;
+
+            // 其余均匀分布3个标签（总共4个）
+            const step = Math.floor((total - 1) / 3);
+            return index % step === 0 && index < total;
+          },
+          formatter: function (value: string) {
+            // 显示完整日期 "YYYY-MM-DD" 格式
+            return value;
+          }
+        },
+        // X轴网格线（垂直方向）
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'solid',
+            color: '#e0e0e0'
+          }
+        },
+        // X轴的axisPointer配置：鼠标经过时显示阴影块
+        axisPointer: {
+          type: 'shadow',
+          shadowStyle: {
+            color: 'rgba(84, 112, 198, 0.2)'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        // 移除 name，避免与 legend 重复，在刻度上显示单位
+        name: _legendData[0], // 显示 "水温(℃)"
+        nameLocation: 'end', // 显示在 Y 轴顶部
+        nameGap: 8, // 与轴线距离 20px
+        nameTextStyle: {
+          color: '#333333',
+          fontSize: 12
+        },
+        // 计算 Y 轴范围：最小值向下取整，最大值向上取整
+        min:
+          hasData && echartsData.value.length > 0
+            ? Math.floor(Math.min(...echartsData.value.map(item => item.wt)))
+            : undefined,
+        max:
+          hasData && echartsData.value.length > 0
+            ? Math.ceil(Math.max(...echartsData.value.map(item => item.wt)))
+            : undefined,
+        // 确保显示刻度和标签，保持整数
+        axisLabel: {
+          show: true,
+          color: '#333',
+          formatter: (value: number) => `${Math.round(value)} ℃` // 取整并显示单位
+        },
+        axisTick: {
+          show: true
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#333'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'solid'
+          }
+        },
+        // 确保 Y 轴刻度为整数
+        minInterval: 1,
+        maxInterval: 1
+      }
+    ],
+    series: [
+      {
+        name: _legendData[0],
+        data: hasData
+          ? echartsData.value?.map((item: any) => item.wt) || []
+          : [],
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        lineStyle: {
+          width: 2
+        }
+      }
+    ]
+  };
+  // 使用完全替换模式更新配置
+  chartInstance.setOption(option, true);
+};
+
+/**
+ * 处理窗口大小变化
+ */
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+/**
+ * 处理数据点点击事件
+ */
+const handleDataPointClick = (params: any) => {
+  console.log('=== 数据点点击事件 ===');
+  console.log('点击参数:', params);
+
+  if (!params || !params.dataIndex) {
+    console.warn('无效的数据点点击');
+    return;
+  }
+
+  const dataIndex = params.dataIndex;
+  const dataItem = echartsData.value[dataIndex];
+
+  if (dataItem) {
+    console.log('点击的数据:', {
+      日期: dataItem.dt,
+      水温: dataItem.wt,
+      测站代码: dataItem.stcd,
+      索引: dataIndex
+    });
+    modelStore.modalVisible = true;
+    modelStore.params.sttp = 'WT';
+    modelStore.title = '水温监测';
+    modelStore.params.stcd = dataItem.stcd;
+    modelStore.showStcdSelector = true;
+    modelStore.stcdOptions = select.value.options;
+    modelStore.filter.rangeTm = [
+      dayjs(dataItem.dt).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+      dayjs(dataItem.dt).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+    ];
+  }
+};
+
+/**
+ * 加载模拟数据
+ */
+const loadData = async () => {
+  try {
+    // 生成模拟数据
+    echartsData.value = generateMockData();
+
+    // 数据加载完成后更新图表
+    await nextTick();
+    updateChart();
+  } catch (error) {
+    console.error('加载水温数据失败:', error);
+  }
+};
+
+/**
+ * 加载图表数据
+ * @param startDate 开始日期 (格式: YYYY-MM-DD HH:mm:ss)
+ * @param endDate 结束日期 (格式: YYYY-MM-DD HH:mm:ss)
+ * @param stcd 测站代码
+ */
+const getChartData = async (
+  startDate: string,
+  endDate: string,
+  stcd: string
+) => {
+  try {
+    console.log('=== 开始加载图表数据 ===');
+    console.log('请求参数:', { startDate, endDate, stcd });
+
+    // 设置 loading 状态
+    loading.value = true;
+    hasData.value = false;
+
+    // TODO: 实现API调用逻辑
+    // 参考选中的代码结构，构建请求参数
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'DT',
+            operator: 'gte',
+            value: startDate // 例如: "2026-05-01 00:00:00"
+          },
+          {
+            field: 'DT',
+            operator: 'lte',
+            value: endDate // 例如: "2026-06-30 23:59:59"
+          },
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: stcd
+          }
+        ]
+      },
+      sort: [
+        {
+          field: 'dt',
+          dir: 'asc'
+        }
+      ]
+    };
+
+    // 调用实际的API获取数据
+    const res = await sdrvwtsGetKendoList(params);
+    console.log('API返回结果:', res);
+
+    let data = res?.data?.data || [];
+    console.log('原始数据条数:', data.length);
+
+    // 处理空数据情况
+    if (!data || data.length === 0) {
+      echartsData.value = [];
+      hasData.value = false;
+      await nextTick();
+      updateChart();
+      console.warn('未查询到水温数据');
+      return;
+    }
+
+    // 转换数据格式：提取日期部分用于X轴显示，并进行数据验证和类型转换
+    echartsData.value = data
+      .map(item => {
+        // 验证必要字段
+        if (!item.dt || typeof item.dt !== 'string') {
+          console.warn('无效的日期数据:', item);
+          return null;
+        }
+
+        // 确保 wt 是数值类型
+        const wt = typeof item.wt === 'number' ? item.wt : parseFloat(item.wt);
+        if (isNaN(wt)) {
+          console.warn('无效的水温数据:', item);
+          return null;
+        }
+
+        return {
+          dt: item.dt.substring(0, 10), // 提取 "2026-05-02" 格式
+          wt: wt, // 确保是 number 类型
+          stcd: item.stcd || stcd // 保留 stcd 字段，如果 API 返回中没有则使用传入的 stcd
+        };
+      })
+      .filter(Boolean); // 过滤掉无效数据
+
+    console.log('转换后的图表数据:', echartsData.value);
+    console.log('数据类型检查:', {
+      第一条数据: echartsData.value[0],
+      dt类型: typeof echartsData.value[0]?.dt,
+      wt类型: typeof echartsData.value[0]?.wt,
+      wt값: echartsData.value[0]?.wt
+    });
+
+    // 判断是否有数据
+    hasData.value = echartsData.value.length > 0;
+    console.log('hasData 设置为:', hasData.value);
+
+    // 数据加载完成后更新图表
+    await nextTick();
+    updateChart();
+    console.log('✅ 图表数据加载完成');
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+    hasData.value = false;
+  } finally {
+    // 关闭 loading 状态
+    await nextTick();
+    console.log('关闭 loading 状态');
+    loading.value = false;
+  }
+};
+
+/**
+ * 将 YY-MM 格式转换为完整的日期时间范围
+ * @param dateRange ['26-05', '26-06'] 格式的数组
+ * @returns { startDate: string, endDate: string } 格式化后的日期范围
+ */
+const convertDateRange = (dateRange: string[]) => {
+  if (!dateRange || dateRange.length !== 2) {
+    return null;
+  }
+  //
+
+  const [startStr, endStr] = dateRange;
+
+  // 获取今天的日期（日部分）
+  const today = new Date();
+  const currentDay = today.getDate();
+
+  // 解析开始日期 YY-MM
+  const [startYearStr, startMonthStr] = startStr.split('-');
+  const startYear = parseInt(startYearStr);
+  const startMonth = parseInt(startMonthStr);
+  const fullStartYear = startYear < 100 ? 2000 + startYear : startYear;
+
+  // 解析结束日期 YY-MM
+  const [endYearStr, endMonthStr] = endStr.split('-');
+  const endYear = parseInt(endYearStr);
+  const endMonth = parseInt(endMonthStr);
+  const fullEndYear = endYear < 100 ? 2000 + endYear : endYear;
+
+  // 开始日期：基于第一个值的年月 + 今天的日期 + 00:00:00
+  // 需要处理月份天数边界问题（如今天是31号，但2月只有28天）
+  const startMonthLastDay = new Date(fullStartYear, startMonth, 0).getDate();
+  const actualStartDay = Math.min(currentDay, startMonthLastDay);
+  const startDate = `${fullStartYear}-${String(startMonth).padStart(
+    2,
+    '0'
+  )}-${String(actualStartDay).padStart(2, '0')} 00:00:00`;
+
+  // 结束日期：基于第二个值的年月 + 今天的日期 + 23:59:59
+  // 同样需要处理月份天数边界问题
+  const endMonthLastDay = new Date(fullEndYear, endMonth, 0).getDate();
+  const actualEndDay = Math.min(currentDay, endMonthLastDay);
+  const endDate = `${fullEndYear}-${String(endMonth).padStart(2, '0')}-${String(
+    actualEndDay
+  ).padStart(2, '0')} 23:59:59`;
+
+  return {
+    startDate,
+    endDate
+  };
+};
+
+const handlePanelChange1 = async data => {
+  console.log('=== 用户交互触发 ===');
+  console.log('当前所有控件状态:', data);
+  // scopeDate: ['26-05', '26-06']
+  // select: "0836000011"
+  if (data.scopeDate && data.scopeDate.length > 0 && data.select) {
+    console.log('参数验证通过，开始加载数据');
+    // 转换日期格式并加载数据
+    const dateRange = convertDateRange(data.scopeDate);
+    if (dateRange) {
+      console.log('日期转换结果:', dateRange);
+      await getChartData(dateRange.startDate, dateRange.endDate, data.select);
+    } else {
+      console.error('日期转换失败');
+    }
+  } else {
+    loading.value = false;
+    hasData.value = false;
+    // 清空图表数据
+    echartsData.value = [];
+    // 更新图表显示空状态
+    await nextTick();
+    updateChart();
+    console.warn('参数不完整:', {
+      scopeDate: data.scopeDate,
+      select: data.select
+    });
+  }
+};
+//获取水温监测下拉框
+const getselsectData = async () => {
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        baseid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: baseid.value
+            }
+          : null,
+        {
+          field: 'fhstcd',
+          operator: 'isnotnull'
+        },
+        {
+          logic: 'or',
+          filters: [
+            {
+              field: 'sttpCode',
+              operator: 'eq',
+              dataType: 'string',
+              value: 'WTRV'
+            }
+          ]
+        }
+      ].filter(Boolean)
+    },
+    select: ['stcd', 'stnm', 'fhstcd', 'fhstnm', 'sttpCode']
+  };
+  let res = await msstbprptGetKendoList(params);
+  console.log(res);
+  if (!res?.data?.data || res.data.data.length == 0) {
+    select.value.value = '';
+    select.value.options = [];
+    return;
+  }
+
+  select.value.value = res.data.data[0].stcd;
+  select.value.options = res.data.data.map((item: any) => {
+    return {
+      label: item.stnm,
+      value: item.stcd
+    };
+  });
+  //
+};
+////
+// 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
+const injectedStation = inject<any>('dianZhanStation', null);
+const stationSource = computed(
+  () => injectedStation?.value || JidiSelectEventStore.selectedItem
+);
+
+watch(
+  () => stationSource.value,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getselsectData();
+  },
+  { deep: true, immediate: true }
+);
+
+// ==================== ppbclTagList 配置 ====================
+const MODULE_PATH = '@/modules/qixidishuiwenbianhua/index.vue';
+
+const ppbclConfigMap = inject<
+  Ref<Record<string, { isShow: number; tagValue: string }>>
+>('ppbclConfigMap', ref({}));
+
+/** 根据 tagValue 计算默认日期范围（YY-MM 格式） */
+function getDateRangeFromTagValue(tagValue: string): [string, string] | null {
+  const now = dayjs();
+  let start: dayjs.Dayjs;
+
+  switch (tagValue) {
+    case '7d':
+      start = now.subtract(7, 'day');
+      break;
+    case '1M':
+      start = now.subtract(1, 'month');
+      break;
+    case 'a1M':
+      start = now.subtract(1, 'month').startOf('month');
+      break;
+    case '3M':
+      start = now.subtract(3, 'month');
+      break;
+    case 'a3M':
+      start = now.subtract(3, 'month').startOf('month');
+      break;
+    case '1y':
+      start = now.subtract(1, 'year');
+      break;
+    case '3y':
+      start = now.subtract(3, 'year');
+      break;
+    case '5y':
+      start = now.subtract(5, 'year');
+      break;
+    default:
+      return null;
+  }
+
+  return [start.format('YYYY-MM'), now.format('YYYY-MM')];
+}
+
+watch(
+  () => ppbclConfigMap?.value?.[MODULE_PATH],
+  config => {
+    if (config) {
+      // isShow 控制时间选择器显隐
+      datetimePicker.value.show = config.isShow !== 0;
+
+      // tagValue 设置默认时间范围
+      if (config.tagValue) {
+        const dateRange = getDateRangeFromTagValue(config.tagValue);
+        if (dateRange) {
+          datetimePicker.value.value = dateRange;
+        }
+      }
+    }
+  },
+  { immediate: true }
+);
+
+// ==================== 生命周期钩子 ====================
+
+// 页面加载时执行
+onMounted(() => {
+  // 双重等待确保DOM和样式计算完成
+  nextTick(() => {
+    setTimeout(() => {
+      // 校验容器尺寸
+      if (chartRef.value) {
+        const rect = chartRef.value.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+          initChart();
+          // 注释掉模拟数据加载，等待用户交互后加载真实数据
+          // loadData();
+          console.log('✅ 图表初始化完成，等待用户交互加载数据');
+        } else {
+          console.warn('图表容器尺寸为0，启动重试机制');
+          // 指数退避重试
+          let retryCount = 0;
+          const maxRetries = 5;
+          const retryInit = () => {
+            if (retryCount < maxRetries) {
+              retryCount++;
+              setTimeout(() => {
+                const newRect = chartRef.value?.getBoundingClientRect();
+                if (newRect && newRect.width > 0 && newRect.height > 0) {
+                  initChart();
+                  // loadData();
+                  console.log('✅ 图表初始化完成（重试成功）');
+                } else {
+                  retryInit();
+                }
+              }, 50 * Math.pow(2, retryCount));
+            } else {
+              console.error('图表容器初始化失败，已达到最大重试次数');
+            }
+          };
+          retryInit();
+        }
+      }
+    }, 50);
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 移除事件监听
+  window.removeEventListener('resize', handleResize);
+
+  // 销毁图表实例
+  if (chartInstance) {
+    // 解绑数据点点击事件
+    chartInstance.off('click', handleDataPointClick);
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.chart-wrapper {
+  width: 100%;
+  height: 231px;
+  min-height: 231px;
+  position: relative;
+  /* 为empty-overlay提供定位上下文 */
+
+  .water-temp-chart {
+    width: 100% !important;
+    height: 100% !important;
+    min-width: 100%;
+    min-height: 231px;
+  }
+
+  .empty-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255);
+    z-index: 10;
+  }
+}
+:deep(.ant-spin-nested-loading > div > .ant-spin) {
+  background: rgba(255, 255, 255) !important;
+}
+</style>
diff --git a/frontend/src/modules/rightSearchDrawer/basicInfo/config.ts b/frontend/src/modules/rightSearchDrawer/basicInfo/config.ts
index befec479..71e8ea8a 100644
--- a/frontend/src/modules/rightSearchDrawer/basicInfo/config.ts
+++ b/frontend/src/modules/rightSearchDrawer/basicInfo/config.ts
@@ -123,12 +123,17 @@ const VPInfo = [
   },
   {
     label: '保护对象',
-    value: 'protObj',
+    value: 'protobj',
     col: 24
   },
   {
     label: '保护方式',
-    value: 'bhfs',
+    value: 'protmthd',
+    col: 24
+  },
+  {
+    label: '站址',
+    value: 'stlc',
     col: 24
   }
 ];
@@ -150,7 +155,7 @@ const VAInfo = [
   },
   {
     label: '保护方式',
-    value: 'bhfs',
+    value: 'protmthd',
     col: 24
   }
 ];
@@ -279,7 +284,7 @@ const VDInfo = [
   {
     label: '监控内容类型',
     value: 'sttpName',
-    col: 12
+    col: 24
   },
   {
     label: '所属行政区',
@@ -343,7 +348,7 @@ const FHInfo = [
 ];
 // ai视频
 const AIVDInfo = [
-    {
+  {
     label: '监控点名',
     value: 'stnm',
     col: 24
@@ -353,7 +358,7 @@ const AIVDInfo = [
     value: 'stindx',
     col: 12
   },
-   {
+  {
     label: '监控内容类型',
     value: 'sttpName',
     col: 12
@@ -373,25 +378,65 @@ const AIVDInfo = [
     value: 'stlc',
     col: 24
   }
-]
-////调查断面
+];
+//调查断面
 const WEInfo = [
-   {
+  {
     label: '断面名称',
     value: 'stnm',
     col: 24
   },
-   {
+  {
     label: '站址',
     value: 'stlc',
     col: 24
   },
-   {
+  {
     label: '所在河段',
     value: 'hbrvcdName',
     col: 24
+  }
+];
+//野生动物监测
+const WVAInfo = [
+  {
+    label: '测站名称',
+    value: 'stnm',
+    col: 24
   },
-]
+  {
+    label: '测站类型',
+    value: 'sttpName',
+    col: 24
+  },
+  {
+    label: '监测方式',
+    value: 'mwayName',
+    col: 24
+  }
+];
+const FPRDInfo = [
+  {
+    label: '监控点名',
+    value: 'stnm',
+    col: 24
+  },
+  {
+    label: '监控点类型',
+    value: 'stindx',
+    col: 24
+  },
+  {
+    label: '监控点地址',
+    value: 'stlc',
+    col: 24
+  },
+  {
+    label: '所属流域',
+    value: 'hbrvcdName',
+    col: 24
+  }
+];
 export {
   ENGInfo,
   DWInfo,
@@ -405,5 +450,7 @@ export {
   VDInfo,
   FHInfo,
   AIVDInfo,
-  WEInfo
+  WEInfo,
+  WVAInfo,
+  FPRDInfo
 };
diff --git a/frontend/src/modules/rightSearchDrawer/basicInfo/index.vue b/frontend/src/modules/rightSearchDrawer/basicInfo/index.vue
index b7a90fc8..4117ea32 100644
--- a/frontend/src/modules/rightSearchDrawer/basicInfo/index.vue
+++ b/frontend/src/modules/rightSearchDrawer/basicInfo/index.vue
@@ -47,10 +47,12 @@ import {
   WTInfo,
   WQInfo,
   ZQInfo,
-  VDInfo,// 视频
+  VDInfo, // 视频
   FHInfo, //鱼类栖息地
   AIVDInfo, // AI视频
-  WEInfo//调查断面
+  WEInfo, //调查断面
+  WVAInfo, //野生动物监测
+  FPRDInfo //鱼类调查装置
 } from './config.js';
 import { getStcdDetail } from '@/api/mapModal';
 
@@ -77,8 +79,10 @@ const moduleMap = {
   WQFBInfo: WQInfo,
   WQFPInfo: WQInfo,
   FHInfo: FHInfo,
-  AIVDInfo:AIVDInfo,
-  WEInfo:WEInfo,
+  AIVDInfo: AIVDInfo,
+  WEInfo: WEInfo,
+  WVAInfo: WVAInfo,
+  FPRDInfo: FPRDInfo
 } as const;
 watch(
   () => modelStore.selectedAnchorPoint,
diff --git a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue
index c152ab18..03ada929 100644
--- a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue
+++ b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <SidePanelItem title="电站运行过程线" :shrink="false">
+  <SidePanelItem title="电站监测数据" :shrink="false">
     <template #title-right-content>
       <a-range-picker
         class="w-[220px]"
@@ -22,6 +22,19 @@
           class="chart-empty"
         />
       </div>
+      <div class="monitor-table">
+        <BasicTable
+          ref="tableRef"
+          :scrollY="240"
+          :scrollX="tableScrollX"
+          :columns="tableColumns"
+          :data="tableData"
+          :paginationConfig="{
+            showSizeChanger: false,
+            showQuickJumper: false
+          }"
+        />
+      </div>
     </a-spin>
   </SidePanelItem>
 </template>
@@ -34,6 +47,7 @@ import { useUiStore } from '@/store/modules/ui';
 import { getMonitorData } from '@/api/mapModal';
 import { useModelStore } from '@/store/modules/model';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import BasicTable from '@/components/BasicTable/index.vue';
 import { DateSetting } from '@/utils/enumeration';
 
 const uiStore = useUiStore();
@@ -41,6 +55,8 @@ const modelStore = useModelStore();
 
 const isLoading = ref(false);
 const chartData = ref<any[]>([]);
+const tableData = ref<any[]>([]);
+const tableRef = ref<any>();
 
 // ==================== 图表 ====================
 const chartRef = ref<HTMLElement>();
@@ -366,6 +382,70 @@ const initDateRange = (): [Dayjs, Dayjs] => {
 };
 const dateRange = ref<[Dayjs, Dayjs] | undefined>(initDateRange());
 
+// ==================== 表格 ====================
+// 空值兜底：null/undefined/空串/'-'占位符/NaN 均显示为 '-'
+const formatCell = (
+  text: any,
+  formatter: (num: number) => string = num => String(num)
+) => {
+  if (text === null || text === undefined || text === '' || text === '-') {
+    return '-';
+  }
+  const num = Number(text);
+  if (Number.isNaN(num)) return '-';
+  return formatter(num);
+};
+
+// 表格列配置（与 MapModal/MonitorInfo 保持一致）
+const tableColumns = [
+  {
+    title: '时间',
+    dataIndex: 'tm',
+    width: 150,
+    fixed: 'left',
+    customRender: ({ text }: any) =>
+      text && text !== '-' ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'
+  },
+  {
+    title: '坝上水位(m)',
+    dataIndex: 'rz',
+    width: 100,
+    customRender: ({ text }: any) => formatCell(text, v => v.toFixed(2))
+  },
+  {
+    title: '坝下水位(m)',
+    dataIndex: 'dz',
+    width: 100,
+    customRender: ({ text }: any) => formatCell(text, v => v.toFixed(2))
+  },
+  {
+    title: '入库流量(m³/s)',
+    dataIndex: 'qi',
+    width: 120,
+    customRender: ({ text }: any) =>
+      formatCell(text, v => String(Math.round(v)))
+  },
+  {
+    title: '出库流量(m³/s)',
+    dataIndex: 'qo',
+    width: 120,
+    customRender: ({ text }: any) => formatCell(text, v => String(v))
+  },
+  {
+    title: '生态流量(m³/s)',
+    dataIndex: 'qec',
+    width: 120,
+    customRender: ({ text }: any) => formatCell(text, v => v.toFixed(1))
+  },
+  {
+    title: '生态流量限值(m³/s)',
+    dataIndex: 'qecLimit',
+    width: 140,
+    customRender: ({ text }: any) => formatCell(text, v => v.toFixed(1))
+  }
+];
+const tableScrollX = tableColumns.reduce((s, c) => s + (c.width || 100), 0);
+
 // 数据请求（查询参数取 modelStore.selectedAnchorPoint）
 const fetchData = async () => {
   const stcd = modelStore.selectedAnchorPoint?.stcd;
@@ -404,9 +484,11 @@ const fetchData = async () => {
     const rawData = res?.data?.data || res?.data?.records || [];
 
     chartData.value = rawData;
+    tableData.value = [...rawData].reverse();
   } catch (error) {
     console.error('获取数据失败:', error);
     chartData.value = [];
+    tableData.value = [];
   } finally {
     isLoading.value = false;
   }
@@ -462,4 +544,13 @@ watch(
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.monitor-table {
+  margin-top: 12px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  .table-container {
+    border: 1px solid #dcdfe6;
+  }
+}
 </style>
diff --git a/frontend/src/modules/rightSearchDrawer/speciesIntro/index.vue b/frontend/src/modules/rightSearchDrawer/speciesIntro/index.vue
new file mode 100644
index 00000000..546ee726
--- /dev/null
+++ b/frontend/src/modules/rightSearchDrawer/speciesIntro/index.vue
@@ -0,0 +1,128 @@
+<!--
+  物种介绍（动物/植物介绍）面板：
+  - 面板标题根据当前生态调查菜单动态展示（水生生态调查→鱼类介绍，陆生生态调查→动物介绍）
+  - 右上角下拉框（title-right-content 插槽）选项为上方鱼种/动物种多选框已选中的数据，默认展示第一条
+  - 主体区域只展示当前选中物种：上方图片、下方文字描述
+  - 数据来自 modelStore.selectedFishSpecies（预留 image / intro 字段，后续对接真实数据）
+-->
+<template>
+  <SidePanelItem :title="panelTitle" :shrink="false">
+    <template #title-right-content>
+      <a-select
+        v-model:value="currentValue"
+        size="small"
+        style="width: 110px"
+        placeholder="请选择"
+        :options="speciesOptions"
+      />
+    </template>
+    <a-empty v-if="!currentSpecies" description="请先在上方选择物种" />
+    <div v-else class="species-card">
+      <!-- 上方：图片 -->
+      <a-image
+        v-if="currentSpecies.image"
+        class="species-image"
+        :src="currentSpecies.image"
+        :preview="false"
+      />
+      <div v-else class="species-image species-image--empty">
+        <span>暂无图片</span>
+      </div>
+      <!-- 下方：文字描述 -->
+      <div class="species-info">
+        <div class="species-name">{{ currentSpecies.label }}</div>
+        <div class="species-desc">
+          {{ currentSpecies.intro || '暂无描述' }}
+        </div>
+      </div>
+    </div>
+  </SidePanelItem>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useModelStore } from '@/store/modules/model';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+
+const modelStore = useModelStore();
+const route = useRoute();
+
+// 面板标题：根据当前菜单展示对应介绍（水生→鱼类，陆生→动物）
+const panelTitle = computed(() => {
+  if (route.path.includes('shengTaiDiaoCha/shuiShengShengTaiDiaoCha')) {
+    return '鱼类介绍';
+  }
+  if (route.path.includes('shengTaiDiaoCha/luShengShengTaiDiaoCha')) {
+    return '动物介绍';
+  }
+  return '物种介绍';
+});
+
+// 右上角下拉框选项 = 上方多选框已选中的物种
+const speciesOptions = computed(() =>
+  (modelStore.selectedFishSpecies || []).map(item => ({
+    label: item.label,
+    value: item.value
+  }))
+);
+
+const currentValue = ref<string | undefined>();
+
+// 当前展示的物种（默认第一条）
+const currentSpecies = computed(() =>
+  speciesOptions.value.find(item => item.value === currentValue.value)
+);
+
+// 已选物种变化时，默认选中第一条
+watch(
+  () => modelStore.selectedFishSpecies,
+  list => {
+    currentValue.value = (list || [])[0]?.value;
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.species-card {
+  border: 1px solid #e5edf3;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.species-image {
+  display: block;
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  background: #f5f5f5;
+}
+
+.species-image--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #bfbfbf;
+  font-size: 14px;
+}
+
+.species-info {
+  padding: 10px 12px 12px;
+}
+
+.species-name {
+  font-size: 15px;
+  font-weight: 500;
+  color: #2f6b98;
+  margin-bottom: 6px;
+}
+
+.species-desc {
+  font-size: 13px;
+  line-height: 22px;
+  color: #595959;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+</style>
diff --git a/frontend/src/modules/shengTaiHuangJingBuMod/index.vue b/frontend/src/modules/shengTaiHuangJingBuMod/index.vue
new file mode 100644
index 00000000..c7faac46
--- /dev/null
+++ b/frontend/src/modules/shengTaiHuangJingBuMod/index.vue
@@ -0,0 +1,494 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <div>
+    <SidePanelItem title="生态环境部门要求生态流量达标情况">
+      <!-- <div class="body_topOne">
+        <a-radio-group v-model:value="mode" @change="dataChage">
+          <a-radio-button value="hour">逐时</a-radio-button>
+          <a-radio-button value="day">日</a-radio-button>
+        </a-radio-group>
+      </div> -->
+      <div class="body_title">逐日</div>
+      <div class="body_main">
+        <div class="body_div" v-for="(i, index) in dataArr" :key="index">
+          <div class="body_div_icon">
+            <img :src="i.icon" alt="" />
+          </div>
+          <div class="body_div_text">{{ i.qecCnt }}</div>
+          <div class="body_div_text_sub">
+            {{ i.text }}
+            <span> (座) </span>
+          </div>
+        </div>
+      </div>
+      <div class="body_title">逐时</div>
+      <div class="body_main">
+        <div class="body_div" v-for="(i, index) in dataArr" :key="index">
+          <div class="body_div_icon">
+            <img :src="i.icon" alt="" />
+          </div>
+          <div class="body_div_text">{{ i.qecCnt }}</div>
+          <div class="body_div_text_sub">
+            {{ i.text }}
+            <span> (座) </span>
+          </div>
+        </div>
+      </div>
+      <!-- <a-spin :spinning="spinning">
+        <div>
+          <div v-for="el in datalist" @click="handleBarClick(el)">
+            <div :key="el.key">
+              <div class="boy_one">
+                <div style="flex: 1; white-space: nowrap; margin-right: 5px">
+                  {{ el.name }}
+                </div>
+                <img style="flex: 1" src="@/assets/components/fgx.svg" alt="" />
+              </div>
+              <div class="body_zhu">
+                <div class="body_biao">
+                  <div v-for="value in allArr">
+                    <div :key="value" class="nei_body">
+                      <div
+                        v-if="
+                          value <
+                          (el?.key == null
+                            ? 1
+                            : el.qecTCnt == 0
+                            ? 0
+                            : el.qecCnt / el.qecTCnt) *
+                            20
+                        "
+                        class="little_body"
+                        :style="{ backgroundColor: el.color }"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="body_text">{{ el.qecCnt }}/{{ el.qecTCnt }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-spin> -->
+    </SidePanelItem>
+
+    <!-- 自定义弹框 -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="'生态流量达标情况'"
+      width="1536px"
+      :footer="null"
+    >
+      <STLLXFFS
+        v-if="modalVisible"
+        :options="list"
+        :typeKey="selectedItem.key"
+        :time="mode"
+        :basicId="baseid"
+        :dateArr="dateArr"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, inject, computed, defineOptions } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import {
+  qgcetQgcStaticData,
+  evnmAutoMonitorGetKendoListCust
+} from '@/api/stll';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { useMapViewStore } from '@/modules/map/stores/map-view.store';
+import STLLXFFS from '@/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
+import { useDraggable } from '@/utils/drag';
+import icon from '@/assets/icons/client.svg';
+// 定义组件名（便于调试和递归）
+defineOptions({
+  name: 'shengtaidabiaoMod'
+});
+const JidiSelectEventStore = useJidiSelectEventStore();
+const mapViewStore = useMapViewStore();
+const baseid = ref('');
+const dateArr = ref<any[]>([]);
+
+const mode = ref('hour');
+const dataArr: any = ref([
+  {
+    qecCnt: '0', // 座数
+    qecTCnt: '0', //总座数
+    icon: icon,
+    text: '达标',
+    type: 1,
+    key: 'qecInterval'
+  },
+  {
+    icon: icon,
+    qecCnt: '0', // 座数
+    qecTCnt: '0', //总座数
+    text: '不达标',
+    type: 1,
+    key: 'qecInterval'
+  },
+  {
+    icon: icon,
+    qecCnt: '0', // 座数
+    qecTCnt: '0', //总座数
+    text: '无数据',
+    type: 1,
+    key: 'qecInterval'
+  }
+]);
+// const dataArr: any = ref([
+//   {
+//     name: '生态环境部门要求',
+//     qecCnt: '0', // 座数
+//     qecTCnt: '0', //总座数
+//     type: 1,
+//     key: 'qecInterval'
+//   },
+//   {
+//     name: '水利部门要求',
+//     qecCnt: '0', // 座数
+//     qecTCnt: '0', //总座数
+//     type: 2,
+//     key: 'mwrInterval'
+//   }
+// ]);
+const list: any = ref([
+  { name: '生态环境部门要求', type: 1, color: '#77C300', key: 'qecInterval' },
+  { name: '水利部门要求', type: 2, color: '#56C3E3', key: 'mwrInterval' },
+  { name: '多年平均流量 10%', type: 3, color: '#F76B01', key: 'avqInterval' },
+  { name: '无生态流量要求', type: 4, color: '#B4B4B4', key: null }
+]);
+const datalist: any = ref([]);
+const allArr: any = ref(Array.from({ length: 20 }, (_, i) => i));
+const spinning = ref(false);
+const modalVisible = ref(false);
+const selectedItem = ref<any>(null);
+
+// 启用弹窗拖拽（限制在可视区域内）
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+
+// 处理进度条点击事件
+const handleBarClick = (item: any) => {
+  selectedItem.value = item;
+  modalVisible.value = true;
+};
+
+// 根据 type 将 list 中的数据合并到 dataArr 中
+const setStyle = () => {
+  if (dataArr.value.length == 0) {
+    return false;
+  }
+  dataArr.value.forEach((item: any) => {
+    // 在 list 中找到 type 匹配的数据
+    const matched = list.value.find(
+      (listItem: any) => listItem.type === item.type
+    );
+    if (matched) {
+      // 合并数据，dataArr 的属性优先
+      datalist.value.push({
+        ...matched,
+        ...item
+      });
+    }
+  });
+  console.log(datalist.value);
+};
+const dataChage = () => {
+  getData();
+};
+const getdate = (offsetYears = 0) => {
+  const formatDate = (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  let startDate: string;
+  let endDate: string;
+
+  if (dateArr.value && dateArr.value.length === 2) {
+    const start = new Date(dateArr.value[0]);
+    const end = new Date(dateArr.value[1]);
+    if (offsetYears !== 0) {
+      start.setFullYear(start.getFullYear() + offsetYears);
+      end.setFullYear(end.getFullYear() + offsetYears);
+    }
+    startDate = `${formatDate(start)} 00:00:00`;
+    endDate = `${formatDate(end)} 23:59:59`;
+  } else {
+    const now = new Date();
+    const oneMonthAgo = new Date(now);
+    oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
+    if (offsetYears !== 0) {
+      now.setFullYear(now.getFullYear() + offsetYears);
+      oneMonthAgo.setFullYear(oneMonthAgo.getFullYear() + offsetYears);
+    }
+    startDate = `${formatDate(oneMonthAgo)} 00:00:00`;
+    endDate = `${formatDate(now)} 23:59:59`;
+  }
+
+  return { startDate, endDate };
+};
+
+const getData = async () => {
+  const { startDate, endDate } = getdate(0);
+
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        baseid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: baseid.value
+            }
+          : null,
+        {
+          field: 'dtin',
+          operator: 'eq',
+          dataType: 'string',
+          value: '1'
+        },
+        {
+          field: 'type',
+          operator: 'eq',
+          dataType: 'string',
+          value: mode.value
+        },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: startDate
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: endDate
+        }
+      ].filter(Boolean)
+    }
+  };
+
+  spinning.value = true;
+  try {
+    let res = await qgcetQgcStaticData(params);
+    // 根据API响应结构规范处理数据
+    if (res.data && res.data.list) {
+      const apiList = res.data.list;
+      //
+      // 只使用前两条数据（type: 1 和 type: 2）
+      // if (apiList && apiList.length > 0) {
+      //   dataArr.value = apiList.slice(0, 2).map((item: any) => ({
+      //     //   name: item.typeName || item.desc,
+      //     qecCnt: item.qecCnt,
+      //     qecTCnt: item.qecTCnt,
+      //     type: item.type
+      //   }));
+
+      //   // 清空旧数据并重新合并样式
+      //   datalist.value = [];
+      //   setStyle();
+      // } else {
+      //   // 无数据场景处理
+      //   dataArr.value = [];
+      //   datalist.value = [];
+      // }
+    }
+  } catch (error) {
+    console.error('获取生态流量达标数据失败:', error);
+  } finally {
+    spinning.value = false;
+  }
+};
+// 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
+const injectedStation = inject<any>('dianZhanStation', null);
+const stationSource = computed(
+  () => injectedStation?.value || JidiSelectEventStore.selectedItem
+);
+
+watch(
+  () => stationSource.value,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
+      getData();
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => mapViewStore.searchTimeRange,
+  newVal => {
+    dateArr.value = newVal;
+    getData();
+  },
+  { deep: true }
+);
+
+//统计电站范围：接入过生态流量数据的电站
+const titleData: any = ref({ cnt: 0 });
+const getcont = async () => {
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'showIds',
+          operator: 'in',
+          value: ['7']
+        }
+      ]
+    }
+  };
+  let res = await evnmAutoMonitorGetKendoListCust(params);
+  let list = res?.data?.data[0];
+  if (list) {
+    titleData.value = list;
+  }
+  //
+};
+// 页面加载时执行的逻辑
+onMounted(() => {
+  setStyle();
+  getcont();
+});
+</script>
+
+<style lang="scss" scoped>
+.body_topOne {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.boy_one {
+  display: flex;
+  align-items: center;
+  margin: 5px 0px;
+}
+.body_title {
+  font-size: 14px;
+  font-weight: bold;
+  padding-left: 10px;
+  margin-left: 4px;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 0;
+    width: 4px;
+    height: 14px;
+    background-color: #2f6b98;
+  }
+}
+.body_main {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  padding: 6px 10px;
+  justify-content: space-between;
+  .body_div {
+    width: 33%;
+    height: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    background-color: #f3f5fa;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 4px;
+    .body_div_icon {
+      width: 30px;
+      height: 30px;
+      margin-bottom: 5px;
+    }
+    .body_div_text {
+      font-size: 28px;
+      font-weight: 500;
+      margin: 10px 0;
+    }
+    .body_div_text_sub {
+      font-size: 14px;
+      font-weight: 400;
+      span {
+        color: #949494;
+      }
+    }
+  }
+}
+.body_zhu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  .body_biao {
+    width: 100%;
+    height: 52px;
+    border: 1px solid #ccdae7;
+    border-radius: 2px;
+    display: flex;
+    padding: 5px 1px;
+    overflow: hidden;
+
+    .nei_body {
+      width: 12px;
+      height: 100%;
+      border: 1px solid #ccdae7;
+      padding: 2px;
+      margin-left: 4px;
+
+      .little_body {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .body_text {
+    display: flex;
+    flex-direction: column;
+    width: 90px;
+    height: 100%;
+    justify-content: space-around;
+    margin-left: 6px;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 500;
+  }
+}
+
+.ant-radio-group {
+  // border: 3px solid #2f6b98 !important;
+  // border-radius: 10px !important;
+
+  .ant-radio-button-wrapper-checked {
+    border: 1px solid #2f6b98 !important;
+    background-color: #2f6b98 !important;
+    color: #fff !important;
+  }
+
+  .ant-radio-button-wrapper {
+    border: 2px solid #2f6b98 !important;
+  }
+
+  .ant-radio-button-wrapper-checked :before {
+    background-color: #2f6b98 !important;
+  }
+}
+</style>
diff --git a/frontend/src/modules/shengtaidabiaoMod/index.vue b/frontend/src/modules/shengtaidabiaoMod/index.vue
index e6518c7f..cf4cc53c 100644
--- a/frontend/src/modules/shengtaidabiaoMod/index.vue
+++ b/frontend/src/modules/shengtaidabiaoMod/index.vue
@@ -1,9 +1,9 @@
 <!-- SidePanelItem.vue -->
-<template> 
+<template>
   <div>
     <SidePanelItem title="生态流量达标情况" :click-action="{ show: true }">
       <!-- 使用插槽自定义点击提示的内容 -->
-      <template #click-action-content> 
+      <template #click-action-content>
         <div v-if="titleData.cnt" style="max-width: 300px; line-height: 1.6">
           <p>
             1、统计电站范围：接入过生态流量数据的电站
@@ -303,7 +303,9 @@ const getData = async () => {
 };
 // 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
 const injectedStation = inject<any>('dianZhanStation', null);
-const stationSource = computed(() => injectedStation?.value || JidiSelectEventStore.selectedItem);
+const stationSource = computed(
+  () => injectedStation?.value || JidiSelectEventStore.selectedItem
+);
 
 watch(
   () => stationSource.value,
@@ -318,8 +320,7 @@ watch(
 
 watch(
   () => mapViewStore.searchTimeRange,
-  (newVal) => {
-    
+  newVal => {
     dateArr.value = newVal;
     getData();
   },
diff --git a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
index fc8f2229..a2f22b0b 100644
--- a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
+++ b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
@@ -65,7 +65,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import * as echarts from 'echarts';
 import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
 import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
-import STLLXFFS from './TwoLayer/STLLXFFS.vue'
+import STLLXFFS from './TwoLayer/STLLXFFS.vue';
 import { useMapViewStore } from '@/modules/map/stores/map-view.store';
 import { useDraggable } from '@/utils/drag';
 
@@ -79,7 +79,7 @@ const chartRef = ref<HTMLElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 const mapViewStore = useMapViewStore();
 // 动态数据存储
-let dateArr = ref<any[]>([]); 
+let dateArr = ref<any[]>([]);
 const chartData = ref<{
   categories: string[];
   currentData: number[];
@@ -312,7 +312,7 @@ const initChart = () => {
 const handleChartClick = (params: any) => {
   const categoryName = params.name;
   const currentIndex = params.dataIndex;
-  // 
+  //
 
   // 设置弹框标题
   detailModalTitle.value =
@@ -321,20 +321,24 @@ const handleChartClick = (params: any) => {
       : `生态流量达标率(按调节性能统计)`;
 
   // 获取当前点击项的详细数据
-  const baseId = mode.value === 'top' ? chartData.value.baseIds[currentIndex] : undefined;
-  const qecPerformance = mode.value === 'left' ? chartData.value.qecPerformances[currentIndex] : undefined;
-  // 
-  
+  const baseId =
+    mode.value === 'top' ? chartData.value.baseIds[currentIndex] : undefined;
+  const qecPerformance =
+    mode.value === 'left'
+      ? chartData.value.qecPerformances[currentIndex]
+      : undefined;
+  //
+
   const currentItem = {
     baseId: baseId,
-    baseName: mode.value === 'top' ? categoryName :'',
+    baseName: mode.value === 'top' ? categoryName : '',
     qecPerformance: qecPerformance,
     qecPerformanceName: mode.value === 'left' ? categoryName : '',
     qecRate: chartData.value.currentData[currentIndex],
     beforeQecRate: chartData.value.lastYearData[currentIndex]
   };
 
-  detailData.value = [currentItem]; 
+  detailData.value = [currentItem];
   detailModalVisible.value = true;
 };
 
@@ -353,16 +357,15 @@ const getdate = (offsetYears = 0) => {
 
   // 如果 dateArr.value 有数据，使用数组中的日期
   if (dateArr.value && dateArr.value.length === 2) {
-
     const start = new Date(dateArr.value[0]);
     const end = new Date(dateArr.value[1]);
-    
+
     // 如果 offsetYears 不为 0，表示获取去年同期的时间
     if (offsetYears !== 0) {
       start.setFullYear(start.getFullYear() + offsetYears);
       end.setFullYear(end.getFullYear() + offsetYears);
     }
-    
+
     startDate = `${formatDate(start)} 00:00:00`;
     endDate = `${formatDate(end)} 23:59:59`;
     // 提取日期部分（去除时间）
@@ -475,9 +478,15 @@ const getEcharts = async () => {
     ]);
 
     // 处理当前数据
-    const currentApiData = (currentRes  && currentRes.data && currentRes.data.data) ? currentRes.data.data : [];
+    const currentApiData =
+      currentRes && currentRes.data && currentRes.data.data
+        ? currentRes.data.data
+        : [];
     // 处理去年同期数据
-    const lastYearApiData = (lastYearRes && lastYearRes.data && lastYearRes.data) ? lastYearRes.data.data : [];
+    const lastYearApiData =
+      lastYearRes && lastYearRes.data && lastYearRes.data
+        ? lastYearRes.data.data
+        : [];
 
     // 根据 mode 提取不同的数据
     if (mode.value === 'top') {
@@ -523,7 +532,9 @@ const getEcharts = async () => {
       });
 
       chartData.value = {
-        categories: currentApiData.map((item: any) => item.qecPerformanceName || ''),
+        categories: currentApiData.map(
+          (item: any) => item.qecPerformanceName || ''
+        ),
         currentData: currentApiData.map((item: any) =>
           item.qecRate != null ? Number(item.qecRate) : 0
         ),
@@ -532,7 +543,9 @@ const getEcharts = async () => {
           return lastYearRate != null ? Number(lastYearRate) : 0;
         }),
         baseIds: [],
-        qecPerformances: currentApiData.map((item: any) => item.qecPerformance || '')
+        qecPerformances: currentApiData.map(
+          (item: any) => item.qecPerformance || ''
+        )
       };
     }
   } catch (error) {
@@ -577,7 +590,7 @@ const getcont = async () => {
   if (list) {
     titleData.value = list;
   }
-  // 
+  //
 };
 // 页面加载时执行的逻辑
 onMounted(() => {
@@ -588,12 +601,12 @@ onMounted(() => {
     chartInstance?.resize();
   });
 });
- 
+
 watch(
   () => mapViewStore.searchTimeRange,
   (newVal, oldVal) => {
     console.log('时间范围变化:', oldVal, '->', newVal);
-    dateArr.value = newVal
+    dateArr.value = newVal;
     loadData();
     // 处理你的逻辑
   },
diff --git a/frontend/src/modules/shuiLiBuMod/index.vue b/frontend/src/modules/shuiLiBuMod/index.vue
new file mode 100644
index 00000000..cf95be9e
--- /dev/null
+++ b/frontend/src/modules/shuiLiBuMod/index.vue
@@ -0,0 +1,493 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <div>
+    <SidePanelItem title="水利部门要求生态流量达标情况">
+      <!-- <div class="body_topOne">
+        <a-radio-group v-model:value="mode" @change="dataChage">
+          <a-radio-button value="hour">逐时</a-radio-button>
+          <a-radio-button value="day">日</a-radio-button>
+        </a-radio-group>
+      </div> -->
+      <div class="body_title">逐日</div>
+      <div class="body_main">
+        <div class="body_div" v-for="(i, index) in dataArr" :key="index">
+          <div class="body_div_icon">
+            <img :src="i.icon" alt="" />
+          </div>
+          <div class="body_div_text">{{ i.qecCnt }}</div>
+          <div class="body_div_text_sub">
+            {{ i.text }}
+            <span> (座) </span>
+          </div>
+        </div>
+      </div>
+      <div class="body_title">逐时</div>
+      <div class="body_main">
+        <div class="body_div" v-for="(i, index) in dataArr" :key="index">
+          <div class="body_div_icon">
+            <img :src="i.icon" alt="" />
+          </div>
+          <div class="body_div_text">{{ i.qecCnt }}</div>
+          <div class="body_div_text_sub">
+            {{ i.text }}
+            <span> (座) </span>
+          </div>
+        </div>
+      </div>
+      <!-- <a-spin :spinning="spinning">
+        <div>
+          <div v-for="el in datalist" @click="handleBarClick(el)">
+            <div :key="el.key">
+              <div class="boy_one">
+                <div style="flex: 1; white-space: nowrap; margin-right: 5px">
+                  {{ el.name }}
+                </div>
+                <img style="flex: 1" src="@/assets/components/fgx.svg" alt="" />
+              </div>
+              <div class="body_zhu">
+                <div class="body_biao">
+                  <div v-for="value in allArr">
+                    <div :key="value" class="nei_body">
+                      <div
+                        v-if="
+                          value <
+                          (el?.key == null
+                            ? 1
+                            : el.qecTCnt == 0
+                            ? 0
+                            : el.qecCnt / el.qecTCnt) *
+                            20
+                        "
+                        class="little_body"
+                        :style="{ backgroundColor: el.color }"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="body_text">{{ el.qecCnt }}/{{ el.qecTCnt }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-spin> -->
+    </SidePanelItem>
+
+    <!-- 自定义弹框 -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="'生态流量达标情况'"
+      width="1536px"
+      :footer="null"
+    >
+      <STLLXFFS
+        v-if="modalVisible"
+        :options="list"
+        :typeKey="selectedItem.key"
+        :time="mode"
+        :basicId="baseid"
+        :dateArr="dateArr"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, inject, computed, defineOptions } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import {
+  qgcetQgcStaticData,
+  evnmAutoMonitorGetKendoListCust
+} from '@/api/stll';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { useMapViewStore } from '@/modules/map/stores/map-view.store';
+import STLLXFFS from '@/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
+import { useDraggable } from '@/utils/drag';
+import icon from '@/assets/icons/client.svg';
+// 定义组件名（便于调试和递归）
+defineOptions({
+  name: 'shengtaidabiaoMod'
+});
+const JidiSelectEventStore = useJidiSelectEventStore();
+const mapViewStore = useMapViewStore();
+const baseid = ref('');
+const dateArr = ref<any[]>([]);
+
+const mode = ref('hour');
+const dataArr: any = ref([
+  {
+    qecCnt: '0', // 座数
+    qecTCnt: '0', //总座数
+    icon: icon,
+    text: '达标',
+    type: 1,
+    key: 'qecInterval'
+  },
+  {
+    icon: icon,
+    qecCnt: '0', // 座数
+    qecTCnt: '0', //总座数
+    text: '不达标',
+    type: 1,
+    key: 'qecInterval'
+  },
+  {
+    icon: icon,
+    qecCnt: '0', // 座数
+    qecTCnt: '0', //总座数
+    text: '无数据',
+    type: 1,
+    key: 'qecInterval'
+  }
+]);
+// const dataArr: any = ref([
+//   {
+//     name: '生态环境部门要求',
+//     qecCnt: '0', // 座数
+//     qecTCnt: '0', //总座数
+//     type: 1,
+//     key: 'qecInterval'
+//   },
+//   {
+//     name: '水利部门要求',
+//     qecCnt: '0', // 座数
+//     qecTCnt: '0', //总座数
+//     type: 2,
+//     key: 'mwrInterval'
+//   }
+// ]);
+const list: any = ref([
+  { name: '生态环境部门要求', type: 1, color: '#77C300', key: 'qecInterval' },
+  { name: '水利部门要求', type: 2, color: '#56C3E3', key: 'mwrInterval' },
+  { name: '多年平均流量 10%', type: 3, color: '#F76B01', key: 'avqInterval' },
+  { name: '无生态流量要求', type: 4, color: '#B4B4B4', key: null }
+]);
+const datalist: any = ref([]);
+const allArr: any = ref(Array.from({ length: 20 }, (_, i) => i));
+const spinning = ref(false);
+const modalVisible = ref(false);
+const selectedItem = ref<any>(null);
+
+// 启用弹窗拖拽（限制在可视区域内）
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+
+// 处理进度条点击事件
+const handleBarClick = (item: any) => {
+  selectedItem.value = item;
+  modalVisible.value = true;
+};
+
+// 根据 type 将 list 中的数据合并到 dataArr 中
+const setStyle = () => {
+  if (dataArr.value.length == 0) {
+    return false;
+  }
+  dataArr.value.forEach((item: any) => {
+    // 在 list 中找到 type 匹配的数据
+    const matched = list.value.find(
+      (listItem: any) => listItem.type === item.type
+    );
+    if (matched) {
+      // 合并数据，dataArr 的属性优先
+      datalist.value.push({
+        ...matched,
+        ...item
+      });
+    }
+  });
+  console.log(datalist.value);
+};
+const dataChage = () => {
+  getData();
+};
+const getdate = (offsetYears = 0) => {
+  const formatDate = (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  let startDate: string;
+  let endDate: string;
+
+  if (dateArr.value && dateArr.value.length === 2) {
+    const start = new Date(dateArr.value[0]);
+    const end = new Date(dateArr.value[1]);
+    if (offsetYears !== 0) {
+      start.setFullYear(start.getFullYear() + offsetYears);
+      end.setFullYear(end.getFullYear() + offsetYears);
+    }
+    startDate = `${formatDate(start)} 00:00:00`;
+    endDate = `${formatDate(end)} 23:59:59`;
+  } else {
+    const now = new Date();
+    const oneMonthAgo = new Date(now);
+    oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
+    if (offsetYears !== 0) {
+      now.setFullYear(now.getFullYear() + offsetYears);
+      oneMonthAgo.setFullYear(oneMonthAgo.getFullYear() + offsetYears);
+    }
+    startDate = `${formatDate(oneMonthAgo)} 00:00:00`;
+    endDate = `${formatDate(now)} 23:59:59`;
+  }
+
+  return { startDate, endDate };
+};
+
+const getData = async () => {
+  const { startDate, endDate } = getdate(0);
+
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        baseid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: baseid.value
+            }
+          : null,
+        {
+          field: 'dtin',
+          operator: 'eq',
+          dataType: 'string',
+          value: '1'
+        },
+        {
+          field: 'type',
+          operator: 'eq',
+          dataType: 'string',
+          value: mode.value
+        },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: startDate
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: endDate
+        }
+      ].filter(Boolean)
+    }
+  };
+
+  spinning.value = true;
+  try {
+    let res = await qgcetQgcStaticData(params);
+    // 根据API响应结构规范处理数据
+    if (res.data && res.data.list) {
+      const apiList = res.data.list;
+      //
+      // 只使用前两条数据（type: 1 和 type: 2）
+      // if (apiList && apiList.length > 0) {
+      //   dataArr.value = apiList.slice(0, 2).map((item: any) => ({
+      //     //   name: item.typeName || item.desc,
+      //     qecCnt: item.qecCnt,
+      //     qecTCnt: item.qecTCnt,
+      //     type: item.type
+      //   }));
+
+      //   // 清空旧数据并重新合并样式
+      //   datalist.value = [];
+      //   setStyle();
+      // } else {
+      //   // 无数据场景处理
+      //   dataArr.value = [];
+      //   datalist.value = [];
+      // }
+    }
+  } catch (error) {
+    console.error('获取生态流量达标数据失败:', error);
+  } finally {
+    spinning.value = false;
+  }
+};
+// 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
+const injectedStation = inject<any>('dianZhanStation', null);
+const stationSource = computed(
+  () => injectedStation?.value || JidiSelectEventStore.selectedItem
+);
+
+watch(
+  () => stationSource.value,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
+      getData();
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => mapViewStore.searchTimeRange,
+  newVal => {
+    dateArr.value = newVal;
+    getData();
+  },
+  { deep: true }
+);
+
+//统计电站范围：接入过生态流量数据的电站
+const titleData: any = ref({ cnt: 0 });
+const getcont = async () => {
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'showIds',
+          operator: 'in',
+          value: ['7']
+        }
+      ]
+    }
+  };
+  let res = await evnmAutoMonitorGetKendoListCust(params);
+  let list = res?.data?.data[0];
+  if (list) {
+    titleData.value = list;
+  }
+  //
+};
+// 页面加载时执行的逻辑
+onMounted(() => {
+  setStyle();
+  getcont();
+});
+</script>
+
+<style lang="scss" scoped>
+.body_topOne {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.boy_one {
+  display: flex;
+  align-items: center;
+  margin: 5px 0px;
+}
+.body_title {
+  font-size: 14px;
+  font-weight: bold;
+  padding-left: 10px;
+  margin-left: 4px;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 0;
+    width: 4px;
+    height: 14px;
+    background-color: #2f6b98;
+  }
+}
+.body_main {
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  padding: 6px 10px;
+  justify-content: space-between;
+  .body_div {
+    width: 33%;
+    height: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    background-color: #f3f5fa;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 4px;
+    .body_div_icon {
+      width: 30px;
+      height: 30px;
+      margin-bottom: 5px;
+    }
+    .body_div_text {
+      font-size: 28px;
+      font-weight: 500;
+      margin: 10px 0;
+    }
+    .body_div_text_sub {
+      font-size: 14px;
+      font-weight: 400;
+      span {
+        color: #949494;
+      }
+    }
+  }
+}
+.body_zhu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  .body_biao {
+    width: 100%;
+    height: 52px;
+    border: 1px solid #ccdae7;
+    border-radius: 2px;
+    display: flex;
+    padding: 5px 1px;
+    overflow: hidden;
+
+    .nei_body {
+      width: 12px;
+      height: 100%;
+      border: 1px solid #ccdae7;
+      padding: 2px;
+      margin-left: 4px;
+
+      .little_body {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .body_text {
+    display: flex;
+    flex-direction: column;
+    width: 90px;
+    height: 100%;
+    justify-content: space-around;
+    margin-left: 6px;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 500;
+  }
+}
+
+.ant-radio-group {
+  // border: 3px solid #2f6b98 !important;
+  // border-radius: 10px !important;
+
+  .ant-radio-button-wrapper-checked {
+    border: 1px solid #2f6b98 !important;
+    background-color: #2f6b98 !important;
+    color: #fff !important;
+  }
+
+  .ant-radio-button-wrapper {
+    border: 2px solid #2f6b98 !important;
+  }
+
+  .ant-radio-button-wrapper-checked :before {
+    background-color: #2f6b98 !important;
+  }
+}
+</style>
diff --git a/frontend/src/modules/shuiWenJianCeKaiZhanQingKuang/index.vue b/frontend/src/modules/shuiWenJianCeKaiZhanQingKuang/index.vue
new file mode 100644
index 00000000..d9c3a09b
--- /dev/null
+++ b/frontend/src/modules/shuiWenJianCeKaiZhanQingKuang/index.vue
@@ -0,0 +1,592 @@
+<template>
+  <div>
+    <SidePanelItem
+      title="各基地水温监测开展情况"
+      @update-values="handlePanelChange"
+    >
+      <!-- 加载状态 -->
+      <div v-if="dataLoading" class="chart-loading">
+        <a-spin tip="加载中..." />
+      </div>
+
+      <!-- 无数据提示 -->
+      <a-empty
+        v-if="!chartData.length && !dataLoading"
+        description="暂无数据"
+        class="chart-empty"
+      />
+
+      <!-- 图表容器（使用 display 控制，避免 v-if 销毁 DOM）-->
+      <div
+        ref="chartRef"
+        class="chart-container"
+        :style="{
+          display: chartData.length && !dataLoading ? 'block' : 'none'
+        }"
+      ></div>
+    </SidePanelItem>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, nextTick, onBeforeUnmount, defineOptions } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+// import { wbsbGetKendoList } from '@/api/sz';
+import * as echarts from 'echarts';
+import dayjs from 'dayjs';
+// TODO: 导入生态流量 API
+import { qgcHourVGetKendoListCust, wbsbGetKendoList } from '@/api/stll';
+import { useModelStore } from '@/store/modules/model';
+// 定义组件名
+defineOptions({
+  name: 'ShuiWenJianCeKaiZhanQingKuang'
+});
+
+// ==================== 响应式状态 ====================
+
+// 日期时间选择器配置
+const datetimePicker = ref({
+  show: true,
+  value: dayjs().format('YYYY-MM-DD HH:mm'), // 默认当前时间
+  format: 'YYYY-MM-DD HH:mm',
+  picker: 'date',
+  timeFormat: 'HH:mm',
+  options: []
+});
+
+// 河段选择器配置
+const select = ref({
+  show: true,
+  value: '',
+  options: [],
+  picker: undefined,
+  format: undefined
+});
+const modelStore = useModelStore();
+// 业务数据状态
+const wbsCode = ref(''); // 流域编码
+const selectData = ref(''); // 选中的河段编码
+const chartData = ref<any[]>([]); // 图表数据
+const dataLoading = ref(false); // 加载状态
+const latestTime = ref(''); // 最新数据时间
+const hasTimeData = ref(false); // 是否有时间数据
+
+// 图表相关
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+// 弹窗状态
+const modalVisible = ref(false);
+const modalData = ref<any>({
+  stcd: '',
+  stnm: '',
+  titleName: ''
+});
+
+// Store
+const JidiSelectEventStore = useJidiSelectEventStore();
+
+// ==================== 核心方法 ====================
+
+/**
+ * 获取河段列表
+ */
+const getSelect = async () => {
+  if (!wbsCode.value) {
+    console.warn('wbsCode 为空，无法获取河段数据');
+    return;
+  }
+
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'objId',
+          operator: 'eq',
+          value: wbsCode.value
+        },
+        {
+          field: 'wbsType',
+          operator: 'eq',
+          value: 'PSB_RVCD'
+        }
+      ]
+    },
+    group: [
+      {
+        dir: 'asc',
+        field: 'orderIndex'
+      },
+      {
+        dir: 'asc',
+        field: 'wbsCode'
+      },
+      {
+        dir: 'asc',
+        field: 'wbsName'
+      },
+      {
+        dir: 'asc',
+        field: 'objid'
+      }
+    ],
+    groupResultFlat: 'true'
+  };
+
+  try {
+    let res = await wbsbGetKendoList(params);
+
+    // 处理返回的数据
+    let data;
+    if (res && res.data && res.data.data) {
+      if (Array.isArray(res.data.data)) {
+        data = res.data.data;
+      } else if (res.data.data.data && Array.isArray(res.data.data.data)) {
+        data = res.data.data.data;
+      } else {
+        console.warn('无法解析河段数据:', res);
+        return;
+      }
+    } else {
+      console.warn('未获取到河段数据');
+      return;
+    }
+
+    if (data && data.length > 0) {
+      //   ;
+      select.value.value = data[0].wbsCode;
+      selectData.value = data[0].wbsCode; // 同步选中第一个
+      select.value.options = data.map(item => ({
+        value: item.wbsCode,
+        label: item.wbsName
+      }));
+
+      // 获取完河段后立即加载图表数据
+      await loadChartData();
+    } else {
+      console.warn('河段数据为空');
+      select.value.value = '';
+      select.value.options = [];
+    }
+  } catch (error) {
+    console.error('获取河段数据失败:', error);
+  }
+};
+
+/**
+ * 获取生态流量数据（预留 API 位置）
+ */
+const getList = async (rvcd: string, sDate: string) => {
+  // TODO: 调用实际的 API
+  // 参数结构参考 React 版本：
+  // - baseId: 从 JidiSelectEventStore.selectedItem 获取
+  // - rvcd: 河段编码
+  // - tm: 时间范围（当前时间往前推1个月）
+
+  const currentTime = dayjs(sDate);
+  const startTime = currentTime.subtract(1, 'month');
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'baseId',
+          operator: 'eq',
+          dataType: 'string',
+          value: wbsCode.value
+        },
+        {
+          field: 'rvcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: rvcd
+        },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: startTime.format('YYYY-MM-DD HH:mm:ss')
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: currentTime.format('YYYY-MM-DD HH:mm:ss')
+        }
+      ]
+    },
+    sort: [
+      {
+        field: 'sort',
+        dir: 'asc'
+      }
+    ]
+  };
+  // TODO: 替换为实际 API 调用FAA
+  const res = await qgcHourVGetKendoListCust(params);
+
+  // 处理返回的数据结构
+  if (!res || !res.data || !res.data.data || !Array.isArray(res.data.data)) {
+    console.warn('未获取到有效的生态流量数据:', res);
+    return [];
+  }
+
+  // 映射数据结构，适配图表展示需求
+  return res.data.data.map((item: any) => ({
+    TM: dayjs(item.tm).format('YYYY-MM-DD H时'),
+    stnm: item.stnm,
+    stcd: item.stcd,
+    qec: item.qec, // 生态流量
+    qecLimit: item.qecLimit, // 环评限值
+    qi: item.qi // 入库流量
+  }));
+};
+
+/**
+ * 加载图表数据
+ */
+const loadChartData = async () => {
+  if (!selectData.value || !datetimePicker.value.value) {
+    return;
+  }
+
+  dataLoading.value = true;
+
+  try {
+    const data = await getList(selectData.value, datetimePicker.value.value);
+
+    if (data && data.length > 0) {
+      chartData.value = data;
+      hasTimeData.value = true;
+      // 提取最新时间
+      if (data[0]?.TM) {
+        latestTime.value = data[0].TM;
+      }
+
+      // 数据加载完成后渲染图表
+      await nextTick();
+      initChart();
+    } else {
+      chartData.value = [];
+      hasTimeData.value = false;
+      latestTime.value = '';
+      // 清空图表
+      if (chartInstance) {
+        chartInstance.clear();
+      }
+    }
+  } catch (error) {
+    console.error('加载图表数据失败:', error);
+    chartData.value = [];
+  } finally {
+    dataLoading.value = false;
+  }
+};
+
+/**
+ * 初始化 ECharts 图表
+ */
+const initChart = () => {
+  if (!chartRef.value) {
+    console.warn('图表容器未准备好');
+    return;
+  }
+
+  // 如果实例已存在，先销毁
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+
+  // 创建新实例
+  chartInstance = echarts.init(chartRef.value);
+
+  // 准备数据
+  const xData: string[] = [];
+  const inData: (number | string)[] = []; // 入库流量
+  const outData: (number | string)[] = []; // 生态流量
+  let hasValidData = false; // 标记是否有有效数据
+
+  chartData.value.forEach(item => {
+    xData.push(item.stnm);
+    const qecValue = item.qec ?? '-';
+    const qiValue = item.qi ?? '-';
+
+    outData.push(qecValue);
+    inData.push(qiValue);
+
+    // 检查是否有任意一个字段有有效数据
+    if (qecValue !== '-' || qiValue !== '-') {
+      hasValidData = true;
+    }
+  });
+
+  // 如果所有数据都为空，显示暂无数据
+  if (!hasValidData && chartData.value.length > 0) {
+    chartData.value = [];
+    if (chartInstance) {
+      chartInstance.clear();
+    }
+    return;
+  }
+
+  // 图表配置
+  const option: echarts.EChartsOption = {
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      formatter: function (params: any) {
+        const datum = chartData.value.find(
+          (el: any) => el.stnm === params[0].name
+        );
+        const unit = 'm³/s'; // TODO: 根据单位配置动态获取
+
+        const content = params
+          .map((item: any) => {
+            const value = item.value ?? '-';
+            return `<div>${item.marker}${item.seriesName}: &nbsp;&nbsp;&nbsp;&nbsp;<span style="float:right">${value} ${unit}</span></div>`;
+          })
+          .join('');
+
+        return `<h3 style="color:white">${params[0].name}<br/>${
+          datum?.TM || ''
+        }</h3>${content}`;
+      },
+      axisPointer: {
+        type: 'line'
+      }
+    },
+    legend: {
+      data: ['表层水温', '垂向水温'],
+      icon: 'roundRect',
+      top: 10
+    },
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 10,
+      top: 70,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisLine: {
+        lineStyle: {
+          color: '#505050'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#8f8f8f',
+          type: 'solid'
+        }
+      },
+      axisLabel: {
+        interval: xData.length > 12 ? 2 : 0,
+        rotate: 0,
+        formatter: (value: string, index: number) => {
+          const shortValue =
+            value.substring(0, 6) + (value.length > 6 ? '...' : '');
+          if (index % 2 !== 0) {
+            return `{a|${shortValue}}`;
+          } else {
+            return `\n{b|}${shortValue}`;
+          }
+        },
+        rich: {
+          a: {
+            height: 20,
+            align: 'center'
+          },
+          b: {
+            height: 30,
+            align: 'center'
+          }
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 1,
+      axisLine: {
+        lineStyle: {
+          color: '#505050'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#8f8f8f',
+          type: 'solid'
+        }
+      }
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        start: 0,
+        end: 100,
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: true
+      }
+    ],
+    series: [
+      {
+        name: '表层水温',
+        data: inData,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        connectNulls: true,
+        color: '#5470c6' // TODO: 根据配置动态获取
+      },
+      {
+        name: '垂向水温',
+        data: outData,
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        connectNulls: true,
+        color: '#91cc75' // TODO: 根据配置动态获取
+      }
+    ]
+  };
+
+  chartInstance.setOption(option);
+
+  // 绑定点击事件
+  chartInstance.on('click', handleChartClick);
+
+  // 自适应窗口大小
+  window.addEventListener('resize', handleResize);
+};
+
+/**
+ * 图表点击事件
+ */
+const handleChartClick = (params: any) => {
+  const datum = chartData.value.find((item: any) => item.stnm === params.name);
+  if (datum) {
+    const currentTime = dayjs(datetimePicker.value.value);
+    const startTime = currentTime.subtract(1, 'month');
+    modalVisible.value = true;
+    modelStore.modalVisible = true;
+    modelStore.params.sttp = 'ENG';
+    modelStore.title = datum.stnm;
+    modelStore.params.stcd = datum.stcd;
+    modelStore.params.eqtp = 'QEC';
+    modelStore.filter.rangeTm = [startTime, currentTime];
+    modelStore.filter.stllgzlx = 'qecInterval';
+    modelStore.filter.stllTmType = 'day';
+  }
+};
+
+/**
+ * 窗口大小改变时重新调整图表
+ */
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+
+/**
+ * 弹窗取消事件
+ */
+const handleModalCancel = () => {
+  modalVisible.value = false;
+  modalData.value = {
+    stcd: '',
+    stnm: '',
+    titleName: ''
+  };
+};
+
+/**
+ * 面板数据变化处理
+ */
+const handlePanelChange = async (data: any) => {
+  console.log('当前所有控件状态:', data);
+
+  // 当选择器或日期变化时，重新加载图表数据
+  if (data.select) {
+    select.value.value = data.select;
+    selectData.value = data.select;
+  }
+
+  if (data.datetime) {
+    datetimePicker.value.value = data.datetime;
+  }
+
+  // 重新加载数据
+  if (data.select || data.datetime) {
+    await loadChartData();
+  }
+};
+
+// ==================== 生命周期与监听 ====================
+
+// 监听流域切换
+watch(
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    console.log('流域切换:', newVal);
+    if (newVal?.wbsCode) {
+      wbsCode.value = newVal.wbsCode;
+      getSelect();
+    }
+  },
+  { deep: true, immediate: true }
+);
+// 组件卸载时清理
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style lang="scss" scoped>
+.chart-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 424px;
+}
+
+.chart-empty {
+  display: flex;
+  align-items: center;
+  height: 424px;
+  flex-direction: column;
+  /* align-content: center; */
+  justify-content: center;
+  text-align: center !important;
+  :deep(.ant-empty-description) {
+    text-align: center !important;
+    text-indent: 0;
+    width: 100%;
+  }
+}
+
+.chart-container {
+  width: 406px;
+  height: 424px;
+}
+
+.time-tip {
+  text-align: right;
+  font-size: 12px;
+  color: #8e8e8e;
+  padding: 8px 0;
+  margin-top: 4px;
+}
+</style>
diff --git a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
index 00aafd76..f530c455 100644
--- a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
+++ b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
@@ -1,26 +1,37 @@
 <!-- SidePanelItem.vue -->
 <template>
-  <SidePanelItem title="水温监测工作开展情况">
+  <SidePanelItem title="水温监测统计">
     <a-spin :spinning="loading" tip="加载中...">
       <div class="facility-grid">
-        <div v-for="facility in facilities" :key="facility.name" class="facility-card"
-          @click="handleFacilityClick(facility)">
-          <div style="
+        <div
+          v-for="facility in facilities"
+          :key="facility.name"
+          class="facility-card"
+          @click="handleFacilityClick(facility)"
+        >
+          <div
+            style="
               width: 60px;
               height: 62px;
               display: flex;
               align-items: center;
               justify-content: center;
-            ">
+            "
+          >
             <div class="facility-icon">
-              <i style="color: #fff" :class="facility.icon" type="icon-shengtailiuliang2"></i>
+              <i
+                style="color: #fff"
+                :class="facility.icon"
+                type="icon-shengtailiuliang2"
+              ></i>
             </div>
           </div>
 
           <div class="facility-info">
             <div class="facility-name">{{ facility.name }}</div>
             <div style="font-size: 16px">
-              <span class="facility-count">{{ facility.count }}</span><span>个</span>
+              <span class="facility-count">{{ facility.count }}</span
+              ><span>个</span>
             </div>
           </div>
         </div>
@@ -28,40 +39,54 @@
     </a-spin>
 
     <!-- 弹框 -->
-    <a-modal v-model:open="modalVisible" :title="'水温监测工作开展情况'" :footer="null" width="1536px" @cancel="handleCloseModal">
-      <ShuiwenjiancegongzuoEJ  v-if="currentFacility"  :activeKey="currentFacility.key" :tabs="facilities" :baseId="baseid" />
+    <a-modal
+      v-model:open="modalVisible"
+      :title="'水温监测工作开展情况'"
+      :footer="null"
+      width="1536px"
+      @cancel="handleCloseModal"
+    >
+      <ShuiwenjiancegongzuoEJ
+        v-if="currentFacility"
+        :activeKey="currentFacility.key"
+        :tabs="facilities"
+        :baseId="baseid"
+      />
     </a-modal>
   </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, watch } from "vue";
-import SidePanelItem from "@/components/SidePanelItem/index.vue";
-import { getKendoListCust, baseEvnmAutoMonitorGetKendoListCust } from "@/api/sw";
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
-import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
+import { ref, onMounted, watch } from 'vue';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import {
+  getKendoListCust,
+  baseEvnmAutoMonitorGetKendoListCust
+} from '@/api/sw';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import ShuiwenjiancegongzuoEJ from './shuiwenjiancegongzuoEJ.vue';
 import { useDraggable } from '@/utils/drag';
 
 const JidiSelectEventStore = useJidiSelectEventStore();
 // 定义组件名（便于调试和递归）
 defineOptions({
-  name: "shuiwenjiancegongzuokaizhangqingkuang",
+  name: 'shuiwenjiancegongzuokaizhangqingkuang'
 });
 
 // 设施数据
 const facilities = ref([
   {
-    name: "表层水温",
+    name: '表层水温',
     count: 0,
-    icon: "icon iconfont icon-shuizhijiancezhan",
-    key:'26'
+    icon: 'icon iconfont icon-shuizhijiancezhan',
+    key: '26'
   },
   {
-    name: "垂向水温",
+    name: '垂向水温',
     count: 0,
-    icon: "icon iconfont icon-diwenshuijianhuan",
-    key:'27'
-  },
+    icon: 'icon iconfont icon-diwenshuijianhuan',
+    key: '27'
+  }
 ]);
 
 // Loading 状态
@@ -76,8 +101,6 @@ const handleFacilityClick = (facility: any) => {
   // console.log(facility);
   currentFacility.value = facility;
   modalVisible.value = true;
-  
-  
 };
 
 // 关闭弹框
@@ -93,30 +116,29 @@ const init = async () => {
   try {
     loading.value = true;
     const params = {
-      "filter": {
-        "logic": "and",
-        "filters": [
+      filter: {
+        logic: 'and',
+        filters: [
           {
-            "field": "showIds",
-            "operator": "in",
-            "value": [
-              "26",
-              "27"
-            ]
+            field: 'showIds',
+            operator: 'in',
+            value: ['26', '27']
           },
-          baseid.value != 'all' ? {
-            "field": "baseId",
-            "operator": "eq",
-            "value": baseid.value
-          } : null
+          baseid.value != 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                value: baseid.value
+              }
+            : null
         ].filter(Boolean)
       }
-    }
+    };
     let res = await baseEvnmAutoMonitorGetKendoListCust(params);
     console.log(res);
-    let data = res.data.data || res.data
+    let data = res.data.data || res.data;
     data.forEach((item: any, index: any) => {
-      facilities.value[index].count = item.cnt
+      facilities.value[index].count = item.cnt;
     });
   } catch (error) {
     console.error('获取水温监测数据失败:', error);
@@ -130,10 +152,10 @@ onMounted(() => {
   init();
 });
 
-const baseid = ref("")
+const baseid = ref('');
 watch(
   () => JidiSelectEventStore.selectedItem,
-  (newVal) => {
+  newVal => {
     baseid.value = newVal.wbsCode;
     init();
   },
@@ -147,9 +169,9 @@ watch(
   flex-flow: wrap;
   display: flex;
   justify-content: space-between;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
-    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
-    Noto Color Emoji;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 .facility-card {
diff --git a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
index 9bb74545..0ea5cbb8 100644
--- a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
+++ b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
@@ -1,566 +1,596 @@
 <template>
-    <div class="shuiwenjiancegongzwo-ej-container">
-        <!-- Tab切换 -->
-        <a-tabs v-model:activeKey="tabIndex" @change="handleTabChange">
-            <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.name" />
-        </a-tabs>
+  <div class="shuiwenjiancegongzwo-ej-container">
+    <!-- Tab切换 -->
+    <a-tabs v-model:activeKey="tabIndex" @change="handleTabChange">
+      <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.name" />
+    </a-tabs>
 
-        <!-- 搜索表单 -->
-        <div class="search-form">
-            <a-space size="middle">
-                <div>选择水电站:</div>
-                <a-select v-model:value="searchData.stcd.dataDimensionData" placeholder="请选择水电站" style="width: 200px"
-                    show-search :filter-option="filterOption" :options="hydropowerStationOptions"
-                    @change="handleHydropowerStationChange" />
-                <a-select v-model:value="searchData.stnm" placeholder=" " style="width: 200px" allow-clear show-search
-                    :filter-option="filterOption" :options="stationOptions" @change="handleStationChange" />
+    <!-- 搜索表单 -->
+    <div class="search-form">
+      <a-space size="middle">
+        <div>选择水电站:</div>
+        <a-select
+          v-model:value="searchData.stcd.dataDimensionData"
+          placeholder="请选择水电站"
+          style="width: 200px"
+          show-search
+          :filter-option="filterOption"
+          :options="hydropowerStationOptions"
+          @change="handleHydropowerStationChange"
+        />
+        <a-select
+          v-model:value="searchData.stnm"
+          placeholder="请选择电站"
+          style="width: 200px"
+          allow-clear
+          show-search
+          :filter-option="filterOption"
+          :options="stationOptions"
+          @change="handleStationChange"
+        />
 
-                <a-button type="primary" @click="handleSearch">查询</a-button>
-                <a-tooltip title="重置">
-                    <a-button @click="handleReset">重置</a-button>
-                </a-tooltip>
-            </a-space>
-        </div>
-
-        <!-- 数据表格 -->
-        <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
-            :scroll="{ y: tableHeight }" row-key="stcd" @change="handleTableChange">
-            <template #bodyCell="{ column, record }">
-                <!-- 监测状态 -->
-                <template v-if="column.key === 'coenvwState'">
-                    <a-tooltip placement="top">
-                        <template #title>
-                            <ol>
-                                <li>最近1天有监测数据为在线，否则为离线。</li>
-                            </ol>
-                        </template>
-                        <a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
-                            {{ record.coenvwState > 0 ? '在线' : '离线' }}
-                        </a-tag>
-                    </a-tooltip>
-                </template>
-
-                <!-- 操作 -->
-                <template v-else-if="column.key === 'action'">
-                    <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
-                </template>
-            </template>
-        </a-table>
+        <a-button type="primary" @click="handleSearch">查询</a-button>
+        <a-tooltip title="重置">
+          <a-button @click="handleReset">重置</a-button>
+        </a-tooltip>
+      </a-space>
     </div>
+
+    <!-- 数据表格 -->
+    <a-table
+      :columns="columns"
+      :data-source="tableData"
+      :loading="loading"
+      :pagination="pagination"
+      :scroll="{ y: tableHeight }"
+      row-key="stcd"
+      @change="handleTableChange"
+    >
+      <template #bodyCell="{ column, record }">
+        <!-- 监测状态 -->
+        <template v-if="column.key === 'coenvwState'">
+          <a-tooltip placement="top">
+            <template #title>
+              <ol>
+                <li>最近1天有监测数据为在线，否则为离线。</li>
+              </ol>
+            </template>
+            <a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
+              {{ record.coenvwState > 0 ? '在线' : '离线' }}
+            </a-tag>
+          </a-tooltip>
+        </template>
+
+        <!-- 操作 -->
+        <template v-else-if="column.key === 'action'">
+          <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
+        </template>
+      </template>
+    </a-table>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue'
-import { vmsstbprptGetKendoList, wbsbGetKendoList, getVmsstbprpt } from '@/api/sw'
-import { useModelStore } from "@/store/modules/model";
+import dayjs from 'dayjs';
+import { ref, computed, watch, onMounted } from 'vue';
+import {
+  vmsstbprptGetKendoList,
+  wbsbGetKendoList,
+  getVmsstbprpt
+} from '@/api/sw';
+import { useModelStore } from '@/store/modules/model';
 
 const modelStore = useModelStore();
 // ==================== Props 定义 ====================
 const props = defineProps<{
-    baseId?: string
-    tabs?: any[]
-    activeKey?: string
-}>()
+  baseId?: string;
+  tabs?: any[];
+  activeKey?: string;
+}>();
 
 // ==================== 状态管理 ====================
-const tabIndex = ref(props.activeKey || '26')
-const loading = ref(false)
-const tableData = ref<any[]>([])
+const tabIndex = ref(props.activeKey || '26');
+const loading = ref(false);
+const tableData = ref<any[]>([]);
 const pagination = ref({
-    current: 1,
-    pageSize: 20,
-    total: 0,
-    size: 'small',
-    showSizeChanger: true,
-    showQuickJumper: true,
-    showTotal: (total: number) => `共 ${total} 条`,
-    pageSizeOptions: ['10', '20', '50', '100']
-})
-const tableHeight = 'calc(48vh)'
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  size: 'small',
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条`,
+  pageSizeOptions: ['10', '20', '50', '100']
+});
+const tableHeight = 'calc(48vh)';
 
 // 水电站列表数据
-const hydropowerStationList = ref<any[]>([])
-const stationDataList: any = ref([])
+const hydropowerStationList = ref<any[]>([]);
+const stationDataList: any = ref([]);
 
 // 转换为 a-select options 格式
 const hydropowerStationOptions = computed(() => {
-    return hydropowerStationList.value.map(station => ({
-        label: station.wbsName,
-        value: station.wbsCode
-    }))
-})
+  return hydropowerStationList.value.map(station => ({
+    label: station.wbsName,
+    value: station.wbsCode
+  }));
+});
 
 const stationOptions = computed(() => {
-    return stationDataList.value.map(station => ({
-        label: station.stnm,
-        value: station.stcd
-    }))
-})
+  return stationDataList.value.map(station => ({
+    label: station.stnm,
+    value: station.stcd
+  }));
+});
 
 const searchData = ref<any>({
-    stcd: {
-        dataDimensionType: 'hyBase',
-        stcdId: '',
-        dataDimensionData: props.baseId || 'all'
-    },
-    stnm: null
-})
+  stcd: {
+    dataDimensionType: 'hyBase',
+    stcdId: '',
+    dataDimensionData: props.baseId || 'all'
+  },
+  stnm: null
+});
 
 // ==================== 计算合并信息 ====================
 const getRowSpanInfo = (dataIndex: string) => {
-    const spanMap = new Map()
+  const spanMap = new Map();
 
-    if (!tableData.value || tableData.value.length === 0) {
-        return spanMap
+  if (!tableData.value || tableData.value.length === 0) {
+    return spanMap;
+  }
+
+  let currentGroupStart = 0;
+  let currentValue = tableData.value[0][dataIndex];
+
+  for (let i = 0; i < tableData.value.length; i++) {
+    const value = tableData.value[i][dataIndex];
+
+    if (value !== currentValue) {
+      // 记录当前组的起始位置和行数
+      spanMap.set(currentGroupStart, i - currentGroupStart);
+      currentGroupStart = i;
+      currentValue = value;
     }
+  }
 
-    let currentGroupStart = 0
-    let currentValue = tableData.value[0][dataIndex]
+  // 处理最后一组
+  spanMap.set(currentGroupStart, tableData.value.length - currentGroupStart);
 
-    for (let i = 0; i < tableData.value.length; i++) {
-        const value = tableData.value[i][dataIndex]
-
-        if (value !== currentValue) {
-            // 记录当前组的起始位置和行数
-            spanMap.set(currentGroupStart, i - currentGroupStart)
-            currentGroupStart = i
-            currentValue = value
-        }
-    }
-
-    // 处理最后一组
-    spanMap.set(currentGroupStart, tableData.value.length - currentGroupStart)
-
-    return spanMap
-}
+  return spanMap;
+};
 
 // ==================== 监听 Props 变化 ====================
 // const baseId = ref('')
 watch(
-    () => props.baseId,
-    (newVal) => {
-        if (newVal && newVal !== searchData.value.stcd.dataDimensionData) {
-            searchData.value.stcd.dataDimensionData = newVal
-            fetchData()
-        }
+  () => props.baseId,
+  newVal => {
+    if (newVal && newVal !== searchData.value.stcd.dataDimensionData) {
+      searchData.value.stcd.dataDimensionData = newVal;
+      fetchData();
     }
-)
+  }
+);
 
 watch(
-    () => props.activeKey,
-    (newVal) => {
-        if (newVal && newVal !== tabIndex.value) {
-            tabIndex.value = newVal
-            fetchData()
-        }
+  () => props.activeKey,
+  newVal => {
+    if (newVal && newVal !== tabIndex.value) {
+      tabIndex.value = newVal;
+      fetchData();
     }
-)
-
+  }
+);
 
 // ==================== 列配置 ====================
 const columns = computed(() => {
-    const baseColumns = [
-        {
-            title: '所属基地',
-            dataIndex: 'baseName',
-            key: 'baseName',
-            width: 150,
-            customCell: (record: any, index: number) => {
-                const spanMap = getRowSpanInfo('baseName')
-                const rowSpan = spanMap.get(index)
+  const baseColumns = [
+    {
+      title: '所属基地',
+      dataIndex: 'baseName',
+      key: 'baseName',
+      width: 150,
+      customCell: (record: any, index: number) => {
+        const spanMap = getRowSpanInfo('baseName');
+        const rowSpan = spanMap.get(index);
 
-                if (rowSpan === undefined) {
-                    // 被合并的行，不显示
-                    return { rowSpan: 0 }
-                }
-
-                // 第一行，设置合并行数
-                return { rowSpan }
-            }
-        },
-        {
-            title: '测站名称',
-            dataIndex: 'stnm',
-            key: 'stnm',
-            width: 150
-        },
-        {
-            title: '电站',
-            dataIndex: 'ennm',
-            key: 'ennm',
-            width: 150
-        },
-        {
-            title: '建成时间',
-            dataIndex: 'jcdt',
-            key: 'jcdt',
-            width: 120
-        },
-        {
-            title: '监测指标',
-            dataIndex: 'stindx',
-            key: 'stindx',
-            width: 150
-        },
-        {
-            title: '监测状态',
-            key: 'coenvwState',
-            dataIndex: 'coenvwState',
-            width: 100,
-            align: 'center' as const
-        },
-        {
-            title: '操作',
-            key: 'action',
-            width: 100,
-            align: 'center' as const,
-            fixed: 'right' as const
+        if (rowSpan === undefined) {
+          // 被合并的行，不显示
+          return { rowSpan: 0 };
         }
-    ]
 
-    return baseColumns.filter(Boolean)
-})
+        // 第一行，设置合并行数
+        return { rowSpan };
+      }
+    },
+    {
+      title: '测站名称',
+      dataIndex: 'stnm',
+      key: 'stnm',
+      width: 150
+    },
+    {
+      title: '电站',
+      dataIndex: 'ennm',
+      key: 'ennm',
+      width: 150
+    },
+    {
+      title: '建成时间',
+      dataIndex: 'jcdt',
+      key: 'jcdt',
+      width: 120,
+      customRender: ({ text }) =>
+        text ? dayjs(text).format('YYYY-MM-DD') : '-'
+    },
+    {
+      title: '监测指标',
+      dataIndex: 'stindx',
+      key: 'stindx',
+      width: 150
+    },
+    {
+      title: '监测状态',
+      key: 'coenvwState',
+      dataIndex: 'coenvwState',
+      width: 100,
+      align: 'center' as const
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      align: 'center' as const,
+      fixed: 'right' as const
+    }
+  ];
+
+  return baseColumns.filter(Boolean);
+});
 
 // ==================== 过滤条件构建 ====================
 const buildSearchFilter = () => {
-    const filters: any[] = []
+  const filters: any[] = [];
 
-    // 基地ID过滤
-    if (searchData.value?.stcd?.dataDimensionData && searchData.value.stcd.dataDimensionData !== 'all') {
-        filters.push({
-            field: 'baseId',
-            operator: 'eq',
-            value: searchData.value.stcd.dataDimensionData
-        })
-    }
+  // 基地ID过滤
+  if (
+    searchData.value?.stcd?.dataDimensionData &&
+    searchData.value.stcd.dataDimensionData !== 'all'
+  ) {
+    filters.push({
+      field: 'baseId',
+      operator: 'eq',
+      value: searchData.value.stcd.dataDimensionData
+    });
+  }
 
-    // // 测站ID过滤
-    // if (searchData.value?.stcd?.stcdId) {
-    //     filters.push({
-    //         field: 'rstcd',
-    //         operator: 'eq',
-    //         value: searchData.value.stcd.stcdId
-    //     })
-    // }
+  // // 测站ID过滤
+  // if (searchData.value?.stcd?.stcdId) {
+  //     filters.push({
+  //         field: 'rstcd',
+  //         operator: 'eq',
+  //         value: searchData.value.stcd.stcdId
+  //     })
+  // }
 
-    // 测站名称模糊搜索
-    if (searchData.value?.stnm) {
-        filters.push({
-            field: 'rstcd',
-            operator: 'eq',
-            value: searchData.value.stnm
-        })
-    }
+  // 测站名称模糊搜索
+  if (searchData.value?.stnm) {
+    filters.push({
+      field: 'rstcd',
+      operator: 'eq',
+      value: searchData.value.stnm
+    });
+  }
 
-    // Tab特定过滤
-    switch (tabIndex.value) {
-        case '26':
-            filters.push(
-                {
-                    field: 'mway',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 2
-                },
-                {
-                    field: 'sttpCode',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 'WTRV'
-                }
-            )
-            break
-        case '27':
-            filters.push(
-                {
-                    field: 'mway',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 2
-                },
-                {
-                    field: 'sttpCode',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 'WTVT'
-                }
-            )
-            break
-    }
+  // Tab特定过滤
+  switch (tabIndex.value) {
+    case '26':
+      filters.push(
+        {
+          field: 'mway',
+          operator: 'eq',
+          dataType: 'string',
+          value: 2
+        },
+        {
+          field: 'sttpCode',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'WTRV'
+        }
+      );
+      break;
+    case '27':
+      filters.push(
+        {
+          field: 'mway',
+          operator: 'eq',
+          dataType: 'string',
+          value: 2
+        },
+        {
+          field: 'sttpCode',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'WTVT'
+        }
+      );
+      break;
+  }
 
-    return {
-        logic: 'and',
-        filters: filters.filter((f) => f.value !== undefined && f.value !== null && f.value !== '')
-    }
-}
+  return {
+    logic: 'and',
+    filters: filters.filter(
+      f => f.value !== undefined && f.value !== null && f.value !== ''
+    )
+  };
+};
 
 // ==================== API调用 ====================
 const fetchData = async () => {
-    loading.value = true
-    try {
-        const filter = buildSearchFilter()
-        const params = {
-            take: pagination.value.pageSize,
-            skip: pagination.value.current,
-            filter: filter,
-            select: [
-                'baseName',
-                'stnm',
-                'ennm',
-                'jcdt',
-                'stindx',
-                'coenvwState',
-                'sttpCode',
-                'stcd',
-                'rstcd',
-                'stCode',
-                'stName',
-                'dvtp'
-            ],
-            sort: [
-                { field: 'baseStepSort', dir: 'asc' },
-                { field: 'hbrvcd', dir: 'asc' },
-                { field: 'rstcdStepSort', dir: 'asc' },
-                { field: 'siteStepSort', dir: 'asc' }
-            ]
-        }
+  loading.value = true;
+  try {
+    const filter = buildSearchFilter();
+    const params = {
+      take: pagination.value.pageSize,
+      skip: pagination.value.current,
+      filter: filter,
+      select: [
+        'baseName',
+        'stnm',
+        'ennm',
+        'jcdt',
+        'stindx',
+        'coenvwState',
+        'sttpCode',
+        'stcd',
+        'rstcd',
+        'stCode',
+        'stName',
+        'dvtp'
+      ],
+      sort: [
+        { field: 'baseStepSort', dir: 'asc' },
+        { field: 'hbrvcd', dir: 'asc' },
+        { field: 'rstcdStepSort', dir: 'asc' },
+        { field: 'siteStepSort', dir: 'asc' }
+      ]
+    };
 
-        console.log('【请求参数】', params)
-        const res = await vmsstbprptGetKendoList(params)
-        console.log('【响应数据】', res)
+    console.log('【请求参数】', params);
+    const res = await vmsstbprptGetKendoList(params);
+    console.log('【响应数据】', res);
 
-        // 数据处理
-        let total = res.data.total
-        let records = res?.data?.data || res?.data
-        // if (Array.isArray(res?.data?.data)) {
-        //   records = res.data.data
-        //   total = res.data.data.length
-        // } 
+    // 数据处理
+    let total = res.data.total;
+    let records = res?.data?.data || res?.data;
+    // if (Array.isArray(res?.data?.data)) {
+    //   records = res.data.data
+    //   total = res.data.data.length
+    // }
 
-        tableData.value = records || []
-        pagination.value.total = total
-        loading.value = false
-    } catch (error) {
-        console.error('获取水文监测数据失败:', error)
-        tableData.value = []
-        pagination.value.total = 0
-    } finally {
-        loading.value = false
-    }
-}
+    tableData.value = records || [];
+    pagination.value.total = total;
+    loading.value = false;
+  } catch (error) {
+    console.error('获取水文监测数据失败:', error);
+    tableData.value = [];
+    pagination.value.total = 0;
+  } finally {
+    loading.value = false;
+  }
+};
 
 const getselect = async () => {
-    try {
-        const params = {
-            "filter": {
-                "logic": "and",
-                "filters": [
-                    {
-                        "field": "wbsType",
-                        "operator": "eq",
-                        "dataType": "string",
-                        "value": "PSB"
-                    },
-                    {
-                        "field": "treeLevel",
-                        "operator": "eq",
-                        "dataType": "string",
-                        "value": "1"
-                    }
-                ]
-            },
-            "sort": [
-                {
-                    "field": "orderIndex",
-                    "dir": "asc"
-                }
-            ]
-        }
-
-        const res = await wbsbGetKendoList(params)
-        console.log('【水电站列表】', res)
-
-        // 数据处理：提取水电站列表
-        if (res?.data?.data && Array.isArray(res.data.data)) {
-            hydropowerStationList.value = res.data.data
-            console.log('站点数据列表', stationDataList.value)
-            getselectTwo(searchData.value.stcd.dataDimensionData)
-            console.log('【水电站数量】', hydropowerStationList.value.length)
-        } else {
-            console.warn('【警告】未获取到有效的水电站数据')
-            hydropowerStationList.value = []
-        }
-
-    } catch (error) {
-        console.error('【错误】获取水电站列表失败:', error)
-        hydropowerStationList.value = []
-    }
-}
-const getselectTwo = async (code: any) => {
-    console.log('站点数据列表')
+  try {
     const params = {
-        "filter": {
-            "logic": "and",
-            "filters": [
-                code != 'all' ? {
-                    "field": "baseId",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": code
-                } : null,
-                {
-                    "field": "sttpCode",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": "ENG"
-                }
-            ].filter(Boolean)
-        },
-        "sort": code !== 'all'
-            ? [
-                {
-                    "field": "baseId",
-                    "dir": "asc"
-                },
-                {
-                    "field": "rvcdStepSort",
-                    "dir": "asc"
-                },
-                {
-                    "field": "rstcdStepSort",
-                    "dir": "asc"
-                },
-                {
-                    "field": "siteStepSort",
-                    "dir": "asc"
-                }
-            ]
-            : [
-                {
-                    "field": "ttpwr",
-                    "dir": "desc"
-                }
-            ],
-        "select": [
-            "stcd",
-            "stnm"
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'wbsType',
+            operator: 'eq',
+            dataType: 'string',
+            value: 'PSB'
+          },
+          {
+            field: 'treeLevel',
+            operator: 'eq',
+            dataType: 'string',
+            value: '1'
+          }
         ]
-    }
-    const res = await getVmsstbprpt(params)
-    // console.log('结果', res)
-    console.log('站点数据列表', res?.data?.data)
-    stationDataList.value = res?.data?.data || res?.data
+      },
+      sort: [
+        {
+          field: 'orderIndex',
+          dir: 'asc'
+        }
+      ]
+    };
 
-}
+    const res = await wbsbGetKendoList(params);
+    console.log('【水电站列表】', res);
+
+    // 数据处理：提取水电站列表
+    if (res?.data?.data && Array.isArray(res.data.data)) {
+      hydropowerStationList.value = res.data.data;
+      console.log('站点数据列表', stationDataList.value);
+      getselectTwo(searchData.value.stcd.dataDimensionData);
+      console.log('【水电站数量】', hydropowerStationList.value.length);
+    } else {
+      console.warn('【警告】未获取到有效的水电站数据');
+      hydropowerStationList.value = [];
+    }
+  } catch (error) {
+    console.error('【错误】获取水电站列表失败:', error);
+    hydropowerStationList.value = [];
+  }
+};
+const getselectTwo = async (code: any) => {
+  console.log('站点数据列表');
+  const params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        code != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: code
+            }
+          : null,
+        {
+          field: 'sttpCode',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'ENG'
+        }
+      ].filter(Boolean)
+    },
+    sort:
+      code !== 'all'
+        ? [
+            {
+              field: 'baseId',
+              dir: 'asc'
+            },
+            {
+              field: 'rvcdStepSort',
+              dir: 'asc'
+            },
+            {
+              field: 'rstcdStepSort',
+              dir: 'asc'
+            },
+            {
+              field: 'siteStepSort',
+              dir: 'asc'
+            }
+          ]
+        : [
+            {
+              field: 'ttpwr',
+              dir: 'desc'
+            }
+          ],
+    select: ['stcd', 'stnm']
+  };
+  const res = await getVmsstbprpt(params);
+  // console.log('结果', res)
+  console.log('站点数据列表', res?.data?.data);
+  stationDataList.value = res?.data?.data || res?.data;
+};
 
 // ==================== 事件处理 ====================
 const filterOption = (input: string, option: any) => {
-    // 使用 options 属性时，option 是标准对象 { label, value }
-    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-}
+  // 使用 options 属性时，option 是标准对象 { label, value }
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
 
 const handleHydropowerStationChange = (value: string) => {
-    console.log('【水电站选择变化】', value)
-    // 清空测站选择
-    searchData.value.stnm = null
-    searchData.value.stcd.stcdId = ''
-    // 获取该水电站下的测站列表
-    getselectTwo(value)
-    // 重新查询数据
-    // pagination.value.current = 1
-    // fetchData()
-}
+  console.log('【水电站选择变化】', value);
+  // 清空测站选择
+  searchData.value.stnm = null;
+  searchData.value.stcd.stcdId = '';
+  // 获取该水电站下的测站列表
+  getselectTwo(value);
+  // 重新查询数据
+  // pagination.value.current = 1
+  // fetchData()
+};
 
 const handleStationChange = (value: string | undefined) => {
-    console.log('【测站选择变化】', value)
-    // 更新测站ID
-    if (value) {
-        searchData.value.stcd.stcdId = value
-    } else {
-        searchData.value.stcd.stcdId = ''
-    }
-}
+  console.log('【测站选择变化】', value);
+  // 更新测站ID
+  if (value) {
+    searchData.value.stcd.stcdId = value;
+  } else {
+    searchData.value.stcd.stcdId = '';
+  }
+};
 
 const handleSearch = () => {
-    console.log('【搜索】', searchData.value)
-    pagination.value.current = 1
-    fetchData()
-}
+  console.log('【搜索】', searchData.value);
+  pagination.value.current = 1;
+  fetchData();
+};
 
 const handleReset = () => {
-    console.log('【重置】')
-    searchData.value = {
-        stcd: {
-            dataDimensionType: 'hyBase',
-            stcdId: '',
-            dataDimensionData: props.baseId || 'all'
-        },
-        stnm: null
-    }
-    pagination.value.current = 1
-    fetchData()
-}
+  console.log('【重置】');
+  searchData.value = {
+    stcd: {
+      dataDimensionType: 'hyBase',
+      stcdId: '',
+      dataDimensionData: props.baseId || 'all'
+    },
+    stnm: null
+  };
+  pagination.value.current = 1;
+  fetchData();
+};
 
 const handleTabChange = (key: string) => {
-    console.log('【Tab切换】', key)
-    tabIndex.value = key
-    pagination.value.current = 1
-    fetchData()
-}
+  console.log('【Tab切换】', key);
+  tabIndex.value = key;
+  pagination.value.current = 1;
+  fetchData();
+};
 
 const handleTableChange = (pag: any) => {
-    pagination.value.current = pag.current
-    pagination.value.pageSize = pag.pageSize
-    fetchData()
-}
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+  fetchData();
+};
 
 const handleViewDetail = (record: any) => {
-    if (record) {
-        modelStore.modalVisible = true;
-        modelStore.params.sttp = "WT";
-        modelStore.title = record.stnm ;
-        if (tabIndex.value == "27") {
-            modelStore.params.enfc = "1";
-        }
-        modelStore.params.stcd = record.stcd;
+  if (record) {
+    modelStore.modalVisible = true;
+    modelStore.params.sttp = 'WT';
+    modelStore.title = record.stnm;
+    if (tabIndex.value == '27') {
+      modelStore.params.enfc = '1';
     }
+    modelStore.params.stcd = record.stcd;
+  }
 
-    // TODO: 后续实现详情查看功能
-}
+  // TODO: 后续实现详情查看功能
+};
 
 // ==================== 生命周期 ====================
 onMounted(() => {
-    console.log('【组件挂载】水文监测工作二级页面已加载')
-    fetchData()
-    getselect()
-})
+  console.log('【组件挂载】水文监测工作二级页面已加载');
+  fetchData();
+  getselect();
+});
 </script>
 
 <style scoped lang="scss">
 .shuiwenjiancegongzwo-ej-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: #ffffff;
-    box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  box-sizing: border-box;
 
-    .search-form {
-        margin-bottom: 16px;
-        border-radius: 4px;
-    }
+  .search-form {
+    margin-bottom: 16px;
+    border-radius: 4px;
+  }
 
-    :deep(.ant-table-wrapper) {
-        flex: 1;
-        overflow: hidden;
-    }
+  :deep(.ant-table-wrapper) {
+    flex: 1;
+    overflow: hidden;
+  }
 }
 
 .text_hocer {
-    color: #2f6b98;
+  color: #2f6b98;
 }
 
 .text_hocer:hover {
-    color: #40a9ff;
+  color: #40a9ff;
 }
 </style>
diff --git a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
index 22661702..b07441a6 100644
--- a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
+++ b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
@@ -3,7 +3,6 @@
   <SidePanelItem
     title="沿程水温变化"
     :prompt="prompts"
-    :moreSelect="select"
     :datetimePicker="datetimePicker"
     @update-values="handlePanelChange1"
   >
@@ -21,7 +20,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue';
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  computed,
+  defineOptions
+} from 'vue';
 import * as echarts from 'echarts';
 import type { ECharts } from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
@@ -293,12 +299,14 @@ const init = async () => {
       filter: {
         logic: 'and',
         filters: [
-         select.value.value != 'all' ? {
-            field: 'baseId',
-            operator: 'eq',
-            dataType: 'string',
-            value: select.value.value
-          }:null,
+          select.value.value != 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: select.value.value
+              }
+            : null,
           {
             field: 'tm',
             operator: 'gte',
@@ -374,7 +382,6 @@ const init = async () => {
 };
 //监听子组件的数据变化
 const handlePanelChange1 = data => {
-
   console.log('当前所有控件状态:', data);
   if (data.moreSelect) {
     select.value.value = data.moreSelect;
@@ -402,15 +409,6 @@ const handlePanelChange1 = data => {
     const previousDate = new Date(year, month - 2, day, 0, 0, 0);
 
     // 格式化函数：将 Date 对象转为 "YYYY-MM-DD HH:mm:ss" 格式
-    function formatDate(date) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, '0');
-      const d = String(date.getDate()).padStart(2, '0');
-      const h = String(date.getHours()).padStart(2, '0');
-      const min = String(date.getMinutes()).padStart(2, '0');
-      const s = String(date.getSeconds()).padStart(2, '0');
-      return `${y}-${m}-${d} ${h}:${min}:${s}`;
-    }
 
     // 生成结果数组
     const result = [
@@ -425,12 +423,21 @@ const handlePanelChange1 = data => {
   }
 };
 
+function formatDate(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  const h = String(date.getHours()).padStart(2, '0');
+  const min = String(date.getMinutes()).padStart(2, '0');
+  const s = String(date.getSeconds()).padStart(2, '0');
+  return `${y}-${m}-${d} ${h}:${min}:${s}`;
+}
 watch(
   () => JidiSelectEventStore.selectedItem,
   newVal => {
     // if (newVal.baseId) {
-      select.value.value = newVal.wbsCode;
-      // init();
+    select.value.value = newVal.wbsCode;
+    init();
     // }
   },
   { deep: true, immediate: true }
diff --git a/frontend/src/modules/zengzhizhanfbutongji/index.vue b/frontend/src/modules/zengzhizhanfbutongji/index.vue
new file mode 100644
index 00000000..d43568ec
--- /dev/null
+++ b/frontend/src/modules/zengzhizhanfbutongji/index.vue
@@ -0,0 +1,467 @@
+<!-- SidePanelItem.vue -->
+<template>
+  <SidePanelItem
+    title="各水电基地增殖站分布统计"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <a-spin :spinning="loading" tip="加载中...">
+      <div
+        v-show="showemit && !loading"
+        ref="chartRef"
+        class="chart-container"
+      ></div>
+      <div v-show="!showemit && !loading" class="chart-container">
+        <a-empty />
+      </div>
+    </a-spin>
+  </SidePanelItem>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  computed,
+  defineOptions
+} from 'vue';
+import * as echarts from 'echarts';
+import type { ECharts } from 'echarts';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import { getKendoListCust } from '@/api/sw';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+
+import { useModelStore } from '@/store/modules/model';
+
+const modelStore = useModelStore();
+
+// 定义组件名（便于调试和递归）
+defineOptions({
+  name: 'yanchengshuiwenChangeMod'
+});
+// 改为动态获取当前时间
+const getCurrentHourTime = () => {
+  const now = new Date();
+  // 减去一小时
+  now.setHours(now.getHours() - 1);
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const hour = String(now.getHours()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hour}`;
+};
+const JidiSelectEventStore = useJidiSelectEventStore();
+const paramsOne = {
+  tm: []
+};
+const dataOne = ref('');
+// 保存原始表格数据，用于提取 minTm
+const rawTableData = ref<any[]>([]);
+// 使用 computed 使 prompts 基于原始数据的 minTm 字段
+const showemit = ref(false);
+const loading = ref(false);
+// const selectOptions: any = ref([])
+const optionsFmt = (options: any) =>
+  options.map((item: any) => ({
+    label: item.wbsName,
+    value: item.wbsCode
+  }));
+
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: ECharts | null = null;
+
+// 静态数据 - 站点名称
+const stationNames = ref([]);
+
+// 静态数据 - 水温值 (°C)，班多无数据设为 null，使用对象格式携带stcd信息
+const waterTemperatures = ref<
+  { value: number | null; stcd: string; stnm: string }[]
+>([]);
+
+// 使用 computed 使 currentTime 响应 dataOne.value 的变化
+const currentTime = computed(() => dataOne.value || getCurrentHourTime());
+// 选择器配置
+const select = ref({
+  show: true,
+  value: '',
+  options: [],
+  picker: undefined,
+  format: undefined
+});
+
+// 日期选择器配置
+const datetimePicker = ref({
+  show: true,
+  value: computed(() => getCurrentHourTime()),
+  format: 'YYYY-MM-DD HH',
+  picker: 'date' as const,
+  options: []
+});
+// 初始化图表
+const initChart = () => {
+  if (!chartRef.value) return;
+
+  chartInstance = echarts.init(chartRef.value);
+
+  const option = {
+    title: {
+      text: '水温(°C)',
+      left: 5,
+      top: 0,
+      textStyle: {
+        color: '#000000',
+        fontSize: 12,
+        fontWeight: 'normal'
+      }
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 100,
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: true,
+        filterMode: 'filter'
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: any) => {
+        if (params && params.length > 0) {
+          const data = params[0];
+          // 根据项目规范：空值统一显示为短横线 `-`
+          if (data.value != null) {
+            return `${currentTime.value}<br/>${data.name}：${data.value}°C`;
+          } else {
+            return `${currentTime.value}<br/>${data.name}：-`;
+          }
+        }
+        return '';
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: stationNames.value,
+      boundaryGap: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#8f8f8f'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#333',
+        fontSize: 12,
+        margin: 8,
+        interval: 0,
+        formatter: (value: string, index: number) => {
+          // 偶数索引（0, 2, 4, 6）的标签在上方
+          // 奇数索引（1, 3, 5）的标签在下方
+          // 通过添加空行实现上下错位
+          if (index % 2 === 0) {
+            return `${value}\n `; // 上方标签：文字 + 换行 + 空格占位
+          } else {
+            return ` \n${value}`; // 下方标签：空格占位 + 换行 + 文字
+          }
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e0e0e0',
+          type: 'solid'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      // max: 10,
+      interval: 2,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#8f8f8f'
+        }
+      },
+      axisTick: {
+        show: true,
+        length: 3,
+        lineStyle: {
+          color: '#8f8f8f'
+        }
+      },
+      axisLabel: {
+        color: '#333',
+        fontSize: 12
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e0e0e0',
+          type: 'solid'
+        }
+      }
+    },
+    series: [
+      {
+        name: '水温',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        connectNulls: true, // 连接空值两侧的线段，避免折线断开
+        lineStyle: {
+          color: '#6ca4f7',
+          width: 2
+        },
+        itemStyle: {
+          color: '#6ca4f7'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(108, 164, 247, 0.3)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(108, 164, 247, 0.05)'
+            }
+          ])
+        },
+        data: waterTemperatures.value
+      }
+    ]
+  };
+
+  chartInstance.setOption(option);
+
+  // 添加点击事件监听器
+  chartInstance.on('click', (params: any) => {
+    if (params.componentType === 'series') {
+      console.log('点击数据点:', params);
+      console.log('stcd:', params.data.stcd);
+      console.log('stnm:', params.data.stnm);
+      console.log('temperature:', params.data.value);
+      console.log('temperature:', paramsOne.tm);
+      modelStore.modalVisible = true;
+      modelStore.params.sttp = 'WT';
+      modelStore.title = params.data.stnm;
+      modelStore.params.stcd = params.data.stcd;
+      modelStore.filter.rangeTm = [paramsOne.tm[1], paramsOne.tm[0]];
+    }
+  });
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  chartInstance?.resize();
+};
+
+const init = async () => {
+  if (loading.value) return; // 防止重复请求
+  loading.value = true;
+  try {
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          select.value.value != 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: select.value.value
+              }
+            : null,
+          {
+            field: 'tm',
+            operator: 'gte',
+            dataType: 'date',
+            value: paramsOne.tm[1]
+          },
+          {
+            field: 'tm',
+            operator: 'lte',
+            dataType: 'date',
+            value: paramsOne.tm[0]
+          }
+        ].filter(Boolean)
+      },
+      sort: [{ field: 'sort', dir: 'asc' }]
+    };
+
+    let res = await getKendoListCust(params);
+    let data = res.data.data || res.data;
+
+    // 保存原始数据，用于提取 minTm
+    rawTableData.value = data;
+
+    if (data.length > 0) {
+      showemit.value = true;
+    } else {
+      showemit.value = false;
+    }
+
+    stationNames.value = data
+      .filter((item: any) => item.sttp == '1')
+      .map((item: any) => item.stnm);
+    console.log(stationNames.value);
+
+    // 修改为对象格式，携带stcd和stnm信息
+    waterTemperatures.value = data
+      .filter((item: any) => item.sttp == '2')
+      .map((item: any) => ({
+        value: item.temperature,
+        stcd: item.stcd,
+        stnm: item.stnm
+      }));
+    console.log(waterTemperatures.value);
+
+    // 数据获取完成后，初始化或更新图表
+    setTimeout(() => {
+      if (!chartInstance) {
+        initChart();
+      } else {
+        // 如果图表已存在，只更新数据
+        chartInstance.setOption({
+          xAxis: {
+            data: stationNames.value
+          },
+          series: [
+            {
+              data: waterTemperatures.value
+            }
+          ]
+        });
+      }
+      // 强制重绘，确保尺寸正确
+      setTimeout(() => {
+        chartInstance?.resize();
+      }, 100);
+    }, 50);
+  } catch (error) {
+    console.error('数据加载失败:', error);
+    showemit.value = false;
+  } finally {
+    loading.value = false;
+  }
+};
+//监听子组件的数据变化
+const handlePanelChange1 = data => {
+  console.log('当前所有控件状态:', data);
+  if (data.moreSelect) {
+    select.value.value = data.moreSelect;
+  }
+
+  if (data.datetime) {
+    dataOne.value = data.datetime;
+    const datetime = data.datetime;
+
+    // 解析日期和时间
+    const [datePart, hourPart] = datetime.split(' ');
+    const [year, month, day] = datePart.split('-').map(Number);
+
+    // 创建当前时间的 Date 对象
+    const currentDate = new Date(
+      year,
+      month - 1,
+      day,
+      parseInt(hourPart),
+      0,
+      0
+    );
+
+    // 创建一个月前的 Date 对象
+    const previousDate = new Date(year, month - 2, day, 0, 0, 0);
+
+    // 格式化函数：将 Date 对象转为 "YYYY-MM-DD HH:mm:ss" 格式
+
+    // 生成结果数组
+    const result = [
+      formatDate(currentDate), // "2026-05-15 15:00:00"
+      formatDate(previousDate) // "2026-04-15 00:00:00"
+    ];
+    paramsOne.tm = result;
+    console.log(paramsOne.tm, 'paramsOne.tm');
+  }
+  if (select.value.value || paramsOne.tm.length > 0) {
+    init();
+  }
+};
+
+function formatDate(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  const h = String(date.getHours()).padStart(2, '0');
+  const min = String(date.getMinutes()).padStart(2, '0');
+  const s = String(date.getSeconds()).padStart(2, '0');
+  return `${y}-${m}-${d} ${h}:${min}:${s}`;
+}
+watch(
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    // if (newVal.baseId) {
+    select.value.value = newVal.wbsCode;
+    init();
+    // }
+  },
+  { deep: true, immediate: true }
+);
+
+// 监听 JidiSelectEventStore.jidiData 变化，同步下拉框选项（不过滤"当前全部"项）
+watch(
+  () => JidiSelectEventStore.jidiData,
+  newVal => {
+    select.value.options = newVal.map(item => ({
+      value: item.wbsCode,
+      title: item.wbsName
+    }));
+    // 如果当前没有选中值，默认选中第一个有效项
+    if (!select.value.value && newVal.length > 0) {
+      select.value.value = newVal[0].baseId || newVal[0].wbsCode;
+    }
+  },
+  { deep: true, immediate: true }
+);
+// 页面加载时执行的逻辑
+onMounted(() => {
+  // 延迟初始化，确保 DOM 渲染完成
+  // init();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载前清理
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  chartInstance?.dispose();
+});
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  width: 100%;
+  height: 252px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:deep(.ant-spin-nested-loading) {
+  height: 252px !important;
+}
+</style>
diff --git a/frontend/src/store/modules/map.ts b/frontend/src/store/modules/map.ts
index 94280365..26043398 100644
--- a/frontend/src/store/modules/map.ts
+++ b/frontend/src/store/modules/map.ts
@@ -800,7 +800,10 @@ export const useMapStore = defineStore('map', () => {
         mapDataStore.setPointLayerCacheChecked(key, true);
       }
     } else {
-      console.warn(`图层 ${key} 没有缓存数据`);
+      // 无缓存数据：勾选态下触发加载，否则图层树勾选无缓存图层时锚点永远不出现。
+      // 不阻塞调用方（updateLayerData 会 await 本函数），交给 loadLayerData 的
+      // 请求去重 / abort / 图例暂存机制统一处理。
+      void loadLayerData(layer);
     }
   };
 
@@ -1360,6 +1363,7 @@ export const useMapStore = defineStore('map', () => {
       requestData
     });
 
+
     if (hasEffectivePointLayerCache(key, requestIdentifier)) {
       syncBackgroundCacheToReactiveStore(key);
       const cachedList = getEffectivePointLayerData(key);
diff --git a/frontend/src/store/modules/model.ts b/frontend/src/store/modules/model.ts
index f0de1029..22c67bd1 100644
--- a/frontend/src/store/modules/model.ts
+++ b/frontend/src/store/modules/model.ts
@@ -22,6 +22,12 @@ export const useModelStore = defineStore('model', () => {
   const wqShow = ref<boolean>(false); // 水质 AI 预测显示
   const fishTabInfo = ref<any>(null); // 鱼类监测数据信息
   const selectedAnchorPoint = ref<any>(null); // 地图筛选下拉选中的点位对象（供基本信息等面板消费）
+  // 全局抽屉内容模式：'basicInfo' 展示基础信息，'speciesIntro' 展示物种介绍（动物/植物介绍）
+  const globalDrawerMode = ref<'basicInfo' | 'speciesIntro'>('basicInfo');
+  // 鱼种下拉选中的物种列表（供物种介绍面板展示；预留 image/intro 等字段，后续对接真实数据源）
+  const selectedFishSpecies = ref<
+    Array<{ label: string; value: string; image?: string; intro?: string }>
+  >([]);
 
   const params = ref<{
     sttp: string;
@@ -77,6 +83,8 @@ export const useModelStore = defineStore('model', () => {
     wtConfig,
     wqShow,
     fishTabInfo,
-    selectedAnchorPoint
+    selectedAnchorPoint,
+    globalDrawerMode,
+    selectedFishSpecies
   };
 });
diff --git a/frontend/src/store/modules/permission.ts b/frontend/src/store/modules/permission.ts
index 058de331..06955348 100644
--- a/frontend/src/store/modules/permission.ts
+++ b/frontend/src/store/modules/permission.ts
@@ -8,6 +8,17 @@ import { ref } from 'vue';
 const modules = import.meta.glob('../../views/**/**.vue');
 export const Layout = () => import('@/layout/index.vue');
 
+// 路由生成后后台预取所有页面 chunk：首次导航若依赖懒加载 chunk 下载，
+// 会被首页地图加载的十几个接口挤占连接导致页面迟迟不切换，预取后切页即时生效。
+let viewPrefetchStarted = false;
+const prefetchViewChunks = () => {
+  if (viewPrefetchStarted) return;
+  viewPrefetchStarted = true;
+  Object.values(modules).forEach(load => {
+    load().catch(() => {});
+  });
+};
+
 const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
   const res: RouteRecordRaw[] = [];
   routes.forEach(route => {
@@ -61,6 +72,8 @@ export const usePermissionStore = defineStore('permission', () => {
           const asyncRoutes: any = response;
           const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
           setRoutes(accessedRoutes);
+          // 后台预取页面 chunk，不等结果，不阻塞导航
+          prefetchViewChunks();
           resolve(accessedRoutes);
         })
         .catch(error => {
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 5d26a02b..732444b5 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -173,15 +173,21 @@ export function downloadFileByUrl(url: string, fileName?: string) {
       document.body.removeChild(link);
     });
 }
-const modules = import.meta.glob('@/assets/legend/*.{svg,png}', {
-  eager: true
+// 图例图标以 data URL 形式内联进打包产物（?raw + encodeURIComponent），
+// 图标零网络请求、无跨域/连接池争用问题，所有图层（无论是否勾选）的图标均即时可用。
+const modules = import.meta.glob('@/assets/legend/*.svg', {
+  eager: true,
+  query: '?raw',
+  import: 'default'
 });
 // 图例图标映射
 export const iconMap: Record<string, string> = {};
 Object.entries(modules).forEach(([path, module]) => {
-  const fileName = path.match(/\/([^/]+)\.(svg|png)$/)?.[1];
+  const fileName = path.match(/\/([^/]+)\.svg$/)?.[1];
   if (fileName) {
-    iconMap[fileName] = (module as any).default;
+    iconMap[fileName] = `data:image/svg+xml,${encodeURIComponent(
+      module as string
+    )}`;
   }
 });
 // 获取图标路径
diff --git a/frontend/src/views/moXingGuanLi/MapStationPicker.vue b/frontend/src/views/moXingGuanLi/MapStationPicker.vue
new file mode 100644
index 00000000..9bd701b7
--- /dev/null
+++ b/frontend/src/views/moXingGuanLi/MapStationPicker.vue
@@ -0,0 +1,296 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="title"
+    :footer="null"
+    width="1200px"
+    :body-style="{ padding: 0, height: '620px' }"
+    :z-index="1050"
+    @cancel="handleCancel"
+    destroy-on-close
+  >
+    <div class="msp-toolbar">
+      <span class="msp-toolbar-label">搜索范围：</span>
+      <a-input-number
+        v-model:value="searchRadius"
+        :min="1"
+        :max="500"
+        style="width: 80px"
+        @blur="onRadiusConfirm"
+        @keyup.enter="onRadiusConfirm"
+      />
+      <span class="msp-unit">km</span>
+      <a-button
+        type="primary"
+        size="small"
+        style="margin-left: 8px"
+        @click="handleSave"
+        >保存设置</a-button
+      >
+    </div>
+
+    <div class="msp-map-area">
+      <div ref="mapContainer" class="msp-map-container" />
+
+      <!-- 地图工具按钮（悬浮在地图底部） -->
+      <div class="msp-map-tools">
+        <a-button size="small" class="msp-tool-btn" @click="handleZoomIn"
+          >+</a-button
+        >
+        <a-button size="small" class="msp-tool-btn" @click="handleZoomOut"
+          >-</a-button
+        >
+        <a-button
+          size="small"
+          class="msp-tool-btn"
+          :type="isMeasuring ? 'primary' : 'default'"
+          @click="handleToggleMeasure"
+          >测距</a-button
+        >
+        <a-button size="small" class="msp-tool-btn" @click="handleClearMeasure"
+          >清除</a-button
+        >
+      </div>
+
+      <!-- 右侧悬浮面板 -->
+      <div class="msp-right-panel">
+        <div class="msp-panel-title">站点列表</div>
+        <div class="msp-station-list">
+          <div
+            v-for="station in filteredStations"
+            :key="station.name"
+            class="msp-station-item"
+            :class="{ 'msp-station-selected': selectedNames.has(station.name) }"
+            @click="toggleStation(station.name)"
+          >
+            <span class="msp-station-name">{{ station.name }}</span>
+            <span class="msp-station-type">{{ station.type }}</span>
+            <span
+              class="msp-station-check"
+              :class="{ 'msp-check-visible': selectedNames.has(station.name) }"
+            >
+              <CheckOutlined />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+import { CheckOutlined } from '@ant-design/icons-vue';
+import { StationMap } from './map.station';
+
+const props = defineProps<{
+  visible: boolean;
+  title: string;
+  type: 'weather' | 'upstream';
+  centerLon?: number;
+  centerLat?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', val: boolean): void;
+  (e: 'save', selected: string[]): void;
+}>();
+
+const stationMap = new StationMap();
+const mapContainer = ref<HTMLElement | null>(null);
+const isMeasuring = ref(false);
+
+const searchRadius = ref(10);
+
+const allStations = [
+  { name: '气象站A', type: '气象站' },
+  { name: '气象站B', type: '气象站' },
+  { name: '气象站C', type: '气象站' },
+  { name: '上游站1', type: '上游站' },
+  { name: '上游站2', type: '上游站' },
+  { name: '上游站3', type: '上游站' }
+];
+
+const filteredStations = computed(() => {
+  const targetTypeLabel = props.type === 'weather' ? '气象站' : '上游站';
+  return allStations.filter(s => s.type === targetTypeLabel);
+});
+
+const selectedNames = ref<Set<string>>(new Set());
+
+const toggleStation = (name: string) => {
+  const s = new Set(selectedNames.value);
+  if (s.has(name)) s.delete(name);
+  else s.add(name);
+  selectedNames.value = s;
+};
+
+const initMap = async () => {
+  await nextTick();
+  setTimeout(() => {
+    if (!mapContainer.value) return;
+    const lon = props.centerLon ?? 114.171;
+    const lat = props.centerLat ?? 38;
+    stationMap.init(mapContainer.value, lon, lat, searchRadius.value);
+  }, 100);
+};
+
+watch(
+  () => props.visible,
+  async val => {
+    if (val) {
+      // 重置状态
+      searchRadius.value = 10;
+      isMeasuring.value = false;
+      selectedNames.value = new Set();
+      await initMap();
+    } else {
+      stationMap.destroy();
+    }
+  }
+);
+
+// 搜索范围确认后更新地图（失焦或回车）
+const onRadiusConfirm = () => {
+  const val = searchRadius.value;
+  if (val && val >= 1) {
+    stationMap.updateRange(val);
+  }
+};
+
+const handleZoomIn = () => stationMap.zoomIn();
+const handleZoomOut = () => stationMap.zoomOut();
+const handleToggleMeasure = () => {
+  stationMap.toggleMeasure();
+  isMeasuring.value = stationMap.isMeasureActive;
+};
+const handleClearMeasure = () => {
+  stationMap.clearMeasure();
+  isMeasuring.value = false;
+};
+
+const handleSave = () => {
+  emit('save', Array.from(selectedNames.value));
+  emit('update:visible', false);
+};
+const handleCancel = () => emit('update:visible', false);
+</script>
+
+<style scoped>
+.msp-toolbar {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+.msp-toolbar-label {
+  font-size: 13px;
+  color: #303133;
+  white-space: nowrap;
+}
+.msp-unit {
+  font-size: 13px;
+  color: #606266;
+  margin-left: 4px;
+  margin-right: 8px;
+}
+.msp-map-area {
+  position: relative;
+  height: calc(100% - 42px);
+  overflow: hidden;
+}
+.msp-map-container {
+  width: 100%;
+  height: 100%;
+}
+.msp-map-tools {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 6px 10px;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+}
+.msp-tool-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  min-width: 30px;
+  height: 30px;
+}
+.msp-right-panel {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  bottom: 12px;
+  width: 200px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 6px;
+  padding: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+}
+.msp-panel-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #005293;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #e8ecf1;
+}
+.msp-station-list {
+  flex: 1;
+  overflow-y: auto;
+  margin: 0 -10px;
+  padding: 0 10px;
+}
+.msp-station-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s;
+  margin-bottom: 4px;
+}
+.msp-station-item:hover {
+  background: #f0f5ff;
+  border-color: #d6e4ff;
+}
+.msp-station-selected {
+  background: #f0f5ff;
+  border-color: #005293;
+}
+.msp-station-name {
+  flex: 1;
+  font-size: 13px;
+  color: #303133;
+}
+.msp-station-type {
+  font-size: 11px;
+  color: #909399;
+  margin-right: 8px;
+  white-space: nowrap;
+}
+.msp-station-check {
+  width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #005293;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.msp-check-visible {
+  opacity: 1;
+}
+</style>
diff --git a/frontend/src/views/moXingGuanLi/SampleDataModal.vue b/frontend/src/views/moXingGuanLi/SampleDataModal.vue
new file mode 100644
index 00000000..046f8e2c
--- /dev/null
+++ b/frontend/src/views/moXingGuanLi/SampleDataModal.vue
@@ -0,0 +1,217 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="title"
+    width="80%"
+    style="min-width: 1200px"
+    :z-index="1050"
+    @cancel="handleCancel"
+    :footer="false"
+    destroy-on-close
+  >
+    <!-- 顶部：站点tabs -->
+    <div class="sdm-top-tabs">
+      <div
+        v-for="(station, idx) in stations"
+        :key="station"
+        class="sdm-tab-item"
+        :class="{ 'sdm-tab-active': activeTabIndex === idx }"
+        @click="activeTabIndex = idx"
+      >
+        {{ station }}
+      </div>
+    </div>
+
+    <!-- 查询栏 -->
+    <div class="sdm-search-bar">
+      <div class="sdm-search-left">
+        <a-radio-group v-model:value="currentElement" button-style="solid">
+          <a-radio-button
+            v-for="el in elements"
+            :key="el.value"
+            :value="el.value"
+          >
+            {{ el.label }}
+          </a-radio-button>
+        </a-radio-group>
+        <a-range-picker
+          v-model:value="searchDateRange"
+          style="width: 260px; margin-left: 12px"
+        />
+        <a-button type="primary" style="margin-left: 12px" @click="handleQuery">
+          查询
+        </a-button>
+      </div>
+      <div class="sdm-search-right">
+        <a-button type="primary" style="margin-left: 12px" @click="handleQuery">
+          自动识别
+        </a-button>
+        <a-button danger style="margin-left: 8px" @click="handleBatchDelete">
+          批量删除
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 表格区域 -->
+    <div class="sdm-table-area">
+      <BasicTable
+        :columns="tableColumns"
+        :table-data="tableData"
+        :loading="loading"
+        :enable-row-selection="true"
+        row-key="id"
+        :pagination="{ pageSize: 10 }"
+      >
+        <template #operation="{ record }">
+          <a-button danger size="small" @click="handleDelete(record)">
+            删除
+          </a-button>
+        </template>
+      </BasicTable>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+
+const props = defineProps<{
+  visible: boolean;
+  title: string;
+  stations: string[]; // 选择的站点列表
+  defaultDateRange: any; // 从父页带过来的时间范围
+  stationType: 'weather' | 'upstream';
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', val: boolean): void;
+  (e: 'delete', records: any[]): void;
+}>();
+
+// 当前激活的tab（站点）
+const activeTabIndex = ref(0);
+
+// 要素列表
+const elements = ref([
+  { label: '降雨', value: 'rain' },
+  { label: '气温', value: 'temp' },
+  { label: '气压', value: 'press' },
+  { label: '湿度', value: 'humidity' },
+  { label: '风速', value: 'windSpeed' },
+  { label: '风向', value: 'windDir' }
+]);
+const currentElement = ref('rain');
+
+// 搜索时间范围
+const searchDateRange = ref<any>(props.defaultDateRange);
+
+// 表格列
+const tableColumns = computed(() => [
+  {
+    title: '监测时间',
+    dataIndex: 'monitorTime',
+    width: 180
+  },
+  {
+    title: '数值',
+    dataIndex: 'value',
+    width: 120
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+    width: 80
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 80,
+    fixed: 'right'
+  }
+]);
+
+// 表格数据（模拟固定数据）
+const mockData = [
+  { id: 1, monitorTime: '2024-01-01 00:00', value: '12.5', unit: 'mm' },
+  { id: 2, monitorTime: '2024-01-01 01:00', value: '0.0', unit: 'mm' },
+  { id: 3, monitorTime: '2024-01-01 02:00', value: '0.0', unit: 'mm' },
+  { id: 4, monitorTime: '2024-01-01 03:00', value: '5.2', unit: 'mm' },
+  { id: 5, monitorTime: '2024-01-01 04:00', value: '8.7', unit: 'mm' },
+  { id: 6, monitorTime: '2024-01-01 05:00', value: '0.0', unit: 'mm' },
+  { id: 7, monitorTime: '2024-01-01 06:00', value: '0.0', unit: 'mm' },
+  { id: 8, monitorTime: '2024-01-01 07:00', value: '0.0', unit: 'mm' }
+];
+
+const loading = ref(false);
+const tableData = ref(mockData);
+
+// 操作
+const handleQuery = () => {
+  // TODO: 接口查询，预留
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+};
+
+const handleDelete = (record: any) => {
+  tableData.value = tableData.value.filter(r => r.id !== record.id);
+  emit('delete', [record]);
+};
+
+const handleBatchDelete = () => {
+  // TODO: 批量删除需要从表格selection获取选中行，BasicTable透传selection后处理
+  // 先预留位置，接口后续接入
+};
+
+const handleCancel = () => {
+  emit('update:visible', false);
+};
+</script>
+
+<style scoped lang="scss">
+.sdm-top-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e8e8e8;
+}
+.sdm-tab-item {
+  padding: 6px 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  transition: all 0.2s;
+}
+.sdm-tab-item:hover {
+  color: #1890ff;
+  border-color: #1890ff;
+}
+.sdm-tab-active {
+  background: #1890ff;
+  color: #fff;
+  border-color: #1890ff;
+}
+
+.sdm-search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  background: #fafafa;
+  border-radius: 4px;
+}
+.sdm-search-left,
+.sdm-search-right {
+  display: flex;
+  align-items: center;
+}
+.sdm-table-area {
+  min-height: 360px;
+}
+</style>
diff --git a/frontend/src/views/moXingGuanLi/map.station.ts b/frontend/src/views/moXingGuanLi/map.station.ts
new file mode 100644
index 00000000..2b785360
--- /dev/null
+++ b/frontend/src/views/moXingGuanLi/map.station.ts
@@ -0,0 +1,308 @@
+import OlMap from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import WMTS from 'ol/source/WMTS';
+import WMTSTileGrid from 'ol/tilegrid/WMTS';
+import { defaults as defaultInteractions, Draw } from 'ol/interaction';
+import { getTopLeft, getWidth } from 'ol/extent';
+import { get as getProjection, fromLonLat } from 'ol/proj';
+import { getLength } from 'ol/sphere';
+import Feature from 'ol/Feature';
+import LineString from 'ol/geom/LineString';
+import Point from 'ol/geom/Point';
+import Polygon from 'ol/geom/Polygon';
+import Style from 'ol/style/Style';
+import Stroke from 'ol/style/Stroke';
+import CircleStyle from 'ol/style/Circle';
+import Fill from 'ol/style/Fill';
+import Text from 'ol/style/Text';
+
+// WMTS 底图配置
+const VITE_APP_MAP_URL = import.meta.env.VITE_APP_MAP_URL || '';
+const BASE_LAYER_CONFIG = {
+  id: 'customBaseLayer',
+  key: 'customBaseLayer',
+  type: 'wmts',
+  name: 'qgc_sx_gjjdx_arcgistiles_l13',
+  url:
+    VITE_APP_MAP_URL +
+    '/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=qgc_qsj_arcgistiles_l13&STYLE=&TILEMATRIX=EPSG:3857_qgc_qsj_arcgistiles_l13:{z}&TILEMATRIXSET=EPSG:3857_qgc_qsj_arcgistiles_l13&FORMAT=image/png&TILECOL={x}&TILEROW={y}',
+  matrixIds_index: [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12'
+  ],
+  tileMatrixSetID: 'EPSG:3857_qgc_qsj_arcgistiles_l13'
+};
+
+export class StationMap {
+  map: OlMap | null = null;
+  view: View | null = null;
+  private measureSource: VectorSource | null = null;
+  private measureLayer: VectorLayer | null = null;
+  private drawInteraction: Draw | null = null;
+  private isMeasuring = false;
+  private anchorLayer: VectorLayer | null = null;
+  private anchorSource: VectorSource | null = null;
+  private rangeSource: VectorSource | null = null;
+  private rangeLayer: VectorLayer | null = null;
+  private centerLon = 114.171;
+  private centerLat = 38;
+
+  init(
+    container: HTMLElement,
+    centerLon: number,
+    centerLat: number,
+    radiusKm: number
+  ) {
+    this.centerLon = centerLon;
+    this.centerLat = centerLat;
+    const zoom = this.calcZoomByRadius(radiusKm);
+
+    const projection = getProjection('EPSG:3857');
+    if (!projection) return;
+    const projectionExtent = projection.getExtent();
+    const size = getWidth(projectionExtent) / 256;
+
+    const resolutions: number[] = [];
+    const matrixIds: string[] = [];
+    const maxZoom = 13;
+    for (let z = 0; z <= maxZoom; ++z) {
+      resolutions[z] = size / Math.pow(2, z);
+      matrixIds[z] = `${BASE_LAYER_CONFIG.tileMatrixSetID}:${z}`;
+    }
+
+    const wmtsLayer = new TileLayer({
+      source: new WMTS({
+        url: BASE_LAYER_CONFIG.url.split('?')[0],
+        layer: 'qgc_qsj_arcgistiles_l13',
+        matrixSet: BASE_LAYER_CONFIG.tileMatrixSetID,
+        format: 'image/png',
+        projection: projection,
+        tileGrid: new WMTSTileGrid({
+          origin: getTopLeft(projectionExtent),
+          resolutions: resolutions,
+          matrixIds: matrixIds
+        }),
+        style: 'default',
+        wrapX: true,
+        crossOrigin: 'anonymous'
+      })
+    });
+
+    // 测量图层
+    this.measureSource = new VectorSource();
+    this.measureLayer = new VectorLayer({
+      source: this.measureSource,
+      style: new Style({
+        fill: new Fill({ color: 'rgba(255, 77, 79, 0.15)' }),
+        stroke: new Stroke({ color: '#ff4d4f', width: 2 })
+      })
+    });
+
+    // 锚点图层（预留）
+    this.anchorSource = new VectorSource();
+    this.anchorLayer = new VectorLayer({
+      source: this.anchorSource,
+      style: new Style({
+        image: new CircleStyle({
+          radius: 6,
+          fill: new Fill({ color: '#1890ff' }),
+          stroke: new Stroke({ color: '#fff', width: 2 })
+        })
+      })
+    });
+
+    // 范围指示圆
+    this.rangeSource = new VectorSource();
+    this.rangeLayer = new VectorLayer({
+      source: this.rangeSource,
+      style: new Style({
+        fill: new Fill({ color: 'rgba(255, 77, 79, 0.2)' }),
+        stroke: new Stroke({ color: '#ff4d4f', width: 2, lineDash: [6, 4] })
+      })
+    });
+
+    this.view = new View({
+      center: fromLonLat([centerLon, centerLat]),
+      zoom: zoom,
+      minZoom: 4,
+      maxZoom: 16,
+      projection: 'EPSG:3857'
+    });
+
+    this.map = new OlMap({
+      target: container,
+      layers: [wmtsLayer, this.measureLayer, this.anchorLayer, this.rangeLayer],
+      view: this.view,
+      controls: [],
+      interactions: defaultInteractions()
+    });
+
+    // 绘制初始范围圆
+    this.drawRangeCircle(radiusKm);
+  }
+
+  private calcZoomByRadius(radiusKm: number): number {
+    return Math.max(4, Math.min(14, Math.round(14 - Math.log2(radiusKm))));
+  }
+
+  destroy() {
+    if (this.map) {
+      this.map.setTarget(undefined);
+      this.map = null;
+    }
+    this.view = null;
+  }
+
+  /**
+   * 测距
+   */
+  toggleMeasure() {
+    if (!this.map || !this.measureSource) return;
+    this.isMeasuring ? this.stopMeasure() : this.startMeasure();
+  }
+
+  get isMeasureActive() {
+    return this.isMeasuring;
+  }
+
+  private startMeasure() {
+    if (!this.map || !this.measureSource) return;
+    this.isMeasuring = true;
+
+    this.drawInteraction = new Draw({
+      source: this.measureSource,
+      type: 'LineString',
+      style: new Style({
+        stroke: new Stroke({ color: '#ff4d4f', width: 2, lineDash: [4, 4] }),
+        image: new CircleStyle({
+          radius: 4,
+          fill: new Fill({ color: '#ff4d4f' })
+        })
+      })
+    });
+
+    this.drawInteraction.on('drawstart', () => {
+      this.measureSource?.clear();
+    });
+
+    this.drawInteraction.on('drawend', evt => {
+      const line = evt.feature.getGeometry() as LineString;
+      if (!line) return;
+      const length = getLength(line);
+      const label =
+        length > 1000
+          ? `${(length / 1000).toFixed(2)} km`
+          : `${length.toFixed(1)} m`;
+
+      const coords = line.getLastCoordinate();
+      const labelFeature = new Feature(new Point(coords));
+      labelFeature.setStyle(
+        new Style({
+          text: new Text({
+            text: label,
+            font: '12px sans-serif',
+            fill: new Fill({ color: '#ff4d4f' }),
+            stroke: new Stroke({ color: '#fff', width: 3 }),
+            offsetY: -10
+          })
+        })
+      );
+      this.measureSource?.addFeature(labelFeature);
+    });
+
+    this.map.addInteraction(this.drawInteraction);
+  }
+
+  private stopMeasure() {
+    if (!this.map || !this.drawInteraction) return;
+    this.map.removeInteraction(this.drawInteraction);
+    this.drawInteraction = null;
+    this.isMeasuring = false;
+  }
+
+  clearMeasure() {
+    this.measureSource?.clear();
+    if (this.isMeasuring) this.stopMeasure();
+  }
+
+  zoomIn() {
+    if (!this.view) return;
+    const z = this.view.getZoom() || 6;
+    this.view.animate({ zoom: z + 1, duration: 250 });
+  }
+
+  zoomOut() {
+    if (!this.view) return;
+    const z = this.view.getZoom() || 6;
+    this.view.animate({ zoom: z - 1, duration: 250 });
+  }
+
+  flyTo(lon: number, lat: number, radiusKm: number) {
+    if (!this.view) return;
+    this.view.animate({
+      center: fromLonLat([lon, lat]),
+      zoom: this.calcZoomByRadius(radiusKm),
+      duration: 500
+    });
+  }
+
+  /**
+   * 更新搜索范围：重新定位并绘制范围圆
+   */
+  updateRange(radiusKm: number) {
+    if (!this.view) return;
+    this.view.animate({
+      zoom: this.calcZoomByRadius(radiusKm),
+      duration: 300
+    });
+    this.drawRangeCircle(radiusKm);
+  }
+
+  private drawRangeCircle(radiusKm: number) {
+    if (!this.rangeSource) return;
+    this.rangeSource.clear();
+
+    const radiusM = radiusKm * 1000;
+    const numPoints = 64;
+    const coords: number[][] = [];
+    const R = 6371000; // 地球平均半径（米）
+
+    for (let i = 0; i <= numPoints; i++) {
+      const bearing = (i * 2 * Math.PI) / numPoints; // 弧度，顺时针从北
+      const lat1 = (this.centerLat * Math.PI) / 180;
+      const lon1 = (this.centerLon * Math.PI) / 180;
+
+      // 球面 destination 计算（haversine 公式逆运算）
+      const lat2 = Math.asin(
+        Math.sin(lat1) * Math.cos(radiusM / R) +
+          Math.cos(lat1) * Math.sin(radiusM / R) * Math.cos(bearing)
+      );
+      const lon2 =
+        lon1 +
+        Math.atan2(
+          Math.sin(bearing) * Math.sin(radiusM / R) * Math.cos(lat1),
+          Math.cos(radiusM / R) - Math.sin(lat1) * Math.sin(lat2)
+        );
+
+      coords.push(fromLonLat([(lon2 * 180) / Math.PI, (lat2 * 180) / Math.PI]));
+    }
+
+    const polygon = new Polygon([coords]);
+    const feature = new Feature(polygon);
+    this.rangeSource.addFeature(feature);
+  }
+}
diff --git a/frontend/src/views/moXingGuanLi/moXingGuanLi.vue b/frontend/src/views/moXingGuanLi/moXingGuanLi.vue
new file mode 100644
index 00000000..3527396c
--- /dev/null
+++ b/frontend/src/views/moXingGuanLi/moXingGuanLi.vue
@@ -0,0 +1,2171 @@
+<template>
+  <div class="moXingGuanLi-page">
+    <!-- ============ 左侧栏：数据列表 ============ -->
+    <div class="left-panel">
+      <div class="data-list-card">
+        <div class="panel-title">数据列表</div>
+        <!-- 顶部 4 个切换按钮 -->
+        <div class="data-tabs">
+          <div
+            v-for="tab in dataTabs"
+            :key="tab.key"
+            class="data-tab"
+            :class="{ active: activeDataTab === tab.key }"
+            @click="onSwitchDataTab(tab.key)"
+          >
+            {{ tab.label }}
+          </div>
+        </div>
+
+        <!-- 三级筛选 -->
+        <div class="filters">
+          <a-select
+            v-model:value="filterAllBase"
+            placeholder="全部基地"
+            style="width: 100%"
+            @change="resetTrain"
+          >
+            <a-select-option v-for="b in baseOptions" :key="b" :value="b">{{
+              b
+            }}</a-select-option>
+          </a-select>
+          <a-select
+            v-model:value="filterStationKw"
+            placeholder="电站关键字"
+            style="width: 100%"
+            show-search
+            @change="resetTrain"
+          >
+            <a-select-option v-for="s in stationOptions" :key="s" :value="s">{{
+              s
+            }}</a-select-option>
+          </a-select>
+          <a-select
+            v-model:value="filterWaterStation"
+            placeholder="水温站关键字"
+            style="width: 100%"
+            show-search
+            @change="resetTrain"
+          >
+            <a-select-option
+              v-for="w in waterStationOptions"
+              :key="w"
+              :value="w"
+            >
+              {{ w }}
+            </a-select-option>
+          </a-select>
+        </div>
+
+        <!-- 站点名称列表 -->
+        <div class="station-list">
+          <div
+            v-for="site in siteList"
+            :key="site"
+            class="station-item"
+            :class="{ active: activeSite === site }"
+            @click="onSelectSite(site)"
+          >
+            <span class="station-name">{{ site }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ============ 右侧栏：上下分层 ============ -->
+    <div class="right-panel">
+      <!-- 右侧上区域（60%）：算法 + 训练 -->
+      <div class="right-top">
+        <!-- 选择算法卡片 -->
+        <div class="algo-card">
+          <div class="panel-title">选择算法</div>
+          <a-select
+            v-model:value="activeModel"
+            :disabled="step === 3"
+            style="width: 100%; margin-top: 12px"
+            @change="onModelChange"
+          >
+            <a-select-option
+              v-for="opt in modelOptions"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </a-select-option>
+          </a-select>
+          <div class="algo-intro" v-show="activeModel == '1'">
+            <div>
+              <p style="font-weight: bold; color: #000">算法简介:</p>
+              <div class="algo-text">
+                通过分析各项因素与预测目标之间的线性关系进行预测，模型简单、训练速度快，适合作为基础模型和数据关系较简单的预测场景。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">
+                <span> 训练速度: </span>
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+              </p>
+              <div class="algo-text">非常快，适合快速建立模型和反复测试。</div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">
+                <span> 数据要求: </span>
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+              </p>
+              <div class="algo-text">
+                对数据量要求不高，但特征与预测目标之间最好存在比较明显的规律。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">适用场景:</p>
+              <div class="algo-text">
+                适合数据关系比较简单，或者希望快速建立一个基础预测模型的场景。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">推荐选择:</p>
+              <div class="algo-text">
+                如果不确定应该选择哪个算法，可以先使用线性回归作为基础模型进行对比。
+              </div>
+            </div>
+          </div>
+          <div class="algo-intro" v-show="activeModel == '2'">
+            <div>
+              <p style="font-weight: bold; color: #000">算法简介:</p>
+              <div class="algo-text">
+                通过建立多棵决策树共同进行预测，可以处理比较复杂的非线性关系，对数据中的异常和波动具有较好的适应能力。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">
+                <span>训练速度: </span>
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+              </p>
+              <div class="algo-text">速度较快，适合中小规模数据集。</div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">
+                <span>数据要求: </span>
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+              </p>
+              <div class="algo-text">
+                对数据要求相对宽松，不需要进行非常复杂的数据处理。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">适用场景:</p>
+              <div class="algo-text">
+                适合数据量中等、影响因素较多，而且不同因素之间存在复杂关系的预测场景。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">推荐选择:</p>
+              <div class="algo-text">
+                如果数据量不是特别大，同时影响因素比较多，可以优先尝试随机森林。
+              </div>
+            </div>
+          </div>
+          <div class="algo-intro" v-show="activeModel == '3'">
+            <div>
+              <p style="font-weight: bold; color: #000">算法简介:</p>
+              <div class="algo-text">
+                通过不断建立新的决策树来修正之前预测中的错误，能够学习复杂的规律和变量之间的关系，通常具有较好的预测精度。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">
+                <span>训练速度: </span>
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+              </p>
+              <div class="algo-text">
+                训练速度较快，适合中等规模的数据训练。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">
+                <span>数据要求: </span>
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+              </p>
+              <div class="algo-text">
+                非常适合结构化数据，例如水温、流量、气象等多种数据组合形成的训练数据。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">适用场景:</p>
+              <div class="algo-text">
+                适合多个水文、气象因素共同影响预测目标，并且希望获得较高预测精度的场景。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">推荐选择:</p>
+              <div class="algo-text">
+                如果希望获得较好的预测精度，并且训练数据量中等，推荐优先尝试XGBoost。
+              </div>
+            </div>
+          </div>
+          <div class="algo-intro" v-show="activeModel == '4'">
+            <div>
+              <p style="font-weight: bold; color: #000">算法简介:</p>
+              <div class="algo-text">
+                与XGBoost类似，也是通过多轮决策树学习数据规律，但针对大规模数据进行了优化，训练速度快、占用资源少。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">
+                <span>训练速度: </span>
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+              </p>
+              <div class="algo-text">
+                四种算法中通常速度较快，特别适合数据量较大的训练任务。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">
+                <span>数据要求: </span>
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+                <StarFilled style="color: #000000; font-size: 14px" />
+              </p>
+              <div class="algo-text">
+                非常适合数据量大、特征数量多的结构化数据。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">适用场景:</p>
+              <div class="algo-text">
+                适合历史数据量较大、输入因素较多、需要较快训练速度的预测场景。
+              </div>
+            </div>
+            <div>
+              <p style="font-weight: bold; color: #000">推荐选择:</p>
+              <div class="algo-text">
+                如果训练数据量比较大、特征比较多，同时希望缩短训练时间，推荐使用LightGBM。
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 模型训练步骤条卡片 -->
+        <div class="train-card">
+          <div class="panel-title">模型训练</div>
+          <a-steps :current="step" class="train-steps" @change="handleChange">
+            <a-step v-for="(s, idx) in stepTitles" :key="idx" :title="s" />
+          </a-steps>
+
+          <div
+            class="step-content"
+            :class="{ 'step-content-narrow': step === 2 }"
+          >
+            <!-- ======= 步骤 1：样本准备 ======= -->
+            <div v-show="step === 0" class="step-panel">
+              <div class="form-row">
+                <span class="form-label"
+                  ><span class="required">*</span>选择时间范围：</span
+                >
+                <a-range-picker
+                  v-model:value="sampleDateRange"
+                  style="width: 100%"
+                />
+              </div>
+              <div class="form-row">
+                <span class="form-label">气象站点：</span>
+                <div class="row-inline">
+                  <a-select
+                    v-model:value="weatherStation"
+                    placeholder="选择气象站点（可多选）"
+                    mode="multiple"
+                    style="flex: 1"
+                  >
+                    <a-select-option
+                      v-for="w in weatherStations"
+                      :key="w"
+                      :value="w"
+                    >
+                      {{ w }}
+                    </a-select-option>
+                  </a-select>
+                  <img
+                    class="view-btn1"
+                    src="@/assets/svg/station.svg"
+                    alt="地图选择"
+                    @click="openWeatherMapModal"
+                  />
+                  <a-button
+                    class="view-btn"
+                    :disabled="
+                      weatherStation.length === 0 ||
+                      !sampleDateRange ||
+                      !sampleDateRange[0] ||
+                      !sampleDateRange[1]
+                    "
+                    @click="handleViewSample('weather')"
+                    >查看样本</a-button
+                  >
+                </div>
+              </div>
+              <MapStationPicker
+                v-model:visible="weatherModalVisible"
+                title="选择气象站点"
+                type="weather"
+                :center-lon="114.171"
+                :center-lat="38"
+                @save="onWeatherMapSave"
+              />
+              <div class="form-row">
+                <span class="form-label">上游站点：</span>
+                <div class="row-inline">
+                  <a-select
+                    v-model:value="upstreamStation"
+                    placeholder="选择上游站点（可多选）"
+                    mode="multiple"
+                    style="flex: 1"
+                  >
+                    <a-select-option
+                      v-for="u in upstreamStations"
+                      :key="u"
+                      :value="u"
+                    >
+                      {{ u }}
+                    </a-select-option>
+                  </a-select>
+                  <img
+                    class="view-btn1"
+                    src="@/assets/svg/station.svg"
+                    alt="地图选择"
+                    @click="openUpstreamMapModal"
+                  />
+                  <a-button
+                    class="view-btn"
+                    :disabled="
+                      upstreamStation.length === 0 ||
+                      !sampleDateRange ||
+                      !sampleDateRange[0] ||
+                      !sampleDateRange[1]
+                    "
+                    @click="handleViewSample('upstream')"
+                    >查看样本</a-button
+                  >
+                </div>
+              </div>
+              <MapStationPicker
+                v-model:visible="upstreamModalVisible"
+                title="选择上游站点"
+                type="upstream"
+                :center-lon="114.171"
+                :center-lat="38"
+                @save="onUpstreamMapSave"
+              />
+              <SampleDataModal
+                v-model:visible="weatherSampleVisible"
+                title="数据样本"
+                :stations="weatherStation"
+                :default-date-range="sampleDateRange"
+                station-type="weather"
+              />
+              <SampleDataModal
+                v-model:visible="upstreamSampleVisible"
+                title="数据样本"
+                :stations="upstreamStation"
+                :default-date-range="sampleDateRange"
+                station-type="upstream"
+              />
+              <div class="step-actions">
+                <a-button type="primary" @click="nextStep">下一步</a-button>
+              </div>
+            </div>
+
+            <!-- ======= 步骤 2：参数设置 ======= -->
+            <div v-show="step === 1" class="step-panel">
+              <!-- 公共参数 -->
+              <div class="gp-card">
+                <div class="gp-title">公共参数</div>
+                <div class="form-row1">
+                  <span class="form-label gp-label">样本集划分：</span>
+                  <div class="ratio-wrap">
+                    <div class="ratio-item">
+                      <span class="ratio-label">训练集比例</span>
+                      <a-input-number
+                        v-model:value="commonParams.trainRatio"
+                        :min="0"
+                        :max="100"
+                      />
+                      <span>%</span>
+                    </div>
+                    <div class="ratio-item">
+                      <span class="ratio-label">验证集比例</span>
+                      <a-input-number
+                        v-model:value="commonParams.valRatio"
+                        :min="0"
+                        :max="100"
+                      />
+                      <span>%</span>
+                    </div>
+                    <div class="ratio-item">
+                      <span class="ratio-label">测试集比例</span>
+                      <a-input-number
+                        v-model:value="commonParams.testRatio"
+                        :min="0"
+                        :max="100"
+                      />
+                      <span>%</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="form-row1">
+                  <span class="form-label gp-label"></span>
+                  <span
+                    class="ratio-hint"
+                    :class="{ err: ratioSum !== 100 }"
+                    v-if="ratioSum !== 100"
+                    >比例之和应为 100%（当前 {{ ratioSum }}%）</span
+                  >
+                </div>
+                <div class="form-row1">
+                  <span class="form-label gp-label">预测时间：</span>
+                  <a-select
+                    v-model:value="commonParams.predictTime"
+                    style="flex: 1"
+                  >
+                    <a-select-option value="12小时">12小时</a-select-option>
+                    <a-select-option value="24小时">24小时</a-select-option>
+                    <a-select-option value="120小时">120小时</a-select-option>
+                  </a-select>
+                </div>
+              </div>
+
+              <!-- 算法 1：线性回归 -->
+              <div class="gp-card" v-if="activeModel === '1'">
+                <div class="gp-title">算法参数 · 线性回归</div>
+                <div class="form-row1">
+                  <span class="form-label gp-label">拟合截距：</span>
+                  <a-checkbox v-model:checked="algo1Params.fitIntercept">
+                    是
+                  </a-checkbox>
+                </div>
+                <div class="form-row1">
+                  <span class="form-label gp-label">正则化方式：</span>
+                  <a-radio-group v-model:value="algo1Params.regularization">
+                    <a-radio value="无">无</a-radio>
+                    <a-radio value="L1">L1</a-radio>
+                    <a-radio value="L2">L2</a-radio>
+                  </a-radio-group>
+                </div>
+              </div>
+
+              <!-- 算法 2：随机森林 -->
+              <div class="gp-card" v-if="activeModel === '2'">
+                <div class="gp-title">算法参数 · 随机森林</div>
+                <div class="gp-grid">
+                  <div class="form-row1">
+                    <span class="form-label gp-label">树数量：</span>
+                    <a-input-number
+                      v-model:value="algo2Params.treeCount"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">最大树深度：</span>
+                    <a-input-number
+                      v-model:value="algo2Params.maxDepth"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">最小分裂样本数：</span>
+                    <a-input-number
+                      v-model:value="algo2Params.minSplit"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">最小叶节点样本数：</span>
+                    <a-input-number
+                      v-model:value="algo2Params.minLeaf"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">最大特征数：</span>
+                    <a-checkbox v-model:checked="algo2Params.maxFeaturesAuto">
+                      自动
+                    </a-checkbox>
+                    <a-input-number
+                      v-if="!algo2Params.maxFeaturesAuto"
+                      v-model:value="algo2Params.maxFeatures"
+                      :min="0"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">Bootstrap采样：</span>
+                    <a-checkbox v-model:checked="algo2Params.bootstrap">
+                      是
+                    </a-checkbox>
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">随机种子：</span>
+                    <a-input-number v-model:value="algo2Params.seed" />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 算法 3 -->
+              <div class="gp-card" v-if="activeModel === '3'">
+                <div class="gp-title">算法参数 · XGBoost</div>
+                <div class="gp-grid">
+                  <div class="form-row1">
+                    <span class="form-label gp-label">树数量：</span>
+                    <a-input-number
+                      v-model:value="algo3Params.treeCount"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">学习率：</span>
+                    <a-input-number
+                      v-model:value="algo3Params.learningRate"
+                      :step="0.01"
+                      :min="0"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">最大深度：</span>
+                    <a-input-number
+                      v-model:value="algo3Params.maxDepth"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">子样本比例：</span>
+                    <a-input-number
+                      v-model:value="algo3Params.subsample"
+                      :step="0.1"
+                      :min="0"
+                      :max="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">特征采样比例：</span>
+                    <a-input-number
+                      v-model:value="algo3Params.featureSubsample"
+                      :step="0.1"
+                      :min="0"
+                      :max="1"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 算法 4 -->
+              <div class="gp-card" v-if="activeModel === '4'">
+                <div class="gp-title">算法参数 · LightGBM</div>
+                <div class="gp-grid">
+                  <div class="form-row1">
+                    <span class="form-label gp-label">树数量：</span>
+                    <a-input-number
+                      v-model:value="algo4Params.treeCount"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">学习率：</span>
+                    <a-input-number
+                      v-model:value="algo4Params.learningRate"
+                      :step="0.01"
+                      :min="0"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">叶子数量：</span>
+                    <a-input-number
+                      v-model:value="algo4Params.leafCount"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">最大深度：</span>
+                    <a-input-number v-model:value="algo4Params.maxDepth" />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">最小叶节点样本数：</span>
+                    <a-input-number
+                      v-model:value="algo4Params.minLeaf"
+                      :min="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">样本采样比例：</span>
+                    <a-input-number
+                      v-model:value="algo4Params.sampleRatio"
+                      :step="0.1"
+                      :min="0"
+                      :max="1"
+                    />
+                  </div>
+                  <div class="form-row1">
+                    <span class="form-label gp-label">特征采样比例：</span>
+                    <a-input-number
+                      v-model:value="algo4Params.featureRatio"
+                      :step="0.1"
+                      :min="0"
+                      :max="1"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div class="step-actions">
+                <a-button @click="step = 0">上一步</a-button>
+                <a-button type="primary" @click="gotoDataCheck"
+                  >数据检查</a-button
+                >
+              </div>
+            </div>
+
+            <!-- ======= 步骤 3：数据检查 ======= -->
+            <div v-show="step === 2" class="step-panel">
+              <div class="check-summary">
+                <div class="check-col">
+                  <div class="check-section">
+                    <div class="check-section-title">基本信息</div>
+                    <div class="check-table-wrapper">
+                      <table class="check-table">
+                        <tbody>
+                          <tr>
+                            <td class="chk-label">选择站点</td>
+                            <td class="chk-value">{{ activeSite }}</td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">选择算法</td>
+                            <td class="chk-value">
+                              {{
+                                modelOptions.find(o => o.value === activeModel)
+                                  ?.label || activeModel
+                              }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">时间范围</td>
+                            <td class="chk-value">{{ formatDateRange }}</td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">气象站点</td>
+                            <td class="chk-value">
+                              {{
+                                weatherStation.length
+                                  ? weatherStation.join('、')
+                                  : '—'
+                              }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">上游站点</td>
+                            <td class="chk-value">
+                              {{
+                                upstreamStation.length
+                                  ? upstreamStation.join('、')
+                                  : '—'
+                              }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">样本集划分</td>
+                            <td class="chk-value">
+                              训练集 {{ commonParams.trainRatio }}% / 验证集
+                              {{ commonParams.valRatio }}% / 测试集
+                              {{ commonParams.testRatio }}%
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">预测时间</td>
+                            <td class="chk-value">
+                              {{ commonParams.predictTime }}
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+                <div class="check-col">
+                  <div class="check-section" v-if="activeModel === '1'">
+                    <div class="check-section-title">
+                      算法类型参数 · 线性回归
+                    </div>
+                    <div class="check-table-wrapper">
+                      <table class="check-table">
+                        <tbody>
+                          <tr>
+                            <td class="chk-label">拟合截距</td>
+                            <td class="chk-value" colspan="3">
+                              {{ algo1Params.fitIntercept ? '是' : '否' }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">正则化方式</td>
+                            <td class="chk-value" colspan="3">
+                              {{ algo1Params.regularization }}
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                  <div class="check-section" v-if="activeModel === '2'">
+                    <div class="check-section-title">
+                      算法类型参数 · 随机森林
+                    </div>
+                    <div class="check-table-wrapper">
+                      <table class="check-table">
+                        <tbody>
+                          <tr>
+                            <td class="chk-label">树数量</td>
+                            <td class="chk-value">
+                              {{ algo2Params.treeCount }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">最大树深度</td>
+                            <td class="chk-value">
+                              {{ algo2Params.maxDepth }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">最小分裂样本数</td>
+                            <td class="chk-value">
+                              {{ algo2Params.minSplit }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">最小叶节点样本数</td>
+                            <td class="chk-value">{{ algo2Params.minLeaf }}</td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">最大特征数</td>
+                            <td class="chk-value">
+                              {{
+                                algo2Params.maxFeaturesAuto
+                                  ? '自动'
+                                  : algo2Params.maxFeatures
+                              }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">Bootstrap采样</td>
+                            <td class="chk-value">
+                              {{ algo2Params.bootstrap ? '是' : '否' }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">随机种子</td>
+                            <td class="chk-value">{{ algo2Params.seed }}</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                  <div class="check-section" v-if="activeModel === '3'">
+                    <div class="check-section-title">
+                      算法类型参数 · XGBoost
+                    </div>
+                    <div class="check-table-wrapper">
+                      <table class="check-table">
+                        <tbody>
+                          <tr>
+                            <td class="chk-label">树数量</td>
+                            <td class="chk-value">
+                              {{ algo3Params.treeCount }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">学习率</td>
+                            <td class="chk-value">
+                              {{ algo3Params.learningRate }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">最大深度</td>
+                            <td class="chk-value">
+                              {{ algo3Params.maxDepth }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">子样本比例</td>
+                            <td class="chk-value">
+                              {{ algo3Params.subsample }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">特征采样比例</td>
+                            <td class="chk-value">
+                              {{ algo3Params.featureSubsample }}
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                  <div class="check-section" v-if="activeModel === '4'">
+                    <div class="check-section-title">
+                      算法类型参数 · LightGBM
+                    </div>
+                    <div class="check-table-wrapper">
+                      <table class="check-table">
+                        <tbody>
+                          <tr>
+                            <td class="chk-label">树数量</td>
+                            <td class="chk-value">
+                              {{ algo4Params.treeCount }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">学习率</td>
+                            <td class="chk-value">
+                              {{ algo4Params.learningRate }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">叶子数量</td>
+                            <td class="chk-value">
+                              {{ algo4Params.leafCount }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">最大深度</td>
+                            <td class="chk-value">
+                              {{ algo4Params.maxDepth }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">最小叶节点样本数</td>
+                            <td class="chk-value">{{ algo4Params.minLeaf }}</td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">样本采样比例</td>
+                            <td class="chk-value">
+                              {{ algo4Params.sampleRatio }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">特征采样比例</td>
+                            <td class="chk-value">
+                              {{ algo4Params.featureRatio }}
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+                <div class="check-col">
+                  <div class="check-section">
+                    <div class="check-section-title">训练数据监测</div>
+                    <div class="check-table-wrapper">
+                      <table class="check-table check-table-grid">
+                        <tbody>
+                          <tr>
+                            <td class="chk-label">原始数据</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.originalData }}条
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">时间范围</td>
+                            <td class="chk-value" colspan="3">
+                              {{ trainDataCheck.timeRange }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">时间粒度</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.timeGranularity }}
+                            </td>
+                            <td class="chk-label">数据对齐</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.dataAlignment }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">缺失数据</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.missingData }}条
+                            </td>
+                            <td class="chk-label">缺失率</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.missingRate }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">异常数据</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.abnormalData }}条
+                            </td>
+                            <td class="chk-label">最终有效样本</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.validSamples }}条
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">输入特征</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.featureCount }}个
+                            </td>
+                            <td class="chk-label">训练集</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.trainSet }}条
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="chk-label">验证集</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.valSet }}条
+                            </td>
+                            <td class="chk-label">测试集</td>
+                            <td class="chk-value">
+                              {{ trainDataCheck.testSet }}条
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="step-actions">
+                <a-button @click="step = 1">上一步</a-button>
+                <a-button type="primary" @click="startTrain">开始训练</a-button>
+              </div>
+            </div>
+
+            <!-- ======= 步骤 4：训练过程 ======= -->
+            <div v-show="step === 3" class="step-panel train-progress">
+              <div class="loading-box">
+                <a-spin
+                  size="large"
+                  tip="模型训练中，请稍候..."
+                  :spinning="true"
+                />
+              </div>
+            </div>
+
+            <!-- ======= 步骤 5：训练结果 ======= -->
+            <div v-show="step === 4" class="step-panel">
+              <div ref="chartRef" class="result-chart"></div>
+              <div class="step-actions">
+                <a-button @click="restartTrain">重新训练</a-button>
+                <a-button type="primary" @click="step = 5">训练评估</a-button>
+              </div>
+            </div>
+
+            <!-- ======= 步骤 6：训练评估 ======= -->
+            <div v-show="step === 5" class="step-panel">
+              <div class="form-row1">
+                <span class="form-label">星级评分</span>
+                <a-rate v-model:value="rating" />
+                <span class="rating-num" v-if="rating !== null"
+                  >{{ rating }} 分</span
+                >
+              </div>
+              <div class="form-row1">
+                <span class="form-label">评价指标</span>
+                <a-textarea
+                  v-model:value="metricText"
+                  :rows="2"
+                  placeholder="请输入评价指标"
+                />
+              </div>
+              <div class="form-row1">
+                <span class="form-label">评估意见</span>
+                <a-textarea
+                  v-model:value="evaluateText"
+                  :rows="2"
+                  placeholder="请输入评估意见"
+                />
+              </div>
+              <div class="step-actions">
+                <a-button type="primary" @click="saveEvaluate">保存</a-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧下区域（40%）：模型版本管理 -->
+      <div class="right-bottom">
+        <div class="version-card">
+          <div class="version-header">
+            <div class="panel-title">模型版本管理</div>
+            <a-button type="primary" size="small" @click="openPredictStrategy"
+              >定时预测策略</a-button
+            >
+          </div>
+
+          <a-table
+            :columns="versionColumns"
+            :data-source="versionData"
+            :pagination="{ pageSize: 5 }"
+            :scroll="{ y: 180 }"
+            row-key="id"
+            size="small"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'version'">
+                <span class="version-cell">
+                  <img
+                    class="version-marker"
+                    :class="{ active: record.id === selectedVersion }"
+                    src="@/assets/svg/version.svg"
+                    alt="version"
+                  />
+                  <span>{{ record.version }}</span>
+                </span>
+              </template>
+              <template v-else-if="column.key === 'status'">
+                <span class="status-tag" :class="statusClass(record.status)">
+                  {{ record.status }}
+                </span>
+              </template>
+              <template v-else-if="column.key === 'score'">
+                <span class="score-cell">
+                  <a-rate
+                    :value="record.score"
+                    disabled
+                    style="font-size: 12px"
+                  />
+                  <span class="score-num">{{ record.score }}分</span>
+                </span>
+              </template>
+              <template v-else-if="column.key === 'operation'">
+                <span
+                  class="op-icon"
+                  @click="handleApplyVersion(record)"
+                  title="应用"
+                >
+                  <img src="@/assets/svg/Application.svg" alt="apply" />
+                </span>
+                <span
+                  class="op-icon"
+                  @click="handleEditVersion(record)"
+                  title="编辑"
+                >
+                  <img src="@/assets/svg/edit.svg" alt="edit" />
+                </span>
+                <span class="op-icon" @click="handleDeleteVersion(record)">
+                  <DeleteOutlined style="color: #ff4d4f" title="删除" />
+                </span>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 定时预测策略弹窗 -->
+  <a-modal
+    title="定时预测策略"
+    v-model:open="predictStrategyVisible"
+    width="1200px"
+    :destroy-on-close="true"
+    :z-index="1050"
+    footer=""
+    @cancel="closePredictStrategy"
+  >
+    <CronPicker v-model="predictCron" @confirm="handlePredictCronConfirm" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import { message } from 'ant-design-vue';
+import * as echarts from 'echarts';
+import { getDictItemsByCode } from '@/api/dict';
+import { StarFilled, DeleteOutlined } from '@ant-design/icons-vue';
+import MapStationPicker from './MapStationPicker.vue';
+import SampleDataModal from './SampleDataModal.vue';
+import CronPicker from '@/components/CronPicker/index.vue';
+
+/* ========== 左侧数据列表 ========== */
+const dataTabs = [
+  { key: 'surface', label: '表层水温' },
+  { key: 'vertical', label: '垂向水温' },
+  { key: 'quality', label: '水质' },
+  { key: 'algae', label: '水华' }
+];
+const activeDataTab = ref('surface');
+
+const baseOptions = ['全部基地', '金沙江基地', '雅砻江基地', '大渡河基地'];
+const stationOptions = ['全部电站', '两河口', '锦屏一级', '溪洛渡', '向家坝'];
+const waterStationOptions = [
+  '全部水温站',
+  '两河口库尾',
+  '锦屏一级坝前',
+  '溪洛渡坝下'
+];
+const filterAllBase = ref('全部基地');
+const filterStationKw = ref('全部电站');
+const filterWaterStation = ref('全部水温站');
+
+const siteList = [
+  '两河口库尾水温站',
+  '两河口坝前水温站',
+  '锦屏一级坝前水温站',
+  '锦屏一级库中水温站',
+  '溪洛渡坝下水温站',
+  '向家坝库中水温站',
+  '白鹤滩库源水温站',
+  '白鹤滩库中水温站',
+  '乌东德坝前水温站',
+  '乌东德库中水温站',
+  '杨房沟坝前水温站',
+  '卡拉坝前水温站',
+  '孟底沟坝前水温站',
+  '梯子岩坝前水温站',
+  '大凉山库下水温站',
+  '老渡口库下水温站',
+  '桂花桥水温站',
+  '龙羊峡库中水温站',
+  '李家峡入库水温站',
+  '拉西瓦坝前水温站',
+  '尼那坝前水温站',
+  '积石峡库中水温站'
+];
+const activeSite = ref(siteList[0]);
+
+const weatherModalVisible = ref(false);
+const upstreamModalVisible = ref(false);
+const openWeatherMapModal = () => {
+  weatherModalVisible.value = true;
+};
+const openUpstreamMapModal = () => {
+  upstreamModalVisible.value = true;
+};
+const onWeatherMapSave = (selected: string[]) => {
+  weatherStation.value = selected;
+};
+const onUpstreamMapSave = (selected: string[]) => {
+  upstreamStation.value = selected;
+};
+// 查看样本弹框显隐
+const weatherSampleVisible = ref(false);
+const upstreamSampleVisible = ref(false);
+const resetTrain = () => {
+  step.value = 0;
+  trained.value = false;
+  if (timer) clearTimeout(timer);
+  timer = null;
+  sampleDateRange.value = [null, null];
+  weatherStation.value = [];
+  upstreamStation.value = [];
+  resetParams();
+};
+const handleViewSample = (type: 'weather' | 'upstream') => {
+  if (
+    !sampleDateRange.value ||
+    !sampleDateRange.value[0] ||
+    !sampleDateRange.value[1]
+  ) {
+    message.warning('请先选择时间范围');
+    return;
+  }
+  if (type === 'weather') {
+    if (weatherStation.value.length === 0) {
+      message.warning('请先选择气象站点');
+      return;
+    }
+    weatherSampleVisible.value = true;
+  } else {
+    if (upstreamStation.value.length === 0) {
+      message.warning('请先选择上游站点');
+      return;
+    }
+    upstreamSampleVisible.value = true;
+  }
+};
+const onSelectSite = (site: string) => {
+  activeSite.value = site;
+  resetTrain();
+};
+const onSwitchDataTab = (key: string) => {
+  activeDataTab.value = key;
+  resetTrain();
+};
+
+/* ========== 右上：选择算法 ========== */
+const modelOptions = ref([]);
+const activeModel = ref('1');
+
+const algoIntroMap: Record<string, string> = {
+  '1': '模型 1 算法介绍：基于长短期记忆网络（LSTM）构建，适用于中短期水温变化趋势预测，在样本充足时收敛较快、精度较高。',
+  '2': '模型 2 算法介绍：基于随机森林回归构建，泛化能力强，对异常输入数据具有一定鲁棒性，适合快速生成基准预测。',
+  '3': '模型 3 算法介绍：基于物理过程与数据驱动耦合的梯度提升树，适用于垂向水温分层模拟，能够较好刻画热异常事件。',
+  '4': '模型 4 算法介绍：基于多任务学习的时空图神经网络，支持多站点联合预测，可在数据较稀疏的站点获得稳定效果。'
+};
+const currentAlgo = computed(() => algoIntroMap[activeModel.value] ?? '');
+const formatDateRange = computed(() => {
+  if (
+    !sampleDateRange.value ||
+    !sampleDateRange.value[0] ||
+    !sampleDateRange.value[1]
+  )
+    return '未选择';
+  const d0 = sampleDateRange.value[0];
+  const d1 = sampleDateRange.value[1];
+  if (typeof d0 === 'string') return d0 + ' ~ ' + d1;
+  return (
+    (d0 as any)?.format?.('YYYY-MM-DD') +
+      ' ~ ' +
+      (d1 as any)?.format?.('YYYY-MM-DD') || '未选择'
+  );
+});
+
+/* ========== 右上：模型训练步骤条 ========== */
+const step = ref(0);
+// 是否完成过一次训练（用于放开「训练结果/训练评估」步骤条的点击切换）
+const trained = ref(false);
+const stepTitles = [
+  '样本准备',
+  '参数设置',
+  '数据检查',
+  '训练过程',
+  '训练结果',
+  '训练评估'
+];
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const onModelChange = () => {
+  resetTrain();
+};
+
+// 步骤1：样本准备
+const sampleDateRange = ref<any>([null, null]);
+const weatherStations = ['气象站A', '气象站B', '气象站C'];
+const upstreamStations = ['上游站1', '上游站2', '上游站3'];
+const weatherStation = ref<string[]>([]);
+const upstreamStation = ref<string[]>([]);
+const nextStep = () => {
+  if (
+    !sampleDateRange.value ||
+    !sampleDateRange.value[0] ||
+    !sampleDateRange.value[1]
+  ) {
+    message.warning('请先选择时间范围');
+    return;
+  }
+  step.value = 1;
+};
+
+// 步骤2：参数设置
+// 公共参数（所有算法都展示）
+const commonParams = reactive({
+  trainRatio: 70,
+  valRatio: 15,
+  testRatio: 15,
+  predictTime: '12小时'
+});
+// 训练数据监测（预留接口变量，后续改为接口返回数据）
+const trainDataCheck = reactive({
+  originalData: '156,320', // 原始数据
+  timeRange: '2024-01-01 ~ 2026-06-30', // 时间范围
+  timeGranularity: '1小时', // 时间粒度
+  dataAlignment: '√正常', // 数据对齐
+  missingData: '2,315', // 缺失数据
+  missingRate: '1.48%', // 缺失率
+  abnormalData: '126', // 异常数据
+  validSamples: '151,284', // 最终有效样本
+  featureCount: '42', // 输入特征
+  trainSet: '105,898', // 训练集
+  valSet: '22,693', // 验证集
+  testSet: '22,693' // 测试集
+});
+
+const ratioSum = computed(
+  () => commonParams.trainRatio + commonParams.valRatio + commonParams.testRatio
+);
+const handleChange = (index: number) => {
+  // 训练进行中(step=3)时不允许点击步骤条切换
+  if (step.value === 3) return;
+  // 训练过程(index=3)只能通过「数据检查」里的「开始训练」进入，不能点击步骤条切换
+  if (index === 3) return;
+  // 训练结果(index=4)、训练评估(index=5)仅在完成训练后才允许点击步骤条切换
+  if (index >= 4 && !trained.value) return;
+  step.value = index;
+};
+
+// 重新训练：回到「参数设置」，参数保持不变，保留训练完成状态
+const restartTrain = () => {
+  step.value = 1;
+  if (timer) clearTimeout(timer);
+  timer = null;
+};
+
+// 算法 1：线性回归
+const algo1Params = reactive({
+  fitIntercept: true, // 拟合截距 - 多选框，默认勾选，值「是」
+  regularization: '无' // 正则化方式 - 单选框，默认「无」
+});
+
+// 算法 2：随机森林
+const algo2Params = reactive({
+  treeCount: 200, // 树数量
+  maxDepth: 20, // 最大树深度
+  minSplit: 2, // 最小分裂样本数
+  minLeaf: 1, // 最小叶节点样本数
+  maxFeaturesAuto: true, // 最大特征数 - 多选框「自动」，默认勾选
+  maxFeatures: 0, // 不勾选「自动」时显示的输入框，默认 0
+  bootstrap: true, // Bootstrap 采样 - 多选框，默认勾选
+  seed: 42 // 随机种子
+});
+
+// 算法 3：XGBoost
+const algo3Params = reactive({
+  treeCount: 500, // 树数量
+  learningRate: 0.05, // 学习率
+  maxDepth: 6, // 最大深度
+  subsample: 0.8, // 子样本比例
+  featureSubsample: 0.8 // 特征采样比例
+});
+
+// 算法 4
+const algo4Params = reactive({
+  treeCount: 500, // 树数量
+  learningRate: 0.05, // 学习率
+  leafCount: 31, // 叶子数量
+  maxDepth: -1, // 最大深度
+  minLeaf: 20, // 最小叶节点样本数
+  sampleRatio: 0.8, // 样本采样比例
+  featureRatio: 0.8 // 特征采样比例
+});
+
+const resetParams = () => {
+  commonParams.trainRatio = 70;
+  commonParams.valRatio = 15;
+  commonParams.testRatio = 15;
+  commonParams.predictTime = '12小时';
+  algo1Params.fitIntercept = true;
+  algo1Params.regularization = '无';
+  algo2Params.treeCount = 200;
+  algo2Params.maxDepth = 20;
+  algo2Params.minSplit = 2;
+  algo2Params.minLeaf = 1;
+  algo2Params.maxFeaturesAuto = true;
+  algo2Params.maxFeatures = 0;
+  algo2Params.bootstrap = true;
+  algo2Params.seed = 42;
+  algo3Params.treeCount = 500;
+  algo3Params.learningRate = 0.05;
+  algo3Params.maxDepth = 6;
+  algo3Params.subsample = 0.8;
+  algo3Params.featureSubsample = 0.8;
+  algo4Params.treeCount = 500;
+  algo4Params.learningRate = 0.05;
+  algo4Params.leafCount = 31;
+  algo4Params.maxDepth = -1;
+  algo4Params.minLeaf = 20;
+  algo4Params.sampleRatio = 0.8;
+  algo4Params.featureRatio = 0.8;
+};
+
+// 校验公共参数比例与当前算法参数（非空、非 0）
+const validateParams = () => {
+  if (ratioSum.value !== 100) {
+    message.warning('训练集/验证集/测试集比例之和需等于 100%');
+    return false;
+  }
+  // [参数值, 参数名称]，逐项校验并为空/0 时给出具体提示
+  let list: [any, string][] = [];
+  if (activeModel.value === '2') {
+    list = [
+      [algo2Params.treeCount, '树数量'],
+      [algo2Params.maxDepth, '最大树深度'],
+      [algo2Params.minSplit, '最小分裂样本数'],
+      [algo2Params.minLeaf, '最小叶节点样本数'],
+      [algo2Params.seed, '随机种子']
+    ];
+    // 未勾选「自动」时需校验手动输入的最大特征数
+    if (!algo2Params.maxFeaturesAuto)
+      list.push([algo2Params.maxFeatures, '最大特征数']);
+  } else if (activeModel.value === '3') {
+    list = [
+      [algo3Params.treeCount, '树数量'],
+      [algo3Params.learningRate, '学习率'],
+      [algo3Params.maxDepth, '最大深度'],
+      [algo3Params.subsample, '子样本比例'],
+      [algo3Params.featureSubsample, '特征采样比例']
+    ];
+  } else if (activeModel.value === '4') {
+    list = [
+      [algo4Params.treeCount, '树数量'],
+      [algo4Params.learningRate, '学习率'],
+      [algo4Params.leafCount, '叶子数量'],
+      [algo4Params.maxDepth, '最大深度'],
+      [algo4Params.minLeaf, '最小叶节点样本数'],
+      [algo4Params.sampleRatio, '样本采样比例'],
+      [algo4Params.featureRatio, '特征采样比例']
+    ];
+  }
+  const invalid = list.find(([v]) => v == null || v === '' || v === 0);
+  if (invalid) {
+    message.warning(`${invalid[1]}不能为空或为 0，请检查`);
+    return false;
+  }
+  return true;
+};
+
+// 步骤2「参数设置」点击下一步（数据检查）时校验
+const gotoDataCheck = () => {
+  if (!validateParams()) return;
+  step.value = 2;
+};
+
+// 步骤3：训练过程自动跳转
+let chart: echarts.ECharts | null = null;
+const chartRef = ref<HTMLDivElement | null>(null);
+
+const startTrain = () => {
+  // 步骤1样本准备未选择时间范围时禁止开始训练
+  if (
+    !sampleDateRange.value ||
+    !sampleDateRange.value[0] ||
+    !sampleDateRange.value[1]
+  ) {
+    message.warning('请先选择时间范围');
+    return;
+  }
+  // 校验公共参数比例与算法参数（非空、非 0）
+  if (!validateParams()) return;
+  step.value = 3;
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    step.value = 4;
+    trained.value = true;
+    timer = null;
+  }, 5000);
+};
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  if (chart) chart.dispose();
+  chart = echarts.init(chartRef.value);
+  chart.setOption({
+    tooltip: { trigger: 'axis' },
+    legend: { data: ['实际值', '预测值'] },
+    grid: { left: 40, right: 20, top: 30, bottom: 30 },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [
+        '01',
+        '02',
+        '03',
+        '04',
+        '05',
+        '06',
+        '07',
+        '08',
+        '09',
+        '10',
+        '11',
+        '12'
+      ]
+    },
+    yAxis: { type: 'value', name: '温度/℃' },
+    series: [
+      {
+        name: '实际值',
+        type: 'line',
+        data: [
+          12.5, 12.8, 13.2, 13.6, 14.1, 14.8, 15.6, 16.2, 16.9, 17.4, 18.0, 18.5
+        ]
+      },
+      {
+        name: '预测值',
+        type: 'line',
+        data: [
+          12.4, 12.9, 13.1, 13.8, 14.0, 15.0, 15.5, 16.4, 16.7, 17.6, 18.0, 18.4
+        ]
+      }
+    ]
+  });
+};
+
+// 步骤5：训练评估
+const rating = ref<number | null>(null);
+const metricText = ref('');
+const evaluateText = ref('');
+const saveEvaluate = () => {
+  message.success('评估已保存');
+};
+
+watch(step, val => {
+  if (val === 4) {
+    nextTick(initChart);
+  }
+});
+
+const handleResize = () => chart && chart.resize();
+onMounted(() => {
+  loadModelOptions();
+  window.addEventListener('resize', handleResize);
+});
+onBeforeUnmount(() => {
+  if (timer) clearTimeout(timer);
+  if (chart) chart.dispose();
+  window.removeEventListener('resize', handleResize);
+});
+const loadModelOptions = async () => {
+  const res = await getDictItemsByCode({ dictCode: 'typeCalculation' });
+  console.log(res);
+  modelOptions.value = res.data.map((item: any) => ({
+    label: item.dictName,
+    value: item.itemCode
+  }));
+};
+
+/* ========== 定时预测策略弹窗 ========== */
+const predictStrategyVisible = ref(false);
+const predictCron = ref('');
+const openPredictStrategy = () => {
+  predictStrategyVisible.value = true;
+};
+const closePredictStrategy = () => {
+  predictStrategyVisible.value = false;
+};
+const handlePredictCronConfirm = (value: string) => {
+  predictCron.value = value;
+  closePredictStrategy();
+  message.success('定时预测策略已保存：' + value);
+};
+
+/* ========== 右下：模型版本管理 ========== */
+const versionColumns = [
+  { title: '序号', dataIndex: 'id', key: 'id', align: 'center', width: 60 },
+  { title: '预测站点', dataIndex: 'id', key: 'id', align: 'center' },
+  { title: '预测站点类型', dataIndex: 'id', key: 'id', align: 'center' },
+  { title: '是否启用', dataIndex: 'id', key: 'id', align: 'center' },
+  {
+    title: '算法类型',
+    dataIndex: 'algoType',
+    key: 'algoType',
+    align: 'center'
+  },
+  { title: '版本号', dataIndex: 'version', key: 'version', align: 'center' },
+  { title: '状态', dataIndex: 'status', key: 'status', align: 'center' },
+  { title: '评分', dataIndex: 'score', key: 'score', align: 'center' },
+  { title: '创建人', dataIndex: 'creator', key: 'creator', align: 'center' },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    align: 'center'
+  },
+  { title: '操作', key: 'operation', align: 'center', width: 130 }
+];
+
+const versionData = reactive([
+  {
+    id: 1,
+    version: 'v1.0.0',
+    status: '训练完成',
+    score: 4,
+    algoType: '模型 1',
+    creator: '张三',
+    createTime: '2026-08-01 10:00'
+  },
+  {
+    id: 2,
+    version: 'v1.1.0',
+    status: '训练完成',
+    score: 4,
+    algoType: '模型 2',
+    creator: '李四',
+    createTime: '2026-08-10 14:30'
+  },
+  {
+    id: 3,
+    version: 'v1.2.0',
+    status: '已归档',
+    score: 4,
+    algoType: '模型 3',
+    creator: '王五',
+    createTime: '2026-08-18 09:20'
+  },
+  {
+    id: 4,
+    version: 'v1.3.0',
+    status: '训练完成',
+    score: 4,
+    algoType: '模型 4',
+    creator: '赵六',
+    createTime: '2026-08-25 16:45'
+  },
+  {
+    id: 5,
+    version: 'v2.0.0',
+    status: '已归档',
+    score: 5,
+    algoType: '模型 1',
+    creator: '张三',
+    createTime: '2026-08-30 11:10'
+  }
+]);
+
+const selectedVersion = ref(1);
+
+const statusClass = (status: string) => {
+  if (status === '训练完成') return 'status-finish';
+  if (status === '已归档') return 'status-archived';
+  return 'status-default';
+};
+
+const handleApplyVersion = (record: any) => {
+  selectedVersion.value = record.id;
+  message.info(`已应用版本 ${record.version}`);
+};
+const handleEditVersion = (record: any) => {
+  message.info(`编辑版本 ${record.version}`);
+};
+const handleDeleteVersion = (record: any) => {
+  message.warning(`删除版本 ${record.version}`);
+};
+</script>
+
+<style scoped lang="scss">
+.moXingGuanLi-page {
+  position: fixed;
+  left: 0;
+  top: 60px;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  pointer-events: all;
+  background-color: #f5f7fa;
+  box-sizing: border-box;
+  z-index: 1004;
+}
+
+.panel-title {
+  position: relative;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2d3d;
+  margin-bottom: 10px;
+  padding-left: 12px;
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    content: '';
+    display: block;
+    width: 4px;
+    height: 14px;
+    background: #005293;
+    border-radius: 2px;
+    margin-bottom: 4px;
+  }
+}
+
+/* ========== 左侧数据列表 ========== */
+.left-panel {
+  width: 300px;
+  flex-shrink: 0;
+  height: 100%;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.data-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 12px 0;
+}
+
+.data-tab {
+  width: calc(50% - 5px);
+  box-sizing: border-box;
+  text-align: center;
+  padding: 6px 0;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  color: #606266;
+  background: #f2f4f7;
+  transition: all 0.2s;
+  &:hover {
+    color: #005293;
+  }
+  &.active {
+    color: #fff;
+    background: #005293;
+  }
+}
+
+.filters {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.data-list-card {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.station-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.station-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 4px;
+  margin: 4px 0;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+  padding-left: 12px;
+  &:hover {
+    background: #eeedec;
+  }
+  &.active {
+    background: #eeedec;
+    .station-name {
+      font-weight: 600;
+    }
+  }
+}
+
+.station-name {
+  font-size: 13px;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ========== 右侧栏 ========== */
+.right-panel {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.right-top {
+  height: 60%;
+  display: flex;
+  gap: 12px;
+  min-height: 0;
+}
+
+.algo-card,
+.train-card,
+.version-card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 12px;
+  box-sizing: border-box;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  overflow: auto;
+}
+
+.version-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.version-header .panel-title {
+  margin-bottom: 0;
+}
+
+.algo-card {
+  width: 280px;
+  flex-shrink: 0;
+}
+
+.algo-intro {
+  margin-top: 12px;
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.8;
+  text-align: justify;
+  padding: 0 6px;
+  overflow: hidden;
+  .algo-text {
+    text-indent: 1em;
+    letter-spacing: -0.5px;
+  }
+}
+
+.train-card {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.train-steps {
+  margin: 8px 0 20px;
+  padding: 0 30px;
+}
+
+.step-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 4px 20% 0;
+  box-sizing: border-box;
+}
+/* 数据检查步骤内容较多，缩小左右边距 */
+.step-content-narrow {
+  padding: 4px 5% 0;
+}
+
+.step-panel {
+  margin: auto 0;
+  width: 100%;
+}
+/* 数据检查步骤占满高度，滚动条在内部 */
+.step-content-narrow .step-panel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.view-btn1 {
+  position: absolute;
+  top: 6px;
+  right: 110px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+.view-btn {
+  background: #e6eef4;
+  border: 1px solid #a1bfd7;
+  color: #005293;
+}
+
+.step-actions {
+  margin-top: 14px;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin: 20px 0;
+
+  .form-label {
+    width: 100px;
+  }
+}
+.form-row1 {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-top: 8px;
+}
+
+.form-label {
+  width: 90px;
+  flex-shrink: 0;
+  font-size: 13px;
+  color: #303133;
+  text-align: right;
+}
+
+.required {
+  color: #ff4d4f;
+  margin-right: 2px;
+}
+
+.row-inline {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  align-items: center;
+  position: relative;
+}
+
+/* 参数设置 */
+.gp-card {
+  border: 1px solid #ebeef5;
+  border-left: 3px solid #005293;
+  border-radius: 6px;
+  padding: 8px 16px 8px;
+  margin-bottom: 16px;
+}
+.gp-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #005293;
+}
+.gp-label {
+  width: 120px;
+  text-align: right;
+}
+.ratio-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  flex: 1;
+  align-items: center;
+}
+.ratio-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.ratio-label {
+  color: #606266;
+  font-size: 13px;
+}
+.ratio-hint {
+  font-size: 12px;
+  color: #005293;
+  &.err {
+    color: #ff4d4f;
+  }
+}
+.gp-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 24px;
+  row-gap: 4px;
+}
+
+.form-row1 :deep(.ant-input-number) {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 数据检查 */
+.check-summary {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+}
+.check-col {
+  flex: 1;
+  min-width: 0;
+}
+.check-section {
+  // width: 350px;
+  border: 1px solid #e8ecf1;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+/* 数据检查步骤占满高度，滚动条在内部 */
+.step-content-narrow .check-summary {
+  flex: 1;
+  min-height: 0;
+}
+.step-content-narrow .check-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.step-content-narrow .check-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.step-content-narrow .check-section > .check-table-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+.check-section-title {
+  background: #f5f7fa;
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #005293;
+  border-bottom: 1px solid #e8ecf1;
+}
+.check-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.check-table tr {
+  border-bottom: 1px solid #f0f2f5;
+}
+.check-table tr:last-child {
+  border-bottom: none;
+}
+.chk-label {
+  width: 120px;
+  padding: 7px 10px 7px 4px;
+  font-size: 13px;
+  color: #606266;
+  white-space: nowrap;
+  vertical-align: top;
+  text-align: right;
+}
+.chk-value {
+  padding: 7px 16px 7px 0;
+  font-size: 13px;
+  color: #303133;
+  word-break: break-all;
+}
+
+/* 训练数据监测 - 两列布局 */
+.check-table-grid {
+  table-layout: fixed;
+}
+.check-table-grid .chk-label {
+  width: 85px;
+}
+.check-table-grid .chk-value {
+  width: auto;
+}
+
+/* 训练过程 */
+.train-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+}
+
+/* 训练结果 */
+.result-chart {
+  width: 100%;
+  height: 190px;
+}
+
+/* 训练评估 - 评分颜色 #ff9900 */
+:deep(.ant-rate),
+:deep(.ant-rate-star) {
+  color: #ff9900 !important;
+}
+
+.rating-num {
+  font-size: 14px;
+  color: #ff9900;
+}
+
+/* ========== 右侧下：模型版本管理 ========== */
+.right-bottom {
+  height: 40%;
+  min-height: 0;
+}
+
+.version-card {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.version-card .ant-table-wrapper {
+  flex: 1;
+  min-height: 0;
+}
+
+.status-tag {
+  display: inline-block;
+  font-size: 12px;
+  &.status-finish {
+    color: #255aa7;
+  }
+  &.status-archived {
+    color: #009933;
+  }
+  &.status-default {
+    color: #909399;
+  }
+}
+
+.version-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.version-marker {
+  width: 16px;
+  height: 16px;
+  opacity: 0;
+  &.active {
+    opacity: 1;
+  }
+}
+
+.score-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  :deep(.ant-rate) {
+    font-size: 12px;
+  }
+}
+
+.score-num {
+  font-size: 12px;
+  color: #ff9900;
+}
+
+.op-icon {
+  display: inline-flex;
+  margin: 0 6px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+</style>
diff --git a/frontend/src/views/moXingGuanLi/muBiaoJianCeMoXingGuanLi/index.vue b/frontend/src/views/moXingGuanLi/muBiaoJianCeMoXingGuanLi/index.vue
deleted file mode 100644
index 9b687fa5..00000000
--- a/frontend/src/views/moXingGuanLi/muBiaoJianCeMoXingGuanLi/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div class="moduleContent" style="color: red; z-index: 1000">
-    目标检测模型管理
-  </div>
-</template>
-
-<script setup lang="ts"></script>
diff --git a/frontend/src/views/moXingGuanLi/shiXuMoXingGuanLi/index.vue b/frontend/src/views/moXingGuanLi/shiXuMoXingGuanLi/index.vue
deleted file mode 100644
index 93636375..00000000
--- a/frontend/src/views/moXingGuanLi/shiXuMoXingGuanLi/index.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="shiXuMoXingGuanLi-page">时序模型管理</div>
-</template>
-
-<script setup lang="ts"></script>
-<style scoped lang="scss">
-.shiXuMoXingGuanLi-page {
-  position: relative;
-  pointer-events: all;
-  z-index: 2000;
-  background-color: #fff;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue b/frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue
index b0118642..6ff60995 100644
--- a/frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue
+++ b/frontend/src/views/qiXiDi/shengTaiDiBaoHu.vue
@@ -2,9 +2,11 @@
 import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
 import RightDrawer from '@/components/RightDrawer/index.vue';
 import QiXiDiBaoHuGongZuoKaiZhan from '@/modules/qixidibaohugongzuokaizhanQK/index.vue';
-import QixidijchuXx from '@/modules/qixidijchuXx/index.vue';
-import QiXiDiShuiWenBianHua from '@/modules/qixidishuiwenbianhua/index.vue';
-import QiXiDiLiuLiangBianHua from '@/modules/qixidiliuliangbianhua/index.vue';
+import QiXiDiFenBuTongJi from '@/modules/qixidifenbutongji/index.vue';
+import QiXiDJianCeJieGuoTongJi from '@/modules/qixidijiancejieguotongji/index.vue';
+// import QixidijchuXx from '@/modules/qixidijchuXx/index.vue';
+// import QiXiDiShuiWenBianHua from '@/modules/qixidishuiwenbianhua/index.vue';
+// import QiXiDiLiuLiangBianHua from '@/modules/qixidiliuliangbianhua/index.vue';
 </script>
 
 <template>
@@ -14,10 +16,9 @@ import QiXiDiLiuLiangBianHua from '@/modules/qixidiliuliangbianhua/index.vue';
     </div>
     <div class="rightContent">
       <RightDrawer>
+        <QiXiDiFenBuTongJi />
         <QiXiDiBaoHuGongZuoKaiZhan />
-        <QiXiDiShuiWenBianHua />
-        <QiXiDiLiuLiangBianHua />
-        <QixidijchuXx />
+        <QiXiDJianCeJieGuoTongJi />
       </RightDrawer>
     </div>
   </div>
diff --git a/frontend/src/views/shengTaiDiaoCha/luShengShengTaiDiaoCha.vue b/frontend/src/views/shengTaiDiaoCha/luShengShengTaiDiaoCha.vue
index 48a4dd10..1599f95f 100644
--- a/frontend/src/views/shengTaiDiaoCha/luShengShengTaiDiaoCha.vue
+++ b/frontend/src/views/shengTaiDiaoCha/luShengShengTaiDiaoCha.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import JidiSelectorMod from "@/modules/jidiSelectorMod.vue";
-import RightDrawer from "@/components/RightDrawer/index.vue";
-import LSSTJCQKTT from "@/modules/lushengshengtaijiance/index.vue"
-import Ysdwjc from "@/modules/Ysdwjc/index.vue"
+import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
+import RightDrawer from '@/components/RightDrawer/index.vue';
+import LSJCSBTJ from '@/modules/lushengshebeitongji/index.vue';
+import Ysdwjc from '@/modules/Ysdwjc/index.vue';
 </script>
 
 <template>
@@ -12,8 +12,8 @@ import Ysdwjc from "@/modules/Ysdwjc/index.vue"
     </div>
     <div class="rightContent">
       <RightDrawer>
-        <LSSTJCQKTT />
-        <Ysdwjc  />
+        <LSJCSBTJ />
+        <Ysdwjc />
       </RightDrawer>
     </div>
   </div>
diff --git a/frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangManZuQingKuang.vue b/frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangManZuQingKuang.vue
index 6fba0d80..29c1bb6d 100644
--- a/frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangManZuQingKuang.vue
+++ b/frontend/src/views/shengTaiLiuLiang/shengTaiLiuLiangManZuQingKuang.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
 import RightDrawer from '@/components/RightDrawer/index.vue';
-import ShengtaidabiaoMod from '@/modules/shengtaidabiaoMod/index.vue'; // 模块-生态流量达标情况 生态流量达标情况
-import ShengtaidabiaoTwoMod from '@/modules/shengtaidabiaoTwoMod/index.vue';
-import StllyanchengChangeMod from '@/modules/stllyanchengChangeMod/index.vue' // 模块-生态流量沿程变化
+// import ShengtaidabiaoMod from '@/modules/shengtaidabiaoMod/index.vue'; // 模块-生态流量达标情况 生态流量达标情况
+// import ShengtaidabiaoTwoMod from '@/modules/shengtaidabiaoTwoMod/index.vue';
+import ShengTaiHuangJingBuMod from '@/modules/shengTaiHuangJingBuMod/index.vue'; // 模块-生态流量达标情况 生态流量达标情况
+import ShuiLiBuMod from '@/modules/shuiLiBuMod/index.vue'; // 模块-生态流量达标情况 生态流量达标情况
+import StllyanchengChangeMod from '@/modules/stllyanchengChangeMod/index.vue'; // 模块-生态流量沿程变化
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
-import { ref, onMounted, watch } from 'vue';
+import { ref, watch } from 'vue';
 const JidiSelectEventStore = useJidiSelectEventStore();
 const baseid = ref('');
 watch(
@@ -26,9 +28,9 @@ watch(
     </div>
     <div class="rightContent">
       <RightDrawer>
-        <ShengtaidabiaoMod />
-        <ShengtaidabiaoTwoMod v-if="baseid == 'all'" />
-         <StllyanchengChangeMod v-if="baseid != 'all'" />
+        <ShengTaiHuangJingBuMod />
+        <ShuiLiBuMod />
+        <StllyanchengChangeMod v-if="baseid != 'all'" />
       </RightDrawer>
     </div>
   </div>
diff --git a/frontend/src/views/shuiWenJianCe/shuiWenQingKuang.vue b/frontend/src/views/shuiWenJianCe/shuiWenQingKuang.vue
index 47cbdcdd..d76ab78e 100644
--- a/frontend/src/views/shuiWenJianCe/shuiWenQingKuang.vue
+++ b/frontend/src/views/shuiWenJianCe/shuiWenQingKuang.vue
@@ -1,10 +1,24 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
 import JidiSelectorMod from '@/modules/jidiSelectorMod.vue';
 import RightDrawer from '@/components/RightDrawer/index.vue';
 import ChuixiangshuiwenChangeMod from '@/modules/chuixiangshuiwenChangeMod/index.vue'; // 垂向水温变化
 import ChurukushuiwenMod from '@/modules/churukushuiwenMod/index.vue'; // 出入库水温变化
 import YanchengshuiwenChangeMod from '@/modules/yanchengshuiwenChangeMod/index.vue'; // 沿程水温变化
 import ShuiwenJCGZKZQK from '@/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import ShuiWenJianCeKaiZhanQingKuang from '@/modules/shuiWenJianCeKaiZhanQingKuang/index.vue'; // 模块-水温监测工作开展情况
+const JidiSelectEventStore = useJidiSelectEventStore();
+const baseid = ref('');
+watch(
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
+    }
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <template>
@@ -15,9 +29,10 @@ import ShuiwenJCGZKZQK from '@/modules/shuiwenjiancegongzuokaizhangqingkuang/ind
     <div class="rightContent">
       <RightDrawer>
         <ShuiwenJCGZKZQK />
-        <YanchengshuiwenChangeMod />
-        <ChuixiangshuiwenChangeMod />
-        <ChurukushuiwenMod />
+        <YanchengshuiwenChangeMod v-if="baseid != 'all'" />
+        <ChuixiangshuiwenChangeMod v-if="baseid != 'all'" />
+        <ChurukushuiwenMod v-if="baseid != 'all'" />
+        <ShuiWenJianCeKaiZhanQingKuang v-if="baseid == 'all'" />
       </RightDrawer>
     </div>
   </div>
diff --git a/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue b/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
index 08527ef3..46eead10 100644
--- a/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
+++ b/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
@@ -5,15 +5,16 @@ import RightDrawer from '@/components/RightDrawer/index.vue';
 import ShuiZhiJianCeGongZuoQingKuang from '@/modules/shuizhijiancegongzuoQK/index.vue';
 import EnvironmentalQuality from '@/modules/EnvironmentalQuality/index.vue'; // 环境质量满足度
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import ShuiZhiDaBiaoQingKuang from '@/modules/shuiZhiDaBiaoQingKuang/index.vue'; // 模块-水位监测工作开展情况
 import SZYCBH from '@/modules/waterQuality/index.vue';
 const JidiSelectEventStore = useJidiSelectEventStore();
-const wbsCode = ref('');
+const baseid = ref('');
 watch(
   () => JidiSelectEventStore.selectedItem,
   newVal => {
     console.log(newVal);
     //
-    wbsCode.value = newVal.wbsCode;
+    baseid.value = newVal.wbsCode;
   },
   { deep: true, immediate: true }
 );
@@ -27,8 +28,9 @@ watch(
     <div class="rightContent">
       <RightDrawer>
         <ShuiZhiJianCeGongZuoQingKuang />
-        <EnvironmentalQuality />
-        <SZYCBH v-if="wbsCode != 'all'"></SZYCBH>
+        <ShuiZhiDaBiaoQingKuang v-if="baseid == 'all'" />
+        <EnvironmentalQuality v-if="baseid != 'all'" />
+        <SZYCBH v-if="baseid != 'all'"></SZYCBH>
       </RightDrawer>
     </div>
   </div>
diff --git a/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementForm.vue b/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementForm.vue
index dba298b1..ef5116df 100644
--- a/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementForm.vue
+++ b/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementForm.vue
@@ -103,7 +103,7 @@ import { ref, reactive, computed, watch,onMounted } from 'vue';
 import { message, Modal } from 'ant-design-vue';
 import type { Rule } from 'ant-design-vue/es/form';
 import dayjs from 'dayjs';
-import CronPicker from './CronPicker.vue';
+import CronPicker from '@/components/CronPicker/index.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { getDictItemsByCode } from '@/api/dict';
 import { useDraggable } from '@/utils/drag';
diff --git a/frontend/src/views/zengZhiFangLiu/yuLieZengZhiZhan.vue b/frontend/src/views/zengZhiFangLiu/yuLieZengZhiZhan.vue
index 6873d925..b73cc7c8 100644
--- a/frontend/src/views/zengZhiFangLiu/yuLieZengZhiZhan.vue
+++ b/frontend/src/views/zengZhiFangLiu/yuLieZengZhiZhan.vue
@@ -5,7 +5,8 @@ import RightDrawer from '@/components/RightDrawer/index.vue';
 
 import ZengZhiJiHuaWanChengQingKuang from '@/modules/zengZhiJiHuaWanChengQingKuang/index.vue';
 import ZengZhiZhanJieShaoMod from '@/modules/zengZhiZhanJieShaoMod/index.vue';
-import ZZZJSYXQKTT from '@/modules/zengzhizhanjiansheyunxing/index.vue';
+// import ZZZJSYXQKTT from '@/modules/zengzhizhanjiansheyunxing/index.vue';
+import ZZZFBTJ from '@/modules/zengzhizhanfbutongji/index.vue';
 import ZZZYXSJTJ from '@/modules/zengzhizhanyunxingsjtj/index.vue';
 import FLZLLB from '@/modules/GYZLLB/index.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
@@ -32,7 +33,7 @@ watch(
     </div>
     <div class="rightContent">
       <RightDrawer>
-        <ZZZJSYXQKTT />
+        <ZZZFBTJ />
         <ZengZhiZhanJieShaoMod v-if="wbsCode != 'all'" />
         <ZengZhiJiHuaWanChengQingKuang v-if="wbsCode != 'all'" />
         <FLZLLB title="放流总量" />
diff --git a/frontend/src/views/zhiNengFenXi/shuiWenShuJuFenXi/components/utils.ts b/frontend/src/views/zhiNengFenXi/shuiWenShuJuFenXi/components/utils.ts
index bfa12b68..b61ef176 100644
--- a/frontend/src/views/zhiNengFenXi/shuiWenShuJuFenXi/components/utils.ts
+++ b/frontend/src/views/zhiNengFenXi/shuiWenShuJuFenXi/components/utils.ts
@@ -1,7 +1,8 @@
 import dayjs from 'dayjs';
-import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
-import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN';
-import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets';
+
+// Univer 单例缓存，避免重复初始化导致 Identifier already exists 警告
+let cachedUniverInstance: { univer: any; univerAPI: any } | null = null;
+
 interface dmFilter {
   baseId?: string;
   rstcd?: string;
@@ -222,8 +223,22 @@ const initializeExcelWorksheet = (univerAPI: any) => {
   }
 };
 
-// 创建Excel实例
-export const createExcelInstance = container => {
+// 创建Excel实例（单例模式，仅首次调用时创建，后续复用缓存实例）
+export const createExcelInstance = async container => {
+  if (cachedUniverInstance) {
+    return cachedUniverInstance;
+  }
+
+  // 动态导入 Univer 模块，避免预加载时触发模块初始化导致 Identifier 警告
+  const [
+    { UniverSheetsCorePreset },
+    UniverPresetSheetsCoreZhCN,
+    { createUniver, LocaleType, mergeLocales }
+  ] = await Promise.all([
+    import('@univerjs/preset-sheets-core'),
+    import('@univerjs/preset-sheets-core/locales/zh-CN'),
+    import('@univerjs/presets')
+  ]);
   const { univer, univerAPI } = createUniver({
     locale: LocaleType.ZH_CN,
     locales: {
@@ -300,8 +315,14 @@ export const createExcelInstance = container => {
   // 初始化Excel工作表
   initializeExcelWorksheet(univerAPI);
 
+  cachedUniverInstance = { univer, univerAPI };
   return { univer, univerAPI };
 };
+
+// 重置单例缓存（页面卸载时调用）
+export const resetUniverInstance = () => {
+  cachedUniverInstance = null;
+};
 // 检查单元格编辑事件，如果row是奇数，根据column判断是否需要添加平均数公式
 export const handleCellEdit = (params: any, fWorksheet: any, year: string) => {
   const {
diff --git a/frontend/src/views/zhiNengFenXi/shuiWenShuJuFenXi/index.vue b/frontend/src/views/zhiNengFenXi/shuiWenShuJuFenXi/index.vue
index 59ad5c77..5e752c71 100644
--- a/frontend/src/views/zhiNengFenXi/shuiWenShuJuFenXi/index.vue
+++ b/frontend/src/views/zhiNengFenXi/shuiWenShuJuFenXi/index.vue
@@ -36,7 +36,11 @@ import {
 import BasicSearch from '@/components/BasicSearch/index.vue';
 import '@univerjs/preset-sheets-core/lib/index.css';
 import { exportExcel } from './components/export';
-import { createExcelInstance, renderDataToExcel } from './components/utils';
+import {
+  createExcelInstance,
+  renderDataToExcel,
+  resetUniverInstance
+} from './components/utils';
 import dayjs from 'dayjs';
 
 const basicSearchRef = ref();
@@ -351,18 +355,18 @@ const initData = async (values: any) => {
     loading.value = false;
   });
 };
-onMounted(() => {
-  // 创建Excel实例
-  const { univer, univerAPI } = createExcelInstance(containerRef.value);
+onMounted(async () => {
+  // 创建Excel实例（动态导入，避免预加载触发 Identifier 警告）
+  const { univer, univerAPI } = await createExcelInstance(containerRef.value);
   // 保存 univer 实例到 ref
   univerInstanceRef.value = { univer, univerAPI };
   initStcd(initSearchData);
   initData(initSearchData);
 });
 onUnmounted(() => {
-  // 销毁Excel实例
-  const { univer, univerAPI } = univerInstanceRef.value;
-  univerAPI.dispose();
+  // 单例模式：不销毁实例，避免重复初始化 Identifier 警告
+  // 仅清除 ref 引用，Univer 实例由模块级缓存持有
+  resetUniverInstance();
 });
 </script>
 
diff --git a/frontend/src/views/zhiNengFenXi/yuCeYuJing/index.vue b/frontend/src/views/zhiNengFenXi/yuCeYuJing/index.vue
index 49a15707..f693df05 100644
--- a/frontend/src/views/zhiNengFenXi/yuCeYuJing/index.vue
+++ b/frontend/src/views/zhiNengFenXi/yuCeYuJing/index.vue
@@ -97,7 +97,9 @@
                   </a-tabs>
                   <a-button type="primary">开始预测</a-button>
                 </div>
-                <a-button type="primary">历史预测</a-button>
+                <a-button class="chart-btn-primary" type="primary"
+                  >历史预测</a-button
+                >
               </div>
               <!-- echarts容器 -->
               <div
@@ -406,7 +408,7 @@ onBeforeUnmount(() => {
 .chart-container {
   position: absolute;
   left: 20%;
-  top: 10px;
+  top: 6px;
   width: 80%;
   display: flex;
   justify-content: space-between;
@@ -414,4 +416,8 @@ onBeforeUnmount(() => {
   margin-bottom: 16px;
   padding-right: 20px;
 }
+.chart-btn-primary {
+  position: absolute;
+  right: 10px;
+}
 </style>
diff --git a/frontend/src/views/zhiNengFenXi/zhiNengGaoJing/index.vue b/frontend/src/views/zhiNengFenXi/zhiNengGaoJing/index.vue
deleted file mode 100644
index 7e7abfe5..00000000
--- a/frontend/src/views/zhiNengFenXi/zhiNengGaoJing/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="moduleContent" style="color: red; z-index: 1000">智能告警</div>
-</template>
-
-<script setup lang="ts"></script>