From 849aeb80175251a42aed557bf698b3ae6a1b24ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Fri, 12 Jun 2026 16:59:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E4=BF=A1=E6=81=AF=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/mapModal/index.ts            |   45 +-
 frontend/src/components/BasicTable/index.vue  |   22 +-
 .../src/components/MapModal/column.config.ts  |  706 ++++++++++-
 .../MapModal/components/BasicInfo.vue         |   42 +-
 frontend/src/components/MapModal/index.vue    |  504 +++++++-
 .../src/components/MapModal/setting.config.ts |  309 ++---
 .../chuixiangshuiwenChangeMod/index.vue       |    4 +-
 ...eixingzuchengjijieruqingkuangTwoLayers.vue |    2 +-
 .../guoyujiance/components/FPVDDetailMD.vue   |    2 +-
 .../ModalPage/index.vue                       |   57 +-
 .../monthlyAverage.vue                        |    2 +-
 .../qixidibaohugongzuokaizhanQK/index.vue     |    2 +-
 .../qixidiheduanjianceqingkuangEJ/index.vue   |    9 +-
 frontend/src/modules/qixidijchuXx/index.vue   |    2 +-
 .../TwoLayer/ModalYkzhbzdjcgz.vue             |  416 +++++++
 .../ShengTaiLiuLiangDaBQKTwoLayer.vue         |  944 ++++++++++++++
 .../src/modules/shengtaidabiaoMod/index.vue   |  505 +++++---
 .../modules/shengtaidabiaoTwoMod/index.vue    |  710 +++++++----
 .../TwoLayers/yaerAverage.vue                 |    2 +-
 .../TwoLayer/ShuiDianKaiFQKTwoLayer.vue       |    2 +-
 .../shuiwenjiancegongzuoEJ.vue                |    2 +-
 .../shuiwenjiancegongzuoEJ.vue                | 1082 +++++++++--------
 frontend/src/modules/waterQuality/index.vue   |    2 +-
 .../yanchengshuiwenChangeMod/index.vue        |    3 +-
 frontend/src/store/modules/model.ts           |   34 +-
 .../views/home/shuiDianKaiFaZhuangKuang.vue   |   36 +-
 26 files changed, 4249 insertions(+), 1197 deletions(-)
 create mode 100644 frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue
 create mode 100644 frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue

diff --git a/frontend/src/api/mapModal/index.ts b/frontend/src/api/mapModal/index.ts
index 01c0a468..cf829d84 100644
--- a/frontend/src/api/mapModal/index.ts
+++ b/frontend/src/api/mapModal/index.ts
@@ -22,6 +22,49 @@ export function getIdUrl(params: any) {
     params
   });
 }
+// 查询站点建设状态
+export function getBuildState(data: any) {
+  return request({
+    url: '/api/dec-lygk-base-server/base/vmsstbprpt/GetKendoList',
+    method: 'post',
+    data: {
+      filter: data.filter,
+      select: ['bldsttCcode', 'engIwtCode', 'engDwtCode']
+    }
+  });
+}
+// 查询鱼类栖息地监测数据类型可用性
+export function getFishTab(stcd: string) {
+  return request({
+    url: `/api/wmp-env-server/we/wer/getWeDefaultData`,
+    method: 'get',
+    params: { stcd }
+  });
+}
+// 检查水质站是否启用 AI 预测功能
+export function checkAnalysisShow(data: any) {
+  return request({
+    url: '/api/dec-lygk-base-server/base/vmsstbprpt/GetKendoList',
+    method: 'post',
+    data
+  });
+}
+// 查询站点的关联子站点 (垂向水温、AI 识别)
+export function getStInfoByStcd(params: any) {
+  return request({
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStInfoByStcd',
+    method: 'get',
+    params
+  });
+}
+// 检查电站是否有专题配置数据
+export function checkPowerStationTopic(data: any) {
+  return request({
+    url: '/api/wmp-sys-server/sys/psbmodulelbb/GetKendoList',
+    method: 'post',
+    data
+  });
+}
 // 全景影像
 export function getPanoramaList(data: any) {
   return request({
@@ -33,7 +76,7 @@ export function getPanoramaList(data: any) {
 // 实时视频
 export function getVideoList(data: any) {
   return request({
-    url: '/vd/vmsstbprpt/GetKendoList',
+    url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
     method: 'post',
     data
   });
diff --git a/frontend/src/components/BasicTable/index.vue b/frontend/src/components/BasicTable/index.vue
index 9e65d607..87cb3b1c 100644
--- a/frontend/src/components/BasicTable/index.vue
+++ b/frontend/src/components/BasicTable/index.vue
@@ -36,7 +36,6 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch, nextTick, h, useSlots } from 'vue';
-import { Tooltip } from 'ant-design-vue';
 import { calcTableScrollY } from '@/utils/index';
 
 // --- Types ---
@@ -381,29 +380,12 @@ const enhancedColumns = computed(() => {
       };
     }
 
-    // 普通列，添加 ellipsis 和 tooltip
+    // 普通列，添加 ellipsis
     if (!props.enableEllipsis) return col;
 
     return {
       ...col,
-      ellipsis: true,
-      customRender: ({ text }: any) => {
-        const content = String(text ?? props.emptyPlaceholder);
-        return h(Tooltip, { title: content }, () =>
-          h(
-            'div',
-            {
-              class: 'table-cell-ellipsis',
-              style: {
-                overflow: 'hidden',
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis'
-              }
-            },
-            content
-          )
-        );
-      }
+      ellipsis: true
     };
   });
 });
diff --git a/frontend/src/components/MapModal/column.config.ts b/frontend/src/components/MapModal/column.config.ts
index bfe3ecec..de95b033 100644
--- a/frontend/src/components/MapModal/column.config.ts
+++ b/frontend/src/components/MapModal/column.config.ts
@@ -2011,7 +2011,7 @@ const FPPointColumns4: Array<any> = [
     type: '',
     url: ''
   },
- {
+  {
     name: '上游码头位置',
     filed: 'updcklc',
     visible: true,
@@ -2095,14 +2095,14 @@ const FPPointColumns4: Array<any> = [
     type: 'input',
     url: ''
   },
-    {
+  {
     name: '过鱼时间',
     filed: 'psfishtm',
     visible: true,
     type: 'select',
     url: ''
   },
- {
+  {
     name: '建成时间',
     filed: 'jcdt',
     visible: true,
@@ -2222,8 +2222,7 @@ const FPPointColumns5: Array<any> = [
     type: 'date',
     format: 'YYYY-MM-DD',
     url: ''
-  },
-  
+  }
 ];
 //鱼类增殖站 基础信息
 const FBPointColumns: Array<any> = [
@@ -3458,6 +3457,697 @@ const DwOnePointColumns: Array<any> = [
     url: ''
   }
 ];
+const EQPointColumns2: Array<any> = [
+  {
+    name: '基本属性',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '设施名称',
+    filed: 'stnm',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '站址',
+    filed: 'stlc',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '所属流域',
+    filed: 'hbrvcdName',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '经度(°)',
+    filed: 'lgtd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '纬度(°)',
+    filed: 'lttd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '所属电站',
+    filed: 'ennm',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '生态放流闸',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '开工日期',
+    filed: 'ststdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '建成日期',
+    filed: 'jcdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '孔口尺寸(m)',
+    filed: 'flksz',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '进水口底板高程(m)',
+    filed: 'jskgc',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '出水口底板高程(m)',
+    filed: 'outflrelev',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '死水位时保证流量(m³/s)',
+    filed: 'ddzgq',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '最大泄放流量(m³/s)',
+    filed: 'flkq',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '投资(亿元)',
+    filed: 'inv',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '投资是否计入工程主体',
+    filed: 'invinmn',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '结构形式',
+    filed: 'frntwlltyp',
+    visible: true,
+    type: 'select',
+    url: ''
+  }
+];
+const EQPointColumns5: Array<any> = [
+  {
+    name: '基本属性',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '设施名称',
+    filed: 'stnm',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '站址',
+    filed: 'stlc',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '所属流域',
+    filed: 'hbrvcdName',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '经度(°)',
+    filed: 'lgtd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '纬度(°)',
+    filed: 'lttd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '所属电站',
+    filed: 'ennm',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '基荷发电',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '开工日期',
+    filed: 'ststdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '建成日期',
+    filed: 'jcdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '基荷发电工况(MW)',
+    filed: 'jhfdgk',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '发电流量(m³/s)',
+    filed: 'fdll',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '进水口底板高程(m)',
+    filed: 'jskgc',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '出水口底板高程(m)',
+    filed: 'outflrelev',
+    visible: true,
+    type: 'input',
+    url: ''
+  }
+];
+const EQPointColumns3: Array<any> = [
+  {
+    name: '基本属性',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '设施名称',
+    filed: 'stnm',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '站址',
+    filed: 'stlc',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '所属流域',
+    filed: 'hbrvcdName',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '经度(°)',
+    filed: 'lgtd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '纬度(°)',
+    filed: 'lttd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '所属电站',
+    filed: 'ennm',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '生态放流洞',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '开工日期',
+    filed: 'ststdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '建成日期',
+    filed: 'jcdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '孔口尺寸(m)',
+    filed: 'flksz',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '进水口底板高程(m)',
+    filed: 'jskgc',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '出水口底板高程(m)',
+    filed: 'outflrelev',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '死水位时保证流量(m³/s)',
+    filed: 'ddzgq',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '最大泄放流量(m³/s)',
+    filed: 'flkq',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '投资(亿元)',
+    filed: 'inv',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '投资是否计入工程主体',
+    filed: 'invinmn',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '结构形式',
+    filed: 'frntwlltyp',
+    visible: true,
+    type: 'select',
+    url: ''
+  }
+];
+
+const EQPointColumns4: Array<any> = [
+  {
+    name: '基本属性',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '设施名称',
+    filed: 'stnm',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '站址',
+    filed: 'stlc',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '所属流域',
+    filed: 'hbrvcdName',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '经度(°)',
+    filed: 'lgtd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '纬度(°)',
+    filed: 'lttd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '所属电站',
+    filed: 'ennm',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '生态放流管',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '开工日期',
+    filed: 'ststdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '建成日期',
+    filed: 'jcdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '孔口尺寸(m)',
+    filed: 'flksz',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '进水口底板高程(m)',
+    filed: 'jskgc',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '出水口底板高程(m)',
+    filed: 'outflrelev',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '死水位时保证流量(m³/s)',
+    filed: 'ddzgq',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '最大泄放流量(m³/s)',
+    filed: 'flkq',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '投资(亿元)',
+    filed: 'inv',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '投资是否计入工程主体',
+    filed: 'invinmn',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '结构形式',
+    filed: 'frntwlltyp',
+    visible: true,
+    type: 'select',
+    url: ''
+  }
+];
+const EQPointColumns1: Array<any> = [
+  {
+    name: '基本属性',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '设施名称',
+    filed: 'stnm',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '站址',
+    filed: 'stlc',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '所属流域',
+    filed: 'hbrvcdName',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '经度(°)',
+    filed: 'lgtd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '纬度(°)',
+    filed: 'lttd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '所属电站',
+    filed: 'ennm',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '生态放流孔',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '开工日期',
+    filed: 'ststdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '建成日期',
+    filed: 'jcdt',
+    visible: true,
+    type: 'date',
+    format: 'YYYY-MM-DD',
+    url: ''
+  },
+  {
+    name: '孔口尺寸(m)',
+    filed: 'flksz',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '进水口底板高程(m)',
+    filed: 'jskgc',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '出水口底板高程(m)',
+    filed: 'outflrelev',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '死水位时保证流量(m³/s)',
+    filed: 'ddzgq',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '最大泄放流量(m³/s)',
+    filed: 'flkq',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '投资(亿元)',
+    filed: 'inv',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '投资是否计入工程主体',
+    filed: 'invinmn',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '结构形式',
+    filed: 'frntwlltyp',
+    visible: true,
+    type: 'select',
+    url: ''
+  }
+];
+const EQPointColumns7: Array<any> = [
+  {
+    name: '基本属性',
+    visible: false,
+    ruleTips: '',
+    type: '',
+    url: ''
+  },
+  {
+    name: '设施名称',
+    filed: 'stnm',
+    visible: true,
+    type: 'input',
+    url: ''
+  },
+  {
+    name: '站址',
+    filed: 'stlc',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '所属流域',
+    filed: 'hbrvcdName',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  {
+    name: '经度(°)',
+    filed: 'lgtd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '纬度(°)',
+    filed: 'lttd',
+    visible: true,
+    type: 'number',
+    toFixed: 6,
+    url: ''
+  },
+  {
+    name: '所属电站',
+    filed: 'ennm',
+    visible: true,
+    type: 'select',
+    url: ''
+  },
+  
+];
 //阶段属性
 const basicFilterColumns: Array<any> = [
   {
@@ -4183,6 +4873,12 @@ export {
   DwFivePointColumns,
   DwSixPointColumns,
   DwOnePointColumns,
+  EQPointColumns2,
+  EQPointColumns5,
+  EQPointColumns3,
+  EQPointColumns4,
+  EQPointColumns1,
+  EQPointColumns7,
   StinfoAiVidoPointColumns,
   basicFilterColumns,
   tabsWithTwoColumns,
diff --git a/frontend/src/components/MapModal/components/BasicInfo.vue b/frontend/src/components/MapModal/components/BasicInfo.vue
index b3ee9432..371d1016 100644
--- a/frontend/src/components/MapModal/components/BasicInfo.vue
+++ b/frontend/src/components/MapModal/components/BasicInfo.vue
@@ -128,6 +128,12 @@ import {
   FBPointColumns,
   VaPointColumns,
   VPPointColumns,
+  EQPointColumns1,
+  EQPointColumns2,
+  EQPointColumns5,
+  EQPointColumns3,
+  EQPointColumns4,
+  EQPointColumns7,
   wePointColumns,
   waPointColumns,
   DwPointColumns,
@@ -163,7 +169,7 @@ const columnsConfig = ref([
     type: 'ENG',
     columns: BasicColumns
   },
-    {
+  {
     type: 'ENG_ALARM',
     columns: BasicColumns
   },
@@ -230,6 +236,30 @@ const columnsConfig = ref([
   {
     type: 'VP',
     columns: VPPointColumns
+  },
+   {
+    type: 'EQ_1',
+    columns: EQPointColumns1
+  },
+  {
+    type: 'EQ_2',
+    columns: EQPointColumns2
+  },
+  {
+    type: 'EQ_5',
+    columns: EQPointColumns5
+  },
+  {
+    type: 'EQ_3',
+    columns: EQPointColumns3
+  },
+   {
+    type: 'EQ_4',
+    columns: EQPointColumns4
+  },
+    {
+    type: 'EQ_7',
+    columns: EQPointColumns7
   },
   {
     type: 'WE',
@@ -243,6 +273,10 @@ const columnsConfig = ref([
     type: 'VD_FBFM',
     columns: StinfoAiVidoPointColumns
   },
+  {
+    type: 'VD',
+    columns: StinfoAiVidoPointColumns
+  },
   {
     type: 'eng_alarm_point',
     columns: BasicColumns
@@ -301,7 +335,11 @@ const getData = async () => {
 
       let columns = [];
       columns = columnsConfig.value.find(
-        item => item.type == modelStore.params.sttp
+        item =>
+          item.type ==
+          (modelStore.params.sttp == 'EQ'
+            ? modelStore.params.anchoPointState
+            : modelStore.params.sttp)
       ).columns;
 
       columns.forEach(item => {
diff --git a/frontend/src/components/MapModal/index.vue b/frontend/src/components/MapModal/index.vue
index cd18e346..3e5f6730 100644
--- a/frontend/src/components/MapModal/index.vue
+++ b/frontend/src/components/MapModal/index.vue
@@ -1,7 +1,7 @@
 <template>
   <a-modal
     :open="visible"
-    :title="title"
+    :title="title + '  ' + '详情信息'"
     width="80vw"
     :footer="null"
     :closable="true"
@@ -33,21 +33,33 @@
       >
       </a-select>
     </div>
-    <a-tabs :active-key="currentActiveKey" @change="onTabChange">
+
+    <!-- 加载状态提示 -->
+    <div v-if="isLoading" class="loading-container">
+      <a-spin tip="加载中..." />
+    </div>
+
+    <!-- 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>
       <template #rightExtra v-if="anchor.sttp == 'ENG' || anchor.sttp == 'eng'">
-        <a-tooltip :title="!isEngConfig ? '' : '该电站无专题配置'">
-          <a-button type="primary" :disabled="isEngConfig">
+        <a-tooltip :title="!hasPowerStatData ? '该电站无专题配置' : ''">
+          <a-button
+            type="primary"
+            :disabled="!hasPowerStatData"
+            @click="gotoEngTopic"
+          >
             <i class="icon iconfont icon-topic mr-[5px]"></i>
             电站专题
           </a-button></a-tooltip
         >
       </template>
     </a-tabs>
+
     <!-- 内容区域 - 使用动态组件 + keep-alive 实现按需加载和缓存 -->
     <keep-alive>
-      <div class="content">
+      <div v-if="!isLoading" class="content">
         <div class="content-wrapper" v-show="isQxdMode(currentActiveKey)">
           测站：
           <a-select
@@ -90,11 +102,13 @@
               ? qxdSelectedStcd
               : ''
           "
+          :wt-config="modelStore.wtConfig"
         />
         <!-- 监测数据 - 垂向水温 -->
         <VerticalWaterTemperature
           v-show="currentActiveKey === 'VerticalWaterTemperature'"
           :is-active="currentActiveKey === 'VerticalWaterTemperature'"
+          :stcd="modelStore.verticalWaterStcd || modelStore.params.stcd"
         />
         <!-- 监测数据 - 水质 -->
         <WaterQuality
@@ -106,6 +120,7 @@
               ? qxdSelectedStcdWq
               : ''
           "
+          :wq-show="modelStore.wqShow"
         />
         <!-- 流量监测 -->
         <FlowMeasure
@@ -176,13 +191,445 @@ import { handleTabs } from './setting.config';
 import {
   getMonitorDataWt,
   getMonitorDataWq,
-  getMonitorDataZq
+  getMonitorDataZq,
+  getBuildState,
+  getFishTab,
+  checkAnalysisShow,
+  getStInfoByStcd,
+  getVideoList,
+  getMonitorDataWaterTempPowerStation,
+  getMonitorDataWaterTempPowerStation2,
+  checkPowerStationTopic
 } from '@/api/mapModal';
+// import { useRouter } from 'vue-router';
 
 const modelStore = useModelStore();
 const tabsConfig = ref([]);
-// 判断是否显示电站专题配置
-const isEngConfig = ref(true);
+// 加载状态：等待所有验证完成后再显示 tabs
+const isLoading = ref(true);
+
+// ==================== 电站专题相关 ====================
+// 电站专题配置数据状态
+const hasPowerStatData = ref(false);
+// 电站专题 URL 参数（仅 hbb）
+const hbbSearchParams = '?menu=dianZhanZhuanTi&page=dianZhanZhuanTi';
+// 判断当前是否在电站专题页面
+const isPowerStatPage = computed(() => {
+  return window.location.search === hbbSearchParams;
+});
+// 判断是否为局级页面（根据当前路由判断）
+const isJiangJu = computed(() => {
+  // TODO: 根据实际路由判断逻辑修改
+  return false;
+});
+// const router = useRouter();
+
+/**
+ * 查询电站是否有专题配置数据
+ */
+const checkPowerStationTopicData = async (stcd: string) => {
+  try {
+    const res = await checkPowerStationTopic({
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: stcd
+          },
+          {
+            field: 'bclData',
+            operator: 'contains',
+            dataType: 'string',
+            value: 'image/png'
+          }
+        ]
+      }
+    });
+    hasPowerStatData.value =
+      res?.data?.data && res?.data?.data?.length > 0;
+  } catch (error) {
+    console.error('查询电站专题配置失败:', error);
+    hasPowerStatData.value = false;
+  }
+};
+
+/**
+ * 跳转到电站专题页面
+ */
+const gotoEngTopic = () => {
+  // TODO: 等待电站专题页面创建后，取消注释以下代码
+  /*
+  const url = `/qgc-biz-home/${hbbSearchParams}`;
+  const menu = {
+    id: 'dianZhanZhuanTi',
+    url,
+    name: '电站专题'
+  };
+
+  // 缓存当前电站 stcd（跳转后页面会读取）
+  localStorage.setItem('modalSelectedEngTopic', JSON.stringify({ stcd: modelStore.params.stcd }));
+
+  // 关闭弹窗
+  handleClose();
+
+  // 使用 Vue Router 跳转
+  // router.push(url);
+  */
+  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'];
+
+// ==================== 异步 Tab 过滤逻辑 ====================
+
+// 功能6: 垂向水温与 AI 识别动态过滤
+const checkVerticalWaterAndAI = async (stcd: string) => {
+  try {
+    const res = await getStInfoByStcd({ stcd });
+    const data = res?.data || res;
+    if (data && data.relList) {
+      const jianCei = data.relList.find(
+        (item: any) => item.sttpCode === 'WTVT'
+      );
+      const aiShiBie = data.relList.filter((item: any) =>
+        item?.sttpCode?.startsWith('AI')
+      );
+
+      if (!jianCei) {
+        // 无垂向水温子站点，过滤掉垂向水温 Tab
+        tabsConfig.value = tabsConfig.value.filter(
+          (item: any) => item.type !== 'VerticalWaterTemperature'
+        );
+      } else {
+        modelStore.verticalWaterStcd = jianCei.stcd;
+      }
+
+      if (!aiShiBie.length) {
+        // 无 AI 识别子站点，过滤掉 AI 识别 Tab
+        tabsConfig.value = tabsConfig.value.filter(
+          (item: any) => item.type !== 'AIYXSB'
+        );
+      } else {
+        modelStore.aiSites = aiShiBie;
+      }
+    }
+  } catch (error) {
+    console.error('垂向水温/AI 检查失败:', error);
+  }
+};
+
+// 功能7: 视频存在性检查
+const checkVideoExists = async (stcd: string) => {
+  try {
+    const res = await getVideoList({
+      filter: {
+        logic: 'and',
+        filters: [{ field: 'stcd', operator: 'eq', value: stcd }]
+      }
+    });
+    if (!res?.data?.data?.length && !res?.data?.records?.length) {
+      // 无视频数据，过滤掉视频 Tab
+      tabsConfig.value = tabsConfig.value.filter(
+        (item: any) => item.type !== 'video'
+      );
+    }
+  } catch (error) {
+    console.error('视频检查失败:', error);
+  }
+};
+
+// 功能8: 鱼类栖息地数据类型检查 (React: isLCJ && sttpCode === 'WE')
+const checkFishTab = async (stcd: string) => {
+  try {
+    const res = await getFishTab(stcd);
+    const data = res?.data || res;
+    if (data && data.length > 0) {
+      modelStore.fishTabInfo = data[0];
+      // 根据 hasWt/hasWq/hasFv 过滤 FlowMeasure 的子 Tab
+      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;
+          return true;
+        });
+      }
+    }
+  } catch (error) {
+    console.error('鱼类数据检查失败:', error);
+  }
+};
+
+// 功能9: 水质 AI 预测功能检查 (React: (app === "hbb" || baseId === "07" || "02") && sttpCode === 'WQ'/'WQFB'/'wq')
+const checkAnalysisAvailability = async (stcd: string) => {
+  try {
+    const filter = {
+      filter: {
+        logic: 'and',
+        filters: [
+          { field: 'stcd', operator: 'eq', value: stcd },
+          { field: 'mway', operator: 'eq', value: '2' },
+          { field: 'dtinType', operator: 'eq', value: '0' },
+          {
+            logic: 'or',
+            filters: [
+              { field: 'engLctn3Code', operator: 'isnotnull' },
+              { field: 'engLctn1Code', operator: 'isnotnull' }
+            ]
+          }
+        ]
+      }
+    };
+    const res = await checkAnalysisShow(filter);
+    modelStore.wqShow = !!res?.data;
+  } catch (error) {
+    console.error('水质 AI 预测检查失败:', error);
+    modelStore.wqShow = false;
+  }
+};
+
+// 功能10: 水温站特殊处理 (React: (app === "hbb" || baseId === "07" || "02") && sttpCode === 'WT'/'wt')
+const checkWaterTempConfig = async (stcd: string) => {
+  try {
+    const [configRes, dwRes, buildRes] = await Promise.all([
+      getMonitorDataWaterTempPowerStation({ stcd }),
+      getMonitorDataWaterTempPowerStation2({ stcd }),
+      getBuildState({
+        filter: {
+          logic: 'and',
+          filters: [{ field: 'stcd', operator: 'eq', value: stcd }]
+        }
+      })
+    ]);
+
+    modelStore.wtConfig = {
+      ioWtrv: configRes?.data?.ioWtrv,
+      hasRstcdWtvt: dwRes?.data
+    };
+
+    // 检查出入库水温对比
+    const buildData = buildRes?.data?.[0];
+    if (!buildData?.engIwtCode && !buildData?.engDwtCode) {
+      tabsConfig.value = tabsConfig.value.filter(
+        (item: any) => item.name !== '出入库水温对比'
+      );
+    }
+  } catch (error) {
+    console.error('水温配置检查失败:', error);
+  }
+};
+
+// 功能11: 电站建设状态过滤 (React: sttp == "ENG" && eqtp != "QEC")
+const checkBuildState = async (stcd: string) => {
+  try {
+    const res = await getBuildState({
+      filter: {
+        logic: 'and',
+        filters: [{ field: 'stcd', operator: 'eq', value: stcd }]
+      }
+    });
+
+    const buid = res?.data?.[0]?.bldsttCcode;
+    // 0 未建  1 在建  2 已建
+    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;
+    }
+  } catch (error) {
+    console.error('建设状态检查失败:', error);
+  }
+};
+
+// QGC 完整 Tab 过滤逻辑（与 React setQGCTabList 对齐）
+const setQGCTabList = async (_tabs: any, stcd: string) => {
+  let tabs = [..._tabs];
+
+  try {
+    // 1. 电站建设状态过滤
+    if (modelStore.params.sttp == 'ENG' && modelStore.params.eqtp != 'QEC') {
+      const res = await getBuildState({
+        filter: {
+          logic: 'and',
+          filters: [{ field: 'stcd', operator: 'eq', value: stcd }]
+        }
+      });
+
+      const buid = res?.data?.[0]?.bldsttCcode;
+      const zj = ['基础信息', '实时视频', '全景影像', '查看报告'];
+      const wj = ['基础信息', '查看报告'];
+
+      if (res?.data?.length > 0) {
+        const zJTabData = tabs?.filter((item: any) => zj.includes(item.name));
+        const wJTabData = tabs?.filter((item: any) => wj.includes(item.name));
+        tabs = buid == 1 ? zJTabData : buid == 0 ? wJTabData : tabs;
+      }
+    }
+
+    // 2. 垂向水温 & AI 识别检查（对所有类型执行，与 React 一致）
+    const res4 = await getStInfoByStcd({ stcd });
+    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')
+      );
+
+      if (!jianCei) {
+        // newTabs = newTabs.filter(
+        //   item => item.type !== 'VerticalWaterTemperature'
+        // );
+      } else {
+        modelStore.verticalWaterStcd = jianCei.stcd;
+      }
+      if (!aiShiBie.length) {
+        newTabs = newTabs.filter(item => item.type !== 'AIYXSB');
+      } else {
+        modelStore.aiSites = aiShiBie;
+      }
+    }
+
+    // 3. 视频存在性检查
+    let params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'sttpCode',
+            operator: 'startswith',
+            value: 'VD_'
+          },
+          {
+            logic: 'or',
+            filters: [
+              {
+                field: 'rstcd',
+                operator: 'eq',
+                dataType: 'string',
+                value: stcd
+              },
+              {
+                field: 'stcd',
+                operator: 'eq',
+                dataType: 'string',
+                value: stcd
+              },
+              {
+                field: 'fhstcd',
+                operator: 'eq',
+                dataType: 'string',
+                value: stcd
+              },
+              {
+                field: 'stCode',
+                operator: 'eq',
+                dataType: 'string',
+                value: stcd
+              }
+            ]
+          }
+        ]
+      },
+      select: ['stcd', 'stnm', 'sttpCode', 'sttpName', 'playWay', 'url'],
+      sort: [
+        {
+          field: 'stnm',
+          dir: 'asc'
+        }
+      ]
+    };
+    const res2 = await getVideoList(params);
+    console.log('',  modelStore.params.sttp);
+     debugger
+    if (
+      (res2?.data?.data?.length > 0 || res2?.data?.records?.length > 0) ||
+      modelStore.params.sttp == 'WQ'
+    ) {
+      tabsConfig.value = newTabs;
+    } else {
+      tabsConfig.value = newTabs.filter((item: any) => item.type != 'video');
+    }
+  } catch (error) {
+    console.error('QGC Tab 过滤失败:', error);
+  }
+};
+
+// 综合过滤函数（与 React useEffect 逻辑对齐）
+const applyTabFilters = async (params: any) => {
+  isLoading.value = true; // 开始加载
+
+  try {
+    const sttpCode = params?.sttp;
+    const stcd = params?.stcd;
+    const eqtp = params?.eqtp;
+    const baseId = modelStore.baseId;
+
+    if (!stcd) return;
+
+    // 按照 React 的分支逻辑执行（注意运算符优先级）
+    if (isLCJ && sttpCode === 'VP') {
+      // LCJ 珍稀植物园视频检查
+      const res = await getVideoList({
+        filter: {
+          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 != '实时视频'
+        );
+      }
+    } else if (isLCJ && sttpCode === 'WE') {
+      // LCJ 鱼类栖息地数据类型检查
+      await checkFishTab(stcd);
+    } else if (
+      ((baseId === '07' || baseId === '02') && sttpCode === 'WQ') ||
+      sttpCode === 'WQFB' ||
+      sttpCode === 'wq'
+    ) {
+      // 水质 AI 预测检查（React 逻辑：WQ 需要条件，WQFB/wq 无条件）
+      await checkAnalysisAvailability(stcd);
+    } else if (
+      ((baseId === '07' || baseId === '02') && sttpCode === 'WT') ||
+      sttpCode === 'wt'
+    ) {
+      // 水温站特殊处理（React 逻辑：WT 需要条件，wt 无条件）
+      await checkWaterTempConfig(stcd);
+    } else if (
+      sttpList.includes(sttpCode?.toUpperCase()) ||
+      sttpCode?.startsWith('FP_') ||
+      sttpCode?.includes('DW')
+    ) {
+      // QGC 完整 Tab 过滤（包含建设状态、垂向水温、AI识别、视频检查）
+      await setQGCTabList(tabsConfig.value, stcd);
+    }
+  } catch (error) {
+    console.error('Tab 过滤逻辑执行失败:', error);
+  } finally {
+    isLoading.value = false; // 无论成功失败都停止加载
+  }
+};
 
 // ==================== qxd 栖息地模式相关 ====================
 // qxd模式配置映射
@@ -361,7 +808,7 @@ const emit = defineEmits<{
 
 // 内部维护的 activeKey
 const currentActiveKey = ref<string>('');
-const anchor = ref<string>('');
+const anchor = ref<any>('');
 
 // 监听外部传入的 activeKey 变化，同步到内部状态
 watch(
@@ -375,20 +822,27 @@ watch(
 );
 watch(
   () => modelStore.params,
-  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)) {
       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 });
     let value = tabsConfig.value.find((item: any) => item.default);
     currentActiveKey.value = value?.key;
+
+    // 电站类型时，查询电站专题配置数据
+    if (params?.sttp?.toUpperCase() === 'ENG') {
+      checkPowerStationTopicData(params.stcd);
+    }
+
+    // 应用异步 Tab 过滤（非阻塞式）
+    applyTabFilters(params);
   },
   { deep: true, immediate: true }
 );
@@ -415,7 +869,17 @@ const onTabChange = (key: string) => {
 // 关闭弹窗
 const handleClose = () => {
   emit('update:visible', false);
-  modelStore.params = {};
+  modelStore.params = {
+    sttp: 'eng',
+    stcd: '',
+    date: '',
+    show: true,
+    enfc: '0',
+    eqtp: '',
+    baseId: '',
+    sttpCode: '',
+    sttpMap: ''
+  };
   // 清理状态,避免影响下次打开
   modelStore.showStcdSelector = false;
   modelStore.stcdOptions = [];
@@ -425,6 +889,13 @@ const handleClose = () => {
   qxdSelectedStcdWq.value = '';
   qxdSelectedStcdZq.value = '';
   qxdLoadedCodes.value = new Set();
+  // 清理电站专题状态
+  hasPowerStatData.value = false;
+  modelStore.verticalWaterStcd = '';
+  modelStore.aiSites = [];
+  modelStore.wtConfig = {};
+  modelStore.wqShow = false;
+  modelStore.fishTabInfo = null;
 };
 
 // 为了方便模板中使用，将 props.data 暴露给模板
@@ -453,5 +924,12 @@ const handleStcdChange = (newStcd: string) => {
   .content {
     min-height: 600px;
   }
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
 }
 </style>
diff --git a/frontend/src/components/MapModal/setting.config.ts b/frontend/src/components/MapModal/setting.config.ts
index ee101e29..f2bc8034 100644
--- a/frontend/src/components/MapModal/setting.config.ts
+++ b/frontend/src/components/MapModal/setting.config.ts
@@ -208,158 +208,101 @@ const ENGEQTabs: Array<any> = [
 
 // ].filter(Boolean)
 // //生态流量泄放设施  √
-// const EQTabs: Array<any> = [
-//     {
-//         name: '基础信息',
-//         key: 'basicInfo',
-//         type: 'basic',
-//         url: '/bbi/siteBipc/getSiteBasicInfo'
-//     },
-//     {
-//         name: '实时视频',
-//         key: 'videoInfo',
-//         type: 'video',
-//         url: '/video/dataStcdFrame/getVideoMonitorList'
-//     },
-//     // {
-//     //     name: '全景影像',
-//     //     key: 'panoramaInfo',
-//     //     type: 'panorama'
-//     // },
-//     {
-//         name: '监测数据',
-//         key: 'flowDischarge',
-//         type: 'FlowDischarge'
-//     }
-// ]
+const EQTabs: Array<any> = [
+  {
+    name: '基础信息',
+    key: 'basicInfo',
+    type: 'basic',
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo',
+    default: true // 默认显示
+  },
+  {
+    name: '实时视频',
+    key: 'videoInfo',
+    type: 'video',
+    url: '/video/dataStcdFrame/getVideoMonitorList'
+  },
+  // {
+  //     name: '全景影像',
+  //     key: 'panoramaInfo',
+  //     type: 'panorama'
+  // },
+  {
+    name: '监测数据',
+    key: 'flowDischarge',
+    type: 'FlowDischarge'
+  }
+];
 // 过鱼设施 √
-const FPTabs: Array<any> =
-  // Session.getAppCode() === 'hbb'
-  //     ? [
-  //         {
-  //             name: '基础信息',
-  //             key: 'basicInfo',
-  //             type: 'basic',
-  //             url: '/bbi/siteBipc/getSiteBasicInfo',
-  //             code: 'gyss.tabs.jcxx'
-  //         },
-  //         {
-  //             name: '实时视频',
-  //             key: 'videoInfo',
-  //             type: 'video',
-  //             url: '/video/dataStcdFrame/getVideoMonitorList',
-  //             code: 'gyss.tabs.sssp'
-  //         },
-  //         {
-  //             name: '在线监测数据',
-  //             key: 'FishFacilityMonitorData', //Normal
-  //             type: 'FishFacilityMonitorData', //Normal
-  //             code: 'gyss.tabs.jcsj',
-  //             // tabs: [
-  //             //     {
-  //             //         name: '',
-  //             //         type: 'table',
-  //             //         tableUrl: getUrl('/wmp-env-server/env/fp/fpssTable/GetKendoListCust'),
-  //             //         hiddenChart: true,
-  //             //         hiddenTabs: true,
-  //             //         filter: NormalDatePickerFilter
-  //             //     }
-  //             // ]
-  //         },
-  //         {
-  //             name: '运行情况',
-  //             key: 'FishFacilityRunState', //Normal1
-  //             type: 'FishFacilityRunState', //Normal
-  //             code: 'gyss.tabs.yxqk',
-  //             // tabs: [
-  //             //     {
-  //             //         name: '',
-  //             //         type: 'table',
-  //             //         tableUrl: getUrl('/wmp-env-server/env/fp/run/secondRun/GetKendoListCust'),
-  //             //         hiddenChart: true,
-  //             //         hiddenTabs: true,
-  //             //         filter: NormalFishFilter
-  //             //     }
-  //             // ]
-  //         },
-  //         {
-  //             name: '综合分析',
-  //             key: 'FishZHFX',
-  //             type: 'FishZHFX',
-  //             // tabs: [
-  //             //     {
-  //             //         name: '',
-  //             //         type: 'table',
-  //             //         tableUrl: getUrl('/wmp-env-server/env/fp/run/secondRun/GetKendoListCust'),
-  //             //         hiddenChart: true,
-  //             //         hiddenTabs: true,
-  //             //         filter: NormalFishFilter
-  //             //     }
-  //             // ]
-  //         },
-  //         {
-  //             name: 'AI运行识别',
-  //             key: 'AIYXSB',
-  //             type: 'AIYXSB',
-  //         }
-  //     ]
-  //     :
-  [
-    {
-      name: '基础信息',
-      key: 'basicInfo',
-      type: 'basic',
-      url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo'
-      // code: 'gyss.tabs.jcxx'
-    },
-    // {
-    //           name: '实时视频',
-    //           key: 'videoInfo',
-    //           type: 'video',
-    //           url: '/video/dataStcdFrame/getVideoMonitorList',
-    //           code: 'gyss.tabs.sssp'
-    //   }
-    {
-      name: '在线监测数据',
-      key: 'FishFacilityMonitorData', //Normal
-      type: 'FishFacilityMonitorData', //Normal
-      code: 'gyss.tabs.jcsj',
-      // 默认显示
-      tabs: [
-        {
-          name: '',
-          type: 'table',
-          tableUrl: '/wmp-env-server/env/fp/fpssTable/GetKendoListCust',
-          hiddenChart: true,
-          hiddenTabs: true
-          // filter: NormalDatePickerFilter
-        }
-      ]
-    },
-    {
-      name: '运行情况',
-      key: 'FishFacilityRunState', //Normal1
-      type: 'FishFacilityRunState', //Normal
-      code: 'gyss.tabs.yxqk',
-      default: true
-      // tabs: [
-      //     {
-      //         name: '',
-      //         type: 'table',
-      //         tableUrl: getUrl('/wmp-env-server/env/fp/run/secondRun/GetKendoListCust'),
-      //         hiddenChart: true,
-      //         hiddenTabs: true,
-      //         filter: NormalFishFilter
-      //     }
-      // ]
-    },
-    {
-      name: '综合分析',
-      key: 'FishZHFX',
-      type: 'FishZHFX',
-      code: 'gyss.tabs.zhfx'
-    }
-  ];
+const FPTabs: Array<any> = [
+  {
+    name: '基础信息',
+    key: 'basicInfo',
+    type: 'basic',
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo',
+    code: 'gyss.tabs.jcxx'
+  },
+  {
+    name: '实时视频',
+    key: 'videoInfo',
+    type: 'video',
+    url: '/video/dataStcdFrame/getVideoMonitorList',
+    code: 'gyss.tabs.sssp'
+  },
+  {
+    name: '在线监测数据',
+    key: 'FishFacilityMonitorData', //Normal
+    type: 'FishFacilityMonitorData', //Normal
+    code: 'gyss.tabs.jcsj',
+    tabs: [
+      {
+        name: '',
+        type: 'table',
+        // tableUrl: getUrl('/wmp-env-server/env/fp/fpssTable/GetKendoListCust'),//getUrl
+        hiddenChart: true,
+        hiddenTabs: true
+        // filter: NormalDatePickerFilter   // 没有
+      }
+    ]
+  },
+  {
+    name: '运行情况',
+    key: 'FishFacilityRunState', //Normal1
+    type: 'FishFacilityRunState', //Normal
+    code: 'gyss.tabs.yxqk',
+    default: true, // 默认显示
+    tabs: [
+      {
+        name: '',
+        type: 'table',
+        // tableUrl: getUrl('/wmp-env-server/env/fp/run/secondRun/GetKendoListCust'),
+        hiddenChart: true,
+        hiddenTabs: true
+        // filter: NormalFishFilter // 没有
+      }
+    ]
+  },
+  {
+    name: '综合分析',
+    key: 'FishZHFX',
+    type: 'FishZHFX'
+    // tabs: [  线上同步注释
+    //     {
+    //         name: '',
+    //         type: 'table',
+    //         tableUrl: getUrl('/wmp-env-server/env/fp/run/secondRun/GetKendoListCust'),
+    //         hiddenChart: true,
+    //         hiddenTabs: true,
+    //         filter: NormalFishFilter
+    //     }
+    // ]
+  },
+  {
+    name: 'AI运行识别',
+    key: 'AIYXSB',
+    type: 'AIYXSB'
+  }
+];
 
 // // 过鱼设施在建状态
 const FPTabs1: Array<any> = [
@@ -389,7 +332,7 @@ const FBTabs: Array<any> = [
     name: '基础信息',
     key: 'basicInfo',
     type: 'basic',
-    url: '/bbi/siteBipc/getSiteBasicInfo'
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo'
   },
   {
     name: '运行数据',
@@ -724,7 +667,7 @@ const WETabs: Array<any> = [
     name: '基础信息',
     key: 'basicInfo',
     type: 'basic',
-    url: '/bbi/siteBipc/getSiteBasicInfo',
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo',
     default: true // 默认显示
   },
   {
@@ -857,7 +800,7 @@ const VPTabs: Array<any> = [
     name: '基础信息',
     key: 'basicInfo',
     type: 'basic',
-    url: '/bbi/siteBipc/getSiteBasicInfo',
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo',
     default: true // 默认显示
   },
   // {
@@ -940,7 +883,7 @@ const VATabs: Array<any> = [
     name: '基础信息',
     key: 'basicInfo',
     type: 'basic',
-    url: '/bbi/siteBipc/getSiteBasicInfo',
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo',
     default: true // 默认显示
   },
   // {
@@ -1067,7 +1010,7 @@ const WATabs: Array<any> = [
     name: '基础信息',
     key: 'basicInfo',
     type: 'basic',
-    url: '/bbi/siteBipc/getSiteBasicInfo',
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo',
     default: true // 默认显示
   },
   {
@@ -1104,11 +1047,19 @@ const handleTabs = (modaldata: any) => {
       return WQFBTabs;
     case 'WQ':
       const _tabs = [...WQTabs];
-      if (modaldata?.dtinType == 2 || modaldata?.dtinType == 1)
+
+      if (modaldata?.dtinType == 2 || modaldata?.dtinType == 1) {
         _tabs.splice(2, 1); //国家站 人工站把视频tab去除
+      }
       return _tabs;
     case 'FH':
-      return FHTabs;
+      let arr = [...FHTabs];
+
+      if (modaldata?.bldstt == 2 || modaldata?.bldstt == 1) {
+        console.log('modaldata', modaldata);
+        arr =[ arr[0]]; //国家站 人工站把视频tab去除
+      }
+      return arr;
     case 'FH_ZQ_POINT':
       return FLOWTabs;
     case 'FP_POINT':
@@ -1124,6 +1075,7 @@ const handleTabs = (modaldata: any) => {
     case 'WVA':
       return WATabs;
     case 'VD_FBFM':
+    case 'VD':
       return videoTabs;
     case 'ENG_ALARM_POINT':
       return DZGJ;
@@ -1151,8 +1103,8 @@ const handleTabs = (modaldata: any) => {
     // }
     case 'ENG_ALARM':
       return DZGJ;
-    //     case 'EQ':
-    //         return EQTabs
+    case 'EQ':
+      return EQTabs;
     case 'DW':
     case 'DW_1':
     case 'DW_2':
@@ -1160,58 +1112,37 @@ const handleTabs = (modaldata: any) => {
     case 'DW_4':
     case 'DW_5':
       return DWTabs;
-    case 'FP_1': //todo，后续再删除多余代码
-      return FPTabs.filter(item => item.name !== '在线监测数据');
     case 'FP': //todo，后续再删除多余代码
-
+    case 'FP_1': //todo，后续再删除多余代码
     // case "FP_2":   //todo，后续再删除多余代码
     case 'FP_3': //todo，后续再删除多余代码
     case 'FP_4': //todo，后续再删除多余代码
       // case "FP_5":   //todo，后续再删除多余代码
-      //  // if (Session.getAppCode() === 'hbb') {
+
       // mway为2的时侯显示在线监测数据
       if (
         modaldata.bldsttCcode == '1' ||
         modaldata.bldsttCcode == '0' ||
         modaldata.bldstt == '1' ||
-        modaldata.bldstt == '0' ||
-        modaldata.bldstt == '2'
+        modaldata.bldstt == '0'
       ) {
+        console.log(1);
         return [
           ...FPTabs1 //建设情况
         ];
       } else {
+        console.log(2);
         if (modaldata.mway != 2) {
+          console.log(3);
           return FPTabs.filter(item => item.name !== '在线监测数据');
         } else {
+          console.log(4);
           return [
             ...FPTabs //有监测数据
           ];
         }
       }
-    // } else {
-    // if (modaldata.bldsttCcode == '1' || modaldata.bldsttCcode == '0' || modaldata.bldstt == '1' || modaldata.bldstt == '0') {
-    //     return [
-    //         ...FPTabs1
-    //         // {
-    //         //     name: "系统运行记录",
-    //         //     key: "FishSystemRunState",  //Normal1
-    //         //     type: "FishSystemRunState",  //Normal
-    //         //     tabs: []
-    //         // }
-    //     ]
-    // } else {
-    //     return [
-    //         ...FPTabs
-    //         // {
-    //         //     name: "系统运行记录",
-    //         //     key: "FishSystemRunState",  //Normal1
-    //         //     type: "FishSystemRunState",  //Normal
-    //         //     tabs: []
-    //         // }
-    //     ]
-    // }
-    // }
+
     case 'FP_2': //todo，后续再删除多余代码
     case 'FP_5': //todo，后续再删除多余代码
       if (
diff --git a/frontend/src/modules/chuixiangshuiwenChangeMod/index.vue b/frontend/src/modules/chuixiangshuiwenChangeMod/index.vue
index 7e2d98eb..0f4d9c29 100644
--- a/frontend/src/modules/chuixiangshuiwenChangeMod/index.vue
+++ b/frontend/src/modules/chuixiangshuiwenChangeMod/index.vue
@@ -493,7 +493,7 @@ const initChart = () => {
     modelStore.modalVisible = true;
     modelStore.params.sttp = "WT";
     modelStore.params.enfc = '1';
-    modelStore.title = stnm + "详情信息";
+    modelStore.title = stnm ;
     // modelStore.isBasicEdit = true;
     modelStore.params.stcd = stcd;
 
@@ -643,7 +643,7 @@ const handleChartClick = (params: any) => {
         timeRange: [startTime, endTime]
       } as any;
 
-      modelStore.title = currentStnm ? `${currentStnm} 详情信息` : '详情信息';
+      modelStore.title = currentStnm ? `${currentStnm} ` : '';
       modelStore.tabList = handleTabs(modelStore.params);
       modelStore.modalVisible = true;
     });
diff --git a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue
index 655055fd..b3cc5aa9 100644
--- a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue
+++ b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue
@@ -462,7 +462,7 @@ const handleViewDetail = (record: any, type: string) => {
     } else if (type === 'ENG') {
         modelStore.modalVisible = true;
         modelStore.params.sttp = "ENG";
-        modelStore.title = record.stnm + " 详情信息";
+        modelStore.title = record.stnm;
         modelStore.params.stcd = record.rstcd;
     }
 
diff --git a/frontend/src/modules/guoyujiance/components/FPVDDetailMD.vue b/frontend/src/modules/guoyujiance/components/FPVDDetailMD.vue
index 89c633bb..16040fad 100644
--- a/frontend/src/modules/guoyujiance/components/FPVDDetailMD.vue
+++ b/frontend/src/modules/guoyujiance/components/FPVDDetailMD.vue
@@ -64,7 +64,7 @@ const customTransform = (res: any) => {
 const handleViewDetail = (record: any) => {
     modelStore.modalVisible = true;
     modelStore.params.sttp = "VD_FBFM";
-    modelStore.title = record.stnm + "详情信息";
+    modelStore.title = record.stnm ;
     modelStore.params.stcd = record.stcd;
 }
 // 页面加载时执行
diff --git a/frontend/src/modules/guoyusheshijiansheqingkuang/ModalPage/index.vue b/frontend/src/modules/guoyusheshijiansheqingkuang/ModalPage/index.vue
index 914cf08f..3806a835 100644
--- a/frontend/src/modules/guoyusheshijiansheqingkuang/ModalPage/index.vue
+++ b/frontend/src/modules/guoyusheshijiansheqingkuang/ModalPage/index.vue
@@ -3,19 +3,38 @@
     <!-- 搜索表单 -->
     <a-form layout="inline" class="search-form">
       <a-form-item label="设施类型">
-        <a-select v-model:value="filterOpts.dwtp" placeholder="请选择设施类型" style="width: 150px"
-          :options="facilityTypeOptions" />
+        <a-select
+          v-model:value="filterOpts.dwtp"
+          placeholder="请选择设施类型"
+          style="width: 150px"
+          :options="facilityTypeOptions"
+        />
       </a-form-item>
       <a-form-item label="所属基地">
-        <a-select v-model:value="filterOpts.baseId" placeholder="请选择所属基地" style="width: 200px" show-search
-          :filter-option="filterOption" :options="jdInfoOpt" />
+        <a-select
+          v-model:value="filterOpts.baseId"
+          placeholder="请选择所属基地"
+          style="width: 200px"
+          show-search
+          :filter-option="filterOption"
+          :options="jdInfoOpt"
+        />
       </a-form-item>
       <a-form-item label="建设状态">
-        <a-select v-model:value="filterOpts.bldstt" placeholder="请选择建设状态" style="width: 150px"
-          :options="buildStateOptions" />
+        <a-select
+          v-model:value="filterOpts.bldstt"
+          placeholder="请选择建设状态"
+          style="width: 150px"
+          :options="buildStateOptions"
+        />
       </a-form-item>
       <a-form-item>
-        <a-input v-model:value="filterOpts.searchContent" placeholder="请输入设施名称" style="width: 200px" allow-clear />
+        <a-input
+          v-model:value="filterOpts.searchContent"
+          placeholder="请输入设施名称"
+          style="width: 200px"
+          allow-clear
+        />
       </a-form-item>
       <a-form-item>
         <a-space>
@@ -34,8 +53,16 @@
     </a-form>
 
     <!-- 数据表格 -->
-    <BasicTable ref="tableRef" :scroll-y="400" :columns="columns" :list-url="vmsstbprptGetKendoList" :enable-sort="true"
-      :search-params="searchParams" :transform-data="customTransform" @sort-change="handleSortChange">
+    <BasicTable
+      ref="tableRef"
+      :scroll-y="400"
+      :columns="columns"
+      :list-url="fpVmsstbprptGetKendoList"
+      :enable-sort="true"
+      :search-params="searchParams"
+      :transform-data="customTransform"
+      @sort-change="handleSortChange"
+    >
       <template #ennm="{ record }">
         <a @click="handleViewDetail(record, 'dz')" class="text-link">
           {{ record.ennm }}
@@ -54,7 +81,7 @@
 import { ref, computed, onMounted, nextTick } from 'vue';
 import BasicTable from '@/components/BasicTable/index.vue';
 // TODO: API 接口 - 需要在 @/api/gyss 中实现
-import { vmsstbprptGetKendoList } from '@/api/gyss';
+import { fpVmsstbprptGetKendoList } from '@/api/gyss';
 import { useModelStore } from '@/store/modules/model';
 
 const modelStore = useModelStore();
@@ -318,12 +345,16 @@ const handleViewDetail = (record: any, type: string) => {
   if (type === 'dz') {
     modelStore.modalVisible = true;
     modelStore.params.sttp = 'ENG';
-    modelStore.title = record.ennm + ' 详情信息';
+    modelStore.title = record.ennm;
     modelStore.params.stcd = record.rstcd;
   } else {
+    // const sttpFullPath = 'ENV,ENVP,FP,FP_2,';
+    // 由于字符串末尾有逗号，直接分割会产生一个空字符串。使用 filter 去除空项是最稳妥的。
+    const parts = record.sttpFullPath.split(',').filter(item => item.trim() !== '');
+    const lastValue = parts[parts.length - 1];
     modelStore.modalVisible = true;
-    modelStore.params.sttp = 'fp_point';
-    modelStore.title = record.stnm + '详情信息';
+    modelStore.params.sttp = lastValue
+    modelStore.title = record.stnm;
     modelStore.params.stcd = record.stcd;
   }
   // console.log('【查看详情】', record)
diff --git a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
index 723ba4a8..3ba5df66 100644
--- a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
+++ b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
@@ -816,7 +816,7 @@ const handleViewDetail = (record: any) => {
   });
   modelStore.modalVisible = true;
   modelStore.params.sttp = 'WT';
-  modelStore.title = stnm + '详情信息';
+  modelStore.title = stnm ;
   modelStore.params.stcd = formValue.stcd;
 };
 
diff --git a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
index ba19e8fa..1015e9be 100644
--- a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
+++ b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
@@ -21,7 +21,7 @@
         </a-spin>
     </SidePanelItem>
     <!-- 弹框 -->
-    <a-modal v-model:open="modalVisible" :title="'水质监测工作开展情况'" :footer="null" width="1536px" @cancel="handleCloseModal">
+    <a-modal v-model:open="modalVisible" :title="'栖息地保护工作开展情况'" :footer="null" width="1536px" @cancel="handleCloseModal">
         <QixidiheduanjianceqingkuangEJ v-if="currentFacility" :activeKey="currentFacility.sttpCode" :tabs="facilities"
             :baseId="baseid" />
     </a-modal>
diff --git a/frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue b/frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue
index 56fa1dc0..2caafee4 100644
--- a/frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue
+++ b/frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue
@@ -347,24 +347,25 @@ const handleViewDetail = (record: any, type: any) => {
   if (type == 'dz') {
     modelStore.modalVisible = true;
     modelStore.params.sttp = 'ENG';
-    modelStore.title = record.ennm + ' 详情信息';
+    modelStore.title = record.ennm;
     modelStore.params.stcd = record.rstcd;
   } else {
     if (tabIndex.value == 'FH') {
       modelStore.modalVisible = true;
       modelStore.params.sttp = 'FH';
-      modelStore.title = record.stnm + ' 详情信息';
+      modelStore.title = record.stnm;
       modelStore.params.stcd = record.stcd;
+      modelStore.params.bldstt = '2';
       modelStore.params.show = false;
     } else if (tabIndex.value == 'WTRV') {
       modelStore.modalVisible = true;
       modelStore.params.sttp = 'WT';
-      modelStore.title = record.stnm + ' 详情信息';
+      modelStore.title = record.stnm;
       modelStore.params.stcd = record.stcd;
     } else if (tabIndex.value == 'ZQ') {
       modelStore.modalVisible = true;
       modelStore.params.sttp = 'fh_zq_point';
-      modelStore.title = record.stnm + ' 详情信息';
+      modelStore.title = record.stnm;
       modelStore.params.stcd = record.stcd;
     } else if (tabIndex.value == 'VD') {
       modelStore.modalVisible = true;
diff --git a/frontend/src/modules/qixidijchuXx/index.vue b/frontend/src/modules/qixidijchuXx/index.vue
index 6d070a83..5a51e304 100644
--- a/frontend/src/modules/qixidijchuXx/index.vue
+++ b/frontend/src/modules/qixidijchuXx/index.vue
@@ -290,7 +290,7 @@ const handleHabitatClick = (record: any) => {
   // TODO: 后续实现具体功能
   modelStore.modalVisible = true;
   modelStore.params.sttp = 'FH';
-  modelStore.title = record.stnm + ' 详情信息';
+  modelStore.title = record.stnm;
   modelStore.params.stcd = record.stcd;
   modelStore.params.show = true;
 };
diff --git a/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue b/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue
new file mode 100644
index 00000000..85553140
--- /dev/null
+++ b/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue
@@ -0,0 +1,416 @@
+<template>
+  <div class="stlldbqk_container">
+    <div class="stlldbqk_title">
+      <div>选择水电站:</div>
+      <a-select
+        v-model:value="from.baseId"
+        show-search
+        placeholder=" "
+        :options="jidiOptions"
+        :filter-option="filterOption"
+        @change="handleChange"
+        style="width: 200px; margin: 0px 10px"
+      ></a-select>
+      <a-select
+        v-model:value="from.stcd"
+        show-search
+        placeholder="请选择电站"
+        :options="stcdOptions"
+        :filter-option="filterOption"
+        style="width: 200px"
+      ></a-select>
+      <a-button type="primary" style="margin: 0px 10px" @click="Search()"
+        >搜索</a-button
+      >
+      <a-button @click="resetSearch()">重置</a-button>
+    </div>
+    <div class="table">
+      <BasicTable
+        ref="tableRef"
+        :columns="columns"
+        :scrollY="480"
+        :list-url="vmsstbprptGetKendoList"
+        :search-params="searchParams"
+        :transform-data="customTransform"
+        :enable-sort="true"
+        @sort-change="handleSortChange"
+      >
+        <template #dvtp="{ record }">
+          {{
+            record.dvtp == 2 ? '引水式' : record.dvtp == 3 ? '混合式' : '坝后式'
+          }}
+        </template>
+        <template #stindx="{ record }">
+          {{ record.dvtp == 2 ? '生态流量' : '出库流量' }}
+        </template>
+        <template #coenvwState="{ column, record }">
+          <a-tag :color="record.coenvwState > 0 ? 'success' : ''">
+            {{ record.coenvwState > 0 ? '在线' : '离线' }}
+          </a-tag>
+        </template>
+        <template #action="{ column, record }">
+          <a-button type="link" size="small" @click="handleView(record)"
+            >查看详情</a-button
+          >
+        </template>
+      </BasicTable>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick, h } from 'vue';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { vmsstbprptGetKendoList } from '@/api/stll';
+import BasicTable from '@/components/BasicTable/index.vue';
+import { useModelStore } from '@/store/modules/model';
+
+const modelStore = useModelStore();
+const props = defineProps<{
+  baseId?: any;
+  titleData?: any;
+}>();
+const tableRef = ref();
+const columns = ref([
+  {
+    title: '所属基地',
+    key: 'baseName',
+    dataIndex: 'baseName',
+    merge: true, // 启用行合并
+    visible: true
+  },
+  {
+    title: '电站名称',
+    key: 'stnm',
+    dataIndex: 'stnm',
+    visible: true
+  },
+  {
+    title: '开发方式',
+    key: 'dvtp',
+    dataIndex: 'dvtp',
+    visible: true,
+    slots: { customRender: 'dvtp' }
+  },
+  {
+    title: '生态流量站类型',
+    key: 'stindx',
+    dataIndex: 'stindx',
+    visible: true,
+    slots: { customRender: 'stindx' }
+  },
+  {
+    title: '建成时间',
+    key: 'jcdt',
+    dataIndex: 'jcdt',
+    visible: true,
+    sorter: true,
+    customRender: ({ record }: any) => {
+      const date = record.jcdt;
+      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: '监测状态',
+    key: 'coenvwState',
+    dataIndex: 'coenvwState',
+    visible: true,
+    slots: { customRender: 'coenvwState' }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 120,
+    slots: { customRender: 'action' }
+  }
+]);
+const sort = {
+  sort: [
+    {
+      field: 'baseStepSort',
+      dir: 'asc'
+    },
+    {
+      field: 'hbrvcd',
+      dir: 'asc'
+    },
+    {
+      field: 'rstcdStepSort',
+      dir: 'asc'
+    },
+    {
+      field: 'siteStepSort',
+      dir: 'asc'
+    }
+  ],
+  group: [],
+  select: [
+    'baseName',
+    'stnm',
+    'ennm',
+    'jcdt',
+    'stindx',
+    'coenvwState',
+    'sttpCode',
+    'stcd',
+    'rstcd',
+    'stCode',
+    'stName',
+    'dvtp'
+  ],
+  groupResultFlat: false
+};
+const JidiSelectEventStore = useJidiSelectEventStore();
+// JidiSelectEventStore.jidiData
+let jidiOptions = computed(() => {
+  return [
+    ...JidiSelectEventStore.jidiData.map((item: any) => ({
+      value: item.wbsCode,
+      label: item.wbsName
+    }))
+  ];
+});
+const from = ref({
+  baseId: props.baseId || 'all',
+  stcd: ''
+});
+
+// 排序状态管理
+const sortInfo = ref<{ field: string; order: string | null }>({
+  field: '',
+  order: null
+});
+
+// 动态计算搜索参数（包含排序）
+const searchParams = computed(() => {
+  let baseSort;
+
+  // 如果用户触发了排序，将其加入排序数组
+  if (sortInfo.value.field && sortInfo.value.order) {
+    baseSort = [
+      {
+        field: sortInfo.value.field,
+        dir: sortInfo.value.order === 'ascend' ? 'asc' : 'desc'
+      }
+    ];
+  } else {
+    baseSort = [
+      { field: 'baseStepSort', dir: 'asc' },
+      { field: 'hbrvcd', dir: 'asc' },
+      { field: 'rstcdStepSort', dir: 'asc' },
+      { field: 'siteStepSort', dir: 'asc' }
+    ];
+  }
+
+  return {
+    sort: baseSort,
+    group: [],
+    select: [
+      'baseName',
+      'stnm',
+      'ennm',
+      'jcdt',
+      'stindx',
+      'coenvwState',
+      'sttpCode',
+      'stcd',
+      'rstcd',
+      'stCode',
+      'stName',
+      'dvtp'
+    ],
+    groupResultFlat: false
+  };
+});
+
+// 监听 props.baseId 变化，同步到 from.value.baseId
+watch(
+  () => props.baseId,
+  newBaseId => {
+    // 只在有有效值且与当前值不同时才更新
+    if (newBaseId && newBaseId !== from.value.baseId) {
+      from.value.baseId = newBaseId;
+      from.value.stcd = ''; // 重置电站选择
+      // 异步等待 DOM 更新后再搜索
+      nextTick(() => {
+        handleChange(); // 先刷新电站列表
+        Search(); // 再执行搜索
+      });
+    }
+  },
+  { immediate: false }
+);
+
+const filterOption = (input: string, option: any) => {
+  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+const stcdOptions = ref([]);
+const handleChange = async () => {
+  try {
+    let params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          from.value.baseId != 'all'
+            ? {
+                field: 'baseId',
+                operator: 'contains',
+                dataType: 'string',
+                value: from.value.baseId
+              }
+            : null,
+          {
+            field: 'sttpCode',
+            operator: 'eq',
+            dataType: 'string',
+            value: 'ENG'
+          }
+        ].filter(Boolean)
+      },
+      sort: [
+        {
+          field: 'baseId',
+          dir: 'asc'
+        },
+        {
+          field: 'rvcdStepSort',
+          dir: 'asc'
+        },
+        {
+          field: 'rstcdStepSort',
+          dir: 'asc'
+        },
+        {
+          field: 'siteStepSort',
+          dir: 'asc'
+        }
+      ],
+      select: ['stcd', 'stnm']
+    };
+    let res = await vmsstbprptGetKendoList(params);
+    if (res?.data?.success && res?.data?.data) {
+      let data = res.data.data;
+      stcdOptions.value = data.map((item: any) => ({
+        value: item.stcd,
+        label: item.stnm
+      }));
+    } else {
+      stcdOptions.value = [];
+    }
+  } catch (error) {
+    console.error('获取电站列表失败:', error);
+    stcdOptions.value = [];
+  }
+};
+const Search = () => {
+  let filters = [
+    from.value.stcd
+      ? {
+          field: 'stcd',
+          operator: 'eq',
+          value: from.value.stcd
+        }
+      : null,
+    from.value.baseId != 'all'
+      ? {
+          field: 'baseId',
+          operator: 'eq',
+          value: from.value.baseId
+        }
+      : null,
+    {
+      field: 'runState',
+      operator: 'eq',
+      value: 4
+    },
+    {
+      field: 'sttpCode',
+      operator: 'eq',
+      dataType: 'string',
+      value: props.titleData?.sttpCode || 'ENG'
+    },
+    {
+      field: 'DTIN',
+      operator: 'eq',
+      dataType: 'string',
+      value: 1
+    },
+    {
+      field: 'bldsttCcode',
+      operator: 'eq',
+      dataType: 'string',
+      value: 2
+    }
+  ].filter(Boolean);
+  const filter = {
+    logic: 'and',
+    filters
+  };
+  tableRef.value?.getList(filter);
+};
+
+// 处理排序变化
+const handleSortChange = (info: {
+  field: string;
+  order: 'ascend' | 'descend' | null;
+}) => {
+  sortInfo.value.field = info.field || '';
+  sortInfo.value.order = info.order || null;
+
+  // 等待 DOM 和响应式状态更新完成后再触发搜索，确保 BasicTable 拿到最新的 searchParams
+  nextTick(() => {
+    Search();
+  });
+};
+
+const resetSearch = () => {
+  from.value = {
+    baseId: 'all',
+    stcd: ''
+  };
+  Search();
+};
+// 自定义数据转换
+const customTransform = (res: any) => {
+  return {
+    records: res?.data?.data || [],
+    total: res?.data?.total || 0
+  };
+};
+const handleView = (record: any) => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = 'ENG';
+  modelStore.title = record.stnm;
+  modelStore.params.stcd = record.stcd;
+  modelStore.params.eqtp = 'QGC';
+  modelStore.filterStll = 'qecInterval';
+};
+onMounted(() => {
+  handleChange();
+  Search();
+});
+onUnmounted(() => {});
+</script>
+
+<style scoped lang="scss">
+.stlldbqk_container {
+  width: 100%;
+  .stlldbqk_title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .table {
+    width: 100%;
+    height: 560px;
+  }
+}
+</style>
diff --git a/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue b/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue
new file mode 100644
index 00000000..385787c7
--- /dev/null
+++ b/frontend/src/modules/shengtaidabiaoMod/TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue
@@ -0,0 +1,944 @@
+<template>
+  <div class="stlldbqk-container">
+    <!-- 搜索表单 -->
+    <a-form layout="inline" class="search-form">
+      <a-form-item label="基地选择">
+        <a-select
+          v-model:value="params.qid"
+          placeholder="请选择基地"
+          style="width: 200px"
+          show-search
+          :filter-option="filterOption"
+          :options="jidiOptions"
+        />
+      </a-form-item>
+
+      <a-form-item label="规则类型">
+        <a-select
+          v-model:value="params.key"
+          placeholder="请选择规则类型"
+          style="width: 180px"
+          :options="ruleTypeOptions"
+        />
+      </a-form-item>
+
+      <a-form-item label="时间维度">
+        <a-select
+          v-model:value="params.timeType"
+          placeholder="请选择时间维度"
+          style="width: 120px"
+          :options="timeTypeOptions"
+        />
+      </a-form-item>
+
+      <a-form-item label="日期范围">
+        <a-range-picker
+          v-model:value="dateRange"
+          :allow-clear="false"
+          format="YYYY-MM-DD"
+          style="width: 360px"
+        />
+      </a-form-item>
+
+      <a-form-item>
+        <a-space>
+          <a-button type="primary" @click="handleSearch">查询</a-button>
+        </a-space>
+      </a-form-item>
+    </a-form>
+
+    <!-- Tabs 标签页 -->
+    <a-tabs
+      v-if="tabList.length > 0"
+      v-model:activeKey="ecoFlowType"
+      class="tab-style"
+      @change="fetchTableData"
+    >
+      <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.label" />
+    </a-tabs>
+
+    <!-- 空状态 -->
+    <a-empty v-if="!loading && tabList.length === 0" description="暂无数据" />
+
+    <div class="body_zhengti">
+      <div class="echarts">
+        <a-spin :spinning="dataLoading">
+          <div v-if="pieData.length > 0" ref="chartRef" class="pie-chart"></div>
+          <a-empty
+            v-if="!dataLoading && pieData.length === 0"
+            description="暂无数据"
+          />
+        </a-spin>
+      </div>
+      <div class="table">
+        <BasicTable
+          ref="tableRef"
+          :columns="columns"
+          :scrollY="380"
+          :list-url="
+            params.timeType == 'day'
+              ? dayGetKendoListCust
+              : hourGetKendoListCust
+          "
+          :search-params="searchParams"
+          :transform-data="customTransform"
+          :enable-sort="true"
+          @sort-change="handleSortChange"
+        >
+          <template #ennm="{ column, record }">
+            <a-button type="link" size="small" @click="handleView(record)">{{
+              record.ennm
+            }}</a-button>
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import type { EChartsOption } from 'echarts';
+import dayjs from 'dayjs';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { dayGetKendoListCust, hourGetKendoListCust } from '@/api/stll';
+import BasicTable from '@/components/BasicTable/index.vue';
+import { useModelStore } from '@/store/modules/model';
+
+const modelStore = useModelStore();
+const props = defineProps<{
+  options?: any[];
+  typeKey?: string;
+  time?: string;
+  basicId?: string;
+}>();
+
+const JidiSelectEventStore = useJidiSelectEventStore();
+const columns = [
+  {
+    key: 'ennm',
+    title: '电站名称',
+    dataIndex: 'ennm',
+    slots: { customRender: 'action' }
+  },
+  {
+    key: 'baseName',
+    title: '所属基地',
+    dataIndex: 'baseName'
+  },
+  {
+    key: 'addvcdName',
+    title: '行政区',
+    dataIndex: 'addvcdName'
+  },
+  {
+    key: 'hbrvcdName',
+    title: '所在河段',
+    dataIndex: 'hbrvcdName',
+    width: '400px'
+  },
+  {
+    key: 'qecRate',
+    title: `生态流量达标率(%)`,
+    dataIndex: 'qecRate',
+    sorter: true, // 启用排序
+    width: '160px',
+    customRender: ({ text }: any) => {
+      if (text === null || text === undefined || text === '' || text === '-')
+        return '-';
+      return Number(text).toFixed(2);
+    }
+  }
+];
+const tableRef = ref();
+
+// 排序状态管理
+const sortInfo = ref<{ field: string; order: string | null }>({
+  field: '',
+  order: null
+});
+
+const sort1 = ref([
+  {
+    field: 'baseStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'rvcdStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'siteStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'avqRate',
+    dir: 'desc'
+  }
+]);
+const sort2 = ref([
+  {
+    field: 'baseStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'rvcdStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'siteStepSort',
+    dir: 'asc'
+  }
+]);
+
+// 动态计算搜索参数（包含排序）
+const searchParams = computed(() => {
+  let baseSort;
+
+  // 如果用户触发了排序，将其加入排序数组
+  if (sortInfo.value.field && sortInfo.value.order) {
+    baseSort = [
+      {
+        field: sortInfo.value.field,
+        dir: sortInfo.value.order === 'ascend' ? 'asc' : 'desc'
+      }
+    ];
+  } else {
+    // 使用默认排序
+    baseSort = params.value.key ? sort1.value : sort2.value;
+  }
+
+  return {
+    sort: baseSort
+  };
+});
+
+// 处理排序变化
+const handleSortChange = (info: {
+  field: string;
+  order: 'ascend' | 'descend' | null;
+}) => {
+  sortInfo.value.field = info.field || '';
+  sortInfo.value.order = info.order || null;
+
+  // 等待 DOM 和响应式状态更新完成后再触发搜索
+  nextTick(() => {
+    fetchTableData();
+  });
+};
+
+// 初始化日期范围：上个月的本日到今天
+const initDateRange = () => {
+  const today = dayjs();
+  const lastMonthSameDay = today.subtract(1, 'month');
+  return [lastMonthSameDay, today];
+};
+
+const dateRange = ref(initDateRange());
+
+const params = ref({
+  qid: props.basicId || 'all',
+  key: props.typeKey || '',
+  timeType: props.time || 'day',
+  sTime: '',
+  eTime: ''
+});
+
+// Tab 相关状态
+const tabList = ref<any[]>([]);
+const ecoFlowType = ref<string>('');
+const loading = ref<boolean>(false);
+
+const timeTypeOptions = [
+  { label: '逐时', value: 'hour' },
+  { label: '日', value: 'day' }
+];
+
+const jidiOptions = computed(() => {
+  return [
+    ...JidiSelectEventStore.jidiData.map((item: any) => ({
+      value: item.wbsCode,
+      label: item.wbsName
+    }))
+  ];
+});
+
+const ruleTypeOptions = computed(() => {
+  return (
+    props.options?.map((el: any) => ({
+      label: el.name,
+      value: el.key
+    })) || []
+  );
+});
+
+const filterOption = (input: string, option: any) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+// ==================== 图表相关 ====================
+const chartRef = ref<HTMLDivElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+const pieData = ref<any[]>([]); // 饼图数据源
+const dataLoading = ref<boolean>(false);
+const pieCode = ref<string[]>([]); // 用于表格过滤的选中项
+
+// 颜色配置
+const themeecLists = [];
+
+const jdColor = [
+  '#4b79ab',
+  '#78c300',
+  '#9556a4',
+  '#df91ab',
+  '#7399c6',
+  '#dbb629',
+  '#56c2e3',
+  '#f56a06',
+  '#cdba75',
+  '#76523b',
+  '#df75b6',
+  '#00a050',
+  '#f5a644',
+  '#4b79ab',
+  '#78c300',
+  '#9556a4',
+  '#df91ab',
+  '#7399c6',
+  '#dbb629',
+  '#56c2e3',
+  '#f56a06',
+  '#cdba75',
+  '#76523b',
+  '#df75b6',
+  '#00a050',
+  '#f5a644'
+];
+
+// 获取饼图数据
+const fetchPieData = async () => {
+  if (!ecoFlowType.value || !params.value.sTime || !params.value.eTime) return;
+
+  dataLoading.value = true;
+  try {
+    const { sTime, eTime, qid, key, timeType } = params.value;
+
+    // 构建过滤条件
+    const filters = [
+      qid != 'all'
+        ? {
+            field: 'baseId',
+            operator: 'eq',
+            dataType: 'string',
+            value: qid
+          }
+        : null,
+      {
+        field: 'dtin',
+        operator: 'eq',
+        dataType: 'string',
+        value: '1'
+      },
+      {
+        field: 'tm',
+        operator: 'gte',
+        dataType: 'date',
+        value: sTime
+      },
+      {
+        field: 'tm',
+        operator: 'lte',
+        dataType: 'date',
+        value: eTime
+      },
+      key
+        ? {
+            field: key,
+            operator: 'eq',
+            dataType: 'string',
+            value: ecoFlowType.value
+          }
+        : null
+    ].filter(Boolean);
+
+    // 当 key 为空时，添加额外的区间过滤条件
+    if (!key) {
+      filters.push(
+        {
+          field: 'qecInterval',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'QEC_STLL_6_NOEQMN'
+        },
+        {
+          field: 'mwrInterval',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'QEC_STLL_6_NOEQMN'
+        },
+        {
+          field: 'avqInterval',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'QEC_STLL_6_NOEQMN'
+        }
+      );
+    }
+
+    let obj: any = {
+      filter: {
+        logic: 'and',
+        filters: filters
+      },
+      group: [
+        qid !== 'all' ? { dir: 'asc', field: 'rvcdStepSort' } : null,
+        qid === 'all' ? { dir: 'asc', field: 'baseStepSort' } : null,
+        {
+          dir: 'asc',
+          field: qid === 'all' ? 'baseId' : 'hbrvcd'
+        },
+        qid !== 'all'
+          ? { dir: 'asc', field: 'hbrvcdName' }
+          : { dir: 'asc', field: 'baseName' }
+      ].filter(Boolean),
+      groupResultFlat: true
+    };
+
+    // TODO: 调用实际 API
+    // const res = timeType == 'day'
+    //   ? await shengTaiLiuLiang.STLLTabsDay(obj)
+    //   : await shengTaiLiuLiang.STLLTabsHour(obj);
+
+    let res =
+      timeType == 'day'
+        ? await dayGetKendoListCust(obj)
+        : await hourGetKendoListCust(obj);
+
+    if (res?.data?.data) {
+      const dataSource = res.data.data.map((el: any) => ({
+        id: qid === 'all' ? el.baseId : el.hbrvcd,
+        name: qid === 'all' ? el.baseName || el.key : el.hbrvcdName,
+        value: qid === 'all' ? el.count_baseId : el.count_hbrvcd,
+        key: qid === 'all' ? el.baseId : el.hbrvcd
+      }));
+
+      pieData.value = dataSource;
+      pieCode.value = []; // 重置选中状态
+
+      // 等待 DOM 更新后初始化或更新图表
+      await nextTick();
+      initOrUpdateChart();
+    } else {
+      pieData.value = [];
+    }
+  } catch (error) {
+    console.error('获取饼图数据失败:', error);
+    pieData.value = [];
+  } finally {
+    dataLoading.value = false;
+  }
+};
+
+// 初始化或更新图表
+const initOrUpdateChart = () => {
+  if (!chartRef.value) return;
+
+  // 如果实例不存在，初始化
+  if (!chartInstance) {
+    chartInstance = echarts.init(chartRef.value);
+
+    // 绑定图例选择事件
+    chartInstance.on('legendselectchanged', handleLegendSelectChanged);
+  }
+
+  updateChart();
+};
+
+// 更新图表配置
+const updateChart = () => {
+  if (!chartInstance) return;
+
+  const total =
+    pieData.value.reduce((pre: number, cur: any) => pre + cur.value, 0) || 0;
+
+  // 生成颜色数组
+  const colors = pieData.value.map((item: any, index: number) => {
+    const matched = themeecLists.find((i: any) => i.name === item.name);
+    return matched?.color || jdColor[index % jdColor.length];
+  });
+
+  const option: EChartsOption = {
+    color: colors,
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c} (座) ({d}%)'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 20,
+      top: 80,
+      type: 'scroll',
+      textStyle: {
+        width: 100, // 固定文本宽度
+        overflow: 'truncate', // 超出部分截断
+        ellipsis: '...' // 截断时显示的字符
+      }
+    },
+    title: [
+      {
+        text: total.toString(),
+        left: '34%',
+        top: '44%',
+        textAlign: 'center',
+        textStyle: {
+          fontSize: 24,
+          fontWeight: 'bold',
+          color: '#333'
+        }
+      },
+      {
+        text: '电站总数量',
+        left: '34%',
+        top: '51%',
+        textAlign: 'center',
+        textStyle: {
+          fontSize: 14,
+          color: '#666'
+        }
+      },
+      {
+        text: '(座)',
+        left: '34%',
+        top: '55%',
+        textAlign: 'center',
+        textStyle: {
+          fontSize: 12,
+          color: '#999'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '电站总数量',
+        type: 'pie',
+        radius: ['31%', '40%'],
+        center: ['35%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          formatter: function (params) {
+            const maxLen = 8; // 你希望显示的最大字符数
+            let name = params.name;
+            if (name.length > maxLen) {
+              return name.substring(0, maxLen) + '...';
+            }
+            return name;
+          }
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold'
+          }
+        },
+        data: pieData.value
+      }
+    ]
+  };
+
+  chartInstance.setOption(option, true);
+};
+
+// 处理图例选择变化
+const handleLegendSelectChanged = (params: any) => {
+  const selected = params.selected;
+  const trueRivers = Object.keys(selected).filter(key => selected[key]);
+  const allFalse = Object.values(selected).every(value => value === false);
+
+  const selectedKeys = pieData.value
+    .filter((item: any) => trueRivers.includes(item.name))
+    .map((item: any) => item.key);
+
+  pieCode.value = allFalse ? ['0'] : selectedKeys;
+
+  // 刷新表格
+  fetchTableData();
+};
+
+// 自定义数据转换
+const customTransform = (res: any) => {
+  return {
+    records: res?.data?.data || [],
+    total: res?.data?.total || 0
+  };
+};
+// 获取 Tab 列表数据
+const fetchTabList = async () => {
+  if (!params.value.sTime || !params.value.eTime) return;
+
+  loading.value = true;
+  try {
+    const { sTime, eTime, qid, key, timeType } = params.value;
+
+    // 构建过滤条件
+    const filters = [
+      qid != 'all'
+        ? {
+            field: 'baseId',
+            operator: 'eq',
+            dataType: 'string',
+            value: qid
+          }
+        : null,
+      {
+        field: 'dtin',
+        operator: 'eq',
+        dataType: 'string',
+        value: '1'
+      },
+      {
+        field: 'tm',
+        operator: 'gte',
+        dataType: 'date',
+        value: sTime
+      },
+      {
+        field: 'tm',
+        operator: 'lte',
+        dataType: 'date',
+        value: eTime
+      }
+    ].filter(Boolean);
+
+    // 当 key 为空时，添加额外的区间过滤条件
+    if (!key) {
+      filters.push(
+        {
+          field: 'qecInterval',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'QEC_STLL_6_NOEQMN'
+        },
+        {
+          field: 'mwrInterval',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'QEC_STLL_6_NOEQMN'
+        },
+        {
+          field: 'avqInterval',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'QEC_STLL_6_NOEQMN'
+        }
+      );
+    }
+
+    let obj: any = {
+      filter: {
+        logic: 'and',
+        filters: filters
+      },
+      group: key
+        ? [
+            {
+              dir: 'asc',
+              field: key
+            }
+          ]
+        : [
+            {
+              dir: 'asc',
+              field: 'baseStepSort'
+            },
+            {
+              dir: 'asc',
+              field: 'baseId'
+            },
+            {
+              dir: 'asc',
+              field: 'baseName'
+            }
+          ]
+    };
+
+    // 当 key 为空时，添加 groupResultFlat 属性
+    if (!key) {
+      obj.groupResultFlat = true;
+    }
+
+    // TODO: 根据实际 API 调用替换此处逻辑
+    let res =
+      timeType == 'day'
+        ? await dayGetKendoListCust(obj)
+        : await hourGetKendoListCust(obj);
+
+    // const res = timeType == 'day'
+    //   ? await shengTaiLiuLiang.STLLTabsDay(par, group)  dayGetKendoListCust,hourGetKendoListCust
+    //   : await shengTaiLiuLiang.STLLTabsHour(par, group);
+
+    // 模拟数据结构（待替换为真实 API）
+    // const res = {
+    //   data: [
+    //     {
+    //       type: 1,
+    //       qecCnt: 14,
+    //       qecTCnt: 50,
+    //       code: 'QEC_STLL_1_DY95',
+    //       desc: '环评要求_生态流量达标率所在统计区间:>=95%',
+    //       typeName: '环评要求',
+    //       key: 'QEC_STLL_1_DY95',
+    //       keyName: '环评要求',
+    //       count: 14
+    //     },
+    //     {
+    //       type: 2,
+    //       qecCnt: 13,
+    //       qecTCnt: 71,
+    //       code: 'QEC_STLL_2_DY95',
+    //       desc: '水利部要求_生态流量达标率所在统计区间:>=95%',
+    //       typeName: '水利部要求',
+    //       key: 'QEC_STLL_2_DY95',
+    //       keyName: '水利部要求',
+    //       count: 13
+    //     }
+    //   ]
+    // };
+
+    if (res?.data?.data?.length > 0) {
+      const resData = res.data.data;
+
+      if (key) {
+        // 有规则类型时：过滤掉"无生态流量要求"的数据
+        tabList.value = resData
+          .map((el: any) => ({
+            ...el,
+            value: el.key,
+            label: `${el.keyName || el.typeName}(${el.count || el.qecCnt}座)`
+          }))
+          .filter((el: any) => el.key !== 'QEC_STLL_6_NOEQMN');
+
+        // 查找当前选中的 ecoFlowType 是否在返回数据中
+        const found = resData.find(
+          (el: any) => el.items?.[0] === ecoFlowType.value
+        );
+
+        // 如果找到则保持，否则使用第一个
+        ecoFlowType.value = found ? ecoFlowType.value : resData[0]?.key;
+      } else {
+        // 没有规则类型时：只显示"无生态流量要求"
+        tabList.value = [
+          {
+            key: 'QEC_STLL_6_NOEQMN',
+            value: 'QEC_STLL_6_NOEQMN',
+            label: `无生态流量要求(${resData?.length}座)`
+          }
+        ];
+        ecoFlowType.value = 'QEC_STLL_6_NOEQMN';
+      }
+
+      // 获取饼图数据
+      fetchPieData();
+      // 获取表格数据
+      fetchTableData();
+    } else {
+      tabList.value = [];
+    }
+  } catch (error) {
+    console.error('获取 Tab 列表失败:', error);
+    tabList.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+const handleView = (record: any) => {
+  modelStore.modalVisible = true;
+  modelStore.params.sttp = 'ENG';
+  modelStore.title = record.ennm;
+  modelStore.params.stcd = record.stcd;
+  modelStore.params.eqtp = record.eqtp;
+  modelStore.filterStll = params.value.key;
+};
+//获取table数据
+const fetchTableData = async () => {
+  // 刷新表格
+  const { sTime, eTime, qid, key, timeType } = params.value;
+  const filters: any[] = [
+    qid != 'all'
+      ? {
+          field: 'baseId',
+          operator: 'eq',
+          dataType: 'string',
+          value: qid
+        }
+      : null,
+    {
+      field: 'tm',
+      operator: 'gte',
+      dataType: 'date',
+      value: sTime
+    },
+    {
+      field: 'tm',
+      operator: 'lte',
+      dataType: 'date',
+      value: eTime
+    },
+    {
+      field: 'dtin',
+      operator: 'eq',
+      dataType: 'string',
+      value: '1'
+    },
+    key
+      ? {
+          field: key,
+          operator: 'eq',
+          dataType: 'string',
+          value: ecoFlowType.value
+        }
+      : null
+  ].filter(Boolean);
+  if (!key) {
+    filters.push(
+      {
+        field: 'qecInterval',
+        operator: 'eq',
+        dataType: 'string',
+        value: 'QEC_STLL_6_NOEQMN'
+      },
+      {
+        field: 'mwrInterval',
+        operator: 'eq',
+        dataType: 'string',
+        value: 'QEC_STLL_6_NOEQMN'
+      },
+      {
+        field: 'avqInterval',
+        operator: 'eq',
+        dataType: 'string',
+        value: 'QEC_STLL_6_NOEQMN'
+      }
+    );
+  }
+
+  // 添加饼图选中项过滤
+  if (pieCode.value.length > 0) {
+    if (qid === 'all') {
+      filters.push({
+        field: 'baseId',
+        operator: 'in',
+        dataType: 'string',
+        value: pieCode.value
+      });
+    } else {
+      filters.push({
+        field: 'hbrvcd',
+        operator: 'in',
+        dataType: 'string',
+        value: pieCode.value
+      });
+    }
+  }
+
+  const filter = {
+    logic: 'and',
+    filters
+  };
+  tableRef.value?.getList(filter);
+};
+
+// 监听 ecoFlowType 变化，重新获取饼图数据
+watch(ecoFlowType, () => {
+  fetchPieData();
+});
+
+const handleSearch = () => {
+  // 更新日期范围到 params
+  if (dateRange.value && dateRange.value.length === 2) {
+    params.value.sTime = dateRange.value[0].format('YYYY-MM-DD 00:00:00');
+    params.value.eTime = dateRange.value[1].format('YYYY-MM-DD 23:59:59');
+  }
+
+  // 重新获取 Tab 列表
+  fetchTabList();
+};
+onMounted(() => {
+  // 初始化时设置默认日期并获取数据
+  if (dateRange.value && dateRange.value.length === 2) {
+    params.value.sTime = dateRange.value[0].format('YYYY-MM-DD 00:00:00');
+    params.value.eTime = dateRange.value[1].format('YYYY-MM-DD 23:59:59');
+    fetchTabList();
+  }
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  // 清理图表实例
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  window.removeEventListener('resize', handleResize);
+});
+
+// 处理窗口大小变化
+const handleResize = () => {
+  chartInstance?.resize();
+};
+</script>
+
+<style scoped lang="scss">
+.stlldbqk-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  //   padding: 16px;
+}
+
+.body_zhengti {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+  .echarts {
+    width: 35%;
+    height: 482px;
+    position: relative;
+
+    .pie-chart {
+      width: 100%;
+      height: 100%;
+    }
+
+    :deep(.ant-spin-nested-loading) {
+      width: 100%;
+      height: 100%;
+    }
+
+    :deep(.ant-spin-container) {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .table {
+    width: 65%;
+    height: 482px;
+  }
+}
+</style>
diff --git a/frontend/src/modules/shengtaidabiaoMod/index.vue b/frontend/src/modules/shengtaidabiaoMod/index.vue
index bd7944ad..7cdf61dc 100644
--- a/frontend/src/modules/shengtaidabiaoMod/index.vue
+++ b/frontend/src/modules/shengtaidabiaoMod/index.vue
@@ -1,190 +1,403 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <div>
-        <SidePanelItem title="生态流量达标情况" :clickprompt="obj">
-            <div class="body_topOne">
-                <a-radio-group v-model:value="mode">
-                    <a-radio-button value="top">逐时</a-radio-button>
-                    <a-radio-button value="left">日</a-radio-button>
-                </a-radio-group>
-                <div class="title_text">≥95%座数/总座数</div>
-            </div>
-            <a-spin :spinning="spinning">
-                <div>
-                    <div v-for="el in datalist">
-                        <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>
+    <SidePanelItem title="生态流量达标情况" :click-action="{ show: true }">
+      <!-- 使用插槽自定义点击提示的内容 -->
+      <template #click-action-content>
+        <div v-if="titleData.cnt" style="max-width: 300px; line-height: 1.6">
+          <p>
+            1、统计电站范围：接入过生态流量数据的电站
+            <span
+              style="color: #5989ad; cursor: pointer; "
+              @click.stop="handleStationClick()"
+            >
+             ({{titleData.cnt}})
+            </span>
+          </p>
+          <p>2、当来水不足时，生态流量不小于入库流量判定为达标</p>
+          <p>3、“≥95%座数”表示统计电站范围内时段达标率大于等于95%的电站数量</p>
+        </div>
+      </template>
 
-                                </div>
-                                <div class="body_text">
-                                    {{ el.qecCnt }}/{{ el.qecTCnt }}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+      <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 class="title_text">≥95%座数/总座数</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>
-            </a-spin>
+                <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"
+      />
+    </a-modal>
 
-        </SidePanelItem>
-    </div>
+    <!-- 环保自动监测工作开展情况弹框 -->
+    <a-modal
+      v-model:open="huanbaoModalVisible"
+      :title="'环保自动监测工作开展情况'"
+      width="1536px"
+      :footer="null"
+    >
+     <ModalYkzhbzdjcgz v-if="huanbaoModalVisible" :baseId="baseid" :titleData = titleData />
+    </a-modal>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-
-
+import {
+  qgcetQgcStaticData,
+  evnmAutoMonitorGetKendoListCust
+} from '@/api/stll';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
+import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue';
+import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue';
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'shengtaidabiaoMod'
+  name: 'shengtaidabiaoMod'
 });
-const obj =
-{
-    show: true,
-    value: '1、统计电站范围：接入过生态流量数据的电站,2、当来水不足时，生态流量不小于入库流量判定为达标,3、“≥95%座数”表示统计电站范围内时段达标率大于等于95%的电站数量',
-}
-const mode = ref('top');
-const dataArr: any = ref([
-    {
-        name: '生态环境部门要求',
-        qecCnt: '41', // 座数
-        qecTCnt: '55', //总座数
-        type: 1
+const JidiSelectEventStore = useJidiSelectEventStore();
+const baseid = ref('');
+const obj = {
+  show: true,
+  value:
+    '1、统计电站范围：接入过生态流量数据的电站,2、当来水不足时，生态流量不小于入库流量判定为达标,3、“≥95%座数”表示统计电站范围内时段达标率大于等于95%的电站数量'
+};
+
+const mode = ref('hour');
+const dataArr: any = ref([
+  {
+    name: '生态环境部门要求',
+    qecCnt: '41', // 座数
+    qecTCnt: '55', //总座数
+    type: 1,
+    key: 'qecInterval'
+  },
+  {
+    name: '水利部门要求',
+    qecCnt: '41', // 座数
+    qecTCnt: '55', //总座数
+    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 modalTitle = ref('');
+const selectedItem = ref<any>(null);
+const huanbaoModalVisible = ref(false);
+
+// 处理电站数量点击事件
+const handleStationClick = () => {
+  huanbaoModalVisible.value = true;
+};
+
+// 处理进度条点击事件
+const handleBarClick = (item: any) => {
+  selectedItem.value = item;
+  //   modalTitle.value = `${item.name} - 详细信息`;
+  modalVisible.value = true;
+};
 
-    },
-    {
-        name: '水利部门要求',
-        qecCnt: '41', // 座数
-        qecTCnt: '55', //总座数
-        type: 2
-    }
-])
-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)
 // 根据 type 将 list 中的数据合并到 dataArr 中
 const setStyle = () => {
-    if (dataArr.value.length == 0) {
-        return false
+  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
+      });
     }
-    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)
-}
+  });
+  console.log(datalist.value);
+};
+const dataChage = () => {
+  getData();
+};
+const getData = async () => {
+  // 计算时间范围：当前时间前一个月的00:00:00 到 当前时间的23:59:59
+  const now = new Date();
+  const oneMonthAgo = new Date(now);
+  oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
 
+  // 格式化日期为 YYYY-MM-DD
+  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}`;
+  };
+
+  const startDate = `${formatDate(oneMonthAgo)} 00:00:00`;
+  const endDate = `${formatDate(now)} 23:59:59`;
+
+  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;
+      //   debugger
+      // 只使用前两条数据（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;
+  }
+};
+watch(
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
+      getData();
+    }
+  },
+  { deep: true, immediate: 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);
+//   [
+//     {
+//         "cnt": 452,
+//         "orderInx": 7,
+//         "orderInxName": "生态流量",
+//         "sttpFullPath": "ENG",
+//         "sttpCode": "ENG",
+//         "sttpName": "生态流量"
+//     }
+// ]
+  let list = res?.data?.data[0];
+  if (list) {
+    titleData.value = list
+  }
+  // debugger
+};
 // 页面加载时执行的逻辑
 onMounted(() => {
-    setStyle()
+  setStyle();
+  getcont()
 });
 </script>
 
 <style lang="scss" scoped>
 .body_topOne {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
 
-    .title_text {
-        font-size: 16px;
-    }
+  .title_text {
+    font-size: 16px;
+  }
 }
 
 .boy_one {
-    display: flex;
-    align-items: center;
-    margin: 5px 0px;
+  display: flex;
+  align-items: center;
+  margin: 5px 0px;
 }
 
 .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;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
+    padding: 5px 1px;
+    overflow: hidden;
 
-    .body_biao {
+    .nei_body {
+      width: 12px;
+      height: 100%;
+      border: 1px solid #ccdae7;
+      padding: 2px;
+      margin-left: 4px;
+
+      .little_body {
         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;
+      }
     }
+  }
+
+  .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;
+  // 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-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 {
+    border: 2px solid #2f6b98 !important;
+  }
 
-    .ant-radio-button-wrapper-checked :before {
-        background-color: #2f6b98 !important;
-    }
+  .ant-radio-button-wrapper-checked :before {
+    background-color: #2f6b98 !important;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
index e137d523..6477b27e 100644
--- a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
+++ b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
@@ -1,286 +1,526 @@
 <template>
-    <div>
-        <SidePanelItem title="生态流量达标情况" :clickprompt="obj">
-            <div class="body_topOne">
-                <a-radio-group v-model:value="mode">
-                    <a-radio-button value="top">按基地</a-radio-button>
-                    <a-radio-button value="left">按调节性能</a-radio-button>
-                </a-radio-group>
-            </div>
-            <a-spin :spinning="spinning">
-                <div ref="chartRef" class="chart-container"></div>
-            </a-spin>
-        </SidePanelItem>
-    </div>
+  <div>
+    <SidePanelItem title="生态流量达标情况" :click-action="{ show: true }">
+      <!-- 使用插槽自定义点击提示的内容 -->
+      <!-- 1、时间：2026-05-11 至 2026-06-11；
+
+ -->
+      <template #click-action-content>
+        <div v-if="titleData.cnt" style="max-width: 300px; line-height: 1.6">
+          <p>1、时间：{{ getdate().startDate1 }} 至 {{ getdate().endDate1 }}；</p>
+          <p>
+            2、范围：接入过生态流量数据的电站<span
+              style="color: #5989ad; cursor: pointer"
+              @click.stop="handleStationClick()"
+            >
+              ({{ titleData.cnt }}) </span
+            >；
+          </p>
+          <p>3、达标判定：按环评批复或报告中对生态流量限值有明确要求的评判。</p>
+        </div>
+      </template>
+      <div class="body_topOne">
+        <a-radio-group v-model:value="mode" @change="getEcharts()">
+          <a-radio-button value="top">按基地</a-radio-button>
+          <a-radio-button value="left">按调节性能</a-radio-button>
+        </a-radio-group>
+      </div>
+      <a-spin :spinning="spinning">
+        <div ref="chartRef" class="chart-container"></div>
+      </a-spin>
+    </SidePanelItem>
+  </div>
+  <!-- 环保自动监测工作开展情况弹框 -->
+  <a-modal
+    v-model:open="huanbaoModalVisible"
+    :title="'环保自动监测工作开展情况'"
+    width="1536px"
+    :footer="null"
+  >
+    <ModalYkzhbzdjcgz v-if="huanbaoModalVisible" :titleData="titleData" />
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, watch } from 'vue';
 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';
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'shengtaidabiaoMod'
+  name: 'shengtaidabiaoMod'
 });
-const obj =
-{
-    show: true,
-    value: '1、统计电站范围：接入过生态流量数据的电站，2、当来水不足时，生态流量不小于入库流量判定为达标，3、"≥95% 座数"表示统计电站范围内时段达标率大于等于 95% 的电站数量',
-}
+const obj = {
+  show: true,
+  value:
+    '1、统计电站范围：接入过生态流量数据的电站，2、当来水不足时，生态流量不小于入库流量判定为达标，3、"≥95% 座数"表示统计电站范围内时段达标率大于等于 95% 的电站数量'
+};
 const mode = ref('top');
-const spinning = ref(false)
+const spinning = ref(false);
 const chartRef = ref<HTMLElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 
+// 动态数据存储
+const chartData = ref<{
+  categories: string[];
+  currentData: number[];
+  lastYearData: number[];
+}>({
+  categories: [],
+  currentData: [],
+  lastYearData: []
+});
+const huanbaoModalVisible = ref(false);
+// 处理电站数量点击事件
+const handleStationClick = () => {
+  huanbaoModalVisible.value = true;
+};
+
 // 按基地的静态数据（横向柱形图）
 const baseData = {
-    categories: ['金沙江干流', '雅砻江干流', '大渡河干流', '乌江干流', '长江上游干流', '湘西', '黄河上游干流', '黄河中游干流', '南盘江 - 红水河', '东北', '澜沧江干流', '闽浙赣', '其他'],
-    currentData: [98, 100, 99.5, 99.8, 100, 98.5, 100, 100, 100, 97, 100, 93, 98],
-    lastYearData: [92, 100, 99, 100, 100, 98, 100, 100, 100, 100, 100, 88, 93]
+  categories: [
+    '金沙江干流',
+    '雅砻江干流',
+    '大渡河干流',
+    '乌江干流',
+    '长江上游干流',
+    '湘西',
+    '黄河上游干流',
+    '黄河中游干流',
+    '南盘江 - 红水河',
+    '东北',
+    '澜沧江干流',
+    '闽浙赣',
+    '其他'
+  ],
+  currentData: [98, 100, 99.5, 99.8, 100, 98.5, 100, 100, 100, 97, 100, 93, 98],
+  lastYearData: [92, 100, 99, 100, 100, 98, 100, 100, 100, 100, 100, 88, 93]
 };
 
 // 按调节性能的静态数据（竖向柱状图）
 const performanceData = {
-    categories: ['多年调节', '年调节', '季调节', '周调节', '其他'],
-    currentData: [95, 92, 88, 85, 90],
-    lastYearData: [93, 90, 85, 82, 88]
+  categories: ['多年调节', '年调节', '季调节', '周调节', '其他'],
+  currentData: [95, 92, 88, 85, 90],
+  lastYearData: [93, 90, 85, 82, 88]
 };
 
 // 加载数据
-const loadData = () => {
-    spinning.value = true;
-    
-    // 模拟数据加载延迟，并确保 DOM 已渲染
+const loadData = async () => {
+  spinning.value = true;
+
+  try {
+    // 先获取数据
+    await getEcharts();
+
+    // 确保 DOM 已渲染后初始化图表
     setTimeout(() => {
-        initChart();
-        spinning.value = false;
+      initChart();
+      spinning.value = false;
     }, 50);
+  } catch (error) {
+    console.error('数据加载失败:', error);
+    spinning.value = false;
+  }
 };
 
 // 初始化图表
 const initChart = () => {
-    if (!chartRef.value) {
-        console.error('图表容器未渲染');
-        return;
-    }
-    
-    // 检查容器尺寸
-    const containerHeight = chartRef.value.offsetHeight;
-    if (!containerHeight || containerHeight === 0) {
-        console.warn('容器高度为 0，延迟重试');
-        setTimeout(() => initChart(), 50);
-        return;
-    }
-    
-    // 如果实例存在，先销毁
-    if (chartInstance) {
-        chartInstance.dispose();
-    }
-    
-    chartInstance = echarts.init(chartRef.value);
-    
-    // 根据 mode 选择数据
-    const data = mode.value === 'top' ? baseData : performanceData;
-    const isHorizontal = mode.value === 'top';
-    
-    const option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow'
-            },
-            formatter: function(params: any) {
-                let result = params[0].name + '<br/>';
-                params.forEach((param: any) => {
-                    const percentage = param.value.toFixed(2) + '%';
-                    result += param.marker + param.seriesName + '&nbsp;&nbsp;<b>' + percentage + '</b><br/>';
-                });
-                return result;
-            }
-        },
-        legend: {
-            data: ['当前', '去年同期'],
-          
-        },
-         grid: { left: 10, right: 10, bottom: 20, top: 40, containLabel: true },
-        dataZoom: [
-            {
-                type: 'inside',
-                [isHorizontal ? 'yAxisIndex' : 'xAxisIndex']: 0,
-                filterMode: 'empty',
-                zoomOnMouseWheel: true,
-                moveOnMouseMove: false,
-                moveOnMouseWheel: true,
-                start: 0,
-                end: 100,
-                minValueSpan: 0,
-                maxValueSpan: isHorizontal ? 20 : 5
-            }
-        ],
-        xAxis: isHorizontal ? {
-            type: 'value',
-            min: 80,
-            max: 100,
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: '#E8E8E8',
-                    type: 'solid'
-                }
-            },
-            axisLabel: {
-                color: '#666',
-                formatter: '{value}'
-            }
-        } : {
-            type: 'category',
-            data: data.categories,
-            axisLabel: {
-                color: '#666',
-                fontSize: 12,
-                interval: 0,
-                rotate: 0,
-                margin: 10
-            },
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: '#666'
-                }
-            },
-            axisTick: {
-                show: true,
-                lineStyle: {
-                    color: '#666'
-                }
-            },
-            splitLine: {
-                show: false
-            }
-        },
-        yAxis: isHorizontal ? {
-            type: 'category',
-            data: data.categories,
-            inverse: true,
-            axisLabel: {
-                color: '#666',
-                fontSize: 12,
-                interval: 0,
-                rotate: 45,
-                margin: 10
-            },
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: '#666'
-                }
-            },
-            axisTick: {
-                show: true,
-                lineStyle: {
-                    color: '#666'
-                }
-            },
-            splitLine: {
-                show: false
-            }
-        } : {
-            type: 'value',
-            min: 0,
-            max: 100,
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: '#E8E8E8',
-                    type: 'solid'
-                }
-            },
-            axisLabel: {
-                color: '#666',
-                formatter: '{value}'
-            }
-        },
-        series: [
-            {
-                name: '当前',
-                type: 'bar',
-                data: data.currentData,
-                itemStyle: {
-                    color: '#5470C6'
-                },
-                barWidth: isHorizontal ? 8 : 8,
-                // barGap: '30%'
-            },
-            {
-                name: '去年同期',
-                type: 'bar',
-                data: data.lastYearData,
-                itemStyle: {
-                    color: '#91CC75'
-                },
-                barWidth: isHorizontal ?  8: 8,
-                // barGap: '30%'
-            }
-        ]
-    };
-    
-    chartInstance.setOption(option);
-    
-    // 强制重绘，确保尺寸正确
-    setTimeout(() => {
-        chartInstance?.resize();
-    }, 0);
-};
+  if (!chartRef.value) {
+    console.error('图表容器未渲染');
+    return;
+  }
 
+  // 检查容器尺寸
+  const containerHeight = chartRef.value.offsetHeight;
+  if (!containerHeight || containerHeight === 0) {
+    console.warn('容器高度为 0，延迟重试');
+    setTimeout(() => initChart(), 50);
+    return;
+  }
+
+  // 如果实例存在，先销毁
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+
+  chartInstance = echarts.init(chartRef.value);
+
+  // 使用动态数据
+  const data = chartData.value;
+  const isHorizontal = mode.value === 'top';
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params: any) {
+        let result = params[0].name + '<br/>';
+        params.forEach((param: any) => {
+          const percentage = param.value.toFixed(2) + '%';
+          result +=
+            param.marker +
+            param.seriesName +
+            '&nbsp;&nbsp;<b>' +
+            percentage +
+            '</b><br/>';
+        });
+        return result;
+      }
+    },
+    legend: {
+      data: ['当前', '去年同期']
+    },
+    grid: { left: 10, right: 10, bottom: 20, top: 40, containLabel: true },
+    dataZoom: [
+      {
+        type: 'inside',
+        // 横向柱形图(mode='top'): X轴是数值轴，需要缩放
+        // 竖向柱状图(mode='left'): X轴是分类轴，不需要缩放；Y轴是数值轴，也不需要内部缩放
+        [isHorizontal ? 'xAxisIndex' : 'xAxisIndex']: 0,
+        filterMode: 'empty',
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: false,
+        moveOnMouseWheel: true,
+        start: 0,
+        end: 100,
+        minValueSpan: 0,
+        maxValueSpan: isHorizontal ? 20 : 5
+      }
+    ],
+    xAxis: isHorizontal
+      ? {
+          type: 'value',
+          min: 80,
+          max: 100,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#E8E8E8',
+              type: 'solid'
+            }
+          },
+          axisLabel: {
+            color: '#666',
+            formatter: '{value}'
+          }
+        }
+      : {
+          type: 'category',
+          data: data.categories,
+          axisLabel: {
+            color: '#666',
+            fontSize: 12,
+            interval: 0,
+            rotate: 0,
+            margin: 10
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#666'
+            }
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#666'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        },
+    yAxis: isHorizontal
+      ? {
+          type: 'category',
+          data: data.categories,
+          inverse: true,
+          axisLabel: {
+            color: '#666',
+            fontSize: 12,
+            interval: 0,
+            rotate: 45,
+            margin: 10
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#666'
+            }
+          },
+          axisTick: {
+            show: true,
+            lineStyle: {
+              color: '#666'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        }
+      : {
+          type: 'value',
+          min: 0,
+          max: 100,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#E8E8E8',
+              type: 'solid'
+            }
+          },
+          axisLabel: {
+            color: '#666',
+            formatter: '{value}'
+          }
+        },
+    series: [
+      {
+        name: '当前',
+        type: 'bar',
+        data: data.currentData,
+        itemStyle: {
+          color: '#5470C6'
+        },
+        barWidth: isHorizontal ? 8 : 8
+        // barGap: '30%'
+      },
+      {
+        name: '去年同期',
+        type: 'bar',
+        data: data.lastYearData,
+        itemStyle: {
+          color: '#91CC75'
+        },
+        barWidth: isHorizontal ? 8 : 8
+        // barGap: '30%'
+      }
+    ]
+  };
+
+  chartInstance.setOption(option);
+
+  // 强制重绘，确保尺寸正确
+  setTimeout(() => {
+    chartInstance?.resize();
+  }, 0);
+};
+const getdate = () => {
+  const now = new Date();
+  const oneMonthAgo = new Date(now);
+  oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
+
+  // 格式化日期为 YYYY-MM-DD
+  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}`;
+  };
+
+  const startDate = `${formatDate(oneMonthAgo)} 00:00:00`;
+  const endDate = `${formatDate(now)} 23:59:59`;
+  const startDate1 = `${formatDate(oneMonthAgo)}`;
+  const endDate1 = `${formatDate(now)}`;
+  return { startDate, endDate, startDate1, endDate1 };
+};
+const getEcharts = async () => {
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        mode.value == 'top'
+          ? {
+              field: 'dtinEnv',
+              operator: 'in',
+              dataType: 'string',
+              value: [1, 2]
+            }
+          : {
+              field: 'type',
+              operator: 'eq',
+              dataType: 'string',
+              value: 'DAY'
+            },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: getdate().startDate
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: getdate().endDate
+        }
+      ]
+    },
+    group:
+      mode.value == 'top'
+        ? [
+            {
+              dir: 'asc',
+              field: 'basestepsort'
+            },
+            {
+              dir: 'asc',
+              field: 'baseId'
+            },
+            {
+              dir: 'asc',
+              field: 'baseName'
+            }
+          ]
+        : [
+            {
+              dir: 'asc',
+              field: 'qecPerformance'
+            }
+          ]
+  };
+
+  try {
+    const res: any = await eqqecRateCount(params);
+
+    // 处理返回数据
+    if (res && res.success && res.data && res.data.data) {
+      const apiData = res.data.data;
+
+      // 根据 mode 提取不同的数据
+      if (mode.value === 'top') {
+        // 按基地模式：去重处理（避免 baseId 重复）
+        const uniqueMap = new Map();
+        apiData.forEach((item: any) => {
+          if (!uniqueMap.has(item.baseId)) {
+            uniqueMap.set(item.baseId, item);
+          }
+        });
+
+        const uniqueData = Array.from(uniqueMap.values());
+
+        chartData.value = {
+          categories: uniqueData.map((item: any) => item.baseName || ''),
+          currentData: uniqueData.map((item: any) =>
+            item.qecRate != null ? Number(item.qecRate) : 0
+          ),
+          lastYearData: uniqueData.map((item: any) =>
+            item.beforeQecRate != null ? Number(item.beforeQecRate) : 0
+          )
+        };
+      } else {
+        // 按调节性能模式
+        chartData.value = {
+          categories: apiData.map((item: any) => item.qecPerformanceName || ''),
+          currentData: apiData.map((item: any) =>
+            item.qecRate != null ? Number(item.qecRate) : 0
+          ),
+          lastYearData: apiData.map((item: any) =>
+            item.beforeQecRate != null ? Number(item.beforeQecRate) : 0
+          )
+        };
+      }
+    } else {
+      console.warn('API 返回数据格式异常');
+      // 使用空数据
+      chartData.value = {
+        categories: [],
+        currentData: [],
+        lastYearData: []
+      };
+    }
+  } catch (error) {
+    console.error('API 调用失败:', error);
+    // 发生错误时使用空数据
+    chartData.value = {
+      categories: [],
+      currentData: [],
+      lastYearData: []
+    };
+  }
+};
+//统计电站范围：接入过生态流量数据的电站
+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);
+  //   [
+  //     {
+  //         "cnt": 452,
+  //         "orderInx": 7,
+  //         "orderInxName": "生态流量",
+  //         "sttpFullPath": "ENG",
+  //         "sttpCode": "ENG",
+  //         "sttpName": "生态流量"
+  //     }
+  // ]
+  let list = res?.data?.data[0];
+  if (list) {
+    titleData.value = list;
+  }
+  // debugger
+};
 // 页面加载时执行的逻辑
 onMounted(() => {
-    loadData();
-
-    // 监听窗口大小变化
-    window.addEventListener('resize', () => {
-        chartInstance?.resize();
-    });
+  loadData();
+  getcont();
+  // 监听窗口大小变化
+  window.addEventListener('resize', () => {
+    chartInstance?.resize();
+  });
 });
 
 // 监听 mode 变化
 watch(mode, () => {
-    loadData();
+  loadData();
 });
 </script>
 
 <style lang="scss" scoped>
 .body_topOne {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
 
-    .title_text {
-        font-size: 16px;
-    }
+  .title_text {
+    font-size: 16px;
+  }
 }
 .ant-radio-group {
-    .ant-radio-button-wrapper-checked {
-        border: 1px solid #2f6b98 !important;
-        background-color: #2f6b98 !important;
-        color: #fff !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 {
+    border: 2px solid #2f6b98 !important;
+  }
 
-    }
-
-    .ant-radio-button-wrapper-checked :before {
-        background-color: #2f6b98 !important;
-    }
+  .ant-radio-button-wrapper-checked :before {
+    background-color: #2f6b98 !important;
+  }
 }
 
 .chart-container {
-    width: 100%;
-    height: 449px;
-    // padding: 10px;
+  width: 100%;
+  height: 449px;
+  // padding: 10px;
 }
 </style>
diff --git a/frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue b/frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue
index 9a1adb39..d3836f4c 100644
--- a/frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue
+++ b/frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue
@@ -298,7 +298,7 @@ const handleExport = async () => {};
 const handleViewDetail = (record: any) => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = 'WT';
-  modelStore.title = record.stnm + '详情信息';
+  modelStore.title = record.stnm ;
   modelStore.params.stcd = record.stcd;
 };
 
diff --git a/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue b/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue
index 974a3508..b432ef68 100644
--- a/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue
+++ b/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue
@@ -910,7 +910,7 @@ function handleRowClick(record: any) {
     stcd: record.stcd,
     titleName: record.stnm
   } as any  // 临时类型断言，因为 store 定义不完整
-  modelStore.title = record.stnm ? `${record.stnm} 详情信息` : '详情信息'
+  modelStore.title = record.stnm ? `${record.stnm} ` : ''
   modelStore.tabList = handleTabs(modelStore.params)
   modelStore.modalVisible = true
   
diff --git a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
index b736fad9..b1dc99f9 100644
--- a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
+++ b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
@@ -518,7 +518,7 @@ const handleViewDetail = (record: any) => {
     if (record) {
         modelStore.modalVisible = true;
         modelStore.params.sttp = "WT";
-        modelStore.title = record.stnm + "详情信息";
+        modelStore.title = record.stnm ;
         // modelStore.isBasicEdit = true;
         if (tabIndex.value == "27") {
             modelStore.params.enfc = "1";
diff --git a/frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue b/frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue
index 9c790179..f33cefe9 100644
--- a/frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue
+++ b/frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue
@@ -1,636 +1,646 @@
 <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"
-                />
-                <!-- <a-input v-model:value="searchData.stnm" placeholder="请输入测站名称" style="width: 200px" allow-clear /> -->
+    <!-- 搜索表单 -->
+    <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-input v-model:value="searchData.stnm" placeholder="请输入测站名称" style="width: 200px" allow-clear /> -->
 
-                <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 {  wbsbGetKendoList, getVmsstbprpt } from '@/api/sw'
-import { vmsstbprptGetKendoList } from '@/api/sz'
-import { useModelStore } from "@/store/modules/model";
+import { ref, computed, watch, onMounted } from 'vue';
+import { wbsbGetKendoList, getVmsstbprpt } from '@/api/sw';
+import { vmsstbprptGetKendoList } from '@/api/sz';
+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 || '0')
-const loading = ref(false)
-const tableData = ref<any[]>([])
+const tabIndex = ref(props.activeKey || '0');
+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
+    // },
+    {
+      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
+    });
+  }
 
-    // 根据 tabIndex 设置站点类型（水质监测）
-    if (tabIndex.value === '3') {
-        filters.push({
-            field: 'sttpCode',
-            operator: 'eq',
-            dataType: 'string',
-            value: 'WQFB'
-        })
-    } else {
-        filters.push({
-            field: 'sttpCode',
-            operator: 'eq',
-            dataType: 'string',
-            value: 'WQ'
-        })
-    }
+  // 根据 tabIndex 设置站点类型（水质监测）
+  if (tabIndex.value === '3') {
+    filters.push({
+      field: 'sttpCode',
+      operator: 'eq',
+      dataType: 'string',
+      value: 'WQFB'
+    });
+  } else {
+    filters.push({
+      field: 'sttpCode',
+      operator: 'eq',
+      dataType: 'string',
+      value: 'WQ'
+    });
+  }
 
-    // Tab特定过滤 - 对齐 React 版本的水质监测逻辑
-    switch (tabIndex.value) {
-        case '0':  // 自动监测-实时
-            filters.push(
-                {
-                    field: 'mway',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 2
-                },
-                {
-                    field: 'dtinType',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 0
-                }
-            )
-            break
-        case '1':  // 自动监测-历史
-            filters.push(
-                {
-                    field: 'mway',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 2
-                },
-                {
-                    field: 'dtinType',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 1
-                }
-            )
-            break
-        case '2':  // 人工监测
-            filters.push(
-                {
-                    field: 'mway',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 1
-                },
-                {
-                    field: 'dtinType',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 2
-                }
-            )
-            break
-        case '3':  // 特殊类型
-            filters.push(
-                {
-                    field: 'mway',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 2
-                },
-                {
-                    field: 'dtinType',
-                    operator: 'eq',
-                    dataType: 'string',
-                    value: 0
-                }
-            )
-            break
-    }
+  // Tab特定过滤 - 对齐 React 版本的水质监测逻辑
+  switch (tabIndex.value) {
+    case '0': // 自动监测-实时
+      filters.push(
+        {
+          field: 'mway',
+          operator: 'eq',
+          dataType: 'string',
+          value: 2
+        },
+        {
+          field: 'dtinType',
+          operator: 'eq',
+          dataType: 'string',
+          value: 0
+        }
+      );
+      break;
+    case '1': // 自动监测-历史
+      filters.push(
+        {
+          field: 'mway',
+          operator: 'eq',
+          dataType: 'string',
+          value: 2
+        },
+        {
+          field: 'dtinType',
+          operator: 'eq',
+          dataType: 'string',
+          value: 1
+        }
+      );
+      break;
+    case '2': // 人工监测
+      filters.push(
+        {
+          field: 'mway',
+          operator: 'eq',
+          dataType: 'string',
+          value: 1
+        },
+        {
+          field: 'dtinType',
+          operator: 'eq',
+          dataType: 'string',
+          value: 2
+        }
+      );
+      break;
+    case '3': // 特殊类型
+      filters.push(
+        {
+          field: 'mway',
+          operator: 'eq',
+          dataType: 'string',
+          value: 2
+        },
+        {
+          field: 'dtinType',
+          operator: 'eq',
+          dataType: 'string',
+          value: 0
+        }
+      );
+      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' }
-            ],
-            groupResultFlat:false
-        }
+  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' }
+      ],
+      groupResultFlat: false
+    };
 
-        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('站点数据列表')
-    // 根据当前 Tab 确定站点类型
-    // const sttpCodeValue = tabIndex.value === '3' ? 'WQFB' : 'WQ'
-    
+  try {
     const params = {
-        "filter": {
-            "logic": "and",
-            "filters": [
-                code != 'all' ? {
-                    "field": "baseId",
-                    "operator": "contains",
-                    "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('站点数据列表');
+  // 根据当前 Tab 确定站点类型
+  // const sttpCodeValue = tabIndex.value === '3' ? 'WQFB' : 'WQ'
+
+  const params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        code != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'contains',
+              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 = "WQFB";
-        modelStore.title = record.stnm + "详情信息";
-        // modelStore.isBasicEdit = true;
-        modelStore.params.stcd = record.stcd;
-        modelStore.modalVisible = true;
-        
-       
+  if (record) {
+    modelStore.modalVisible = true;
+    modelStore.params.sttp = 'WQ';
+    modelStore.title = record.stnm;
+    modelStore.params.stcd = record.stcd;
+    modelStore.modalVisible = true;
+    modelStore.params.sttpCode = record.sttpCode;
+    if(tabIndex.value == '3'){
+      modelStore.params.dtinType = '2' 
     }
+  }
 
-    // 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/waterQuality/index.vue b/frontend/src/modules/waterQuality/index.vue
index fd509a41..02a4141c 100644
--- a/frontend/src/modules/waterQuality/index.vue
+++ b/frontend/src/modules/waterQuality/index.vue
@@ -724,7 +724,7 @@ const handleDataPointClick = (params: any) => {
     if (stationData && stationData.stcd) {
         modelStore.modalVisible = true;
         modelStore.params.sttp = "WQFB";
-        modelStore.title = stationData.stnm + "详情信息";
+        modelStore.title = stationData.stnm ;
         // modelStore.isBasicEdit = true;
         modelStore.params.stcd = stationData.stcd;
     }
diff --git a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
index 4f74f749..d6d30b22 100644
--- a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
+++ b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
@@ -249,8 +249,7 @@ const initChart = () => {
       console.log('temperature:', params.data.value);
       modelStore.modalVisible = true;
       modelStore.params.sttp = "WT";
-      modelStore.title = params.data.stnm + "详情信息";
-      // modelStore.isBasicEdit = true;
+      modelStore.title = params.data.stnm;
       modelStore.params.stcd = params.data.stcd;
       modelStore.params.date = paramsOne.tm;
     }
diff --git a/frontend/src/store/modules/model.ts b/frontend/src/store/modules/model.ts
index 0ab7411f..bc51bc2c 100644
--- a/frontend/src/store/modules/model.ts
+++ b/frontend/src/store/modules/model.ts
@@ -10,6 +10,17 @@ export const useModelStore = defineStore('model', () => {
   const isBasicEdit = ref(false);
   const showStcdSelector = ref(false); // 是否显示下拉框
   const stcdOptions = ref<Array<{ label: string, value: string }>>([]); // 可选测站列表
+  
+  // 新增：功能迁移所需的状态字段
+  const baseId = ref<string>(''); // 当前基地 ID
+  const hasPowerStatData = ref<boolean>(false); // 电站是否有专题数据
+  const isPowerStatPage = ref<boolean>(false); // 是否在电站专题页面
+  const verticalWaterStcd = ref<string>(''); // 垂向水温子站点编码
+  const aiSites = ref<any[]>([]); // AI 识别站点列表
+  const wtConfig = ref<{ ioWtrv?: boolean; hasRstcdWtvt?: boolean }>({}); // 水温配置
+  const wqShow = ref<boolean>(false); // 水质 AI 预测显示
+  const fishTabInfo = ref<any>(null); // 鱼类监测数据信息
+  
   const params = ref<{
     sttp: string;
     stcd: any;
@@ -17,13 +28,23 @@ export const useModelStore = defineStore('model', () => {
     show: any;
     enfc:any;
     eqtp:any;
+    baseId?: string; // 新增：基地 ID
+    sttpCode?: string; // 新增：站点类型代码
+    sttpMap?: string; // 新增：站点类型映射
+    dtinType?: string;
+    bldstt: string;
   }>({
     sttp: 'eng',
     stcd: '',
     date: '',
     show: true,
     enfc:'0',
-    eqtp:''
+    eqtp:'',
+    baseId: '',
+    sttpCode: '',
+    sttpMap: '',
+    dtinType:'',
+    bldstt:'',
   });
   const filterStll= ref('')
   return {
@@ -36,5 +57,14 @@ export const useModelStore = defineStore('model', () => {
     showStcdSelector,  // 新增
     stcdOptions,        // 新增
     filterStll,
+    // 新增返回字段
+    baseId,
+    hasPowerStatData,
+    isPowerStatPage,
+    verticalWaterStcd,
+    aiSites,
+    wtConfig,
+    wqShow,
+    fishTabInfo,
   };
-});
+});
\ No newline at end of file
diff --git a/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue b/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
index c688b1f9..18222986 100644
--- a/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
+++ b/frontend/src/views/home/shuiDianKaiFaZhuangKuang.vue
@@ -28,110 +28,110 @@ onMounted(() => {
 const showMapModal = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "ENG";
-  modelStore.title = "三峡 详情信息";
+  modelStore.title = "三峡 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal1 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "WT";
-  modelStore.title = "水温 详情信息";
+  modelStore.title = "水温 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal2 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "WQFB";
-  modelStore.title = "水质 详情信息";
+  modelStore.title = "水质 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal3 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "FH";
-  modelStore.title = "栖息地 详情信息";
+  modelStore.title = "栖息地 ";
   modelStore.isBasicEdit = true;
 };//
 const showMapModal4 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "fh_zq_point";
-  modelStore.title = "栖息地流量 详情信息";
+  modelStore.title = "栖息地流量 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal5 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "fp_point";
-  modelStore.title = "过鱼设施 详情信息";
+  modelStore.title = "过鱼设施 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal6 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "FB";
-  modelStore.title = "鱼类增殖站 详情信息";
+  modelStore.title = "鱼类增殖站 ";
   modelStore.isBasicEdit = true;
 };
 //
 const showMapModal7 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "VA";
-  modelStore.title = "动物救助站 详情信息";
+  modelStore.title = "动物救助站 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal8 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "VP";
-  modelStore.title = "珍稀植物园 详情信息";
+  modelStore.title = "珍稀植物园 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal9 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "WE";
-  modelStore.title = "水生生态调查断面 详情信息";
+  modelStore.title = "水生生态调查断面 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal10 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "WVA";
-  modelStore.title = "野生动物监测 详情信息";
+  modelStore.title = "野生动物监测 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal11 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "VD_FBFM";
-  modelStore.title = "AI视频监控站 详情信息";
+  modelStore.title = "AI视频监控站 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal12 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "eng_alarm_point";
-  modelStore.title = "水电站告警情况 详情信息";
+  modelStore.title = "水电站告警情况 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal13 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "FPRD";
-  modelStore.title = "鱼类调查装置 详情信息";
+  modelStore.title = "鱼类调查装置 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal14 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "DW_2";
-  modelStore.title = "低温水减缓设施-叠梁门 详情信息";
+  modelStore.title = "低温水减缓设施-叠梁门 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal15 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "DW_5";
-  modelStore.title = "前置挡墙 详情信息";
+  modelStore.title = "前置挡墙 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal16 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "DW_6";
-  modelStore.title = "隔水幕墙 详情信息";
+  modelStore.title = "隔水幕墙 ";
   modelStore.isBasicEdit = true;
 };
 const showMapModal17 = () => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = "DW_1";
-  modelStore.title = "夹岩双层取水 详情信息";
+  modelStore.title = "夹岩双层取水 ";
   modelStore.isBasicEdit = true;
 };
 //DW_5