diff --git a/frontend-sjtb/.env.development b/frontend-sjtb/.env.development
index 6f8bd729..083fa926 100644
--- a/frontend-sjtb/.env.development
+++ b/frontend-sjtb/.env.development
@@ -7,7 +7,7 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/dev-api'
 # 本地环境
-VITE_APP_BASE_URL = 'http://10.84.121.127:8093'
+VITE_APP_BASE_URL = 'http://10.84.111.235:8093'
 # 测试环境
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8096'
diff --git a/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuHistory/index.vue b/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuHistory/index.vue
index 05a5f9ae..da23a86d 100644
--- a/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuHistory/index.vue
+++ b/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuHistory/index.vue
@@ -16,7 +16,7 @@
       :search-params="{}"
       :transform-data="customTransform"
     >
-      <template #action="{  record }">
+      <template #action="{ record }">
         <div class="flex">
           <a-button type="link" size="small" @click="handleView(record)"
             >查看</a-button
@@ -199,7 +199,17 @@ const columns = computed(() => {
 });
 
 const handleView = (record: any) => {
-  currentRecord.value = { ...record };
+  const transformDashToNull = obj => {
+    const result = { ...obj };
+    for (const key in result) {
+      if (result[key] === '-') {
+        result[key] = null;
+      }
+    }
+    return result;
+  };
+
+  currentRecord.value = transformDashToNull(record);
   editModalVisible.value = true;
 };
 
diff --git a/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue b/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
index 21609b97..18437c4d 100644
--- a/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
+++ b/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoForm.vue
@@ -246,51 +246,62 @@
           :class="{ imgupload_hidden: isView }"
         >
           <a-form-item label="图片" name="picpth">
-            <a-upload
-              v-model:file-list="imageFileList"
-              list-type="picture-card"
-              :multiple="true"
-              accept=".png,.jpg,.jpeg"
-              :before-upload="beforeImageUpload"
-              @preview="handleImagePreview"
-              :disabled="isView"
-              :maxCount="5"
-              @remove="handleImageRemove"
-            >
-              <div v-if="!isView && imageFileList.length < 5">
-                <plus-outlined />
-                <div style="margin-top: 8px">上传</div>
-              </div>
-            </a-upload>
+            <div class="flex align-center">
+              <a-upload
+                v-show="!isView"
+                v-model:file-list="imageFileList"
+                list-type="picture-card"
+                :multiple="true"
+                accept=".png,.jpg,.jpeg"
+                :before-upload="beforeImageUpload"
+                @preview="handleImagePreview"
+                :disabled="isView"
+                :maxCount="5"
+                @remove="handleImageRemove"
+              >
+                <div v-if="!isView && imageFileList.length < 5">
+                  <plus-outlined />
+                  <div style="margin-top: 8px">上传</div>
+                </div>
+              </a-upload>
+              <span v-show="isView && imageFileList.length === 0">
+                暂无图片
+              </span>
+            </div>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row :gutter="16">
         <a-col :span="12">
           <a-form-item label="视频" name="vdpth">
-            <a-upload
-              v-if="!isView"
-              v-model:file-list="videoFileList"
-              list-type="text"
-              :multiple="true"
-              accept=".mp4"
-              :before-upload="beforeVideoUpload"
-              @preview="handleVideoPreview"
-              :disabled="isView"
-              :maxCount="5"
-              @remove="handleVideoRemove"
-            >
-              <a-button :disabled="isView && videoFileList.length < 5">
-                <upload-outlined />
-                上传视频 (MP4)
+            <div class="flex align-center">
+              <a-upload
+                v-if="!isView"
+                v-model:file-list="videoFileList"
+                list-type="text"
+                :multiple="true"
+                accept=".mp4"
+                :before-upload="beforeVideoUpload"
+                @preview="handleVideoPreview"
+                :disabled="isView"
+                :maxCount="5"
+                @remove="handleVideoRemove"
+              >
+                <a-button :disabled="isView && videoFileList.length < 5">
+                  <upload-outlined />
+                  上传视频 (MP4)
+                </a-button>
+              </a-upload>
+              <a-button
+                v-else-if="videoFileList.length > 0"
+                @click="handleVideoPreview"
+              >
+                点击预览视频
               </a-button>
-            </a-upload>
-            <a-button
-              v-else-if="videoFileList.length > 0"
-              @click="handleVideoPreview"
-            >
-              点击预览视频
-            </a-button>
+              <span v-show="isView && videoFileList.length === 0">
+                暂无视频
+              </span>
+            </div>
           </a-form-item>
         </a-col>
       </a-row>
diff --git a/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue b/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
index 52940870..c97fc6a2 100644
--- a/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
+++ b/frontend-sjtb/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
@@ -401,8 +401,18 @@ const handleEdit = (record: any, type: string) => {
     isView.value = true;
   } else {
     isView.value = false;
-  }
-  currentRecord.value = { ...record };
+  } // 浅层转换（只处理第一层属性）
+  const transformDashToNull = obj => {
+    const result = { ...obj };
+    for (const key in result) {
+      if (result[key] === '-') {
+        result[key] = null;
+      }
+    }
+    return result;
+  };
+
+  currentRecord.value = transformDashToNull(record);
   editModalVisible.value = true;
 };
 
diff --git a/frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/approvalDetailSearch.vue b/frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/approvalDetailSearch.vue
index 21bd1e11..97a23ee9 100644
--- a/frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/approvalDetailSearch.vue
+++ b/frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/approvalDetailSearch.vue
@@ -14,22 +14,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from "vue";
-import dayjs from "dayjs";
-import BasicSearch from "@/components/BasicSearch/index.vue";
-import { DateSetting } from "@/utils/enumeration";
-import { useShuJuTianBaoStore } from "@/store/modules/shuJuTianBao";
-
-interface Props {
-  direction: any[];
-  guoyuStatus: any[];
-}
-
-const props = defineProps<Props>();
+import { ref, computed, onMounted } from 'vue';
+import dayjs from 'dayjs';
+import BasicSearch from '@/components/BasicSearch/index.vue';
+import { DateSetting } from '@/utils/enumeration';
+import { useShuJuTianBaoStore } from '@/store/modules/shuJuTianBao';
 
 const emit = defineEmits<{
-  (e: "reset", values: any): void;
-  (e: "search-finish", values: any): void;
+  (e: 'reset', values: any): void;
+  (e: 'search-finish', values: any): void;
 }>();
 
 const shuJuTianBaoStore = useShuJuTianBaoStore();
@@ -37,51 +30,51 @@ const localTypeDate = ref<string>(null);
 const basicSearchRef = ref<any>();
 
 const initSearchData = {
-  rvcd: "all",
+  rvcd: 'all',
   stcd: null,
-  rstcd: null,
-  strdt: [
-    dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD"),
-    dayjs().endOf("day").format("YYYY-MM-DD"),
-  ],
+  rstcd: null
+  // strdt: [
+  //   dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD"),
+  //   dayjs().endOf("day").format("YYYY-MM-DD"),
+  // ],
 };
 
 const searchData = ref<any>({ ...initSearchData });
 
 const searchList: any = computed(() => [
   {
-    type: "waterStation",
-    name: "rvcd",
-    label: "流域",
+    type: 'waterStation',
+    name: 'rvcd',
+    label: '流域',
     fieldProps: {
-      allowClear: true,
+      allowClear: true
     },
-    options: [],
-  },
-  {
-    span: 12,
-    type: "RangePicker",
-    name: "strdt",
-    label: "过鱼时间",
-    picker: "date",
-    fieldProps: {
-      format: "YYYY-MM-DD",
-      valueFormat: "YYYY-MM-DD",
-      allowClear: false,
-    },
-    presets: DateSetting.RangeButton.month,
-  },
+    options: []
+  }
+  // {
+  //   span: 12,
+  //   type: "RangePicker",
+  //   name: "strdt",
+  //   label: "过鱼时间",
+  //   picker: "date",
+  //   fieldProps: {
+  //     format: "YYYY-MM-DD",
+  //     valueFormat: "YYYY-MM-DD",
+  //     allowClear: false,
+  //   },
+  //   presets: DateSetting.RangeButton.month,
+  // },
 ]);
 
 const onSearchFinish = (values: any) => {
-  emit("search-finish", values);
+  emit('search-finish', values);
 };
 
 const onValuesChange = (changedValues: any, allValues: any) => {
   searchData.value = { ...searchData.value, ...allValues };
   if (
-    Object.keys(changedValues)[0] == "rstcd" ||
-    Object.keys(changedValues)[0] == "rvcd"
+    Object.keys(changedValues)[0] == 'rstcd' ||
+    Object.keys(changedValues)[0] == 'rvcd'
   ) {
     const formInstance = basicSearchRef.value?.formData;
     formInstance.stcd = null;
@@ -90,12 +83,12 @@ const onValuesChange = (changedValues: any, allValues: any) => {
 
 const handleReset = () => {
   localTypeDate.value = null;
-  emit("reset", initSearchData);
+  emit('reset', initSearchData);
 };
 
 onMounted(() => {
-  emit("search-finish", initSearchData);
-  shuJuTianBaoStore.getFpssOption("", "");
+  emit('search-finish', initSearchData);
+  shuJuTianBaoStore.getFpssOption('', '');
 });
 </script>
 
diff --git a/frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/index.vue b/frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/index.vue
index 97ca2ec2..cbd51e73 100644
--- a/frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/index.vue
+++ b/frontend-sjtb/src/views/shuJuTianBao/shengPiJiLu/index.vue
@@ -19,7 +19,7 @@
       @selection-change="handleSelectionChange"
     >
       <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
-      <template #action="{ column, record }">
+      <template #action="{ record }">
         <div class="flex">
           <a-button type="link" size="small" @click="handleShowDetail(record)"
             >详情</a-button
@@ -55,7 +55,7 @@
           :list-url="getApprovalLogList"
           :scroll-y="500"
         >
-          <template #action="{ column, record }">
+          <template #action="{ record }">
             {{ handName(record.action, actionTypeDict) }}
           </template>
         </BasicTable>
@@ -82,13 +82,13 @@
           :list-url="getApprovalChangeLogList"
           :scroll-y="500"
         >
-          <template #operationType="{ column, record }">
+          <template #operationType="{ record }">
             {{ handName(record.operationType, operationTypeDict) }}
           </template>
-          <template #bizType="{ column, record }">
+          <template #bizType="{ record }">
             {{ handName(record.bizType, yeWuType) }}
           </template>
-          <template #changeJson="{ column, record }">
+          <template #changeJson="{ record }">
             <pre style="max-height: 200px; overflow: auto; margin: 0">{{
               record.changeJson
             }}</pre>
@@ -122,7 +122,7 @@
           :scroll-y="'500px'"
           :transform-data="customTransform"
         >
-          <template #isfs="{ column, record }">
+          <template #isfs="{ record }">
             <a-tag
               :color="
                 record.isfs === 1 || record.isfs === '1' ? 'success' : 'error'
@@ -131,10 +131,10 @@
               {{ record.isfs === 1 || record.isfs === '1' ? '是' : '否' }}
             </a-tag>
           </template>
-          <template #direction="{ column, record }">
+          <template #direction="{ record }">
             {{ handName(record.direction, direction) }}
           </template>
-          <template #action="{ column, record }">
+          <template #action="{ record }">
             <a-button type="link" size="small" @click="handleView(record)"
               >查看</a-button
             >
@@ -243,7 +243,7 @@ let columns = ref([
     dataIndex: 'rvnm',
     key: 'rvnm',
     title: '流域',
-    width: 120,
+    width: 320,
     fixed: 'left'
   },
   {
@@ -346,7 +346,7 @@ let columns = ref([
   {
     title: '操作',
     key: 'action',
-    width: 120,
+    width: 130,
     fixed: 'right',
     slots: { customRender: 'action' }
   }
@@ -504,7 +504,7 @@ const detailColumns = ref([
     dataIndex: 'rvnm',
     key: 'rvnm',
     title: '流域',
-    width: 120,
+    width: 320,
     fixed: 'left'
   },
   {
@@ -518,7 +518,7 @@ const detailColumns = ref([
     dataIndex: 'stnm',
     key: 'stnm',
     title: '过鱼设施名称',
-    width: 150,
+    width: 180,
     fixed: 'left'
   },
   { dataIndex: 'strdt', key: 'strdt', title: '过鱼时间', width: 150 },
@@ -581,18 +581,18 @@ const handleDetailSearchFinish = (values: any) => {
       dataType: 'string',
       value: values.ftp
     },
-    values.strdt && {
-      field: 'strdt',
-      operator: 'gte',
-      dataType: 'date',
-      value: values.strdt[0] + ' 00:00:00'
-    },
-    values.strdt && {
-      field: 'strdt',
-      operator: 'lte',
-      dataType: 'date',
-      value: values.strdt[1] + ' 23:59:59'
-    },
+    // values.strdt && {
+    //   field: 'strdt',
+    //   operator: 'gte',
+    //   dataType: 'date',
+    //   value: values.strdt[0] + ' 00:00:00'
+    // },
+    // values.strdt && {
+    //   field: 'strdt',
+    //   operator: 'lte',
+    //   dataType: 'date',
+    //   value: values.strdt[1] + ' 23:59:59'
+    // },
     values.direction && {
       field: 'direction',
       operator: 'eq',
@@ -643,7 +643,18 @@ const handleShowDetail = (record: any) => {
 
 // 查看单条记录
 const handleView = (record: any) => {
-  currentViewRecord.value = { ...record };
+  // 浅层转换（只处理第一层属性）
+  const transformDashToNull = obj => {
+    const result = { ...obj };
+    for (const key in result) {
+      if (result[key] === '-') {
+        result[key] = null;
+      }
+    }
+    return result;
+  };
+
+  currentViewRecord.value = transformDashToNull(record);
   viewModalVisible.value = true;
 };
 
diff --git a/frontend/.env.development b/frontend/.env.development
index 6d37ed54..27f26cbe 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -7,17 +7,14 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/dev-api'
 # 本地环境
-# VITE_APP_BASE_URL = 'http://10.84.121.122:8093'
+# VITE_APP_BASE_URL = 'http://localhost:8093'
 # 测试环境
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8096'
 # 汤伟
-VITE_APP_BASE_URL = 'http://10.84.121.127:8093'
+# VITE_APP_BASE_URL = 'http://10.84.111.235:8093'
 # 李林 
-# VITE_APP_BASE_URL = 'http://10.84.121.43:8093'
-# VITE_APP_BASE_URL = 'http://192.168.1.162:8093'
-# 李林 
-# VITE_APP_BASE_URL = 'http://10.84.121.43:8093'
+VITE_APP_BASE_URL = 'http://10.84.111.25:8093'
 
 # 测试环境线上10.84.121.122:
 VITE_APP_TEST_ONLINE_URL = 'https://211.99.26.225:12122'
@@ -29,7 +26,6 @@ VITE_APP_TEST_ONLINE_URL = 'https://211.99.26.225:12122'
 VITE_APP_BASE_API_URL = 'http://10.84.121.21:8093'
 ## 开发环境  附件服务地址
 VITE_APP_ATTACHMENT_URL = 'https://211.99.26.225:12125'
-attachment
 
 # 地图服务地址
 VITE_APP_MAP_URL = 'https://211.99.26.225:18085'
diff --git a/frontend/docs/问题.md b/frontend/docs/问题.md
index 94206d91..64508204 100644
--- a/frontend/docs/问题.md
+++ b/frontend/docs/问题.md
@@ -2,30 +2,35 @@
 
 > 本记录用于跟踪项目开发过程中发现的问题，按日期倒序排列，并标注每项问题的发现人及处理状态。
 
-***
+---
 
 ## 问题列表（2026-06-26）
 
-| 发现日期       | 解决人    | 编号 | 问题描述                                  | 状态 | 备注     |
-| ---------- | ------ | -- | ------------------------------------- | -- | ------ |
-| 2026-06-26 | 扈      | 1  | 基础信息图片展示是什么逻辑                         | ✅  | <br /> |
-| 2026-06-26 | 扈      | 2  | 电站专题展示逻辑                              | ✅  | <br /> |
-| 2026-06-26 | <br /> | 3  | 实时视频回放 少接口                            | ⚠  | 缺少接口   |
-| 2026-06-26 | <br /> | 4  | 预警提示 少接口                              | ⚠  | 缺少接口   |
-| 2026-06-26 | 扈      | 5  | 生态流量 达标率查询不对                          | ✅  | <br /> |
-| 2026-06-26 | 王      | 6  | 鱼类适应性繁殖同期对比 NAN                       | ⚠  | <br /> |
-| 2026-06-26 | 扈      | 7  | 出库水温 综合分析 导出没做                        | ✅  | <br /> |
-| 2026-06-26 | <br /> | 8  | 栖息地-流量监测 没有水位视频和流量视频 字段没数据            | ⚠  | <br /> |
-| 2026-06-26 | <br /> | 9  | 栖息地 水温、水质、流量没有数据没法测                   | ⚠  | <br /> |
-| 2026-06-26 | 扈      | 10 | 鱼类增殖站 - 运行数据 要添加字典                    | ✅  | <br /> |
-| 2026-06-26 | 扈      | 11 | 珍惜植物园 - 种植要求字段不知道                     | ✅  | <br /> |
-| 2026-06-26 | 扈      | 12 | 水生调查断面 - 监测数据 不知道电导率，性腺发育期，早期资源量和种类   | ✅  | <br /> |
-| 2026-06-26 | 扈      | 13 | 水电告警情况 生态流量 不知道字段 接口传参有问题             | ✅  | <br /> |
-| 2026-06-26 | <br /> | 14 | 地图抽吸 碰撞检测 放大到具体层级锚点抽吸了但是 popup 弹框还在显示 | ⚠  | <br /> |
-| 2026-06-26 | <br /> | 15 | 地图比如积石峡 放大到层级被公伯峡隐藏掉了，然后在放大才显示 抽吸的问题  | ⚠  | <br /> |
-| 2026-06-26 | <br /> | 16 | 运行情况 计划开始运行时间 接口没接                    | ⚠  | <br /> |
+| 发现日期   | 解决人 | 编号 | 问题描述                                                               | 状态   | 备注     |
+| ---------- | ------ | ---- | ---------------------------------------------------------------------- | ------ | -------- |
+| 2026-06-26 | 扈     | 1    | 基础信息图片展示是什么逻辑                                             | ✅     | <br />   |
+| 2026-06-26 | 扈     | 2    | 电站专题展示逻辑                                                       | ✅     | <br />   |
+| 2026-06-26 | <br /> | 3    | 实时视频回放 少接口                                                    | ⚠      | 缺少接口 |
+| 2026-06-26 | <br /> | 4    | 预警提示 少接口                                                        | ⚠      | 缺少接口 |
+| 2026-06-26 | 扈     | 5    | 生态流量 达标率查询不对                                                | ✅     | <br />   |
+| 2026-06-26 | 王     | 6    | 鱼类适应性繁殖同期对比 NAN                                             | ⚠      | <br />   |
+| 2026-06-26 | 扈     | 7    | 出库水温 综合分析 导出没做                                             | ✅     | <br />   |
+| 2026-06-26 | <br /> | 8    | 栖息地-流量监测 没有水位视频和流量视频 字段没数据                      | ⚠      | <br />   |
+| 2026-06-26 | <br /> | 9    | 栖息地 水温、水质、流量没有数据没法测                                  | ⚠      | <br />   |
+| 2026-06-26 | 扈     | 10   | 鱼类增殖站 - 运行数据 要添加字典                                       | ✅     | <br />   |
+| 2026-06-26 | 扈     | 11   | 珍惜植物园 - 种植要求字段不知道                                        | ✅     | <br />   |
+| 2026-06-26 | 扈     | 12   | 水生调查断面 - 监测数据 不知道电导率，性腺发育期，早期资源量和种类     | ✅     | <br />   |
+| 2026-06-26 | 扈     | 13   | 水电告警情况 生态流量 不知道字段 接口传参有问题                        | ✅     | <br />   |
+| 2026-06-26 | <br /> | 14   | 地图抽吸 碰撞检测 放大到具体层级锚点抽吸了但是 popup 弹框还在显示      | ⚠      | <br />   |
+| 2026-06-26 | <br /> | 15   | 地图比如积石峡 放大到层级被公伯峡隐藏掉了，然后在放大才显示 抽吸的问题 | ⚠      | <br />   |
+| 2026-06-26 | <br /> | 16   | 运行情况 计划开始运行时间 接口没接                                     | ⚠      | <br />   |
+| 2026-07-01 | 王     | 17   | 所有弹框加拖动                                                         | ✅ | <br />   |
+| 2026-07-01 | 王     | 18   | 所有弹框检查宽度有的是固定的                                           | ✅ | <br />   |
+| 2026-07-01 | 王     | 18   | 所有导出的添加                                           | <br /> | <br />   |
+| 2026-07-02 | 扈     | 19   | 地图点击基地切换偶发性会全部展示出来所有锚点                           | <br /> | <br />   |
+| 2026-07-03 | 汤     | 20   | 图例数据关了选中配置需要添加一个字段是默认不显示                       | <br /> | <br />   |
 
-***
+---
 
 ## 状态说明
 
@@ -33,6 +38,6 @@
 - ⚠ – 处理中 / 待解决
 - ❌ – 阻塞 / 未开始
 
-***
+---
 
 、
diff --git a/frontend/package.json b/frontend/package.json
index 6a7110e4..1595d9c5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "@wangeditor/editor": "^5.0.0",
     "@wangeditor/editor-for-vue": "^5.1.10",
     "ant-design-vue": "latest",
+    "antdv-draggable-modal": "^1.1.6",
     "axios": "^1.2.0",
     "better-scroll": "^2.4.2",
     "cesium": "^1.141.0",
@@ -52,6 +53,7 @@
     "video.js": "^8.23.7",
     "videojs-contrib-hls": "^5.15.0",
     "vue": "^3.2.40",
+    "vue-ant-modal-enhance": "^1.2.2",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.1.6",
     "vuedraggable": "^2.24.3",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 3dd977ab..148fce14 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       ant-design-vue:
         specifier: latest
         version: 4.2.6(vue@3.5.33(typescript@6.0.3))
+      antdv-draggable-modal:
+        specifier: ^1.1.6
+        version: 1.1.6(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3))
       axios:
         specifier: ^1.2.0
         version: 1.15.2
@@ -134,6 +137,9 @@ importers:
       vue:
         specifier: ^3.2.40
         version: 3.5.33(typescript@6.0.3)
+      vue-ant-modal-enhance:
+        specifier: ^1.2.2
+        version: 1.2.2(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3))
       vue-i18n:
         specifier: ^9.1.9
         version: 9.14.5(vue@3.5.33(typescript@6.0.3))
@@ -2220,6 +2226,13 @@ packages:
     peerDependencies:
       vue: '>=3.2.0'
 
+  antdv-draggable-modal@1.1.6:
+    resolution: {integrity: sha512-nGYIbkHfXBwKOtcw9lknpCdXK/Co0MpikywHREdgGI7dNm5c0zwHgolWf2XQSRvQx9sAtv2+BJYeDsJF77bncg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      ant-design-vue: '>=3.2.0 <4.0.0'
+      vue: '>=3.2.0 <3.4.0'
+
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -5360,6 +5373,12 @@ packages:
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
+  vue-ant-modal-enhance@1.2.2:
+    resolution: {integrity: sha512-gLozUM4K+pESYcV5ljsc9rAOvy94jL4fId4oNfuxu2pT/hx1HIGnQixi08yKV4FoBOwiFe4cd6dPVqCQLNAANQ==}
+    peerDependencies:
+      ant-design-vue: ^3.0.0 || ^4.0.0
+      vue: ^3.2.0
+
   vue-component-type-helpers@3.2.7:
     resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
 
@@ -8569,6 +8588,11 @@ snapshots:
       vue-types: 3.0.2(vue@3.5.33(typescript@6.0.3))
       warning: 4.0.3
 
+  antdv-draggable-modal@1.1.6(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      ant-design-vue: 4.2.6(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -11975,6 +11999,11 @@ snapshots:
 
   vscode-uri@3.1.0: {}
 
+  vue-ant-modal-enhance@1.2.2(ant-design-vue@4.2.6(vue@3.5.33(typescript@6.0.3)))(vue@3.5.33(typescript@6.0.3)):
+    dependencies:
+      ant-design-vue: 4.2.6(vue@3.5.33(typescript@6.0.3))
+      vue: 3.5.33(typescript@6.0.3)
+
   vue-component-type-helpers@3.2.7: {}
 
   vue-demi@0.14.10(vue@3.5.33(typescript@6.0.3)):
diff --git a/frontend/src/api/home/index.ts b/frontend/src/api/home/index.ts
index 6c3732c4..6809e3f2 100644
--- a/frontend/src/api/home/index.ts
+++ b/frontend/src/api/home/index.ts
@@ -1,9 +1,8 @@
 import request from '@/utils/request';
-// import { SERVICE_URLS } from '../config'; // 引入配置
 // 基本情况介绍
 export function getBaseWbsb(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/wbsb/GetKendoList',
+    url: '/eq/wbsb/GetKendoList',
     method: 'post',
     data: data
   });
@@ -12,7 +11,16 @@ export function getBaseWbsb(data: any) {
 // 水电开发及环境监测 - 获取列表数据
 export function getVmsstbprptKendoList(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/vmsstbprpt/GetKendoList',
+    url: '/eq/vmsstbprpt/GetKendoList',
+    method: 'post',
+    data: data
+  });
+}
+
+// 水电开发及环境监测 - 获取列表数据（全基地模式）
+export function getVmsstbprptKendoListCust(data: any) {
+  return request({
+    url: '/eq/vmsstbprpt/GetKendoList',
     method: 'post',
     data: data
   });
@@ -21,7 +29,7 @@ export function getVmsstbprptKendoList(data: any) {
 // 环保设施建设情况
 export function environmentalProtectionConstruction(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/operat/GetKendoListCust',
+    url: '/eng/base/operat/GetKendoListCust',
     method: 'post',
     data: data
   });
@@ -30,7 +38,7 @@ export function environmentalProtectionConstruction(data: any) {
 // 环保设施弹框表格
 export function envOpdGetKendoListCust(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/oped/GetKendoListCust',
+    url: '/overview/oped/GetKendoListCust',
     method: 'post',
     data: data
   });
@@ -39,7 +47,7 @@ export function envOpdGetKendoListCust(data: any) {
 // 获取基地列表
 export function getBaseList(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/wbsb/GetKendoList',
+    url: '/eq/wbsb/GetKendoList',
     method: 'post',
     data: data
   });
@@ -48,7 +56,7 @@ export function getBaseList(data: any) {
 // 获取设施介绍列表
 export function getMsstbprptKendoList(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
+    url: '/overview/msstbprpt/GetKendoList',
     method: 'post',
     data: data
   });
@@ -57,7 +65,7 @@ export function getMsstbprptKendoList(data: any) {
 // 环保自动监测工作开展情况
 export function baseEvnmAutoMonitorGetKendoListCust(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/evnmAutoMonitor/GetKendoListCust',
+    url: '/wte/base/evnmAutoMonitor/GetKendoListCust',
     method: 'post',
     data: data
   });
@@ -66,7 +74,7 @@ export function baseEvnmAutoMonitorGetKendoListCust(data: any) {
 // 环保自动监测弹窗列表
 export function vmsstbprptGetKendoList(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/vmsstbprpt/GetKendoList',
+    url: '/eq/vmsstbprpt/GetKendoList',
     method: 'post',
     data: data
   });
@@ -75,7 +83,7 @@ export function vmsstbprptGetKendoList(data: any) {
 // 获取基本信息
 export function baseMsstbprptGetKendoList(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
+    url: '/overview/msstbprpt/GetKendoList',
     method: 'post',
     data: data
   });
@@ -106,4 +114,4 @@ export function getBaseStbprpDataWNDR(data: any) {
     method: 'post',
     data: data
   });
-}
+}
\ No newline at end of file
diff --git a/frontend/src/api/map.ts b/frontend/src/api/map.ts
index dfad5540..388431df 100644
--- a/frontend/src/api/map.ts
+++ b/frontend/src/api/map.ts
@@ -3,8 +3,10 @@ import request from '@/utils/request';
 // 获取图例列表
 export function getModuleMapLegendList(params?: { moduleId?: string }) {
   const url = params?.moduleId
-    ? `/api/wmp-sys-server/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}`
-    : '/api/wmp-sys-server/mapLegend/getModuleMapLegendList';
+    ? // ? `/api/wmp-sys-server/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}`
+      // : '/api/wmp-sys-server/mapLegend/getModuleMapLegendList';
+      `/mapLegend/getModuleMapLegendList?moduleId=${params.moduleId}`
+    : '/mapLegend/getModuleMapLegendList';
   return request({
     url,
     method: 'get'
@@ -13,7 +15,8 @@ export function getModuleMapLegendList(params?: { moduleId?: string }) {
 // 获取地图配置列表
 export function getMapList(data: any) {
   return request({
-    url: '/api/wmp-sys-server/mapmodule/getMapData',
+    // url: '/api/wmp-sys-server/mapmodule/getMapData',
+    url: '/mapmodule/getMapData',
     method: 'post',
     data
   });
diff --git a/frontend/src/api/mapModal/index.ts b/frontend/src/api/mapModal/index.ts
index d3b701ed..3b38499a 100644
--- a/frontend/src/api/mapModal/index.ts
+++ b/frontend/src/api/mapModal/index.ts
@@ -28,7 +28,7 @@ export function postIdUrl(data: any) {
     method: 'post',
     data,
     headers: {
-      'Content-Type': 'multipart/form-data'
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
     }
   });
 }
@@ -46,7 +46,7 @@ export function getBuildState(data: any) {
 // 查询鱼类栖息地监测数据类型可用性
 export function getFishTab(stcd: string) {
   return request({
-    url: `/api/wmp-env-server/we/wer/getWeDefaultData`,
+    url: `/wte/we/wer/getWeDefaultData`,
     method: 'get',
     params: { stcd }
   });
@@ -86,15 +86,15 @@ export function getPanoramaList(data: any) {
 // 实时视频
 export function getVideoList(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
+    url: '/vd/msstbprpt/GetKendoList',
     method: 'post',
     data
   });
 }
-// 录像视频 - 时间查询 没接
+// 录像视频 - 时间查询
 export function getNoLiveVideoYear(data: any) {
   return request({
-    url: '/wmp-env-server/env/vd/GetKendoListCust',
+    url: '/vd/GetKendoListCust',
     method: 'post',
     data
   });
@@ -103,7 +103,7 @@ export function getNoLiveVideoYear(data: any) {
 // 录像视频
 export function getNoLiveVideoList(data: any) {
   return request({
-    url: '/wmp-env-server/env/vd/runData/GetKendoListCust',
+    url: '/vd/runData/GetKendoListCust',
     method: 'post',
     data
   });
@@ -306,7 +306,6 @@ export function getFishZHFX(data: any) {
     data
   });
 }
-
 export function getRunStateAnalysis(data: any) {
   return request({
     url: '/fp/run/analysis/GetKendoListCust',
@@ -314,51 +313,51 @@ export function getRunStateAnalysis(data: any) {
     data
   });
 }
-// ai运行识别 没接
+// ai运行识别
 export function getAIYXSB(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/msstbprpt/getStInfoByStcd',
+    url: '/fp/msstbprpt/getStInfoByStcd',
     method: 'get',
     params: data
   });
 }
-// ai运行识别 视频/表格 没接
+// ai运行识别 视频/表格
 export function getAIComList(data: any) {
   return request({
-    url: '/wmp-env-server/env/ai/com/GetKendoListCust',
+    url: '/warn/ai/com/GetKendoListCust',
     method: 'post',
     data
   });
 }
-// ai运行识别 日历 没接
+// ai运行识别 日历
 export function getAIComCalendar(data: any) {
   return request({
-    url: '/wmp-env-server/env/ai/com/qgc/aiRecord/GetKendoListCust',
+    url: '/warn/ai/com/qgc/aiRecord/GetKendoListCust',
     method: 'post',
     data
   });
 }
-// ai运行 日历点击 没接
+// ai运行 日历点击
 export function getAIComCalendarClick(data: any) {
   return request({
-    url: '/wmp-env-server/env/ai/com/qgc/aiFile/GetKendoListCust',
+    url: '/warn/ai/com/qgc/aiFile/GetKendoListCust',
     method: 'post',
     data
   });
 }
 
-// 鱼类增殖站 - 运行数据 -获取年 没接
+// 鱼类增殖站 - 运行数据 -获取年
 export function getFishProgressionYear(data: any) {
   return request({
-    url: '/wmp-env-server/fb/fbrdmr/getFbRelatedYrByStcd',
+    url: '/fb/fbrdmr/getFbRelatedYrByStcd',
     method: 'get',
     params: data
   });
 }
-//鱼类增殖站 - 运行数据 -获取鱼 没接
+//鱼类增殖站 - 运行数据 -获取鱼
 export function getFishProgressionFish(data: any) {
   return request({
-    url: '/wmp-env-server/env/fishDic/stcd/GetKendoList',
+    url: '/fp/fishDic/stcd/GetKendoList',
     method: 'post',
     data
   });
@@ -367,7 +366,7 @@ export function getFishProgressionFish(data: any) {
 // 过程图 - 亲鱼
 export function getProcessDiagramParentFish(data: any) {
   return request({
-    url: '/wmp-env-server/fb/bsmfr/fish/GetKendoListCust',
+    url: '/fb/bsmfr/fish/GetKendoListCust',
     method: 'post',
     data
   });
@@ -376,7 +375,7 @@ export function getProcessDiagramParentFish(data: any) {
 // 过程图 - 产卵/孵化
 export function getProcessDiagramHatch(data: any, type: 1 | 2) {
   return request({
-    url: `/wmp-env-server/fb/fishhatchrecr/fish/GetKendoListCust?type=${type}`,
+    url: `/fb/fishhatchrecr/fish/GetKendoListCust?type=${type}`,
     method: 'post',
     data
   });
@@ -385,32 +384,31 @@ export function getProcessDiagramHatch(data: any, type: 1 | 2) {
 // 过程图 - 鱼苗
 export function getProcessDiagramFishFry(data: any) {
   return request({
-    url: '/wmp-env-server/fb/fishbreedr/fish/GetKendoListCust',
+    url: '/fb/fishbreedr/fish/GetKendoListCust',
     method: 'post',
     data
   });
 }
-//增值放流情况 获取年 没接
+//增值放流情况 获取年
 export function getNormalAddedSituationYear(data: any) {
   return request({
-    url: '/wmp-env-server/fb/msfbrdm/fbFlData/GetKendoListCust',
+    url: '/fb/msfbrdm/fbFlData/GetKendoListCust',
     method: 'post',
     data
   });
 }
-//增值放流情况 列表 没接
-
+//增值放流情况 列表
 export function getNormalAddedSituation(data: any) {
   return request({
-    url: '/wmp-env-server/fb/msfbrdm/qgc/GetKendoListCust',
+    url: '/fb/msfbrdm/qgc/GetKendoListCust',
     method: 'post',
     data
   });
 }
-// 科研情况 没接
+// 科研情况
 export function getNormalResearchSituation(data: any) {
   return request({
-    url: '/wmp-env-server/base/researchb/GetKendoList',
+    url: '/fb/base/researchb/GetKendoList',
     method: 'post',
     data
   });
@@ -418,23 +416,23 @@ export function getNormalResearchSituation(data: any) {
 // 珍稀植物园 - 运行数据 没接
 export function getNormalDataMonitoring2Year(data: any) {
   return request({
-    url: '/wmp-env-server/env/vpr/year/GetKendoListCust',
+    url: '/vap/vpr/year/GetKendoListCust',
     method: 'post',
     data
   });
 }
-// 珍稀植物园 - 运行数据 列表 没接
+// 珍稀植物园 - 运行数据 列表
 export function getNormalDataMonitoring2List(data: any) {
   return request({
-    url: '/wmp-env-server/env/vpr/basinVpIntDetail',
+    url: '/vap/vpr/basinVpIntDetail',
     method: 'post',
     data
   });
 }
-// 珍稀动物园 - 监测数据 时间 没接
+// 珍稀动物园 - 监测数据 时间
 export function getNormal2Year(data: any) {
   return request({
-    url: '/wmp-env-server/env/var/year/GetKendoListCust',
+    url: '/vap/var/year/GetKendoListCust',
     method: 'post',
     data
   });
@@ -443,7 +441,7 @@ export function getNormal2Year(data: any) {
 // 珍稀动物园 - 监测数据 列表 没接
 export function getNormal2List(data: any) {
   return request({
-    url: '/wmp-env-server/env/var/GetKendoListCust',
+    url: '/vap/var/GetKendoListCust',
     method: 'post',
     data
   });
@@ -451,31 +449,23 @@ export function getNormal2List(data: any) {
 // 水生生态调查断面 - 监测数据 年份 没接
 export function getEcologyYear(data: any) {
   return request({
-    url: '/wmp-env-server/we/wer/getWeYr',
+    url: '/wte/we/wer/getWeYr',
     method: 'get',
     params: data
   });
 }
-// 水生生态调查断面 - 监测数据 调查批次 没接
+// 水生生态调查断面 - 监测数据 调查批次
 export function getEcologyBatch(data: any) {
   return request({
-    url: '/wmp-env-server/env/we/fisht/GetKendoListCust',
+    url: '/wte/we/fisht/GetKendoListCust',
     method: 'post',
     data
   });
 }
-// 水生生态调查断面 - 监测数据 保护类型 没接
-export function getEcologyProtectType(data: any) {
-  return request({
-    url: '/api/dec-modules-usm-springcloud-starter/usm/v1/dict/getRemoteDictTreeValue',
-    method: 'get',
-    params: data
-  });
-}
-// 水生生态调查断面 - 监测数据 调查鱼类列表 没接
+// 水生生态调查断面 - 监测数据 调查鱼类列表
 export function getEcologyList(data: any) {
   return request({
-    url: '/wmp-env-server/env/we/fisht/qgc/GetKendoListCust',
+    url: '/wte/we/fisht/qgc/GetKendoListCust',
     method: 'post',
     data
   });
@@ -483,7 +473,7 @@ export function getEcologyList(data: any) {
 // 水生生态调查断面 - 监测数据 水温列表 没接
 export function getEcologyList1(data: any) {
   return request({
-    url: '/wmp-env-server/we/wewtr/GetKendoListCust',
+    url: '/wte/we/wewtr/GetKendoListCust',
     method: 'post',
     data
   });
@@ -491,7 +481,7 @@ export function getEcologyList1(data: any) {
 // 水生生态调查断面 - 监测数据 水质列表 没接
 export function getEcologyList2(data: any) {
   return request({
-    url: '/wmp-env-server/we/wewqr/GetKendoListCust',
+    url: '/wte/we/wewqr/GetKendoListCust',
     method: 'post',
     data
   });
@@ -500,23 +490,23 @@ export function getEcologyList2(data: any) {
 // 水生生态调查断面 - 监测数据 流速列表 没接
 export function getEcologyList3(data: any) {
   return request({
-    url: '/wmp-env-server/env/we/fvR/GetKendoListCust',
+    url: '/wte/we/fvR/GetKendoListCust',
     method: 'post',
     data
   });
 }
-// 野生动物检测 -现场录像 - 年份 - 没接
+// 野生动物检测 -现场录像 - 年份
 export function getLiveFootageYear(data: any) {
   return request({
-    url: '/wmp-env-server/env/wva/default/GetKendoListCust',
+    url: '/wte/wva/default/GetKendoListCust',
     method: 'post',
     data
   });
 }
-// 野生动物检测 -现场录像 - 没接
+// 野生动物检测 -现场录像
 export function getLiveFootageList(data: any) {
   return request({
-    url: '/wmp-env-server/env/wva/GetKendoListCust',
+    url: '/wte/wva/GetKendoListCust',
     method: 'post',
     data
   });
@@ -524,15 +514,15 @@ export function getLiveFootageList(data: any) {
 // 鱼类分布明细 - 年 没接
 export function getFishDistributionYear(data: any) {
   return request({
-    url: '/wmp-env-server/we/wer/getWeYr',
+    url: '/wte/we/wer/getWeYr',
     method: 'get',
     params: data
   });
 }
-// 鱼类分布明细 - 列表 没接
+// 鱼类分布明细 - 列表
 export function getFishDistributionList(data: any) {
   return request({
-    url: '/wmp-env-server/env/we/fisht/qgc/GetKendoListCust',
+    url: '/wte/we/fisht/qgc/GetKendoListCust',
     method: 'post',
     data
   });
@@ -540,14 +530,14 @@ export function getFishDistributionList(data: any) {
 // 生态流量泄放设施 - 监测数据 年份 没接
 export function getFlowDischargeYear(data: any) {
   return request({
-    url: '/wmp-env-server/env/operat/default/year',
+    url: '/eq/operat/default/year',
     method: 'post',
     data
   });
 }
 export function getFlowDischargeList(code: string, data: any) {
   return request({
-    url: `/api/dec-lygk-base-server/base/stbprpData/GetKendoListCust?tbCode=${code}`,
+    url: `/env/engInfo/stbprpData/GetKendoListCust?tbCode=${code}`,
     method: 'post',
     data
   });
diff --git a/frontend/src/api/select/index.ts b/frontend/src/api/select/index.ts
index 647e773e..d322e8e1 100644
--- a/frontend/src/api/select/index.ts
+++ b/frontend/src/api/select/index.ts
@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-//水电基地数据获取 
+//水电基地数据获取
 export function wbsbGetKendoList(data: any) {
   return request({
     url: '/env/hydrobase/wbsb/GetKendoList',
@@ -106,3 +106,11 @@ export function uploadFile(data: any) {
     headers: { 'Content-Type': 'multipart/form-data' }
   });
 }
+// 所在位置下拉列表
+export function getAddvcdDropdownByRvcd(params: any) {
+  return request({
+    url: '/base/msalongb/noAuth/GetKendoList',
+    method: 'post',
+    params
+  });
+}
diff --git a/frontend/src/api/system/map/ConfigManagement/index.ts b/frontend/src/api/system/map/ConfigManagement/index.ts
index d9549aed..bed99f3b 100644
--- a/frontend/src/api/system/map/ConfigManagement/index.ts
+++ b/frontend/src/api/system/map/ConfigManagement/index.ts
@@ -3,7 +3,7 @@ import request from '@/utils/request';
 // 获取所有沿程配置数据
 export function getAllConfigTree(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/msalongb/GetKendoList',
+    url: '/base/msalongb/GetKendoList',
     method: 'post',
     data: data
   });
@@ -11,7 +11,7 @@ export function getAllConfigTree(data: any) {
 // 保存沿程配置
 export function saveBaseWbsb(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/wbsb/addOrUpdate',
+    url: '/base/msalongb/save',
     method: 'post',
     data: data
   });
@@ -19,8 +19,24 @@ export function saveBaseWbsb(data: any) {
 // 删除沿程配置
 export function deleteBaseWbsb(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/wbsb/delete',
-    method: 'get',
-    params: data
+    url: '/base/msalongb/delete',
+    method: 'post',
+    data
+  });
+}
+// 保存沿程配置子节点
+export function saveBaseWbsbChild(data: any) {
+  return request({
+    url: '/base/msalongb/save',
+    method: 'post',
+    data: data
+  });
+}
+
+export function saveBaseWbsbChildDetail(data: any) {
+  return request({
+    url: '/base/msalongdetb/save',
+    method: 'post',
+    data: data
   });
 }
diff --git a/frontend/src/api/zngj/index.ts b/frontend/src/api/zngj/index.ts
index c7b1bc6b..b4780180 100644
--- a/frontend/src/api/zngj/index.ts
+++ b/frontend/src/api/zngj/index.ts
@@ -3,25 +3,25 @@ import request from '@/utils/request';
 // AI识别大坝环境-获取统计数据（Tab数量）
 export function getAisbdbyxList(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/ai/com/qgcDmRun/GetKendoListCust',
+    url: '/warn/ai/com/qgcDmRun/GetKendoListCust',
     method: 'post',
     data
   });
 }
-
-// AI识别大坝环境-获取饼图+表格数据
+ 
+// AI识别大坝环境-获取饼图+表格数据 /api/wmp-env-server/env/ai/com/GetKendoListCust
 export function getAiChartTable(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/ai/com/GetKendoListCust',
+    url: '/warn/ai/com/GetKendoListCust',
     method: 'post',
     data
   });
 }
 
-// AI识别大坝环境-获取电站列表
+// AI识别大坝环境-获取电站列表 
 export function getAiRstcd(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/ai/com/qgc/aiRstcd/GetKendoListCust',
+    url: '/warn/ai/com/qgc/aiRstcd/GetKendoListCust',
     method: 'post',
     data
   });
@@ -30,7 +30,7 @@ export function getAiRstcd(data: any) {
 // AI识别过鱼设施运行-获取统计数据
 export function getAiGyssList(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/ai/com/qgcProtect/GetKendoListCust',
+    url: '/warn/ai/com/qgcProtect/GetKendoListCust',
     method: 'post',
     data
   });
@@ -39,7 +39,7 @@ export function getAiGyssList(data: any) {
 // 生态流量低于限值告警-获取统计数据
 export function getStllGaojingList(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/warn/stcd/eng/GetKendoListCust',
+    url: '/warn/stcd/eng/GetKendoListCust',
     method: 'post',
     data
   });
@@ -48,7 +48,7 @@ export function getStllGaojingList(data: any) {
 // 生态流量低于限值告警-获取表格详情数据
 export function getStllGaojingDetail(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/warn/stcd/GetKendoListCust',
+    url: '/warn/stcd/GetKendoListCust',
     method: 'post',
     data
   });
@@ -57,7 +57,7 @@ export function getStllGaojingDetail(data: any) {
 // 水质监测数据告警-获取统计数据
 export function getShuizhiGaojingList(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
+    url: '/wq/msstbprpt/GetKendoList',
     method: 'post',
     data
   });
@@ -66,7 +66,7 @@ export function getShuizhiGaojingList(data: any) {
 // AI识别大坝环境-获取漂浮物/清漂日历数据
 export function getAiPfwRecord(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/ai/com/qgc/aiPfwRecord/GetKendoListCust',
+    url: '/warn/ai/com/qgc/aiPfwRecord/GetKendoListCust',
     method: 'post',
     data
   });
@@ -75,16 +75,16 @@ export function getAiPfwRecord(data: any) {
 // AI识别大坝环境-获取叠梁门日历数据
 export function getAiRecord(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/ai/com/qgc/aiRecord/GetKendoListCust',
+    url: '/warn/ai/com/qgc/aiRecord/GetKendoListCust',
     method: 'post',
     data
   });
 }
 
-// AI识别大坝环境-获取日历详情视频数据
+// AI识别大坝环境-获取日历详情视频数据 /warn/ai/com/qgc/aiFile/GetKendoListCust
 export function getAiFile(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/ai/com/qgc/aiFile/GetKendoListCust',
+    url: '/warn/ai/com/qgc/aiFile/GetKendoListCust',
     method: 'post',
     data
   });
diff --git a/frontend/src/api/zzfl/index.ts b/frontend/src/api/zzfl/index.ts
index 426de90f..dcf647e0 100644
--- a/frontend/src/api/zzfl/index.ts
+++ b/frontend/src/api/zzfl/index.ts
@@ -26,7 +26,7 @@ export function overviewGetOverviewSecond(data: any) {
     data
   });
 }
-//增殖站介绍 /api/dec-lygk-base-server/base/msstbprpt/GetKendoList
+//增殖站介绍
 export function msstbprptGetKendoList(data: any) {
   return request({
     url: '/fb/msstbprpt/GetKendoList',
@@ -34,7 +34,7 @@ export function msstbprptGetKendoList(data: any) {
     data
   });
 }
-// 增殖站运行数据统计  
+// 增殖站运行数据统计
 export function qgcgetFbStaticsData(data: any) {
   return request({
     url: '/fb/station/qgc/getFbStaticsData',
@@ -73,4 +73,4 @@ export function msfbrdmGetKendoListCust(data: any) {
     method: 'post',
     data
   });
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/BasicSearch/index.vue b/frontend/src/components/BasicSearch/index.vue
index f8dd431f..1a500565 100644
--- a/frontend/src/components/BasicSearch/index.vue
+++ b/frontend/src/components/BasicSearch/index.vue
@@ -177,7 +177,84 @@
                   </a-select>
                 </a-form-item-rest>
               </div>
+              <!-- 基地电站下拉框 -->
 
+              <div
+                class="flex gap-[10px]"
+                v-else-if="item.type === 'jidiData'"
+              >
+                <a-form-item-rest>
+                  <!-- 基地下拉框 -->
+                  <a-select
+                    :value="formData[item.name]"
+                    placeholder="请选择"
+                    @change="val => dataDimensionDataChange(val, item.name)"
+                    show-search
+                    allow-clear
+                    :loading="shuJuTianBaoStore.baseLoading"
+                    :filter-option="filterOption"
+                    style="width: 135px"
+                  >
+                    <a-select-option
+                      v-for="opt in shuJuTianBaoStore.baseOption"
+                      :key="opt.baseid"
+                      :value="opt.baseid"
+                      :label="opt.basename"
+                    >
+                      {{ opt.basename }}
+                    </a-select-option>
+                  </a-select>
+                  <!-- 电站下拉框 -->
+                  <a-select
+                    v-if="props.zhujianfujian == 'fu'"
+                    :value="formData.rstcd"
+                    placeholder="请选择电站"
+                    @change="stcdIdChange"
+                    show-search
+                    allow-clear
+                    :loading="shuJuTianBaoStore.engLoading"
+                    :filter-option="filterOption"
+                    style="width: 135px"
+                    :dropdown-style="{
+                      maxHeight: '400px',
+                      overflow: 'auto',
+                      minWidth: '300px'
+                    }"
+                  >
+                    <a-select-option
+                      v-for="opt in shuJuTianBaoStore.engOption"
+                      :key="opt.stcd"
+                      :value="opt.stcd"
+                      :label="opt.ennm"
+                      :title="opt.ennm + ',' + opt.reachcdName"
+                      :reachcdName="opt.reachcdName"
+                    >
+                      {{ opt.ennm }},{{ opt.reachcdName }}
+                    </a-select-option>
+                  </a-select>
+                  <!-- 电站下拉框 -->
+                  <a-select
+                    v-if="props.zhujianfujian == 'zhu'"
+                    :value="formData.stcd"
+                    placeholder="请选择电站"
+                    @change="stcdIdChange"
+                    show-search
+                    allow-clear
+                    :loading="shuJuTianBaoStore.engLoading"
+                    :filter-option="filterOption"
+                    style="width: 135px"
+                  >
+                    <a-select-option
+                      v-for="opt in shuJuTianBaoStore.engOption"
+                      :key="opt.stcd"
+                      :value="opt.stcd"
+                      :label="opt.ennm"
+                    >
+                      {{ opt.ennm }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item-rest>
+              </div>
               <!-- 下拉选择 -->
               <!-- <div v-else-if="item.type === 'Select'">
              <div v-for="i in  item.options"> {{ i[item.values?.name] }} {{ i[item.values?.value] }}</div>
@@ -219,6 +296,7 @@
                     children: 'children'
                   }
                 "
+                :filterTreeNode="filterTreeNode"
                 :show-search="item.showSearch !== false"
                 :tree-checkable="item.treeCheckable"
                 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@@ -333,12 +411,15 @@ const formData = reactive<any>({});
 const rules = reactive<Record<string, any>>({});
 
 const filterOption = (inputValue: string, option: any) => {
-  const label = option.label || '';
+  const label = option.label || option.name || '';
   const reachcdName = option.reachcdName || '';
   const keyword = inputValue || '';
 
   return label.indexOf(keyword) !== -1 || reachcdName.indexOf(keyword) !== -1;
 };
+const filterTreeNode = (inputValue: string, option: any) => {
+  return filterOption(inputValue, option);
+};
 // 2. 创建计算属性，自动过滤掉 false/null/undefined 的项
 const validSearchList = computed(() => {
   return props.searchList.filter(item => item);
@@ -358,9 +439,13 @@ const initForm = () => {
   validSearchList.value.forEach(item => {
     if (item.type == 'waterStation') {
       // 下拉菜单
-      // shuJuTianBaoStore.getBaseOption();
+      shuJuTianBaoStore.getBaseOption();
       shuJuTianBaoStore.getSelectForOption();
-      shuJuTianBaoStore.getEngOption(formData.rvcd);
+      shuJuTianBaoStore.getEngOption(formData.rvcd,'rvcd');
+    }
+    if (item.type == 'jidiData') {
+      shuJuTianBaoStore.getBaseOption();
+      shuJuTianBaoStore.getEngOption(formData[item.name] || 'all','baseId');
     }
     if (item.fieldProps?.required) {
       rules[item.name] = [
@@ -383,19 +468,19 @@ const triggerManualValuesChange = (changedKey: string, newValue: any) => {
   emit('valuesChange', changedValues, { ...formData });
 };
 
-// const dataDimensionDataChange = (value: any) => {
-//   formData.baseId = value;
-//   formData.rstcd = "";
-//   shuJuTianBaoStore.getEngOption(formData.baseId);
-
-//   // 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
-//   triggerManualValuesChange("baseId", formData.baseId);
-// };
+const dataDimensionDataChange = (value: any, fieldName: string = 'baseId') => {
+  formData[fieldName] = value;
+  formData.rstcd = "";
+  shuJuTianBaoStore.getEngOption(value,'baseId');
+ triggerManualValuesChange('baseId', formData.baseId);
+  // 一次性触发所有变更通知，避免多次调用
+  // emit('valuesChange', { [fieldName]: value, rstcd: "" }, { ...formData });
+};
 
 const lyChange = (value: any) => {
   formData.rvcd = value;
   formData.rstcd = '';
-  shuJuTianBaoStore.getEngOption(formData.rvcd);
+  shuJuTianBaoStore.getEngOption(formData.rvcd,'rvcd');
 
   // 【关键修改】手动触发 valuesChange，因为 a-form-item-rest 阻断了自动监听
   triggerManualValuesChange('rvcd', formData.rvcd);
@@ -404,12 +489,12 @@ const lyChange = (value: any) => {
 const stcdIdChange = (value: any) => {
   if (props.zhujianfujian == 'fu') {
     formData.rstcd = value;
-    shuJuTianBaoStore.getFpssOption(formData.rvcd, value);
+    shuJuTianBaoStore.getFpssOption(formData.baseId, value);
     // 【关键修改】手动触发 valuesChange
     triggerManualValuesChange('rstcd', formData.rstcd);
   } else {
     formData.stcd = value;
-    shuJuTianBaoStore.getFpssOption(formData.rvcd, value);
+    shuJuTianBaoStore.getFpssOption(formData.baseId, value);
     // 【关键修改】手动触发 valuesChange
     triggerManualValuesChange('stcd', formData.stcd);
   }
diff --git a/frontend/src/components/BasicTable/index.vue b/frontend/src/components/BasicTable/index.vue
index 02cbdb1f..5f5d7990 100644
--- a/frontend/src/components/BasicTable/index.vue
+++ b/frontend/src/components/BasicTable/index.vue
@@ -638,7 +638,12 @@ const enhancedColumns = computed(() => {
         ellipsis: true,
         customRender: ({ text }: { text: any }) => {
           // 如果 text 是空值，直接返回占位符
-          if (text === null || text === undefined || text === '') {
+          if (
+            text === null ||
+            text === undefined ||
+            text === '' ||
+            text === '-'
+          ) {
             return props.emptyPlaceholder;
           }
           // 使用 h 函数创建 Tooltip
diff --git a/frontend/src/components/FishResource/FishResourceSearch.vue b/frontend/src/components/FishResource/FishResourceSearch.vue
new file mode 100644
index 00000000..653c2438
--- /dev/null
+++ b/frontend/src/components/FishResource/FishResourceSearch.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="approval-search">
+    <BasicSearch
+      ref="basicSearchRef"
+      :searchList="searchList"
+      :initial-values="initSearchData"
+      :zhujianfujian="'fu'"
+      @reset="handleResetWrapper"
+      @finish="onSearchFinish"
+      @values-change="onValuesChange"
+      ><template #jcdt>
+        <a-date-picker
+          class="w-[120px]"
+          v-model:value="jcdt.min"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="起始时间"
+          :showToday="false"
+        >
+          <template #renderExtraFooter>
+            <div class="flex items-center flex-wrap px-2">
+              <span
+                v-for="item in DateSetting.RangeButton.days1"
+                :key="item"
+                @click="handleRangeClick(item)"
+              >
+                <a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
+              </span>
+            </div>
+          </template>
+        </a-date-picker>
+        至
+        <a-form-item-rest>
+          <a-date-picker
+            class="w-[120px]"
+            v-model:value="jcdt.max"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :disabledDate="disabledEndDate"
+            placeholder="结束时间"
+            :showToday="false"
+          >
+            <template #renderExtraFooter>
+              <div class="flex items-center flex-wrap px-2">
+                <span
+                  v-for="item in DateSetting.RangeButton.days1"
+                  :key="item"
+                  @click="handleRangeClick(item)"
+                >
+                  <a class="text-[#1890ff] mr-1"> {{ item.label }}</a>
+                </span>
+              </div>
+            </template>
+          </a-date-picker>
+        </a-form-item-rest>
+      </template>
+      <template #actions>
+        <a-button :loading="exportLoading" @click="exportBtn">导出</a-button>
+      </template>
+    </BasicSearch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue';
+import dayjs from 'dayjs';
+import BasicSearch from '@/components/BasicSearch/index.vue';
+import { DateSetting } from '@/utils/enumeration';
+import { useTimeScale } from '@/store/composables/useTimeScale';
+import { getFishReleaseMonitorSectionList } from '@/api/DataQueryMenuModule';
+
+const emit = defineEmits<{
+  (e: 'export-btn'): void;
+  (e: 'reset', values: any): void;
+  (e: 'search-finish', values: any): void;
+}>();
+
+const basicSearchRef = ref<any>();
+const btnLoading = ref<boolean>(false);
+
+const props = defineProps<{
+  exportLoading?: boolean;
+  modalData: any;
+}>();
+const initSearchData = {
+  baseId: props.modalData.baseid ?? 'all',
+  rstcd: null,
+  stcd: '',
+  mway: '1'
+};
+
+const searchData = ref<any>({ ...initSearchData });
+
+const {
+  jcdt,
+  currentTimeScale,
+  handleRangeClick,
+  disabledEndDate,
+  handleSearchFinish,
+  handleValuesChange,
+  init,
+  setDefaultTimeRange
+} = useTimeScale({
+  defaultTimeScale: initSearchData.timeScale,
+  onSearchFinish: values => emit('search-finish', values),
+  onReset: () => emit('reset', initSearchData)
+});
+const crossSectionListLoading = ref<any>(false);
+const crossSectionList = ref<any>([]);
+
+const searchList: any = computed(() => [
+  //   {
+  //     type: 'waterStation',
+  //     name: 'rvcd',
+  //     label: '流域',
+  //     placeholder: '请输入流域名称',
+  //     fieldProps: {
+  //       allowClear: true
+  //     },
+  //     options: []
+  //   },
+  {
+    type: 'jidiData',
+    name: 'baseId',
+    label: '水电基地',
+    placeholder: '请输入水电基地名称',
+    fieldProps: {
+      allowClear: true
+    },
+    options: []
+  },
+  {
+    type: 'Select',
+    name: 'stcd',
+    label: '过鱼设施名称',
+    width: 200,
+    placeholder: '请选择过鱼设施名称',
+    fieldProps: {
+      allowClear: true
+    },
+    loading: crossSectionListLoading.value,
+    options: crossSectionList.value.map(item => ({
+      label: item.stnm,
+      value: item.stcd
+    }))
+  },
+  {
+    type: 'Radio',
+    name: 'mway',
+    label: '数据类型',
+    width: 140,
+    options: [
+      {
+        label: '人工',
+        value: '1'
+      },
+      {
+        label: '自动',
+        value: '2'
+      }
+    ]
+  },
+  {
+    type: 'custom',
+    name: 'jcdt',
+    label: '时间',
+    fieldProps: {
+      allowClear: false
+    }
+  }
+]);
+
+const onSearchFinish = (values: any) => {
+  handleSearchFinish(values);
+};
+
+const exportBtn = () => {
+  emit('export-btn');
+};
+const initCrossSectionList = params => {
+  const filters = [];
+  if (params) {
+    if (params.baseId != '' && params.baseId != 'all') {
+      filters.push({
+        field: 'baseId',
+        operator: 'contains',
+        dataType: 'string',
+        value: params.baseId
+      });
+    }
+    if (params.rstcd != '' && params.rstcd != null) {
+      filters.push({
+        field: 'rstcd',
+        operator: 'contains',
+        dataType: 'string',
+        value: params.rstcd
+      });
+    }
+  }
+  crossSectionListLoading.value = true;
+  getFishReleaseMonitorSectionList({
+    filter: {
+      logic: 'and',
+      filters: filters
+    },
+    select: ['stcd', 'stnm', 'wtDeviceType', 'dtinType', 'mway']
+  }).then(res => {
+    if (res.data?.data) {
+      crossSectionList.value = res.data?.data;
+    }
+    crossSectionListLoading.value = false;
+  });
+};
+
+const onValuesChange = (changedValues: any, allValues: any) => {
+  // 当基地或断面变化时，清空过鱼设施选中并重新请求列表
+  if ('baseId' in changedValues || 'rstcd' in changedValues) {
+    allValues.stcd = null;
+    if (basicSearchRef.value?.formData) {
+      basicSearchRef.value.formData.stcd = null;
+    }
+    initCrossSectionList(allValues);
+  }
+
+  handleValuesChange(changedValues, allValues);
+  searchData.value = { ...searchData.value, ...allValues };
+};
+
+const handleResetWrapper = () => {
+  // 手动重置内部状态，避免触发两次请求
+  currentTimeScale.value = initSearchData.timeScale;
+  const now = dayjs();
+  if (props.modalData.year) {
+    jcdt.value = {
+      min: `${props.modalData.year}-01-01 00:00:00`,
+      max: `${props.modalData.year}-12-31 23:59:59`
+    };
+  } else {
+    jcdt.value = {
+      min: `${now
+        .subtract(5, 'year')
+        .startOf('year')
+        .format('YYYY-MM-DD')} 00:00:00`,
+      max: `${now.endOf('year').format('YYYY-MM-DD')} 23:59:59`
+    };
+  }
+
+  setDefaultTimeRange(initSearchData.timeScale);
+  // 触发搜索，使用当前状态而非 initSearchData
+  handleSearchFinish({
+    ...initSearchData
+  });
+};
+
+defineExpose({
+  btnLoading,
+  searchData
+});
+
+onMounted(() => {
+  init();
+  // 设置默认年份：前一年到当前年
+  const now = dayjs();
+  if (props.modalData.year) {
+    jcdt.value = {
+      min: `${props.modalData.year}-01-01 00:00:00`,
+      max: `${props.modalData.year}-12-31 23:59:59`
+    };
+  } else {
+    jcdt.value = {
+      min: `${now.subtract(5, 'year').format('YYYY-MM-DD')} 00:00:00`,
+      max: `${now.format('YYYY-MM-DD')} 23:59:59`
+    };
+  }
+
+  initCrossSectionList();
+  // 使用 handleSearchFinish 确保包含 jcdt 等完整参数
+  handleSearchFinish({ ...initSearchData });
+});
+</script>
+
+<style lang="scss"></style>
diff --git a/frontend/src/components/FishResource/index.vue b/frontend/src/components/FishResource/index.vue
new file mode 100644
index 00000000..c7145466
--- /dev/null
+++ b/frontend/src/components/FishResource/index.vue
@@ -0,0 +1,554 @@
+<template>
+  <div class="w-full h-full flex flex-col" style="height:calc(60vh)">
+    <!-- 搜索组件 -->
+    <FishDataSearch
+      @export-btn="exportBtn"
+      @search-finish="onSearchFinish"
+      @reset="onReset"
+      :exportLoading="exportLoading"
+      :modalData = "props.modalData"
+      ref="searchRef"
+    />
+    <!-- 表格组件 -->
+    <BasicTable
+      ref="tableRef"
+      :scrollX="tableScrollX"
+      :scrollY="tableScrollY"
+      :columns="tableColumns"
+      :list-url="getFishReleaseMonitorList"
+      :searchParams="{
+        sort: sort
+      }"
+    >
+    </BasicTable>
+
+    <!-- 图片预览弹框 -->
+    <a-modal
+      v-model:open="imagePreviewVisible"
+      title="图片预览"
+      :footer="null"
+      width="800px"
+    >
+      <div style="text-align: center">
+        <img :src="previewImageUrl" style="width: 100%; height: 600px" />
+      </div>
+    </a-modal>
+
+    <!-- 视频预览弹框 -->
+    <a-modal
+      v-model:open="videoPreviewVisible"
+      title="视频预览"
+      :footer="null"
+      width="800px"
+    >
+      <div style="text-align: center">
+        <video
+          :src="previewVideoUrl"
+          controls
+          style="width: 100%; height: 600px"
+        ></video>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick, h } from 'vue';
+import dayjs from 'dayjs';
+import { Button } from 'ant-design-vue';
+import FishDataSearch from './FishResourceSearch.vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import { getFishReleaseMonitorList } from '@/api/DataQueryMenuModule';
+import { calcTableScrollY } from '@/utils/index';
+import { useDraggable } from '@/utils/drag';
+const props = defineProps<{
+  modalData?: any;
+}>();
+const sort = ref<any>([
+  {
+    field: 'baseStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'rvcdStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'rstcdStepSort',
+    dir: 'asc'
+  },
+  {
+    field: 'ttpwr',
+    dir: 'asc'
+  },
+  {
+    field: 'tm',
+    dir: 'desc'
+  }
+]);
+const tableRef = ref();
+const searchRef = ref();
+const tableScrollY = ref<string | number>(0);
+const currentSearchParams = ref<any>({});
+const exportLoading = ref(false);
+
+// 图片预览
+const imagePreviewVisible = ref(false);
+const previewImageUrl = ref('');
+// 视频预览
+const videoPreviewVisible = ref(false);
+const previewVideoUrl = ref('');
+useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
+useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
+const openImagePreview = (url: string) => {
+  previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
+  imagePreviewVisible.value = true;
+};
+
+const openVideoPreview = (url: string) => {
+  previewVideoUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
+  videoPreviewVisible.value = true;
+};
+
+const tableScrollX = computed(() =>
+  Math.max(
+    tableColumns.value.reduce(
+      (sum: number, col: any) => sum + (col.width || 180),
+      0
+    ),
+    600
+  )
+);
+
+// 人工列
+const columnsManual: any[] = [
+  {
+    key: 'stnm',
+    title: '电站名称',
+    dataIndex: 'stnm',
+    visible: true,
+    width: 200,
+    sort: true,
+    merge: true
+  },
+  {
+    key: 'baseName',
+    title: '所属基地',
+    dataIndex: 'baseName',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'stnm',
+    title: '过鱼设施名称',
+    dataIndex: 'stnm',
+    sort: true,
+    width: 200
+  },
+  {
+    key: 'strdt',
+    title: '开始时间',
+    dataIndex: 'strdt',
+    sort: true,
+    width: 100,
+    customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD') || '-'
+  },
+  {
+    key: 'enddt',
+    title: '结束时间',
+    dataIndex: 'enddt',
+    sort: true,
+    width: 100,
+    customRender: ({ text }) => dayjs(text).format('YYYY-MM-DD') || '-'
+  },
+  {
+    key: 'tm',
+    title: '填报时间',
+    dataIndex: 'tm',
+    sort: true,
+    width: 160
+  },
+  {
+    key: 'ftp',
+    title: '鱼种类',
+    dataIndex: 'ftp',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'fcnt',
+    title: '过鱼数量(尾)',
+    dataIndex: 'fcnt',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'directionName',
+    title: '鱼游向',
+    dataIndex: 'directionName',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'fsz',
+    title: '鱼类规格',
+    dataIndex: 'fsz',
+    sort: true,
+    width: 160
+  },
+  {
+    key: 'firstimgurl',
+    title: '图片',
+    dataIndex: 'firstimgurl',
+    align: 'center',
+    width: 110,
+    customRender: ({ text }: any) => {
+      const hasValidUrl =
+        text &&
+        text !== '-' &&
+        text.trim() !== '' &&
+        text !== 'null' &&
+        text !== 'undefined';
+      return h(
+        Button,
+        {
+          type: 'link',
+          disabled: !hasValidUrl,
+          style: {
+            color: !hasValidUrl ? '#ccc' : '#1890ff',
+            cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
+          },
+          onClick: () => {
+            if (hasValidUrl) {
+              openImagePreview(text);
+            }
+          }
+        },
+        () => '查看图片'
+      );
+    }
+  },
+  {
+    key: 'videourl',
+    title: '视频',
+    dataIndex: 'videourl',
+    align: 'center',
+    width: 110,
+    customRender: ({ text }: any) => {
+      const hasValidUrl =
+        text &&
+        text !== '-' &&
+        text.trim() !== '' &&
+        text !== 'null' &&
+        text !== 'undefined';
+      return h(
+        Button,
+        {
+          type: 'link',
+          disabled: !hasValidUrl,
+          style: {
+            color: !hasValidUrl ? '#ccc' : '#1890ff',
+            cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
+          },
+          onClick: () => {
+            if (hasValidUrl) {
+              openVideoPreview(text);
+            }
+          }
+        },
+        () => '查看视频'
+      );
+    }
+  }
+];
+
+// 自动列
+const columnsAuto: any[] = [
+  {
+    key: 'stnm',
+    title: '电站名称',
+    dataIndex: 'stnm',
+    visible: true,
+    width: 200,
+    sort: true,
+    merge: true
+  },
+  {
+    key: 'baseName',
+    title: '所属基地',
+    dataIndex: 'baseName',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'stnm',
+    title: '过鱼设施名称',
+    dataIndex: 'stnm',
+    sort: true,
+    width: 200
+  },
+  {
+    key: 'tm',
+    title: '时间',
+    dataIndex: 'tm',
+    sort: true,
+    width: 160
+  },
+  {
+    key: 'ftp',
+    title: '鱼种类',
+    dataIndex: 'ftp',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'length',
+    title: '鱼长度(cm)',
+    dataIndex: 'length',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'width',
+    title: '鱼宽度(cm)',
+    dataIndex: 'width',
+    sort: true,
+    width: 120,
+    customRender: ({ text }: any) => {
+      const num = parseFloat(text);
+      return isNaN(num) ? '-' : num.toFixed(2);
+    }
+  },
+  {
+    key: 'fishspeed',
+    title: '鱼速度(m/s)',
+    dataIndex: 'fishspeed',
+    sort: true,
+    width: 80,
+    customRender: ({ text }: any) => {
+      const num = parseFloat(text);
+      return isNaN(num) ? '-' : num.toFixed(2);
+    }
+  },
+  {
+    key: 'directionName',
+    title: '鱼游向',
+    dataIndex: 'directionName',
+    sort: true,
+    width: 160
+  },
+  {
+    key: 'temperature',
+    title: '水温(℃)',
+    dataIndex: 'temperature',
+    sort: true,
+    width: 160,
+    customRender: ({ text }: any) => {
+      const num = parseFloat(text);
+      return isNaN(num) ? '-' : num.toFixed(1);
+    }
+  },
+  {
+    key: 'speed',
+    title: '流速(m/s)',
+    dataIndex: 'speed',
+    sort: true,
+    width: 160,
+    customRender: ({ text }: any) => {
+      const num = parseFloat(text);
+      return isNaN(num) ? '-' : num.toFixed(2);
+    }
+  },
+  {
+    key: 'fcnt',
+    title: '过鱼数量(尾)',
+    dataIndex: 'fcnt',
+    sort: true,
+    width: 120
+  },
+  {
+    key: 'channelno',
+    title: '过鱼通道',
+    dataIndex: 'channelno',
+    sort: true,
+    width: 140
+  },
+  {
+    key: 'firstimgurl',
+    title: '轮廓图',
+    dataIndex: 'firstimgurl',
+    align: 'center',
+    width: 110,
+    customRender: ({ text }: any) => {
+      const hasValidUrl =
+        text &&
+        text !== '-' &&
+        text.trim() !== '' &&
+        text !== 'null' &&
+        text !== 'undefined';
+      return h(
+        Button,
+        {
+          type: 'link',
+          disabled: !hasValidUrl,
+          style: {
+            color: !hasValidUrl ? '#ccc' : '#1890ff',
+            cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
+          },
+          onClick: () => {
+            if (hasValidUrl) {
+              openImagePreview(text);
+            }
+          }
+        },
+        () => '查看图片'
+      );
+    }
+  },
+  {
+    key: 'videourl',
+    title: '短视频',
+    dataIndex: 'videourl',
+    align: 'center',
+    width: 110,
+    customRender: ({ text }: any) => {
+      const hasValidUrl =
+        text &&
+        text !== '-' &&
+        text.trim() !== '' &&
+        text !== 'null' &&
+        text !== 'undefined';
+      return h(
+        Button,
+        {
+          type: 'link',
+          disabled: !hasValidUrl,
+          style: {
+            color: !hasValidUrl ? '#ccc' : '#1890ff',
+            cursor: !hasValidUrl ? 'not-allowed' : 'pointer'
+          },
+          onClick: () => {
+            if (hasValidUrl) {
+              openVideoPreview(text);
+            }
+          }
+        },
+        () => '查看视频'
+      );
+    }
+  }
+];
+
+// 根据数据类型动态切换列
+const tableColumns = computed(() => {
+  const mway = currentSearchParams.value.mway;
+  return mway === '2' ? columnsAuto : columnsManual;
+});
+
+const onSearchFinish = async (values: any) => {
+  currentSearchParams.value = values;
+  // 等待 prop 更新后再调用 getList
+  await nextTick();
+  initTable(values);
+};
+
+const onReset = async (values: any) => {
+  currentSearchParams.value = values;
+  await nextTick();
+  initTable(values);
+};
+
+const exportBtn = () => {
+  if (exportLoading.value) return;
+
+  exportLoading.value = true;
+  searchRef.value.btnLoading = true;
+
+  tableRef.value
+    .exportTable({
+      fileName: `过鱼监测数据_${dayjs().format('YYYY-MM-DD HH-mm-ss')}`
+    })
+    .finally(() => {
+      exportLoading.value = false;
+      searchRef.value.btnLoading = false;
+    });
+};
+
+const initTable = (values: any) => {
+  console.log(values);
+  const filters = [
+    values.baseId && values.baseId !== 'all'
+      ? {
+          field: 'baseId',
+          operator: 'contains',
+          dataType: 'string',
+          value: values.baseId
+        }
+      : null,
+    values.rstcd
+      ? {
+          field: 'rstcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: values.rstcd
+        }
+      : null,
+    values.mway
+      ? {
+          field: 'mway',
+          operator: 'eq',
+          dataType: 'string',
+          value: values.mway
+        }
+      : null
+  ].filter(Boolean); // 移除空项
+  if (values.stcd) {
+    filters.push({
+      logic: 'or',
+      filters: [
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: values.stcd
+        },
+        {
+          field: 'stcode',
+          operator: 'eq',
+          dataType: 'string',
+          value: values.stcd
+        }
+      ]
+    });
+  }
+  if (values.jcdt) {
+    filters.push(
+      {
+        field: 'tm',
+        operator: 'gte',
+        dataType: 'date',
+        value: dayjs(values.jcdt.min).format('YYYY-MM-DD HH:mm:ss')
+      },
+      {
+        field: 'tm',
+        operator: 'lte',
+        dataType: 'date',
+        value: dayjs(values.jcdt.max).format('YYYY-MM-DD HH:mm:ss')
+      }
+    );
+  }
+
+  const params = {
+    logic: 'and',
+    filters
+  };
+  tableRef.value.getList(params);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    tableScrollY.value = calcTableScrollY();
+  });
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/components/MapModal/components/AIYXSB/index.vue b/frontend/src/components/MapModal/components/AIYXSB/index.vue
index 8812edf6..921b2525 100644
--- a/frontend/src/components/MapModal/components/AIYXSB/index.vue
+++ b/frontend/src/components/MapModal/components/AIYXSB/index.vue
@@ -136,7 +136,6 @@
         @panel-change="handleCalendarPanelChange"
         @select="handleCalendarSelect"
       >
-        <template #headerRender="{ current }"> </template>
         <template #dateCellRender="{ current }">
           <div class="calendar-content">
             <template v-if="isCurrentMonth(current)">
@@ -246,6 +245,7 @@ import { useModelStore } from '@/store/modules/model';
 import videoCover from '@/assets/images/videFm.jpg';
 import MediaViewer from './MediaViewer.vue';
 import AttachmentPreview from './AttachmentPreview.vue';
+import { useDraggable } from '@/utils/drag';
 
 const modelStore = useModelStore();
 
@@ -876,7 +876,8 @@ const notRunningMediaViewerRef = ref();
 // 附件预览弹窗
 const attachmentModalVisible = ref(false);
 const currentAttachmentFid = ref('');
-
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(attachmentModalVisible, { boundary: true, resetOnOpen: true });
 // 查看附件
 const handleViewAttachment = (record: any) => {
   if (!record.fid) {
diff --git a/frontend/src/components/MapModal/components/BasicInfo.vue b/frontend/src/components/MapModal/components/BasicInfo.vue
index c66884fa..70a185dd 100644
--- a/frontend/src/components/MapModal/components/BasicInfo.vue
+++ b/frontend/src/components/MapModal/components/BasicInfo.vue
@@ -152,7 +152,7 @@ import { getStcdDetail } from '@/api/mapModal';
 const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 const modelStore = useModelStore();
 const hasLoaded = ref(false); // 标记是否已经请求过
-
+import { useDraggable } from '@/utils/drag';
 const props = defineProps({
   url: {
     type: String,
@@ -168,6 +168,7 @@ const isLogo = ref(false);
 const loading = ref(false);
 const data2: any = ref({});
 const tabledata = ref([]);
+useDraggable(visible, { boundary: true, resetOnOpen: true });
 const columnsConfig = ref([
   {
     type: 'ENG',
diff --git a/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue b/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
index e3e3bb4c..a9e993cb 100644
--- a/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
+++ b/frontend/src/components/MapModal/components/FishFacilityMonitorData.vue
@@ -56,6 +56,7 @@ import { getMonitorDataFpq, getMonitorDataOnline } from '@/api/mapModal';
 import { useModelStore } from '@/store/modules/model';
 import { DateSetting } from '@/utils/enumeration';
 import dayjs from 'dayjs';
+import { useDraggable } from '@/utils/drag';
 
 const loading = ref(false);
 const modelStore = useModelStore();
@@ -72,7 +73,8 @@ const previewImageUrl = ref('');
 // 视频预览
 const videoPreviewVisible = ref(false);
 const previewVideoUrl = ref('');
-
+useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
+useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
 const openImagePreview = (url: string) => {
   previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
   imagePreviewVisible.value = true;
diff --git a/frontend/src/components/MapModal/components/FishFacilityRunState.vue b/frontend/src/components/MapModal/components/FishFacilityRunState.vue
index 9354ccfb..f93afe69 100644
--- a/frontend/src/components/MapModal/components/FishFacilityRunState.vue
+++ b/frontend/src/components/MapModal/components/FishFacilityRunState.vue
@@ -102,6 +102,7 @@ import { getDictItemsByCode } from '@/api/dict';
 import { getFishDictoryDropdown } from '@/api/select';
 import { useModelStore } from '@/store/modules/model';
 import dayjs from 'dayjs';
+import { useDraggable } from '@/utils/drag';
 
 const loading = ref(false);
 const modelStore = useModelStore();
@@ -125,7 +126,8 @@ const previewImageUrl = ref('');
 // 视频预览
 const videoPreviewVisible = ref(false);
 const currentVideoUrl = ref('');
-
+useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
+useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
 // 鱼类搜索过滤
 const filterFtpOption = (input: string, option: any) => {
   console.log('filterOption', input, option);
diff --git a/frontend/src/components/MapModal/components/FlowMeasure.vue b/frontend/src/components/MapModal/components/FlowMeasure.vue
index b3908191..b5d619ef 100644
--- a/frontend/src/components/MapModal/components/FlowMeasure.vue
+++ b/frontend/src/components/MapModal/components/FlowMeasure.vue
@@ -79,6 +79,7 @@ import { queryPostUrlList } from '@/api/mapModal';
 import { useModelStore } from '@/store/modules/model';
 import BasicTable from '@/components/BasicTable/index.vue';
 import { DateSetting } from '@/utils/enumeration';
+import { useDraggable } from '@/utils/drag';
 
 const modelStore = useModelStore();
 
@@ -102,7 +103,7 @@ let chartInstance: echarts.ECharts | null = null;
 const videoModalVisible = ref(false);
 const videoModalTitle = ref('');
 const currentVideoUrl = ref('');
-
+useDraggable(videoModalVisible, { boundary: true, resetOnOpen: true });
 const tabsList = [{ name: '流量监测', key: 'flowMeasure' }];
 const activeTabKey = ref('flowMeasure');
 
diff --git a/frontend/src/components/MapModal/components/NormalOperationData/index.vue b/frontend/src/components/MapModal/components/NormalOperationData/index.vue
index 432b1a4f..e99ef6b4 100644
--- a/frontend/src/components/MapModal/components/NormalOperationData/index.vue
+++ b/frontend/src/components/MapModal/components/NormalOperationData/index.vue
@@ -110,6 +110,7 @@ import {
   type OperationFilterField,
   type OperationTableItem
 } from './operationConfig';
+import { useDraggable } from '@/utils/drag';
 
 const props = defineProps({
   isActive: { type: Boolean, default: false }
@@ -141,6 +142,7 @@ const loadYear = ref(false);
 const loadFtp = ref(false);
 const tableRef = ref();
 const attachmentModalVisible = ref(false);
+useDraggable(attachmentModalVisible, { boundary: true, resetOnOpen: true });
 const currentAttachmentFid = ref('');
 const fieldOptionsMap = reactive<Record<string, OperationFilterOption[]>>({});
 const selectLoadingMap = reactive<Record<string, boolean>>({});
diff --git a/frontend/src/components/MapModal/index.vue b/frontend/src/components/MapModal/index.vue
index d853621b..8773b3c1 100644
--- a/frontend/src/components/MapModal/index.vue
+++ b/frontend/src/components/MapModal/index.vue
@@ -247,7 +247,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, toRef } from 'vue';
 // 导入预定义的 Tab 内容组件
 import BasicInfo from './components/BasicInfo.vue'; // 基本信息
 import VideoInfo from './components/videoInfo.vue'; // 实时视频
@@ -300,6 +300,7 @@ import {
   getMonitorDataWaterTempPowerStation2,
   checkPowerStationTopic
 } from '@/api/mapModal';
+import { useDraggable } from '@/utils/drag';
 // import { useRouter } from 'vue-router';
 
 const modelStore = useModelStore();
@@ -601,7 +602,6 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
     };
     const res2 = await getVideoList(params);
     console.log('', modelStore.params.sttp);
-    //  
     if (
       res2?.data?.data?.length > 0 ||
       res2?.data?.records?.length > 0 ||
@@ -645,17 +645,10 @@ const applyTabFilters = async (params: any) => {
     } else if (isLCJ && sttpCode === 'WE') {
       // LCJ 鱼类栖息地数据类型检查
       await checkFishTab(stcd);
-    } else if (
-      ( sttpCode === 'WQ') ||
-      sttpCode === 'WQFB' ||
-      sttpCode === 'wq'
-    ) {
+    } else if (sttpCode === 'WQ' || sttpCode === 'WQFB' || sttpCode === 'wq') {
       // 水质 AI 预测检查（React 逻辑：WQ 需要条件，WQFB/wq 无条件）
       await checkAnalysisAvailability(stcd);
-    } else if (
-      ( sttpCode === 'WT') ||
-      sttpCode === 'wt'
-    ) {
+    } else if (sttpCode === 'WT' || sttpCode === 'wt') {
       // 水温站特殊处理（React 逻辑：WT 需要条件，wt 无条件）
       await checkWaterTempConfig(stcd);
     } else if (
@@ -841,6 +834,8 @@ const props = defineProps<{
   data?: any; // 可选：传递给内部组件的数据
 }>();
 
+// 启用弹窗拖拽（限制在可视区域内）
+useDraggable(toRef(props, 'visible'), { boundary: true, resetOnOpen: true });
 // 定义 Emits
 // 添加 'update:activeKey' 以支持 v-model:active-key
 const emit = defineEmits<{
diff --git a/frontend/src/components/developStatusChart/index.vue b/frontend/src/components/developStatusChart/index.vue
index 235a8a25..70c329da 100644
--- a/frontend/src/components/developStatusChart/index.vue
+++ b/frontend/src/components/developStatusChart/index.vue
@@ -2,6 +2,23 @@
 <template>
     <div class="basic_body">
         <div ref="chartContainer" class="chart-container"></div>
+ 
+        <!-- 水电开发情况弹窗 -->
+        <a-modal
+            v-model:open="modalVisible"
+            title="水电开发情况"
+            width="80%"
+            :footer="null"
+            :destroy-on-close="true"
+        >
+            <ShuiDianKaiFQKTwoLayer
+                v-if="modalVisible"
+                :defaultJidiInfo="modalProps.defaultJidiInfo"
+                :seriesName="modalProps.seriesName"
+                :stateName="modalProps.stateName"
+                :defaultTab="modalProps.defaultTab"
+            />
+        </a-modal>
     </div>
 </template>
 
@@ -10,21 +27,31 @@ import { ref, onMounted, onUnmounted, watch } from 'vue';
 import * as echarts from 'echarts';
 import { getVmsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
-
+import ShuiDianKaiFQKTwoLayer from '@/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
+import { useDraggable } from '@/utils/drag';
 defineOptions({
     name: 'developStatusChart'
 });
 
-const emit = defineEmits<{
-    (e: 'chart-click', params: any): void;
-}>();
-
 const JidiSelectEventStore = useJidiSelectEventStore();
 const baseid = ref('');
 const chartContainer = ref<HTMLDivElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 const dataLoading = ref(false);
 
+const modalVisible = ref(false);
+const modalProps = ref<any>({});
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+function openModal(props: any) {
+    modalProps.value = props;
+    modalVisible.value = true;
+}
+
+defineExpose({
+    openModal,
+    dataLoading
+});
+
 onUnmounted(() => {
     if (chartInstance) {
         chartInstance.dispose();
@@ -75,7 +102,6 @@ const getData = async () => {
 
         const res1Data = res1?.data?.data || [];
         const res2Data = res2?.data?.data || [];
-        // debugger
 
         if (res1Data.length > 0 || res2Data.length > 0) {
             const ttpwrlist = res1Data.map((item: any) => ({
@@ -234,12 +260,16 @@ const initChart = () => {
 
     chartInstance.setOption(option);
 
-    // 添加点击事件
     chartInstance.on('click', (params: any) => {
-        emit('chart-click', {
+        const currentJidiInfo = JidiSelectEventStore.selectedItem;
+        openModal({
+            defaultJidiInfo: {
+                baseid: currentJidiInfo?.wbsCode || 'all',
+                basename: currentJidiInfo?.wbsName || '全部基地'
+            },
             seriesName: params.seriesName,
-            name: params.name,
-            dataIndex: params.dataIndex
+            stateName: params.name,
+            defaultTab: params.name
         });
     });
 
diff --git a/frontend/src/components/engEnvironmentData/index.vue b/frontend/src/components/engEnvironmentData/index.vue
index 77bc1cd0..f28a244c 100644
--- a/frontend/src/components/engEnvironmentData/index.vue
+++ b/frontend/src/components/engEnvironmentData/index.vue
@@ -38,6 +38,20 @@
         </div>
       </div>
     </div>
+
+    <a-modal
+      v-model:open="modalVisible"
+      title="环境监测数据接入情况"
+      width="80%"
+      :footer="null"
+      :destroy-on-close="true"
+    >
+      <HuanJingSJJRQK
+        v-if="modalVisible"
+        :dataDimensionVal="modalProps.dataDimensionVal"
+        :name="modalProps.name"
+      />
+    </a-modal>
   </div>
 </template>
 
@@ -45,20 +59,30 @@
 import { ref, watch } from 'vue';
 import { getVmsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
-
+import HuanJingSJJRQK from '@/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue';
+import { useDraggable } from '@/utils/drag';
 defineOptions({
     name: 'EngEnvironmentData'
 });
 
-const emit = defineEmits<{
-    (e: 'item-click', params: any): void;
-}>();
-
 const JidiSelectEventStore = useJidiSelectEventStore();
 const baseid = ref('');
 const dataLoading = ref(false);
 const data = ref<Record<string, number>>({ one: 0, two: 0, three: 0 });
 
+const modalVisible = ref(false);
+const modalProps = ref<any>({});
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+function openModal(props: any) {
+    modalProps.value = props;
+    modalVisible.value = true;
+}
+
+defineExpose({
+    openModal,
+    dataLoading
+});
+
 const getData = async () => {
     if (!baseid.value) return;
 
@@ -77,7 +101,8 @@ const getData = async () => {
                 ...baseFilters,
                 { field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }
             ]
-        }
+        },
+        group: [{ dir: 'desc', field: 'sttpCode' }]
     };
 
     const params2 = {
@@ -88,7 +113,8 @@ const getData = async () => {
                 { field: 'runState', operator: 'eq', dataType: 'number', value: 4 },
                 { field: 'dtin', operator: 'eq', dataType: 'number', value: 1 }
             ]
-        }
+        },
+        group: [{ dir: 'desc', field: 'sttpCode' }]
     };
 
     const params3 = {
@@ -99,7 +125,8 @@ const getData = async () => {
                 { field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] },
                 { field: 'dtinEnv', operator: 'in', dataType: 'string', value: ['2'] }
             ]
-        }
+        },
+        group: [{ dir: 'desc', field: 'dtinEnv' }]
     };
 
     try {
@@ -113,21 +140,22 @@ const getData = async () => {
         const record = { one: 0, two: 0, three: 0 };
         const responses = [res1, res2, res3];
         responses.forEach((res, index) => {
-            const total = res?.data?.total ?? 0;
-            switch (index) {
-                case 0:
-                    record.one = total;
-                    break;
-                case 1:
-                    record.two = total;
-                    break;
-                case 2:
-                    record.three = total;
-                    break;
+            if (res?.data?.data && Array.isArray(res.data.data) && res.data.data.length > 0) {
+                const count = res.data.data[0].count ?? 0;
+                switch (index) {
+                    case 0:
+                        record.one = count;
+                        break;
+                    case 1:
+                        record.two = count;
+                        break;
+                    case 2:
+                        record.three = count;
+                        break;
+                }
             }
         });
         data.value = record;
-        // debugger
     } catch (error) {
         console.error('EngEnvironmentData getData error:', error);
     } finally {
@@ -136,7 +164,11 @@ const getData = async () => {
 };
 
 const handleItemClick = (name: string) => {
-    emit('item-click', { name });
+    const currentJidiInfo = JidiSelectEventStore.selectedItem;
+    openModal({
+        dataDimensionVal: currentJidiInfo?.wbsCode || 'all',
+        name
+    });
 };
 
 watch(
diff --git a/frontend/src/components/gis/GisView.vue b/frontend/src/components/gis/GisView.vue
index 0fae156f..07de2437 100644
--- a/frontend/src/components/gis/GisView.vue
+++ b/frontend/src/components/gis/GisView.vue
@@ -128,7 +128,6 @@ watch(
 
 onMounted(() => {
   init();
-  // @ts-ignore
   window.mapClass = mapClass;
 });
 
diff --git a/frontend/src/components/gis/map.ol.ts b/frontend/src/components/gis/map.ol.ts
index 139c6700..eb752d40 100644
--- a/frontend/src/components/gis/map.ol.ts
+++ b/frontend/src/components/gis/map.ol.ts
@@ -12,8 +12,6 @@ import Stroke from 'ol/style/Stroke';
 import Icon from 'ol/style/Icon';
 import Text from 'ol/style/Text';
 import Circle from 'ol/style/Circle';
-import RegularShape from 'ol/style/RegularShape';
-import Cluster from 'ol/source/Cluster';
 import WMTS from 'ol/source/WMTS';
 import WMTSTileGrid from 'ol/tilegrid/WMTS';
 import { get as getProjection, fromLonLat } from 'ol/proj';
@@ -75,6 +73,7 @@ export class MapOl implements MapInterface {
   geoJsonData1: any = null;
   private BASEID = '';
   private currentClipGeoJson: any | null = null;
+  private clipRequestController: AbortController | null = null;
   private hoveredFeatureId: string | number | null = null;
   private popupManager: PopupManager;
   private regionMaskManager: RegionMaskManager;
@@ -98,13 +97,18 @@ export class MapOl implements MapInterface {
       defaultZoom: INITIAL_ZOOM
     });
   }
-  private async loadGeoJsonData(url): Promise<any> {
+  private async loadGeoJsonData(url, signal?: AbortSignal): Promise<any> {
     try {
-      const response = await fetch(url);
+      const response = await fetch(url, { signal });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
       const data = await response.json();
       return data;
-    } catch (error) {
-      console.error('配置加载失败:', error);
+    } catch (error: any) {
+      if (error.name !== 'AbortError') {
+        console.error('配置加载失败:', error);
+      }
     }
   }
   //地图初始化
@@ -222,6 +226,11 @@ export class MapOl implements MapInterface {
     _mdoptions?: MDOptions
   ): void {
     this.pointLayerManager.addDataLayer(pointData, layerType);
+
+    if (this.currentClipGeoJson) {
+      this.regionMaskManager.filterPointsByRegion(this.currentClipGeoJson);
+    }
+
     const currentZoom = this.view ? this.view.getZoom() : INITIAL_ZOOM;
     this.pointLayerManager.updateNearbyFeatureLayout(currentZoom);
     this.requestRefreshPointLabelVisibility(true);
@@ -1124,11 +1133,7 @@ export class MapOl implements MapInterface {
    * 初始化加载基础图层
    * @param layer 图层配置对象
    */
-  addBaseDataLayer(
-    layer: any,
-    isShow: boolean,
-    isCache: boolean = false
-  ): void {
+  addBaseDataLayer(layer: any, isShow: boolean, isCache = false): void {
     if (!this.map) return;
 
     // 备注：同 key 的底图重复添加前先移除旧实例，避免注册表覆盖后旧图层仍残留在地图上。
@@ -1142,7 +1147,7 @@ export class MapOl implements MapInterface {
 
     if (layer.type === 'wmts') {
       if (!layer.url) return;
-      let url = !isCache ? layer.url : layer.url_3d;
+      const url = !isCache ? layer.url : layer.url_3d;
       const urlParams = new URLSearchParams(url.split('?')[1]);
       if (layer.key === this.REGISTRY_KEY) {
         this.baseLayerConfig = layer;
@@ -1311,6 +1316,11 @@ export class MapOl implements MapInterface {
       return;
     }
 
+    if (this.clipRequestController) {
+      this.clipRequestController.abort();
+      this.clipRequestController = null;
+    }
+
     this.BASEID = _regionId;
 
     if (!isAll) {
@@ -1327,21 +1337,40 @@ export class MapOl implements MapInterface {
     }
 
     this.regionMaskManager.hideAllPoints();
+    this.clipRequestController = new AbortController();
+    const signal = this.clipRequestController.signal;
+
     try {
       const url =
         this.hydropBaseConfig.geojson_url +
         `&cql_filter=BASEID='${this.BASEID}'`;
 
-      const geoJsonData = await this.loadGeoJsonData(url);
+      const geoJsonData = await this.loadGeoJsonData(url, signal);
+
+      if (signal.aborted) {
+        return;
+      }
+
+      if (this.BASEID !== _regionId) {
+        return;
+      }
+
       this.currentClipGeoJson = geoJsonData;
       this.regionMaskManager.filterPointsByRegion(geoJsonData);
       this.regionMaskManager.fitViewToGeoJson(geoJsonData);
       this.regionMaskManager.applyMapMaskToLayers(baseLayers, geoJsonData);
-    } catch (error) {
+    } catch (error: any) {
+      if (error.name === 'AbortError') {
+        return;
+      }
       this.currentClipGeoJson = null;
       console.error('加载裁切数据失败:', error);
       this.regionMaskManager.clearMapMask();
       this.regionMaskManager.showAllPoints();
+    } finally {
+      if (this.clipRequestController?.signal === signal) {
+        this.clipRequestController = null;
+      }
     }
   }
   /**
diff --git a/frontend/src/components/gis/ol/point-layer-manager.ts b/frontend/src/components/gis/ol/point-layer-manager.ts
index 7f210b7e..19e5e151 100644
--- a/frontend/src/components/gis/ol/point-layer-manager.ts
+++ b/frontend/src/components/gis/ol/point-layer-manager.ts
@@ -400,6 +400,7 @@ export class PointLayerManager {
     );
     feature.set('_baseCoordinates', coord);
     feature.set('_legendVisible', true);
+    feature.set('_regionVisible', true);
     feature.set('_sttpMap', item.sttpMap);
     if (item.popupHtml) {
       feature.set('popupHtml', item.popupHtml);
diff --git a/frontend/src/components/mapController/LayerController.vue b/frontend/src/components/mapController/LayerController.vue
index 885932d0..aa28ec8c 100644
--- a/frontend/src/components/mapController/LayerController.vue
+++ b/frontend/src/components/mapController/LayerController.vue
@@ -56,7 +56,6 @@ const layerConfigs = computed(() => {
 
   return convertCheckedToBoolean(mapConfigStore.layerConfigTree);
 });
-
 // 备注：选中图层完全以运行态 store 为唯一来源，组件不再维护额外同步状态。
 const checkedKeys = computed(() => mapViewStore.checkedLayerKeys || []);
 const tooltipVisible = ref(false);
diff --git a/frontend/src/components/mapFilter/index.vue b/frontend/src/components/mapFilter/index.vue
index 61528a33..5a6a692c 100644
--- a/frontend/src/components/mapFilter/index.vue
+++ b/frontend/src/components/mapFilter/index.vue
@@ -26,11 +26,9 @@
             <a-form-item label="" name="siteRangePicker">
               <a-range-picker
                 v-model:value="searchTimeRange"
-                picker="date"
                 format="YYYY-MM-DD"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 :allow-clear="false"
-                show-time
                 :presets="DateSetting.RangeButton.days1"
                 style="width: 100%"
                 @change="triggerManualValuesChange"
diff --git a/frontend/src/components/mapLegend/index.vue b/frontend/src/components/mapLegend/index.vue
index 90ef02c8..83754b94 100644
--- a/frontend/src/components/mapLegend/index.vue
+++ b/frontend/src/components/mapLegend/index.vue
@@ -87,6 +87,7 @@ const hasEnvFac = computed(() =>
 );
 
 const legendItemClick = (item: any) => {
+  console.log(item);
   if (item.parentName == '环保设施') return;
   if (item.canBeChecked == 0) {
     return;
@@ -121,6 +122,7 @@ const toggleGroup = (group: any) => {
   if (leafItems.length === 0) return;
 
   const hasAnyChecked = leafItems.some((item: any) => item.checked === 1);
+
   const targetChecked = hasAnyChecked ? 0 : 1;
   const targetNameEns = leafItems
     .filter(
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 8b4cee37..8968d2b1 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -12,7 +12,6 @@ import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css'; // Ant Design 全局样式重置
 import dayjs from 'dayjs'; // ant 中文语言
 import 'dayjs/locale/zh-cn';
-// @ts-ignore
 import 'virtual:svg-icons-register';
 // 3d地图
 import * as Cesium from 'cesium';
diff --git a/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue b/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
index d65599df..4a82d2cd 100644
--- a/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
+++ b/frontend/src/modules/DongWuJiuZhuZhan/JiuZhuZhanQingKuangJieShao.vue
@@ -63,6 +63,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { vpcGetKendoListCust } from '@/api/zxdzw';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -83,7 +84,7 @@ const baseid = ref('');
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 加载状态
 const loading = ref(false);
 
diff --git a/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue b/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
index e871f270..912ca453 100644
--- a/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
+++ b/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
@@ -109,6 +109,7 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
 import BasicTable from '@/components/BasicTable/index.vue'
 import { wqGetKendoList } from '@/api/sz'
 import HJMZDTwoLays from "./HJMZDTwoLays.vue"
+import { useDraggable } from '@/utils/drag';
 
 // 注册 dayjs 插件
 dayjs.extend(isSameOrAfter)
@@ -155,7 +156,7 @@ const detailModalVisible = ref(false)
 const detailData = ref<any>({})
 const mapModalVisible = ref(false)
 const mapModalData = ref<any>({})
-
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 // 排序配置
 const sortConfig = computed(() => [
     { field: 'rstcdStepSort', dir: 'asc' },
diff --git a/frontend/src/modules/EnvironmentalQuality/index.vue b/frontend/src/modules/EnvironmentalQuality/index.vue
index d2c9a511..814a5bcc 100644
--- a/frontend/src/modules/EnvironmentalQuality/index.vue
+++ b/frontend/src/modules/EnvironmentalQuality/index.vue
@@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { wqGetKendoListCust } from '@/api/sz'
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import EnvironmentalQualityTwoLayers from "./TwoLayers/EnvironmentalQualityTwoLayers.vue"
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'EnvironmentalQuality'
@@ -774,7 +776,7 @@ onUnmounted(() => {
 // 弹框相关状态
 const modalVisible = ref(false);
 const clickedBarData = ref<{ name: string; current: number | null; lastYear: number | null; selectedId?: string } | null>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 
 
 </script>
diff --git a/frontend/src/modules/GYZLLB/index.vue b/frontend/src/modules/GYZLLB/index.vue
index 91f70884..bfa7ed5d 100644
--- a/frontend/src/modules/GYZLLB/index.vue
+++ b/frontend/src/modules/GYZLLB/index.vue
@@ -1,77 +1,60 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem :title="title" :datetimePicker="datetimePicker" @update-values="handlePanelChange1">
-        <!-- 加载状态 -->
-        <div v-if="loading" class="loading-container">
-            <a-spin tip="加载中..." />
-        </div>
-        
-        <!-- 无数据状态 -->
-        <div v-else-if="!hasData" class="empty-container">
-            <a-empty description="暂无数据" />
-        </div>
-        
-        <!-- 正常显示图表 -->
-        <div v-else class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
-            <!-- 跑马灯轨道容器 -->
-            <div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
-                :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
-                <!-- 遍历所有图表项（包含克隆项） -->
-                <div v-for="(item, index) in renderChartData" :key="index" class="carousel-item">
-                    <div class="pie-chart-container">
-                        <!-- 图表区域 -->
-                        <div :ref="el => setChartRef(el, index)" class="chart"></div>
-                        <!-- 标题 -->
-                        <div class="title">{{ item.title }}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <SidePanelItem
+    :title="title"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <a-spin tip="加载中..." />
+    </div>
 
-        <!-- 详情弹框 -->
-        <a-modal
-            v-model:open="modalVisible"
-            :title="modalTitle"
-            width="1650px"
-            :footer="null"
-            @cancel="handleModalClose"
+    <!-- 无数据状态 -->
+    <div v-else-if="!hasData" class="empty-container">
+      <a-empty description="暂无数据" />
+    </div>
+
+    <!-- 正常显示图表 -->
+    <div
+      v-else
+      class="container"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+    >
+      <!-- 跑马灯轨道容器 -->
+      <div
+        class="carousel-track"
+        :class="{ 'no-transition': isTransitioning }"
+        :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
+      >
+        <!-- 遍历所有图表项（包含克隆项） -->
+        <div
+          v-for="(item, index) in renderChartData"
+          :key="index"
+          class="carousel-item"
         >
-            <div class="modal-content">
-                <a-descriptions bordered :column="2" size="small">
-                    <a-descriptions-item label="年份">
-                        {{ modalData.year }}
-                    </a-descriptions-item>
-                    <a-descriptions-item label="流域/设施">
-                        {{ modalData.basinName }}
-                    </a-descriptions-item>
-                    <a-descriptions-item label="鱼类总数">
-                        <span style="color: #1890ff; font-weight: bold;">
-                            {{ modalData.totalCount }} {{ getUnit() }}
-                        </span>
-                    </a-descriptions-item>
-                    <a-descriptions-item label="">
-                        {{ modalData.baseid }} 
-                    </a-descriptions-item>
-                </a-descriptions>
+          <div class="pie-chart-container">
+            <!-- 图表区域 -->
+            <div :ref="el => setChartRef(el, index)" class="chart"></div>
+            <!-- 标题 -->
+            <div class="title">{{ item.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-                <a-divider orientation="left">鱼类分布详情</a-divider>
-                
-                <a-table
-                    :columns="fishColumns"
-                    :data-source="modalData.fishList"
-                    :pagination="false"
-                    size="small"
-                    :scroll="{ y: 300 }"
-                >
-                    <template #bodyCell="{ column, record }">
-                        <template v-if="column.key === 'percentage'">
-                            {{ record.percentage }}%
-                        </template>
-                    </template>
-                </a-table>
-            </div>
-        </a-modal>
-    </SidePanelItem>
+    <!-- 详情弹框 -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="'过鱼监测数据'"
+      width="1650px"
+      :footer="null"
+      @cancel="handleModalClose"
+    >
+      <FishResource v-if="modalVisible" :modalData = "modalData"  />
+    </a-modal>
+  </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
@@ -80,46 +63,49 @@ import * as echarts from 'echarts';
 import type { ECharts } from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { yearGetYearFpStatistics } from '@/api/gyss';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import type { ColumnsType } from 'ant-design-vue/es/table/Table';
+import { useDraggable } from '@/utils/drag';
+import FishResource from '@/components/FishResource/index.vue';
 
 // API 数据类型定义
 interface FpFtpStatisticsVo {
-    baseId: string;
-    baseName: string;
-    ftp: string;
-    fishName: string;
-    fcnt: number;
+  baseId: string;
+  baseName: string;
+  ftp: string;
+  fishName: string;
+  fcnt: number;
 }
 
 interface BasinData {
-    fpCount: number;
-    baseId: string;
-    baseName: string;
-    fpFtpStatitcsVos: FpFtpStatisticsVo[];
+  fpCount: number;
+  baseId: string;
+  baseName: string;
+  fpFtpStatitcsVos: FpFtpStatisticsVo[];
 }
 
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'GYZLLB'
+  name: 'GYZLLB'
 });
 
 const JidiSelectEventStore = useJidiSelectEventStore();
 const baseid = ref('');
 
 const props = defineProps({
-    title: { // 标题
-        type: String,
-        default: '过鱼总量'
-    },
+  title: {
+    // 标题
+    type: String,
+    default: '过鱼总量'
+  }
 });
 
 const datetimePicker = ref({
-    show: true,
-    value: `${new Date().getFullYear() - 1}`, // 上一年
-    format: 'YYYY',
-    picker: 'year' as const,
-    options: []
+  show: true,
+  value: `${new Date().getFullYear() - 1}`, // 上一年
+  format: 'YYYY',
+  picker: 'year' as const,
+  options: []
 });
 
 // 状态管理
@@ -132,9 +118,9 @@ const currentYear = ref<string>(''); // 当前选中的年份
 
 // 图表相关
 interface ChartDataItem {
-    title: string;
-    baseid?: string; // 流域ID（用于标识该图表所属的流域）
-    data: Array<{ name: string; value: number; baseId?: string }>; // 扩展数据项，支持存储流域ID
+  title: string;
+  baseid?: string; // 流域ID（用于标识该图表所属的流域）
+  data: Array<{ name: string; value: number; baseId?: string; ftp?: string }>;
 }
 
 // 原始图表数据（多组数据用于跑马灯）
@@ -151,58 +137,63 @@ let timer: any = null;
 
 // 弹框相关状态
 const modalVisible = ref(false);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const modalTitle = ref('');
 const modalData = ref<{
-    year: string;
-    basinName: string;
-    baseid?: string; // 添加流域ID
-    totalCount: number;
-    fishTypes: number;
-    fishList: Array<{
-        name: string;
-        value: number;
-        percentage: string;
-    }>;
+  year: string;
+  basinName: string;
+  baseid?: string;
+  totalCount: number;
+  fishTypes: number;
+  fishName?: string;
+  ftp?: string;
+  fishList: Array<{
+    name: string;
+    value: number;
+    percentage: string;
+  }>;
 }>({
-    year: '',
-    basinName: '',
-    baseid: '',
-    totalCount: 0,
-    fishTypes: 0,
-    fishList: []
+  year: '',
+  basinName: '',
+  baseid: '',
+  totalCount: 0,
+  fishTypes: 0,
+  fishName: '',
+  ftp: '',
+  fishList: []
 });
 
 // 鱼类列表表格列定义
 const fishColumns: ColumnsType = [
-    {
-        title: '鱼类名称',
-        dataIndex: 'name',
-        key: 'name',
-        width: 150
-    },
-    {
-        title: '数量',
-        dataIndex: 'value',
-        key: 'value',
-        width: 120,
-        customRender: ({ text }: any) => `${text} ${getUnit()}`
-    },
-    {
-        title: '占比',
-        dataIndex: 'percentage',
-        key: 'percentage',
-        width: 100
-    }
+  {
+    title: '鱼类名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150
+  },
+  {
+    title: '数量',
+    dataIndex: 'value',
+    key: 'value',
+    width: 120,
+    customRender: ({ text }: any) => `${text} ${getUnit()}`
+  },
+  {
+    title: '占比',
+    dataIndex: 'percentage',
+    key: 'percentage',
+    width: 100
+  }
 ];
 
 /**
  * 停止自动轮播
  */
 const stopAutoPlay = () => {
-    if (timer) {
-        clearInterval(timer);
-        timer = null;
-    }
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
 };
 
 // 鼠标悬停状态
@@ -217,535 +208,556 @@ const chartRefs = ref<(HTMLElement | null)[]>([]);
 
 // 设置图表ref
 const setChartRef = (el: any, index: number) => {
-    if (el) {
-        chartRefs.value[index] = el;
-    }
+  if (el) {
+    chartRefs.value[index] = el;
+  }
 };
 
 // 单位配置（模拟函数）
 const getUnitConfigByCode = (code: string, type: string): { unit: string } => {
-    if (type === 'FCNT') {
-        return { unit: '尾' };
-    } else if (type === 'SL') {
-        return { unit: '万尾' };
-    }
+  if (type === 'FCNT') {
     return { unit: '尾' };
+  } else if (type === 'SL') {
+    return { unit: '万尾' };
+  }
+  return { unit: '尾' };
 };
 
 // 生成随机颜色（根据名称）- 生成适中亮度颜色
 const generateRandomColor = (names: string[]): string[] => {
-    const colors: string[] = [];
+  const colors: string[] = [];
 
-    names.forEach(() => {
-        // 生成 HSL 颜色，控制饱和度和亮度在适中范围
-        // H: 0-360 (色相)
-        // S: 40-70% (饱和度，避免过于鲜艳或灰暗)
-        // L: 45-65% (亮度，避免过亮或过暗)
-        const hue = Math.floor(Math.random() * 360);
-        const saturation = 40 + Math.floor(Math.random() * 30); // 40-70%
-        const lightness = 45 + Math.floor(Math.random() * 20);  // 45-65%
+  names.forEach(() => {
+    // 生成 HSL 颜色，控制饱和度和亮度在适中范围
+    // H: 0-360 (色相)
+    // S: 40-70% (饱和度，避免过于鲜艳或灰暗)
+    // L: 45-65% (亮度，避免过亮或过暗)
+    const hue = Math.floor(Math.random() * 360);
+    const saturation = 40 + Math.floor(Math.random() * 30); // 40-70%
+    const lightness = 45 + Math.floor(Math.random() * 20); // 45-65%
 
-        // 将 HSL 转换为 HEX
-        const h = hue / 360;
-        const s = saturation / 100;
-        const l = lightness / 100;
+    // 将 HSL 转换为 HEX
+    const h = hue / 360;
+    const s = saturation / 100;
+    const l = lightness / 100;
 
-        let r, g, b;
+    let r, g, b;
 
-        if (s === 0) {
-            r = g = b = l;
-        } else {
-            const hue2rgb = (p: number, q: number, t: number) => {
-                if (t < 0) t += 1;
-                if (t > 1) t -= 1;
-                if (t < 1 / 6) return p + (q - p) * 6 * t;
-                if (t < 1 / 2) return q;
-                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-                return p;
-            };
+    if (s === 0) {
+      r = g = b = l;
+    } else {
+      const hue2rgb = (p: number, q: number, t: number) => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+      };
 
-            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-            const p = 2 * l - q;
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
 
-            r = hue2rgb(p, q, h + 1 / 3);
-            g = hue2rgb(p, q, h);
-            b = hue2rgb(p, q, h - 1 / 3);
-        }
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
 
-        const toHex = (x: number) => {
-            const hex = Math.round(x * 255).toString(16);
-            return hex.length === 1 ? '0' + hex : hex;
-        };
+    const toHex = (x: number) => {
+      const hex = Math.round(x * 255).toString(16);
+      return hex.length === 1 ? '0' + hex : hex;
+    };
 
-        colors.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`);
-    });
+    colors.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`);
+  });
 
-    return colors;
+  return colors;
 };
 
 // 计算总量
 const getTotalAmount = (data: Array<{ name: string; value: number }>) => {
-    return data.reduce((sum, item) => sum + item.value, 0);
+  return data.reduce((sum, item) => sum + item.value, 0);
 };
 
 // 获取单位
 const getUnit = () => {
-    const fyunit = getUnitConfigByCode('FPSSRL_R', 'FCNT')?.unit ?? '尾';
-    return fyunit;
+  const fyunit = getUnitConfigByCode('FPSSRL_R', 'FCNT')?.unit ?? '尾';
+  return fyunit;
 };
 
 // 初始化单个图表
 const initChart = (index: number) => {
-    const chartRef = chartRefs.value[index];
-    if (!chartRef) return;
+  const chartRef = chartRefs.value[index];
+  if (!chartRef) return;
 
-    const rect = chartRef.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
-        console.warn(`图表容器尺寸为0，延迟重试... 索引: ${index}`);
-        setTimeout(() => initChart(index), 100);
-        return;
-    }
+  const rect = chartRef.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    console.warn(`图表容器尺寸为0，延迟重试... 索引: ${index}`);
+    setTimeout(() => initChart(index), 100);
+    return;
+  }
 
-    const chartInstance = echarts.init(chartRef);
-    chartInstances.value[index] = chartInstance;
-    
-    // 添加点击事件监听
-    chartInstance.on('click', (params: any) => {
-        handleChartClick(renderChartData.value[index], index, params);
-    });
-    
-    updateChart(index);
+  const chartInstance = echarts.init(chartRef);
+  chartInstances.value[index] = chartInstance;
+
+  // 添加点击事件监听
+  chartInstance.on('click', (params: any) => {
+    handleChartClick(renderChartData.value[index], index, params);
+  });
+
+  updateChart(index);
 };
 
 // 更新单个图表配置
 const updateChart = (index: number) => {
-    const chartInstance = chartInstances.value[index];
-    const chartData = renderChartData.value[index];
+  const chartInstance = chartInstances.value[index];
+  const chartData = renderChartData.value[index];
 
-    if (!chartInstance || !chartData) return;
+  if (!chartInstance || !chartData) return;
 
-    const colorNames = chartData.data.map(item => item.name);
-    const colors = generateRandomColor(colorNames);
-    const totalAmount = getTotalAmount(chartData.data);
-    const unit = getUnit();
+  const colorNames = chartData.data.map(item => item.name);
+  const colors = generateRandomColor(colorNames);
+  const totalAmount = getTotalAmount(chartData.data);
+  const unit = getUnit();
 
-    const option: echarts.EChartsOption = {
-        tooltip: {
-            trigger: 'item',
-            formatter: `{b}: {c} ${unit} ({d}%)`,
-            backgroundColor: 'rgba(50, 50, 50, 0.9)',
-            borderColor: 'transparent',
-            textStyle: {
-                color: '#fff',
-                fontSize: 12
-            }
+  const option: echarts.EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: `{b}: {c} ${unit} ({d}%)`,
+      backgroundColor: 'rgba(50, 50, 50, 0.9)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    title: [
+      {
+        text: `${totalAmount}`,
+        subtext: `总量(${unit})`,
+        left: '29%',
+        top: '45%',
+        textAlign: 'center',
+        textVerticalAlign: 'middle',
+        textStyle: {
+          fontSize: 24,
+          fontWeight: 'bold',
+          color: '#333'
         },
-        title: [
-            {
-                text: `${totalAmount}`,
-                subtext: `总量(${unit})`,
-                left: '29%',
-                top: '45%',
-                textAlign: 'center',
-                textVerticalAlign: 'middle',
-                textStyle: {
-                    fontSize: 24,
-                    fontWeight: 'bold',
-                    color: '#333',
-                },
-                subtextStyle: {
-                    fontSize: 12,
-                    color: '#999',
-                    align: 'center',
-                }
-            }
-        ],
-        legend: {
-            type: 'scroll',
-            orient: 'vertical',
-            right: 5,
-            top: 'middle',
-            bottom: 25,
-            itemWidth: 25,
-            itemHeight: 13,
-            itemGap: 8,
-            pageIconColor: '#333',
-            pageIconInactiveColor: '#ccc',
-            pageIconSize: 12,
-            pageFormatter: '{current}/{total}',
-            formatter: function (name: string) {
-                const found = chartData.data.find(item => item.name === name);
-                const value = found ? found.value : '-';
-                const maxLength = 7;
-                const truncatedName = name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
-                return `${truncatedName} ${value}${unit}`;
-            },
-            textStyle: {
-                fontSize: 12,
-                color: '#666'
-            }
+        subtextStyle: {
+          fontSize: 12,
+          color: '#999',
+          align: 'center'
+        }
+      }
+    ],
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      right: 5,
+      top: 'middle',
+      bottom: 25,
+      itemWidth: 25,
+      itemHeight: 13,
+      itemGap: 8,
+      pageIconColor: '#333',
+      pageIconInactiveColor: '#ccc',
+      pageIconSize: 12,
+      pageFormatter: '{current}/{total}',
+      formatter: function (name: string) {
+        const found = chartData.data.find(item => item.name === name);
+        const value = found ? found.value : '-';
+        const maxLength = 7;
+        const truncatedName =
+          name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
+        return `${truncatedName} ${value}${unit}`;
+      },
+      textStyle: {
+        fontSize: 12,
+        color: '#666'
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '70%'],
+        center: ['30%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
         },
-        series: [
-            {
-                type: 'pie',
-                radius: ['50%', '70%'],
-                center: ['30%', '50%'],
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    borderRadius: 4,
-                    borderColor: '#fff',
-                    borderWidth: 2
-                },
-                label: {
-                    show: false
-                },
-                emphasis: {
-                    label: {
-                        show: false
-                    },
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.3)'
-                    }
-                },
-                labelLine: {
-                    show: false
-                },
-                data: chartData.data.map((item, idx) => ({
-                    ...item,
-                    itemStyle: {
-                        color: colors[idx]
-                    }
-                }))
-            }
-        ]
-    };
+        label: {
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: false
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.3)'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: chartData.data.map((item, idx) => ({
+          ...item,
+          itemStyle: {
+            color: colors[idx]
+          }
+        }))
+      }
+    ]
+  };
 
-    chartInstance.setOption(option, true);
+  chartInstance.setOption(option, true);
 };
 
 // 处理窗口大小变化
 const handleResize = () => {
-    chartInstances.value.forEach(instance => {
-        if (instance) {
-            instance.resize();
-        }
-    });
+  chartInstances.value.forEach(instance => {
+    if (instance) {
+      instance.resize();
+    }
+  });
 };
 
 // 初始化渲染数组（克隆首尾项）
 const initRenderData = () => {
-    const length = originalChartData.value.length;
-    if (length === 0) return;
+  const length = originalChartData.value.length;
+  if (length === 0) return;
 
-    renderChartData.value = [
-        originalChartData.value[length - 1], // 克隆最后一项
-        ...originalChartData.value,           // 原始数据
-        originalChartData.value[0]            // 克隆第一项
-    ];
+  renderChartData.value = [
+    originalChartData.value[length - 1], // 克隆最后一项
+    ...originalChartData.value, // 原始数据
+    originalChartData.value[0] // 克隆第一项
+  ];
 
-    // 初始化图表实例数组
-    chartInstances.value = new Array(renderChartData.value.length).fill(null);
-    chartRefs.value = new Array(renderChartData.value.length).fill(null);
+  // 初始化图表实例数组
+  chartInstances.value = new Array(renderChartData.value.length).fill(null);
+  chartRefs.value = new Array(renderChartData.value.length).fill(null);
 };
 
 // 启动自动轮播
 const startAutoPlay = () => {
-    if (timer) clearInterval(timer);
-    timer = setInterval(() => {
-        if (!isHovering.value && !isTransitioning.value) {
-            nextSlide();
-        }
-    }, 4000);
+  if (timer) clearInterval(timer);
+  timer = setInterval(() => {
+    if (!isHovering.value && !isTransitioning.value) {
+      nextSlide();
+    }
+  }, 4000);
 };
 
 // 切换到下一张
 const nextSlide = () => {
-    currentIndex.value++;
+  currentIndex.value++;
 
-    // 延迟检查是否需要无缝跳转
-    setTimeout(() => {
-        checkSeamlessJump();
-    }, 500); // 与transition时间一致
+  // 延迟检查是否需要无缝跳转
+  setTimeout(() => {
+    checkSeamlessJump();
+  }, 500); // 与transition时间一致
 };
 
 // 检查是否需要无缝跳转（克隆项处理）
 const checkSeamlessJump = () => {
-    const realLength = originalChartData.value.length;
+  const realLength = originalChartData.value.length;
 
-    // 如果到达克隆的最后一项（索引 = realLength + 1）
-    if (currentIndex.value >= realLength + 1) {
-        // 1. 禁用过渡动画，实现瞬间跳转
-        isTransitioning.value = true;
+  // 如果到达克隆的最后一项（索引 = realLength + 1）
+  if (currentIndex.value >= realLength + 1) {
+    // 1. 禁用过渡动画，实现瞬间跳转
+    isTransitioning.value = true;
 
-        // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
-        currentIndex.value = 1;
+    // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
+    currentIndex.value = 1;
 
-        // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                isTransitioning.value = false;
-            });
-        });
-    }
+    // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        isTransitioning.value = false;
+      });
+    });
+  }
 };
 
 // 处理鼠标进入
 const handleMouseEnter = () => {
-    isHovering.value = true;
+  isHovering.value = true;
 };
 
 // 处理鼠标离开
 const handleMouseLeave = () => {
-    isHovering.value = false;
+  isHovering.value = false;
 };
 
 // 页面加载时执行
 onMounted(async () => {
-    initRenderData();
+  initRenderData();
 
-    // 等待DOM渲染完成
-    await nextTick();
-    setTimeout(() => {
-        // 初始化所有图表
-        renderChartData.value.forEach((_, index) => {
-            initChart(index);
-        });
+  // 等待DOM渲染完成
+  await nextTick();
+  setTimeout(() => {
+    // 初始化所有图表
+    renderChartData.value.forEach((_, index) => {
+      initChart(index);
+    });
 
-        // 监听窗口大小变化
-        window.addEventListener('resize', handleResize);
+    // 监听窗口大小变化
+    window.addEventListener('resize', handleResize);
 
-        // 启动自动轮播
-        startAutoPlay();
-    }, 100);
+    // 启动自动轮播
+    startAutoPlay();
+  }, 100);
 });
 
 // 组件卸载时清理
 onUnmounted(() => {
-    if (timer) clearInterval(timer);
+  if (timer) clearInterval(timer);
 
-    // 销毁所有图表实例
-    chartInstances.value.forEach(instance => {
-        if (instance) {
-            instance.dispose();
-        }
-    });
+  // 销毁所有图表实例
+  chartInstances.value.forEach(instance => {
+    if (instance) {
+      instance.dispose();
+    }
+  });
 
-    window.removeEventListener('resize', handleResize);
+  window.removeEventListener('resize', handleResize);
 });
 
 /**
  * 构建单一流域的图表数据
  */
-const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataItem => {
-    return {
-        title: `${basin.baseName}`,
-        baseid: basin.baseId, // 保存流域ID
-        data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
-            name: fish.fishName,
-            value: fish.fcnt
-        }))
-    };
+const buildSingleBasinChartData = (
+  basin: BasinData,
+  year: string
+): ChartDataItem => {
+  return {
+    title: `${basin.baseName}`,
+    baseid: basin.baseId, // 保存流域ID
+    data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
+      name: fish.fishName,
+      value: fish.fcnt,
+      ftp: fish.ftp
+    }))
+  };
 };
 
 /**
  * 构建全部流域的图表数据（包含流域对比图和各流域鱼类分布图）
  */
-const buildAllBasinsChartData = (apiData: BasinData[], year: string): ChartDataItem[] => {
-    const charts: ChartDataItem[] = [];
-    
-    // 1️⃣ 第一张：各流域总量对比图（使用 fpCount）
-    const basinComparisonData = apiData
-        .filter(basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0)
-        .map(basin => ({
-            name: basin.baseName,
-            value: basin.fpCount,
-            baseId: basin.baseId // 添加流域ID，用于点击事件传参
-        }));
-    
-    if (basinComparisonData.length > 0) {
-        charts.push({
-            title: `总量`,
-            baseid: 'all', // 标记为总量图表
-            data: basinComparisonData
-        });
-    }
-    
-    // 2️⃣ 后续：每个流域的鱼类分布图（使用 fcnt）
-    apiData.forEach(basin => {
-        if (basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0) {
-            charts.push(buildSingleBasinChartData(basin, year));
-        }
+const buildAllBasinsChartData = (
+  apiData: BasinData[],
+  year: string
+): ChartDataItem[] => {
+  const charts: ChartDataItem[] = [];
+
+  // 1️⃣ 第一张：各流域总量对比图（使用 fpCount）
+  const basinComparisonData = apiData
+    .filter(
+      basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0
+    )
+    .map(basin => ({
+      name: basin.baseName,
+      value: basin.fpCount,
+      baseId: basin.baseId // 添加流域ID，用于点击事件传参
+    }));
+
+  if (basinComparisonData.length > 0) {
+    charts.push({
+      title: `总量`,
+      baseid: 'all', // 标记为总量图表
+      data: basinComparisonData
     });
-    
-    return charts;
+  }
+
+  // 2️⃣ 后续：每个流域的鱼类分布图（使用 fcnt）
+  apiData.forEach(basin => {
+    if (basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0) {
+      charts.push(buildSingleBasinChartData(basin, year));
+    }
+  });
+
+  return charts;
 };
 
 /**
  * 重新构建图表实例（用于完全重建）
  */
 const rebuildCharts = async () => {
-    // 销毁旧图表实例
-    chartInstances.value.forEach(instance => {
-        if (instance) {
-            instance.dispose();
-        }
+  // 销毁旧图表实例
+  chartInstances.value.forEach(instance => {
+    if (instance) {
+      instance.dispose();
+    }
+  });
+  chartInstances.value = [];
+
+  // 重新初始化渲染数据
+  initRenderData();
+
+  // 等待 DOM 更新
+  await nextTick();
+
+  // 重新初始化所有图表
+  setTimeout(() => {
+    renderChartData.value.forEach((_, index) => {
+      initChart(index);
     });
-    chartInstances.value = [];
-    
-    // 重新初始化渲染数据
-    initRenderData();
-    
-    // 等待 DOM 更新
-    await nextTick();
-    
-    // 重新初始化所有图表
-    setTimeout(() => {
-        renderChartData.value.forEach((_, index) => {
-            initChart(index);
-        });
-    }, 100);
+  }, 100);
 };
 
 /**
  * 控制跑马灯的启停
  */
 const controlCarousel = () => {
-    // 判断是否需要停止跑马灯
-    const shouldStop = baseid.value !== 'all' || originalChartData.value.length <= 1;
-    
-    if (shouldStop) {
-        stopAutoPlay(); // 停止轮播，但不重置 currentIndex
-    } else {
-        startAutoPlay(); // 启动轮播
-    }
+  // 判断是否需要停止跑马灯
+  const shouldStop =
+    baseid.value !== 'all' || originalChartData.value.length <= 1;
+
+  if (shouldStop) {
+    stopAutoPlay(); // 停止轮播，但不重置 currentIndex
+  } else {
+    startAutoPlay(); // 启动轮播
+  }
 };
 
 /**
  * 根据当前 baseid 更新图表显示（不请求 API）
  */
 const updateChartByBaseid = () => {
-    if (!cachedApiData.value.length) {
-        hasData.value = false;
-        originalChartData.value = [];
-        renderChartData.value = []; // 清空渲染数据
-        stopAutoPlay(); // 停止轮播
-        return;
+  if (!cachedApiData.value.length) {
+    hasData.value = false;
+    originalChartData.value = [];
+    renderChartData.value = []; // 清空渲染数据
+    stopAutoPlay(); // 停止轮播
+    return;
+  }
+
+  if (baseid.value === 'all') {
+    // === 全部流域模式 ===
+    originalChartData.value = buildAllBasinsChartData(
+      cachedApiData.value,
+      currentYear.value
+    );
+  } else {
+    // === 单一流域模式 ===
+    const targetBasin = cachedApiData.value.find(
+      item => item.baseId === baseid.value
+    );
+
+    if (
+      !targetBasin ||
+      !targetBasin.fpFtpStatitcsVos ||
+      targetBasin.fpFtpStatitcsVos.length === 0
+    ) {
+      hasData.value = false;
+      originalChartData.value = [];
+      renderChartData.value = []; // 清空渲染数据
+      stopAutoPlay(); // 停止轮播
+      return;
     }
-    
-    if (baseid.value === 'all') {
-        // === 全部流域模式 ===
-        originalChartData.value = buildAllBasinsChartData(cachedApiData.value, currentYear.value);
-    } else {
-        // === 单一流域模式 ===
-        const targetBasin = cachedApiData.value.find(item => item.baseId === baseid.value);
-        
-        if (!targetBasin || !targetBasin.fpFtpStatitcsVos || targetBasin.fpFtpStatitcsVos.length === 0) {
-            hasData.value = false;
-            originalChartData.value = [];
-            renderChartData.value = []; // 清空渲染数据
-            stopAutoPlay(); // 停止轮播
-            return;
-        }
-        
-        originalChartData.value = [buildSingleBasinChartData(targetBasin, currentYear.value)];
-    }
-    
-    // 先构建渲染数据
-    initRenderData();
-    
-    // 再设置为有数据状态
-    hasData.value = true;
-    
-    // 等待 DOM 更新后初始化图表
-    nextTick(() => {
-        // 销毁旧图表实例
-        chartInstances.value.forEach(instance => {
-            if (instance) {
-                instance.dispose();
-            }
-        });
-        chartInstances.value = new Array(renderChartData.value.length).fill(null);
-        chartRefs.value = new Array(renderChartData.value.length).fill(null);
-        
-        setTimeout(() => {
-            renderChartData.value.forEach((_, index) => {
-                initChart(index);
-            });
-        }, 100);
+
+    originalChartData.value = [
+      buildSingleBasinChartData(targetBasin, currentYear.value)
+    ];
+  }
+
+  // 先构建渲染数据
+  initRenderData();
+
+  // 再设置为有数据状态
+  hasData.value = true;
+
+  // 等待 DOM 更新后初始化图表
+  nextTick(() => {
+    // 销毁旧图表实例
+    chartInstances.value.forEach(instance => {
+      if (instance) {
+        instance.dispose();
+      }
     });
-    
-    controlCarousel(); // 控制跑马灯启停
+    chartInstances.value = new Array(renderChartData.value.length).fill(null);
+    chartRefs.value = new Array(renderChartData.value.length).fill(null);
+
+    setTimeout(() => {
+      renderChartData.value.forEach((_, index) => {
+        initChart(index);
+      });
+    }, 100);
+  });
+
+  controlCarousel(); // 控制跑马灯启停
 };
 
 /**
  * 获取并处理图表数据
  */
 const getechartsdata = async (yearOne: string) => {
-    if (!baseid.value) {
-        hasData.value = false;
-        originalChartData.value = [];
-        renderChartData.value = [];
-        stopAutoPlay();
-        return;
-    }
+  if (!baseid.value) {
+    hasData.value = false;
+    originalChartData.value = [];
+    renderChartData.value = [];
+    stopAutoPlay();
+    return;
+  }
 
-    // 如果年份没变，且有缓存数据，直接使用缓存
-    if (yearOne === currentYear.value && cachedApiData.value.length > 0) {
-        updateChartByBaseid();
-        return;
-    }
+  // 如果年份没变，且有缓存数据，直接使用缓存
+  if (yearOne === currentYear.value && cachedApiData.value.length > 0) {
+    updateChartByBaseid();
+    return;
+  }
 
-    loading.value = true;
-    
-    try {
-        const params = { year: yearOne };
-        const res = await yearGetYearFpStatistics(params);
-        // axios 返回的结构：res.data 才是真正的业务数据
-        const responseData = res.data;
-        if (!responseData || responseData.length === 0) {
-            console.warn('无有效数据');
-            hasData.value = false;
-            originalChartData.value = [];
-            renderChartData.value = [];
-            cachedApiData.value = [];
-            currentYear.value = '';
-            stopAutoPlay();
-            return;
-        }
-        // 
-        // 缓存全量数据
-        cachedApiData.value = responseData;
-        currentYear.value = yearOne;
-        // 根据 baseid 更新显示
-        updateChartByBaseid();
+  loading.value = true;
 
-    } catch (error) {
-        console.error('获取过鱼统计数据失败:', error);
-        hasData.value = false;
-        originalChartData.value = [];
-        renderChartData.value = [];
-        cachedApiData.value = [];
-        currentYear.value = '';
-        stopAutoPlay();
-    } finally {
-        loading.value = false;
+  try {
+    const params = { year: yearOne };
+    const res = await yearGetYearFpStatistics(params);
+    // axios 返回的结构：res.data 才是真正的业务数据
+    const responseData = res.data;
+    if (!responseData || responseData.length === 0) {
+      console.warn('无有效数据');
+      hasData.value = false;
+      originalChartData.value = [];
+      renderChartData.value = [];
+      cachedApiData.value = [];
+      currentYear.value = '';
+      stopAutoPlay();
+      return;
     }
+    //
+    // 缓存全量数据
+    cachedApiData.value = responseData;
+    currentYear.value = yearOne;
+    // 根据 baseid 更新显示
+    updateChartByBaseid();
+  } catch (error) {
+    console.error('获取过鱼统计数据失败:', error);
+    hasData.value = false;
+    originalChartData.value = [];
+    renderChartData.value = [];
+    cachedApiData.value = [];
+    currentYear.value = '';
+    stopAutoPlay();
+  } finally {
+    loading.value = false;
+  }
 };
 
 const handlePanelChange1 = (data: any) => {
-    if (data.datetime) {
-        getechartsdata(data.datetime); // 年份变化，请求 API
-    } else {
-        // 置空图表数据，并显示暂无数据
-        hasData.value = false;
-        originalChartData.value = [];
-        renderChartData.value = []; // 清空渲染数据
-        cachedApiData.value = []; // 清空缓存
-        currentYear.value = '';
-        stopAutoPlay(); // 停止轮播
-    }
+  if (data.datetime) {
+    getechartsdata(data.datetime); // 年份变化，请求 API
+  } else {
+    // 置空图表数据，并显示暂无数据
+    hasData.value = false;
+    originalChartData.value = [];
+    renderChartData.value = []; // 清空渲染数据
+    cachedApiData.value = []; // 清空缓存
+    currentYear.value = '';
+    stopAutoPlay(); // 停止轮播
+  }
 };
 
 /**
@@ -755,145 +767,147 @@ const handlePanelChange1 = (data: any) => {
  * @param params ECharts 点击事件参数（可选）
  */
 const handleChartClick = (item: ChartDataItem, index: number, params?: any) => {
-    // 计算总数量和百分比
-    const totalCount = getTotalAmount(item.data);
-    const fishList = item.data.map(fish => ({
-        name: fish.name,
-        value: fish.value,
-        percentage: totalCount > 0 ? ((fish.value / totalCount) * 100).toFixed(2) : '0.00'
-    }));
+  const totalCount = getTotalAmount(item.data);
+  const fishList = item.data.map(fish => ({
+    name: fish.name,
+    value: fish.value,
+    percentage:
+      totalCount > 0 ? ((fish.value / totalCount) * 100).toFixed(2) : '0.00'
+  }));
 
-    // 确定流域ID
-    let clickedBaseId: string | undefined;
-    
-    if (params && params.data && params.data.baseId) {
-        // 情况1：总量对比图，点击了某个流域的数据项
-        clickedBaseId = params.data.baseId;
-    } else if (item.baseid && item.baseid !== 'all') {
-        // 情况2：单一流域图，使用图表整体的 baseid
-        clickedBaseId = item.baseid;
-    } else {
-        // 情况3：总量图表但未获取到具体数据项的 baseId（理论上不应该发生）
-        clickedBaseId = item.baseid;
-    }
+  let clickedBaseId: string | undefined;
+  let fishName = '';
+  let ftp = '';
 
-    // 设置弹框数据
-    modalTitle.value = `${item.title} - 详情`;
-    modalData.value = {
-        year: currentYear.value || '-',
-        basinName: params?.name || item.title, // 优先使用被点击的数据项名称
-        baseid: clickedBaseId, // 保存正确的流域ID
-        totalCount: totalCount,
-        fishTypes: item.data.length,
-        fishList: fishList
-    };
+  if (params && params.data && params.data.baseId) {
+    clickedBaseId = params.data.baseId;
+  } else if (item.baseid && item.baseid !== 'all') {
+    clickedBaseId = item.baseid;
+  } else {
+    clickedBaseId = item.baseid;
+  }
 
-    // 打开弹框
-    modalVisible.value = true;
+  if (item.baseid !== 'all' && params && params.data) {
+    fishName = params.data.name || '';
+    ftp = params.data.ftp || '';
+  }
+
+  modalTitle.value = `${item.title} - 详情`;
+  modalData.value = {
+    year: currentYear.value || '-',
+    basinName: params?.name || item.title,
+    baseid: clickedBaseId,
+    totalCount: totalCount,
+    fishTypes: item.data.length,
+    fishName,
+    ftp,
+    fishList: fishList
+  };
+
+  modalVisible.value = true;
 };
 
 /**
  * 关闭弹框
  */
 const handleModalClose = () => {
-    modalVisible.value = false;
+  modalVisible.value = false;
 };
 
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        if (newVal && newVal.wbsCode) {
-            baseid.value = newVal.wbsCode;
-            
-            // 切换流域时，不请求 API，只从缓存中筛选更新显示
-            if (cachedApiData.value.length > 0) {
-                updateChartByBaseid();
-            }
-        }
-    },
-    { deep: true, immediate: true }
-);
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      baseid.value = newVal.wbsCode;
 
+      // 切换流域时，不请求 API，只从缓存中筛选更新显示
+      if (cachedApiData.value.length > 0) {
+        updateChartByBaseid();
+      }
+    }
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
 .container {
-    width: 100%;
-    height: 290px;
-    // border: 1px solid #7fd6ff;
-    border-radius: 5px;
-    position: relative;
-    overflow: hidden; // 隐藏超出容器的内容
+  width: 100%;
+  height: 290px;
+  // border: 1px solid #7fd6ff;
+  border-radius: 5px;
+  position: relative;
+  overflow: hidden; // 隐藏超出容器的内容
 
-    // 跑马灯轨道
-    .carousel-track {
-        display: flex; // 横向排列所有媒体项
+  // 跑马灯轨道
+  .carousel-track {
+    display: flex; // 横向排列所有媒体项
+    width: 100%;
+    height: 100%;
+    transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
+
+    // 禁用过渡动画（用于无缝跳转）
+    &.no-transition {
+      transition: none;
+    }
+
+    // 单个图表项
+    .carousel-item {
+      min-width: 100%; // 每个项目占满容器宽度
+      height: 100%;
+      position: relative;
+      flex-shrink: 0; // 防止被压缩
+
+      .pie-chart-container {
         width: 100%;
         height: 100%;
-        transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
 
-        // 禁用过渡动画（用于无缝跳转）
-        &.no-transition {
-            transition: none;
+        .chart {
+          flex: 1;
+          min-height: 0;
         }
 
-        // 单个图表项
-        .carousel-item {
-            min-width: 100%; // 每个项目占满容器宽度
-            height: 100%;
-            position: relative;
-            flex-shrink: 0; // 防止被压缩
-
-            .pie-chart-container {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                padding: 10px;
-
-                .chart {
-                    flex: 1;
-                    min-height: 0;
-                }
-
-                .title {
-                    text-align: center;
-                    font-size: 14px;
-                    color: #333;
-                    padding-top: 8px;
-                }
-            }
+        .title {
+          text-align: center;
+          font-size: 14px;
+          color: #333;
+          padding-top: 8px;
         }
+      }
     }
+  }
 }
 
 // 加载状态样式
 .loading-container {
-    width: 100%;
-    height: 290px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100%;
+  height: 290px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 // 空状态样式
 .empty-container {
-    width: 100%;
-    height: 290px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100%;
+  height: 290px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .modal-content {
-    .ant-descriptions {
-        margin-bottom: 16px;
-    }
+  .ant-descriptions {
+    margin-bottom: 16px;
+  }
 
-    .ant-divider {
-        margin: 16px 0;
-        font-size: 14px;
-        color: #333;
-    }
+  .ant-divider {
+    margin: 16px 0;
+    font-size: 14px;
+    color: #333;
+  }
 }
 </style>
diff --git a/frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue b/frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue
index 2ace8474..4933ef49 100644
--- a/frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue
+++ b/frontend/src/modules/ZhenXiZhiWuYuanMod/ZhiWuYuanJianSheJiJieRuQingKuangBar/index.vue
@@ -32,6 +32,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { vpcGetKendoListCust } from '@/api/zxdzw';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import ZhiWuYuanDetailTable from './ZhiWuYuanDetailTable.vue';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -50,7 +51,7 @@ const loading = ref(false);
 // 弹窗状态
 const modalVisible = ref(false);
 const modalJidi = ref('all');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 基地选项（用于弹窗中的下拉）
 const jidiOptions = ref<any[]>([]);
 
diff --git a/frontend/src/modules/alongFishMod/index.vue b/frontend/src/modules/alongFishMod/index.vue
index f0d3adc2..2ca8e91d 100644
--- a/frontend/src/modules/alongFishMod/index.vue
+++ b/frontend/src/modules/alongFishMod/index.vue
@@ -54,6 +54,7 @@ import Yanchengyulei from './TwoLayers/Yanchengyulei.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { wbsbGetKendoList, getDftYear, fishChanges2 } from '@/api/stdc';
 import moment from 'moment';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
   name: 'alongFishMod'
@@ -108,7 +109,7 @@ const modalHbrvcd = ref('');
 const modalStateName = ref('');
 const modalSectionName = ref('');
 const modalStcd = ref('');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 图表相关 ====================
 
 /**
diff --git a/frontend/src/modules/churukushuiwenMod/index.vue b/frontend/src/modules/churukushuiwenMod/index.vue
index 388895b7..abf6cc30 100644
--- a/frontend/src/modules/churukushuiwenMod/index.vue
+++ b/frontend/src/modules/churukushuiwenMod/index.vue
@@ -53,6 +53,8 @@ import { getVmsstbprpt, inOutOneGetKendoListCust } from '@/api/sw';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import churukushuiwen from './churukushuiwen.vue';
 import { MapClass } from '@/components/gis/map.class';
+import { useDraggable } from '@/utils/drag';
+
 // ==================== 组件基础配置 ====================
 // 定义组件名(便于调试和递归)
 defineOptions({
@@ -96,7 +98,7 @@ const modalVisible = ref(false); // 弹框显示状态
 const clickDataInfo = ref<any>(null); // 点击的数据点信息
 const stationName = ref(''); // 站点名称
 // ==================== 数据处理函数 ====================
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 /**
  * 转换图表数据格式
  * 将后端返回的扁平数据结构转换为ECharts所需的双线数据格式
diff --git a/frontend/src/modules/dianxingcuoshijieshao/index.vue b/frontend/src/modules/dianxingcuoshijieshao/index.vue
index 44cc22b1..5cd9c2b8 100644
--- a/frontend/src/modules/dianxingcuoshijieshao/index.vue
+++ b/frontend/src/modules/dianxingcuoshijieshao/index.vue
@@ -2,7 +2,7 @@
 <template>
   <SidePanelItem
     title="典型设施介绍"
-    :select="selectConfig"
+    :select="selectConfig" 
     @update-values="handlePanelChange"
   >
     <a-spin :spinning="loading">
@@ -51,9 +51,9 @@
       <a-empty v-else description="暂无数据" />
     </a-spin>
   </SidePanelItem>
-
+ 
   <!-- 设施详情弹框 -->
-  <a-modal v-model:open="modalVisible" :title="'设施详情'" width="1536px" :footer="null">
+  <a-modal v-model:open="modalVisibleone" :title="'设施详情'" width="80%" :footer="null">
     <div v-if="currentItem" class="detail-container">
       <ArtsDetail :dataSource="currentItem" :index="getCurrentRealIndex()" />
     </div>
@@ -66,6 +66,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
 import { getMsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -84,9 +85,9 @@ interface MediaItem {
 }
 
 // 弹框控制
-const modalVisible = ref(false);
+const modalVisibleone = ref(false);
 const currentItem = ref<any>(null);
-
+useDraggable(modalVisibleone, { boundary: true, resetOnOpen: true });
 // 加载状态
 const loading = ref(false);
 
@@ -217,7 +218,7 @@ const handleItemClick = () => {
     description: item.description || '',
     title: item.title || ''
   }));
-  modalVisible.value = true;
+  modalVisibleone.value = true;
 };
 
 // 处理下拉选择变化
diff --git a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
index e650e89f..f8b254dd 100644
--- a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
+++ b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
@@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { dwInfoGetKendoListCust } from "@/api/sw";
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers from "./TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue"
+import { useDraggable } from '@/utils/drag';
+
 const JidiSelectEventStore = useJidiSelectEventStore();
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -73,7 +75,7 @@ const baseid = ref('')
 const modalVisible = ref(false);
 const selectedItem: any = ref<DataString | null>(null);
 const twoLayersRef = ref();
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 
 const getListData = async () => {
     loading.value = true;
diff --git a/frontend/src/modules/fishSurvey/FishChangeTu/index.vue b/frontend/src/modules/fishSurvey/FishChangeTu/index.vue
index 2a5cceec..6bff9306 100644
--- a/frontend/src/modules/fishSurvey/FishChangeTu/index.vue
+++ b/frontend/src/modules/fishSurvey/FishChangeTu/index.vue
@@ -4,9 +4,17 @@
     :datetimePicker="datetimePicker"
     @update-values="handlePanelChange"
   >
-    <a-spin :spinning="loading" style="width: 100%;">
-      <div ref="chartContainer" class="chart-container" v-show="sourceData.length > 0"></div>
-      <a-empty v-show="sourceData.length === 0" description="暂无数据" class="empty-container" />
+    <a-spin :spinning="loading" style="width: 100%">
+      <div
+        ref="chartContainer"
+        class="chart-container"
+        v-show="sourceData.length > 0"
+      ></div>
+      <a-empty
+        v-show="sourceData.length === 0"
+        description="暂无数据"
+        class="empty-container"
+      />
     </a-spin>
   </SidePanelItem>
 </template>
@@ -296,8 +304,12 @@ onUnmounted(() => {
 }
 .empty-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 200px;
+ p{
+  text-indent:0px !important;
+ }
 }
 </style>
diff --git a/frontend/src/modules/fishSurvey/FishIntroduce/index.vue b/frontend/src/modules/fishSurvey/FishIntroduce/index.vue
index e910b751..3b90254a 100644
--- a/frontend/src/modules/fishSurvey/FishIntroduce/index.vue
+++ b/frontend/src/modules/fishSurvey/FishIntroduce/index.vue
@@ -68,6 +68,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { fishDicGetKendoList, wbsbGetKendoList } from '@/api/yldc';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'zengZhiZhanJieShaoMod'
@@ -87,7 +89,7 @@ let rvcd = ref('');
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 加载状态
 const loading = ref(false);
 
diff --git a/frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue b/frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue
index d2bca5f2..6e74c811 100644
--- a/frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue
+++ b/frontend/src/modules/fishSurvey/ZhuanZhiIntroduce/index.vue
@@ -62,6 +62,8 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { msstbprptGetKendoList } from '@/api/yldc';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'zengZhiZhanJieShaoMod'
@@ -79,7 +81,7 @@ const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 加载状态
 const loading = ref(false);
 
diff --git a/frontend/src/modules/guoyujiance/index.vue b/frontend/src/modules/guoyujiance/index.vue
index f3c39485..aea4c041 100644
--- a/frontend/src/modules/guoyujiance/index.vue
+++ b/frontend/src/modules/guoyujiance/index.vue
@@ -36,6 +36,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { vmsstbprptGetKendoList } from '@/api/gyss'
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import FPVDDetailMD from './components/FPVDDetailMD.vue'
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'guoyusheshijiansheqingkuang'
@@ -81,6 +83,7 @@ const loading = ref(false);
 const modalVisible = ref(false);
 const selectedFacility = ref<any>(null);
 const title = ref('');
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 处理卡片点击事件
 const handleCardClick = (facility: any) => {
     selectedFacility.value = facility;
diff --git a/frontend/src/modules/guoyusheshijiansheqingkuang/index.vue b/frontend/src/modules/guoyusheshijiansheqingkuang/index.vue
index b7adca44..d75a84d1 100644
--- a/frontend/src/modules/guoyusheshijiansheqingkuang/index.vue
+++ b/frontend/src/modules/guoyusheshijiansheqingkuang/index.vue
@@ -1,201 +1,230 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="过鱼设施">
-        <a-spin :spinning="loading" tip="加载中...">
-            <div class="facility-grid">
-                <div v-for="facility in facilities" :key="facility.name" class="facility-card"
-                    @click="handleFacilityClick(facility)">
-                    <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
-                        <div class="facility-icon">
-                            <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
-                        </div>
-                    </div>
-
-                    <div class="facility-info">
-                        <div class="facility-name">{{ facility.name }}</div>
-                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
-                                }}</span><span>座</span></div>
-                    </div>
-                </div>
+  <SidePanelItem title="过鱼设施">
+    <a-spin :spinning="loading" tip="加载中...">
+      <div class="facility-grid">
+        <div
+          v-for="facility in facilities"
+          :key="facility.name"
+          class="facility-card"
+          @click="handleFacilityClick(facility)"
+        >
+          <div
+            style="
+              width: 60px;
+              height: 62px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            "
+          >
+            <div class="facility-icon">
+              <i
+                style="color: #fff"
+                :class="facility.icon"
+                type="icon-shengtailiuliang2"
+              ></i>
             </div>
-        </a-spin>
-    </SidePanelItem>
-    <!-- 弹框 -->
-    <a-modal v-model:open="modalVisible" :title="'过鱼设施'" :footer="null" width="1536px" @cancel="handleCloseModal">
-       <ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
-    </a-modal>
+          </div>
+
+          <div class="facility-info">
+            <div class="facility-name">{{ facility.name }}</div>
+            <div style="font-size: 16px">
+              <span class="facility-count">{{ facility.count }}</span
+              ><span>座</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </SidePanelItem>
+  <!-- 弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    :title="'过鱼设施'"
+    :footer="null"
+    width="1536px"
+    @cancel="handleCloseModal"
+  >
+    <ModalPage v-if="currentFacility" :data="currentFacility" :jdId="'all'" />
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { buildGetKendoListCust } from '@/api/gyss';
-import  ModalPage  from './ModalPage/index.vue'
+import ModalPage from './ModalPage/index.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'qixidibaohugongzuokaizhanQK'
+  name: 'qixidibaohugongzuokaizhanQK'
 });
 const JidiSelectEventStore = useJidiSelectEventStore();
 // loading状态
 const loading = ref(false);
 // 设施数据
 const facilities = ref([
-    {
-        name: '鱼道',
-        count: 0,
-        icon: 'icon iconfont icon-map-gyssYudao',
-        key: 'FP_1'
-    },
-    {
-        name: '集运鱼系统',
-        count: 0,
-        icon: 'icon iconfont icon-map-gyssJiyunyuxitong',
-        key: 'FP_3'
-    },
-    {
-        name: '升鱼机',
-        count: 0,
-        icon: 'icon iconfont icon-map-gyssShengyuji',
-        key: 'FP_4'
-    },
-    {
-        name: '其他',
-        count: 0,
-        icon: 'icon iconfont icon-map-gyssQita',
-        key: 'FP_5'
-    },
-
+  {
+    name: '鱼道',
+    count: 0,
+    icon: 'icon iconfont icon-map-gyssYudao',
+    key: 'FP_1'
+  },
+  {
+    name: '集运鱼系统',
+    count: 0,
+    icon: 'icon iconfont icon-map-gyssJiyunyuxitong',
+    key: 'FP_3'
+  },
+  {
+    name: '升鱼机',
+    count: 0,
+    icon: 'icon iconfont icon-map-gyssShengyuji',
+    key: 'FP_4'
+  },
+  {
+    name: '其他',
+    count: 0,
+    icon: 'icon iconfont icon-map-gyssQita',
+    key: 'FP_5'
+  }
 ]);
-const baseid = ref('')
+const baseid = ref('');
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentFacility = ref<any>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 //获取页面数据
 const getData = async () => {
-    loading.value = true;
-    try {
-        let params = {
-            "filter": {
-                "logic": "and",
-                "filters": []
-            }
+  loading.value = true;
+  try {
+    let params = {
+      filter: {
+        logic: 'and',
+        filters: []
+      }
+    };
+    const res = await buildGetKendoListCust(params); //适配监控-VD
+    let data = res?.data?.data || res?.data || [];
+
+    // 重置所有设施的count为0
+    facilities.value.forEach(facility => {
+      facility.count = 0;
+    });
+
+    // 遍历接口返回的所有数据
+    data.forEach(item => {
+      const matchedFacility = facilities.value.find(
+        facility => facility.key === item.sttpCode
+      );
+      if (matchedFacility) {
+        // 如果在facilities中找到对应的key，累加到该设施
+        matchedFacility.count +=
+          Number(item.built) + Number(item.building) || 0;
+      } else {
+        // 如果没有找到对应的key，累加到FP_5（其他）
+        const otherFacility = facilities.value.find(
+          facility => facility.key === 'FP_5'
+        );
+        if (otherFacility) {
+          otherFacility.count +=
+            Number(item.built) + Number(item.building) || 0;
         }
-        const res = await buildGetKendoListCust(params); //适配监控-VD
-        let data = res?.data?.data || res?.data || [];
-
-        // 重置所有设施的count为0
-        facilities.value.forEach(facility => {
-            facility.count = 0;
-        });
-
-        // 遍历接口返回的所有数据
-        data.forEach(item => {
-            const matchedFacility = facilities.value.find(facility => facility.key === item.sttpCode);
-            if (matchedFacility) {
-                // 如果在facilities中找到对应的key，累加到该设施
-                matchedFacility.count += Number(item.built) + Number(item.building) || 0;
-            } else {
-                // 如果没有找到对应的key，累加到FP_5（其他）
-                const otherFacility = facilities.value.find(facility => facility.key === 'FP_5');
-                if (otherFacility) {
-                    otherFacility.count += Number(item.built) + Number(item.building) || 0;
-                }
-            }
-        });
-    } catch (error) {
-        console.error('获取数据失败:', error);
-    } finally {
-        loading.value = false;
-    }
-}
+      }
+    });
+  } catch (error) {
+    console.error('获取数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
 // 点击处理函数
 const handleFacilityClick = (facility: any) => {
-    currentFacility.value = facility;
-    modalVisible.value = true;
-
-
+  currentFacility.value = facility;
+  modalVisible.value = true;
 };
 // 关闭弹框
 const handleCloseModal = () => {
-    modalVisible.value = false;
-    currentFacility.value = null;
+  modalVisible.value = false;
+  currentFacility.value = null;
 };
 
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        baseid.value = newVal.wbsCode;
-        getData()
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getData();
+  },
+  { deep: true, immediate: true }
 );
 // 页面加载时执行
 onMounted(() => {
-    // 延迟初始化，确保容器已渲染
-
+  // 延迟初始化，确保容器已渲染
 });
 
 // 组件卸载时清理
-onUnmounted(() => {
-
-});
+onUnmounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .facility-grid {
-    width: 406px;
-    flex-flow: wrap;
-    display: flex;
-    justify-content: space-between;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  width: 406px;
+  flex-flow: wrap;
+  display: flex;
+  justify-content: space-between;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 .facility-card {
-    width: 200px;
-    height: 70px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 4px 0px;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    border-radius: 2px;
-    transition: all 0.3s;
-    cursor: pointer;
-    box-sizing: border-box;
+  width: 200px;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 0px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  transition: all 0.3s;
+  cursor: pointer;
+  box-sizing: border-box;
 }
 
 .facility-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    // margin-right: 8px;
-    background: #5389b5;
-    border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  // margin-right: 8px;
+  background: #5389b5;
+  border-radius: 50%;
 
-    .anticon {
-        font-size: 24px;
-        color: #fff;
-    }
+  .anticon {
+    font-size: 24px;
+    color: #fff;
+  }
 }
 
 .facility-info {
-    flex: 1;
+  flex: 1;
 }
 
 .facility-name {
-    font-size: 16px;
-    color: #333;
-    // margin-bottom: 4px;
-    // font-weight: 500;
+  font-size: 16px;
+  color: #333;
+  // margin-bottom: 4px;
+  // font-weight: 500;
 }
 
 .facility-count {
-    font-size: 18px;
-    color: #2f6b98;
-    // font-weight: 600;
+  font-size: 18px;
+  color: #2f6b98;
+  // font-weight: 600;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/guoyusheshijieshao/index.vue b/frontend/src/modules/guoyusheshijieshao/index.vue
index 1e30aa44..9f2b850d 100644
--- a/frontend/src/modules/guoyusheshijieshao/index.vue
+++ b/frontend/src/modules/guoyusheshijieshao/index.vue
@@ -1,76 +1,102 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="过鱼设施介绍">
-        <!-- Loading 和空状态容器 -->
-        <a-spin :spinning="loading" class="carousel-container-wrapper">
-            <div v-if="hasData" class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
-                <!-- 跑马灯轨道容器 -->
-                <div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
-                    :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
-                    <!-- 遍历所有媒体项（包含克隆项） -->
-                    <div v-for="(item, index) in renderMediaData" :key="index" class="carousel-item"
-                        @click="handleItemClick(originalMediaData)">
-                        <!-- 图片 -->
-                        <img :src="item.url" :alt="item.stnm" loading="lazy" />
-                        <!-- 说明文字（随媒体项移动） -->
-                        <div class="text">{{ item.stnm }}</div>
-                    </div>
-                </div>
-
-                <!-- 面板指示器（固定在底部右侧） -->
-                <div class="pagination-dots-fixed">
-                    <span v-for="(dot, index) in originalMediaData" :key="index" class="dot"
-                        :class="{ active: currentRealIndex === index }" @click="goToSlide(index)"></span>
-                </div>
-            </div>
-            <!-- 暂无数据状态 -->
-
-            <!-- 独立的文字说明区域（随跑马灯切换而变化） -->
-            <div v-if="hasData" class="description-text" @click="handleItemClick(originalMediaData)">
-                {{ currentDescription }}
-            </div>
-            <a-empty v-else description="暂无数据" :image="simpleImage" />
-        </a-spin>
-    </SidePanelItem>
-    <!-- 设施详情弹框 -->
-    <a-modal v-model:open="modalVisible" :title="'设施类型介绍'" width="1536px" :footer="null">
-        <!-- 你在这里编写弹框内容 -->
-        <div v-if="currentItem">
-            <ArtsDetail :dataSource='currentItem' :index="getCurrentRealIndex()" />
+  <SidePanelItem title="过鱼设施介绍">
+    <!-- Loading 和空状态容器 -->
+    <a-spin :spinning="loading" class="carousel-container-wrapper">
+      <div
+        v-if="hasData"
+        class="container"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+      >
+        <!-- 跑马灯轨道容器 -->
+        <div
+          class="carousel-track"
+          :class="{ 'no-transition': isTransitioning }"
+          :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
+        >
+          <!-- 遍历所有媒体项（包含克隆项） -->
+          <div
+            v-for="(item, index) in renderMediaData"
+            :key="index"
+            class="carousel-item"
+            @click="handleItemClick(originalMediaData)"
+          >
+            <!-- 图片 -->
+            <img :src="item.url" :alt="item.stnm" loading="lazy" />
+            <!-- 说明文字（随媒体项移动） -->
+            <div class="text">{{ item.stnm }}</div>
+          </div>
         </div>
-    </a-modal>
-</template>
 
+        <!-- 面板指示器（固定在底部右侧） -->
+        <div class="pagination-dots-fixed">
+          <span
+            v-for="(dot, index) in originalMediaData"
+            :key="index"
+            class="dot"
+            :class="{ active: currentRealIndex === index }"
+            @click="goToSlide(index)"
+          ></span>
+        </div>
+      </div>
+      <!-- 暂无数据状态 -->
+
+      <!-- 独立的文字说明区域（随跑马灯切换而变化） -->
+      <div
+        v-if="hasData"
+        class="description-text"
+        @click="handleItemClick(originalMediaData)"
+      >
+        {{ currentDescription }}
+      </div>
+      <a-empty v-else description="暂无数据" :image="simpleImage" />
+    </a-spin>
+  </SidePanelItem>
+  <!-- 设施详情弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    :title="'设施类型介绍'"
+    width="1536px"
+    :footer="null"
+  >
+    <!-- 你在这里编写弹框内容 -->
+    <div v-if="currentItem">
+      <ArtsDetail :dataSource="currentItem" :index="getCurrentRealIndex()" />
+    </div>
+  </a-modal>
+</template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { fpVmsstbprptGetKendoList } from '@/api/gyss';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
 import { Empty } from 'ant-design-vue';
+import { useDraggable } from '@/utils/drag';
 
 // ==================== 类型定义 ====================
 interface MediaItem {
-    url: string;
-    stnm: string;
-    introduce: string;
+  url: string;
+  stnm: string;
+  introduce: string;
 }
 
 interface CarouselConfig {
-    autoPlayInterval: number;
-    transitionDuration: number;
+  autoPlayInterval: number;
+  transitionDuration: number;
 }
 
 // ==================== 常量配置 ====================
 const CAROUSEL_CONFIG: CarouselConfig = {
-    autoPlayInterval: 4000, // 自动轮播间隔 4秒
-    transitionDuration: 500  // 过渡动画时长 500ms
+  autoPlayInterval: 4000, // 自动轮播间隔 4秒
+  transitionDuration: 500 // 过渡动画时长 500ms
 };
 
 // ==================== Store 和基础配置 ====================
 defineOptions({
-    name: 'ZhiWuYuanJianSheJiJieRuQingKuangBar'
+  name: 'ZhiWuYuanJianSheJiJieRuQingKuangBar'
 });
 
 const JidiSelectEventStore = useJidiSelectEventStore();
@@ -79,6 +105,7 @@ const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 数据状态 ====================
 // 加载状态
 const loading = ref(false);
@@ -108,37 +135,37 @@ let autoPlayTimer: ReturnType<typeof setInterval> | null = null;
  * 结构：[最后一项克隆, 原始数据..., 第一项克隆]
  */
 const renderMediaData = computed<MediaItem[]>(() => {
-    const length = originalMediaData.value.length;
-    if (length === 0) return [];
+  const length = originalMediaData.value.length;
+  if (length === 0) return [];
 
-    return [
-        originalMediaData.value[length - 1], // 克隆最后一项
-        ...originalMediaData.value,           // 原始数据
-        originalMediaData.value[0]            // 克隆第一项
-    ];
+  return [
+    originalMediaData.value[length - 1], // 克隆最后一项
+    ...originalMediaData.value, // 原始数据
+    originalMediaData.value[0] // 克隆第一项
+  ];
 });
 
 /**
  * 获取当前真实的索引（排除克隆项的影响）
  */
 const currentRealIndex = computed(() => {
-    const realLength = originalMediaData.value.length;
-    if (realLength === 0) return 0;
+  const realLength = originalMediaData.value.length;
+  if (realLength === 0) return 0;
 
-    let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
+  let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
 
-    // 处理边界情况（无缝循环时的克隆项）
-    if (realIndex < 0) realIndex = realLength - 1;
-    if (realIndex >= realLength) realIndex = 0;
+  // 处理边界情况（无缝循环时的克隆项）
+  if (realIndex < 0) realIndex = realLength - 1;
+  if (realIndex >= realLength) realIndex = 0;
 
-    return realIndex;
+  return realIndex;
 });
 
 /**
  * 计算当前显示的描述文字
  */
 const currentDescription = computed(() => {
-    return originalMediaData.value[currentRealIndex.value]?.introduce || '';
+  return originalMediaData.value[currentRealIndex.value]?.introduce || '';
 });
 
 // ==================== 核心方法 ====================
@@ -146,280 +173,282 @@ const currentDescription = computed(() => {
  * 启动自动轮播
  */
 const startAutoPlay = () => {
-    stopAutoPlay(); // 先清除旧的定时器
-    autoPlayTimer = setInterval(() => {
-        if (!isHovering.value && !isTransitioning.value) {
-            nextSlide();
-        }
-    }, CAROUSEL_CONFIG.autoPlayInterval);
+  stopAutoPlay(); // 先清除旧的定时器
+  autoPlayTimer = setInterval(() => {
+    if (!isHovering.value && !isTransitioning.value) {
+      nextSlide();
+    }
+  }, CAROUSEL_CONFIG.autoPlayInterval);
 };
 
 /**
  * 停止自动轮播
  */
 const stopAutoPlay = () => {
-    if (autoPlayTimer) {
-        clearInterval(autoPlayTimer);
-        autoPlayTimer = null;
-    }
+  if (autoPlayTimer) {
+    clearInterval(autoPlayTimer);
+    autoPlayTimer = null;
+  }
 };
 
 /**
  * 切换到下一张
  */
 const nextSlide = () => {
-    currentIndex.value++;
+  currentIndex.value++;
 
-    // 延迟检查是否需要无缝跳转（与transition时间一致）
-    setTimeout(() => {
-        handleSeamlessLoop();
-    }, CAROUSEL_CONFIG.transitionDuration);
+  // 延迟检查是否需要无缝跳转（与transition时间一致）
+  setTimeout(() => {
+    handleSeamlessLoop();
+  }, CAROUSEL_CONFIG.transitionDuration);
 };
 
 /**
  * 处理无缝循环（克隆项处理）
  */
 const handleSeamlessLoop = () => {
-    const realLength = originalMediaData.value.length;
-    if (realLength === 0) return;
+  const realLength = originalMediaData.value.length;
+  if (realLength === 0) return;
 
-    // 如果到达克隆的最后一项（索引 = realLength + 1）
-    if (currentIndex.value >= realLength + 1) {
-        // 1. 禁用过渡动画，实现瞬间跳转
-        isTransitioning.value = true;
+  // 如果到达克隆的最后一项（索引 = realLength + 1）
+  if (currentIndex.value >= realLength + 1) {
+    // 1. 禁用过渡动画，实现瞬间跳转
+    isTransitioning.value = true;
 
-        // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
-        currentIndex.value = 1;
+    // 2. 瞬间跳转到真实的第二项（索引1），用户看不到跳变
+    currentIndex.value = 1;
 
-        // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                isTransitioning.value = false;
-            });
-        });
-    }
+    // 3. 等待两帧后恢复过渡动画（确保DOM已更新）
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        isTransitioning.value = false;
+      });
+    });
+  }
 };
 
 /**
  * 处理鼠标进入
  */
 const handleMouseEnter = () => {
-    isHovering.value = true;
+  isHovering.value = true;
 };
 
 /**
  * 处理鼠标离开
  */
 const handleMouseLeave = () => {
-    isHovering.value = false;
+  isHovering.value = false;
 };
 
 /**
  * 跳转到指定幻灯片
  */
 const goToSlide = (targetIndex: number) => {
-    if (isTransitioning.value) return;
+  if (isTransitioning.value) return;
 
-    // 计算目标索引（考虑克隆项偏移）
-    currentIndex.value = targetIndex + 1;
+  // 计算目标索引（考虑克隆项偏移）
+  currentIndex.value = targetIndex + 1;
 };
 
 /**
  * 获取轮播图数据
  */
 const getCarouselData = async () => {
-    loading.value = true;
-    hasData.value = false;
+  loading.value = true;
+  hasData.value = false;
 
-    try {
-        const params = {
-            filter: {
-                logic: 'and',
-                filters: [
-                    {
-                        field: 'sttpFullPath',
-                        operator: 'contains',
-                        dataType: 'string',
-                        value: 'ENV,ENVP,FP,FP'
-                    },
-                    {
-                        field: 'logo',
-                        operator: 'isnotnull',
-                        dataType: 'string'
-                    },
-                    baseid.value !== 'all' ? {
-                        field: 'baseId',
-                        operator: 'eq',
-                        dataType: 'string',
-                        value: baseid.value
-                    } : null
-                ].filter(Boolean)
-            },
-            select: ['introduce', 'logo', 'stnm', 'precis'],
-            sort: [{ field: 'rstcdStepSort', dir: 'asc' }]
-        };
+  try {
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'sttpFullPath',
+            operator: 'contains',
+            dataType: 'string',
+            value: 'ENV,ENVP,FP,FP'
+          },
+          {
+            field: 'logo',
+            operator: 'isnotnull',
+            dataType: 'string'
+          },
+          baseid.value !== 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: baseid.value
+              }
+            : null
+        ].filter(Boolean)
+      },
+      select: ['introduce', 'logo', 'stnm', 'precis'],
+      sort: [{ field: 'rstcdStepSort', dir: 'asc' }]
+    };
 
-        const res = await fpVmsstbprptGetKendoList(params);
-        const data = res?.data?.data || [];
+    const res = await fpVmsstbprptGetKendoList(params);
+    const data = res?.data?.data || [];
 
-        if (data.length > 0) {
-            originalMediaData.value = data.map((item: any) => ({
-                url: item.logo ? `${baseUrl}/?${item.logo}&view=jpg` : '',
-                introduce: item.introduce || '',
-                stnm: item.stnm || ''
-            }));
+    if (data.length > 0) {
+      originalMediaData.value = data.map((item: any) => ({
+        url: item.logo ? `${baseUrl}/?${item.logo}&view=jpg` : '',
+        introduce: item.introduce || '',
+        stnm: item.stnm || ''
+      }));
 
-            // 重置索引到第一项（跳过克隆的首项）
-            currentIndex.value = 1;
-            hasData.value = true;
-        } else {
-            // 无数据时清空
-            originalMediaData.value = [];
-            hasData.value = false;
-        }
-    } catch (error) {
-        console.error('获取轮播图数据失败:', error);
-        originalMediaData.value = [];
-        hasData.value = false;
-    } finally {
-        loading.value = false;
+      // 重置索引到第一项（跳过克隆的首项）
+      currentIndex.value = 1;
+      hasData.value = true;
+    } else {
+      // 无数据时清空
+      originalMediaData.value = [];
+      hasData.value = false;
     }
+  } catch (error) {
+    console.error('获取轮播图数据失败:', error);
+    originalMediaData.value = [];
+    hasData.value = false;
+  } finally {
+    loading.value = false;
+  }
 };
 
 // ==================== 生命周期 ====================
 onMounted(() => {
-    startAutoPlay();
+  startAutoPlay();
 });
 
 onUnmounted(() => {
-    stopAutoPlay();
+  stopAutoPlay();
 });
 
 // ==================== 监听器 ====================
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        if (newVal?.wbsCode) {
-            baseid.value = newVal.wbsCode;
-        } else {
-            baseid.value = 'all';
-        }
-        getCarouselData();
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    if (newVal?.wbsCode) {
+      baseid.value = newVal.wbsCode;
+    } else {
+      baseid.value = 'all';
+    }
+    getCarouselData();
+  },
+  { deep: true, immediate: true }
 );
 // 获取当前真实的索引（排除克隆项的影响）
 const getCurrentRealIndex = () => {
-    const realLength = originalMediaData.value.length;
-    let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
+  const realLength = originalMediaData.value.length;
+  let realIndex = currentIndex.value - 1; // 减去克隆的首项偏移
 
-    // 处理边界情况（无缝循环时的克隆项）
-    if (realIndex < 0) realIndex = realLength - 1;
-    if (realIndex >= realLength) realIndex = 0;
+  // 处理边界情况（无缝循环时的克隆项）
+  if (realIndex < 0) realIndex = realLength - 1;
+  if (realIndex >= realLength) realIndex = 0;
 
-    return realIndex;
+  return realIndex;
 };
 // 处理项目点击事件
 const handleItemClick = (item: any) => {
-    console.log('轮播图项目被点击:', item, getCurrentRealIndex());
-    currentItem.value = item.map((item: any) => ({
-        url: item.url || '',
-        description: item.introduce || '',
-        title: item.stnm || ''
-    }));
-    modalVisible.value = true;
+  console.log('轮播图项目被点击:', item, getCurrentRealIndex());
+  currentItem.value = item.map((item: any) => ({
+    url: item.url || '',
+    description: item.introduce || '',
+    title: item.stnm || ''
+  }));
+  modalVisible.value = true;
 };
 </script>
 
 <style lang="scss" scoped>
 .container {
-    width: 100%;
-    height: 228px;
-    position: relative;
-    overflow: hidden; // 隐藏超出容器的内容
+  width: 100%;
+  height: 228px;
+  position: relative;
+  overflow: hidden; // 隐藏超出容器的内容
 
-    // 跑马灯轨道
-    .carousel-track {
-        display: flex; // 横向排列所有媒体项
+  // 跑马灯轨道
+  .carousel-track {
+    display: flex; // 横向排列所有媒体项
+    width: 100%;
+    height: 100%;
+    transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
+
+    // 禁用过渡动画（用于无缝跳转）
+    &.no-transition {
+      transition: none;
+    }
+
+    // 单个媒体项
+    .carousel-item {
+      min-width: 100%; // 每个项目占满容器宽度
+      height: 100%;
+      position: relative;
+      flex-shrink: 0; // 防止被压缩
+      cursor: pointer;
+
+      img {
         width: 100%;
         height: 100%;
-        transition: transform 0.5s ease-in-out; // 0.5秒平滑过渡
+        object-fit: cover; // 保持比例填充
+      }
 
-        // 禁用过渡动画（用于无缝跳转）
-        &.no-transition {
-            transition: none;
-        }
-
-        // 单个媒体项
-        .carousel-item {
-            min-width: 100%; // 每个项目占满容器宽度
-            height: 100%;
-            position: relative;
-            flex-shrink: 0; // 防止被压缩
-            cursor: pointer;
-
-            img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover; // 保持比例填充
-            }
-
-            .text {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                height: 22px;
-                line-height: 22px;
-                background: rgba(0, 0, 0, 0.1);
-                color: #fff;
-                padding-left: 10px;
-            }
-        }
-    }
-
-    // 固定的面板指示器
-    .pagination-dots-fixed {
+      .text {
         position: absolute;
-        bottom: 10px;
-        right: 10px;
-        display: flex;
-        gap: 6px;
-        z-index: 10; // 确保在文字上方
-
-        .dot {
-            width: 5px;
-            height: 5px;
-            border-radius: 50%;
-            background-color: #D8D8D8;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-
-            &.active {
-                background-color: #005293;
-            }
-
-            &:hover {
-                opacity: 0.8;
-            }
-        }
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 22px;
+        line-height: 22px;
+        background: rgba(0, 0, 0, 0.1);
+        color: #fff;
+        padding-left: 10px;
+      }
     }
+  }
+
+  // 固定的面板指示器
+  .pagination-dots-fixed {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    display: flex;
+    gap: 6px;
+    z-index: 10; // 确保在文字上方
+
+    .dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background-color: #d8d8d8;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+
+      &.active {
+        background-color: #005293;
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
 }
 
 // 独立的文字说明区域
 .description-text {
-    font-size: 14px;
-    line-height: 1.5;
-    transition: all 0.3s ease;
-    // margin-bottom: 20px;
-    cursor: pointer;
+  font-size: 14px;
+  line-height: 1.5;
+  transition: all 0.3s ease;
+  // margin-bottom: 20px;
+  cursor: pointer;
 
-    // 多行文本溢出省略
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-word;
+  // 多行文本溢出省略
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/huanbaoMod/index.vue b/frontend/src/modules/huanbaoMod/index.vue
index d02f6001..32605966 100644
--- a/frontend/src/modules/huanbaoMod/index.vue
+++ b/frontend/src/modules/huanbaoMod/index.vue
@@ -1,5 +1,5 @@
 <!-- SidePanelItem.vue -->
-<template>
+<template> 
   <SidePanelItem title="环保设施情况">
     <a-spin :spinning="loading">
       <div class="facility-grid" v-if="facilities.length > 0">
@@ -30,7 +30,7 @@
     <a-modal
       v-model:open="modalVisible"
       title="环保设施情况"
-      width="1536px"
+      width="80%"
       :footer="null"
     >
       <HuanbaoModTwoLayers
@@ -49,6 +49,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { environmentalProtectionConstruction } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import HuanbaoModTwoLayers from './TwoLayers/HuanbaoModTwoLayers.vue';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -82,7 +83,7 @@ const modalRes = ref({
   bldstt: '',
   hydrodtin: '1'
 });
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 获取数据
 const getData = async () => {
   if (!baseid.value) return;
diff --git a/frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue b/frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue
index 706daa1b..d48f56b8 100644
--- a/frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue
+++ b/frontend/src/modules/huanbaozdjcgzkzQK/huanbaozidongjianceEJ/index.vue
@@ -21,6 +21,14 @@
           :options="jiDiList"
           @change="handleBaseChange"
         />
+        <a-select
+          v-model:value="searchData.stcd"
+          placeholder=" "
+          style="width: 200px"
+          show-search
+          :filter-option="filterOption"
+          :options="rstcdOptions"
+        />
         <a-input
           v-if="tabIndex !== '7'"
           v-model:value="searchData.stnm"
@@ -44,7 +52,6 @@
       :search-params="searchParams"
       :transform-data="customTransform"
     >
-
       <template #coenvwState="{ column, record }">
         <a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
           {{ record.coenvwState > 0 ? '在线' : '离线' }}
@@ -85,13 +92,15 @@ const props = defineProps<{
 const tabIndex = ref(String(props.activeKey ?? ''));
 const searchData = ref<any>({
   baseId: props.baseId || 'all',
-  stnm: null
+  stnm: null,
+  stcd: null
 });
 const modelStore = useModelStore();
 const tableRef = ref();
 
 // ==================== 基地列表数据 ====================
 const jiDiList: any = ref([]);
+const rstcdOptions: any = ref([]);
 
 // ==================== 表格列定义 ====================
 const columns = computed(() => {
@@ -103,29 +112,27 @@ const columns = computed(() => {
         title: '所属基地',
         dataIndex: 'baseName',
         width: '150px',
-         merge: true
-        
+        merge: true
       },
       {
         key: 'stnm',
         title: '电站名称',
         dataIndex: 'stnm',
-        width: '176px',
-        
+        width: '176px'
       },
       {
         key: 'dvtp',
         title: '开发方式',
         dataIndex: 'dvtp',
         width: '120px',
-       
+
         slots: { customRender: 'dvtp' }
       },
       {
         key: 'stindx',
         title: '生态流量站类型',
         dataIndex: 'stindx',
-       
+
         slots: { customRender: 'stindxForEng' }
       },
       {
@@ -140,7 +147,7 @@ const columns = computed(() => {
         title: '监测状态',
         dataIndex: 'coenvwState',
         width: '120px',
-       
+
         slots: { customRender: 'coenvwState' }
       },
       {
@@ -167,15 +174,14 @@ const columns = computed(() => {
       key: 'stnm',
       title: '测站名称',
       dataIndex: 'stnm',
-      width: '176px',
-      
+      width: '176px'
     },
     {
       key: 'ennm',
       title: '电站',
       dataIndex: 'ennm',
       width: '150px',
-      
+
       slots: { customRender: 'ennm' }
     },
     {
@@ -189,8 +195,7 @@ const columns = computed(() => {
       key: 'stindx',
       title: '监测指标',
       dataIndex: 'stindx',
-      width: '150px',
-      
+      width: '150px'
     }
   ];
 
@@ -260,15 +265,66 @@ const searchParams = computed(() => {
 // ==================== 方法 ====================
 const handleTabChange = (key: string) => {
   tabIndex.value = key;
+  handleReset();
   handleSearch();
 };
 
 const filterOption = (input: string, option: any) => {
   return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
 };
-
+const getRstcdData = async () => {
+  const parmas = {
+    filter: {
+      logic: 'and',
+      filters: [
+        searchData.value.baseId != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'contains',
+              dataType: 'string',
+              value: '02'
+            }
+          : 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']
+  };
+  const res = await vmsstbprptGetKendoList(parmas);
+  rstcdOptions.value = res.data.data.map((item) => {
+    return {
+      value: item.stcd,
+      label: item.stnm
+    };
+  });
+};
 const handleBaseChange = () => {
-  handleSearch();
+  searchData.value.stcd = null
+  getRstcdData();
+  // handleSearch();
 };
 
 const dvtpText = (dvtp: number) => {
@@ -287,7 +343,13 @@ const handleSearch = () => {
       value: searchData.value.baseId
     });
   }
-
+  if(searchData.value.stcd){
+    filters.push({
+      field: 'stcd',
+      operator: 'eq',
+      value: searchData.value.stcd
+    });
+  }
   if (searchData.value.stnm) {
     filters.push({
       field: 'stnm',
@@ -441,8 +503,10 @@ const handleSearch = () => {
 const handleReset = () => {
   searchData.value = {
     baseId: 'all',
-    stnm: null
+    stnm: null,
+    stcd: null
   };
+  getRstcdData()
   handleSearch();
 };
 
@@ -542,7 +606,7 @@ const handleViewDetail = (record: any, type: string) => {
         sttpCode === 'WTVT' || sttpCode === 'WTVT,' ? '1' : '0';
     } else {
       modelStore.modalVisible = true;
-      modelStore.params.sttp =  sttpCode;
+      modelStore.params.sttp = sttpCode;
       modelStore.params.stcd = record.stcd;
       modelStore.title = record.stnm;
     }
@@ -557,6 +621,7 @@ onMounted(() => {
       value: element.wbsCode
     });
   });
+  getRstcdData()
   handleSearch();
 });
 </script>
diff --git a/frontend/src/modules/huanbaozdjcgzkzQK/index.vue b/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
index 8e09ea9a..179d5e07 100644
--- a/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
+++ b/frontend/src/modules/huanbaozdjcgzkzQK/index.vue
@@ -68,6 +68,7 @@ import svg_liuliangjiancezhan from '@/assets/svg/liuliangjiancezhan.svg';
 import svg_shuizhijiancezhan from '@/assets/svg/shuizhijiancezhan.svg';
 import svg_zengzhizhanshuizhizhan from '@/assets/svg/zengzhizhanshuizhizhan.svg';
 import svg_qixidi from '@/assets/svg/qixidi.svg';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
   name: 'huanbaoMod'
@@ -103,7 +104,7 @@ const baseid = ref('');
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentFacility = ref<IFacility | null>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const fetchData = () => {
   let params = {
     filter: {
diff --git a/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue b/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue
new file mode 100644
index 00000000..ab353c35
--- /dev/null
+++ b/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue
@@ -0,0 +1,1957 @@
+<template>
+  <div class="aisptk-page">
+    <!-- 搜索表单 -->
+    <a-form layout="inline" class="search-form">
+      <a-form-item label="基地选择">
+        <a-select
+          v-model:value="searchData.baseid"
+          placeholder="请选择基地"
+          style="width: 180px"
+          :options="jidiOptions"
+          @change="handleBaseChange"
+        />
+      </a-form-item>
+      <a-form-item v-if="vdListShow !== '3'" label="电站名称">
+        <a-input
+          v-model:value="searchData.stnm"
+          placeholder="请输入电站"
+          allow-clear
+          style="width: 180px"
+        />
+      </a-form-item>
+      <a-form-item v-else label="电站选择">
+        <a-select
+          v-model:value="searchData.rstcd"
+          placeholder="请选择电站"
+          style="width: 180px"
+          :options="stcdData"
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item label="时间">
+        <a-date-picker
+          v-model:value="searchData.month"
+          picker="month"
+          format="YYYY-MM"
+          :allow-clear="false"
+          style="width: 150px"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" @click="handleSearch">查询</a-button>
+      </a-form-item>
+    </a-form>
+
+    <!-- Tabs + 图表表格 -->
+    <a-tabs v-model:activeKey="tabIndex" class="aisptk-tabs">
+      <!-- 视图切换按钮 -->
+      <div class="view-switch-buttons">
+        <a-tooltip placement="top" title="视频">
+          <div
+            class="view-btn"
+            :class="{ active: vdListShow === '1' }"
+            @click="vdListShow = '1'"
+          >
+            <i class="icon iconfont icon-video"></i>
+          </div>
+        </a-tooltip>
+        <a-tooltip placement="top" title="数据列表">
+          <div
+            class="view-btn"
+            :class="{ active: vdListShow === '2' }"
+            @click="vdListShow = '2'"
+          >
+            <i class="icon iconfont icon-dataTable"></i>
+          </div>
+        </a-tooltip>
+        <a-tooltip placement="top" title="日历">
+          <div
+            class="view-btn"
+            :class="{ active: vdListShow === '3' }"
+            @click="vdListShow = '3'"
+          >
+            <i class="icon iconfont icon-calendar"></i>
+          </div>
+        </a-tooltip>
+      </div>
+      <a-tab-pane
+        v-for="item in tabDisplayList"
+        :key="item.key"
+        :tab="item.tabLabel"
+      >
+        <!-- 数据列表视图（饼图+表格） -->
+        <div v-show="vdListShow === '2'" class="chart-table-layout">
+          <!-- 左侧饼图 -->
+          <div class="chart-section">
+            <a-spin :spinning="chartLoading">
+              <div
+                :ref="(el: any) => setChartRef(el, item.key)"
+                class="chart-container"
+              ></div>
+            </a-spin>
+            <div
+              v-if="!chartLoading && chartData.length === 0"
+              class="chart-empty-overlay"
+            >
+              <a-empty description="暂无数据" />
+            </div>
+          </div>
+
+          <!-- 右侧表格 -->
+          <div class="table-section">
+            <BasicTable
+              :ref="(el: any) => setTableRef(el, item.key)"
+              :columns="currentColumns"
+              :scroll-y="450"
+              :scroll-x="600"
+              :list-url="getAiChartTable"
+              :search-params="tableSearchParams"
+              :transform-data="customTransform"
+            >
+              <template #tm="{ record }">
+                {{ record.tm ? dayjs(record.tm).format('YYYY-MM-DD') : '-' }}
+              </template>
+              <template #fid="{ record }">
+                <a-button
+                  type="link"
+                  style="padding: 4px"
+                  :disabled="!record.fid"
+                  @click="handleViewAttachment(record.fid)"
+                >
+                  查看附件
+                </a-button>
+              </template>
+            </BasicTable>
+          </div>
+        </div>
+
+        <!-- 视频视图 -->
+        <div v-show="vdListShow === '1'" class="chart-table-layout">
+          <!-- 左侧饼图 -->
+          <div class="chart-section">
+            <a-spin :spinning="chartLoading">
+              <div
+                :ref="(el: any) => setVideoChartRef(el, item.key)"
+                class="chart-container"
+              ></div>
+            </a-spin>
+            <div
+              v-if="!chartLoading && chartData.length === 0"
+              class="chart-empty-overlay"
+            >
+              <a-empty description="暂无数据" />
+            </div>
+          </div>
+
+          <!-- 右侧视频列表 -->
+          <div class="video-section">
+            <div class="video-mode">
+              <div class="video-main" v-loading="videoLoading">
+                <div
+                  v-if="activeMedia.type === 'image' && activeMedia.src"
+                  class="media-display"
+                >
+                  <img
+                    :src="activeMedia.src"
+                    style="width: 100%; height: 100%; object-fit: contain"
+                  />
+                </div>
+                <div
+                  v-else-if="activeMedia.type === 'video' && activeMedia.src"
+                  class="media-display"
+                >
+                  <LiveVideoBox
+                    :videoData="{ url: activeMedia.src }"
+                    height="100%"
+                    :showTitle="false"
+                  />
+                </div>
+                <div v-else class="media-empty">
+                  <a-empty description="请选择右侧数据" />
+                </div>
+              </div>
+              <div class="video-sidebar" v-loading="videoLoading">
+                <div class="sidebar-list" v-if="videoList.length > 0">
+                  <div
+                    v-for="video in videoList"
+                    :key="video.fid"
+                    class="sidebar-item"
+                    :class="{ active: activeFid === video.fid }"
+                    @click="handleSelectMedia(video)"
+                  >
+                    <div class="item-thumb">
+                      <img v-if="video.type === 'img'" :src="video.imgPath" />
+                      <div
+                        v-else-if="video.type === 'vdsp'"
+                        class="thumb-placeholder"
+                      >
+                        <img :src="videoCover" />
+                      </div>
+                      <span v-else class="no-media">无媒体</span>
+                    </div>
+                    <div class="item-time">
+                      {{ video.stName }}{{ video.tm }}
+                    </div>
+                  </div>
+                </div>
+                <a-empty v-else description="暂无数据" class="sidebar-empty" />
+              </div>
+            </div>
+            <div
+              class="sidebar-pagination"
+              style="margin-top: 10px; display: flex; justify-content: end"
+            >
+              <a-pagination
+                v-model:current="videoPage"
+                v-model:pageSize="videoTake"
+                :page-size-options="videoPageSizeOptions"
+                :total="videoTotal"
+                show-size-changer
+                size="small"
+                @change="handleVideoPageChange"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 日历视图 -->
+        <div v-show="vdListShow === '3'" class="calendar-mode">
+          <a-spin :spinning="calendarLoading">
+            <a-calendar
+              v-model:value="calendarValue"
+              @panelChange="handleCalendarPanelChange"
+              @select="handleCalendarSelect"
+            >
+              <template #headerRender="{ current }"> </template>
+              <template #dateCellRender="{ current }">
+                <div class="calendar-content">
+                  <template v-if="isCurrentMonth(current)">
+                    <div
+                      class="content_state1"
+                      v-if="getCalendarDataForDay(current)"
+                    >
+                      监测
+                    </div>
+                    <div class="content_state4" v-else>未监测</div>
+                    <div
+                      v-if="getCalendarDataForDay(current)?.status"
+                      :class="
+                        getStatusClass(getCalendarDataForDay(current)?.status)
+                      "
+                      @click.stop="
+                        handleCalendarDayClick(
+                          current,
+                          getCalendarDataForDay(current)
+                        )
+                      "
+                    >
+                      {{
+                        getStatusText(getCalendarDataForDay(current)?.status)
+                      }}
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </a-calendar>
+          </a-spin>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+
+    <!-- 附件预览弹框 -->
+    <CommonAttachmentModal
+      v-model:open="attachmentModalVisible"
+      :fid="currentAttachmentFid"
+      title="查看附件"
+    />
+
+    <!-- 日历详情弹窗 -->
+    <a-modal
+      v-model:open="detailModalVisible"
+      title="视频详情"
+      width="80vw"
+      :footer="null"
+      destroyOnClose
+      :teleport="false"
+      :bodyStyle="{ height: '70vh' }"
+    >
+      <VideoDetails
+        v-if="detailModalVisible"
+        :baseid="searchData.baseid"
+        :month="searchData.month"
+        :type="tabIndex"
+        :vd-date="detailDate"
+        :active-key="detailActiveKey"
+        :stnm="searchData.stnm"
+        :rstcd="searchData.rstcd"
+        :pie-code="pieCode"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick
+} from 'vue';
+import * as echarts from 'echarts';
+import type { ECharts } from 'echarts';
+import BasicTable from '@/components/BasicTable/index.vue';
+import CommonAttachmentModal from '@/components/MapModal/components/CommonAttachmentModal.vue';
+import LiveVideoBox from '@/views/shiPinJianKong/components/LiveVideoBox.vue';
+import VideoDetails from './components/VideoDetails.vue';
+import {
+  getAiGyssList,
+  getAiChartTable,
+  getAiRecord,
+  getAiFile,
+  getAiRstcd
+} from '@/api/zngj';
+import { postIdUrl } from '@/api/mapModal';
+import dayjs from 'dayjs';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import videoCover from '@/assets/images/videFm.jpg';
+import { useDraggable } from '@/utils/drag';
+;
+const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
+
+// ==================== Props ====================
+const props = defineProps<{
+  month?: string;
+  action?: string;
+  baseid?: string;
+  lyName?: string;
+}>();
+
+// ==================== Store ====================
+const JidiSelectEventStore = useJidiSelectEventStore();
+
+// ==================== 搜索状态 ====================
+const jidiOptions = ref<Array<{ label: string; value: string }>>([]);
+const searchData = ref({
+  baseid: props.baseid || 'all',
+  stnm: '',
+  rstcd: '',
+  month: props.month ? dayjs(props.month) : dayjs()
+});
+const stcdData = ref<Array<{ label: string; value: string }>>([]);
+
+// ==================== 弹框状态 ====================
+const attachmentModalVisible = ref(false);
+const currentAttachmentFid = ref('');
+
+// ==================== Tabs 状态 ====================
+const tabIndex = ref(props.action ?? 'AI_5006');
+const tabList = ref<any[]>([
+  { key: 'AI_5006', value: '赶鱼栅运行', unit: '次', count: 0 },
+  { key: 'AI_5007', value: props.lyName || '升鱼机运行', unit: '次', count: 0 },
+  { key: 'AI_5008', value: 'AGV小车', unit: '次', count: 0 },
+  { key: 'AI_5002', value: '运鱼车运行', unit: '次', count: 0 },
+  { key: 'AI_5003', value: '运鱼船出港', unit: '次', count: 0 },
+  { key: 'AI_5012', value: '鱼道放流', unit: '次', count: 0 }
+]);
+
+// ==================== 视图切换状态 ====================
+const vdListShow = ref<'1' | '2' | '3'>('2');
+
+// Tab 显示列表（根据视图类型动态计算标题）
+const tabDisplayList = computed(() =>
+  tabList.value.map(item => ({
+    ...item,
+    tabLabel:
+      vdListShow.value === '3'
+        ? item.value
+        : `${item.value}(${item.count}${item.unit})`
+  }))
+);
+
+// ==================== 图表状态 ====================
+const chartRefs = ref<Map<string, HTMLElement>>(new Map());
+let chartInstance: ECharts | null = null;
+const chartData = ref<any[]>([]);
+const chartLoading = ref(true);
+const pieCode = ref<string[]>([]);
+
+// ==================== 视频视图状态 ====================
+const videoPage = ref(1);
+const videoTake = ref(20);
+const videoPageSizeOptions = ['20', '50', '100'];
+const videoTotal = ref(0);
+const videoLoading = ref(false);
+const videoList = ref<any[]>([]);
+const activeFid = ref('');
+const activeMedia = ref<{ type: string; src: string }>({ type: '', src: '' });
+
+// 视频视图饼图状态
+const videoChartRefs = ref<Map<string, HTMLElement>>(new Map());
+let videoChartInstance: ECharts | null = null;
+
+// ==================== 日历视图状态 ====================
+const calendarLoading = ref(false);
+const calendarData = ref<any[]>([]);
+const calendarValue = ref(searchData.value.month);
+const detailModalVisible = ref(false);
+const detailActiveKey = ref('2');
+const detailDate = ref('');
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true })
+// 日历状态映射（运行/未运行）
+const calendarStatusMap: Record<
+  string,
+  { name: string; className: string; type: string; dataType: string }
+> = {
+  '3': {
+    name: '运行',
+    className: 'content_state2',
+    type: '',
+    dataType: '2'
+  },
+  '4': {
+    name: '未运行',
+    className: 'content_state3',
+    type: '',
+    dataType: '1'
+  }
+};
+
+// 函数式 ref 绑定
+const setChartRef = (el: any, key: string) => {
+  if (el instanceof HTMLElement) {
+    chartRefs.value.set(key, el);
+  }
+};
+
+const setVideoChartRef = (el: any, key: string) => {
+  if (el instanceof HTMLElement) {
+    videoChartRefs.value.set(key, el);
+  }
+};
+
+// ==================== 表格引用 ====================
+const tableRefs = ref<Map<string, any>>(new Map());
+
+const setTableRef = (el: any, key: string) => {
+  if (el && !(el instanceof HTMLElement)) {
+    tableRefs.value.set(key, el);
+  }
+};
+
+// 安全获取 table 实例
+const getTableInstance = () => {
+  return tableRefs.value.get(tabIndex.value) || null;
+};
+
+// ==================== 表格列配置 ====================
+// 赶鱼栅运行 (AI_5006)
+const gysyxColumns = [
+  {
+    key: 'stnm',
+    title: '设施名称',
+    dataIndex: 'stnm',
+    fixed: 'left' as const,
+    width: 150,
+    ellipsis: true
+  },
+  {
+    key: 'ennm',
+    title: '所属电站',
+    dataIndex: 'ennm',
+    width: 120,
+    ellipsis: true
+  },
+  {
+    key: 'tm',
+    title: '赶鱼栅运行时间',
+    dataIndex: 'tm',
+    width: 150,
+    ellipsis: true,
+    slots: { customRender: 'tm' }
+  },
+  {
+    key: 'fid',
+    title: '操作',
+    dataIndex: 'fid',
+    width: 100,
+    ellipsis: true,
+    slots: { customRender: 'fid' }
+  }
+];
+
+// 升鱼机运行 (AI_5007)
+const syjyxColumns = [
+  {
+    key: 'stnm',
+    title: '设施名称',
+    dataIndex: 'stnm',
+    fixed: 'left' as const,
+    width: 150,
+    ellipsis: true
+  },
+  {
+    key: 'ennm',
+    title: '所属电站',
+    dataIndex: 'ennm',
+    width: 120,
+    ellipsis: true
+  },
+  {
+    key: 'tm',
+    title: props.lyName ? `${props.lyName}时间` : '升鱼机运行时间',
+    dataIndex: 'tm',
+    width: 150,
+    ellipsis: true,
+    slots: { customRender: 'tm' }
+  },
+  {
+    key: 'fid',
+    title: '操作',
+    dataIndex: 'fid',
+    width: 100,
+    ellipsis: true,
+    slots: { customRender: 'fid' }
+  }
+];
+
+// AGV小车 (AI_5008)
+const zwyyhColumns = [
+  {
+    key: 'stnm',
+    title: '设施名称',
+    dataIndex: 'stnm',
+    fixed: 'left' as const,
+    width: 150,
+    ellipsis: true
+  },
+  {
+    key: 'ennm',
+    title: '所属电站',
+    dataIndex: 'ennm',
+    width: 120,
+    ellipsis: true
+  },
+  {
+    key: 'tm',
+    title: '运行时间',
+    dataIndex: 'tm',
+    width: 150,
+    ellipsis: true,
+    slots: { customRender: 'tm' }
+  },
+  {
+    key: 'fid',
+    title: '操作',
+    dataIndex: 'fid',
+    width: 100,
+    ellipsis: true,
+    slots: { customRender: 'fid' }
+  }
+];
+
+// 运鱼车运行 (AI_5002)
+const ycydColumns = [
+  {
+    key: 'stnm',
+    title: '设施名称',
+    dataIndex: 'stnm',
+    fixed: 'left' as const,
+    width: 150,
+    ellipsis: true
+  },
+  {
+    key: 'ennm',
+    title: '所属电站',
+    dataIndex: 'ennm',
+    width: 120,
+    ellipsis: true
+  },
+  {
+    key: 'tm',
+    title: '运行时间',
+    dataIndex: 'tm',
+    width: 150,
+    ellipsis: true,
+    slots: { customRender: 'tm' }
+  },
+  {
+    key: 'fid',
+    title: '操作',
+    dataIndex: 'fid',
+    width: 100,
+    ellipsis: true,
+    slots: { customRender: 'fid' }
+  }
+];
+
+// 运鱼船出港 (AI_5003)
+const yyccgColumns = [
+  {
+    key: 'ennm',
+    title: '所属电站',
+    dataIndex: 'ennm',
+    fixed: 'left' as const,
+    width: 120,
+    ellipsis: true
+  },
+  {
+    key: 'tm',
+    title: '出港时间',
+    dataIndex: 'tm',
+    width: 150,
+    ellipsis: true,
+    slots: { customRender: 'tm' }
+  },
+  {
+    key: 'fid',
+    title: '操作',
+    dataIndex: 'fid',
+    width: 100,
+    ellipsis: true,
+    slots: { customRender: 'fid' }
+  }
+];
+
+const currentColumns = computed(() => {
+  switch (tabIndex.value) {
+    case 'AI_5006':
+      return gysyxColumns;
+    case 'AI_5007':
+      return syjyxColumns;
+    case 'AI_5008':
+      return zwyyhColumns;
+    case 'AI_5002':
+      return ycydColumns;
+    case 'AI_5003':
+      return yyccgColumns;
+    case 'AI_5012':
+      return zwyyhColumns; // 鱼道放流使用相同列配置
+    default:
+      return gysyxColumns;
+  }
+});
+
+// ==================== 构建过滤条件 ====================
+const buildFilter = () => {
+  const filters: any[] = [
+    {
+      field: 'type',
+      operator: 'eq',
+      value: tabIndex.value
+    },
+    pieCode.value.length > 0 && searchData.value.baseid === 'all'
+      ? {
+          field: 'baseId',
+          operator: 'in',
+          dataType: 'string',
+          value: pieCode.value
+        }
+      : null,
+    pieCode.value.length > 0 && searchData.value.baseid !== 'all'
+      ? {
+          field: 'rstcd',
+          operator: 'in',
+          dataType: 'string',
+          value: pieCode.value
+        }
+      : null,
+    searchData.value.baseid !== 'all' && pieCode.value.length === 0
+      ? {
+          field: 'baseId',
+          operator: 'eq',
+          dataType: 'string',
+          value: searchData.value.baseid
+        }
+      : null,
+    {
+      field: 'tm',
+      operator: 'gte',
+      dataType: 'date',
+      value: dayjs(searchData.value.month)
+        .startOf('month')
+        .format('YYYY-MM-DD 00:00:00')
+    },
+    {
+      field: 'tm',
+      operator: 'lte',
+      dataType: 'date',
+      value: dayjs(searchData.value.month)
+        .endOf('month')
+        .format('YYYY-MM-DD 23:59:59')
+    },
+    searchData.value.stnm
+      ? {
+          field: 'stnm',
+          operator: 'contains',
+          value: searchData.value.stnm
+        }
+      : null
+  ].filter(Boolean);
+
+  return {
+    logic: 'and',
+    filters
+  };
+};
+
+// ==================== 表格搜索参数 ====================
+const tableSearchParams = computed(() => ({
+  sort: [
+    { field: 'rstcdStepSort', dir: 'asc' },
+    { field: 'tm', dir: 'desc' }
+  ],
+  group: [],
+  select: [],
+  groupResultFlat: false
+}));
+
+// ==================== 数据转换 ====================
+const customTransform = (res: any) => {
+  return {
+    records: res?.data?.data || [],
+    total: res?.data?.total || 0
+  };
+};
+
+// ==================== 获取 Tab 数量统计 ====================
+const getTabList = async () => {
+  try {
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          searchData.value.baseid !== 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                value: searchData.value.baseid
+              }
+            : null,
+          {
+            field: 'startTime',
+            operator: 'gte',
+            dataType: 'date',
+            value: dayjs(searchData.value.month)
+              .startOf('month')
+              .format('YYYY-MM-DD 00:00:00')
+          },
+          {
+            field: 'endTime',
+            operator: 'lte',
+            dataType: 'date',
+            value: dayjs(searchData.value.month)
+              .endOf('month')
+              .format('YYYY-MM-DD 23:59:59')
+          },
+          searchData.value.stnm
+            ? {
+                field: 'stnm',
+                operator: 'contains',
+                value: searchData.value.stnm
+              }
+            : null
+        ].filter(Boolean)
+      }
+    };
+
+    const res = await getAiGyssList(params);
+    const data = res?.data ?? {};
+
+    tabList.value = [
+      {
+        key: 'AI_5006',
+        value: '赶鱼栅运行',
+        unit: '次',
+        count: data?.fpGysCnt ?? 0
+      },
+      {
+        key: 'AI_5007',
+        value: props.lyName || '升鱼机运行',
+        unit: '次',
+        count: data?.fpSyjCnt ?? 0
+      },
+      {
+        key: 'AI_5008',
+        value: 'AGV小车',
+        unit: '次',
+        count: data?.fpAgvCnt ?? 0
+      },
+      {
+        key: 'AI_5002',
+        value: '运鱼车运行',
+        unit: '次',
+        count: data?.fpYychCnt ?? 0
+      },
+      {
+        key: 'AI_5003',
+        value: '运鱼船出港',
+        unit: '次',
+        count: data?.fpYycCnt ?? 0
+      },
+      {
+        key: 'AI_5012',
+        value: '鱼道放流',
+        unit: '次',
+        count: data?.fpYdhCnt ?? 0
+      }
+    ];
+  } catch (error) {
+    console.error('获取Tab统计失败:', error);
+    tabList.value = [
+      { key: 'AI_5006', value: '赶鱼栅运行', unit: '次', count: 0 },
+      {
+        key: 'AI_5007',
+        value: props.lyName || '升鱼机运行',
+        unit: '次',
+        count: 0
+      },
+      { key: 'AI_5008', value: 'AGV小车', unit: '次', count: 0 },
+      { key: 'AI_5002', value: '运鱼车运行', unit: '次', count: 0 },
+      { key: 'AI_5003', value: '运鱼船出港', unit: '次', count: 0 },
+      { key: 'AI_5012', value: '鱼道放流', unit: '次', count: 0 }
+    ];
+  }
+};
+
+// ==================== 获取饼图数据 ====================
+const getChartData = async () => {
+  chartLoading.value = true;
+  try {
+    const filter = buildFilter();
+    const group =
+      searchData.value.baseid === 'all'
+        ? [
+            { dir: 'asc', field: 'baseStepSort' },
+            { dir: 'asc', field: 'baseId' },
+            { dir: 'asc', field: 'baseName' }
+          ]
+        : [
+            { dir: 'asc', field: 'rstcd' },
+            { dir: 'asc', field: 'ennm' }
+          ];
+
+    const params = {
+      filter,
+      group,
+      sort: [
+        {
+          field: 'rstcdStepSort',
+          dir: 'asc'
+        },
+        {
+          field: 'tm',
+          dir: 'desc'
+        }
+      ]
+    };
+
+    const res = await getAiChartTable(params);
+    const dataObj = res?.data?.data ?? {};
+    const rawData = Array.isArray(dataObj) ? dataObj : dataObj?.data || [];
+
+    const list: { name: string; value: number; key: string }[] = [];
+
+    if (searchData.value.baseid === 'all') {
+      rawData.forEach((level1: any) => {
+        if (level1?.items?.length) {
+          level1.items.forEach((level2: any) => {
+            if (level2?.items?.length) {
+              level2.items.forEach((level3: any) => {
+                if (level3?.items?.length) {
+                  level3.items.forEach((item: any) => {
+                    list.push({
+                      name: item?.BASENAME || level3.key || '-',
+                      value:
+                        item?.COUNT_BASENAME ||
+                        item?.COUNT_BASEID ||
+                        level3.count ||
+                        0,
+                      key: item?.BASEID || level2.key || ''
+                    });
+                  });
+                } else {
+                  list.push({
+                    name: level3.key || '-',
+                    value: level3.count || 0,
+                    key: level2.key || ''
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    } else {
+      rawData.forEach((el: any) => {
+        list.push({
+          name: el?.ennm_value || el?.ennm || '-',
+          value: el?.count_rstcd || el?.count_ennm || 0,
+          key: el?.rstcd || el?.rstcd_value || ''
+        });
+      });
+    }
+
+    chartData.value = list;
+  } catch (error) {
+    console.error('获取饼图数据失败:', error);
+    chartData.value = [];
+  } finally {
+    chartLoading.value = false;
+    // 等待 DOM 更新后再初始化图表
+    await nextTick();
+    setTimeout(() => {
+      initChart();
+      initVideoChart();
+    }, 50);
+  }
+};
+
+// ==================== 初始化饼图 ====================
+const initChart = (retryCount = 0) => {
+  // 根据当前 tabIndex 获取对应 tab 的 DOM
+  const dom = chartRefs.value.get(tabIndex.value);
+
+  if (!dom) {
+    console.warn(
+      `[initChart] DOM not found for tab ${tabIndex.value}, retrying...`
+    );
+    if (retryCount < 10) {
+      setTimeout(() => initChart(retryCount + 1), 100);
+    }
+    return;
+  }
+
+  // 检查 DOM 是否可见（宽高不为 0）
+  const rect = dom.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    if (retryCount < 10) {
+      console.warn(
+        `[initChart] DOM has 0 dimensions, retrying in 100ms... (attempt ${
+          retryCount + 1
+        }/10)`
+      );
+      setTimeout(() => initChart(retryCount + 1), 100);
+    } else {
+      console.error(
+        '[initChart] DOM still has 0 dimensions after 10 retries, giving up'
+      );
+    }
+    return;
+  }
+
+  if (!chartInstance) {
+    chartInstance = echarts.init(dom);
+  }
+
+  const option: echarts.EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) =>
+        `${params.marker} ${params.name}: ${params.value}(次)`
+    },
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 80,
+      textStyle: { fontSize: 12 }
+    },
+    series: []
+  };
+
+  if (!chartData.value || chartData.value.length === 0) {
+    chartInstance.setOption(option, true);
+    return;
+  }
+
+  const total = chartData.value.reduce(
+    (acc: number, item: any) => acc + (item.value || 0),
+    0
+  );
+  const currentTab = tabList.value.find(t => t.key === tabIndex.value);
+  const titleText = currentTab ? `${currentTab.value}(次)` : '识别(次)';
+
+  option.series = [
+    {
+      type: 'pie',
+      radius: ['26%', '35%'],
+      center: ['35%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: true,
+        formatter: '{c}'
+      },
+      labelLine: {
+        show: true,
+        length: 12,
+        length2: 12
+      },
+      data: chartData.value.map((item: any) => ({
+        name: item.name,
+        value: item.value
+      }))
+    }
+  ];
+
+  option.title = {
+    text: String(total),
+    left: '34%',
+    top: '44%',
+    textAlign: 'center',
+    textStyle: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      color: '#333'
+    },
+    subtext: titleText,
+    subtextStyle: {
+      fontSize: 12,
+      color: '#333'
+    }
+  };
+
+  chartInstance.setOption(option, true);
+
+  // 图例点击联动过滤表格
+  chartInstance.off('legendselectchanged');
+  chartInstance.on('legendselectchanged', (e: any) => {
+    const trueRivers = Object.keys(e.selected).filter(
+      (key: string) => e.selected[key]
+    );
+    const allFalse = Object.values(e.selected).every(
+      (value: any) => value === false
+    );
+    const selectedKeys = chartData.value
+      .filter((item: any) => trueRivers.includes(item.name))
+      .map((item: any) => item.key);
+    pieCode.value = allFalse ? [] : selectedKeys;
+    nextTick(() => {
+      const filter = buildFilter();
+      getTableInstance()?.getList(filter);
+    });
+  });
+};
+
+// ==================== 初始化视频视图饼图 ====================
+const initVideoChart = (retryCount = 0) => {
+  const dom = videoChartRefs.value.get(tabIndex.value);
+
+  if (!dom) {
+    if (retryCount < 10) {
+      setTimeout(() => initVideoChart(retryCount + 1), 100);
+    }
+    return;
+  }
+
+  const rect = dom.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    if (retryCount < 10) {
+      setTimeout(() => initVideoChart(retryCount + 1), 100);
+    }
+    return;
+  }
+
+  if (!videoChartInstance) {
+    videoChartInstance = echarts.init(dom);
+  }
+
+  const option: echarts.EChartsOption = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) =>
+        `${params.marker} ${params.name}: ${params.value}(次)`
+    },
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 80,
+      textStyle: { fontSize: 12 }
+    },
+    series: []
+  };
+
+  if (!chartData.value || chartData.value.length === 0) {
+    videoChartInstance.setOption(option, true);
+    return;
+  }
+
+  const total = chartData.value.reduce(
+    (acc: number, item: any) => acc + (item.value || 0),
+    0
+  );
+  const currentTab = tabList.value.find(t => t.key === tabIndex.value);
+  const titleText = currentTab ? `${currentTab.value}(次)` : '识别(次)';
+
+  option.series = [
+    {
+      type: 'pie',
+      radius: ['26%', '35%'],
+      center: ['35%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: true,
+        formatter: '{c}'
+      },
+      labelLine: {
+        show: true,
+        length: 12,
+        length2: 12
+      },
+      data: chartData.value.map((item: any) => ({
+        name: item.name,
+        value: item.value
+      }))
+    }
+  ];
+
+  option.title = {
+    text: String(total),
+    left: '34%',
+    top: '44%',
+    textAlign: 'center',
+    textStyle: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      color: '#333'
+    },
+    subtext: titleText,
+    subtextStyle: {
+      fontSize: 12,
+      color: '#333'
+    }
+  };
+
+  videoChartInstance.setOption(option, true);
+
+  // 图例点击联动过滤视频列表
+  videoChartInstance.off('legendselectchanged');
+  videoChartInstance.on('legendselectchanged', (e: any) => {
+    const trueRivers = Object.keys(e.selected).filter(
+      (key: string) => e.selected[key]
+    );
+    const allFalse = Object.values(e.selected).every(
+      (value: any) => value === false
+    );
+    const selectedKeys = chartData.value
+      .filter((item: any) => trueRivers.includes(item.name))
+      .map((item: any) => item.key);
+    pieCode.value = allFalse ? [] : selectedKeys;
+    nextTick(() => {
+      videoPage.value = 1;
+      activeFid.value = '';
+      activeMedia.value = { type: '', src: '' };
+      fetchVideoList();
+    });
+  });
+};
+
+// ==================== 获取视频列表 ====================
+const fetchVideoList = async () => {
+  videoLoading.value = true;
+  try {
+    const filter = buildFilter();
+    const skip = (videoPage.value - 1) * videoTake.value;
+
+    const params = {
+      filter,
+      skip,
+      take: videoTake.value,
+      sort: [
+        { field: 'rstcdStepSort', dir: 'asc' },
+        { field: 'tm', dir: 'desc' }
+      ]
+    };
+
+    const res = await getAiChartTable(params);
+    const rData = res?.data ?? {};
+    const rawData = rData?.data || [];
+    videoTotal.value = rData?.total || rawData.length;
+
+    // 按 fid 展开（支持逗号分隔的多个 fid）
+    const expandedData = rawData
+      .map((item: any) => {
+        const fids = item.fid ? item.fid.split(',') : [];
+        return fids.map((fid: string) => ({ ...item, fid: fid.trim() }));
+      })
+      .flat();
+
+    // 收集所有 fid
+    const allFids = expandedData
+      .filter((item: any) => item.fid)
+      .map((item: any) => item.fid)
+      .join(',');
+
+    // 调用 postIdUrl 获取媒体详情
+    let mediaMap: Record<string, any> = {};
+    if (allFids) {
+      const formData = new FormData();
+      formData.append('id', allFids);
+      const mediaRes: any = await postIdUrl(formData);
+      mediaMap = mediaRes?.data || {};
+    }
+
+    // 构建列表
+    const list: any[] = [];
+    expandedData.forEach((vd: any) => {
+      const fileInfo = mediaMap[vd.fid];
+      const hasValidExtension =
+        fileInfo && ['.jpg', '.png'].includes(fileInfo.ext);
+
+      let flpth = '';
+      let imgPath = '';
+      let type = '';
+
+      if (hasValidExtension !== undefined && !hasValidExtension) {
+        // 非图片（视频）
+        flpth = fileInfo.fullpath;
+        type = 'vdsp';
+      } else if (hasValidExtension !== undefined) {
+        // 图片
+        imgPath = fileInfo.fullpath;
+        type = 'img';
+      }
+
+      const tm = vd.tm ? dayjs(vd.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
+      list.push({
+        ...vd,
+        flpth,
+        imgPath,
+        flnm: `${vd.ennm || ''}${tm}`,
+        type,
+        tm
+      });
+    });
+
+    // 过滤掉无效项
+    const listMap = list.filter(
+      item => item.flpth !== '' || item.imgPath !== ''
+    );
+    videoList.value = listMap;
+    // 默认选中第一条
+    if (listMap.length > 0 && !activeFid.value) {
+      handleSelectMedia(listMap[0]);
+    }
+  } catch (error) {
+    console.error('获取视频列表失败:', error);
+    videoList.value = [];
+  } finally {
+    videoLoading.value = false;
+  }
+};
+
+// 选择媒体
+const handleSelectMedia = (item: any) => {
+  activeFid.value = item.fid;
+
+  if (item.type === 'img') {
+    activeMedia.value = {
+      type: 'image',
+      src: baseUrl + '?' + item.fid + '&view=jpg'
+    };
+  } else if (item.type === 'vdsp') {
+    activeMedia.value = {
+      type: 'video',
+      src: baseUrl + '?' + item.fid + '&view=jpg'
+    };
+  } else {
+    activeMedia.value = { type: '', src: '' };
+  }
+};
+
+// 分页切换
+const handleVideoPageChange = () => {
+  activeFid.value = '';
+  activeMedia.value = { type: '', src: '' };
+  fetchVideoList();
+};
+
+// ==================== 获取电站列表（用于日历视图的rstcd下拉） ====================
+const colStcdData = async () => {
+  try {
+    const filters: any[] = [
+      { field: 'type', operator: 'eq', value: tabIndex.value },
+      searchData.value.baseid !== 'all'
+        ? { field: 'baseId', operator: 'eq', value: searchData.value.baseid }
+        : null,
+      {
+        field: 'startTime',
+        operator: 'gte',
+        dataType: 'date',
+        value: dayjs(searchData.value.month)
+          .startOf('month')
+          .format('YYYY-MM-DD 00:00:00')
+      },
+      {
+        field: 'endTime',
+        operator: 'lte',
+        dataType: 'date',
+        value: dayjs(searchData.value.month)
+          .endOf('month')
+          .format('YYYY-MM-DD 23:59:59')
+      }
+    ].filter(Boolean);
+
+    const params = { filter: { logic: 'and', filters } };
+    const res: any = await getAiRstcd(params);
+    const _data = res?.data?.data ?? [];
+    const list = _data.map((item: any) => ({
+      label: item.stnm,
+      value: item.stcd
+    }));
+
+    // 如果当前选中的rstcd不在新列表中，重置为第一个
+    const selected = list?.filter(
+      (item: any) => item.value === searchData.value.rstcd
+    );
+    if (selected?.length === 0) {
+      searchData.value.rstcd = list?.[0]?.value ?? '';
+    }
+
+    stcdData.value = list;
+  } catch (error) {
+    console.error('获取电站列表失败:', error);
+  }
+};
+
+// ==================== 日历视图函数 ====================
+// 判断是否是当前月份
+const isCurrentMonth = (current: any): boolean => {
+  return (
+    current.month() === calendarValue.value.month() &&
+    current.year() === calendarValue.value.year()
+  );
+};
+
+// 获取某天的日历数据
+const getCalendarDataForDay = (current: any): any => {
+  return calendarData.value.find(
+    (item: any) => dayjs(item.dt).format('DD') === current.format('DD')
+  );
+};
+
+// 获取状态样式类
+const getStatusClass = (status: number | string) => {
+  const statusKey = String(status);
+  return calendarStatusMap[statusKey]?.className || '';
+};
+
+// 获取状态文本
+const getStatusText = (status: number | string) => {
+  const statusKey = String(status);
+  return calendarStatusMap[statusKey]?.name || '';
+};
+
+// 获取日历数据
+const fetchCalendarData = async () => {
+  calendarLoading.value = true;
+  try {
+    const filters: any[] = [
+      // baseId过滤（支持饼图联动）
+      pieCode.value.length > 0 && searchData.value.baseid === 'all'
+        ? {
+            field: 'baseId',
+            operator: 'in',
+            dataType: 'string',
+            value: pieCode.value
+          }
+        : searchData.value.baseid !== 'all'
+        ? { field: 'baseId', operator: 'eq', value: searchData.value.baseid }
+        : null,
+      // rstcd过滤（饼图联动时）
+      pieCode.value.length > 0 && searchData.value.baseid !== 'all'
+        ? {
+            field: 'rstcd',
+            operator: 'in',
+            dataType: 'string',
+            value: pieCode.value
+          }
+        : null,
+      // type过滤
+      { field: 'type', operator: 'eq', value: tabIndex.value },
+      // 时间范围
+      {
+        field: 'startTime',
+        operator: 'gte',
+        dataType: 'date',
+        value: dayjs(searchData.value.month)
+          .startOf('month')
+          .format('YYYY-MM-DD 00:00:00')
+      },
+      {
+        field: 'endTime',
+        operator: 'lte',
+        dataType: 'date',
+        value: dayjs(searchData.value.month)
+          .endOf('month')
+          .format('YYYY-MM-DD 23:59:59')
+      },
+      // stnm文本搜索
+      searchData.value.stnm
+        ? { field: 'stnm', operator: 'contains', value: searchData.value.stnm }
+        : null,
+      // rstcd电站选择（日历视图下）
+      searchData.value.rstcd
+        ? {
+            field: 'rstcd',
+            operator: 'in',
+            dataType: 'string',
+            value: [searchData.value.rstcd]
+          }
+        : null
+    ].filter(Boolean);
+
+    const params = {
+      filter: { logic: 'and', filters },
+      sort: [{ field: 'tm', dir: 'desc' }]
+    };
+
+    const res: any = await getAiRecord(params);
+    const payload = res?.data || {};
+    calendarData.value = Array.isArray(payload) ? payload : payload.data || [];
+  } catch (error) {
+    console.error('获取日历数据失败:', error);
+    calendarData.value = [];
+  } finally {
+    calendarLoading.value = false;
+  }
+};
+
+// 日历面板切换
+const handleCalendarPanelChange = (date: any) => {
+  calendarValue.value = date;
+  fetchCalendarData();
+};
+
+// 日历日期选择
+const handleCalendarSelect = (date: any) => {
+  calendarValue.value = date;
+};
+
+// 点击日历日期
+const handleCalendarDayClick = async (current: any, dayData: any) => {
+  const date = dayjs(current).format('YYYY-MM-DD');
+  const status = dayData.status;
+  const statusInfo = calendarStatusMap[String(status)];
+
+  if (!statusInfo) return;
+
+  detailDate.value = date;
+  detailActiveKey.value = statusInfo.dataType;
+  detailModalVisible.value = true;
+};
+
+// ==================== 事件处理 ====================
+const handleBaseChange = () => {
+  pieCode.value = [];
+  handleSearch();
+};
+
+const handleSearch = () => {
+  getTabList();
+  getChartData();
+  videoPage.value = 1;
+  activeFid.value = '';
+  activeMedia.value = { type: '', src: '' };
+  fetchVideoList();
+  fetchCalendarData();
+  nextTick(() => {
+    const filter = buildFilter();
+    getTableInstance()?.getList(filter);
+  });
+};
+
+const handleViewAttachment = (fid: string) => {
+  currentAttachmentFid.value = fid;
+  attachmentModalVisible.value = true;
+};
+
+// ==================== 监听基地变化 ====================
+watch(
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    if (newVal && newVal.wbsCode) {
+      searchData.value.baseid = newVal.wbsCode;
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// ==================== 监听视图切换 ====================
+watch(vdListShow, () => {
+  if (vdListShow.value === '1') {
+    fetchVideoList();
+    getChartData();
+  } else if (vdListShow.value === '2') {
+    getChartData();
+    nextTick(() => {
+      const filter = buildFilter();
+      getTableInstance()?.getList(filter);
+    });
+  } else if (vdListShow.value === '3') {
+    colStcdData();
+    fetchCalendarData();
+  }
+});
+
+// ==================== 监听baseid/tabIndex/month变化，更新电站列表 ====================
+watch(
+  () => [searchData.value.baseid, tabIndex.value, searchData.value.month],
+  () => {
+    colStcdData();
+  }
+);
+
+// ==================== 监听月份变化，同步日历显示 ====================
+watch(
+  () => searchData.value.month,
+  (newMonth) => {
+    calendarValue.value = newMonth;
+  }
+);
+
+// ==================== 监听 Tab 切换 ====================
+watch(tabIndex, () => {
+  pieCode.value = [];
+  // 清空视频状态
+  videoPage.value = 1;
+  activeFid.value = '';
+  activeMedia.value = { type: '', src: '' };
+  // 销毁旧实例，避免 setOption 到已隐藏的 DOM
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+  if (videoChartInstance) {
+    videoChartInstance.dispose();
+    videoChartInstance = null;
+  }
+  // 等待新 tab DOM 渲染后再请求数据
+  nextTick(() => {
+    getChartData();
+    fetchVideoList();
+    fetchCalendarData();
+    nextTick(() => {
+      const filter = buildFilter();
+      getTableInstance()?.getList(filter);
+    });
+  });
+});
+
+// ==================== 窗口 resize ====================
+const handleResize = () => {
+  const dom = chartRefs.value.get(tabIndex.value);
+  if (dom) {
+    chartInstance?.resize();
+  }
+};
+
+// ==================== 生命周期 ====================
+onMounted(() => {
+  // 初始化基地选项
+  const jidiList = JidiSelectEventStore.jidiData || [];
+  jidiOptions.value = jidiList.map((item: any) => ({
+    label: item.wbsName,
+    value: item.wbsCode
+  }));
+
+  getTabList();
+  getChartData();
+  fetchVideoList();
+  fetchCalendarData();
+  nextTick(() => {
+    const filter = buildFilter();
+    getTableInstance()?.getList(filter);
+  });
+
+  window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  chartInstance?.dispose();
+  chartInstance = null;
+});
+</script>
+
+<style lang="scss" scoped>
+.aisptk-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .search-form {
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 12px;
+  }
+
+  .aisptk-tabs {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    :deep(.ant-tabs-content) {
+      height: 100%;
+    }
+
+    :deep(.ant-tabs-tabpane) {
+      height: 100%;
+    }
+  }
+
+  .view-switch-buttons {
+    position: absolute;
+    right: 0;
+    top: -60px;
+    display: flex;
+    z-index: 10;
+
+    .view-btn {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 10px;
+      border: 1px solid #ccdae7;
+      border-radius: 2px;
+      cursor: pointer;
+      color: #333;
+      background: transparent;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: #2f6b98;
+        color: #2f6b98;
+      }
+
+      &.active {
+        background: #2f6b98;
+        color: #ffffff;
+        border-color: #2f6b98;
+      }
+    }
+  }
+
+  .view-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .chart-table-layout {
+    display: flex;
+    gap: 16px;
+    height: 100%;
+
+    .chart-section {
+      width: 35%;
+      min-width: 300px;
+      position: relative;
+
+      .chart-container {
+        width: 100%;
+        height: 480px;
+      }
+
+      .chart-empty-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+        background: rgba(255, 255, 255, 0.8);
+      }
+    }
+
+    .table-section {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .video-section {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  .video-mode {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+    height: 520px;
+
+    .video-main {
+      flex: 0 0 80%;
+      background: #000;
+      border-radius: 4px;
+      overflow: hidden;
+
+      .media-display {
+        width: 100%;
+        height: 100%;
+      }
+
+      .media-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+    }
+
+    .video-sidebar {
+      flex: 0 0 20%;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid #e8e8e8;
+      border-radius: 4px;
+      overflow: hidden;
+
+      .sidebar-list {
+        flex: 1;
+        overflow-y: auto;
+
+        .sidebar-item {
+          padding: 8px;
+          cursor: pointer;
+          border-bottom: 1px solid #f0f0f0;
+          transition: background 0.2s;
+
+          &:hover {
+            background: #f5f5f5;
+          }
+
+          &.active {
+            background: #e6f7ff;
+          }
+
+          .item-thumb {
+            width: 100%;
+            height: 110px;
+            background: #1a1a1a;
+            border-radius: 4px;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+
+            .thumb-placeholder {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+
+              .no-media {
+                font-size: 12px;
+                color: #999;
+              }
+            }
+          }
+
+          .item-time {
+            margin-top: 6px;
+            font-size: 12px;
+            color: #666;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .sidebar-empty {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      .sidebar-pagination {
+        padding: 8px;
+        text-align: center;
+        border-top: 1px solid #e8e8e8;
+      }
+    }
+  }
+
+  .calendar-mode {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 60vh;
+    overflow: auto;
+    padding-top: 200px;
+
+    :deep(.ant-picker-calendar) {
+      width: 90%;
+      max-width: 1200px;
+    }
+
+    :deep(.ant-picker-content thead th) {
+      font-size: 0;
+    }
+
+    :deep(.ant-picker-content thead th)::before {
+      font-size: 16px;
+      font-weight: 700;
+      padding-right: 10px;
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(1))::before {
+      content: '周一';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(2))::before {
+      content: '周二';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(3))::before {
+      content: '周三';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(4))::before {
+      content: '周四';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(5))::before {
+      content: '周五';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(6))::before {
+      content: '周六';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(7))::before {
+      content: '周日';
+    }
+
+    :deep(.ant-picker-calendar) {
+      .ant-picker-calendar-date-value {
+        font-size: 18px !important;
+        padding-right: 8px;
+      }
+
+      .ant-picker-calendar-date {
+        border: 1px solid rgb(213, 225, 233) !important;
+        margin: 0px !important;
+      }
+
+      .ant-picker-panel {
+        .ant-picker-content {
+          thead {
+            th {
+              padding: 6px 0;
+              border: 1px solid rgb(213, 225, 233) !important;
+            }
+          }
+
+          td {
+            padding: 0;
+
+            .ant-picker-calendar-date {
+              padding: 3px;
+              border: none;
+            }
+
+            &.ant-picker-cell-selected .ant-picker-calendar-date {
+              background: transparent;
+            }
+
+            &.ant-picker-cell-today .ant-picker-calendar-date::before {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    .calendar-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1px;
+      padding: 2px;
+      text-align: right;
+
+      .content_state1 {
+        width: 100%;
+        background-color: #67c23a;
+        color: #000;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: auto;
+        padding-right: 8px;
+        font-size: 12px;
+      }
+
+      .content_state4 {
+        width: 100%;
+        background-color: #e6a23c;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: auto;
+        padding-right: 8px;
+        font-size: 12px;
+      }
+
+      .content_state2 {
+        width: 100%;
+        background-color: #e1f3d8;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: pointer;
+        padding-right: 8px;
+        font-size: 12px;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+
+      .content_state3 {
+        width: 100%;
+        background-color: #faecd8;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: pointer;
+        padding-right: 8px;
+        font-size: 12px;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  .detail-empty {
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/frontend/src/modules/liuyu/ai/spdzwaijc/components/VideoDetails.vue b/frontend/src/modules/liuyu/ai/spdzwaijc/components/VideoDetails.vue
new file mode 100644
index 00000000..75a95abf
--- /dev/null
+++ b/frontend/src/modules/liuyu/ai/spdzwaijc/components/VideoDetails.vue
@@ -0,0 +1,317 @@
+<template>
+  <div class="video-details">
+    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
+      <a-tab-pane key="2" tab="运行">
+        <a-spin :spinning="loading">
+          <div class="video-container">
+            <VideoPlayer
+              :list="videoList"
+              :activeFid="activeFid"
+              :activeMedia="activeMedia"
+              :loading="loading"
+              :page="page"
+              :pageSize="pageSize"
+              :pageSizeOptions="pageSizeOptions"
+              :total="total"
+              @select="handleSelectMedia"
+              @pageChange="handlePageChange"
+            />
+          </div>
+        </a-spin>
+      </a-tab-pane>
+      <a-tab-pane key="1" tab="未运行">
+        <a-spin :spinning="loading">
+          <div class="video-container">
+            <VideoPlayer
+              :list="videoList"
+              :activeFid="activeFid"
+              :activeMedia="activeMedia"
+              :loading="loading"
+              :page="page"
+              :pageSize="pageSize"
+              :pageSizeOptions="pageSizeOptions"
+              :total="total"
+              @select="handleSelectMedia"
+              @pageChange="handlePageChange"
+            />
+          </div>
+        </a-spin>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue';
+import VideoPlayer from '@/modules/yunXingGaoJIng/Aisbdbyx/components/VideoPlayer.vue';
+import { getAiFile } from '@/api/zngj';
+import { postIdUrl } from '@/api/mapModal';
+import dayjs from 'dayjs';
+
+const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
+
+// ==================== Props ====================
+const props = defineProps<{
+  baseid?: string;
+  month?: any;
+  type?: string;
+  vdDate?: string;
+  activeKey?: string;
+  stnm?: string;
+  rstcd?: string;
+  pieCode?: string[];
+}>();
+
+// ==================== 状态 ====================
+const activeKey = ref(props.activeKey || '2');
+const loading = ref(false);
+const videoList = ref<any[]>([]);
+const activeFid = ref('');
+const activeMedia = ref<{ type: string; src: string }>({ type: '', src: '' });
+const page = ref(1);
+const pageSize = ref(20);
+const pageSizeOptions = ['20', '50', '100'];
+const total = ref(0);
+
+// ==================== 获取视频列表 ====================
+const fetchVideoList = async () => {
+  loading.value = true;
+  try {
+    const filters: any[] = [
+      // baseId过滤
+      props.pieCode && props.pieCode.length > 0 && props.baseid === 'all'
+        ? {
+            field: 'baseId',
+            operator: 'in',
+            dataType: 'string',
+            value: props.pieCode
+          }
+        : props.baseid && props.baseid !== 'all'
+        ? { field: 'baseId', operator: 'eq', value: props.baseid }
+        : null,
+      // rstcd过滤
+      props.pieCode && props.pieCode.length > 0 && props.baseid !== 'all'
+        ? {
+            field: 'rstcd',
+            operator: 'in',
+            dataType: 'string',
+            value: props.pieCode
+          }
+        : null,
+      // type过滤
+      { field: 'type', operator: 'eq', value: props.type },
+      // dataType过滤（运行/未运行）
+      { field: 'dataType', operator: 'eq', value: activeKey.value },
+      // 时间范围（按天）
+      {
+        field: 'tm',
+        operator: 'gte',
+        dataType: 'date',
+        value: dayjs(props.vdDate)
+          .startOf('day')
+          .format('YYYY-MM-DD 00:00:00')
+      },
+      {
+        field: 'tm',
+        operator: 'lte',
+        dataType: 'date',
+        value: dayjs(props.vdDate)
+          .endOf('day')
+          .format('YYYY-MM-DD 23:59:59')
+      },
+      // stnm文本搜索
+      props.stnm
+        ? { field: 'stnm', operator: 'contains', value: props.stnm }
+        : null,
+      // rstcd电站选择
+      props.rstcd
+        ? {
+            field: 'rstcd',
+            operator: 'in',
+            dataType: 'string',
+            value: [props.rstcd]
+          }
+        : null
+    ].filter(Boolean);
+
+    const params = {
+      filter: { logic: 'and', filters },
+      sort: [{ field: 'tm', dir: 'desc' }],
+      skip: (page.value - 1) * pageSize.value,
+      take: pageSize.value
+    };
+
+    const res: any = await getAiFile(params);
+    const rData = res?.data ?? {};
+    const rawData = rData?.data || [];
+    total.value = rData?.total || rawData.length;
+
+    // 按 fid 展开
+    const expandedData = rawData
+      .map((item: any) => {
+        const fids = item.fid ? item.fid.split(',') : [];
+        return fids.map((fid: string) => ({ ...item, fid: fid.trim() }));
+      })
+      .flat();
+
+    // 收集所有 fid
+    const allFids = expandedData
+      .filter((item: any) => item.fid)
+      .map((item: any) => item.fid)
+      .join(',');
+
+    // 调用 postIdUrl 获取媒体详情
+    let mediaMap: Record<string, any> = {};
+    if (allFids) {
+      const formData = new FormData();
+      formData.append('id', allFids);
+      const mediaRes: any = await postIdUrl(formData);
+      mediaMap = mediaRes?.data || {};
+    }
+
+    // 构建列表
+    const list: any[] = [];
+    expandedData.forEach((vd: any) => {
+      const fileInfo = mediaMap[vd.fid];
+      const hasValidExtension =
+        fileInfo && ['.jpg', '.png'].includes(fileInfo.ext);
+
+      let flpth = '';
+      let imgPath = '';
+      let type = '';
+
+      if (hasValidExtension !== undefined && !hasValidExtension) {
+        flpth = fileInfo.fullpath;
+        type = 'vdsp';
+      } else if (hasValidExtension !== undefined) {
+        imgPath = fileInfo.fullpath;
+        type = 'img';
+      }
+
+      const tm = vd.tm ? dayjs(vd.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
+      list.push({
+        ...vd,
+        flpth,
+        imgPath,
+        flnm: `${vd.ennm || ''}${tm}`,
+        type,
+        tm
+      });
+    });
+
+    // 过滤掉无效项
+    const listMap = list.filter(
+      item => item.flpth !== '' || item.imgPath !== ''
+    );
+    videoList.value = listMap;
+
+    // 默认选中第一条
+    if (listMap.length > 0) {
+      const first = listMap[0];
+      activeFid.value = first.fid;
+      if (first.type === 'img') {
+        activeMedia.value = {
+          type: 'image',
+          src: baseUrl + '?' + first.fid + '&view=jpg'
+        };
+      } else if (first.type === 'vdsp') {
+        activeMedia.value = {
+          type: 'video',
+          src: baseUrl + '?' + first.fid + '&view=jpg'
+        };
+      } else {
+        activeMedia.value = { type: '', src: '' };
+      }
+    } else {
+      activeFid.value = '';
+      activeMedia.value = { type: '', src: '' };
+    }
+  } catch (error) {
+    console.error('获取视频详情列表失败:', error);
+    videoList.value = [];
+    activeFid.value = '';
+    activeMedia.value = { type: '', src: '' };
+  } finally {
+    loading.value = false;
+  }
+};
+
+// ==================== 事件处理 ====================
+const handleTabChange = () => {
+  page.value = 1;
+  activeFid.value = '';
+  activeMedia.value = { type: '', src: '' };
+  fetchVideoList();
+};
+
+const handleSelectMedia = (item: any) => {
+  activeFid.value = item.fid;
+
+  if (item.type === 'img') {
+    activeMedia.value = {
+      type: 'image',
+      src: baseUrl + '?' + item.fid + '&view=jpg'
+    };
+  } else if (item.type === 'vdsp') {
+    activeMedia.value = {
+      type: 'video',
+      src: baseUrl + '?' + item.fid + '&view=jpg'
+    };
+  } else {
+    activeMedia.value = { type: '', src: '' };
+  }
+};
+
+const handlePageChange = (newPage: number, newPageSize: number) => {
+  page.value = newPage;
+  pageSize.value = newPageSize;
+  activeFid.value = '';
+  activeMedia.value = { type: '', src: '' };
+  fetchVideoList();
+};
+
+// ==================== 监听 ====================
+watch(
+  () => [props.vdDate, props.type, activeKey.value],
+  () => {
+    if (props.vdDate) {
+      page.value = 1;
+      fetchVideoList();
+    }
+  }
+);
+
+// ==================== 生命周期 ====================
+onMounted(() => {
+  if (props.vdDate) {
+    fetchVideoList();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.video-details {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  :deep(.ant-tabs) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-tabs-content) {
+    flex: 1;
+  }
+
+  :deep(.ant-tabs-tabpane) {
+    height: 100%;
+  }
+
+  .video-container {
+    height: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/modules/liuyu/ai/spdzwaijc/index.vue b/frontend/src/modules/liuyu/ai/spdzwaijc/index.vue
index 928e6e02..5a61a858 100644
--- a/frontend/src/modules/liuyu/ai/spdzwaijc/index.vue
+++ b/frontend/src/modules/liuyu/ai/spdzwaijc/index.vue
@@ -3,7 +3,12 @@
     <SidePanelItem title="AI识别过鱼设施运行" :datetimePicker="datetimePicker" @update-values="handlePanelChange">
         <a-spin :spinning="dataLoading" tip="加载中...">
             <div class="facility-grid">
-                <div v-for="facility in facilities" :key="facility.key" class="facility-card">
+                <div
+                    v-for="facility in facilities"
+                    :key="facility.key"
+                    class="facility-card"
+                    @click="handleCardClick(facility.action)"
+                >
                     <div style="width: 70px;height: 62px;display: flex;align-items: center;justify-content: center;">
                         <div class="facility-icon">
                             <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
@@ -20,14 +25,33 @@
             </div>
         </a-spin>
     </SidePanelItem>
+
+    <!-- AI识别过鱼设施运行详情弹框 -->
+    <a-modal
+        v-model:open="modalVisible"
+        title="AI识别过鱼设施运行"
+        width="1536px"
+        :footer="null"
+        @cancel="handleModalClose"
+    >
+        <AISPTK
+            v-if="modalVisible"
+            :month="datetimePicker.value"
+            :action="currentAction"
+            :baseid="baseid"
+            :ly-name="lyName"
+        />
+    </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import AISPTK from './AISPTK.vue';
 import { getAiGyssList } from '@/api/zngj';
 import dayjs from 'dayjs';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -39,6 +63,10 @@ const baseid = ref('');
 const dataLoading = ref(false);
 const panelDetail = ref<any>({});
 
+// ==================== 弹框状态 ====================
+const modalVisible = ref(false);
+const currentAction = ref('AI_5006');
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const lyName = computed(() => baseid.value === '02' ? '升鱼斗运行' : '升鱼机运行');
 
 // ==================== 日期选择器配置 ====================
@@ -56,37 +84,43 @@ const facilities = computed(() => [
         key: 'gys',
         name: '赶鱼栅运行',
         count: panelDetail.value?.fpGysCnt ?? 0,
-        icon: 'icon iconfont icon-ganyushan'
+        icon: 'icon iconfont icon-ganyushan',
+        action: 'AI_5006'
     },
     {
         key: 'syj',
         name: lyName.value,
         count: panelDetail.value?.fpSyjCnt ?? 0,
-        icon: 'icon iconfont icon-liuliangjiancezhan1'
+        icon: 'icon iconfont icon-liuliangjiancezhan1',
+        action: 'AI_5007'
     },
     {
         key: 'agv',
         name: 'AGV小车',
         count: panelDetail.value?.fpAgvCnt ?? 0,
-        icon: 'icon iconfont icon-agvxiaoche'
+        icon: 'icon iconfont icon-agvxiaoche',
+        action: 'AI_5008'
     },
     {
         key: 'yych',
         name: '运鱼车运行',
         count: panelDetail.value?.fpYychCnt ?? 0,
-        icon: 'icon iconfont icon-yunyuche'
+        icon: 'icon iconfont icon-yunyuche',
+        action: 'AI_5002'
     },
     {
         key: 'yyc',
         name: '运鱼船出港',
         count: panelDetail.value?.fpYycCnt ?? 0,
-        icon: 'icon iconfont icon-yunyuchuan'
+        icon: 'icon iconfont icon-yunyuchuan',
+        action: 'AI_5003'
     },
     {
         key: 'ydh',
         name: '鱼道放流',
         count: panelDetail.value?.fpYdhCnt ?? 0,
-        icon: 'icon iconfont icon-yudaofangliu'
+        icon: 'icon iconfont icon-yudaofangliu',
+        action: 'AI_5012'
     }
 ]);
 
@@ -99,6 +133,15 @@ const handlePanelChange = (data: any) => {
     getCardData();
 };
 
+const handleCardClick = (action: string) => {
+    currentAction.value = action;
+    modalVisible.value = true;
+};
+
+const handleModalClose = () => {
+    modalVisible.value = false;
+};
+
 // ==================== 获取卡片统计数据 ====================
 const getCardData = async () => {
     if (!datetimePicker.value.value || !baseid.value) return;
diff --git a/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue b/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue
index 4f7d7759..a29ced40 100644
--- a/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue
+++ b/frontend/src/modules/liuyu/yichangyujing/shengtailiuliangxianzhigaojing/shengtailiuliangxianshuju.vue
@@ -40,6 +40,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import SidePanelItem from "@/components/SidePanelItem/index.vue";
 import { getStllGaojingList } from '@/api/zngj';
 import ModeGaoJing from './ModeGaoJing.vue';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -51,7 +52,7 @@ const baseid = ref('');
 const dataLoading = ref(false);
 const isModalOpen = ref(false);
 const currentWarnState = ref('');
-
+useDraggable(isModalOpen, { boundary: true, resetOnOpen: true });
 const data = ref([
     {
         name:'正常',
diff --git a/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue b/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue
index 1b485eb3..418e21dd 100644
--- a/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue
+++ b/frontend/src/modules/liuyu/yichangyujing/shuizhijiancegaojing/shuizhijianceshuju.vue
@@ -38,6 +38,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import SidePanelItem from "@/components/SidePanelItem/index.vue";
 import { getShuizhiGaojingList } from '@/api/zngj';
 import ModeGaoJing from './ModeGaoJing.vue';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
     name: "shuizhijianceshuju",
@@ -51,7 +52,7 @@ const defaultValue = ref<string>('0');
 // 弹框状态
 const modalVisible = ref(false);
 const currentWarnState = ref('');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const handleCardClick = (warnState: string) => {
     currentWarnState.value = warnState;
     modalVisible.value = true;
diff --git a/frontend/src/modules/lushengshengtaijiance/index.vue b/frontend/src/modules/lushengshengtaijiance/index.vue
index 3b2b33d9..06706870 100644
--- a/frontend/src/modules/lushengshengtaijiance/index.vue
+++ b/frontend/src/modules/lushengshengtaijiance/index.vue
@@ -68,6 +68,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import LsstjkTk from './LsstjkTk.vue';
 import { wbsbGetKendoList, getEvnmAutoMonitor } from '@/api/stdc';
 import moment from 'moment';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名
 defineOptions({
@@ -81,7 +82,7 @@ const dataLoading = ref(false);
 // ==================== 弹框状态 ====================
 const modalVisible = ref(false);
 const currentOrderIndex = ref('16');
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 响应式变量定义 ====================
 // 选择器配置
 const select = ref({
diff --git a/frontend/src/modules/map/application/map-orchestrator.ts b/frontend/src/modules/map/application/map-orchestrator.ts
index 1ee6a62e..bdbdd08f 100644
--- a/frontend/src/modules/map/application/map-orchestrator.ts
+++ b/frontend/src/modules/map/application/map-orchestrator.ts
@@ -1,4 +1,5 @@
-import { watch, type WatchStopHandle } from 'vue';
+import { watch, type WatchStopHandle, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import { unByKey } from 'ol/Observable';
 import dayjs from 'dayjs';
 import { MapClass } from '@/components/gis/map.class';
@@ -17,6 +18,7 @@ type InitializeOptions = {
 
 type LoadPageOptions = {
   pageKey: string;
+  isInitialLoad?: boolean;
 };
 
 type ApplyLayerSelectionOptions = {
@@ -24,9 +26,7 @@ type ApplyLayerSelectionOptions = {
   triggerKey?: string;
   checked?: boolean;
 };
-
-const SYSTEM_ID = '974975A6-47FD-4C04-9ACD-68938D2992BD';
-const MODULE_ID = '2157c1a1-e909-4c9f-af94-b4ccebe05808';
+const SYSTEM_ID = 'qgc';
 const HYDRO_DYNAMIC_LAYER_KEYS = [
   'dw_point',
   'stinfo_video_point',
@@ -47,6 +47,7 @@ const LARGE_ENG_LEGEND_PREFIX = 'large_eng_';
 const MID_ENG_LEGEND_PREFIX = 'mid_eng_';
 
 export const useMapOrchestrator = () => {
+  const route = useRoute();
   const mapClass = MapClass.getInstance();
   const mapStore = useMapStore();
   const mapConfigStore = useMapConfigStore();
@@ -56,6 +57,9 @@ export const useMapOrchestrator = () => {
   let zoomListenerKey: any = null;
   let stopBaseSelectionWatch: WatchStopHandle | null = null;
   const initializedBaseLayerKeys = new Set<string>();
+  const baseSelectionDebounceTimer = ref<ReturnType<typeof setTimeout> | null>(
+    null
+  );
 
   // 备注：统一获取当前地图视图对象，避免在多个组件里重复兼容 2D/3D view 访问方式。
   const getCurrentView = () => {
@@ -107,50 +111,86 @@ export const useMapOrchestrator = () => {
   };
 
   // 备注：统一加载当前页面所需的图层配置、图例配置以及首批锚点数据。
-  const loadPage = async ({ pageKey }: LoadPageOptions) => {
+  const loadPage = async ({
+    pageKey,
+    isInitialLoad = false
+  }: LoadPageOptions) => {
     mapDataStore.setLoading(true);
 
     try {
+      const hasGlobalLegendConfig =
+        Array.isArray(mapConfigStore.legendConfigOriginal) &&
+        mapConfigStore.legendConfigOriginal.length > 0;
+      const hasPointLayerCache =
+        Object.keys(mapDataStore.pointDataCache || {}).length > 0;
+      const shouldLoadGlobalLegend = isInitialLoad && !hasGlobalLegendConfig;
+      const shouldPreloadLayerData = isInitialLoad && !hasPointLayerCache;
       const previousPageKey = mapConfigStore.lastLoadOptions?.pageKey || '';
       const previousCheckedKeys = mapViewStore.getCheckedLayerKeys();
+      const moduleId = (route.meta?.moduleId as string) || '';
       const loadOptions = {
         systemId: SYSTEM_ID,
-        moduleId: MODULE_ID,
+        moduleId,
         pageKey,
         description: 'true'
       };
       const layerConfigPromise =
         mapConfigStore.loadPageLayerConfig(loadOptions);
-      const legendConfigPromise = mapConfigStore.loadPageLegendConfig(pageKey);
-      const { legendOriginal, pageLegend } = await legendConfigPromise;
+      const legendConfigPromise = mapConfigStore.loadPageLegendConfig(
+        moduleId,
+        {
+          includeGlobal: shouldLoadGlobalLegend
+        }
+      );
 
-      if (legendOriginal.length > 0) {
-        mapStore.setLegendData(legendOriginal, pageLegend);
-      }
-
-      const { layerConfig } = await layerConfigPromise;
+      // 同时等待两个 promise
+      const [{ layerConfig }, { legendOriginal, pageLegend }] =
+        await Promise.all([layerConfigPromise, legendConfigPromise]);
 
+      // 先设置图层数据（更新 checkedLayerKeys），再设置图例数据
       if (layerConfig.length > 0) {
         mapStore.setLayerData(layerConfig);
         ensureBaseLayersInitialized(layerConfig);
+
         let checkedKeys = mapViewStore.getCheckedLayerKeys();
         if (previousPageKey === pageKey && previousCheckedKeys.length > 0) {
-          const currentLayerKeys = new Set(
-            layerConfig
-              .flatMap((item: any) => layerConfig2Flat([item]))
-              .map((item: any) => item?.key)
-              .filter(Boolean)
-          );
+          const getAllLayerKeys = (items: any[]): string[] => {
+            const keys: string[] = [];
+            const walk = (nodes: any[]) => {
+              nodes.forEach(item => {
+                if (item?.key) {
+                  keys.push(item.key);
+                }
+                if (item?.children?.length > 0) {
+                  walk(item.children);
+                }
+              });
+            };
+            walk(items);
+            return keys;
+          };
+          const currentLayerKeys = new Set(getAllLayerKeys(layerConfig));
           const runtimeCheckedKeys = previousCheckedKeys.filter(key =>
             currentLayerKeys.has(key)
           );
           if (runtimeCheckedKeys.length > 0) {
             mapViewStore.setCheckedLayerKeys(runtimeCheckedKeys);
-            mapStore.setSelectedLegendData();
             checkedKeys = runtimeCheckedKeys;
           }
         }
-        await mapStore.loadAllLayerData(layerConfig, checkedKeys);
+
+        // 设置图例数据（此时 checkedLayerKeys 已正确设置）
+        if (legendOriginal.length > 0) {
+          mapStore.setLegendData(legendOriginal, pageLegend);
+        }
+
+        if (shouldPreloadLayerData) {
+          mapStore.setSelectedLegendData();
+          await mapStore.loadAllLayerData(layerConfig, checkedKeys);
+        } else {
+          await mapStore.updateLayerData(checkedKeys, true);
+          mapStore.setSelectedLegendData();
+        }
       }
     } finally {
       // mapDataStore.setLoading(false);
@@ -180,7 +220,7 @@ export const useMapOrchestrator = () => {
       popupContainer,
       pageKey
     });
-    await loadPage({ pageKey });
+    await loadPage({ pageKey, isInitialLoad: true });
   };
 
   // 备注：统一绑定地图缩放监听，让页面组件只负责触发初始化，不再直接处理缩放联动细节。
@@ -218,13 +258,23 @@ export const useMapOrchestrator = () => {
     }
 
     stopBaseSelectionWatch = watch(
-      () => jidiSelectEventStore.selectedItem,
-      newVal => {
-        if (newVal?.wbsCode) {
-          changeBaseId(newVal.wbsCode);
+      () => jidiSelectEventStore.selectedItem?.wbsCode,
+      newWbsCode => {
+        if (!newWbsCode) {
+          changeBaseId('');
+          return;
         }
+
+        if (baseSelectionDebounceTimer.value) {
+          clearTimeout(baseSelectionDebounceTimer.value);
+        }
+
+        baseSelectionDebounceTimer.value = setTimeout(() => {
+          changeBaseId(newWbsCode);
+          baseSelectionDebounceTimer.value = null;
+        }, 100);
       },
-      { deep: true, immediate: true }
+      { immediate: true }
     );
   };
 
@@ -237,13 +287,31 @@ export const useMapOrchestrator = () => {
     await initializeMapShell(options);
     bindBaseSelection();
     bindZoomListener(options.getIsHydroMenu);
-    await loadPage({ pageKey: options.pageKey });
+    await loadPage({ pageKey: options.pageKey, isInitialLoad: true });
   };
 
   // 备注：统一处理菜单切换后的页面配置重载，供页面 watch 直接复用。
   const reloadPage = async (pageKey: string) => {
     if (!pageKey) return;
-    await loadPage({ pageKey });
+    await loadPage({ pageKey, isInitialLoad: false });
+  };
+
+  // 备注：菜单切换前先隐藏旧页面当前可见的点图层，避免旧锚点残留到新页面接口返回之后才消失。
+  const hideCurrentVisiblePointLayers = () => {
+    const currentCheckedKeys = mapViewStore.getCheckedLayerKeys();
+
+    currentCheckedKeys.forEach(layerKey => {
+      const layerItem = mapStore.findLayerByKey(mapStore.layerData, layerKey);
+      if (
+        !layerItem?.key ||
+        layerItem.type !== 'pointMap' ||
+        !mapClass.hasLayer(layerItem.key)
+      ) {
+        return;
+      }
+
+      mapClass.mdLayerTreeShowOrHidden(layerItem.key, false);
+    });
   };
 
   // 备注：统一处理图层树勾选结果归一化和地图联动，供图层树组件复用。
@@ -277,6 +345,9 @@ export const useMapOrchestrator = () => {
   // 备注：统一控制水电开发菜单下的动态图层增删，避免页面组件直接操作加载和勾选细节。
   const syncHydroDynamicLayers = async (visible: boolean) => {
     const currentCheckedKeys = mapViewStore.getCheckedLayerKeys();
+    const pageDefaultCheckedKeys = new Set(
+      mapConfigStore.extractCheckedLayerKeys(mapStore.layerData || [])
+    );
 
     if (visible) {
       const layersToAdd = HYDRO_DYNAMIC_LAYER_KEYS.filter(
@@ -293,9 +364,12 @@ export const useMapOrchestrator = () => {
       });
     }
 
-    const nextCheckedKeys = currentCheckedKeys.filter(
-      key => !HYDRO_DYNAMIC_LAYER_KEYS.includes(key)
-    );
+    const nextCheckedKeys = currentCheckedKeys.filter(key => {
+      if (!HYDRO_DYNAMIC_LAYER_KEYS.includes(key)) {
+        return true;
+      }
+      return pageDefaultCheckedKeys.has(key);
+    });
 
     if (nextCheckedKeys.length === currentCheckedKeys.length) {
       return currentCheckedKeys;
@@ -348,6 +422,11 @@ export const useMapOrchestrator = () => {
   const handlePageChange = async (pageKey: string, isHydroMenu: boolean) => {
     if (!pageKey) return;
 
+    const previousPageKey = mapConfigStore.lastLoadOptions?.pageKey || '';
+    if (previousPageKey && previousPageKey !== pageKey) {
+      hideCurrentVisiblePointLayers();
+    }
+
     await reloadPage(pageKey);
 
     const currentZoom = getCurrentZoom();
@@ -452,7 +531,7 @@ export const useMapOrchestrator = () => {
   };
 
   // 备注：统一处理搜索定位，按点位编码从缓存数据中查找并飞行到目标位置。
-  const focusPoint = (pointId: string, zoom: number = 15) => {
+  const focusPoint = (pointId: string, zoom = 15) => {
     if (!pointId) return;
     const targetPoint = mapDataStore.pointData.find((item: any) => {
       return item.stcd === pointId || item._id === pointId;
@@ -472,6 +551,11 @@ export const useMapOrchestrator = () => {
       stopBaseSelectionWatch();
       stopBaseSelectionWatch = null;
     }
+
+    if (baseSelectionDebounceTimer.value) {
+      clearTimeout(baseSelectionDebounceTimer.value);
+      baseSelectionDebounceTimer.value = null;
+    }
   };
 
   return {
diff --git a/frontend/src/modules/map/stores/map-config.store.ts b/frontend/src/modules/map/stores/map-config.store.ts
index 058aa96d..ee2a38b2 100644
--- a/frontend/src/modules/map/stores/map-config.store.ts
+++ b/frontend/src/modules/map/stores/map-config.store.ts
@@ -9,6 +9,10 @@ type MapConfigLoadOptions = {
   description?: string;
 };
 
+type LegendConfigLoadOptions = {
+  includeGlobal?: boolean;
+};
+
 const cloneConfigData = <T>(data: T): T => {
   return JSON.parse(JSON.stringify(data));
 };
@@ -55,7 +59,7 @@ export const useMapConfigStore = defineStore('map-config', () => {
 
     const walk = (nodes: any[] = []) => {
       nodes.forEach(item => {
-        if (item?.checked === 1 && item?.key) {
+        if (Number(item?.checked) === 1 && item?.key) {
           keys.push(item.key);
         }
         if (item?.children?.length > 0) {
@@ -157,6 +161,7 @@ export const useMapConfigStore = defineStore('map-config', () => {
         moduleId: options.moduleId,
         description: options.description ?? 'true'
       });
+      console.log(cloneConfigData(layerRes));
 
       const layerConfig = layerRes?.data?.mapLayerVos || [];
       setLayerConfigTree(layerConfig);
@@ -168,17 +173,32 @@ export const useMapConfigStore = defineStore('map-config', () => {
     }
   };
 
-  const loadPageLegendConfig = async (pageKey?: string) => {
+  const loadPageLegendConfig = async (
+    pageKey?: string,
+    options: LegendConfigLoadOptions = {}
+  ) => {
     legendLoading.value = true;
 
     try {
-      const [legendAllRes, legendPageRes] = await Promise.all([
-        getModuleMapLegendList(),
-        getModuleMapLegendList(pageKey ? { moduleId: pageKey } : undefined)
-      ]);
+      const includeGlobal = options.includeGlobal !== false;
 
-      const legendOriginal = legendAllRes?.data || [];
-      const pageLegend = legendPageRes?.data || [];
+      let legendOriginal = legendConfigOriginal.value || [];
+      let pageLegend: any[] = [];
+
+      if (includeGlobal) {
+        const [legendAllRes, legendPageRes] = await Promise.all([
+          getModuleMapLegendList(),
+          getModuleMapLegendList(pageKey ? { moduleId: pageKey } : undefined)
+        ]);
+
+        legendOriginal = legendAllRes?.data || [];
+        pageLegend = legendPageRes?.data || [];
+      } else {
+        const legendPageRes = await getModuleMapLegendList(
+          pageKey ? { moduleId: pageKey } : undefined
+        );
+        pageLegend = legendPageRes?.data || [];
+      }
 
       setLegendConfigOriginal(legendOriginal);
       setPageLegendConfig(pageLegend);
@@ -194,10 +214,9 @@ export const useMapConfigStore = defineStore('map-config', () => {
 
   // 备注：加载页面地图配置，只负责请求和保存配置数据，不处理锚点或地图渲染逻辑。
   const loadPageMapConfig = async (options: MapConfigLoadOptions) => {
-    const [{ layerConfig }, { legendOriginal, pageLegend }] = await Promise.all([
-      loadPageLayerConfig(options),
-      loadPageLegendConfig(options.pageKey)
-    ]);
+    const [{ layerConfig }, { legendOriginal, pageLegend }] = await Promise.all(
+      [loadPageLayerConfig(options), loadPageLegendConfig(options.pageKey)]
+    );
 
     return {
       layerConfig,
diff --git a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue
index 9f31b064..c26fde8a 100644
--- a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue
+++ b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/TwoLayers/monthlyAverageMaxModal.vue
@@ -70,6 +70,7 @@ import dayjs from 'dayjs';
 import { ZoomInOutlined } from '@ant-design/icons-vue';
 import type { Dayjs } from 'dayjs';
 import MonthlyAverage from '../monthlyAverage.vue';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
     name: 'MonthlyAverageMaxModal'
@@ -101,7 +102,7 @@ const detailModalData = ref<any>(null);
 // 选择器相关 - 内部状态管理
 const selectValue = ref('');
 const selectOptions = ref<any[]>([]);
-
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 // 树形选择器展开状态管理
 const treeExpandedKeys = ref<string[]>([])
 const nodeMap = new Map<string, { node: any; parentKey: string | null }>()
diff --git a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
index 2e43cba5..fc37d643 100644
--- a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
+++ b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
@@ -41,6 +41,7 @@ import dayjs from 'dayjs'
 import {
     ZoomInOutlined
 } from '@ant-design/icons-vue';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
     name: 'monthlyAvgWaterTemCompareHistory'
@@ -68,7 +69,8 @@ const stationName = ref('');
 
 // 图表放大展示弹框状态
 const zoomModalVisible = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(zoomModalVisible, { boundary: true, resetOnOpen: true });
 // 选择器配置
 const select = ref({
     show: true,
diff --git a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
index b4be4b17..552c31fb 100644
--- a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
+++ b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
@@ -104,7 +104,6 @@ import { message } from 'ant-design-vue';
 import dayjs, { Dayjs } from 'dayjs';
 import * as echarts from 'echarts';
 import type { EChartsOption } from 'echarts';
-import dayjs from 'dayjs';
 import { omit } from 'lodash';
 import { wbsbGetKendoList, getVmsstbprpt, DetGetKendoListCust } from '@/api/sw';
 import BasicTable from '@/components/BasicTable/index.vue';
diff --git a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
index 1015e9be..29fabddb 100644
--- a/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
+++ b/frontend/src/modules/qixidibaohugongzuokaizhanQK/index.vue
@@ -1,206 +1,237 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="栖息地保护工作开展情况">
-        <a-spin :spinning="loading" tip="加载中...">
-            <div class="facility-grid">
-                <div v-for="facility in facilities" :key="facility.name" class="facility-card"
-                    @click="handleFacilityClick(facility)">
-                    <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
-                        <div class="facility-icon">
-                            <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
-                        </div>
-                    </div>
-
-                    <div class="facility-info">
-                        <div class="facility-name">{{ facility.name }}</div>
-                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
-                        }}</span><span>个</span></div>
-                    </div>
-                </div>
+  <SidePanelItem title="栖息地保护工作开展情况">
+    <a-spin :spinning="loading" tip="加载中...">
+      <div class="facility-grid">
+        <div
+          v-for="facility in facilities"
+          :key="facility.name"
+          class="facility-card"
+          @click="handleFacilityClick(facility)"
+        >
+          <div
+            style="
+              width: 60px;
+              height: 62px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            "
+          >
+            <div class="facility-icon">
+              <i
+                style="color: #fff"
+                :class="facility.icon"
+                type="icon-shengtailiuliang2"
+              ></i>
             </div>
-        </a-spin>
-    </SidePanelItem>
-    <!-- 弹框 -->
-    <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>
+          </div>
+
+          <div class="facility-info">
+            <div class="facility-name">{{ facility.name }}</div>
+            <div style="font-size: 16px">
+              <span class="facility-count">{{ facility.count }}</span
+              ><span>个</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </SidePanelItem>
+  <!-- 弹框 -->
+  <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>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
-import { fhGetKendoListCust } from '@/api/qxd'
-import QixidiheduanjianceqingkuangEJ from "./qixidiheduanjianceqingkuangEJ/index.vue"
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { fhGetKendoListCust } from '@/api/qxd';
+import QixidiheduanjianceqingkuangEJ from './qixidiheduanjianceqingkuangEJ/index.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'qixidibaohugongzuokaizhanQK'
+  name: 'qixidibaohugongzuokaizhanQK'
 });
 const JidiSelectEventStore = useJidiSelectEventStore();
 // loading状态
 const loading = ref(false);
 // 设施数据
 const facilities = ref([
-    {
-        name: '栖息地',
-        count: 0,
-        icon: 'icon iconfont icon-qixidi',
-        sttpCode: 'FH'
-    },
-    {
-        name: '水温监测',
-        count: 0,
-        icon: 'icon iconfont icon-diwenshuijianhuan',
-        sttpCode: 'WTRV'
-    },
-    {
-        name: '水文监测',
-        count: 0,
-        icon: 'icon iconfont icon-shuiwen-line',
-        sttpCode: 'ZQ'
-    },
-    {
-        name: '视频监控',
-        count: 0,
-        icon: 'icon iconfont icon-shipinjiankongshebei',
-        sttpCode: 'VD'
-    },
-
+  {
+    name: '栖息地',
+    count: 0,
+    icon: 'icon iconfont icon-qixidi',
+    sttpCode: 'FH'
+  },
+  {
+    name: '水温监测',
+    count: 0,
+    icon: 'icon iconfont icon-diwenshuijianhuan',
+    sttpCode: 'WTRV'
+  },
+  {
+    name: '水文监测',
+    count: 0,
+    icon: 'icon iconfont icon-shuiwen-line',
+    sttpCode: 'ZQ'
+  },
+  {
+    name: '视频监控',
+    count: 0,
+    icon: 'icon iconfont icon-shipinjiankongshebei',
+    sttpCode: 'VD'
+  }
 ]);
-const baseid = ref('')
+const baseid = ref('');
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentFacility = ref<any>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 //获取页面数据
 const getData = async () => {
-    loading.value = true;
-    try {
-        let params = {
-            "filter": {
-                "logic": "and",
-                "filters": [
-                    baseid.value != 'all' ? {
-                        "field": "baseId",
-                        "operator": "eq",
-                        "dataType": "string",
-                        "value": baseid.value
-                    } : null
-                ].filter(Boolean)
-            },
-            "group": [
-                {
-                    "dir": "asc",
-                    "field": "sttpCode"
-                }
-            ],
-            "groupResultFlat": true
+  loading.value = true;
+  try {
+    let params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          baseid.value != 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: baseid.value
+              }
+            : null
+        ].filter(Boolean)
+      },
+      group: [
+        {
+          dir: 'asc',
+          field: 'sttpCode'
         }
-        const res = await fhGetKendoListCust(params); //适配监控-VD
-        let data = res?.data?.data || res?.data || [];
+      ],
+      groupResultFlat: true
+    };
+    const res = await fhGetKendoListCust(params); //适配监控-VD
+    let data = res?.data?.data || res?.data || [];
 
-        // 根据接口返回的数据更新 facilities 的 count
-        facilities.value.forEach(facility => {
-            const matchedItem = data.find(item => item.sttpCode === facility.sttpCode);
-            if (matchedItem) {
-                facility.count = matchedItem.count_sttpCode || 0;
-            } else {
-                facility.count = 0;
-            }
-        });
-    } catch (error) {
-        console.error('获取数据失败:', error);
-    } finally {
-        loading.value = false;
-    }
-}
+    // 根据接口返回的数据更新 facilities 的 count
+    facilities.value.forEach(facility => {
+      const matchedItem = data.find(
+        item => item.sttpCode === facility.sttpCode
+      );
+      if (matchedItem) {
+        facility.count = matchedItem.count_sttpCode || 0;
+      } else {
+        facility.count = 0;
+      }
+    });
+  } catch (error) {
+    console.error('获取数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
 // 点击处理函数
 const handleFacilityClick = (facility: any) => {
-    currentFacility.value = facility;
-    modalVisible.value = true;
-
-
+  currentFacility.value = facility;
+  modalVisible.value = true;
 };
 // 关闭弹框
 const handleCloseModal = () => {
-    modalVisible.value = false;
-    currentFacility.value = null;
+  modalVisible.value = false;
+  currentFacility.value = null;
 };
 
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        baseid.value = newVal.wbsCode;
-        getData()
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getData();
+  },
+  { deep: true, immediate: true }
 );
 // 页面加载时执行
 onMounted(() => {
-    // 延迟初始化，确保容器已渲染
-
+  // 延迟初始化，确保容器已渲染
 });
 
 // 组件卸载时清理
-onUnmounted(() => {
-
-});
+onUnmounted(() => {});
 </script>
 
 <style lang="scss" scoped>
 .facility-grid {
-    width: 406px;
-    flex-flow: wrap;
-    display: flex;
-    justify-content: space-between;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  width: 406px;
+  flex-flow: wrap;
+  display: flex;
+  justify-content: space-between;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 .facility-card {
-    width: 200px;
-    height: 70px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 4px 0px;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    border-radius: 2px;
-    transition: all 0.3s;
-    cursor: pointer;
-    box-sizing: border-box;
+  width: 200px;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 0px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  transition: all 0.3s;
+  cursor: pointer;
+  box-sizing: border-box;
 }
 
 .facility-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    // margin-right: 8px;
-    background: #5389b5;
-    border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  // margin-right: 8px;
+  background: #5389b5;
+  border-radius: 50%;
 
-    .anticon {
-        font-size: 24px;
-        color: #fff;
-    }
+  .anticon {
+    font-size: 24px;
+    color: #fff;
+  }
 }
 
 .facility-info {
-    flex: 1;
+  flex: 1;
 }
 
 .facility-name {
-    font-size: 16px;
-    color: #333;
-    // margin-bottom: 4px;
-    // font-weight: 500;
+  font-size: 16px;
+  color: #333;
+  // margin-bottom: 4px;
+  // font-weight: 500;
 }
 
 .facility-count {
-    font-size: 18px;
-    color: #2f6b98;
-    // font-weight: 600;
+  font-size: 18px;
+  color: #2f6b98;
+  // font-weight: 600;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/TwoLayer/STLLXFFS.vue b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/TwoLayer/STLLXFFS.vue
index 0bbd3d6a..29fe3d31 100644
--- a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/TwoLayer/STLLXFFS.vue
+++ b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/TwoLayer/STLLXFFS.vue
@@ -55,7 +55,7 @@
               ref="tableRef"
               :columns="columns"
               :scrollY="380"
-              :scrollX="100"
+              
               :list-url="vmsstbprptGetKendoList"
               :search-params="searchParams"
               :transform-data="customTransform"
@@ -834,8 +834,7 @@ const handleResize = () => {
     width: 35%;
     height: 482px;
     // position: relative;
-    min-width: 521px;
-
+  
     .pie-chart {
       width: 100%;
       height: 100%;
diff --git a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue
index c5d0a8b0..e1566e3c 100644
--- a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue
+++ b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue
@@ -37,7 +37,7 @@
     <a-modal
       v-model:open="modalVisible"
       :title="'生态流量泄放方式'"
-      width="1536px"
+      width="80%"
       @cancel="handleModalCancel"
     >
       <STLLXFFS
@@ -57,6 +57,8 @@ import type { ECharts } from 'echarts';
 import { msstbprptGetKendoList } from '@/api/stll';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import STLLXFFS from './TwoLayer/STLLXFFS.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'xieFangFangShi'
@@ -78,7 +80,7 @@ const apiRawData = ref<any[]>([]); // 保存原始 API 数据
 const modalVisible = ref(false);
 const modalTitle = ref('');
 const selectedData = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 颜色配置（根据图片配色）
 const colors = [
   '#9556a4', // 基荷发电 - 紫色
diff --git a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/TwoLayer/FenBuQingKuangTwoLayer.vue b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/TwoLayer/FenBuQingKuangTwoLayer.vue
index 707a0cca..f96e5c10 100644
--- a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/TwoLayer/FenBuQingKuangTwoLayer.vue
+++ b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/TwoLayer/FenBuQingKuangTwoLayer.vue
@@ -676,7 +676,7 @@ onUnmounted(() => {
   .chart-section {
     width: 35%;
     height: 482px;
-    min-width: 521px;
+    
 
     .pie-chart {
       width: 100%;
diff --git a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue
index 30ae4cb3..502c418d 100644
--- a/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue
+++ b/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFenBu/index.vue
@@ -10,7 +10,7 @@
   <a-modal
     v-model:open="modalVisible"
     title="泄放方式分布情况"
-    width="1536px"
+    width="80%"
     :footer="null"
     @cancel="handleModalCancel"
   >
@@ -38,6 +38,8 @@ import type { ECharts } from 'echarts';
 import { vmsstbprptGetKendoList } from '@/api/stll';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import FBQKTwolayer from './TwoLayer/FenBuQingKuangTwoLayer.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名
 defineOptions({
   name: 'XieFangFenBu'
@@ -59,7 +61,7 @@ const wbsCode = ref('');
 const modalVisible = ref(false);
 const selectData = ref(''); // 选中的设施类型名称
 const jidiName = ref(''); // 选中的基地名称
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 设施类型配置
 const typeName = [
   { label: '生态放流孔', eqtp: 'EQ_1' },
diff --git a/frontend/src/modules/shengtaidabiaoMod/index.vue b/frontend/src/modules/shengtaidabiaoMod/index.vue
index 2ebed887..236f65f5 100644
--- a/frontend/src/modules/shengtaidabiaoMod/index.vue
+++ b/frontend/src/modules/shengtaidabiaoMod/index.vue
@@ -8,10 +8,10 @@
           <p>
             1、统计电站范围：接入过生态流量数据的电站
             <span
-              style="color: #5989ad; cursor: pointer; "
+              style="color: #5989ad; cursor: pointer"
               @click.stop="handleStationClick()"
             >
-             ({{titleData.cnt}})
+              ({{ titleData.cnt }})
             </span>
           </p>
           <p>2、当来水不足时，生态流量不小于入库流量判定为达标</p>
@@ -88,7 +88,11 @@
       width="1536px"
       :footer="null"
     >
-     <ModalYkzhbzdjcgz v-if="huanbaoModalVisible" :baseId="baseid" :titleData = titleData />
+      <ModalYkzhbzdjcgz
+        v-if="huanbaoModalVisible"
+        :baseId="baseid"
+        :titleData="titleData"
+      />
     </a-modal>
   </div>
 </template>
@@ -105,6 +109,7 @@ import { useMapViewStore } from '@/modules/map/stores/map-view.store';
 import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
 import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue';
 import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue';
+import { useDraggable } from '@/utils/drag';
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'shengtaidabiaoMod'
@@ -146,10 +151,13 @@ 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);
 
+// 启用弹窗拖拽（限制在可视区域内）
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+// 启用弹窗拖拽（限制在可视区域内）
+useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
 // 处理电站数量点击事件
 const handleStationClick = () => {
   huanbaoModalVisible.value = true;
@@ -158,7 +166,6 @@ const handleStationClick = () => {
 // 处理进度条点击事件
 const handleBarClick = (item: any) => {
   selectedItem.value = item;
-  //   modalTitle.value = `${item.name} - 详细信息`;
   modalVisible.value = true;
 };
 
@@ -269,7 +276,7 @@ const getData = async () => {
     // 根据API响应结构规范处理数据
     if (res.data && res.data.list) {
       const apiList = res.data.list;
-      //   
+      //
       // 只使用前两条数据（type: 1 和 type: 2）
       if (apiList && apiList.length > 0) {
         dataArr.value = apiList.slice(0, 2).map((item: any) => ({
@@ -316,43 +323,41 @@ watch(
 );
 
 //统计电站范围：接入过生态流量数据的电站
-const titleData:any = ref({ cnt: 0 })
+const titleData: any = ref({ cnt: 0 });
 const getcont = async () => {
   let params = {
-    "filter": {
-        "logic": "and",
-        "filters": [
-            {
-                "field": "showIds",
-                "operator": "in",
-                "value": [
-                    "7"
-                ]
-            }
-        ]
+    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": "生态流量"
-//     }
-// ]
+  //   [
+  //     {
+  //         "cnt": 452,
+  //         "orderInx": 7,
+  //         "orderInxName": "生态流量",
+  //         "sttpFullPath": "ENG",
+  //         "sttpCode": "ENG",
+  //         "sttpName": "生态流量"
+  //     }
+  // ]
   let list = res?.data?.data[0];
   if (list) {
-    titleData.value = list
+    titleData.value = list;
   }
-  // 
+  //
 };
 // 页面加载时执行的逻辑
 onMounted(() => {
   setStyle();
-  getcont()
+  getcont();
 });
 </script>
 
diff --git a/frontend/src/modules/shengtaidabiaoModJZ/index.vue b/frontend/src/modules/shengtaidabiaoModJZ/index.vue
index 643c913d..3f07c556 100644
--- a/frontend/src/modules/shengtaidabiaoModJZ/index.vue
+++ b/frontend/src/modules/shengtaidabiaoModJZ/index.vue
@@ -105,6 +105,8 @@ import { useMapViewStore } from '@/modules/map/stores/map-view.store';
 import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
 import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue';
 import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'shengtaidabiaoMod'
@@ -149,7 +151,8 @@ const modalVisible = ref(false);
 const modalTitle = ref('');
 const selectedItem = ref<any>(null);
 const huanbaoModalVisible = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
 // 处理电站数量点击事件
 const handleStationClick = () => {
   huanbaoModalVisible.value = true;
diff --git a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
index 15e013fd..cdf54d8b 100644
--- a/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
+++ b/frontend/src/modules/shengtaidabiaoTwoMod/index.vue
@@ -67,6 +67,8 @@ import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
 import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
 import STLLXFFS from './TwoLayer/STLLXFFS.vue'
 import { useMapViewStore } from '@/modules/map/stores/map-view.store';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'shengtaidabiaoMod'
@@ -604,6 +606,8 @@ watch(
 const detailModalVisible = ref(false);
 const detailModalTitle = ref('');
 const detailData = ref<any[]>([]);
+useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 const detailColumns = ref([
   {
     title: mode.value === 'top' ? '基地名称' : '调节性能',
diff --git a/frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue b/frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue
index 1f9299d0..bb397101 100644
--- a/frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue
+++ b/frontend/src/modules/shengtaidabiaoTwoModJJ/index.vue
@@ -68,6 +68,8 @@ import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
 import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
 import STLLXFFS from './TwoLayer/STLLXFFS.vue'
 import { useMapViewStore } from '@/modules/map/stores/map-view.store';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'shengtaidabiaoMod'
@@ -97,6 +99,7 @@ const huanbaoModalVisible = ref(false);
 const handleStationClick = () => {
   huanbaoModalVisible.value = true;
 };
+
 // 加载数据
 const loadData = async () => {
   spinning.value = true;
@@ -633,6 +636,8 @@ const detailColumns = ref([
 watch(mode, () => {
   loadData();
 });
+useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/modules/sheshileixingjieshao/index.vue b/frontend/src/modules/sheshileixingjieshao/index.vue
index 39a778ea..638b8ab6 100644
--- a/frontend/src/modules/sheshileixingjieshao/index.vue
+++ b/frontend/src/modules/sheshileixingjieshao/index.vue
@@ -62,6 +62,8 @@ import { ref, onMounted, onUnmounted, computed } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
 import { sttpbGetKendoList } from '@/api/sw';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'diwenshuijianhuansheshileixingzuchengjijieruqingkuang'
@@ -96,6 +98,7 @@ const isTransitioning = ref(false);
 // 弹框控制
 const modalVisible = ref(false);
 const currentItem = ref<any>(null);
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 初始化渲染数组（克隆首尾项）
 const initRenderData = () => {
   const length = originalMediaData.value.length;
diff --git a/frontend/src/modules/shuiWenNianNeiFenBu/index.vue b/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
index adec0042..abb0f891 100644
--- a/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
+++ b/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
@@ -43,6 +43,7 @@ import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import YaerAverage from './TwoLayers/yaerAverage.vue';
 
 import { MapClass } from '@/components/gis/map.class';
+import { useDraggable } from '@/utils/drag';
 
 const JidiSelectEventStore = useJidiSelectEventStore();
 // 水温年内分布数据（响应式）
@@ -52,7 +53,7 @@ const showemit = ref(true);
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentData = ref<any>({});
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const chartRef = ref<HTMLElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 // 选择器配置
diff --git a/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue b/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
index 6a5ea44b..f0513a14 100644
--- a/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
+++ b/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
@@ -4,6 +4,21 @@
         <a-table :columns="columns" :data-source="tableData" :pagination="false" size="middle" :customRow="customRow"
             :loading="dataLoading" bordered class="custom-table">
         </a-table>
+        <a-modal
+            v-model:open="modalVisible"
+            title="水电开发情况"
+            width="80%"
+            :footer="null"
+            :destroy-on-close="true"
+        >
+            <ShuiDianKaiFQKTwoLayer
+                v-if="modalVisible"
+                :defaultJidiInfo="modalProps.defaultJidiInfo"
+                :seriesName="modalProps.seriesName"
+                :stateName="modalProps.stateName"
+                :defaultTab="modalProps.defaultTab"
+            />
+        </a-modal>
     </div>
 </template>
 
@@ -11,6 +26,8 @@
 import { ref, watch } from 'vue';
 import { getVmsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import ShuiDianKaiFQKTwoLayer from './TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
+import { useDraggable } from '@/utils/drag';
 
 defineOptions({
     name: 'DataTable'
@@ -25,6 +42,26 @@ const baseid = ref('');
 const dataLoading = ref(false);
 const tableData = ref<any[]>([]);
 
+const modalVisible = ref(false);
+const modalProps = ref<any>({});
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
+const openDialog = (record: any) => {
+    const currentJidiInfo = JidiSelectEventStore.selectedItem;
+    const isAll = currentJidiInfo?.wbsCode === 'all';
+    const stateName = record.bldsttCcode === '0' ? '未建' : record.bldsttCcode === '1' ? '在建' : '已建';
+
+    modalProps.value = {
+        defaultJidiInfo: {
+            baseid: isAll ? record.key : currentJidiInfo?.wbsCode || 'all',
+            basename: isAll ? record.name : currentJidiInfo?.wbsName || '全部基地'
+        },
+        seriesName: '装机容量(万kW)',
+        stateName,
+        defaultTab: stateName
+    };
+    modalVisible.value = true;
+};
+
 const columns = ref([
     {
         title: '基地名称',
@@ -183,6 +220,7 @@ const customRow = (record: any, index: number) => {
         },
         onClick: () => {
             if (record.name !== '总计') {
+                openDialog(record);
                 emit('row-click', record);
             }
         }
diff --git a/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue b/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue
index 0bd0ddc6..fcf61feb 100644
--- a/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue
+++ b/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/HuanJingSJJRQK.vue
@@ -1,173 +1,170 @@
-<!-- HuanJingSJJRQK.vue -->
-<template>
-  <div class="huanjing-sjjrqk">
-    <a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
-      <a-tab-pane key="notAccess" tab="大中型已建在建电站" />
-      <a-tab-pane key="partAccess" tab="已接入电站运行数据" />
-      <a-tab-pane key="isAccess" tab="已开展全过程监测工作" />
-    </a-tabs>
-
-    <div class="content-wrapper">
-      <!-- 左侧饼图 -->
-      <div class="chart-section">
-        <div ref="chartContainer" class="chart-container"></div>
-      </div>
-
-      <!-- 右侧表格 -->
-      <div class="table-section">
-        <a-table
-          :columns="columns"
-          :data-source="tableData"
-          :pagination="false"
-          size="middle"
-          :customRow="customRow"
-          :loading="tableLoading"
-          class="custom-table"
-        />
-      </div>
-    </div>
-
-    <!-- 详情弹窗 -->
-    <a-modal
-      v-model:open="detailModalVisible"
-      :title="detailModalTitle"
-      width="1200px"
-      :footer="null"
-      :destroy-on-close="true"
-    >
-      <component
-        v-if="detailModalVisible && detailComponent"
-        :is="detailComponent"
-        v-bind="detailProps"
-      />
-    </a-modal>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch, shallowRef } from 'vue';
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import * as echarts from 'echarts';
-import { getVmsstbprptKendoList } from '@/api/home';
+import type { EChartsOption } from 'echarts';
+import BasicSearch from '@/components/BasicSearch/index.vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import { DownloadOutlined } from '@ant-design/icons-vue';
+import { message, Modal } from 'ant-design-vue';
+import { useModelStore } from '@/store/modules/model';
+import { handleTabs } from '@/components/MapModal/setting.config';
+import {
+  getVmsstbprptKendoList,
+  getVmsstbprptKendoListCust,
+  getMsstbprptKendoList
+} from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 
-defineOptions({
-  name: 'HuanJingSJJRQK'
-});
-
 const props = defineProps<{
-  dataDimensionVal: string;
-  name: string;
+  dataDimensionVal?: string;
+  name?: string;
 }>();
 
+interface TabItem {
+  key: string;
+  value: string;
+  col: string;
+  unit: string;
+  count: number;
+}
+
+interface PieDataItem {
+  key: string;
+  name: string;
+  value: number;
+  dataDimensionRecursive?: string;
+}
+
+const modelStore = useModelStore();
 const JidiSelectEventStore = useJidiSelectEventStore();
-const activeTab = ref(props.name || 'notAccess');
-const chartContainer = ref<HTMLDivElement | null>(null);
-let chartInstance: echarts.ECharts | null = null;
-const tableLoading = ref(false);
-const tableData = ref<any[]>([]);
-const chartFilter = ref<string>('');
 
-// 详情弹窗相关
-const detailModalVisible = ref(false);
-const detailModalTitle = ref('');
-const detailComponent = shallowRef<any>(null);
-const detailProps = ref<any>({});
+const qid = ref<string>(props.dataDimensionVal || 'all');
+const jiDiList = ref<any[]>([]);
+const defJD = ref<string>('');
 
-// 表格列配置
-const columns = ref([
+// 在 setup 阶段初始化 jiDiList 和 defJD，避免 onMounted 后 initialValues 变化触发 BasicSearch 的 setFieldsValue
+JidiSelectEventStore.jidiData.forEach((element: any) => {
+  jiDiList.value.push({
+    wbsName: element.wbsName,
+    wbsCode: element.wbsCode
+  });
+});
+if (props.dataDimensionVal) {
+  const matched = jiDiList.value.find(
+    (item: any) => item.wbsCode === props.dataDimensionVal
+  );
+  defJD.value = matched?.wbsCode || '';
+}
+
+const tabKey = ref<string>(props.name || '');
+const tabCol = ref<string>('');
+const tabList = ref<TabItem[]>([]);
+
+const stnm = ref<string | null>(null);
+const formRef = ref<any>();
+
+const pieData = ref<PieDataItem[]>([]);
+const pikData = ref<PieDataItem[]>([]);
+const pieCode = ref<string[]>([]);
+const chartInstance = ref<any>(null);
+const dataLoading = ref<boolean>(false);
+
+const chartRefs = ref<Record<string, HTMLElement>>({});
+const chartInstances = ref<Record<string, any>>({});
+const setChartRef = (el: any, key: string) => {
+  if (el) {
+    chartRefs.value[key] = el as HTMLElement;
+  }
+};
+
+const tableRefs = ref<Record<string, any>>({});
+const setTableRef = (el: any, key: string) => {
+  if (el) tableRefs.value[key] = el;
+};
+
+const jdColor = [
+  '#5B8FF9',
+  '#5AD8A6',
+  '#F6BD16',
+  '#7262FD',
+  '#FF6B6B',
+  '#9556a4',
+  '#30b7b9'
+];
+
+// 接入详情弹窗
+const detailVisible = ref(false);
+const detailStation = ref<any>({});
+const detailLoading = ref(false);
+const detailData = ref<any[]>([]);
+const detailColumns = [
+  { title: '名称', dataIndex: 'stnm', key: 'stnm', width: 150, ellipsis: true },
   {
-    title: '电站名称',
-    dataIndex: 'stnm',
-    key: 'stnm',
-    align: 'left'
+    title: '数据类型',
+    dataIndex: 'sttpName',
+    key: 'sttpName',
+    width: 120,
+    ellipsis: true
+  },
+  {
+    title: '建设状态',
+    dataIndex: 'bldsttCcodeName',
+    key: 'bldsttCcodeName',
+    width: 100,
+    ellipsis: true
   },
   {
     title: '接入状态',
-    dataIndex: 'accessStatus',
-    key: 'accessStatus',
-    align: 'center'
+    dataIndex: 'dtinName',
+    key: 'dtinName',
+    width: 100,
+    ellipsis: true
   },
   {
-    title: '操作',
-    key: 'action',
-    align: 'center',
-    width: 120
+    title: '接入时间',
+    dataIndex: 'dtinTm',
+    key: 'dtinTm',
+    width: 120,
+    ellipsis: true
   }
-]);
+];
 
-// 自定义行样式
-const customRow = (record: any) => {
-  return {
-    onClick: () => {
-      handleRowClick(record);
+async function fetchTabData(baseId: string): Promise<TabItem[]> {
+  try {
+    const baseFilters: any[] = [
+      { field: 'sttpCode', operator: 'eq', dataType: 'string', value: 'ENG' },
+      {
+        field: 'bldsttCcode',
+        operator: 'in',
+        dataType: 'string',
+        value: ['1', '2']
+      }
+    ];
+    if (baseId !== 'all') {
+      baseFilters.unshift({
+        field: 'baseId',
+        operator: 'eq',
+        dataType: 'string',
+        value: baseId
+      });
     }
-  };
-};
 
-// 处理表格行点击
-const handleRowClick = async (record: any) => {
-  // 根据当前 Tab 打开不同的详情组件
-  if (activeTab.value === 'notAccess') {
-    // 大中型已建在建电站 - 打开电站详情
-    detailModalTitle.value = '电站详情';
-    // 这里需要动态导入对应的详情组件
-    // 暂时使用占位符
-    detailComponent.value = null;
-    detailProps.value = {
-      stcd: record.stcd,
-      stnm: record.stnm
-    };
-    detailModalVisible.value = true;
-  } else if (activeTab.value === 'partAccess') {
-    // 已接入电站运行数据
-    detailModalTitle.value = '运行数据详情';
-    detailComponent.value = null;
-    detailProps.value = {
-      stcd: record.stcd,
-      stnm: record.stnm
-    };
-    detailModalVisible.value = true;
-  } else if (activeTab.value === 'isAccess') {
-    // 已开展全过程监测工作
-    detailModalTitle.value = '监测数据详情';
-    detailComponent.value = null;
-    detailProps.value = {
-      stcd: record.stcd,
-      stnm: record.stnm
-    };
-    detailModalVisible.value = true;
-  }
-};
-
-// 获取图表和表格数据
-const getData = async () => {
-  if (!props.dataDimensionVal) return;
-
-  const baseFilters: any[] = [
-    { field: 'sttpCode', operator: 'eq', dataType: 'string', value: 'ENG' },
-    { field: 'bldsttCcode', operator: 'in', dataType: 'string', value: ['1', '2'] }
-  ];
-  
-  if (props.dataDimensionVal !== 'all') {
-    baseFilters.unshift({ field: 'baseId', operator: 'eq', dataType: 'string', value: props.dataDimensionVal });
-  }
-
-  let params: any = {};
-
-  if (activeTab.value === 'notAccess') {
-    // 大中型已建在建电站
-    params = {
+    const params1 = {
       filter: {
         logic: 'and',
         filters: [
           ...baseFilters,
-          { field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }
+          {
+            field: 'prsc',
+            operator: 'in',
+            dataType: 'string',
+            value: ['1', '2', '3']
+          }
         ]
-      }
+      },
+      group: [{ dir: 'desc', field: 'sttpCode' }]
     };
-  } else if (activeTab.value === 'partAccess') {
-    // 已接入电站运行数据
-    params = {
+    const params2 = {
       filter: {
         logic: 'and',
         filters: [
@@ -175,265 +172,855 @@ const getData = async () => {
           { field: 'runState', operator: 'eq', dataType: 'number', value: 4 },
           { field: 'dtin', operator: 'eq', dataType: 'number', value: 1 }
         ]
-      }
+      },
+      group: [{ dir: 'desc', field: 'sttpCode' }]
     };
-  } else if (activeTab.value === 'isAccess') {
-    // 已开展全过程监测工作
-    params = {
+    const params3 = {
       filter: {
         logic: 'and',
         filters: [
           ...baseFilters,
-          { field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] },
+          {
+            field: 'prsc',
+            operator: 'in',
+            dataType: 'string',
+            value: ['1', '2', '3']
+          },
           { field: 'dtinEnv', operator: 'in', dataType: 'string', value: ['2'] }
         ]
-      }
+      },
+      group: [{ dir: 'desc', field: 'dtinEnv' }]
     };
+
+    const allRes = await Promise.all([
+      getVmsstbprptKendoList(params1),
+      getVmsstbprptKendoList(params2),
+      getVmsstbprptKendoList(params3)
+    ]);
+
+    const list: TabItem[] = [];
+    const responses = [allRes[0], allRes[1], allRes[2]];
+    const tabConfigs = [
+      { col: 'engEnvTotal1', key: 'notAccess', value: '大中型已建在建电站' },
+      { col: 'engEnvTotal2', key: 'partAccess', value: '已接入电站运行数据' },
+      { col: 'engEnvTotal', key: 'isAccess', value: '已开展全过程监测工作' }
+    ];
+
+    responses.forEach((res, index) => {
+      const resData = res?.data?.data;
+      if (resData && Array.isArray(resData) && resData.length > 0) {
+        const count = resData[0]?.count ?? 0;
+        list.push({ ...tabConfigs[index], unit: '座', count });
+      }
+    });
+
+    return list;
+  } catch (error) {
+    console.error('获取Tab数据失败:', error);
+    message.error('获取Tab数据失败');
+    return [];
+  }
+}
+
+async function fetchPieData(
+  baseId: string,
+  dataState: string
+): Promise<PieDataItem[]> {
+  try {
+    const commonFilters: any[] = [
+      baseId !== 'all'
+        ? { field: 'baseId', operator: 'eq', dataType: 'string', value: baseId }
+        : null,
+      { field: 'sttpCode', operator: 'eq', dataType: 'string', value: 'ENG' },
+      {
+        field: 'bldsttCcode',
+        operator: 'in',
+        dataType: 'string',
+        value: ['1', '2']
+      }
+    ].filter(Boolean);
+
+    if (dataState === 'partAccess') {
+      commonFilters.push(
+        { field: 'runState', operator: 'eq', dataType: 'number', value: 4 },
+        { field: 'dtin', operator: 'eq', dataType: 'number', value: 1 }
+      );
+    } else {
+      commonFilters.push({
+        field: 'prsc',
+        operator: 'in',
+        dataType: 'string',
+        value: ['1', '2', '3']
+      });
+    }
+
+    if (dataState === 'isAccess') {
+      commonFilters.push({
+        field: 'dtinEnv',
+        operator: 'in',
+        dataType: 'string',
+        value: ['2']
+      });
+    }
+
+    if (stnm.value) {
+      commonFilters.push({
+        field: 'stnm',
+        operator: 'contains',
+        dataType: 'string',
+        value: stnm.value
+      });
+    }
+
+    const sortConfig: any[] = [
+      baseId === 'all'
+        ? { dir: 'asc', field: 'baseStepSort' }
+        : { dir: 'asc', field: 'rvcdStepSort' },
+      { dir: 'asc', field: baseId === 'all' ? 'baseId' : 'hbrvcd' },
+      { dir: 'asc', field: baseId === 'all' ? 'baseName' : 'hbrvcdName' }
+    ].filter(Boolean);
+
+    const res = await getVmsstbprptKendoList({
+      filter: { logic: 'and', filters: commonFilters },
+      group: sortConfig
+    });
+
+    const resData = res?.data?.data || [];
+    if (!Array.isArray(resData)) return [];
+
+    const list = resData.flatMap((item: any) => {
+      const innerItems =
+        baseId === 'all' ? item?.items : item?.items;
+      if (!innerItems) return [];
+
+      return innerItems
+        .map((outItem: any) => {
+          const name =
+            baseId === 'all'
+              ? outItem?.items?.[0]?.key
+              : outItem?.items?.[0]?.key || outItem?.HBRVCDNAME;
+          if (!name) return null;
+
+          const levelData =
+            baseId === 'all'
+              ? outItem?.items?.[0]?.items?.[0]
+              : outItem?.items?.[0]?.items?.[0];
+
+          return {
+            key:
+              baseId === 'all' ? outItem?.key : outItem?.HBRVCD || outItem?.key,
+            dataDimensionRecursive: 'true',
+            name,
+            value:
+              baseId === 'all'
+                ? levelData?.COUNT_BASEID || 0
+                : levelData?.COUNT_HBRVCD || 0
+          };
+        })
+        .filter(Boolean);
+    });
+
+    return list;
+  } catch (error) {
+    console.error('获取饼图数据失败:', error);
+    message.error('获取饼图数据失败');
+    return [];
+  }
+}
+
+const listUrl = computed(() =>
+  qid.value === 'all' ? getVmsstbprptKendoListCust : getVmsstbprptKendoList
+);
+
+const customTransform = (res: any) => ({
+  records: res?.data?.data || res?.data?.items || [],
+  total: res?.data?.total || 0
+});
+
+function handleExport() {
+  const currentTab = tabKey.value;
+  if (
+    tableRefs.value[currentTab] &&
+    typeof tableRefs.value[currentTab].exportTable === 'function'
+  ) {
+    tableRefs.value[currentTab].exportTable({
+      fileName: '环境监测数据接入情况'
+    });
+  } else {
+    message.info('导出功能待实现');
+  }
+}
+
+const chartSetting = computed<EChartsOption>(() => {
+  const total = pieData.value.reduce((acc, item) => acc + item.value, 0);
+
+  const colors = pieData.value.map((_item: any, index: number) => {
+    return jdColor[index % jdColor.length];
+  });
+
+  return {
+    color: colors,
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) =>
+        `电站数量<div>${params.marker}${params.name}: &nbsp;&nbsp;&nbsp;&nbsp;<span style="float:right">${params.value}座</span></div>`
+    },
+    title: [
+      {
+        text: String(total || 0),
+        left: '28%',
+        top: '43%',
+        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#333' }
+      },
+      {
+        text: '电站总数量',
+        left: '28%',
+        top: '50%',
+        textStyle: { fontSize: 14, color: '#666' }
+      },
+      {
+        text: ' (座)',
+        left: '32%',
+        top: '55%',
+        textStyle: { fontSize: 12, color: '#999' }
+      }
+    ],
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      right: 10,
+      top: 20,
+      bottom: 20,
+      textStyle: { fontSize: 12 }
+    },
+    series: [
+      {
+        name: '电站数量',
+        type: 'pie',
+        radius: ['30%', '40%'],
+        center: ['35%', '50%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: '{b}',
+          fontSize: 12
+        },
+        emphasis: {
+          scale: true,
+          scaleSize: 10
+        },
+        data: pieData.value.map(item => ({ ...item }))
+      }
+    ]
+  };
+});
+
+function initChart(tabKeyStr?: string) {
+  const currentTabKey = tabKeyStr || tabKey.value || 'notAccess';
+  const chartContainer = chartRefs.value[currentTabKey];
+
+  if (!chartContainer) {
+    setTimeout(() => initChart(currentTabKey), 200);
+    return;
+  }
+
+  if (chartInstances.value[currentTabKey]) {
+    chartInstances.value[currentTabKey].dispose();
+    chartInstances.value[currentTabKey] = null;
   }
 
   try {
-    tableLoading.value = true;
-    const res = await getVmsstbprptKendoList(params);
-    const resData = res?.data?.data || [];
+    chartInstances.value[currentTabKey] = echarts.init(chartContainer, null, {
+      width: 541,
+      height: 482
+    });
 
-    // 处理表格数据
-    tableData.value = resData.map((item: any) => ({
-      key: item.stcd,
-      stcd: item.stcd,
-      stnm: item.stnm,
-      accessStatus: getAccessStatus(item),
-      ...item
-    }));
+    chartInstances.value[currentTabKey].on(
+      'legendselectchanged',
+      handleLegendSelectChanged
+    );
 
-    // 更新图表
-    updateChart(resData);
+    if (pieData.value.length > 0) {
+      updateChart(currentTabKey);
+      setTimeout(() => {
+        chartInstances.value[currentTabKey]?.resize();
+      }, 100);
+    }
   } catch (error) {
-    console.error('HuanJingSJJRQK getData error:', error);
+    console.error('ECharts init failed:', error);
+    setTimeout(() => initChart(currentTabKey), 300);
+  }
+}
+
+function updateChart(tabKeyStr?: string) {
+  const currentTabKey = tabKeyStr || tabKey.value || 'notAccess';
+  const instance = chartInstances.value[currentTabKey];
+  if (!instance) return;
+  instance.setOption(chartSetting.value, true);
+}
+
+function handleResize() {
+  Object.values(chartInstances.value).forEach(instance => {
+    if (instance) instance.resize();
+  });
+}
+
+function handleLegendSelectChanged(e: any) {
+  const trueRivers = Object.keys(e.selected).filter(key => e.selected[key]);
+  const allFalse = Object.values(e.selected).every(value => value === false);
+
+  const selectedKeys = pikData.value
+    .filter((item: any) => trueRivers.includes(item.name))
+    .map((item: any) => item.key);
+
+  pieCode.value = allFalse ? [] : selectedKeys;
+}
+
+const columns = [
+  {
+    title: '电站名称',
+    dataIndex: 'stnm',
+    key: 'stnm',
+    fixed: 'left',
+    ellipsis: true,
+    width: 150,
+    slots: { customRender: 'stnm' }
+  },
+  {
+    title: '建设状态',
+    dataIndex: 'bldsttCcodeName',
+    key: 'bldsttCcodeName',
+    fixed: 'left',
+    ellipsis: true,
+    width: 100
+  },
+  {
+    title: '开发方式',
+    dataIndex: 'dvtpName',
+    key: 'dvtpName',
+    ellipsis: true,
+    width: 120
+  },
+  {
+    title: '装机容量(万kW)',
+    dataIndex: 'ttpwr',
+    key: 'ttpwr',
+    ellipsis: true,
+    width: 150,
+    sort: true,
+    customRender: ({ text }: any) => (text ? Number(text).toFixed(2) : '-')
+  },
+  {
+    title: '所属基地',
+    dataIndex: 'baseName',
+    key: 'baseName',
+    width: 150,
+    ellipsis: true
+  },
+  {
+    title: '所属行政区',
+    dataIndex: 'addvcdName',
+    key: 'addvcdName',
+    width: 150,
+    ellipsis: true
+  },
+  {
+    title: '所在河段',
+    dataIndex: 'hbrvcdName',
+    key: 'hbrvcdName',
+    width: 240,
+    merge: true,
+    ellipsis: true
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 100,
+    fixed: 'right',
+    slots: { customRender: 'action' }
+  }
+];
+
+function handleRowClick(record: any) {
+  modelStore.params = record
+  modelStore.params.sttp = record.sttpCode 
+  modelStore.title = record.stnm ? `${record.stnm} ` : '';
+  // modelStore.tabList = handleTabs(modelStore.params);
+  modelStore.modalVisible = true;
+}
+
+function handleViewDetail(record: any) {
+  detailStation.value = record;
+  detailVisible.value = true;
+  fetchDetailData(record);
+}
+
+async function fetchDetailData(record: any) {
+  detailLoading.value = true;
+  try {
+    const res = await getMsstbprptKendoList({
+      filter: {
+        logic: 'or',
+        filters: [
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: record.stcd
+          },
+          {
+            logic: 'and',
+            filters: [
+              {
+                field: 'rstcd',
+                operator: 'contains',
+                dataType: 'string',
+                value: record.stcd
+              },
+              {
+                logic: 'or',
+                filters: [
+                  {
+                    field: 'sttpCode',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 'ZZ'
+                  },
+                  {
+                    field: 'sttpFullPath',
+                    operator: 'contains',
+                    dataType: 'string',
+                    value: 'VD,'
+                  },
+                  {
+                    field: 'sttpFullPath',
+                    operator: 'contains',
+                    dataType: 'string',
+                    value: 'ENV,'
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      sort: [
+        { field: 'sttpName', dir: 'asc' },
+        { field: 'stnm', dir: 'asc' }
+      ]
+    });
+    detailData.value = res?.data?.data || [];
+  } catch (error) {
+    console.error('获取接入详情失败:', error);
+    detailData.value = [];
   } finally {
-    tableLoading.value = false;
+    detailLoading.value = false;
   }
-};
+}
 
-// 获取接入状态文本
-const getAccessStatus = (item: any) => {
-  if (activeTab.value === 'notAccess') {
-    return '已建在建';
-  } else if (activeTab.value === 'partAccess') {
-    return '已接入';
-  } else if (activeTab.value === 'isAccess') {
-    return '已监测';
+const searchList = computed(() => [
+  {
+    type: 'Select',
+    name: 'Select',
+    label: '基地选择',
+    options:
+      jiDiList.value?.map((item: any) => ({
+        value: item.wbsCode,
+        label: item.wbsName,
+        qid: item.wbsCode
+      })) || []
+  },
+  {
+    type: 'Input',
+    name: 'stnm',
+    label: '',
+    fieldProps: {
+      allowClear: true,
+      placeholder: '请输入电站名称'
+    }
   }
-  return '-';
-};
+]);
 
-// 更新图表
-const updateChart = (data: any[]) => {
-  if (!chartInstance) return;
+const initialValues = computed(() => ({
+  Select: defJD.value,
+  stnm: null
+}));
 
-  // 按建设状态分组统计
-  const statusMap: Record<string, number> = {};
-  data.forEach((item: any) => {
-    const status = item.bldsttCcode === '1' ? '在建' : '已建';
-    statusMap[status] = (statusMap[status] || 0) + 1;
-  });
+function handleSearch(values: any) {
+  qid.value = values.Select || 'all';
+  stnm.value = values.stnm || null;
+}
 
-  const chartData = Object.entries(statusMap).map(([name, value]) => ({
-    name,
-    value
-  }));
+function handleReset() {
+  qid.value = props.dataDimensionVal || 'all';
+  stnm.value = null;
+  defJD.value =
+    jiDiList.value.find(
+      (item: any) => item.wbsCode === (props.dataDimensionVal || 'all')
+    )?.wbsCode || '';
+}
 
-  const option = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b}: {c} ({d}%)'
-    },
-    legend: {
-      orient: 'vertical',
-      left: 'left',
-      top: 'center'
-    },
-    color: ['#78c300', '#2196F3'],
-    series: [
-      {
-        name: '电站数量',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        center: ['60%', '50%'],
-        data: chartData,
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        },
-        label: {
-          show: true,
-          formatter: '{b}: {c}'
+const tableSearchParams = computed(() => ({
+  sort: [
+    { field: 'baseStepSort', dir: 'asc' },
+    { field: 'rvcdStepSort', dir: 'asc' },
+    { field: 'siteStepSort', dir: 'asc' },
+    { field: 'ttpwr', dir: 'desc' }
+  ],
+  group: [],
+  select: [],
+  groupResultFlat: false
+}));
+
+const buildFilter = computed(() => {
+  const filters: any[] = [
+    pieCode.value?.length > 0 && qid.value === 'all'
+      ? {
+          field: 'baseId',
+          operator: 'in',
+          dataType: 'string',
+          value: pieCode.value
         }
-      }
-    ]
-  };
-
-  chartInstance.setOption(option, true);
-
-  // 添加点击事件
-  chartInstance.off('click');
-  chartInstance.on('click', (params: any) => {
-    chartFilter.value = params.name;
-    filterTableByChart(params.name);
-  });
-};
-
-// 根据图表筛选表格
-const filterTableByChart = (status: string) => {
-  // 这里需要根据实际数据重新请求或过滤
-  // 暂时简单实现：高亮显示对应状态的数据
-  console.log('筛选状态:', status);
-};
-
-// 初始化图表
-const initChart = () => {
-  if (!chartContainer.value) return;
-
-  chartInstance = echarts.init(chartContainer.value);
-
-  const option = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b}: {c} ({d}%)'
-    },
-    legend: {
-      orient: 'vertical',
-      left: 'left',
-      top: 'center'
-    },
-    color: ['#78c300', '#2196F3'],
-    series: [
-      {
-        name: '电站数量',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        center: ['60%', '50%'],
-        data: [],
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        },
-        label: {
-          show: true,
-          formatter: '{b}: {c}'
+      : qid.value !== 'all'
+      ? {
+          field: 'baseId',
+          operator: 'eq',
+          dataType: 'string',
+          value: qid.value
         }
-      }
-    ]
-  };
+      : null,
+    { field: 'sttpCode', operator: 'eq', dataType: 'string', value: 'ENG' },
+    pieCode.value?.length > 0 && qid.value !== 'all'
+      ? {
+          field: 'hbrvcd',
+          operator: 'in',
+          dataType: 'string',
+          value: pieCode.value
+        }
+      : null,
+    {
+      field: 'bldsttCcode',
+      operator: 'in',
+      dataType: 'string',
+      value: ['1', '2']
+    },
+    {
+      field: 'prsc',
+      operator: 'in',
+      dataType: 'string',
+      value: ['1', '2', '3']
+    },
+    stnm.value
+      ? {
+          field: 'stnm',
+          operator: 'contains',
+          dataType: 'string',
+          value: stnm.value
+        }
+      : null
+  ].filter(Boolean);
 
-  chartInstance.setOption(option);
-};
-
-// 处理 Tab 切换
-const handleTabChange = (key: string) => {
-  activeTab.value = key;
-  chartFilter.value = '';
-  getData();
-};
-
-onMounted(() => {
-  if (chartContainer.value) {
-    initChart();
+  if (tabKey.value === 'partAccess') {
+    const idx = filters.findIndex((f: any) => f.field === 'prsc');
+    if (idx > -1) {
+      filters.splice(
+        idx,
+        1,
+        { field: 'runState', operator: 'eq', dataType: 'number', value: 4 },
+        { field: 'dtin', operator: 'eq', dataType: 'number', value: 1 }
+      );
+    }
   }
-  getData();
+  if (tabKey.value === 'isAccess') {
+    filters.push({
+      field: 'dtinEnv',
+      operator: 'in',
+      dataType: 'string',
+      value: ['2']
+    });
+  }
+
+  return {
+    logic: 'and',
+    filters
+  };
 });
 
-onUnmounted(() => {
-  if (chartInstance) {
-    chartInstance.dispose();
-    chartInstance = null;
-  }
-});
-
-// 监听 props 变化
 watch(
-  () => props.dataDimensionVal,
-  () => {
-    getData();
-  }
+  qid,
+  async newQid => {
+    if (!newQid) return;
+    dataLoading.value = true;
+    try {
+      const result = await fetchTabData(newQid);
+      tabList.value = result;
+
+      if (result.length > 0) {
+        const matchedTab = props.name
+          ? result.find(item => item.key === props.name)
+          : null;
+        if (matchedTab) {
+          tabKey.value = matchedTab.key;
+          tabCol.value = matchedTab.col;
+        } else {
+          tabKey.value = result[0].key;
+          tabCol.value = result[0].col;
+        }
+      }
+    } catch (error) {
+      console.error('获取Tab数据失败:', error);
+    } finally {
+      dataLoading.value = false;
+    }
+  },
+  { immediate: true }
 );
 
-// 监听窗口大小变化
-const handleResize = () => {
-  if (chartInstance) {
-    chartInstance.resize();
-  }
-};
+watch(
+  [tabKey, qid, stnm],
+  async () => {
+    if (!tabKey.value || !qid.value) return;
+    dataLoading.value = true;
+    try {
+      const result = await fetchPieData(qid.value, tabKey.value);
+      pikData.value = result;
+      pieData.value = result;
+      pieCode.value = [];
+
+      await nextTick();
+      setTimeout(() => {
+        initChart();
+      }, 200);
+    } catch (error) {
+      console.error('获取饼图数据失败:', error);
+    } finally {
+      dataLoading.value = false;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  buildFilter,
+  async () => {
+    await nextTick();
+    tabList.value.forEach(item => {
+      if (tableRefs.value[item.key]) {
+        tableRefs.value[item.key].getList(buildFilter.value);
+      }
+    });
+  },
+  { deep: true }
+);
+
+watch(tabKey, async newKey => {
+  if (!newKey) return;
+  await nextTick();
+  setTimeout(() => {
+    if (tableRefs.value[newKey]) {
+      tableRefs.value[newKey].getList(buildFilter.value);
+    }
+  }, 300);
+});
+
+watch(tabList, async newList => {
+  if (!newList.length || !tabKey.value) return;
+  await nextTick();
+  setTimeout(() => {
+    if (tableRefs.value[tabKey.value]) {
+      tableRefs.value[tabKey.value].getList(buildFilter.value);
+    }
+  }, 300);
+});
 
 onMounted(() => {
+  if (!qid.value) {
+    qid.value = 'all';
+  }
+
   window.addEventListener('resize', handleResize);
 });
 
 onUnmounted(() => {
+  Object.values(chartInstances.value).forEach(instance => {
+    if (instance) instance.dispose();
+  });
+  chartInstances.value = {};
   window.removeEventListener('resize', handleResize);
 });
 </script>
 
-<style lang="scss" scoped>
-.huanjing-sjjrqk {
-  padding: 20px;
+<template>
+  <div class="huanjing-jieru-container">
+    <BasicSearch
+      ref="formRef"
+      :searchList="searchList"
+      :initialValues="initialValues"
+      @finish="handleSearch"
+      @reset="handleReset"
+    >
+      <template #actions>
+        <a-button @click="handleExport">
+          <template #icon><DownloadOutlined /></template>
+          导出
+        </a-button>
+      </template>
+    </BasicSearch>
 
-  .content-wrapper {
+    <a-spin :spinning="dataLoading" tip="加载中...">
+      <a-tabs v-model:activeKey="tabKey" class="dwsta-table-tu">
+        <a-tab-pane
+          v-for="item in tabList"
+          :key="item.key"
+          :tab="`${item.value}(${item.count}${item.unit})`"
+        >
+          <div class="chart-table-layout">
+            <div class="chart-section">
+              <a-empty
+                v-if="pieData.length === 0 && !dataLoading"
+                description="暂无数据"
+              />
+              <div
+                v-else
+                :ref="el => setChartRef(el, item.key)"
+                class="pie-chart"
+                style="width: 541px; height: 482px"
+              ></div>
+            </div>
+
+            <div class="table-section">
+              <BasicTable
+                :ref="el => setTableRef(el, item.key)"
+                :columns="columns"
+                :listUrl="listUrl"
+                :searchParams="tableSearchParams"
+                :transformData="customTransform"
+                :defaultPageSize="20"
+                :scrollY="380"
+              >
+                <template #stnm="{ record }">
+                  <div style="display: flex; gap: 8px; align-items: center">
+                    <a @click="handleRowClick(record)" class="text-link">
+                      {{ record.stnm }}
+                    </a>
+                  </div>
+                </template>
+                <template #action="{ record }">
+                  <a @click="handleViewDetail(record)" class="text-link">
+                    接入详情
+                  </a>
+                </template>
+              </BasicTable>
+            </div>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
+
+    <!-- 接入详情弹窗 -->
+    <Modal
+      v-model:open="detailVisible"
+      :title="(detailStation.stnm || '') + ' 环境监测数据接入情况'"
+      width="1536px"
+      :footer="null"
+      :bodyStyle="{ height: '600px', overflow: 'auto' }"
+    >
+      <a-spin :spinning="detailLoading">
+        <a-table
+          :columns="detailColumns"
+          :data-source="detailData"
+          :pagination="{ pageSize: 20, showSizeChanger: true, showTotal: (total: number) => `共 ${total} 条` }"
+          :scroll="{ y: 450 }"
+          size="small"
+          row-key="stcd"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'stnm'">
+              <a @click="handleRowClick(record)" class="text-link">{{
+                record.stnm
+              }}</a>
+            </template>
+          </template>
+        </a-table>
+      </a-spin>
+    </Modal>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.huanjing-jieru-container {
+  display: flex;
+  flex-direction: column;
+  height: 700px;
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
+}
+
+.dwsta-table-tu {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  :deep(.ant-tabs-content) {
+    height: 100%;
+  }
+
+  :deep(.ant-tabs-tabpane) {
+    height: 100%;
+  }
+
+  :deep(.ant-tabs-nav) {
+    margin-bottom: 16px;
+  }
+}
+
+.chart-table-layout {
+  display: flex;
+  gap: 16px;
+  height: calc(100% - 40px);
+  min-height: 450px;
+
+  .chart-section {
+    flex: 0 0 541px;
+    border-radius: 4px;
+    padding: 16px;
     display: flex;
-    gap: 20px;
-    margin-top: 20px;
+    align-items: center;
+    justify-content: center;
 
-    .chart-section {
-      flex: 0 0 400px;
-      
-      .chart-container {
-        width: 100%;
-        height: 400px;
-      }
-    }
-
-    .table-section {
-      flex: 1;
+    .pie-chart {
+      width: 541px;
+      height: 482px;
     }
   }
 
-  .custom-table {
-    :deep(.ant-table) {
-      font-size: 13px;
-      border: 1px solid #e8e8e8;
+  .table-section {
+    flex: 1;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 4px;
+  }
+}
 
-      .ant-table-thead {
-        > tr {
-          > th {
-            background-color: #e5eff8 !important;
-            color: #2f6b98;
-            font-weight: 600;
-            border: 1px solid #e8e8e8 !important;
-            padding: 6px 8px;
-            text-align: center;
-          }
-        }
-      }
+.text-link {
+  color: #2f6b98;
+  &:hover {
+    color: #40a9ff;
+  }
+}
 
-      .ant-table-tbody {
-        > tr {
-          > td {
-            border: 1px solid #e8e8e8;
-            padding: 6px 8px;
-            text-align: center;
-          }
-
-          &:hover {
-            background-color: #e6f7ff !important;
-          }
-        }
-      }
-    }
+.text-link-detail {
+  color: #2f6b98;
+  font-size: 12px;
+  &:hover {
+    color: #40a9ff;
   }
 }
 </style>
diff --git a/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue b/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue
index b432ef68..c19013f5 100644
--- a/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue
+++ b/frontend/src/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue
@@ -1,652 +1,379 @@
 <script setup lang="ts">
-// ==================== 导入依赖 ====================
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
-import * as echarts from 'echarts'
-import type { EChartsOption } from 'echarts'
-import type { ColumnsType } from 'ant-design-vue/es/table/interface'
-import { DownloadOutlined } from '@ant-design/icons-vue'
-import BasicSearch from '@/components/BasicSearch/index.vue'
-import BasicTable from '@/components/BasicTable/index.vue'
-import { message } from 'ant-design-vue'
-import { useModelStore } from '@/store/modules/model'
-import { handleTabs } from '@/components/MapModal/setting.config'
-import { getKendoList, getKendoListCust, getIntroduce } from '@/api/shuidiankaifa'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import type { EChartsOption } from 'echarts';
+import type { ColumnsType } from 'ant-design-vue/es/table/interface';
+import { DownloadOutlined } from '@ant-design/icons-vue';
+import BasicSearch from '@/components/BasicSearch/index.vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import { message, Spin, Empty } from 'ant-design-vue';
+import { useModelStore } from '@/store/modules/model';
+import { handleTabs } from '@/components/MapModal/setting.config';
+import {
+  getVmsstbprptKendoList,
+  getVmsstbprptKendoListCust,
+  getBaseWbsb
+} from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
-// ==================== 开发配置 ====================
-const USE_MOCK_DATA = true  // 开发时使用模拟数据，生产时改为 false
 
-// ==================== Props 定义 ====================
 const props = defineProps<{
-  defaultJidiInfo?: Record<string, string | number | boolean>  // 默认基地信息
-  seriesName?: string                                          // 系列名称（如："装机容量(万kW)" 或 "数量(座)"）
-  stateName?: string                                           // 状态名称
-  themeecList?: any[]                                          // 主题颜色列表（用于饼图颜色自定义）
-  defaultTab?: string                                          // 默认显示的Tab值（'已建'/'在建'）
-}>()
+  defaultJidiInfo?: Record<string, string | number | boolean>;
+  seriesName?: string;
+  stateName?: string;
+  defaultTab?: string;
+}>();
 
-// ==================== 类型定义 ====================
 interface TabItem {
-  key: string
-  value: string
-  col: string
-  unit: string
-  count: number
+  key: string;
+  value: string;
+  col: string;
+  unit: string;
+  count: number;
 }
 
 interface PieDataItem {
-  key: string
-  name: string
-  value: number
-  unit: string
-  dataDimensionRecursive?: string
-  index?: number
+  key: string;
+  name: string;
+  value: number;
+  unit: string;
+  dataDimensionRecursive?: string;
+  index?: number;
 }
 
 interface TableFilterParams {
-  baseId?: string | Array<{ field: string; operator: string; dataType: string; value: string[] }>
-  hbrvcd?: string | Array<{ field: string; operator: string; dataType: string; value: string[] }>
-  bldsttCcode?: string
-  stnmContains?: string | null
-  prsc?: Array<{ field: string; operator: string; dataType: string; value: string[] }>
-  ttpwr?: Array<{ field: string; operator: string }>
-  sttpCode?: string
+  baseId?:
+    | string
+    | Array<{
+        field: string;
+        operator: string;
+        dataType: string;
+        value: string[];
+      }>;
+  hbrvcd?:
+    | string
+    | Array<{
+        field: string;
+        operator: string;
+        dataType: string;
+        value: string[];
+      }>;
+  bldsttCcode?: string;
+  stnmContains?: string | null;
+  prsc?: Array<{
+    field: string;
+    operator: string;
+    dataType: string;
+    value: string[];
+  }>;
+  ttpwr?: Array<{ field: string; operator: string }>;
+  sttpCode?: string;
 }
 
-interface ModalData {
-  sttp: string
-  stcd: string
-  titleName: string
-}
-
-// ==================== 响应式状态 ====================
-
-// 引入 modelStore 用于控制全局 MapModal
-const modelStore = useModelStore()
+const modelStore = useModelStore();
 const JidiSelectEventStore = useJidiSelectEventStore();
-// 基地相关
-const qid = ref<string>('')
-const jiDiList = ref<any[]>([])
-const defJD = ref<string>(props.defaultJidiInfo?.basename as string || '')
 
-// Tab栏相关
-const tabIndex = ref<string>('')
-const tabKey = ref<string>('')
-const tabCol = ref<string>('')
-const tabList = ref<TabItem[]>([])
+const qid = ref<string>((props.defaultJidiInfo?.baseid as string) || 'all');
+const jiDiList = ref<any[]>([]);
+const defJD = ref<string>((props.defaultJidiInfo?.basename as string) || '');
 
-// 搜索相关
-const stnm = ref<string | null>(null)
-const formRef = ref<any>()
+const tabIndex = ref<string>('');
+const tabKey = ref<string>('');
+const tabCol = ref<string>('');
+const tabList = ref<TabItem[]>([]);
 
-// 饼图相关
-const pieData = ref<PieDataItem[]>([])
-const pieCode = ref<string[]>([])
-const pikData = ref<PieDataItem[]>([])
-const chartRef = ref<HTMLElement | null>(null)
-const chartInstance = ref<any>(null)
-const chartInitialized = ref<boolean>(false)  // 关键：图表初始化标志
-const dataLoading = ref<boolean>(false)
+const stnm = ref<string | null>(null);
+const formRef = ref<any>();
 
-// 弹窗相关（已废弃，改用全局 MapModal）
-// const mapModal = ref<boolean>(false)
-// const modalData = ref<ModalData>({ sttp: '', stcd: '', titleName: '' })
+const pieData = ref<PieDataItem[]>([]);
+const pieCode = ref<string[]>([]);
+const pikData = ref<PieDataItem[]>([]);
+const chartInstance = ref<any>(null);
+const chartInitialized = ref<boolean>(false);
+const dataLoading = ref<boolean>(false);
 
-// 单位配置
-const unit = computed(() => getUnitConfigByCode('Other', 'ZJRL').unit)
-
-// 颜色配置（优先使用themeecList，否则使用默认颜色）
-const jdColor = ['#5B8FF9', '#5AD8A6', '#F6BD16', '#7262FD', '#FF6B6B', '#9556a4', '#30b7b9']
-
-// 表格引用（用于导出功能）
-const tableRef = ref<any>(null)
-
-// ==================== API 服务层（待完善） ====================
-
-/**
- * 获取Tab统计数据
- */
-async function fetchTabData(params: any): Promise<TabItem[]> {
-  console.log('【API】获取Tab数据，参数:', params)
-  
-  // 开发模式：返回模拟数据
-  if (USE_MOCK_DATA) {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        const _name = `装机容量(${unit.value})`
-        const useTtpwrFilter = props.seriesName === _name
-        
-        resolve([
-          {
-            col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
-            key: 'build',
-            unit: useTtpwrFilter ? unit.value : '座',
-            value: '已建',
-            count: useTtpwrFilter ? 4568.50 : 120
-          },
-          {
-            col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
-            key: 'building',
-            unit: useTtpwrFilter ? unit.value : '座',
-            value: '在建',
-            count: useTtpwrFilter ? 2345.30 : 85
-          },
-          {
-            col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
-            key: 'noBuild',
-            unit: useTtpwrFilter ? unit.value : '座',
-            value: '未建',
-            count: useTtpwrFilter ? 1230.20 : 60
-          }
-        ])
-      }, 300)
-    })
+const chartRefs = ref<Record<string, HTMLElement>>({});
+const chartInstances = ref<Record<string, any>>({});
+const setChartRef = (el: any, key: string) => {
+  if (el) {
+    chartRefs.value[key] = el as HTMLElement;
   }
-  
-  // 生产模式：调用真实 API
+};
+
+const tableRefs = ref<Record<string, any>>({});
+const setTableRef = (el: any, key: string) => {
+  if (el) tableRefs.value[key] = el;
+};
+
+const unit = '万kW';
+const jdColor = [
+  '#5B8FF9',
+  '#5AD8A6',
+  '#F6BD16',
+  '#7262FD',
+  '#FF6B6B',
+  '#9556a4',
+  '#30b7b9'
+];
+const tableRef = ref<any>(null);
+
+function transUnit(value: number): number {
+  return Math.round(value * 0.1 * 100) / 100;
+}
+
+async function fetchTabData(params: any): Promise<TabItem[]> {
   try {
-    const _name = `装机容量(${unit.value})`
-    const useTtpwrFilter = props.seriesName === _name
-    
-    // 构建排序配置
-    const aggregates = [{ field: 'ttpwr', aggregate: 'sum' }]
+    const _name = `装机容量(${unit})`;
+    const useTtpwrFilter = props.seriesName === _name;
+
+    const aggregates = [{ field: 'ttpwr', aggregate: 'sum' }];
     const sortConfig = useTtpwrFilter
       ? [{ dir: 'desc', field: 'bldsttCcode', aggregates }]
-      : [{ dir: 'desc', field: 'bldsttCcode' }]
-    
-    // 调用真实 API
-    const res = await getKendoList(
-      useTtpwrFilter 
-        ? { ...params, ttpwr: [{ field: 'ttpwr', operator: 'isnotnull' }] }
-        : params,
-      sortConfig
-    )
-    
-    if (!res?.data || !Array.isArray(res.data)) {
-      console.warn('【API】Tab数据返回格式异常:', res)
-      return []
-    }
-    
-    // 数据处理逻辑（与React版本一致）
-    let list: TabItem[] = []
-    
-    res.data.reduce((acc: any, cur: any) => {
-      if (cur.key === '0') {
+      : [{ dir: 'desc', field: 'bldsttCcode' }];
+
+    const filterParams = useTtpwrFilter
+      ? [...params, { field: 'ttpwr', operator: 'isnotnull' }]
+      : params;
+
+    const res = await getVmsstbprptKendoList({
+      filter: {
+        logic: 'and',
+        filters: filterParams
+      },
+      group: sortConfig
+    });
+
+    const resData = res?.data?.data || [];
+    if (!Array.isArray(resData)) return [];
+
+    let list: TabItem[] = [];
+    resData.forEach((cur: any) => {
+      if (cur.key == '0') {
         list.push({
           col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
           key: 'noBuild',
-          unit: useTtpwrFilter ? unit.value : '座',
+          unit: useTtpwrFilter ? unit : '座',
           value: '未建',
-          count: (cur?.items[0]?.SUM_TTPWR && transUnit(cur?.items[0]?.SUM_TTPWR, 'Other', 'ZJRL')) || cur.items[0].COUNT_ENGID
-        })
-      } else if (cur.key === '1') {
+          count: useTtpwrFilter
+            ? cur?.items[0]?.SUM_TTPWR
+              ? transUnit(cur.items[0].SUM_TTPWR)
+              : 0
+            : cur?.items[0]?.COUNT_BLDSTTCCODE || 0
+        });
+      } else if (cur.key == '1') {
         list.push({
           col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
           key: 'building',
-          unit: useTtpwrFilter ? unit.value : '座',
+          unit: useTtpwrFilter ? unit : '座',
           value: '在建',
-          count: (cur?.items[0]?.SUM_TTPWR && transUnit(cur?.items[0]?.SUM_TTPWR, 'Other', 'ZJRL')) || cur.items[0].COUNT_ENGID
-        })
-      } else if (cur.key === '2') {
+          count: useTtpwrFilter
+            ? cur?.items[0]?.SUM_TTPWR
+              ? transUnit(cur.items[0].SUM_TTPWR)
+              : 0
+            : cur?.items[0]?.COUNT_BLDSTTCCODE || 0
+        });
+      } else if (cur.key == '2') {
         list.push({
           col: useTtpwrFilter ? 'ttpwr' : 'engTotal',
           key: 'build',
-          unit: useTtpwrFilter ? unit.value : '座',
+          unit: useTtpwrFilter ? unit : '座',
           value: '已建',
-          count: (cur?.items[0]?.SUM_TTPWR && transUnit(cur?.items[0]?.SUM_TTPWR, 'Other', 'ZJRL')) || cur.items[0].COUNT_ENGID
-        })
+          count: useTtpwrFilter
+            ? cur?.items[0]?.SUM_TTPWR
+              ? transUnit(cur.items[0].SUM_TTPWR)
+              : 0
+            : cur?.items[0]?.COUNT_BLDSTTCCODE || 0
+        });
       }
-      return list
-    }, [])
-    
-    console.log('【API】Tab数据处理结果:', list)
-    return list
+    });
+
+    return list;
   } catch (error) {
-    console.error('【API】获取Tab数据失败:', error)
-    message.error('获取Tab数据失败')
-    return []
+    console.error('获取Tab数据失败:', error);
+    message.error('获取Tab数据失败');
+    return [];
   }
 }
 
-/**
- * 获取饼图分组数据（完整实现React版本的复杂逻辑）
- */
 async function fetchPieData(params: any): Promise<PieDataItem[]> {
-  console.log('【API】获取饼图数据，参数:', params)
-  console.log('【API】USE_MOCK_DATA:', USE_MOCK_DATA, 'qid.value:', qid.value)
-  
-  // 开发模式：返回模拟数据
-  if (USE_MOCK_DATA) {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        const _name = `装机容量(${unit.value})`
-        const useTtpwrFilter = props.seriesName === _name
-        
-        console.log('【模拟数据】生成饼图数据，useTtpwrFilter:', useTtpwrFilter, 'qid.value:', qid.value)
-        
-        let mockData: PieDataItem[]
-        
-        if (qid.value === 'all') {
-          // 全基地模式：按基地分组
-          mockData = [
-            { key: 'cj', name: '长江流域', value: useTtpwrFilter ? 4568.50 : 120, unit: '', dataDimensionRecursive: 'true' },
-            { key: 'hh', name: '黄河流域', value: useTtpwrFilter ? 2345.30 : 85, unit: '', dataDimensionRecursive: 'true' },
-            { key: 'zj', name: '珠江流域', value: useTtpwrFilter ? 1230.20 : 60, unit: '', dataDimensionRecursive: 'true' },
-            { key: 'hh2', name: '淮河流域', value: useTtpwrFilter ? 890.10 : 45, unit: '', dataDimensionRecursive: 'true' },
-            { key: 'hj', name: '海河流域', value: useTtpwrFilter ? 567.80 : 30, unit: '', dataDimensionRecursive: 'true' }
-          ]
-          console.log('【模拟数据】全基地模式，生成 5 条数据')
-        } else if (qid.value === 'other') {
-          // other 模式：按河段分组
-          mockData = [
-            { key: 'river1', name: '长江干流', value: useTtpwrFilter ? 890.50 : 25, unit: '', dataDimensionRecursive: 'true', index: 1 },
-            { key: 'river2', name: '黄河干流', value: useTtpwrFilter ? 567.30 : 18, unit: '', dataDimensionRecursive: 'true', index: 2 },
-            { key: 'river3', name: '珠江干流', value: useTtpwrFilter ? 345.20 : 12, unit: '', dataDimensionRecursive: 'true', index: 3 }
-          ]
-          console.log('【模拟数据】other 模式，生成 3 条数据')
-        } else {
-          // 单个基地模式：按河段分组
-          mockData = [
-            { key: 'cjgl', name: '长江干流', value: useTtpwrFilter ? 2345.60 : 50, unit: '', dataDimensionRecursive: 'true' },
-            { key: 'cjzl', name: '长江支流', value: useTtpwrFilter ? 1234.50 : 35, unit: '', dataDimensionRecursive: 'true' },
-            { key: 'cjxz', name: '长江下游', value: useTtpwrFilter ? 987.40 : 25, unit: '', dataDimensionRecursive: 'true' }
-          ]
-          console.log('【模拟数据】单基地模式，生成 3 条数据')
-        }
-        
-        console.log('【模拟数据】✅ 饼图数据生成成功:', mockData.length, '条')
-        console.log('【模拟数据】数据详情:', mockData)
-        
-        resolve(mockData)
-      }, 300)
-    })
-  }
-  
-  // 生产模式：调用真实 API
   try {
-    const _name = `装机容量(${unit.value})`
-    const useTtpwrFilter = props.seriesName === _name
-    
-    // 构建排序配置
-    const aggregates = [{ field: 'ttpwr', aggregate: 'sum' }]
+    const _name = `装机容量(${unit})`;
+    const useTtpwrFilter = props.seriesName === _name;
+
+    const aggregates = [{ field: 'ttpwr', aggregate: 'sum' }];
     const sortConfig = [
-      qid.value === 'all' || qid.value === 'other' ? null : { dir: 'asc', field: 'rvcdStepSort' },
+      qid.value === 'all' || qid.value === 'other'
+        ? null
+        : { dir: 'asc', field: 'rvcdStepSort' },
       qid.value === 'all' ? { dir: 'asc', field: 'baseStepSort' } : null,
-      {
-        dir: 'asc',
-        field: qid.value === 'all' ? 'baseId' : 'hbrvcd'
+      { dir: 'asc', field: qid.value === 'all' ? 'baseId' : 'hbrvcd' },
+      { dir: 'desc', field: qid.value === 'all' ? 'baseName' : 'hbrvcdName' },
+      useTtpwrFilter
+        ? { dir: 'desc', field: 'bldsttCcode', aggregates }
+        : { dir: 'desc', field: 'bldsttCcode' }
+    ].filter(Boolean);
+
+    const filterParams = useTtpwrFilter
+      ? [...params, { field: 'ttpwr', operator: 'isnotnull' }]
+      : params;
+
+    const res = await getVmsstbprptKendoList({
+      filter: {
+        logic: 'and',
+        filters: filterParams
       },
-      {
-        dir: 'desc',
-        field: qid.value === 'all' ? 'baseName' : 'hbrvcdName'
-      },
-      {
-        dir: 'desc',
-        field: 'bldsttCcode',
-        aggregates
-      }
-    ].filter(Boolean)
-    
-    // 调用真实 API
-    const res = await getKendoList(
-      useTtpwrFilter 
-        ? { ...params, ttpwr: [{ field: 'ttpwr', operator: 'isnotnull' }] }
-        : params,
-      sortConfig as any[]
-    )
-    
-    if (!res?.data || !Array.isArray(res.data)) {
-      console.warn('【API】饼图数据返回格式异常:', res)
-      return []
-    }
-    
-    // 数据处理逻辑（完全复刻React版本的flatMap逻辑）
-    let list = res.data.flatMap((item: any) => {
-      let arr: PieDataItem[] = []
-      
-      // 关键：根据 qid 决定数据提取路径
-      const itmeData = (qid.value === 'all' || qid.value === 'other') 
-        ? item?.items 
-        : item?.items[0]?.items
-      
+      group: sortConfig
+    });
+
+    const resData = res?.data?.data || [];
+    if (!Array.isArray(resData)) return [];
+
+    let list = resData.flatMap((item: any) => {
+      let arr: PieDataItem[] = [];
+
+      const itmeData =
+        qid.value === 'all' || qid.value === 'other'
+          ? item?.items
+          : item?.items[0]?.items;
+
       itmeData?.map((outItem: any) => {
-        const itemList = outItem?.items?.[0]?.items?.[0]
-        
-        // 关键：根据 qid 决定 name 的来源
-        const name = qid.value === 'all' 
-          ? outItem?.items?.[0]?.items?.[0]?.items?.[0]?.BASENAME 
-          : (outItem?.items?.[0]?.items?.[0]?.BASENAME || outItem?.items?.[0]?.items?.[0]?.HBRVCDNAME)
-        
+        const level5Data =
+          qid.value === 'all' || qid.value === 'other'
+            ? outItem?.items?.[0]?.items?.[0]?.items?.[0]
+            : outItem?.items?.[0]?.items?.[0];
+
+        const name =
+          qid.value === 'all'
+            ? outItem?.items?.[0]?.key
+            : qid.value === 'other'
+            ? outItem?.items?.[0]?.key
+            : outItem?.key || outItem?.HBRVCDNAME;
+
         if (name) {
           arr.push({
-            key: qid.value === 'all' 
-              ? item?.items[0].key 
-              : (qid.value === 'other' ? item?.key : item?.items?.[0]?.key),
+            key:
+              qid.value === 'all'
+                ? outItem?.key
+                : qid.value === 'other'
+                ? outItem?.key
+                : outItem?.HBRVCD || outItem?.key,
             dataDimensionRecursive: 'true',
             name: name,
             unit: '',
-            value: qid.value === 'all' && useTtpwrFilter
-              ? (itemList?.SUM_TTPWR && +transUnit(itemList?.SUM_TTPWR, 'Other', 'ZJRL'))
-              : (qid.value === 'all' && !useTtpwrFilter
-                ? itemList?.COUNT_BASEID
-                : ((outItem?.items?.[0]?.items?.[0]?.SUM_TTPWR && +transUnit(outItem?.items?.[0]?.items?.[0]?.SUM_TTPWR, 'Other', 'ZJRL')) 
-                  || outItem?.items?.[0]?.items?.[0]?.COUNT_BLDSTTCCODE))
-          })
+            value:
+              qid.value === 'all' && useTtpwrFilter
+                ? level5Data?.SUM_TTPWR && +transUnit(level5Data?.SUM_TTPWR)
+                : qid.value === 'all' && !useTtpwrFilter
+                ? level5Data?.COUNT_BLDSTTCCODE
+                : qid.value === 'other' && useTtpwrFilter
+                ? level5Data?.SUM_TTPWR && +transUnit(level5Data?.SUM_TTPWR)
+                : qid.value === 'other' && !useTtpwrFilter
+                ? level5Data?.COUNT_BLDSTTCCODE
+                : (level5Data?.SUM_TTPWR &&
+                    +transUnit(level5Data?.SUM_TTPWR)) ||
+                  level5Data?.COUNT_BLDSTTCCODE
+          });
         }
-      })
-      
-      return arr
-    })
-    
-    // 特殊处理：other 类型需要调用 getIntroduce 接口排序
+      });
+
+      return arr;
+    });
+
     if (qid.value === 'other' && list.length > 0) {
-      const introRes = await getIntroduce(
-        [
-          { field: 'wbsType', operator: 'eq', value: 'PSB_RVCD' },
-          { field: 'objId', operator: 'eq', value: 'other' },
-          { field: 'orderIndex', operator: 'isnotnull' }
-        ],
-        [{ field: 'orderIndex', dir: 'asc' }],
-        false,
-        ['wbsCode', 'wbsName', 'orderIndex']
-      )
-      
-      if (introRes?.data?.length && list?.length) {
-        list = list.map((el: any) => {
-          const found = introRes.data.find((item: any) => el?.key === item?.wbsCode)
-          return {
-            ...el,
-            index: found?.orderIndex
-          }
-        }).sort((a: any, b: any) => a?.index - b?.index)
-      }
-    }
-    
-    console.log('【API】饼图数据处理结果:', list)
-    return list
-  } catch (error) {
-    console.error('【API】获取饼图数据失败:', error)
-    message.error('获取饼图数据失败')
-    return []
-  }
-}
+      const introRes = await getBaseWbsb({
+        filter: {
+          logic: 'and',
+          filters: [
+            { field: 'wbsType', operator: 'eq', value: 'PSB_RVCD' },
+            { field: 'objId', operator: 'eq', value: 'other' },
+            { field: 'orderIndex', operator: 'isnotnull' }
+          ]
+        },
+        sort: [{ field: 'orderIndex', dir: 'asc' }],
+        select: ['wbsCode', 'wbsName', 'orderIndex']
+      });
 
-/**
- * 获取other类型的排序信息
- */
-async function fetchIntroduce(params: any): Promise<any[]> {
-  // TODO: 替换为实际API调用
-  
-  console.log('【模拟】获取排序信息，参数:', params)
-  
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve([
-        { wbsCode: 'river1', orderIndex: 1 },
-        { wbsCode: 'river2', orderIndex: 2 },
-        { wbsCode: 'river3', orderIndex: 3 }
-      ])
-    }, 300)
-  })
-}
-
-/**
- * 表格数据请求函数
- */
-async function fetchTableData(params: any): Promise<any> {
-  console.log('【API】获取表格数据，参数:', params)
-  
-  // 开发模式：返回模拟数据
-  if (USE_MOCK_DATA) {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        const buildStatus = params.bldsttCcode
-        const hbrvcdFilter = Array.isArray(params.hbrvcd) 
-          ? params.hbrvcd[0]?.value || [] 
-          : []
-        
-        // 电站基础数据模板
-        const stationTemplates = [
-          { name: '三峡', river: 'cjgl', baseName: '长江流域', province: '湖北省' },
-          { name: '葛洲坝', river: 'cjgl', baseName: '长江流域', province: '湖北省' },
-          { name: '向家坝', river: 'cjgl', baseName: '长江流域', province: '四川省' },
-          { name: '溪洛渡', river: 'cjgl', baseName: '长江流域', province: '云南省' },
-          { name: '白鹤滩', river: 'cjgl', baseName: '长江流域', province: '四川省' },
-          { name: '乌东德', river: 'cjgl', baseName: '长江流域', province: '云南省' },
-          { name: '小浪底', river: 'hhgl', baseName: '黄河流域', province: '河南省' },
-          { name: '刘家峡', river: 'hhgl', baseName: '黄河流域', province: '甘肃省' },
-          { name: '龙羊峡', river: 'hhgl', baseName: '黄河流域', province: '青海省' },
-          { name: '拉西瓦', river: 'hhgl', baseName: '黄河流域', province: '青海省' },
-          { name: '天生桥', river: 'zjgl', baseName: '珠江流域', province: '贵州省' },
-          { name: '岩滩', river: 'zjgl', baseName: '珠江流域', province: '广西区' },
-          { name: '大化', river: 'zjgl', baseName: '珠江流域', province: '广西区' },
-          { name: '响洪甸', river: 'hhgl2', baseName: '淮河流域', province: '安徽省' },
-          { name: '梅山', river: 'hhgl2', baseName: '淮河流域', province: '安徽省' },
-          { name: '潘家口', river: 'hjgl', baseName: '海河流域', province: '河北省' },
-          { name: '大黑汀', river: 'hjgl', baseName: '海河流域', province: '河北省' },
-          { name: '丰满', river: 'sjgl', baseName: '松花江流域', province: '吉林省' },
-          { name: '白山', river: 'sjgl', baseName: '松花江流域', province: '吉林省' },
-          { name: '水丰', river: 'ljgl', baseName: '辽河流域', province: '辽宁省' }
-        ]
-        
-        // 根据建设状态筛选电站
-        let filteredStations = stationTemplates
-        
-        // 如果有河段过滤，进一步筛选
-        if (hbrvcdFilter.length > 0) {
-          filteredStations = stationTemplates.filter(s => hbrvcdFilter.includes(s.river))
-        }
-        
-        // 如果没有匹配的河段，返回空数组
-        if (filteredStations.length === 0) {
-          // 关键：返回 BasicTable 期望的格式 { data: { records: [], total: 0 } }
-          resolve({
-            data: {
-              records: [],
-              total: 0
-            }
+      const introData = introRes?.data?.data || [];
+      if (introData?.length && list?.length) {
+        list = list
+          .map((el: any) => {
+            const found = introData.find(
+              (item: any) => el?.key === item?.wbsCode
+            );
+            return {
+              ...el,
+              index: found?.orderIndex
+            };
           })
-          return
-        }
-        
-        // 生成模拟记录
-        const mockRecords = filteredStations.map((station, index) => {
-          // 根据不同状态生成不同的装机容量范围
-          let ttpwrRange
-          if (buildStatus === '2') {
-            // 已建：较大容量
-            ttpwrRange = [5000, 30000]
-          } else if (buildStatus === '1') {
-            // 在建：中等容量
-            ttpwrRange = [2000, 15000]
-          } else {
-            // 未建：较小容量或规划中
-            ttpwrRange = [1000, 8000]
-          }
-          
-          const ttpwr = Math.floor(Math.random() * (ttpwrRange[1] - ttpwrRange[0]) + ttpwrRange[0])
-          const yrge = (ttpwr * 0.04).toFixed(2) // 年发电量约为装机容量的4%
-          const ttcp = (Math.random() * 200 + 50).toFixed(2)
-          
-          // 投产时间根据状态设置
-          let piodt, aiodt
-          if (buildStatus === '2') {
-            // 已建：过去的时间
-            const year = 2000 + Math.floor(Math.random() * 20)
-            piodt = `${year}-0${Math.floor(Math.random() * 9 + 1)}-${Math.floor(Math.random() * 28 + 1)}`
-            aiodt = `${year + Math.floor(Math.random() * 5 + 1)}-0${Math.floor(Math.random() * 9 + 1)}-${Math.floor(Math.random() * 28 + 1)}`
-          } else if (buildStatus === '1') {
-            // 在建：未来1-3年
-            const year = 2026 + Math.floor(Math.random() * 3)
-            piodt = `${year}-0${Math.floor(Math.random() * 9 + 1)}-${Math.floor(Math.random() * 28 + 1)}`
-            aiodt = `${year + Math.floor(Math.random() * 3 + 1)}-0${Math.floor(Math.random() * 9 + 1)}-${Math.floor(Math.random() * 28 + 1)}`
-          } else {
-            // 未建：更远的未来
-            const year = 2028 + Math.floor(Math.random() * 7)
-            piodt = `${year}-0${Math.floor(Math.random() * 9 + 1)}-${Math.floor(Math.random() * 28 + 1)}`
-            aiodt = `${year + Math.floor(Math.random() * 5 + 2)}-0${Math.floor(Math.random() * 9 + 1)}-${Math.floor(Math.random() * 28 + 1)}`
-          }
-          
-          return {
-            id: `station_${buildStatus}_${index}`,
-            stcd: `ST${String(index + 1).padStart(4, '0')}`,
-            stnm: `${station.name}水电站`,
-            dvtp: ['堤坝式', '引水式', '混合式'][index % 3],
-            dvtpName: ['堤坝式', '引水式', '混合式'][index % 3],
-            ttpwr: ttpwr,
-            yrge: yrge,
-            ttcp: ttcp,
-            baseName: station.baseName,
-            addvcdName: station.province,
-            hbrvcdName: station.name === '三峡' ? '长江干流' : 
-                       station.name === '葛洲坝' ? '长江干流' :
-                       station.name === '小浪底' ? '黄河干流' :
-                       station.name === '刘家峡' ? '黄河干流' :
-                       station.name === '天生桥' ? '珠江干流' :
-                       station.name === '响洪甸' ? '淮河干流' :
-                       station.name === '潘家口' ? '海河干流' :
-                       station.name === '丰满' ? '松花江干流' :
-                       station.name === '水丰' ? '辽河干流' : `${station.name.substring(0, 2)}河段`,
-            piodt: piodt,
-            aiodt: aiodt
-          }
-        })
-        
-        console.log('【调试】模拟表格数据:', {
-          records: mockRecords.length,
-          total: mockRecords.length,
-          firstRecord: mockRecords[0]
-        })
-        
-        // 关键：返回 BasicTable 期望的格式 { data: { records: [], total: 0 } }
-        resolve({
-          data: {
-            records: mockRecords,
-            total: mockRecords.length
-          }
-        })
-      }, 400)
-    })
-  }
-  
-  // 生产模式：调用真实 API
-  try {
-    // 根据 qid 决定使用哪个接口
-    const url = qid.value === 'all' 
-      ? '/dec-lygk-base-server/base/vmsstbprpt/GetKendoListCust'
-      : '/dec-lygk-base-server/base/vmsstbprpt/GetKendoList'
-    
-    const apiFunc = qid.value === 'all' ? getKendoListCust : getKendoList
-    
-    // 调用真实 API
-    const res = await apiFunc(params, [])
-    
-    // 关键：确保返回格式为 { data: { records: [], total: 0 } }
-    return {
-      data: {
-        records: res?.data?.records || res?.data?.items || [],
-        total: res?.data?.total || 0
+          .sort((a: any, b: any) => a?.index - b?.index);
       }
     }
+
+    return list;
   } catch (error) {
-    console.error('【API】获取表格数据失败:', error)
-    message.error('获取表格数据失败')
-    return {
-      data: {
-        records: [],
-        total: 0
-      }
-    }
+    console.error('获取饼图数据失败:', error);
+    message.error('获取饼图数据失败');
+    return [];
   }
 }
 
-// ==================== 工具函数 ====================
+const listUrl = computed(() =>
+  qid.value === 'all' ? getVmsstbprptKendoListCust : getVmsstbprptKendoList
+);
 
-/**
- * 单位转换函数
- */
-function transUnit(value: number, from: string, to: string): number {
-  // 根据实际业务规则实现
-  // 当前假设：接口返回的单位是 kW，需要转换为万kW
-  if (from === 'Other' && to === 'ZJRL') {
-    return value / 10000 // kW → 万kW
-  }
-  return value
-}
+const customTransform = (res: any) => ({
+  records: res?.data?.data || res?.data?.items || [],
+  total: res?.data?.total || 0
+});
 
-/**
- * 获取单位配置
- */
-function getUnitConfigByCode(code: string, type: string): { unit: string } {
-  // TODO: 从配置文件或API获取
-  // 根据项目实际情况，装机容量通常使用"万kW"作为单位
-  return { unit: '万kW' }
-}
-
-/**
- * 处理导出功能
- */
 function handleExport() {
   if (tableRef.value && typeof tableRef.value.export === 'function') {
-    // 假设 BasicTable 暴露了 export 方法，请根据实际组件 API 调整
-    tableRef.value.export()
+    tableRef.value.export();
   } else {
-    message.info('导出功能待实现：请确认 BasicTable 组件是否暴露了导出方法')
-    console.log('Table Ref:', tableRef.value)
+    message.info('导出功能待实现');
   }
 }
 
-// ==================== ECharts 饼图配置 ====================
-
-/**
- * 计算饼图配置（增强版，支持themeecList自定义颜色）
- */
 const chartSetting = computed<EChartsOption>(() => {
-  console.log('【chartSetting】计算饼图配置，pieData.value 长度:', pieData.value.length)
-  console.log('【chartSetting】pieData.value 内容:', pieData.value)
-  
-  const total = pieData.value.reduce((acc, item) => acc + item.value, 0).toFixed(2)
-  const flag = props.seriesName === '数量(座)'
-  
-  const bbbb = flag ? '电站总数量' : '总装机容量'
-  const dddd = flag ? '电站数量' : '装机容量'
-  const cccc = flag ? ' (座)' : ` (${unit.value})`
-  
-  console.log('【chartSetting】配置信息:', { total, bbbb, dddd, cccc, seriesDataLength: pieData.value.length })
-  
-  // 关键：根据 themeecList 动态设置颜色（与React版本一致）
+  const _name = `装机容量(${unit})`;  // unit = '万kW'
+const useTtpwrFilter = props.seriesName === _name;
+  const total = pieData.value
+    .reduce((acc, item) => acc + item.value, 0)
+    .toFixed(2);
+  const flag = props.seriesName === '数量(座)';
+
+  const bbbb = flag ? '电站总数量' : '总装机容量';
+  const dddd = flag ? '电站数量' : '装机容量';
+  const cccc = flag ? ' (座)' : ` (${unit})`;
+
   const colors = pieData.value.map((item: any, index: any) => {
-    if (props.themeecList && props.themeecList.length > 0) {
-      const themeColor = props.themeecList.find((i: any) => i.name === item.name)
-      return themeColor?.color || jdColor[index % jdColor.length]
-    }
-    return jdColor[index % jdColor.length]
-  })
-  
+    return jdColor[index % jdColor.length];
+  });
+
   return {
-    color: colors,  // 添加颜色配置
+    color: colors,
     tooltip: {
       trigger: 'item',
-      formatter: (params: any) => 
+      formatter: (params: any) =>
         `${dddd}<div>${params.marker}${params.name}: &nbsp;&nbsp;&nbsp;&nbsp;<span style="float:right">${params.value}${cccc}</span></div>`
     },
     title: [
-      { 
-        text: String(total || 0),  // 修复：确保text为string类型
-        left: 'center', 
-        top: '40%', 
-        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#333' } 
+      {
+        text: String(total || 0),
+        left: useTtpwrFilter?'24%':'28%',
+        top: '43%',
+        textStyle: { fontSize: 24, fontWeight: 'bold', color: '#333' }
       },
-      { 
-        text: bbbb, 
-        left: 'center', 
-        top: '50%', 
-        textStyle: { fontSize: 14, color: '#666' } 
+      {
+        text: bbbb,
+        left: useTtpwrFilter?'27%':'28%',
+        top: '50%',
+        textStyle: { fontSize: 14, color: '#666' }
       },
-      { 
-        text: cccc, 
-        left: 'center', 
-        top: '55%', 
-        textStyle: { fontSize: 12, color: '#999' } 
+      {
+        text: cccc,
+        left: useTtpwrFilter?'29%':'32%',
+        top: '55%',
+        textStyle: { fontSize: 12, color: '#999' }
       }
     ],
     legend: {
@@ -661,7 +388,7 @@ const chartSetting = computed<EChartsOption>(() => {
       {
         name: dddd,
         type: 'pie',
-        radius: ['40%', '70%'],
+        radius: ['30%', '40%'],
         center: ['35%', '50%'],
         avoidLabelOverlap: true,
         itemStyle: {
@@ -672,157 +399,82 @@ const chartSetting = computed<EChartsOption>(() => {
         label: {
           show: true,
           position: 'outside',
-          formatter: '{b}\n{c}',
+          formatter: '{b}',
           fontSize: 12
         },
         emphasis: {
           scale: true,
           scaleSize: 10
         },
-        data: pieData.value.map((item, index) => ({
-          ...item
-          // 颜色已在顶层color中统一设置
-        }))
+        data: pieData.value.map(item => ({ ...item }))
       }
     ]
-  }
-})
+  };
+});
 
-/**
- * 初始化图表
- */
-function initChart() {
-  console.log('【图表初始化】尝试初始化，chartRef.value:', chartRef.value)
-  console.log('【图表初始化】当前 pieData.value 长度:', pieData.value.length)
-  
-  if (!chartRef.value) {
-    console.warn('【图表初始化】容器未就绪，延迟重试')
-    setTimeout(initChart, 200)
-    return
+function initChart(tabKeyStr?: string) {
+  const currentTabKey = tabKeyStr || tabKey.value || 'build';
+  const chartContainer = chartRefs.value[currentTabKey];
+
+  if (!chartContainer) {
+    setTimeout(() => initChart(currentTabKey), 200);
+    return;
   }
-  
-  // 验证容器尺寸
-  const rect = chartRef.value.getBoundingClientRect()
-  const containerWidth = chartRef.value.offsetWidth
-  const containerHeight = chartRef.value.offsetHeight
-  
-  console.log('【图表初始化】容器信息:', {
-    offsetWidth: containerWidth,
-    offsetHeight: containerHeight,
-    getBoundingClientRect: {
-      width: rect.width,
-      height: rect.height,
-      top: rect.top,
-      left: rect.left
-    },
-    display: window.getComputedStyle(chartRef.value).display,
-    visibility: window.getComputedStyle(chartRef.value).visibility,
-    parentDisplay: window.getComputedStyle(chartRef.value.parentElement).display
-  })
-  
-  // 临时添加红色边框验证容器可见性
-  chartRef.value.style.border = '3px solid red'
-  chartRef.value.style.background = 'rgba(255, 0, 0, 0.1)'
-  
-  if (containerWidth === 0 || containerHeight === 0) {
-    console.error('【图表初始化】❌ 容器尺寸为0，无法初始化')
-    console.log('【图表初始化】⏰ 200ms 后重试...')
-    setTimeout(initChart, 200)
-    return
+
+  if (chartInstances.value[currentTabKey]) {
+    chartInstances.value[currentTabKey].dispose();
+    chartInstances.value[currentTabKey] = null;
   }
-  
-  console.log('【图表初始化】✅ 容器尺寸正常，开始初始化 ECharts')
-  
-  // 关键：使用固定的图表尺寸（541px × 412px）
-  chartInstance.value = echarts.init(chartRef.value, null, {
-    width: 541,
-    height: 412
-  })
-  
-  console.log('【图表初始化】ECharts 实例创建成功')
-  
-  // 绑定图例选择事件
-  chartInstance.value.on('legendselectchanged', handleLegendSelectChanged)
-  
-  // 绑定点击事件
-  chartInstance.value.on('click', handlePieClick)
-  
-  // 关键：只有当有数据时才调用 updateChart
-  if (pieData.value.length > 0) {
-    console.log('【图表初始化】✅ 数据已就绪，渲染图表')
-    updateChart()
-    
-    // 关键：延迟调用 resize 确保渲染完成
-    setTimeout(() => {
-      chartInstance.value?.resize()
-      console.log('【图表初始化】✅ resize 完成')
-      console.log('【图表初始化】图表数据:', pieData.value.length, '条')
-      chartInitialized.value = true
-    }, 100)
-  } else {
-    console.log('【图表初始化】⏰ 数据未就绪，标记为已初始化，等待 watch 触发更新')
-    // 设置标志，数据加载后会触发渲染
-    chartInitialized.value = true
+
+  try {
+    chartInstances.value[currentTabKey] = echarts.init(chartContainer, null, {
+      width: 541,
+      height: 482
+    });
+
+    chartInstances.value[currentTabKey].on(
+      'legendselectchanged',
+      handleLegendSelectChanged
+    );
+
+    if (pieData.value.length > 0) {
+      updateChart(currentTabKey);
+      setTimeout(() => {
+        chartInstances.value[currentTabKey]?.resize();
+      }, 100);
+    }
+    chartInitialized.value = true;
+  } catch (error) {
+    console.error('ECharts init failed:', error);
+    setTimeout(() => initChart(currentTabKey), 300);
   }
 }
 
-/**
- * 更新图表
- */
-function updateChart() {
-  if (!chartInstance.value) return
-  chartInstance.value.setOption(chartSetting.value, true)
+function updateChart(tabKeyStr?: string) {
+  const currentTabKey = tabKeyStr || tabKey.value || 'build';
+  const instance = chartInstances.value[currentTabKey];
+  if (!instance) return;
+  instance.setOption(chartSetting.value, true);
 }
 
-/**
- * 处理窗口大小变化
- */
 function handleResize() {
-  chartInstance.value?.resize()
+  Object.values(chartInstances.value).forEach(instance => {
+    if (instance) instance.resize();
+  });
 }
 
-/**
- * 饼图点击事件（完全复刻React版本逻辑）
- */
-function handlePieClick(params: any) {
-  if (qid.value !== 'all') {
-    return  // 仅在全基地模式下支持点击联动
-  }
-  
-  // 关键：根据点击的扇区名称查找对应的基地ID
-  const matchedOption = searchList.value[0]?.options?.find(
-    (value: any) => value.label === params.name
-  )
-  
-  if (matchedOption) {
-    qid.value = matchedOption.qid || 'other'
-    
-    // 关键：获取 dataDimensionRecursive 标志（用于控制表格刷新行为）
-    const matchedData = pieData.value.find((item: any) => item.name === params.name)
-    console.log('【饼图点击】切换到基地:', params.name, 'qid:', qid.value, 'dataDimensionRecursive:', matchedData?.dataDimensionRecursive)
-  }
-}
-
-/**
- * 图例选择变化事件（完全复刻React版本逻辑）
- */
 function handleLegendSelectChanged(e: any) {
-  const trueRivers = Object.keys(e.selected).filter(key => e.selected[key])
-  const allTrue = Object.values(e.selected).every(value => value === false)
-  
+  const trueRivers = Object.keys(e.selected).filter(key => e.selected[key]);
+  const allFalse = Object.values(e.selected).every(value => value === false);
+
   const selectedKeys = pikData.value
     .filter((item: any) => trueRivers.includes(item.name))
-    .map((item: any) => item.key)
-  
-  // 关键：与React版本保持一致，全选时设置为 ["0"]
-  pieCode.value = allTrue ? ['0'] : selectedKeys
-  
-  console.log('【图例联动】allTrue:', allTrue, 'selectedKeys:', selectedKeys, 'pieCode:', pieCode.value)
+    .map((item: any) => item.key);
+
+  pieCode.value = allFalse ? [] : selectedKeys;
 }
 
-// ==================== 表格列配置 ====================
-
-const columns: ColumnsType = [
+const columns = [
   {
     title: '电站名称',
     dataIndex: 'stnm',
@@ -830,6 +482,8 @@ const columns: ColumnsType = [
     fixed: 'left',
     ellipsis: true,
     width: 150,
+    sort: true,
+     slots: { customRender: 'stnm' },
     customRender: ({ record }: any) => ({
       children: record.stnm,
       attrs: {
@@ -846,43 +500,58 @@ const columns: ColumnsType = [
     dataIndex: 'dvtp',
     key: 'dvtp',
     ellipsis: true,
+    width: 150,
+    sort: true,
     customRender: ({ record }: any) => record.dvtpName || '-'
   },
   {
-    title: `装机容量(${unit.value})`,
+    title: `装机容量(${unit})`,
     dataIndex: 'ttpwr',
     key: 'ttpwr',
     ellipsis: true,
-    customRender: ({ text }: any) => text ? transUnit(text, 'Other', 'ZJRL').toFixed(2) : '-'
+    width: 150,
+    sort: true,
+    customRender: ({ text }: any) => (text ? Number(text).toFixed(2) : '-')
   },
   {
     title: '设计年发电量(亿kW·h)',
     dataIndex: 'yrge',
     key: 'yrge',
-    ellipsis: true,
+    width: 150,
+    sort: true,
+    ellipsis: true
   },
   {
     title: '总库容(亿m³)',
     dataIndex: 'ttcp',
     key: 'ttcp',
+    width: 150,
+    sort: true,
     ellipsis: true
   },
   {
     title: '所属基地',
     dataIndex: 'baseName',
     key: 'baseName',
+    width: 150,
+    sort: true,
     ellipsis: true
   },
   {
     title: '所属行政区',
     dataIndex: 'addvcdName',
     key: 'addvcdName',
+    width: 150,
+    sort: true,
     ellipsis: true
   },
   {
     title: '所在河段',
     dataIndex: 'hbrvcdName',
     key: 'hbrvcdName',
+    width: 240,
+    merge: true,
+    sort: true,
     ellipsis: true
   },
   {
@@ -890,45 +559,41 @@ const columns: ColumnsType = [
     dataIndex: 'piodt',
     key: 'piodt',
     ellipsis: true,
+    sort: true,
     width: 170
   },
   {
     title: '全部机组投产时间',
     dataIndex: 'aiodt',
     key: 'aiodt',
+    width: 150,
+    sort: true,
     ellipsis: true
   }
-]
+];
 
-/**
- * 处理表格行点击（打开详情弹窗）
- */
 function handleRowClick(record: any) {
-  // 使用全局 MapModal 组件
   modelStore.params = {
     sttp: 'ENG',
     stcd: record.stcd,
     titleName: record.stnm
-  } as any  // 临时类型断言，因为 store 定义不完整
-  modelStore.title = record.stnm ? `${record.stnm} ` : ''
-  modelStore.tabList = handleTabs(modelStore.params)
-  modelStore.modalVisible = true
-  
-  console.log('【打开详情弹窗】参数:', modelStore.params)
+  } as any;
+  modelStore.title = record.stnm ? `${record.stnm} ` : '';
+  modelStore.tabList = handleTabs(modelStore.params);
+  modelStore.modalVisible = true;
 }
 
-// ==================== 搜索表单配置 ====================
-
 const searchList = computed(() => [
   {
     type: 'Select',
     name: 'Select',
     label: '基地选择',
-    options: jiDiList.value?.map((item: any) => ({
-      qid: item.baseid,
-      value: item.basename,
-      label: item.basename
-    })) || []
+    options:
+      jiDiList.value?.map((item: any) => ({
+        qid: item.baseid,
+        value: item.basename,
+        label: item.basename
+      })) || []
   },
   {
     type: 'Input',
@@ -939,304 +604,364 @@ const searchList = computed(() => [
       placeholder: '请输入电站名称'
     }
   }
-])
+]);
 
 const initialValues = computed(() => ({
   Select: defJD.value,
   stnm: null
-}))
+}));
 
-/**
- * 处理搜索提交（完全复刻React版本逻辑）
- */
 function handleSearch(values: any) {
-  // 关键：根据选中的基地名称查找对应的qid
   const matchedOption = searchList.value[0]?.options?.find(
     (value: any) => value.label === values.Select
-  )
-  
-  qid.value = matchedOption?.qid || 'other'
-  stnm.value = values.stnm
-  
-  console.log('【搜索】基地:', values.Select, 'qid:', qid.value, '电站名称:', stnm.value)
+  );
+
+  qid.value = matchedOption?.qid || 'other';
+  stnm.value = values.stnm;
 }
 
-/**
- * 处理重置
- */
 function handleReset() {
-  qid.value = ''
-  stnm.value = null
-  defJD.value = props.defaultJidiInfo?.basename as string || ''
+  const defaultBaseId = props.defaultJidiInfo?.baseid as string;
+  const defaultBasename = props.defaultJidiInfo?.basename as string;
+  
+  qid.value = defaultBaseId || 'all';
+  stnm.value = null;
+  defJD.value = defaultBasename || '全部基地';
+  
+  setTimeout(() => {
+    tabList.value.forEach(item => {
+      if (tableRefs.value[item.key]) {
+        tableRefs.value[item.key].getList(buildFilter.value);
+      }
+    });
+  }, 100);
 }
 
-// ==================== 数据监听与副作用 ====================
+const tableSearchParams = computed(() => ({
+  sort: [
+    { field: 'baseStepSort', dir: 'asc' },
+    { field: 'rvcdStepSort', dir: 'asc' },
+    { field: 'siteStepSort', dir: 'asc' },
+    { field: 'ttpwr', dir: 'desc' }
+  ],
+  group: [],
+  select: [],
+  groupResultFlat: false
+}));
 
-/**
- * 表格过滤条件计算（完全复刻React版本逻辑）
- */
-const tableFilter = computed<TableFilterParams>(() => {
-  let res: TableFilterParams = {
-    // 关键：根据 pieCode 和 qid 动态决定 baseId 的格式
-    baseId: (pieCode.value?.length > 0 && qid.value === 'all') 
-      ? [{
+const buildFilter = computed(() => {
+  let filters = [
+    pieCode.value?.length > 0 && qid.value === 'all'
+      ? {
           field: 'baseId',
           operator: 'in',
           dataType: 'string',
           value: pieCode.value
-        }]
-      : (qid.value || (props.defaultJidiInfo?.baseid as string)),
-    
-    sttpCode: 'ENG',
-    
-    // 关键：根据 pieCode 和 qid 动态决定 hbrvcd 的格式
-    hbrvcd: (pieCode.value?.length > 0 && qid.value !== 'all')
-      ? [{
+        }
+      : qid.value != 'all'
+      ? {
+          field: 'baseId',
+          operator: 'eq',
+          dataType: 'string',
+          value: qid.value
+        }
+      : null,
+    {
+      field: 'sttpCode',
+      operator: 'eq',
+      dataType: 'string',
+      value: 'ENG'
+    },
+    pieCode.value?.length > 0 && qid.value !== 'all'
+      ? {
           field: 'hbrvcd',
           operator: 'in',
           dataType: 'string',
           value: pieCode.value
-        }]
-      : undefined,
-    
-    bldsttCcode: tabKey.value === 'noBuild' ? '0' : tabKey.value === 'building' ? '1' : '2',
-    stnmContains: stnm.value,
-    prsc: [
-      { field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }
-    ]
-  }
-  
-  // 根据 seriesName 决定是否添加 ttpwr 过滤（与React版本保持一致，但注释掉）
-  // if (props.seriesName === `装机容量(${unit.value})`) {
-  //   res = { ...res, ttpwr: [{ field: 'ttpwr', operator: 'isnotnull' }] }
-  // }
-  
-  // 关键：清理无效字段（与React版本一致）
-  if (res.baseId === 'all') {
-    delete res.baseId
-  }
-  
-  if (!res.hbrvcd) {
-    delete res.hbrvcd
-  }
-  
-  if (stnm.value === null) {
-    delete res.stnmContains
-  }
-  
-  return res
-})
-
-/**
- * 监听基地变化，获取Tab数据
- */
-watch(qid, async (newQid) => {
-  if (!newQid) return
-  
-  dataLoading.value = true
-  try {
-    const params = {
-      baseId: newQid,
-      sttpCode: 'ENG',
-      prsc: [{ field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }]
-    }
-    
-    const result = await fetchTabData(params)
-    tabList.value = result
-    
-    if (result.length > 0) {
-      // 关键：根据 defaultTab 参数设置默认选中的 Tab
-      if (props.defaultTab) {
-        const matchedTab = result.find(item => item.value === props.defaultTab)
-        if (matchedTab) {
-          tabIndex.value = matchedTab.value
-          tabKey.value = matchedTab.key
-          tabCol.value = matchedTab.col
-        } else {
-          // 如果没匹配到，使用第一个 Tab
-          tabIndex.value = result[0].value
-          tabKey.value = result[0].key
-          tabCol.value = result[0].col
         }
-      } else {
-        // 没有传入 defaultTab，使用默认行为（第一个 Tab）
-        tabIndex.value = result[0].value
-        tabKey.value = result[0].key
-        tabCol.value = result[0].col
-      }
+      : null,
+    {
+      field: 'bldsttCcode',
+      operator: 'eq',
+      dataType: 'string',
+      value:
+        tabKey.value === 'noBuild'
+          ? '0'
+          : tabKey.value === 'building'
+          ? '1'
+          : '2'
+    },
+    stnm.value
+      ? {
+          field: 'stnm',
+          operator: 'contains',
+          dataType: 'string',
+          value: stnm.value
+        }
+      : null,
+    {
+      field: 'prsc',
+      operator: 'in',
+      dataType: 'string',
+      value: ['1', '2', '3']
     }
-  } catch (error) {
-    console.error('获取Tab数据失败:', error)
-    message.error('获取Tab数据失败')
-  } finally {
-    dataLoading.value = false
-  }
-}, { immediate: true })
+  ].filter(Boolean);
+
+  return {
+    logic: 'and',
+    filters
+  };
+});
 
-/**
- * 监听 defaultTab 变化，动态切换 Tab（解决第二次进入页面时失效的问题）
- */
 watch(
-  () => props.defaultTab,
-  (newDefaultTab) => {
-    if (!newDefaultTab || tabList.value.length === 0) return
-    
-    const matchedTab = tabList.value.find(item => item.value === newDefaultTab)
-    if (matchedTab) {
-      tabIndex.value = matchedTab.value
-      tabKey.value = matchedTab.key
-      tabCol.value = matchedTab.col
+  qid,
+  async newQid => {
+    if (!newQid) return;
+
+    dataLoading.value = true;
+    try {
+      // const params = {
+      //   baseId: newQid,
+      //   sttpCode: 'ENG',
+      //   prsc: [{ field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }]
+      // }
+      let params = [
+        newQid != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: newQid
+            }
+          : null,
+        {
+          field: 'sttpCode',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'ENG'
+        },
+        {
+          field: 'prsc',
+          operator: 'in',
+          dataType: 'string',
+          value: ['1', '2', '3']
+        }
+      ].filter(Boolean);
+
+      const result = await fetchTabData(params);
+      tabList.value = result;
+      // debugger
+
+      if (result.length > 0) {
+        if (props.defaultTab) {
+          const matchedTab = result.find(
+            item => item.value === props.defaultTab
+          );
+          if (matchedTab) {
+            tabIndex.value = matchedTab.value;
+            tabKey.value = matchedTab.key;
+            tabCol.value = matchedTab.col;
+          } else {
+            tabIndex.value = result[0].value;
+            tabKey.value = result[0].key;
+            tabCol.value = result[0].col;
+          }
+        } else {
+          tabIndex.value = result[0].value;
+          tabKey.value = result[0].key;
+          tabCol.value = result[0].col;
+        }
+      }
+    } catch (error) {
+      console.error('获取Tab数据失败:', error);
+      message.error('获取Tab数据失败');
+    } finally {
+      dataLoading.value = false;
     }
   },
   { immediate: true }
-)
+);
+
+watch(
+  () => props.defaultTab,
+  newDefaultTab => {
+    if (!newDefaultTab || tabList.value.length === 0) return;
+
+    const matchedTab = tabList.value.find(item => item.value === newDefaultTab);
+    if (matchedTab) {
+      tabIndex.value = matchedTab.value;
+      tabKey.value = matchedTab.key;
+      tabCol.value = matchedTab.col;
+    }
+  },
+  { immediate: true }
+);
 
-/**
- * 监听Tab和搜索条件变化，获取饼图数据
- */
 watch(
   [tabKey, tabCol, stnm, qid],
   async () => {
-    console.log('【Watch触发】tabKey:', tabKey.value, 'tabCol:', tabCol.value, 'stnm:', stnm.value, 'qid:', qid.value)
-    
-    if (!tabKey.value || !tabCol.value) {
-      console.log('【Watch触发】跳过：tabKey 或 tabCol 为空')
-      return
-    }
-    
-    dataLoading.value = true
+    if (!tabKey.value || !tabCol.value) return;
+
+    dataLoading.value = true;
     try {
-      const params: any = {
-        stnmContains: stnm.value,
-        baseId: qid.value,
-        sttpCode: 'ENG',
-        bldsttCcode: tabKey.value === 'noBuild' ? '0' : tabKey.value === 'building' ? '1' : '2',
-        prsc: [{ field: 'prsc', operator: 'in', dataType: 'string', value: ['1', '2', '3'] }]
-      }
-      
-      if (props.seriesName === `装机容量(${unit.value})`) {
-        params.ttpwr = [{ field: 'ttpwr', operator: 'isnotnull' }]
-      }
-      
-      if (stnm.value === null) {
-        delete params.stnmContains
-      }
-      
-      console.log('【Watch触发】调用 fetchPieData，参数:', params)
-      const result = await fetchPieData(params)
-      
-      console.log('【Watch触发】✅ fetchPieData 返回结果:', result.length, '条')
-      console.log('【Watch触发】数据内容:', result)
-      
-      // 特殊处理 other 类型
-      if (qid.value === 'other' && result.length > 0) {
-        const introRes = await fetchIntroduce({
-          logic: 'and',
-          filters: [
-            { field: 'wbsType', operator: 'eq', value: 'PSB_RVCD' },
-            { field: 'objId', operator: 'eq', value: 'other' },
-            { field: 'orderIndex', operator: 'isnotnull' }
-          ]
-        })
-        
-        if (introRes?.length) {
-          result.forEach((item: any) => {
-            const found = introRes.find((i: any) => item.key === i.wbsCode)
-            if (found) {
-              item.index = found.orderIndex
+      let params: any = [
+        qid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: qid.value
             }
-          })
-          result.sort((a: any, b: any) => (a.index || 0) - (b.index || 0))
-        }
+          : null,
+        {
+          field: 'sttpCode',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'ENG'
+        },
+        {
+          field: 'bldsttCcode',
+          operator: 'eq',
+          dataType: 'string',
+          value:
+            tabKey.value === 'noBuild'
+              ? '0'
+              : tabKey.value === 'building'
+              ? '1'
+              : '2'
+        },
+        {
+          field: 'prsc',
+          operator: 'in',
+          dataType: 'string',
+          value: ['1', '2', '3']
+        },
+        stnm.value
+          ? {
+              field: 'stnm',
+              operator: 'contains',
+              dataType: 'string',
+              value: stnm.value
+            }
+          : null
+      ].filter(Boolean);
+
+      // const params: any = {
+      //   stnmContains: stnm.value,
+      //   baseId: qid.value,
+      //   sttpCode: 'ENG',
+      //   bldsttCcode:
+      //     tabKey.value === 'noBuild'
+      //       ? '0'
+      //       : tabKey.value === 'building'
+      //       ? '1'
+      //       : '2',
+      //   prsc: [
+      //     {
+      //       field: 'prsc',
+      //       operator: 'in',
+      //       dataType: 'string',
+      //       value: ['1', '2', '3']
+      //     }
+      //   ]
+      // };
+
+      if (props.seriesName === `装机容量(${unit})`) {
+        params.push({
+          field: 'ttpwr',
+          operator: 'isnotnull',
+          dataType: 'string'
+        });
       }
-      
-      console.log('【Watch触发】更新 pieData，数据量:', result.length)
-      pikData.value = result
-      pieData.value = result
-      pieCode.value = []
-      
-      console.log('【Watch触发】pieData.value 更新后的值:', pieData.value)
-      
-      // 关键：等待 DOM 更新
-      await nextTick()
-      
-      // 关键：如果图表未初始化，先初始化；否则直接更新
-      if (!chartInitialized.value) {
-        console.log('【Watch触发】图表未初始化，开始初始化图表')
-        // 延迟初始化，确保容器完全渲染
-        setTimeout(() => {
-          initChart()
-        }, 200)
-      } else {
-        // 图表已初始化，直接更新数据
-        console.log('【Watch触发】图表已初始化，更新数据')
-        updateChart()
-        chartInstance.value?.resize()
-        console.log('【图表更新】数据变化，重新渲染')
-      }
-      
+
+      const result = await fetchPieData(params);
+
+      pikData.value = result;
+      pieData.value = result;
+      pieCode.value = [];
+
+      await nextTick();
+
+      setTimeout(() => {
+        initChart();
+      }, 200);
     } catch (error) {
-      console.error('【API】获取饼图数据失败:', error)
-      message.error('获取饼图数据失败')
+      console.error('获取饼图数据失败:', error);
+      message.error('获取饼图数据失败');
     } finally {
-      dataLoading.value = false
+      dataLoading.value = false;
     }
   },
   { deep: true }
-)
+);
 
-/**
- * 生命周期钩子
- */
 onMounted(() => {
-  // 模拟加载基地列表（更真实的基地数据）
   JidiSelectEventStore.jidiData.forEach(element => {
     jiDiList.value.push({
       label: element.wbsName,
-      value: element.wbsCode
-    })
+      value: element.wbsCode,
+      baseid: element.wbsCode,
+      basename: element.wbsName
+    });
   });
-  
-  // 设置默认选中"全部基地"
-  if (!qid.value) {
-    qid.value = 'all'
-  }
-  
-  // 关键：不再在 onMounted 中初始化图表
-  // 图表初始化由 watch 监听数据加载后触发，避免竞态条件
-  console.log('【生命周期】onMounted 触发，等待数据加载后初始化图表')
-  
-  window.addEventListener('resize', handleResize)
-})
 
-// 监听 Tab 切换，确保图表在 Tab 激活时正确渲染
+  if (!qid.value) {
+    qid.value = 'all';
+  }
+
+  window.addEventListener('resize', handleResize);
+});
+
 watch(tabIndex, async (newTab, oldTab) => {
-  console.log('【Tab切换】从', oldTab, '切换到', newTab)
-  
-  // 等待 DOM 更新
-  await nextTick()
-  
+  const matchedTab = tabList.value.find(item => item.value === newTab);
+  if (matchedTab) {
+    tabKey.value = matchedTab.key;
+    tabCol.value = matchedTab.col;
+  }
+
+  await nextTick();
+
   setTimeout(() => {
-    if (chartInstance.value && chartInitialized.value) {
-      console.log('【Tab切换】重新调整图表尺寸')
-      chartInstance.value.resize()
-      updateChart()
-    } else if (!chartInitialized.value) {
-      console.log('【Tab切换】图表未初始化，等待数据加载后初始化')
-      // 不在此处初始化，由 watch([tabKey, tabCol...]) 处理
+    const matchedTab = tabList.value.find(item => item.value === newTab);
+    if (matchedTab) {
+      const currentTabKey = matchedTab.key;
+      initChart(currentTabKey);
+
+      if (tableRefs.value[currentTabKey]) {
+        tableRefs.value[currentTabKey].getList(buildFilter.value);
+      }
     }
-  }, 300)
-})
+  }, 300);
+});
+const handleViewDetail = (record: any) => {
+    modelStore.modalVisible = true;
+    modelStore.params.sttp = record.sttpCode;
+    modelStore.title = record.stnm ;
+    modelStore.params.stcd = record.stcd;
+}
+watch(
+  buildFilter,
+  () => {
+    tabList.value.forEach(item => {
+      if (tableRefs.value[item.key]) {
+        tableRefs.value[item.key].getList(buildFilter.value);
+      }
+    });
+  },
+  { deep: true }
+);
 
 onUnmounted(() => {
-  chartInstance.value?.dispose()
-  window.removeEventListener('resize', handleResize)
-})
+  Object.values(chartInstances.value).forEach(instance => {
+    if (instance) instance.dispose();
+  });
+  chartInstances.value = {};
+  window.removeEventListener('resize', handleResize);
+});
 </script>
 
 <template>
   <div class="shuidian-kaifa-container">
-    <!-- 搜索表单 -->
     <BasicSearch
       ref="formRef"
       :searchList="searchList"
@@ -1245,15 +970,6 @@ onUnmounted(() => {
       @reset="handleReset"
     >
       <template #actions>
-        <!-- TODO: 集成ExportBtnFileWithSelect组件 -->
-        <!-- <ExportBtnFileWithSelect
-          authCode="sdkfzk-export"
-          tableRef="tableRef"
-          exportUrl="/dec-lygk-base-server/base/msstbprpt/export"
-          :select="['stnm', 'baseName', 'addvcdName', 'rvcdName', 'reachcdName', 'dvtp', 'ttpwr', 'yrge', 'ttcp', 'piodt', 'aiodt']"
-          :useDefaultColumnSelect="false"
-          fileName="水电开发情况数据"
-        /> -->
         <a-button @click="handleExport">
           <template #icon><DownloadOutlined /></template>
           导出
@@ -1261,41 +977,48 @@ onUnmounted(() => {
       </template>
     </BasicSearch>
 
-    <!-- Tab切换 -->
-    <a-tabs v-model:activeKey="tabIndex" class="dwsta-table-tu">
-      <a-tab-pane
-        v-for="item in tabList"
-        :key="item.value"
-        :tab="`${item.value}(${item.count}${item.unit})`"
-      >
-        <!-- 图表+表格布局 -->
-        <div class="chart-table-layout">
-          <!-- 左侧饼图 -->
-          <div class="chart-section">
-            <div
-              ref="chartRef"
-              class="pie-chart"
-              style="width: 541px; height: 412px;"
-            ></div>
-          </div>
+    <a-spin :spinning="dataLoading" tip="加载中...">
+      <a-tabs v-model:activeKey="tabIndex" class="dwsta-table-tu">
+        <a-tab-pane
+          v-for="item in tabList"
+          :key="item.value"
+          :tab="`${item.value}(${item.count}${item.unit})`"
+        >
+          <div class="chart-table-layout">
+            <div class="chart-section">
+              <a-empty
+                v-if="pieData.length === 0 && !dataLoading"
+                description="暂无数据"
+              />
+              <div
+                v-else
+                :ref="el => setChartRef(el, item.key)"
+                class="pie-chart"
+                style="width: 541px; height: 482px"
+              ></div>
+            </div>
 
-          <!-- 右侧表格 -->
-          <div class="table-section">
-            <BasicTable
-              ref="tableRef"
-              :columns="columns"
-              :listUrl="fetchTableData"
-              :searchParams="tableFilter"
-              :defaultPageSize="20"
-              :scrollY="380"
-            />
+            <div class="table-section">
+              <BasicTable
+                :ref="el => setTableRef(el, item.key)"
+                :columns="columns"
+                :listUrl="listUrl"
+                :searchParams="tableSearchParams"
+                :transformData="customTransform"
+                :defaultPageSize="20"
+                :scrollY="380"
+              >
+            <template #stnm="{ record }">
+            <a @click="handleViewDetail(record)" class="text-link">
+                {{record.stnm }}
+            </a>
+        </template>
+            </BasicTable>
+            </div>
           </div>
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-
-    <!-- 详情弹窗已改用全局 MapModal 组件，在 AppMain.vue 中统一管理 -->
-    <!-- 无需在此处添加 a-modal，点击表格行会自动触发 modelStore.modalVisible -->
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
   </div>
 </template>
 
@@ -1313,15 +1036,15 @@ onUnmounted(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  
+
   :deep(.ant-tabs-content) {
     height: 100%;
   }
-  
+
   :deep(.ant-tabs-tabpane) {
     height: 100%;
   }
-  
+
   :deep(.ant-tabs-nav) {
     margin-bottom: 16px;
   }
@@ -1332,23 +1055,23 @@ onUnmounted(() => {
   gap: 16px;
   height: calc(100% - 40px);
   min-height: 450px;
-  
+
   .chart-section {
     flex: 0 0 541px;
-    background: #fafafa;
+    // background: #fafafa;
     border-radius: 4px;
     padding: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     display: flex;
     align-items: center;
     justify-content: center;
-    
+
     .pie-chart {
       width: 541px;
-      height: 412px;
+      height: 482px;
     }
   }
-  
+
   .table-section {
     flex: 1;
     overflow: hidden;
@@ -1356,12 +1079,11 @@ onUnmounted(() => {
     border-radius: 4px;
   }
 }
+.text-link {
+    color: #2f6b98;
 
-.modal-content {
-  padding: 16px;
-  
-  :deep(.ant-descriptions) {
-    margin-bottom: 16px;
-  }
+    &:hover {
+        color: #40a9ff;
+    }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/shuidianhuangjingjieruMod/index.vue b/frontend/src/modules/shuidianhuangjingjieruMod/index.vue
index 834cb076..e35ccd73 100644
--- a/frontend/src/modules/shuidianhuangjingjieruMod/index.vue
+++ b/frontend/src/modules/shuidianhuangjingjieruMod/index.vue
@@ -1,58 +1,24 @@
-<!-- SidePanelItem.vue -->
 <template>
     <div class="basic_body">
-        <SidePanelItem title="大中型水电开发及环境监测数据接入情况" :prompt="prompt">
+        <SidePanelItem title="大中型水电开发及环境监测数据接入情况" >
             <div>
                 <div class="body_top">
-                    <!-- {/* 水电开发情况图表 */} -->
                     <div style="flex: 1;">
                         <div>水电开发情况</div>
                         <div style="color: #757575;font-size: 12px;line-height: 16px;">图释：数量（内）/装机容量（外）</div>
-                        <div>
-                            <DevelopStatusChart @chart-click="handleChartClick" />
-                        </div>
+                        <a-spin :spinning="developStatusChartRef?.dataLoading">
+                            <DevelopStatusChart ref="developStatusChartRef" />
+                        </a-spin>
                     </div>
-                    <!-- style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center" }} -->
                     <div style="flex: 1;display: flex; flex-direction: column; align-items: center;">
-                        <EngEnvironmentData @item-click="handleEnvItemClick" />
+                        <a-spin :spinning="engEnvironmentDataRef?.dataLoading">
+                            <EngEnvironmentData ref="engEnvironmentDataRef" />
+                        </a-spin>
                     </div>
                 </div>
-                <DataTable @row-click="handleRowClick" />
+                <DataTable  />
             </div>
-            <!-- <div v-else class="zanwushujv"> <a-empty /></div> -->
         </SidePanelItem>
-
-        <!-- 水电开发情况弹窗 -->
-        <a-modal
-            v-model:open="shuidianModalVisible"
-            :title="shuidianModalTitle"
-            width="1536px"
-            :footer="null"
-            :destroy-on-close="true"
-        >
-            <ShuiDianKaiFQKTwoLayer
-                v-if="shuidianModalVisible"
-                :defaultJidiInfo="shuidianModalProps.defaultJidiInfo"
-                :seriesName="shuidianModalProps.seriesName"
-                :stateName="shuidianModalProps.stateName"
-                :defaultTab="shuidianModalProps.defaultTab"
-            />
-        </a-modal>
-
-        <!-- 环境监测数据接入情况弹窗 -->
-        <a-modal
-            v-model:open="huanjingModalVisible"
-            :title="huanjingModalTitle"
-            width="1536px"
-            :footer="null"
-            :destroy-on-close="true"
-        >
-            <HuanJingSJJRQK
-                v-if="huanjingModalVisible"
-                :dataDimensionVal="huanjingModalProps.dataDimensionVal"
-                :name="huanjingModalProps.name"
-            />
-        </a-modal>
     </div>
 </template>
 
@@ -62,36 +28,21 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import DevelopStatusChart from "@/components/developStatusChart/index.vue"
 import EngEnvironmentData from "@/components/engEnvironmentData/index.vue"
 import DataTable from "./DataTable.vue"
-import ShuiDianKaiFQKTwoLayer from "./TwoLayer/ShuiDianKaiFQKTwoLayer.vue"
-import HuanJingSJJRQK from "./TwoLayer/HuanJingSJJRQK.vue"
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { Spin } from 'ant-design-vue';
 
-// 定义组件名（便于调试和递归）
 defineOptions({
     name: 'shuidianhuangjingjieruMod'
 });
 
 const JidiSelectEventStore = useJidiSelectEventStore();
 
-const prompt = ref({
-    show: true,
-    value: '统计大中型已建，在建水电站',
-})
+const developStatusChartRef = ref<InstanceType<typeof DevelopStatusChart> | null>(null);
+const engEnvironmentDataRef = ref<InstanceType<typeof EngEnvironmentData> | null>(null);
 
-// 水电开发情况弹窗状态
-const shuidianModalVisible = ref(false);
-const shuidianModalTitle = ref('水电开发情况');
-const shuidianModalProps = ref<any>({});
-
-// 环境监测数据接入情况弹窗状态
-const huanjingModalVisible = ref(false);
-const huanjingModalTitle = ref('环境监测数据接入情况');
-const huanjingModalProps = ref<any>({});
-
-// DataTable 行点击事件
 const handleRowClick = (record: any) => {
     const currentJidiInfo = JidiSelectEventStore.selectedItem;
-    shuidianModalProps.value = {
+    developStatusChartRef.value?.openModal({
         defaultJidiInfo: {
             baseid: currentJidiInfo?.wbsCode || 'all',
             basename: currentJidiInfo?.wbsName || '全部基地'
@@ -99,41 +50,10 @@ const handleRowClick = (record: any) => {
         seriesName: currentJidiInfo?.wbsCode === 'other' ? '数量(座)' : '装机容量(万kW)',
         stateName: record.bldsttCcode === '0' ? '未建' : record.bldsttCcode === '1' ? '在建' : '已建',
         defaultTab: record.bldsttCcode === '0' ? '未建' : record.bldsttCcode === '1' ? '在建' : '已建'
-    };
-    shuidianModalTitle.value = '水电开发情况';
-    shuidianModalVisible.value = true;
+    });
 };
 
-// DevelopStatusChart 饼图点击事件
-const handleChartClick = (params: any) => {
-    const currentJidiInfo = JidiSelectEventStore.selectedItem;
-    shuidianModalProps.value = {
-        defaultJidiInfo: {
-            baseid: currentJidiInfo?.wbsCode || 'all',
-            basename: currentJidiInfo?.wbsName || '全部基地'
-        },
-        seriesName: params.seriesName,
-        stateName: params.name,
-        defaultTab: params.name
-    };
-    shuidianModalTitle.value = '水电开发情况';
-    shuidianModalVisible.value = true;
-};
-
-// EngEnvironmentData 指标点击事件
-const handleEnvItemClick = (params: any) => {
-    const currentJidiInfo = JidiSelectEventStore.selectedItem;
-    huanjingModalProps.value = {
-        dataDimensionVal: currentJidiInfo?.wbsCode || 'all',
-        name: params.name
-    };
-    huanjingModalTitle.value = '环境监测数据接入情况';
-    huanjingModalVisible.value = true;
-};
-
-// 页面加载时执行的逻辑
 onMounted(() => {
-
 });
 </script>
 
@@ -142,4 +62,4 @@ onMounted(() => {
     display: flex;
     justify-content: space-between;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/shuishengshengtaijiance/index.vue b/frontend/src/modules/shuishengshengtaijiance/index.vue
index 723cb7dc..191134c4 100644
--- a/frontend/src/modules/shuishengshengtaijiance/index.vue
+++ b/frontend/src/modules/shuishengshengtaijiance/index.vue
@@ -68,6 +68,7 @@ import SsstdcgkTk from './SsstdcgkTk.vue';
 import { wbsbGetKendoList, getDftYear, getWeFisht } from '@/api/stdc';
 import moment from 'moment';
 import { Label } from 'cesium';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名
 defineOptions({
@@ -80,7 +81,7 @@ const dataLoading = ref(false);
 
 // ==================== 弹框状态 ====================
 const modalVisible = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 响应式变量定义 ====================
 // 选择器配置
 const select = ref({
diff --git a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
index f3f1a2dd..00aafd76 100644
--- a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
+++ b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/index.vue
@@ -40,6 +40,8 @@ import SidePanelItem from "@/components/SidePanelItem/index.vue";
 import { getKendoListCust, baseEvnmAutoMonitorGetKendoListCust } from "@/api/sw";
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
+import { useDraggable } from '@/utils/drag';
+
 const JidiSelectEventStore = useJidiSelectEventStore();
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -68,7 +70,7 @@ const loading = ref(false);
 // 弹框相关状态
 const modalVisible = ref(false);
 const currentFacility = ref<any>(null);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 点击处理函数
 const handleFacilityClick = (facility: any) => {
   // console.log(facility);
diff --git a/frontend/src/modules/shuizhijiancegongzuoQK/index.vue b/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
index d655156f..e418008b 100644
--- a/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
+++ b/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
@@ -33,6 +33,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
 import { msstbprptGetKendoList } from '@/api/sz'
 import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'shuizhijiancegongzuoQK'
@@ -74,7 +76,7 @@ const modalVisible = ref(false);
 const currentFacility = ref<any>(null);
 const baseid = ref("")
 
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 //获取水质监测工作开展情况数据
 const getDataList = async () => {
     loading.value = true;
diff --git a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
index cc98cf77..ed01ba7f 100644
--- a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
+++ b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
@@ -460,9 +460,7 @@ const getSelectConfig = async () => {
         return indexA - indexB;
       });
       select.value.options = filterSelectOptions(dataMapNameArr);
-      if (baseid.value === 'all') {
-        select.value.value = 'SJLY1U';
-      } else if (filterSelectOptions(dataMapNameArr)[0]?.children) {
+      if (filterSelectOptions(dataMapNameArr)[0]?.children) {
         select.value.value =
           filterSelectOptions(dataMapNameArr)[0]?.children[0]?.value;
       } else if (filterSelectOptions(dataMapNameArr)[0]?.value) {
diff --git a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue
index d5024398..5e9ae3d7 100644
--- a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue
+++ b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue
@@ -11,7 +11,7 @@
           @change="handleBaseChange"
         />
       </a-form-item>
-      <a-form-item label="电站名称">
+      <a-form-item v-if="vdListShow !== '3'" label="电站名称">
         <a-input
           v-model:value="searchData.stnm"
           placeholder="请输入电站"
@@ -19,6 +19,15 @@
           style="width: 180px"
         />
       </a-form-item>
+      <a-form-item v-else label="电站选择">
+        <a-select
+          v-model:value="searchData.rstcd"
+          placeholder="请选择电站"
+          style="width: 180px"
+          :options="stcdData"
+          allow-clear
+        />
+      </a-form-item>
       <a-form-item label="时间">
         <a-date-picker
           v-model:value="searchData.month"
@@ -190,60 +199,117 @@
                     :class="{ active: activeFid === item.fid }"
                     @click="handleSelectMedia(item)"
                   >
+                    <!-- {{ item }}12132131313 -->
                     <div class="item-thumb">
-                      <img v-if="item.isImage" :src="item.thumbUrl" />
-                      <div v-else-if="item.isVideo" class="thumb-placeholder">
+                      <img v-if="item.type === 'img'" :src="item.imgPath" />
+                      <div
+                        v-else-if="item.type === 'vdsp'"
+                        class="thumb-placeholder"
+                      >
                         <img :src="videoCover" />
                       </div>
                       <span v-else class="no-media">无媒体</span>
                     </div>
-                    <div class="item-time">{{ item.ennm }}{{ item.tm }}</div>
+                    <div class="item-time">{{ item.stName }}{{ item.tm }}</div>
                   </div>
                 </div>
                 <a-empty v-else description="暂无数据" class="sidebar-empty" />
-                <div class="sidebar-pagination">
-                  <a-pagination
-                    v-model:current="videoPage"
-                    v-model:pageSize="videoTake"
-                    :page-size-options="videoPageSizeOptions"
-                    :total="videoTotal"
-                    show-size-changer
-                    size="small"
-                    @change="handleVideoPageChange"
-                  />
-                </div>
               </div>
             </div>
+            <div
+              class="sidebar-pagination"
+              style="margin-top: 10px; display: flex; justify-content: end"
+            >
+              <a-pagination
+                v-model:current="videoPage"
+                v-model:pageSize="videoTake"
+                :page-size-options="videoPageSizeOptions"
+                :total="videoTotal"
+                show-size-changer
+                size="small"
+                @change="handleVideoPageChange"
+              />
+            </div>
           </div>
         </div>
 
         <!-- 日历视图 -->
         <div v-show="vdListShow === '3'" class="calendar-mode">
           <a-spin :spinning="calendarLoading">
-            <a-calendar v-model:value="calendarValue" @panelChange="handleCalendarPanelChange">
+            <a-calendar
+              v-model:value="calendarValue"
+              @panelChange="handleCalendarPanelChange"
+              @select="handleCalendarSelect"
+            >
+              <template #headerRender="{ current }"> </template>
               <template #dateCellRender="{ current }">
                 <div class="calendar-content">
                   <template v-if="isCurrentMonth(current)">
-                    <div v-if="getCalendarDataForDay(current)" class="content_state1">
+                    <div
+                      class="content_state1"
+                      v-if="getCalendarDataForDay(current)"
+                    >
                       监测
                     </div>
-                    <div v-else class="content_state4">未监测</div>
-                    <div
-                      v-if="getCalendarDataForDay(current)?.status !== undefined"
-                      :class="getStatusClass(getCalendarDataForDay(current)?.status)"
-                      class="status-label"
-                      @click.stop="handleCalendarDayClick(current, getCalendarDataForDay(current))"
-                    >
-                      {{ getStatusText(getCalendarDataForDay(current)?.status) }}
-                    </div>
-                    <div
-                      v-if="getCalendarDataForDay(current)?.qpStatus !== undefined"
-                      :class="getStatusClass(getCalendarDataForDay(current)?.qpStatus)"
-                      class="status-label"
-                      @click.stop="handleCalendarDayClick(current, getCalendarDataForDay(current))"
-                    >
-                      {{ getStatusText(getCalendarDataForDay(current)?.qpStatus) }}
-                    </div>
+                    <div class="content_state4" v-else>未监测</div>
+                    <!-- 漂浮物识别和清漂识别：显示漂浮物状态和清漂状态 -->
+                    <template v-if="tabIndex === '1' || tabIndex === '3'">
+                      <div
+                        v-if="getCalendarDataForDay(current)?.status"
+                        :class="
+                          getStatusClass(getCalendarDataForDay(current)?.status)
+                        "
+                        @click.stop="
+                          handleCalendarDayClick(
+                            current,
+                            getCalendarDataForDay(current)
+                          )
+                        "
+                      >
+                        {{
+                          getStatusText(getCalendarDataForDay(current)?.status)
+                        }}
+                      </div>
+                      <div
+                        v-if="getCalendarDataForDay(current)?.qpStatus"
+                        :class="
+                          getStatusClass(
+                            getCalendarDataForDay(current)?.qpStatus
+                          )
+                        "
+                        @click.stop="
+                          handleCalendarDayClick(
+                            current,
+                            getCalendarDataForDay(current)
+                          )
+                        "
+                      >
+                        {{
+                          getStatusText(
+                            getCalendarDataForDay(current)?.qpStatus
+                          )
+                        }}
+                      </div>
+                    </template>
+                    <!-- 叠梁门运行识别：只显示运行状态 -->
+                    <template v-else-if="tabIndex === '2'">
+                      <div
+                        v-if="getCalendarDataForDay(current)?.status"
+                        :class="
+                          getStatusClass(getCalendarDataForDay(current)?.status)
+                        "
+                        @click.stop="
+                          handleCalendarDayClick(
+                            current,
+                            getCalendarDataForDay(current)
+                          )
+                        "
+                      >
+                        {{
+                          getStatusText(getCalendarDataForDay(current)?.status)
+                        }}
+                      </div>
+                    </template>
                   </template>
                 </div>
               </template>
@@ -267,56 +333,28 @@
       width="80vw"
       :footer="null"
       destroyOnClose
+      :teleport="false"
       :bodyStyle="{ height: '70vh' }"
     >
       <a-tabs v-model:activeKey="detailActiveKey">
-        <a-tab-pane v-for="item in detailTabItems" :key="item.key" :tab="item.label">
-          <div class="detail-video-content" v-loading="detailVideoLoading">
-            <div class="detail-video-layout">
-              <div class="detail-video-player">
-                <div v-if="detailActiveMedia.type === 'image' && detailActiveMedia.src" class="media-display">
-                  <img :src="detailActiveMedia.src" style="width: 100%; height: 100%; object-fit: contain" />
-                </div>
-                <div v-else-if="detailActiveMedia.type === 'video' && detailActiveMedia.src" class="media-display">
-                  <LiveVideoBox :videoData="{ url: detailActiveMedia.src }" height="100%" :showTitle="false" />
-                </div>
-                <div v-else class="media-empty">
-                  <a-empty description="请选择右侧数据" />
-                </div>
-              </div>
-              <div class="detail-video-sidebar">
-                <div class="sidebar-list" v-if="detailVideoList.length > 0">
-                  <div
-                    v-for="item in detailVideoList"
-                    :key="item.fid"
-                    class="sidebar-item"
-                    :class="{ active: detailActiveFid === item.fid }"
-                    @click="handleSelectDetailMedia(item)"
-                  >
-                    <div class="item-thumb">
-                      <img v-if="item.isImage" :src="item.thumbUrl" />
-                      <div v-else-if="item.isVideo" class="thumb-placeholder">
-                        <img :src="videoCover" />
-                      </div>
-                      <span v-else class="no-media">无媒体</span>
-                    </div>
-                    <div class="item-time">{{ item.ennm }}{{ item.tm }}</div>
-                  </div>
-                </div>
-                <a-empty v-else description="暂无数据" class="sidebar-empty" />
-                <div class="sidebar-pagination">
-                  <a-pagination
-                    v-model:current="detailVideoPage"
-                    v-model:pageSize="detailVideoTake"
-                    :page-size-options="detailVideoPageSizeOptions"
-                    :total="detailVideoTotal"
-                    show-size-changer
-                    size="small"
-                    @change="handleDetailVideoPageChange"
-                  />
-                </div>
-              </div>
-            </div>
+        <a-tab-pane
+          v-for="item in detailTabItems"
+          :key="item.key"
+          :tab="item.label"
+        >
+          <div v-show="detailActiveKey === item.key">
+            <VideoPlayer
+              :list="detailVideoList"
+              :activeFid="detailActiveFid"
+              :activeMedia="detailActiveMedia"
+              :loading="detailVideoLoading"
+              :page="detailVideoPage"
+              :pageSize="detailVideoTake"
+              :pageSizeOptions="detailVideoPageSizeOptions"
+              :total="detailVideoTotal"
+              @select="handleSelectDetailMedia"
+              @pageChange="handleDetailVideoPageChange"
+            />
           </div>
         </a-tab-pane>
       </a-tabs>
@@ -345,11 +383,20 @@ import type { ECharts } from 'echarts';
 import BasicTable from '@/components/BasicTable/index.vue';
 import CommonAttachmentModal from '@/components/MapModal/components/CommonAttachmentModal.vue';
 import LiveVideoBox from '@/views/shiPinJianKong/components/LiveVideoBox.vue';
-import { getAisbdbyxList, getAiChartTable, getAiPfwRecord, getAiRecord, getAiFile } from '@/api/zngj';
+import VideoPlayer from './components/VideoPlayer.vue';
+import {
+  getAisbdbyxList,
+  getAiChartTable,
+  getAiPfwRecord,
+  getAiRecord,
+  getAiFile,
+  getAiRstcd
+} from '@/api/zngj';
 import { postIdUrl } from '@/api/mapModal';
 import dayjs from 'dayjs';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import videoCover from '@/assets/images/videFm.jpg';
+import { useDraggable } from '@/utils/drag';
 
 const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 
@@ -368,8 +415,10 @@ const jidiOptions = ref<Array<{ label: string; value: string }>>([]);
 const searchData = ref({
   baseid: props.baseid || 'all',
   stnm: '',
+  rstcd: '',
   month: props.month ? dayjs(props.month) : dayjs()
 });
+const stcdData = ref<Array<{ label: string; value: string }>>([]);
 
 // ==================== 弹框状态 ====================
 const attachmentModalVisible = ref(false);
@@ -421,7 +470,7 @@ let videoChartInstance: ECharts | null = null;
 // ==================== 日历视图状态 ====================
 const calendarLoading = ref(false);
 const calendarData = ref<any[]>([]);
-const calendarValue = ref(dayjs());
+const calendarValue = ref(searchData.value.month);
 const detailModalVisible = ref(false);
 const detailActiveKey = ref('');
 const detailVideoLoading = ref(false);
@@ -431,23 +480,64 @@ const detailVideoTake = ref(20);
 const detailVideoPageSizeOptions = ['20', '50', '100'];
 const detailVideoTotal = ref(0);
 const detailActiveFid = ref('');
-const detailActiveMedia = ref<{ type: string; src: string }>({ type: '', src: '' });
+const detailActiveMedia = ref<{ type: string; src: string }>({
+  type: '',
+  src: ''
+});
 const detailTabItems = ref<any[]>([]);
 const detailDate = ref('');
 const detailType = ref('');
-const detailDataType = ref('');
+const detailDataType = computed(() => detailActiveKey.value);
 const qingpiaoModalVisible = ref(false);
 const qingpiaoFids = ref<string[]>([]);
-
-// 日历状态映射
-const calendarStatusMap: Record<string, { name: string; className: string; type: string; dataType: string }> = {
-  '0': { name: '无漂浮物', className: 'content_state2', type: 'AI_5001', dataType: '3' },
-  '1': { name: '小面积漂浮物', className: 'content_state5', type: 'AI_5001', dataType: '4' },
-  '2': { name: '大面积漂浮物', className: 'content_state3', type: 'AI_5001', dataType: '5' },
-  '3': { name: '运行', className: 'content_state2', type: 'AI_5005', dataType: '2' },
-  '4': { name: '未运行', className: 'content_state3', type: 'AI_5005', dataType: '1' },
-  '5': { name: '清漂', className: 'content_state2', type: 'AI_5011', dataType: '3' },
-  '6': { name: '未清漂', className: 'content_state3', type: 'AI_5011', dataType: '3' }
+useDraggable(detailModalVisible, { boundary: true, resetOnOpen: true });
+// 日历状态映射（与React端一致）
+const calendarStatusMap: Record<
+  string,
+  { name: string; className: string; type: string; dataType: string }
+> = {
+  '3': {
+    name: '运行',
+    className: 'content_state2',
+    type: 'AI_5005',
+    dataType: '2'
+  },
+  '4': {
+    name: '未运行',
+    className: 'content_state3',
+    type: 'AI_5005',
+    dataType: '1'
+  },
+  '5': {
+    name: '清漂',
+    className: 'content_state2',
+    type: 'AI_5011',
+    dataType: '3'
+  },
+  '6': {
+    name: '未清漂',
+    className: 'content_state3',
+    type: 'AI_5011',
+    dataType: '3'
+  },
+  '0': {
+    name: '无漂浮物',
+    className: 'content_state2',
+    type: 'AI_5001',
+    dataType: '3'
+  },
+  '1': {
+    name: '小面积漂浮物',
+    className: 'content_state5',
+    type: 'AI_5001',
+    dataType: '4'
+  },
+  '2': {
+    name: '大面积漂浮物',
+    className: 'content_state3',
+    type: 'AI_5001',
+    dataType: '5'
+  }
 };
 
 // 函数式 ref 绑定
@@ -714,12 +804,30 @@ const tableSearchParams = computed(() => ({
 }));
 
 // ==================== 数据转换 ====================
+const flattenNestedData = (data: any[]): any[] => {
+  const result: any[] = [];
+  data.forEach((level1: any) => {
+    if (level1?.items?.length) {
+      level1.items.forEach((level2: any) => {
+        if (level2?.items?.length) {
+          level2.items.forEach((level3: any) => {
+            if (level3?.items?.length) {
+              result.push(...level3.items);
+            } else {
+              result.push(level3);
+            }
+          });
+        }
+      });
+    }
+  });
+  return result;
+};
+
 const customTransform = (res: any) => {
-  const dataObj = res?.data;
-  const records = Array.isArray(dataObj) ? dataObj : dataObj?.data || [];
   return {
-    records,
-    total: dataObj?.total || 0
+    records: res?.data?.data || [],
+    total: res?.data?.total || 0
   };
 };
 
@@ -802,27 +910,63 @@ const getChartData = async () => {
     const params = {
       filter,
       group,
-      groupResultFlat: true
+      sort: [
+        {
+          field: 'rstcdStepSort',
+          dir: 'asc'
+        },
+        {
+          field: 'tm',
+          dir: 'desc'
+        }
+      ]
     };
 
     const res = await getAiChartTable(params);
     const dataObj = res?.data?.data ?? {};
     const rawData = Array.isArray(dataObj) ? dataObj : dataObj?.data || [];
 
-    const list = rawData.map((el: any) => {
-      if (searchData.value.baseid === 'all') {
-        return {
-          name: el?.baseName_value || el?.baseName || '-',
-          value: el?.count_baseName || el?.count_baseId || 0,
-          key: el?.baseId_value || el?.baseId
-        };
-      }
-      return {
-        name: el?.ennm_value || el?.ennm || '-',
-        value: el?.count_rstcd || el?.count_ennm || 0,
-        key: el?.rstcd || el?.rstcd_value
-      };
-    });
+    const list: { name: string; value: number; key: string }[] = [];
+
+    if (searchData.value.baseid === 'all') {
+      rawData.forEach((level1: any) => {
+        if (level1?.items?.length) {
+          level1.items.forEach((level2: any) => {
+            if (level2?.items?.length) {
+              level2.items.forEach((level3: any) => {
+                if (level3?.items?.length) {
+                  level3.items.forEach((item: any) => {
+                    list.push({
+                      name: item?.BASENAME || level3.key || '-',
+                      value:
+                        item?.COUNT_BASENAME ||
+                        item?.COUNT_BASEID ||
+                        level3.count ||
+                        0,
+                      key: item?.BASEID || level2.key || ''
+                    });
+                  });
+                } else {
+                  list.push({
+                    name: level3.key || '-',
+                    value: level3.count || 0,
+                    key: level2.key || ''
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    } else {
+      rawData.forEach((el: any) => {
+        list.push({
+          name: el?.ennm_value || el?.ennm || '-',
+          value: el?.count_rstcd || el?.count_ennm || 0,
+          key: el?.rstcd || el?.rstcd_value || ''
+        });
+      });
+    }
 
     chartData.value = list;
   } catch (error) {
@@ -1103,64 +1247,74 @@ const fetchVideoList = async () => {
     };
 
     const res = await getAiChartTable(params);
-    const dataObj = res?.data?.data ?? {};
-    const rawData = dataObj?.data || [];
-    videoTotal.value = dataObj?.total || 0;
+    const rData = res?.data ?? {};
+    const rawData = rData?.data || [];
+    videoTotal.value = rData?.total || rawData.length;
+
+    // 按 fid 展开（与 React 一致，支持逗号分隔的多个 fid）
+    const expandedData = rawData
+      .map((item: any) => {
+        const fids = item.fid ? item.fid.split(',') : [];
+        return fids.map((fid: string) => ({ ...item, fid: fid.trim() }));
+      })
+      .flat();
 
     // 收集所有 fid
-    const allFids: string[] = [];
-    rawData.forEach((item: any) => {
-      if (item.fid) {
-        item.fid.split(',').forEach((f: string) => {
-          const trimmed = f.trim();
-          if (trimmed) allFids.push(trimmed);
-        });
-      }
-    });
+    const allFids = expandedData
+      .filter((item: any) => item.fid)
+      .map((item: any) => item.fid)
+      .join(',');
 
     // 调用 postIdUrl 获取媒体详情
     let mediaMap: Record<string, any> = {};
-    if (allFids.length > 0) {
+    if (allFids) {
       const formData = new FormData();
-      formData.append('id', allFids.join(','));
+      formData.append('id', allFids);
       const mediaRes: any = await postIdUrl(formData);
       mediaMap = mediaRes?.data || {};
     }
 
-    // 按 fid 展开为独立项
-    const flatList: any[] = [];
-    rawData.forEach((item: any) => {
-      const fids = item.fid
-        ? item.fid
-            .split(',')
-            .map((f: string) => f.trim())
-            .filter(Boolean)
-        : [];
-      const tm = item.tm ? dayjs(item.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
+    // 构建列表（与 React 一致）
+    const list: any[] = [];
+    expandedData.forEach((vd: any) => {
+      const fileInfo = mediaMap[vd.fid];
+      const hasValidExtension =
+        fileInfo && ['.jpg', '.png'].includes(fileInfo.ext);
 
-      fids.forEach((fid: string) => {
-        const m = mediaMap[fid];
-        const ext = m?.ext || '';
-        const isVideo = ext === '.mp4';
-        const isImage = ext === '.jpg' || ext === '.png';
+      let flpth = '';
+      let imgPath = '';
+      let type = '';
 
-        flatList.push({
-          ...item,
-          fid,
-          media: m || null,
-          thumbUrl: isImage ? (baseUrl + '?' + fid + '&view=jpg') : '',
-          isVideo,
-          isImage,
-          tm
-        });
+      if (hasValidExtension !== undefined && !hasValidExtension) {
+        // 非图片（视频）
+        flpth = fileInfo.fullpath;
+        type = 'vdsp';
+      } else if (hasValidExtension !== undefined) {
+        // 图片
+        imgPath = fileInfo.fullpath;
+        type = 'img';
+      }
+
+      const tm = vd.tm ? dayjs(vd.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
+      list.push({
+        ...vd,
+        flpth,
+        imgPath,
+        flnm: `${vd.ennm || ''}${tm}`,
+        type,
+        tm
       });
     });
 
-    videoList.value = flatList;
-
+    // 过滤掉无效项（与 React 一致）
+    const listMap = list.filter(
+      item => item.flpth !== '' || item.imgPath !== ''
+    );
+    videoList.value = listMap;
+    // debugger
     // 默认选中第一条
-    if (videoList.value.length > 0 && !activeFid.value) {
-      handleSelectMedia(videoList.value[0]);
+    if (listMap.length > 0 && !activeFid.value) {
+      handleSelectMedia(listMap[0]);
     }
   } catch (error) {
     console.error('获取视频列表失败:', error);
@@ -1170,15 +1324,20 @@ const fetchVideoList = async () => {
   }
 };
 
-// 选择媒体
+// 选择媒体（与 React 一致）
 const handleSelectMedia = (item: any) => {
   activeFid.value = item.fid;
-  const { media, isVideo, isImage } = item;
 
-  if (isImage) {
-    activeMedia.value = { type: 'image', src: baseUrl + '?' + item.fid + '&view=jpg' };
-  } else if (isVideo) {
-    activeMedia.value = { type: 'video', src: baseUrl + '?' + item.fid + '&view=jpg' };
+  if (item.type === 'img') {
+    activeMedia.value = {
+      type: 'image',
+      src: baseUrl + '?' + item.fid + '&view=jpg'
+    };
+  } else if (item.type === 'vdsp') {
+    activeMedia.value = {
+      type: 'video',
+      src: baseUrl + '?' + item.fid + '&view=jpg'
+    };
   } else {
     activeMedia.value = { type: '', src: '' };
   }
@@ -1191,58 +1350,154 @@ const handleVideoPageChange = () => {
   fetchVideoList();
 };
 
-// ==================== 日历视图函数 ====================
-// 判断是否是当前月份
-const isCurrentMonth = (current: any): boolean => {
-  const selectedDate = dayjs(searchData.value.month);
-  return current.month() === selectedDate.month() && current.year() === selectedDate.year();
-};
-
-// 获取某天的日历数据
-const getCalendarDataForDay = (current: any): any => {
-  if (!isCurrentMonth(current)) return null;
-  const day = current.format('DD');
-  return calendarData.value.find((item: any) => dayjs(item.dt).format('DD') === day);
-};
-
-// 获取状态样式类
-const getStatusClass = (status: string) => {
-  return calendarStatusMap[status]?.className || '';
-};
-
-// 获取状态文本
-const getStatusText = (status: string) => {
-  return calendarStatusMap[status]?.name || '';
-};
-
-// 获取日历数据
-const fetchCalendarData = async () => {
-  calendarLoading.value = true;
+// ==================== 获取电站列表（用于日历视图的rstcd下拉） ====================
+const colStcdData = async () => {
   try {
     const type = getType();
     const filters: any[] = [
       { field: 'type', operator: 'eq', value: type },
-      searchData.value.baseid !== 'all' ? { field: 'baseId', operator: 'eq', value: searchData.value.baseid } : null,
+      searchData.value.baseid !== 'all'
+        ? { field: 'baseId', operator: 'eq', value: searchData.value.baseid }
+        : null,
       {
         field: 'startTime',
         operator: 'gte',
         dataType: 'date',
-        value: dayjs(searchData.value.month).startOf('month').format('YYYY-MM-DD 00:00:00')
+        value: dayjs(searchData.value.month)
+          .startOf('month')
+          .format('YYYY-MM-DD 00:00:00')
       },
       {
         field: 'endTime',
         operator: 'lte',
         dataType: 'date',
-        value: dayjs(searchData.value.month).endOf('month').format('YYYY-MM-DD 23:59:59')
+        value: dayjs(searchData.value.month)
+          .endOf('month')
+          .format('YYYY-MM-DD 23:59:59')
       }
     ].filter(Boolean);
 
     const params = { filter: { logic: 'and', filters } };
+    const res: any = await getAiRstcd(params);
+    const _data = res?.data?.data ?? [];
+    const list = _data.map((item: any) => ({
+      label: item.stnm,
+      value: item.stcd
+    }));
 
-    // 根据类型调用不同接口
+    // 如果当前选中的rstcd不在新列表中，重置为第一个
+    const selected = list?.filter(
+      (item: any) => item.value === searchData.value.rstcd
+    );
+    if (selected?.length === 0) {
+      searchData.value.rstcd = list?.[0]?.value ?? '';
+    }
+
+    stcdData.value = list;
+  } catch (error) {
+    console.error('获取电站列表失败:', error);
+  }
+};
+
+// ==================== 日历视图函数 ====================
+// 判断是否是当前月份
+const isCurrentMonth = (current: any): boolean => {
+  return (
+    current.month() === calendarValue.value.month() &&
+    current.year() === calendarValue.value.year()
+  );
+};
+
+// 获取某天的日历数据
+const getCalendarDataForDay = (current: any): any => {
+  return calendarData.value.find(
+    (item: any) => dayjs(item.dt).format('DD') === current.format('DD')
+  );
+};
+
+// 获取状态样式类（支持数字和字符串类型）
+const getStatusClass = (status: number | string) => {
+  const statusKey = String(status);
+  return calendarStatusMap[statusKey]?.className || '';
+};
+
+// 获取状态文本（支持数字和字符串类型）
+const getStatusText = (status: number | string) => {
+  const statusKey = String(status);
+  return calendarStatusMap[statusKey]?.name || '';
+};
+
+// 获取日历数据（参考React端逻辑）
+const fetchCalendarData = async () => {
+  calendarLoading.value = true;
+  try {
+    const type = getType();
+    const filters: any[] = [
+      // baseId过滤（支持饼图联动）
+      pieCode.value.length > 0 && searchData.value.baseid === 'all'
+        ? {
+            field: 'baseId',
+            operator: 'in',
+            dataType: 'string',
+            value: pieCode.value
+          }
+        : searchData.value.baseid !== 'all'
+        ? { field: 'baseId', operator: 'eq', value: searchData.value.baseid }
+        : null,
+      // rstcd过滤（饼图联动时）
+      pieCode.value.length > 0 && searchData.value.baseid !== 'all'
+        ? {
+            field: 'rstcd',
+            operator: 'in',
+            dataType: 'string',
+            value: pieCode.value
+          }
+        : null,
+      // type过滤
+      { field: 'type', operator: 'eq', value: type },
+      // 时间范围
+      {
+        field: 'startTime',
+        operator: 'gte',
+        dataType: 'date',
+        value: dayjs(searchData.value.month)
+          .startOf('month')
+          .format('YYYY-MM-DD 00:00:00')
+      },
+      {
+        field: 'endTime',
+        operator: 'lte',
+        dataType: 'date',
+        value: dayjs(searchData.value.month)
+          .endOf('month')
+          .format('YYYY-MM-DD 23:59:59')
+      },
+      // stnm文本搜索
+      searchData.value.stnm
+        ? { field: 'stnm', operator: 'contains', value: searchData.value.stnm }
+        : null,
+      // rstcd电站选择（日历视图下）
+      searchData.value.rstcd
+        ? {
+            field: 'rstcd',
+            operator: 'in',
+            dataType: 'string',
+            value: [searchData.value.rstcd]
+          }
+        : null
+    ].filter(Boolean);
+
+    const params = {
+      filter: { logic: 'and', filters },
+      sort: tabIndex.value === '1' ? [] : [{ field: 'tm', dir: 'desc' }]
+    };
+
+    // 根据类型调用不同接口（与React端一致：AI_5005用getAiRecord，其余用getAiPfwRecord）
     const apiFn = type === 'AI_5005' ? getAiRecord : getAiPfwRecord;
     const res: any = await apiFn(params);
-    calendarData.value = res?.data?.data || [];
+    // 接口返回结构: { code, msg, data: [...] } - data 直接是数组，不是 res.data.data
+    const payload = res?.data || {};
+    calendarData.value = Array.isArray(payload) ? payload : payload.data || [];
   } catch (error) {
     console.error('获取日历数据失败:', error);
     calendarData.value = [];
@@ -1254,14 +1509,19 @@ const fetchCalendarData = async () => {
 // 日历面板切换
 const handleCalendarPanelChange = (date: any) => {
   calendarValue.value = date;
+  fetchCalendarData();
 };
 
-// 点击日历日期
+// 日历日期选择
+const handleCalendarSelect = (date: any) => {
+  calendarValue.value = date;
+};
+
+// 点击日历日期（参考React端逻辑）
 const handleCalendarDayClick = async (current: any, dayData: any) => {
   const date = dayjs(current).format('YYYY-MM-DD');
   const status = dayData.status;
   const statusInfo = calendarStatusMap[status];
-
   if (!statusInfo) return;
 
   // 清漂识别直接打开附件预览
@@ -1270,7 +1530,10 @@ const handleCalendarDayClick = async (current: any, dayData: any) => {
     if (!fidStr) {
       return;
     }
-    qingpiaoFids.value = fidStr.split(',').map((s: string) => s.trim()).filter(Boolean);
+    qingpiaoFids.value = fidStr
+      .split(',')
+      .map((s: string) => s.trim())
+      .filter(Boolean);
     qingpiaoModalVisible.value = true;
     return;
   }
@@ -1278,20 +1541,21 @@ const handleCalendarDayClick = async (current: any, dayData: any) => {
   // 漂浮物/叠梁门打开视频详情弹窗
   detailDate.value = date;
   detailType.value = statusInfo.type;
-  detailDataType.value = statusInfo.dataType;
 
-  // 设置 Tab 项
-  if (tabIndex.value === '1') {
+  // 设置 Tab 项（与React端一致）
+  if (tabIndex.value === '2') {
+    // 叠梁门运行识别：运行 / 未运行
+    detailTabItems.value = [
+      { key: '2', label: '运行' },
+      { key: '1', label: '未运行' }
+    ];
+  } else {
+    // 漂浮物识别：无漂浮物 / 小面积漂浮物 / 大面积漂浮物
     detailTabItems.value = [
       { key: '3', label: '无漂浮物' },
       { key: '4', label: '小面积漂浮物' },
       { key: '5', label: '大面积漂浮物' }
     ];
-  } else if (tabIndex.value === '2') {
-    detailTabItems.value = [
-      { key: '2', label: '运行' },
-      { key: '1', label: '未运行' }
-    ];
   }
 
   detailActiveKey.value = statusInfo.dataType;
@@ -1306,85 +1570,165 @@ const fetchDetailVideoList = async () => {
   detailVideoLoading.value = true;
   try {
     const filters: any[] = [
+      // baseId过滤（支持饼图联动）
+      pieCode.value.length > 0 && searchData.value.baseid === 'all'
+        ? {
+            field: 'baseId',
+            operator: 'in',
+            dataType: 'string',
+            value: pieCode.value
+          }
+        : searchData.value.baseid !== 'all'
+        ? { field: 'baseId', operator: 'eq', value: searchData.value.baseid }
+        : null,
+      // rstcd过滤（饼图联动时）
+      pieCode.value.length > 0 && searchData.value.baseid !== 'all'
+        ? {
+            field: 'rstcd',
+            operator: 'in',
+            dataType: 'string',
+            value: pieCode.value
+          }
+        : null,
+      // type过滤
       { field: 'type', operator: 'eq', value: detailType.value },
-      searchData.value.baseid !== 'all' ? { field: 'baseId', operator: 'eq', value: searchData.value.baseid } : null,
+      // dataType过滤
+      { field: 'dataType', operator: 'eq', value: detailDataType.value },
+      // 时间范围
       {
         field: 'tm',
         operator: 'gte',
         dataType: 'date',
-        value: dayjs(detailDate.value).startOf('day').format('YYYY-MM-DD 00:00:00')
+        value: dayjs(detailDate.value)
+          .startOf('day')
+          .format('YYYY-MM-DD 00:00:00')
       },
       {
         field: 'tm',
         operator: 'lte',
         dataType: 'date',
-        value: dayjs(detailDate.value).endOf('day').format('YYYY-MM-DD 23:59:59')
+        value: dayjs(detailDate.value)
+          .endOf('day')
+          .format('YYYY-MM-DD 23:59:59')
       },
-      { field: 'dataType', operator: 'eq', value: detailDataType.value }
+      // stnm文本搜索
+      searchData.value.stnm
+        ? { field: 'stnm', operator: 'contains', value: searchData.value.stnm }
+        : null,
+      // rstcd电站选择（日历视图下）
+      searchData.value.rstcd
+        ? {
+            field: 'rstcd',
+            operator: 'in',
+            dataType: 'string',
+            value: [searchData.value.rstcd]
+          }
+        : null
     ].filter(Boolean);
 
     const params = {
       filter: { logic: 'and', filters },
+      sort: tabIndex.value === '1' ? [] : [{ field: 'tm', dir: 'desc' }],
       skip: (detailVideoPage.value - 1) * detailVideoTake.value,
       take: detailVideoTake.value
     };
 
     const res: any = await getAiFile(params);
-    const dataObj = res?.data?.data || {};
-    const rawData = dataObj?.data || [];
-    detailVideoTotal.value = dataObj?.total || 0;
+    console.log('二级弹框接口返回:', res);
+    const rData = res?.data ?? {};
+    const rawData = rData?.data || [];
+    console.log('提取的原始数据:', rawData);
+    detailVideoTotal.value = rData?.total || rawData.length;
+
+    // 按 fid 展开（与 React 一致，支持逗号分隔的多个 fid）
+    const expandedData = rawData
+      .map((item: any) => {
+        const fids = item.fid ? item.fid.split(',') : [];
+        return fids.map((fid: string) => ({ ...item, fid: fid.trim() }));
+      })
+      .flat();
 
     // 收集所有 fid
-    const allFids: string[] = [];
-    rawData.forEach((item: any) => {
-      if (item.fid) {
-        item.fid.split(',').forEach((f: string) => {
-          const trimmed = f.trim();
-          if (trimmed) allFids.push(trimmed);
-        });
-      }
-    });
+    const allFids = expandedData
+      .filter((item: any) => item.fid)
+      .map((item: any) => item.fid)
+      .join(',');
 
     // 调用 postIdUrl 获取媒体详情
     let mediaMap: Record<string, any> = {};
-    if (allFids.length > 0) {
+    if (allFids) {
       const formData = new FormData();
-      formData.append('id', allFids.join(','));
-      const mediaRes: any = await postIdUrl(formData);
-      mediaMap = mediaRes?.data || {};
+      formData.append('id', allFids);
+      console.log('请求媒体详情, allFids:', allFids);
+      try {
+        const mediaRes: any = await postIdUrl(formData);
+        console.log('媒体详情返回:', mediaRes);
+        mediaMap = mediaRes?.data || {};
+        console.log('mediaMap:', mediaMap);
+      } catch (mediaError) {
+        console.error('获取媒体详情失败:', mediaError);
+        mediaMap = {};
+      }
     }
 
-    // 按 fid 展开为独立项
-    const flatList: any[] = [];
-    rawData.forEach((item: any) => {
-      const fids = item.fid
-        ? item.fid.split(',').map((f: string) => f.trim()).filter(Boolean)
-        : [];
-      const tm = item.tm ? dayjs(item.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
+    // 构建列表（与 React 一致）
+    const list: any[] = [];
+    expandedData.forEach((vd: any) => {
+      const fileInfo = mediaMap[vd.fid];
+      const hasValidExtension =
+        fileInfo && ['.jpg', '.png'].includes(fileInfo.ext);
 
-      fids.forEach((fid: string) => {
-        const m = mediaMap[fid];
-        const ext = m?.ext || '';
-        const isVideo = ext === '.mp4';
-        const isImage = ext === '.jpg' || ext === '.png';
+      let flpth = '';
+      let imgPath = '';
+      let type = '';
 
-        flatList.push({
-          ...item,
-          fid,
-          media: m || null,
-          thumbUrl: isImage ? (baseUrl + '?' + fid + '&view=jpg') : '',
-          isVideo,
-          isImage,
-          tm
-        });
+      if (hasValidExtension !== undefined && !hasValidExtension) {
+        // 非图片（视频）
+        flpth = fileInfo.fullpath;
+        type = 'vdsp';
+      } else if (hasValidExtension !== undefined) {
+        // 图片
+        imgPath = fileInfo.fullpath;
+        type = 'img';
+      }
+
+      const tm = vd.tm ? dayjs(vd.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
+      list.push({
+        ...vd,
+        flpth,
+        imgPath,
+        flnm: `${vd.ennm || ''}${tm}`,
+        type,
+        tm
       });
     });
 
-    detailVideoList.value = flatList;
+    console.log('构建的列表（过滤前）:', list);
+
+    // 过滤掉无效项（与 React 一致）
+    const listMap = list.filter(
+      item => item.flpth !== '' || item.imgPath !== ''
+    );
+    console.log('过滤后的列表:', listMap);
+    detailVideoList.value = listMap;
 
     // 默认选中第一条
-    if (detailVideoList.value.length > 0) {
-      handleSelectDetailMedia(detailVideoList.value[0]);
+    if (listMap.length > 0) {
+      const first = listMap[0];
+      detailActiveFid.value = first.fid;
+      if (first.type === 'img') {
+        detailActiveMedia.value = {
+          type: 'image',
+          src: baseUrl + '?' + first.fid + '&view=jpg'
+        };
+      } else if (first.type === 'vdsp') {
+        detailActiveMedia.value = {
+          type: 'video',
+          src: baseUrl + '?' + first.fid + '&view=jpg'
+        };
+      } else {
+        detailActiveMedia.value = { type: '', src: '' };
+      }
     }
   } catch (error) {
     console.error('获取详情视频列表失败:', error);
@@ -1394,22 +1738,29 @@ const fetchDetailVideoList = async () => {
   }
 };
 
-// 选择详情媒体
+// 选择详情媒体（与 React 一致）
 const handleSelectDetailMedia = (item: any) => {
   detailActiveFid.value = item.fid;
-  const { isVideo, isImage } = item;
 
-  if (isImage) {
-    detailActiveMedia.value = { type: 'image', src: baseUrl + '?' + item.fid + '&view=jpg' };
-  } else if (isVideo) {
-    detailActiveMedia.value = { type: 'video', src: baseUrl + '?' + item.fid + '&view=jpg' };
+  if (item.type === 'img') {
+    detailActiveMedia.value = {
+      type: 'image',
+      src: baseUrl + '?' + item.fid + '&view=jpg'
+    };
+  } else if (item.type === 'vdsp') {
+    detailActiveMedia.value = {
+      type: 'video',
+      src: baseUrl + '?' + item.fid + '&view=jpg'
+    };
   } else {
     detailActiveMedia.value = { type: '', src: '' };
   }
 };
 
 // 详情分页切换
-const handleDetailVideoPageChange = () => {
+const handleDetailVideoPageChange = (page: number, pageSize: number) => {
+  detailVideoPage.value = page;
+  detailVideoTake.value = pageSize;
   detailActiveFid.value = '';
   detailActiveMedia.value = { type: '', src: '' };
   fetchDetailVideoList();
@@ -1451,6 +1802,40 @@ watch(
   { deep: true, immediate: true }
 );
 
+// ==================== 监听视图切换 ====================
+watch(vdListShow, () => {
+  if (vdListShow.value === '1') {
+    fetchVideoList();
+    getChartData();
+  } else if (vdListShow.value === '2') {
+    getChartData();
+    nextTick(() => {
+      const filter = buildFilter();
+      getTableInstance()?.getList(filter);
+    });
+  } else if (vdListShow.value === '3') {
+    colStcdData();
+    fetchCalendarData();
+  }
+});
+
+// ==================== 监听baseid/tabIndex/month变化，更新电站列表 ====================
+watch(
+  () => [searchData.value.baseid, tabIndex.value, searchData.value.month],
+  () => {
+    colStcdData();
+  }
+);
+
+// ==================== 监听月份变化，同步日历显示 ====================
+watch(
+  () => searchData.value.month,
+  (newMonth) => {
+    calendarValue.value = newMonth;
+    
+  }
+);
+
 // ==================== 监听 Tab 切换 ====================
 watch(tabIndex, () => {
   pieCode.value = [];
@@ -1479,6 +1864,14 @@ watch(tabIndex, () => {
   });
 });
 
+// ==================== 监听详情弹窗 Tab 切换 ====================
+watch(detailActiveKey, () => {
+  if (detailModalVisible.value) {
+    detailVideoPage.value = 1;
+    fetchDetailVideoList();
+  }
+});
+
 // ==================== 窗口 resize ====================
 const handleResize = () => {
   const dom = chartRefs.value.get(tabIndex.value);
@@ -1644,6 +2037,7 @@ onBeforeUnmount(() => {
 
       .media-empty {
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         height: 100%;
@@ -1724,6 +2118,7 @@ onBeforeUnmount(() => {
         display: flex;
         align-items: center;
         justify-content: center;
+        flex-direction: column;
       }
 
       .sidebar-pagination {
@@ -1733,5 +2128,179 @@ onBeforeUnmount(() => {
       }
     }
   }
+
+  .calendar-mode {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height:60vh;
+    overflow: auto;
+    padding-top:200px;
+
+    :deep(.ant-picker-calendar) {
+      width: 90%;
+      max-width: 1200px;
+    }
+
+    :deep(.ant-picker-content thead th) {
+      font-size: 0;
+    }
+
+    :deep(.ant-picker-content thead th)::before {
+      font-size: 16px;
+      font-weight: 700;
+      padding-right: 10px;
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(1))::before {
+      content: '周一';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(2))::before {
+      content: '周二';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(3))::before {
+      content: '周三';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(4))::before {
+      content: '周四';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(5))::before {
+      content: '周五';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(6))::before {
+      content: '周六';
+    }
+
+    :deep(.ant-picker-content thead tr th:nth-child(7))::before {
+      content: '周日';
+    }
+
+    :deep(.ant-picker-calendar) {
+      .ant-picker-calendar-date-value {
+        font-size: 18px !important;
+        padding-right: 8px;
+      }
+
+      .ant-picker-calendar-date {
+        border: 1px solid rgb(213, 225, 233) !important;
+        margin: 0px !important;
+        // height: 75px !important;
+      }
+
+      .ant-picker-panel {
+        .ant-picker-content {
+          thead {
+            th {
+              padding: 6px 0;
+              border: 1px solid rgb(213, 225, 233) !important;
+            }
+          }
+
+          td {
+            padding: 0;
+
+            .ant-picker-calendar-date {
+              padding: 3px;
+              border: none;
+            }
+
+            &.ant-picker-cell-selected .ant-picker-calendar-date {
+              background: transparent;
+            }
+
+            &.ant-picker-cell-today .ant-picker-calendar-date::before {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    .calendar-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1px;
+      padding: 2px;
+      text-align: right;
+
+      .content_state1 {
+        width: 100%;
+        background-color: #67c23a;
+        color: #000;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: auto;
+        padding-right: 8px;
+        font-size: 12px;
+      }
+
+      .content_state4 {
+        width: 100%;
+        background-color: #e6a23c;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: auto;
+        padding-right: 8px;
+        font-size: 12px;
+      }
+
+      .content_state2 {
+        width: 100%;
+        background-color: #e1f3d8;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: pointer;
+        padding-right: 8px;
+        font-size: 12px;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+
+      .content_state3 {
+        width: 100%;
+        background-color: #faecd8;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: pointer;
+        padding-right: 8px;
+        font-size: 12px;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+
+      .content_state5 {
+        width: 100%;
+        background-color: #faecd8;
+        padding: 2px 0;
+        border-radius: 3px;
+        cursor: pointer;
+        padding-right: 8px;
+        font-size: 12px;
+
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  .detail-empty {
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>
diff --git a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/components/VideoPlayer.vue b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/components/VideoPlayer.vue
new file mode 100644
index 00000000..708cc412
--- /dev/null
+++ b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/components/VideoPlayer.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="video-section">
+    <div class="video-mode">
+      <div class="video-main" v-loading="loading">
+        <div v-if="activeMedia.type === 'image' && activeMedia.src" class="media-display">
+          <img :src="activeMedia.src" style="width: 100%; height: 100%; object-fit: contain" />
+        </div>
+        <div v-else-if="activeMedia.type === 'video' && activeMedia.src" class="media-display">
+          <LiveVideoBox :videoData="{ url: activeMedia.src }" height="100%" :showTitle="false" />
+        </div>
+        <div v-else class="media-empty">
+          <a-empty :description="emptyText" />
+        </div>
+      </div>
+      <div class="video-sidebar" v-loading="loading">
+        <div class="sidebar-list" v-if="list.length > 0">
+          <div
+            v-for="item in list"
+            :key="item.fid"
+            class="sidebar-item"
+            :class="{ active: activeFid === item.fid }"
+            @click="handleSelect(item)"
+          >
+            <div class="item-thumb">
+              <img v-if="item.type === 'img'" :src="item.imgPath" />
+              <div v-else-if="item.type === 'vdsp'" class="thumb-placeholder">
+                <img :src="videoCover" />
+              </div>
+              <span v-else class="no-media">无媒体</span>
+            </div>
+            <div class="item-time">{{ item.stName || item.ennm }}{{ item.tm }}</div>
+          </div>
+        </div>
+        <a-empty v-else description="暂无数据" class="sidebar-empty" />
+      </div>
+    </div>
+    <div class="sidebar-pagination" style="margin-top: 10px; display: flex; justify-content: end">
+      <a-pagination
+        v-model:current="currentPage"
+        v-model:pageSize="currentPageSize"
+        :page-size-options="pageSizeOptions"
+        :total="total"
+        show-size-changer
+        size="small"
+        @change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import LiveVideoBox from '@/views/shiPinJianKong/components/LiveVideoBox.vue';
+import videoCover from '@/assets/images/videFm.jpg';
+
+interface Props {
+  list: any[];
+  activeFid: string;
+  activeMedia: { type: string; src: string };
+  loading: boolean;
+  page: number;
+  pageSize: number;
+  pageSizeOptions: string[];
+  total: number;
+  emptyText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emptyText: '请选择右侧数据'
+});
+
+const emit = defineEmits<{
+  (e: 'select', item: any): void;
+  (e: 'pageChange', page: number, pageSize: number): void;
+}>();
+
+const currentPage = ref(props.page);
+const currentPageSize = ref(props.pageSize);
+
+watch(
+  () => props.page,
+  val => {
+    currentPage.value = val;
+  }
+);
+
+watch(
+  () => props.pageSize,
+  val => {
+    currentPageSize.value = val;
+  }
+);
+
+const handleSelect = (item: any) => {
+  emit('select', item);
+};
+
+const handlePageChange = (page: number, pageSize: number) => {
+  currentPage.value = page;
+  currentPageSize.value = pageSize;
+  emit('pageChange', page, pageSize);
+};
+</script>
+
+<style scoped>
+
+  .video-mode {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+    height: 520px;
+
+    .video-main {
+      flex: 0 0 80%;
+      background: #000;
+      border-radius: 4px;
+      overflow: hidden;
+
+      .media-display {
+        width: 100%;
+        height: 100%;
+      }
+
+      .media-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+    }
+
+    .video-sidebar {
+      flex: 0 0 20%;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid #e8e8e8;
+      border-radius: 4px;
+      overflow: hidden;
+
+      .sidebar-list {
+        flex: 1;
+        overflow-y: auto;
+
+        .sidebar-item {
+          padding: 8px;
+          cursor: pointer;
+          border-bottom: 1px solid #f0f0f0;
+          transition: background 0.2s;
+
+          &:hover {
+            background: #f5f5f5;
+          }
+
+          &.active {
+            background: #e6f7ff;
+          }
+
+          .item-thumb {
+            width: 100%;
+            height: 110px;
+            background: #1a1a1a;
+            border-radius: 4px;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+
+            .thumb-placeholder {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+
+              .no-media {
+                font-size: 12px;
+                color: #999;
+              }
+            }
+          }
+
+          .item-time {
+            margin-top: 6px;
+            font-size: 12px;
+            color: #666;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .sidebar-empty {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      .sidebar-pagination {
+        padding: 8px;
+        text-align: center;
+        border-top: 1px solid #e8e8e8;
+      }
+    }
+  }
+/* 样式继承自父组件 */
+</style>
diff --git a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/composables/usePieChart.ts b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/composables/usePieChart.ts
new file mode 100644
index 00000000..c6f29e19
--- /dev/null
+++ b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/composables/usePieChart.ts
@@ -0,0 +1,119 @@
+import * as echarts from 'echarts';
+import type { ECharts, EChartsOption } from 'echarts';
+
+export interface ChartDataItem {
+  name: string;
+  value: number;
+  key: string;
+}
+
+export function usePieChart(
+  chartRefs: Map<string, HTMLElement>,
+  chartData: { value: ChartDataItem[] },
+  tabIndex: { value: string },
+  typeMap: Record<string, string>,
+  legendCallback?: (e: any) => void
+) {
+  let chartInstance: ECharts | null = null;
+
+  const initChart = (retryCount = 0) => {
+    const dom = chartRefs.get(tabIndex.value);
+    if (!dom) {
+      if (retryCount < 10) {
+        setTimeout(() => initChart(retryCount + 1), 100);
+      }
+      return;
+    }
+
+    const rect = dom.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      if (retryCount < 10) {
+        setTimeout(() => initChart(retryCount + 1), 100);
+      }
+      return;
+    }
+
+    if (!chartInstance) {
+      chartInstance = echarts.init(dom);
+    }
+
+    const option: EChartsOption = {
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => `${params.marker} ${params.name}: ${params.value}(次)`
+      },
+      legend: {
+        orient: 'vertical',
+        right: 10,
+        top: 80,
+        textStyle: { fontSize: 12 }
+      },
+      series: []
+    };
+
+    if (!chartData.value || chartData.value.length === 0) {
+      chartInstance.setOption(option, true);
+      return;
+    }
+
+    const total = chartData.value.reduce((acc: number, item: ChartDataItem) => acc + (item.value || 0), 0);
+    const titleText = typeMap[tabIndex.value] || '识别(次)';
+
+    option.series = [
+      {
+        type: 'pie',
+        radius: ['26%', '35%'],
+        center: ['35%', '50%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          formatter: '{c}'
+        },
+        labelLine: {
+          show: true,
+          length: 12,
+          length2: 12
+        },
+        data: chartData.value.map((item: ChartDataItem) => ({
+          name: item.name,
+          value: item.value
+        }))
+      }
+    ];
+
+    option.title = {
+      text: String(total),
+      left: '34%',
+      top: '44%',
+      textAlign: 'center',
+      textStyle: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#333'
+      },
+      subtext: titleText,
+      subtextStyle: {
+        fontSize: 12,
+        color: '#333'
+      }
+    };
+
+    chartInstance.setOption(option, true);
+
+    if (legendCallback) {
+      chartInstance.off('legendselectchanged');
+      chartInstance.on('legendselectchanged', legendCallback);
+    }
+  };
+
+  const dispose = () => {
+    chartInstance?.dispose();
+    chartInstance = null;
+  };
+
+  const resize = () => {
+    chartInstance?.resize();
+  };
+
+  return { initChart, dispose, resize };
+}
diff --git a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/composables/useVideoList.ts b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/composables/useVideoList.ts
new file mode 100644
index 00000000..3fd42b36
--- /dev/null
+++ b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/composables/useVideoList.ts
@@ -0,0 +1,131 @@
+import { ref } from 'vue';
+import { postIdUrl } from '@/api/mapModal';
+import dayjs from 'dayjs';
+
+export interface VideoListItem {
+  fid: string;
+  media: any;
+  thumbUrl: string;
+  isVideo: boolean;
+  isImage: boolean;
+  tm: string;
+  ennm?: string;
+  [key: string]: any;
+}
+
+export function useVideoList(
+  fetchFn: (params: any) => Promise<any>,
+  baseUrl: string
+) {
+  const page = ref(1);
+  const take = ref(20);
+  const total = ref(0);
+  const loading = ref(false);
+  const list = ref<VideoListItem[]>([]);
+  const activeFid = ref('');
+  const activeMedia = ref<{ type: string; src: string }>({ type: '', src: '' });
+
+  const fetchList = async (filter: any, options: any = {}) => {
+    loading.value = true;
+    try {
+      const skip = (page.value - 1) * take.value;
+      const params = { filter, skip, take: take.value, ...options };
+      const res = await fetchFn(params);
+      const dataObj = res?.data?.data ?? {};
+      const rawData = dataObj?.data || [];
+      total.value = dataObj?.total || 0;
+
+      const allFids: string[] = [];
+      rawData.forEach((item: any) => {
+        if (item.fid) {
+          item.fid.split(',').forEach((f: string) => {
+            const trimmed = f.trim();
+            if (trimmed) allFids.push(trimmed);
+          });
+        }
+      });
+
+      let mediaMap: Record<string, any> = {};
+      if (allFids.length > 0) {
+        const formData = new FormData();
+        formData.append('id', allFids.join(','));
+        const mediaRes: any = await postIdUrl(formData);
+        mediaMap = mediaRes?.data || {};
+      }
+
+      const flatList: VideoListItem[] = [];
+      rawData.forEach((item: any) => {
+        const fids = item.fid
+          ? item.fid.split(',').map((f: string) => f.trim()).filter(Boolean)
+          : [];
+        const tm = item.tm ? dayjs(item.tm).format('YYYY-MM-DD HH:mm:ss') : '-';
+
+        fids.forEach((fid: string) => {
+          const m = mediaMap[fid];
+          const ext = m?.ext || '';
+          const isVideo = ext === '.mp4';
+          const isImage = ext === '.jpg' || ext === '.png';
+
+          flatList.push({
+            ...item,
+            fid,
+            media: m || null,
+            thumbUrl: isImage ? baseUrl + '?' + fid + '&view=jpg' : '',
+            isVideo,
+            isImage,
+            tm
+          });
+        });
+      });
+
+      list.value = flatList;
+
+      if (list.value.length > 0 && !activeFid.value) {
+        selectMedia(list.value[0]);
+      }
+    } catch (error) {
+      console.error('获取视频列表失败:', error);
+      list.value = [];
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const selectMedia = (item: VideoListItem) => {
+    activeFid.value = item.fid;
+    const { isVideo, isImage } = item;
+
+    if (isImage) {
+      activeMedia.value = { type: 'image', src: baseUrl + '?' + item.fid + '&view=jpg' };
+    } else if (isVideo) {
+      activeMedia.value = { type: 'video', src: baseUrl + '?' + item.fid + '&view=jpg' };
+    } else {
+      activeMedia.value = { type: '', src: '' };
+    }
+  };
+
+  const handlePageChange = () => {
+    activeFid.value = '';
+    activeMedia.value = { type: '', src: '' };
+  };
+
+  const reset = () => {
+    page.value = 1;
+    activeFid.value = '';
+    activeMedia.value = { type: '', src: '' };
+  };
+
+  return {
+    page,
+    take,
+    total,
+    loading,
+    list,
+    activeFid,
+    activeMedia,
+    fetchList,
+    selectMedia,
+    handlePageChange,
+    reset
+  };
+}
diff --git a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue
index 47487ba8..14115f29 100644
--- a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue
+++ b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/index.vue
@@ -50,6 +50,7 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import AISBTK from './AISBTK.vue';
 import { getAisbdbyxList } from '@/api/zngj';
 import dayjs from 'dayjs';
+import { useDraggable } from '@/utils/drag';
 
 // 定义组件名（便于调试和递归）
 defineOptions({
@@ -104,7 +105,7 @@ const handleCardClick = (tabIdx: string) => {
 const handleModalClose = () => {
     modalVisible.value = false;
 };
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // ==================== 获取卡片统计数据 ====================
 const getCardData = async () => {
     if (!datetimePicker.value.value || !baseid.value) return;
diff --git a/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/types/index.ts b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/types/index.ts
new file mode 100644
index 00000000..55970af8
--- /dev/null
+++ b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/types/index.ts
@@ -0,0 +1,60 @@
+export enum TabType {
+  PFW = '1',
+  DLM = '2',
+  QP = '3'
+}
+
+export enum AiType {
+  PFW = 'AI_5001',
+  DLM = 'AI_5005',
+  QP = 'AI_5011'
+}
+
+export interface ChartDataItem {
+  name: string;
+  value: number;
+  key: string;
+}
+
+export interface VideoListItem {
+  fid: string;
+  media: any;
+  thumbUrl: string;
+  isVideo: boolean;
+  isImage: boolean;
+  tm: string;
+  ennm?: string;
+  [key: string]: any;
+}
+
+export interface CalendarDayData {
+  dt: string;
+  status?: string;
+  qpStatus?: string;
+  fid?: string;
+}
+
+export interface CalendarStatusInfo {
+  name: string;
+  className: string;
+  type: string;
+  dataType: string;
+}
+
+export interface TabItem {
+  key: number;
+  value: string;
+  unit: string;
+  count: number;
+}
+
+export interface SearchData {
+  baseid: string;
+  stnm: string;
+  month: any;
+}
+
+export interface DetailTabItem {
+  key: string;
+  label: string;
+}
diff --git a/frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue b/frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue
index 420540fe..221a2c68 100644
--- a/frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue
+++ b/frontend/src/modules/zengZhiJiHuaWanChengQingKuang/index.vue
@@ -50,6 +50,8 @@ import {
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { MapClass } from '@/components/gis/map.class';
 import ZengZhiZhanQingKuangTwoLayers from './TwoLayers/ZengZhiZhanQingKuangTwoLayers.vue';
+import { useDraggable } from '@/utils/drag';
+
 const JidiSelectEventStore = useJidiSelectEventStore();
 
 const baseid = ref('');
@@ -65,7 +67,7 @@ let chartInstance: ECharts | null = null;
 // 弹窗控制
 const dialogVisible = ref(false);
 const dialogData = ref<any>(null);
-
+useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
 // 当前选中的站点选项
 const selectedOption = computed(() => {
   return select.value.options.find(
diff --git a/frontend/src/modules/zengZhiZhanJieShaoMod/index.vue b/frontend/src/modules/zengZhiZhanJieShaoMod/index.vue
index 777d8ec2..e9cb1ecf 100644
--- a/frontend/src/modules/zengZhiZhanJieShaoMod/index.vue
+++ b/frontend/src/modules/zengZhiZhanJieShaoMod/index.vue
@@ -63,6 +63,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { msstbprptGetKendoList } from '@/api/zzfl';
 import ArtsDetail from '@/components/carouselIntroduce/ArtsDetail.vue';
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'zengZhiZhanJieShaoMod'
@@ -103,7 +105,7 @@ const isHovering = ref(false);
 
 // 是否正在切换动画中（用于禁用transition）
 const isTransitioning = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 初始化渲染数组（克隆首尾项）
 const initRenderData = () => {
   const length = originalMediaData.value.length;
diff --git a/frontend/src/modules/zengzhizhanjiansheyunxing/index.vue b/frontend/src/modules/zengzhizhanjiansheyunxing/index.vue
index ec72eb90..17218d70 100644
--- a/frontend/src/modules/zengzhizhanjiansheyunxing/index.vue
+++ b/frontend/src/modules/zengzhizhanjiansheyunxing/index.vue
@@ -60,6 +60,8 @@ import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { overviewGetKendoListCust } from '@/api/zzfl';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import WholeValuedStationOverviewDetail from "./WholeValuedStationOverviewDetail/index.vue"
+import { useDraggable } from '@/utils/drag';
+
 // 定义组件名（便于调试和递归）
 defineOptions({
   name: 'zengzhizhanjiansheyunxing'
@@ -68,6 +70,7 @@ const JidiSelectEventStore = useJidiSelectEventStore();
 const baseid = ref('');
 const loading = ref(false);
 const dialogVisible = ref(false);
+useDraggable(dialogVisible, { boundary: true, resetOnOpen: true });
 const dialogTitle = ref('增殖站概况');
 const datetimePicker = ref({
   show: true,
diff --git a/frontend/src/store/modules/map.ts b/frontend/src/store/modules/map.ts
index c3ab03cb..b0446326 100644
--- a/frontend/src/store/modules/map.ts
+++ b/frontend/src/store/modules/map.ts
@@ -14,7 +14,7 @@ import { useMapConfigStore } from '@/modules/map/stores/map-config.store';
 import { useMapDataStore } from '@/modules/map/stores/map-data.store';
 import { useMapViewStore } from '@/modules/map/stores/map-view.store';
 import request from '@/utils/request';
-import { urlList } from '@/utils/GisUrlList';
+// import { urlList } from '@/utils/GisUrlList';
 const mapClass = MapClass.getInstance();
 const DEFAULT_LAYER_REQUEST_CONCURRENCY = 4;
 const ENG_POINT_LAYER_KEY = 'eng_point';
@@ -47,23 +47,23 @@ const normalizeCachePayload = (value: any): any => {
   return value;
 };
 
-const buildUrlListIndex = (items: any[] = []) => {
-  const index: Record<string, any[]> = {};
-
-  items.forEach(item => {
-    [item.url, item.title, item.keyType].forEach(key => {
-      if (!key) return;
-      if (!index[key]) {
-        index[key] = [];
-      }
-      index[key].push(item);
-    });
-  });
-
-  return index;
-};
-
-const urlListIndex = buildUrlListIndex(urlList);
+// const buildUrlListIndex = (items: any[] = []) => {
+//   const index: Record<string, any[]> = {};
+//
+//   items.forEach(item => {
+//     [item.url, item.title, item.keyType].forEach(key => {
+//       if (!key) return;
+//       if (!index[key]) {
+//         index[key] = [];
+//       }
+//       index[key].push(item);
+//     });
+//   });
+//
+//   return index;
+// };
+//
+// const urlListIndex = buildUrlListIndex(urlList);
 
 const isCanceledRequestError = (error: unknown) => {
   const message = error instanceof Error ? error.message : String(error || '');
@@ -74,6 +74,72 @@ const isCanceledRequestError = (error: unknown) => {
   );
 };
 
+const buildFiltersFromParamsObject = (
+  paramsObject: Record<string, any> = {}
+) => {
+  const filtersArray: any[] = [];
+
+  Object.keys(paramsObject).forEach(paramKey => {
+    const value = paramsObject[paramKey];
+
+    if (Array.isArray(value)) {
+      value.forEach((filter: any) => {
+        filtersArray.push({
+          ...filter,
+          dataType: filter?.dataType || 'string'
+        });
+      });
+      return;
+    }
+
+    filtersArray.push({
+      field: paramKey,
+      operator: 'eq',
+      dataType: 'string',
+      value
+    });
+  });
+
+  return filtersArray;
+};
+
+const normalizeRequestParams = (rawParams: any) => {
+  if (!rawParams || !Object.keys(rawParams).length) {
+    return { logic: 'and', filters: [] };
+  }
+
+  if (Array.isArray(rawParams.filters)) {
+    return {
+      logic: rawParams.logic || 'and',
+      filters: rawParams.filters.map((filter: any) => ({
+        ...filter,
+        dataType: filter?.dataType || 'string'
+      }))
+    };
+  }
+
+  return {
+    logic: 'and',
+    filters: buildFiltersFromParamsObject(rawParams)
+  };
+};
+
+const parseAnchorParamFilters = (anchorParamJson?: string) => {
+  if (!anchorParamJson) return [];
+
+  try {
+    const parsedParams = JSON.parse(anchorParamJson);
+    if (!parsedParams || typeof parsedParams !== 'object') {
+      return [];
+    }
+
+    return buildFiltersFromParamsObject(parsedParams);
+  } catch (error) {
+    console.error('解析 anchorParamJson 失败:', error);
+    return [];
+  }
+};
+
 export const useMapStore = defineStore('map', () => {
   const mapConfigStore = useMapConfigStore();
   const mapDataStore = useMapDataStore();
@@ -260,7 +326,7 @@ export const useMapStore = defineStore('map', () => {
   };
 
   const getRuntimeCheckedLayerKeys = (): string[] => {
-    return normalizeCheckedLayerKeys(mapViewStore.getCheckedLayerKeys());
+    return mapViewStore.getCheckedLayerKeys();
   };
 
   const syncPointDataForFilter = () => {
@@ -300,6 +366,7 @@ export const useMapStore = defineStore('map', () => {
     mapConfigStore.setLayerConfigTree(data);
     const nextCheckedLayerKeys = mapConfigStore.extractCheckedLayerKeys(data);
     mapViewStore.setCheckedLayerKeys(nextCheckedLayerKeys);
+    console.log(1);
     rebuildLegendRuntimeData(nextCheckedLayerKeys);
   };
 
@@ -374,6 +441,7 @@ export const useMapStore = defineStore('map', () => {
     mapViewStore.setLegendCheckedState(
       buildLegendCheckedState(legendDataOriginal.value, normalizeLegendNameEn)
     );
+    console.log(2);
     rebuildLegendRuntimeData(checkedLayerKeys.value);
   };
 
@@ -381,6 +449,7 @@ export const useMapStore = defineStore('map', () => {
    * 设置选中的图例数据（在图层加载完成后调用）
    */
   const setSelectedLegendData = () => {
+    console.log(3);
     rebuildLegendRuntimeData(checkedLayerKeys.value);
   };
 
@@ -458,7 +527,10 @@ export const useMapStore = defineStore('map', () => {
    * @param isInit - 是否是初始化阶段（初始化时遍历所有图层）
    */
   const updateLayerData = async (checkKeys: string[], isInit = false) => {
-    checkKeys = normalizeCheckedLayerKeys(checkKeys);
+    console.log(checkKeys);
+    if (!isInit) {
+      checkKeys = normalizeCheckedLayerKeys(checkKeys);
+    }
 
     mapViewStore.setCheckedLayerKeys(checkKeys);
 
@@ -594,6 +666,11 @@ export const useMapStore = defineStore('map', () => {
       const allPointData = mapDataStore.rebuildPointDataFromCache(allLayerKeys);
       attachNearbyPointRuntimeMeta(allPointData);
       const runtimeCheckedKeys = getRuntimeCheckedLayerKeys();
+      const treeCheckedKeys = mapConfigStore.extractCheckedLayerKeys(
+        layerData.value.length > 0 ? layerData.value : items
+      );
+      const finalCheckedKeys =
+        runtimeCheckedKeys.length > 0 ? runtimeCheckedKeys : treeCheckedKeys;
 
       // 备注：近邻点元数据需要基于全量点位统一识别，识别完成后同步刷新各图层 Feature。
       for (const key of allLayerKeys) {
@@ -608,7 +685,7 @@ export const useMapStore = defineStore('map', () => {
         const shouldRestoreVisible =
           typeof cacheChecked === 'boolean'
             ? cacheChecked
-            : layer.checked === 1 || runtimeCheckedKeys.includes(key);
+            : layer.checked === 1 || finalCheckedKeys.includes(key);
         layer.data = layerPoints;
         mapClass.addInitDataLayer(displayData, key);
         if (shouldRestoreVisible) {
@@ -622,7 +699,7 @@ export const useMapStore = defineStore('map', () => {
 
       // 备注：初始化 loading 期间用户可能已经手动改过图层勾选，这里必须以最新运行态收尾，
       // 不能再回放 load 启动瞬间的默认 checked 快照。
-      await updateLayerData(runtimeCheckedKeys, true);
+      await updateLayerData(finalCheckedKeys, true);
     } finally {
       mapDataStore.setLoading(false);
     }
@@ -736,6 +813,7 @@ export const useMapStore = defineStore('map', () => {
       normalizedNameEn,
       checked
     );
+    console.log(5);
     rebuildLegendRuntimeData(checkedLayerKeys.value);
     applyLegendItemVisibility(legendItem, checked);
   };
@@ -754,14 +832,13 @@ export const useMapStore = defineStore('map', () => {
     });
 
     mapViewStore.setLegendCheckedState(nextState);
+    console.log(6);
     rebuildLegendRuntimeData(checkedLayerKeys.value);
     changedLegendItems.forEach(legendItem =>
       applyLegendItemVisibility(legendItem, checked)
     );
   };
 
-  /**
-
   /**
    * 生成请求标识符，用于避免重复请求
    */
@@ -777,130 +854,85 @@ export const useMapStore = defineStore('map', () => {
     layer: any,
     sessionId: number = loadSessionSeed
   ) => {
-    const { key, url, params = {}, paramJson } = layer;
+    const { key, url, params = {}, paramJson, anchorParamJson } = layer;
 
     // 没有URL，跳过
     if (!url) {
       return [];
     }
-
-    // 参考 React 版本：使用 urlList 匹配图层配置
-    let requestUrl = url;
+    const requestUrl = url;
     let requestParams: any = params;
     let requestOrders: any = null;
 
-    // 根据图层的 key（keyType）、title、url 查找匹配的 urlList 项
     const layerKey = layer?.key || '';
-    const layerTitle = layer?.title || '';
-    const matchedList =
-      urlListIndex[layerKey] || urlListIndex[layerTitle] || urlListIndex[url];
 
-    if (matchedList && matchedList.length > 0) {
-      let matchedItem: any = null;
-      if (key == 'va_built_point ' || key == 'vp_built_point') {
-        matchedList.forEach(item => {
-          if (item.title === layerTitle) {
-            matchedItem = item;
-          }
-        });
-      } else {
-        matchedItem = matchedList[0];
-      }
-      requestUrl = matchedItem.url;
+    const voidSttp = 'all';
+    const ylfbKeys = ['ylfb_point'];
+    const timeRangeLayerKeys = ['ef_point'];
+    const spjkz = ['stinfo_video_point'];
 
-      // 转换 params 为 filter 格式
-      if (matchedItem.params) {
-        const filtersArray: any[] = [];
-        for (const key in matchedItem.params) {
-          const value = matchedItem.params[key];
-          if (Array.isArray(value)) {
-            // 处理数组格式: { field: 'sttpCode', operator: 'eq', value: 'WQ' }
-            value.forEach((filter: any) => {
-              filtersArray.push({
-                ...filter,
-                dataType: filter.dataType || 'string'
-              });
-            });
-          } else {
-            // 处理简单格式: sttpCode: 'VP'
-            filtersArray.push({
-              field: key,
-              operator: 'eq',
-              dataType: 'string',
-              value: value
-            });
-          }
-        }
-        requestParams = {
-          logic: 'and',
-          filters: filtersArray
-        };
-      }
-      let voidSttp = 'all';
-      const ylfbKeys = ['ylfb_point']; // 需要时间搜索的图层key
-      const timeRangeLayerKeys = ['ef_point']; // 需要时间搜索的图层key
-      const spjkz = ['stinfo_video_point'];
-      const lineTimeLayerKeys = [
-        'wt_rive_gradient_line',
-        'wq_rive_gradient_line'
-      ]; // 需要时间搜索的图层key
+    const yearTime = dayjs().subtract(1, 'years');
 
-      let yearTime = dayjs().subtract(1, 'years'); // 鱼类分布年份
-      if (timeRangeLayerKeys.includes(layerKey)) {
+    requestParams = normalizeRequestParams(requestParams);
+
+    const anchorParamFilters = parseAnchorParamFilters(anchorParamJson);
+    if (anchorParamFilters.length) {
+      requestParams.filters.push(...anchorParamFilters);
+    }
+
+    if (timeRangeLayerKeys.includes(layerKey)) {
+      requestParams.filters.push({
+        field: 'tm',
+        operator: 'gte',
+        dataType: 'date',
+        value: dayjs(searchTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
+      });
+      requestParams.filters.push({
+        field: 'tm',
+        operator: 'lte',
+        dataType: 'date',
+        value: dayjs(searchTimeRange.value[1]).format('YYYY-MM-DD 23:59:59')
+      });
+    }
+    if (spjkz.includes(layerKey)) {
+      if (voidSttp !== 'all') {
         requestParams.filters.push({
-          field: 'tm',
-          operator: 'gte',
+          field: 'sttp',
+          operator: 'in',
+          value: voidSttp == 'VD_EQ,VD_EQS' ? ['VD_EQ', 'VD_EQS'] : [voidSttp]
+        });
+      }
+    }
+    if (ylfbKeys.includes(layerKey)) {
+      if (yearTime) {
+        requestParams.filters.push({
+          field: 'startTime',
+          operator: 'eq',
           dataType: 'date',
-          value: dayjs(searchTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
+          value: dayjs(yearTime).startOf('year').format('YYYY-MM-DD 00:00:00')
         });
         requestParams.filters.push({
-          field: 'tm',
-          operator: 'lte',
+          field: 'endTime',
+          operator: 'eq',
           dataType: 'date',
-          value: dayjs(searchTimeRange.value[1]).format('YYYY-MM-DD 23:59:59')
+          value: dayjs(yearTime).endOf('year').format('YYYY-MM-DD 23:59:59')
         });
       }
-      if (spjkz.includes(layerKey)) {
-        if (voidSttp !== 'all') {
-          requestParams.filters.push({
-            field: 'sttp',
-            operator: 'in',
-            value: voidSttp == 'VD_EQ,VD_EQS' ? ['VD_EQ', 'VD_EQS'] : [voidSttp]
-          });
-        }
-      }
-      if (ylfbKeys.includes(layerKey)) {
-        if (yearTime) {
-          requestParams.filters.push({
-            field: 'startTime',
-            operator: 'eq',
-            dataType: 'date',
-            value: dayjs(yearTime).startOf('year').format('YYYY-MM-DD 00:00:00')
-          });
-          requestParams.filters.push({
-            field: 'endTime',
-            operator: 'eq',
-            dataType: 'date',
-            value: dayjs(yearTime).endOf('year').format('YYYY-MM-DD 23:59:59')
-          });
-        }
-      }
-      // 转换 orders 格式：从 JSON 字符串转换为数组格式
-      if (matchedItem.orders) {
-        try {
-          const ordersObj = JSON.parse(matchedItem.orders);
-          const ordersArray = Object.entries(ordersObj).map(([field, dir]) => ({
-            field,
-            dir
-          }));
-          requestOrders = ordersArray;
-        } catch (e) {
-          console.error('解析 orders 失败:', e);
-        }
-      }
     }
 
-    // 如果没有匹配到 urlList，尝试解析 paramJson
+    if (layer?.orders) {
+      try {
+        const ordersObj = JSON.parse(layer.orders);
+        const ordersArray = Object.entries(ordersObj).map(([field, dir]) => ({
+          field,
+          dir
+        }));
+        requestOrders = ordersArray;
+      } catch (e) {
+        console.error('解析 orders 失败:', e);
+      }
+    }
+
     if (!Object.keys(requestParams).length && paramJson) {
       try {
         const jsonObj = JSON.parse(paramJson);
@@ -1109,6 +1141,8 @@ export const useMapStore = defineStore('map', () => {
 
         const allPointData = mapDataStore.rebuildPointDataFromCache();
 
+        console.log(888);
+        console.log(currentCheckedKeys);
         // 更新地图锚点显示
         await updateLayerData(currentCheckedKeys, false);
       }
diff --git a/frontend/src/store/modules/permission.ts b/frontend/src/store/modules/permission.ts
index 3e259773..058de331 100644
--- a/frontend/src/store/modules/permission.ts
+++ b/frontend/src/store/modules/permission.ts
@@ -15,7 +15,8 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
     // ✅ 保存原始名称到 meta，用于菜单显示
     tmp.meta = {
       ...tmp.meta,
-      title: tmp.name || tmp.menuName // 原始名称用于显示
+      title: tmp.name || tmp.menuName, // 原始名称用于显示
+      moduleId: tmp.id // 保存菜单ID，供地图模块使用
     };
     // ✅ name 使用路径生成唯一值
     tmp.name = tmp.path || tmp.opturl;
diff --git a/frontend/src/store/modules/shuJuTianBao.ts b/frontend/src/store/modules/shuJuTianBao.ts
index e36eb104..7e29e00a 100644
--- a/frontend/src/store/modules/shuJuTianBao.ts
+++ b/frontend/src/store/modules/shuJuTianBao.ts
@@ -27,6 +27,7 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
     try {
       baseLoading.value = true;
       const res = await getBaseDropdown({});
+      // debugger
       if (res.data && Array.isArray(res.data)) {
         const list = [...res.data];
         // 直接赋值给 ref，触发响应式更新
@@ -58,10 +59,15 @@ export const useShuJuTianBaoStore = defineStore('shuJuTianBao', () => {
     }
   };
   // 获取电站列表
-  const getEngOption = async (rvcd: string) => {
+  const getEngOption = async (rvcd: string, type: string) => {
     try {
       engLoading.value = true;
-      const param = rvcd === 'all' ? {} : { reachcd: rvcd };
+      let param:any
+      if (type == 'baseId') {
+        param = rvcd === 'all' ? {} : { baseId: rvcd };
+      } else {
+        param = rvcd === 'all' ? {} : { reachcd: rvcd };
+      }
       const res = await getEngInfoDropdown(param);
       if (res.data && Array.isArray(res.data)) {
         // 直接赋值给 ref
diff --git a/frontend/src/styles/ant-design-vue.scss b/frontend/src/styles/ant-design-vue.scss
index 4ce5f835..85123322 100644
--- a/frontend/src/styles/ant-design-vue.scss
+++ b/frontend/src/styles/ant-design-vue.scss
@@ -39,3 +39,6 @@
 .ant-message {
   z-index: 2005 !important;
 }
+.ant-modal-header {
+  cursor: move;
+}
diff --git a/frontend/src/utils/GisUrlList.ts b/frontend/src/utils/GisUrlList.ts
index 9b636b50..160b4c9a 100644
--- a/frontend/src/utils/GisUrlList.ts
+++ b/frontend/src/utils/GisUrlList.ts
@@ -25,16 +25,16 @@ export const urlList = [
     orders:
       '{"baseId":"asc","rvcdStepSort":"asc","siteStepSort":"asc","ennm":"asc"}'
   },
-  {
-    url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
-    title: '实际水质',
-    params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
-  },
-  {
-    url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
-    title: '目标水质',
-    params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
-  },
+  // {
+  //   url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
+  //   title: '实际水质',
+  //   params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
+  // },
+  // {
+  //   url: '/wmp-env-server/env/wq/anchorPoint/reach/GetKendoListCust',
+  //   title: '目标水质',
+  //   params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
+  // },
   // {
   //     url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust',
   //     title: '自建站',
@@ -171,11 +171,11 @@ export const urlList = [
     title: '水电站告警情况',
     params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
   },
-  {
-    url: '/wmp-env-server/fb/point/discharge/GetKendoListCust',
-    title: '水电站',
-    params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
-  },
+  // {
+  //   url: '/wmp-env-server/fb/point/discharge/GetKendoListCust',
+  //   title: '水电站',
+  //   params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
+  // },
   {
     url: '/wmp-env-server/env/fh/zqpoint/GetKendoListCust',
     title: '国家水文站',
@@ -200,19 +200,19 @@ export const urlList = [
     title: '视频监控站',
     params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
   },
-  {
-    url: '/wmp-env-server/env/wb/point/GetKendoListCust',
-    title: '气象站',
-    params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
-  },
-  {
-    url: '/wmp-env-server/sw/getEngTempPointList/getLastData',
-    title: '水温站点',
-    params: {
-      logic: 'and',
-      filters: []
-    }
-  },
+  // {
+  //   url: '/wmp-env-server/env/wb/point/GetKendoListCust',
+  //   title: '气象站',
+  //   params: { lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] }
+  // },
+  // {
+  //   url: '/wmp-env-server/sw/getEngTempPointList/getLastData',
+  //   title: '水温站点',
+  //   params: {
+  //     logic: 'and',
+  //     filters: []
+  //   }
+  // },
   {
     url: '/wmp-env-server/env/wq/anchorPoint/GetKendoListCust',
     title: '水质站点',
@@ -233,38 +233,38 @@ export const urlList = [
     },
     orders: '{"orderIndex":"asc"}'
   },
-  {
-    url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
-    title: '水质告警',
-    params: {
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
-      sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WQ' }]
-    }
-  },
-  {
-    url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
-    title: '水温告警',
-    params: {
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
-      sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WTRV' }]
-    }
-  },
-  {
-    url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
-    title: '水位告警',
-    params: {
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
-      sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'ENG' }]
-    }
-  },
-  {
-    url: '/wmp-env-server/env/warn/stcd/operatePoint/GetKendoListCust',
-    title: '环保设施告警',
-    params: {
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
-      yr: dayjs().format('YYYY')
-    }
-  },
+  // {
+  //   url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
+  //   title: '水质告警',
+  //   params: {
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
+  //     sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WQ' }]
+  //   }
+  // },
+  // {
+  //   url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
+  //   title: '水温告警',
+  //   params: {
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
+  //     sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WTRV' }]
+  //   }
+  // },
+  // {
+  //   url: '/wmp-env-server/env/warn/stcd/point/GetKendoListCust',
+  //   title: '水位告警',
+  //   params: {
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
+  //     sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'ENG' }]
+  //   }
+  // },
+  // {
+  //   url: '/wmp-env-server/env/warn/stcd/operatePoint/GetKendoListCust',
+  //   title: '环保设施告警',
+  //   params: {
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
+  //     yr: dayjs().format('YYYY')
+  //   }
+  // },
   {
     url: '/wmp-env-server/env/fp/point/built/GetKendoListCust',
     title: '在建过鱼设施-地图锚点',
@@ -273,24 +273,24 @@ export const urlList = [
       bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
     }
   },
-  {
-    url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
-    title: '在建鱼类增殖站',
-    params: {
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
-      sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'FB' }],
-      bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
-    }
-  },
-  {
-    url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
-    title: '在建人工产卵场',
-    params: {
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
-      sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'SG' }],
-      bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
-    }
-  },
+  // {
+  //   url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
+  //   title: '在建鱼类增殖站',
+  //   params: {
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
+  //     sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'FB' }],
+  //     bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
+  //   }
+  // },
+  // {
+  //   url: '/wmp-env-server/env/fb/point/built/GetKendoListCust',
+  //   title: '在建人工产卵场',
+  //   params: {
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
+  //     sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'SG' }],
+  //     bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
+  //   }
+  // },
   {
     url: '/wmp-env-server/env/fhvap/built/GetKendoListCust',
     title: '在建珍稀植物园',
@@ -309,21 +309,21 @@ export const urlList = [
       bldsttCcode: [{ field: 'bldsttCcode', operator: 'eq', value: '1' }]
     }
   },
-  {
-    url: '/wmp-env-server/eng/eq/eqds/built/GetKendoListCust',
-    title: '在建生态流量泄放设施',
-    params: {
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
-      BLDSTT_CCODE: [{ field: 'BLDSTT_CCODE', operator: 'eq', value: '1' }]
-    }
-  },
-  {
-    url: '/wmp-env-server/env/we/fishList/point/GetKendoList',
-    title: '鱼类沿程',
-    params: {
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
-    }
-  },
+  // {
+  //   url: '/wmp-env-server/eng/eq/eqds/built/GetKendoListCust',
+  //   title: '在建生态流量泄放设施',
+  //   params: {
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }],
+  //     BLDSTT_CCODE: [{ field: 'BLDSTT_CCODE', operator: 'eq', value: '1' }]
+  //   }
+  // },
+  // {
+  //   url: '/wmp-env-server/env/we/fishList/point/GetKendoList',
+  //   title: '鱼类沿程',
+  //   params: {
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
+  //   }
+  // },
   {
     url: '/wmp-env-server/env/wva/point/GetKendoListCust',
     title: '野生动物监测',
@@ -332,15 +332,15 @@ export const urlList = [
       sttpCode: [{ field: 'sttpCode', operator: 'eq', value: 'WVA' }]
     }
   },
-  {
-    url: '/wmp-env-server/env/we/fishList/point/GetNativeRareFish',
-    title: '土著珍稀鱼类',
-    params: {
-      rare: '1',
-      specOrigin: '1',
-      lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
-    }
-  },
+  // {
+  //   url: '/wmp-env-server/env/we/fishList/point/GetNativeRareFish',
+  //   title: '土著珍稀鱼类',
+  //   params: {
+  //     rare: '1',
+  //     specOrigin: '1',
+  //     lgtd: [{ field: 'lgtd', operator: 'isnotnull' }]
+  //   }
+  // },
   // { url: '/wmp-env-server/te/tet/point/GetTerrestrialAnimal', title: '陆生动物分布', params: { baseId: window?.__lyConfigs?.baseId, lgtd: [{ field: 'lgtd', operator: 'isnotnull' }] } },
   {
     url: '/wmp-env-server/sdFprdR/point/getFprdPointList',
diff --git a/frontend/src/utils/drag.ts b/frontend/src/utils/drag.ts
new file mode 100644
index 00000000..39901184
--- /dev/null
+++ b/frontend/src/utils/drag.ts
@@ -0,0 +1,182 @@
+import { nextTick, watch } from 'vue';
+
+export interface DraggableOptions {
+  /** 拖拽手柄选择器，默认 '.ant-modal-header' */
+  handle?: string;
+  /** 弹窗内容选择器，默认 '.ant-modal-content' */
+  modalSelector?: string;
+  /** 是否限制在可视区域内，默认 true */
+  boundary?: boolean;
+  /** 打开弹窗时是否自动重置到居中位置，默认 true */
+  resetOnOpen?: boolean;
+}
+
+export function useDraggable(
+  openRef: { value: boolean },
+  options: DraggableOptions = {}
+) {
+  console.log(openRef);
+  const {
+    handle = '.ant-modal-header',
+    modalSelector = '.ant-modal-content',
+    boundary = true,
+    resetOnOpen = true
+  } = options;
+
+  let cleanup: (() => void) | null = null;
+
+  const initDrag = (): (() => void) | null => {
+    if (resetOnOpen) {
+      const modalContents = document.querySelectorAll(
+        modalSelector
+      ) as NodeListOf<HTMLElement>;
+      modalContents.forEach(content => {
+        if (content.offsetParent !== null) {
+          content.style.position = '';
+          content.style.left = '';
+          content.style.top = '';
+          content.style.margin = '';
+          content.style.transform = '';
+          content.style.width = '';
+        }
+      });
+    }
+
+    let currentModalContent: HTMLElement | null = null;
+    let isDragging = false;
+    let startX = 0;
+    let startY = 0;
+    let startLeft = 0;
+    let startTop = 0;
+
+    const getPointerPos = (e: MouseEvent | TouchEvent) => {
+      if (e instanceof TouchEvent) {
+        const touch = e.touches[0];
+        return { clientX: touch.clientX, clientY: touch.clientY };
+      }
+      return { clientX: e.clientX, clientY: e.clientY };
+    };
+
+    const onPointerDown = (e: MouseEvent | TouchEvent) => {
+      const target = e.target instanceof HTMLElement ? e.target : null;
+      const dragHandle = target?.closest(handle) as HTMLElement | null;
+
+      if (!dragHandle) return;
+
+      const modalContent = dragHandle.closest(
+        modalSelector
+      ) as HTMLElement | null;
+      if (!modalContent) return;
+
+      if (
+        target.closest('.ant-modal-close') ||
+        target.closest('button') ||
+        target.closest('input') ||
+        target.closest('select') ||
+        target.closest('textarea') ||
+        target.closest('a')
+      )
+        return;
+
+      e.preventDefault();
+      isDragging = true;
+      currentModalContent = modalContent;
+
+      const rect = modalContent.getBoundingClientRect();
+      startLeft = rect.left;
+      startTop = rect.top;
+      const pos = getPointerPos(e);
+      startX = pos.clientX - startLeft;
+      startY = pos.clientY - startTop;
+
+      const currentWidth = modalContent.offsetWidth;
+      modalContent.style.width = currentWidth + 'px';
+
+      modalContent.style.userSelect = 'none';
+      modalContent.style.webkitUserSelect = 'none';
+      modalContent.style.position = 'fixed';
+      modalContent.style.margin = '0';
+      modalContent.style.transform = 'none';
+
+      document.addEventListener('mousemove', onPointerMove, { passive: false });
+      document.addEventListener('mouseup', onPointerUp);
+      document.addEventListener('touchmove', onPointerMove, { passive: false });
+      document.addEventListener('touchend', onPointerUp);
+    };
+
+    const onPointerMove = (e: MouseEvent | TouchEvent) => {
+      if (!isDragging || !currentModalContent) return;
+      e.preventDefault();
+      const pos = getPointerPos(e);
+      let newLeft = pos.clientX - startX;
+      let newTop = pos.clientY - startY;
+
+      if (boundary) {
+        const maxX = window.innerWidth - currentModalContent.offsetWidth;
+        const maxY = window.innerHeight - currentModalContent.offsetHeight;
+        newLeft = Math.max(0, Math.min(newLeft, maxX));
+        newTop = Math.max(0, Math.min(newTop, maxY));
+      }
+
+      currentModalContent.style.left = `${newLeft}px`;
+      currentModalContent.style.top = `${newTop}px`;
+    };
+
+    const onPointerUp = () => {
+      if (!currentModalContent) return;
+      isDragging = false;
+      currentModalContent.style.userSelect = '';
+      currentModalContent.style.webkitUserSelect = '';
+      document.removeEventListener('mousemove', onPointerMove);
+      document.removeEventListener('mouseup', onPointerUp);
+      document.removeEventListener('touchmove', onPointerMove);
+      document.removeEventListener('touchend', onPointerUp);
+      currentModalContent = null;
+    };
+
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('touchstart', onPointerDown, {
+      passive: false
+    });
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('touchstart', onPointerDown);
+      document.removeEventListener('mousemove', onPointerMove);
+      document.removeEventListener('mouseup', onPointerUp);
+      document.removeEventListener('touchmove', onPointerMove);
+      document.removeEventListener('touchend', onPointerUp);
+
+      const modalContents = document.querySelectorAll(
+        modalSelector
+      ) as NodeListOf<HTMLElement>;
+      modalContents.forEach(content => {
+        content.style.position = '';
+        content.style.left = '';
+        content.style.top = '';
+        content.style.margin = '';
+        content.style.transform = '';
+        content.style.width = '';
+        content.style.userSelect = '';
+        content.style.webkitUserSelect = '';
+      });
+    };
+  };
+
+  watch(
+    openRef,
+    newVal => {
+      if (newVal) {
+        nextTick(() => {
+          cleanup = initDrag();
+        });
+      } else {
+        cleanup?.();
+        cleanup = null;
+      }
+    },
+    { immediate: true }
+  );
+
+  return { initDrag };
+}
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
index 7c79d240..0f9323c2 100644
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -56,6 +56,9 @@ service.interceptors.response.use(
     if (status === 200) {
       if (response.data.code == 401) {
         message.error(response.data.msg || '请求失败');
+        setTimeout(() => {
+          router.push('/login');
+        }, 1000);
         return;
       } else if (response.data.code == 1) {
         message.error(response.data.msg);
diff --git a/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue b/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue
index a08f649c..f47acd92 100644
--- a/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue
+++ b/frontend/src/views/DataQueryMenuModule/components/conventionalHydropower/BasicData/DeleteConfirmModal.vue
@@ -40,6 +40,7 @@
 import { ref } from 'vue';
 import { message } from 'ant-design-vue';
 import { deletePowerInfo } from '@/api/DataQueryMenuModule';
+import { useDraggable } from '@/utils/drag';
 
 const props = withDefaults(
   defineProps<{
@@ -72,7 +73,8 @@ const open = (record: any, callback: Function) => {
   dataSourceVisible.value = true;
   onSuccess.value = callback;
 };
-
+useDraggable(dataSourceVisible, { boundary: true, resetOnOpen: true });
+useDraggable(confirmVisible, { boundary: true, resetOnOpen: true });
 // 修改依据确认
 const handleDataSourceConfirm = () => {
   dataSourceVisible.value = false;
diff --git a/frontend/src/views/DataQueryMenuModule/components/monitorData/FishData/index.vue b/frontend/src/views/DataQueryMenuModule/components/monitorData/FishData/index.vue
index 3b60c6b9..e4fa0b8b 100644
--- a/frontend/src/views/DataQueryMenuModule/components/monitorData/FishData/index.vue
+++ b/frontend/src/views/DataQueryMenuModule/components/monitorData/FishData/index.vue
@@ -58,6 +58,7 @@ import FishDataSearch from './FishDataSearch.vue';
 import BasicTable from '@/components/BasicTable/index.vue';
 import { getFishReleaseMonitorList } from '@/api/DataQueryMenuModule';
 import { calcTableScrollY } from '@/utils/index';
+import { useDraggable } from '@/utils/drag';
 
 const sort = ref<any>([
   {
@@ -93,7 +94,8 @@ const previewImageUrl = ref('');
 // 视频预览
 const videoPreviewVisible = ref(false);
 const previewVideoUrl = ref('');
-
+useDraggable(imagePreviewVisible, { boundary: true, resetOnOpen: true });
+useDraggable(videoPreviewVisible, { boundary: true, resetOnOpen: true });
 const openImagePreview = (url: string) => {
   previewImageUrl.value = import.meta.env.VITE_APP_ATTACHMENT_URL + '/?' + url;
   imagePreviewVisible.value = true;
diff --git a/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue b/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
index 7fc20176..db3e01d6 100644
--- a/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
+++ b/frontend/src/views/home/huanBaoSheShiYunXingZhuangKuang.vue
@@ -4,7 +4,7 @@ import RightDrawer from "@/components/RightDrawer/index.vue";
 import HuanbaoMod from "@/modules/huanbaoMod/index.vue" // 环保设施建设情况
 import Dianxingcuoshijieshao from "@/modules/dianxingcuoshijieshao/index.vue" // 环保设施建设情况
 </script>
-
+ 
 <template>
     <div class="moduleContent">
       <div class="leftContent">
diff --git a/frontend/src/views/register/index.vue b/frontend/src/views/register/index.vue
index 6a1cf445..79fccf7a 100644
--- a/frontend/src/views/register/index.vue
+++ b/frontend/src/views/register/index.vue
@@ -279,6 +279,7 @@ import {
 import { message } from 'ant-design-vue';
 import router from '@/router';
 import { encrypt } from '@/utils/rsaEncrypt';
+import { useDraggable } from '@/utils/drag';
 
 // 注册表单数据
 const registerData = reactive({
@@ -510,7 +511,7 @@ const registerRules = {
 const loading = ref(false);
 const activeTab = ref('register');
 const modalVisible = ref(false);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 // 初始化加载集团列表
 const loadGroupList = async () => {
   try {
diff --git a/frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue b/frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue
index e02073aa..d8376bae 100644
--- a/frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue
+++ b/frontend/src/views/shengTaiDiaoCha/shuiShengShengTaiDiaoCha.vue
@@ -7,12 +7,13 @@ import SSSTDCQK from '@/modules/shuiShengShengTaiDiaoCha/index.vue'; // 水生
 import AlongFishMod from '@/modules/alongFishMod/index.vue'; //沿程鱼类变化情况
 import SSSTDCDB from './shuiShengShengTaiDiaoCha/SSSTDCDB.vue';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { useDraggable } from '@/utils/drag';
 
 const JidiSelectEventStore = useJidiSelectEventStore();
 const modalVisible = ref(false);
 
 const currentItem = computed(() => JidiSelectEventStore.selectedItem);
-
+useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
 const handleOpenModal = () => {
   modalVisible.value = true;
 };
diff --git a/frontend/src/views/shiPinJianKong/components/LiveVideoBox.vue b/frontend/src/views/shiPinJianKong/components/LiveVideoBox.vue
index 269ba916..167bcfe5 100644
--- a/frontend/src/views/shiPinJianKong/components/LiveVideoBox.vue
+++ b/frontend/src/views/shiPinJianKong/components/LiveVideoBox.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { ref, onUnmounted, watch, computed, nextTick } from 'vue';
 import { CloseOutlined } from '@ant-design/icons-vue';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
@@ -279,27 +279,30 @@ const handleClose = () => {
   emit('close', props.videoData?.key);
 };
 
-// 监听视频URL变化
+// 监听视频数据变化
 watch(
-  videoUrl,
-  (newUrl, oldUrl) => {
+  () => props.videoData,
+  (newData, oldData) => {
+    const newUrl = newData?.url;
+    const oldUrl = oldData?.url;
+    
     if (newUrl && newUrl !== oldUrl) {
-      // URL 变化时延迟初始化，确保 DOM 已更新
-      setTimeout(() => initPlayer(), 200);
+      // URL 变化时重新初始化播放器
+      nextTick(() => {
+        if (player) {
+          player.dispose();
+          player = null;
+        }
+        initPlayer();
+      });
     } else if (newUrl && !oldUrl) {
       // 首次加载
-      setTimeout(() => initPlayer(), 100);
+      nextTick(() => initPlayer());
     }
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 );
 
-onMounted(() => {
-  if (videoUrl.value) {
-    initPlayer();
-  }
-});
-
 onUnmounted(() => {
   // 清理播放器
   if (player) {
diff --git a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
index 52940870..0a3c1d4f 100644
--- a/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
+++ b/frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue
@@ -226,6 +226,7 @@ import {
 import { Tag } from 'ant-design-vue'; // 确保导入 Tag
 import { getDictItemsByCode } from '@/api/dict';
 import { calcTableScrollY } from '@/utils/index';
+import { useDraggable } from '@/utils/drag';
 
 const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
 const baseUrlApi = import.meta.env.VITE_APP_BASE_API_URL;
@@ -324,7 +325,7 @@ const baseColumnsConfig: ColumnConfig[] = [
 // --- 状态定义 ---
 const visible = ref(false); // 导入预览 Modal
 const editModalRef = ref<any>(null);
-
+useDraggable(visible, { boundary: true, resetOnOpen: true });
 // 编辑相关状态
 const editModalVisible = ref(false);
 const isView = ref(false);
diff --git a/frontend/src/views/system/alertRules/components/ConfigManagement/ConfigManagementForm.vue b/frontend/src/views/system/alertRules/components/ConfigManagement/ConfigManagementForm.vue
new file mode 100644
index 00000000..4835ade9
--- /dev/null
+++ b/frontend/src/views/system/alertRules/components/ConfigManagement/ConfigManagementForm.vue
@@ -0,0 +1,784 @@
+<template>
+  <a-modal
+    :title="isEdit ? '编辑沿程配置' : '新增沿程配置'"
+    v-model:open="modalVisible"
+    :confirm-loading="localLoading"
+    width="1200px"
+    :destroy-on-close="true"
+    ok-text="保存"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      name="edit_form"
+      :labelCol="{ span: 5 }"
+    >
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="沿程配置名称" name="name">
+            <a-input
+              v-model:value="formData.name"
+              style="width: 100%"
+              placeholder="请输入沿程配置名称"
+            /> </a-form-item
+        ></a-col>
+        <a-col :span="12">
+          <a-form-item label="配置编码" name="code">
+            <a-input
+              v-model:value="formData.code"
+              style="width: 100%"
+              placeholder="请输入配置编码"
+            /> </a-form-item
+        ></a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="所在河段" name="rvnm">
+            <a-input
+              v-model:value="formData.rvnm"
+              style="width: 100%"
+              placeholder="请输入所在河段"
+            /> </a-form-item
+        ></a-col>
+        <a-col :span="12">
+          <a-form-item label="备注" name="description">
+            <a-textarea
+              :rows="4"
+              v-model:value="formData.description"
+              style="width: 100%"
+              placeholder="请输入备注"
+            /> </a-form-item
+        ></a-col>
+      </a-row>
+    </a-form>
+    <div class="config-tree-container">
+      <!-- 新增一级节点区域 -->
+      <div v-if="addingNewNode" class="add-node-row">
+        <a-select
+          v-model:value="newNodeData.stcd"
+          show-search
+          placeholder="请选择站点"
+          style="width: 300px"
+          :filter-option="filterOption"
+          @change="handleNodeSelect"
+        >
+          <a-select-option
+            v-for="item in stationList"
+            :key="item.stcd"
+            :value="item.stcd"
+          >
+            {{ item.stnm }}
+          </a-select-option>
+        </a-select>
+        <a-button
+          type="primary"
+          @click="handleSaveNewNode"
+          style="margin-left: 8px"
+        >
+          保存
+        </a-button>
+        <a-button @click="handleCancelAdd" style="margin-left: 8px">
+          <MinusOutlined />
+        </a-button>
+      </div>
+      <a-button v-else class="mb-4" type="primary" @click="handleAdd">
+        <PlusOutlined /> 新增一级节点
+      </a-button>
+
+      <!-- 树形结构 -->
+      <a-tree
+        v-if="treeData.length > 0"
+        :tree-data="treeData"
+        :default-expand-all="false"
+        :selectable="false"
+        block-node
+        style="width: 300px"
+      >
+        <template #title="{ dataRef }">
+          <!-- 编辑状态：只显示编辑区域 -->
+          <div
+            v-if="editingNode && editingNodeKey === dataRef.key"
+            class="add-child-node-row w-[300px]"
+          >
+            <a-select
+              v-model:value="editNodeData.stcd"
+              show-search
+              placeholder="请选择站点"
+              style="width: 300px"
+              :filter-option="filterOption"
+              @change="handleEditNodeSelect"
+            >
+              <a-select-option
+                v-for="item in stationList"
+                :key="item.stcd"
+                :value="item.stcd"
+              >
+                {{ item.stnm }}
+              </a-select-option>
+            </a-select>
+            <a-button
+              type="primary"
+              @click.stop="handleSaveEditNode"
+              style="margin-left: 8px"
+            >
+              保存
+            </a-button>
+            <a-button
+              @click.stop="handleCancelEditNode"
+              style="margin-left: 8px"
+            >
+              <MinusOutlined />
+            </a-button>
+          </div>
+          <!-- 非编辑状态：显示正常节点内容 -->
+          <template v-else>
+            <div class="tree-node-wrapper">
+              <span class="tree-node-title"> {{ getNodeTitle(dataRef) }} </span>
+              <div class="tree-node-actions">
+                <!-- 一级节点：支持新增子节点、编辑、排序、删除 -->
+                <template v-if="!dataRef.parentId">
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleAddChild(dataRef)"
+                    title="添加子节点"
+                  >
+                    <PlusOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleEditNode(dataRef)"
+                    title="编辑"
+                  >
+                    <EditOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleMoveUp(dataRef)"
+                    title="上移"
+                    :disabled="isFirstNode(dataRef)"
+                  >
+                    <ArrowUpOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleMoveDown(dataRef)"
+                    title="下移"
+                    :disabled="isLastNode(dataRef)"
+                  >
+                    <ArrowDownOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    danger
+                    @click.stop="handleDeleteNode(dataRef)"
+                    title="删除"
+                  >
+                    <DeleteOutlined />
+                  </a-button>
+                </template>
+                <!-- 二级节点：只支持编辑、排序、删除 -->
+                <template v-else>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleEditNode(dataRef)"
+                    title="编辑"
+                  >
+                    <EditOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleMoveUp(dataRef)"
+                    title="上移"
+                    :disabled="isFirstNode(dataRef)"
+                  >
+                    <ArrowUpOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleMoveDown(dataRef)"
+                    title="下移"
+                    :disabled="isLastNode(dataRef)"
+                  >
+                    <ArrowDownOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    danger
+                    @click.stop="handleDeleteNode(dataRef)"
+                    title="删除"
+                  >
+                    <DeleteOutlined />
+                  </a-button>
+                </template>
+              </div>
+            </div>
+            <!-- 子节点添加区域 -->
+            <div
+              v-if="addingChildNode && currentParentKey === dataRef.key"
+              class="add-child-node-row"
+            >
+              <a-select
+                v-model:value="childNodeData.stcd"
+                show-search
+                placeholder="请选择站点"
+                style="width: 300px"
+                :filter-option="filterOption"
+                @change="handleChildNodeSelect"
+              >
+                <a-select-option
+                  v-for="item in stationList"
+                  :key="item.stcd"
+                  :value="item.stcd"
+                >
+                  {{ item.stnm }}
+                </a-select-option>
+              </a-select>
+              <a-button
+                type="primary"
+                @click.stop="handleSaveChildNode"
+                style="margin-left: 8px"
+              >
+                保存
+              </a-button>
+              <a-button
+                @click.stop="handleCancelAddChild"
+                style="margin-left: 8px"
+              >
+                <MinusOutlined />
+              </a-button>
+            </div>
+          </template>
+        </template>
+      </a-tree>
+      <a-empty v-else description="暂无数据" style="margin-top: 20px" />
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, watch } from 'vue';
+import { message, Modal } from 'ant-design-vue';
+import type { Rule } from 'ant-design-vue/es/form';
+import dayjs from 'dayjs';
+import {
+  PlusOutlined,
+  MinusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined
+} from '@ant-design/icons-vue';
+
+interface Props {
+  visible: boolean;
+  initialValues?: any | null;
+  loading?: boolean;
+}
+
+const localLoading = ref(false);
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  initialValues: null,
+  loading: false
+});
+
+const modalVisible = computed({
+  get: () => props.visible,
+  set: val => emit('update:visible', val)
+});
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'cancel'): void;
+  (e: 'ok', values: any): void;
+}>();
+
+const formRef = ref();
+
+const defaultFormData = reactive({
+  id: undefined,
+  name: undefined,
+  code: undefined,
+  rvnm: undefined,
+  description: undefined
+});
+const formData: any = reactive({ ...defaultFormData });
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入沿程配置名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入配置编码', trigger: 'blur' }],
+  rvnm: [{ required: true, message: '请输入所在河段', trigger: 'blur' }]
+};
+
+const isEdit = computed(() => !!props.initialValues);
+
+// 树形数据
+const treeData = ref<any[]>([]);
+
+// 新增节点相关
+const addingNewNode = ref(false);
+const newNodeData = ref({
+  stcd: undefined,
+  stnm: '',
+  sttpName: ''
+});
+
+// 添加子节点相关
+const addingChildNode = ref(false);
+const currentParentKey = ref<string | null>(null);
+const childNodeData = ref({
+  stcd: undefined,
+  stnm: '',
+  sttpName: ''
+});
+
+// 编辑节点相关
+const editingNode = ref(false);
+const editingNodeKey = ref<string | null>(null);
+const editNodeData = ref({
+  stcd: undefined,
+  stnm: '',
+  sttpName: '',
+  originalData: null as any
+});
+
+// 站点列表（模拟数据，实际应从接口获取）
+const stationList = ref([
+  { stcd: '1', stnm: '站点A', sttpName: '类型1' },
+  { stcd: '2', stnm: '站点B', sttpName: '类型2' },
+  { stcd: '3', stnm: '站点C', sttpName: '类型1' },
+  { stcd: '4', stnm: '站点D', sttpName: '类型3' }
+]);
+
+// 生成唯一ID
+let nodeIdCounter = 0;
+const generateNodeId = () => `node_${Date.now()}_${++nodeIdCounter}`;
+
+// 获取节点标题
+const getNodeTitle = (dataRef: any) => {
+  if (!dataRef.parentId) {
+    // 一级节点：只显示 stnm
+    return dataRef.stnm || '';
+  } else {
+    // 二级节点：显示 stnm + sttpName
+    return `${dataRef.stnm || ''} ${dataRef.sttpName || ''}`;
+  }
+};
+
+// 搜索过滤
+const filterOption = (input: string, option: any) => {
+  return (
+    option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+  );
+};
+
+// 判断是否为第一个节点
+const isFirstNode = (dataRef: any) => {
+  const siblings = getSiblings(dataRef);
+  return siblings.length > 0 && siblings[0].key === dataRef.key;
+};
+
+// 判断是否为最后一个节点
+const isLastNode = (dataRef: any) => {
+  const siblings = getSiblings(dataRef);
+  return (
+    siblings.length > 0 && siblings[siblings.length - 1].key === dataRef.key
+  );
+};
+
+// 获取兄弟节点
+const getSiblings = (dataRef: any) => {
+  if (!dataRef.parentId) {
+    // 一级节点
+    return treeData.value;
+  } else {
+    // 二级节点，找到父节点的 children
+    const parent = findNodeByKey(treeData.value, dataRef.parentId);
+    return parent?.children || [];
+  }
+};
+
+// 根据 key 查找节点
+const findNodeByKey = (nodes: any[], key: string): any => {
+  for (const node of nodes) {
+    if (node.key === key) {
+      return node;
+    }
+    if (node.children && node.children.length > 0) {
+      const found = findNodeByKey(node.children, key);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+// 新增一级节点
+const handleAdd = () => {
+  addingNewNode.value = true;
+  newNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: ''
+  };
+};
+
+// 选择节点
+const handleNodeSelect = (value: string) => {
+  const station = stationList.value.find(item => item.stcd === value);
+  if (station) {
+    newNodeData.value.stnm = station.stnm;
+    newNodeData.value.sttpName = station.sttpName;
+  }
+};
+
+// 保存新增节点
+const handleSaveNewNode = () => {
+  if (!newNodeData.value.stcd) {
+    message.error('请选择站点');
+    return;
+  }
+
+  const newNode = {
+    key: generateNodeId(),
+    stcd: newNodeData.value.stcd,
+    stnm: newNodeData.value.stnm,
+    sttpName: newNodeData.value.sttpName,
+    parentId: null,
+    children: []
+  };
+
+  treeData.value.push(newNode);
+  addingNewNode.value = false;
+  message.success('添加成功');
+};
+
+// 取消新增
+const handleCancelAdd = () => {
+  addingNewNode.value = false;
+  newNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: ''
+  };
+};
+
+// 添加子节点（二级节点）
+const handleAddChild = (parentData: any) => {
+  addingChildNode.value = true;
+  currentParentKey.value = parentData.key;
+  childNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: ''
+  };
+};
+
+// 选择子节点
+const handleChildNodeSelect = (value: string) => {
+  const station = stationList.value.find(item => item.stcd === value);
+  if (station) {
+    childNodeData.value.stnm = station.stnm;
+    childNodeData.value.sttpName = station.sttpName;
+  }
+};
+
+// 保存新增子节点
+const handleSaveChildNode = () => {
+  if (!childNodeData.value.stcd) {
+    message.error('请选择站点');
+    return;
+  }
+
+  const parent = findNodeByKey(treeData.value, currentParentKey.value!);
+  if (!parent) {
+    message.error('父节点不存在');
+    return;
+  }
+
+  const newChild = {
+    key: generateNodeId(),
+    stcd: childNodeData.value.stcd,
+    stnm: childNodeData.value.stnm,
+    sttpName: childNodeData.value.sttpName,
+    parentId: parent.key,
+    children: []
+  };
+
+  if (!parent.children) {
+    parent.children = [];
+  }
+  // 在子节点列表顶部添加
+  parent.children.unshift(newChild);
+
+  addingChildNode.value = false;
+  currentParentKey.value = null;
+  message.success('添加子节点成功');
+};
+
+// 取消添加子节点
+const handleCancelAddChild = () => {
+  addingChildNode.value = false;
+  currentParentKey.value = null;
+  childNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: ''
+  };
+};
+
+// 编辑节点
+const handleEditNode = (dataRef: any) => {
+  editingNode.value = true;
+  editingNodeKey.value = dataRef.key;
+  // 保存原始数据
+  editNodeData.value = {
+    stcd: dataRef.stcd,
+    stnm: dataRef.stnm,
+    sttpName: dataRef.sttpName,
+    originalData: { ...dataRef }
+  };
+};
+
+// 选择编辑节点
+const handleEditNodeSelect = (value: string) => {
+  const station = stationList.value.find(item => item.stcd === value);
+  if (station) {
+    editNodeData.value.stnm = station.stnm;
+    editNodeData.value.sttpName = station.sttpName;
+    editNodeData.value.stcd = station.stcd;
+  }
+};
+
+// 保存编辑节点
+const handleSaveEditNode = () => {
+  if (!editNodeData.value.stcd) {
+    message.error('请选择站点');
+    return;
+  }
+
+  // 找到要编辑的节点
+  const node = findNodeByKey(treeData.value, editingNodeKey.value!);
+  if (!node) {
+    message.error('节点不存在');
+    return;
+  }
+
+  // 更新节点数据
+  node.stcd = editNodeData.value.stcd;
+  node.stnm = editNodeData.value.stnm;
+  node.sttpName = editNodeData.value.sttpName;
+
+  editingNode.value = false;
+  editingNodeKey.value = null;
+  message.success('编辑成功');
+};
+
+// 取消编辑节点
+const handleCancelEditNode = () => {
+  editingNode.value = false;
+  editingNodeKey.value = null;
+  editNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: '',
+    originalData: null
+  };
+};
+
+// 上移
+const handleMoveUp = (dataRef: any) => {
+  const siblings = getSiblings(dataRef);
+  const index = siblings.findIndex(item => item.key === dataRef.key);
+
+  if (index > 0) {
+    // 交换位置
+    [siblings[index - 1], siblings[index]] = [
+      siblings[index],
+      siblings[index - 1]
+    ];
+    message.success('上移成功');
+  }
+};
+
+// 下移
+const handleMoveDown = (dataRef: any) => {
+  const siblings = getSiblings(dataRef);
+  const index = siblings.findIndex(item => item.key === dataRef.key);
+
+  if (index < siblings.length - 1) {
+    // 交换位置
+    [siblings[index], siblings[index + 1]] = [
+      siblings[index + 1],
+      siblings[index]
+    ];
+    message.success('下移成功');
+  }
+};
+
+// 删除节点
+const handleDeleteNode = (dataRef: any) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除节点"${dataRef.stnm}"吗？`,
+    okText: '确定',
+    cancelText: '取消',
+    onOk: () => {
+      if (!dataRef.parentId) {
+        // 删除一级节点
+        const index = treeData.value.findIndex(
+          item => item.key === dataRef.key
+        );
+        if (index > -1) {
+          treeData.value.splice(index, 1);
+        }
+      } else {
+        // 删除二级节点
+        const parent = findNodeByKey(treeData.value, dataRef.parentId);
+        if (parent && parent.children) {
+          const index = parent.children.findIndex(
+            item => item.key === dataRef.key
+          );
+          if (index > -1) {
+            parent.children.splice(index, 1);
+          }
+        }
+      }
+      message.success('删除成功');
+    }
+  });
+};
+
+const handleOk = async () => {
+  try {
+    await formRef.value.validate();
+    const submitValues = {
+      ...formData,
+      captureDate: formData.captureDate
+        ? dayjs(formData.captureDate).format('YYYY-MM-DD')
+        : undefined,
+      configNodes: treeData.value // 提交树形数据
+    };
+    emit('ok', submitValues);
+  } catch (error) {
+    console.error('Validate Failed:', error);
+    message.error('请检查表单填写是否正确');
+  }
+};
+
+const initForm = () => {
+  if (props.initialValues) {
+    const values = props.initialValues;
+    Object.keys(formData).forEach(key => {
+      if (values.hasOwnProperty(key)) {
+        if (key === 'captureDate' && values[key]) {
+          formData[key] = dayjs(values[key]);
+        } else {
+          formData[key] = values[key];
+        }
+      }
+    });
+
+    // 初始化树形数据
+    if (values.configNodes && Array.isArray(values.configNodes)) {
+      treeData.value = values.configNodes.map((node: any) => ({
+        ...node,
+        children:
+          node.children?.map((child: any) => ({
+            ...child
+          })) || []
+      }));
+    } else {
+      treeData.value = [];
+    }
+  } else {
+    resetForm();
+  }
+};
+
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+  Object.assign(formData, defaultFormData);
+  treeData.value = [];
+  addingNewNode.value = false;
+};
+
+const handleCancel = () => {
+  emit('update:visible', false);
+  emit('cancel');
+  resetForm();
+};
+
+watch(
+  () => props.visible,
+  newVisible => {
+    if (newVisible) {
+      initForm();
+    }
+  },
+  { immediate: false }
+);
+
+defineExpose({
+  localLoading
+});
+</script>
+
+<style scoped lang="scss">
+.config-tree-container {
+  margin-top: 16px;
+
+  .add-node-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+}
+
+.tree-node-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-right: 8px;
+
+  .tree-node-title {
+    flex: 1;
+  }
+
+  .tree-node-actions {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+}
+
+// 确保鼠标悬停时显示操作按钮
+.tree-node-wrapper:hover {
+  .tree-node-actions {
+    opacity: 1;
+  }
+}
+
+// 子节点添加区域样式
+.add-child-node-row {
+  display: flex;
+  align-items: center;
+  padding: 8px 0 8px 24px;
+  margin-top: 4px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+</style>
diff --git a/frontend/src/views/system/alertRules/components/ConfigManagement/ConfigManagementSearch.vue b/frontend/src/views/system/alertRules/components/ConfigManagement/ConfigManagementSearch.vue
new file mode 100644
index 00000000..c10b93c8
--- /dev/null
+++ b/frontend/src/views/system/alertRules/components/ConfigManagement/ConfigManagementSearch.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="content-search">
+    <BasicSearch
+      ref="basicSearchRef"
+      :searchList="searchList"
+      :initial-values="initSearchData"
+      @reset="handleReset"
+      @finish="onSearchFinish"
+      @values-change="onValuesChange"
+    >
+      <template #actions>
+        <a-tooltip title="新增配置">
+          <a-button @click="props.handleAdd" type="primary"> 新增沿程配置 </a-button>
+        </a-tooltip>
+      </template>
+    </BasicSearch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
+import BasicSearch from "@/components/BasicSearch/index.vue";
+
+interface Props {
+  handleAdd: () => void;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "reset", values: any): void;
+  (e: "searchFinish", values: any): void;
+}>();
+
+const initSearchData = {
+  configName: "",
+};
+
+const searchData = ref<any>({ ...initSearchData });
+const searchList: any = computed(() => [
+  {
+    type: "Input",
+    name: "name",
+    label: "沿程配置名称",
+    fieldProps: {
+      allowClear: true,
+    },
+  },
+  {
+    type: "Input",
+    name: "rvnm",
+    label: "所在河段",
+    fieldProps: {
+      allowClear: true,
+    },
+  },
+]);
+
+const onSearchFinish = (values: any) => {
+  emit("searchFinish", values);
+};
+
+const onValuesChange = (changedValues: any, allValues: any) => {
+  searchData.value = { ...searchData.value, ...allValues };
+};
+
+const handleReset = () => {
+  emit("reset", initSearchData);
+};
+
+onMounted(() => {
+  emit("searchFinish", initSearchData);
+});
+</script>
+<style lang="scss"></style>
diff --git a/frontend/src/views/system/alertRules/components/ConfigManagement/index.vue b/frontend/src/views/system/alertRules/components/ConfigManagement/index.vue
new file mode 100644
index 00000000..6170d007
--- /dev/null
+++ b/frontend/src/views/system/alertRules/components/ConfigManagement/index.vue
@@ -0,0 +1,228 @@
+<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\ConfigManagement\index.vue -->
+<template>
+  <div class="content">
+    预警配置管理
+    <!-- <ConfigManagementSearch
+      ref="configManagementSearch"
+      :handle-add="handleAdd"
+      @reset="handleReset"
+      @search-finish="onSearchFinish"
+    />
+    <BasicTable
+      ref="basicTable"
+      :columns="columns"
+      :list-url="getAllConfigTree"
+      :search-params="searchParams"
+    >
+      <template #action="{ column, record }">
+        <div class="flex gap-[6px]">
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            @click="handleEdit(record)"
+            >编辑</a-button
+          >
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            danger
+            @click="handleDelete(record)"
+            >删除</a-button
+          >
+        </div>
+      </template>
+    </BasicTable>
+    <ConfigManagementForm
+      ref="configManagementForm"
+      v-model:visible="editModalVisible"
+      :initial-values="currentRecord"
+      @cancel="editModalCancel"
+      @ok="handleEditSubmit"
+    /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, onMounted } from 'vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import ConfigManagementSearch from './ConfigManagementSearch.vue';
+import ConfigManagementForm from './ConfigManagementForm.vue';
+import { message, Modal } from 'ant-design-vue';
+import {
+  getAllConfigTree,
+  deleteBaseWbsb,
+  saveBaseWbsb
+} from '@/api/system/map/ConfigManagement';
+
+// 表格实例
+const basicTable = ref<any>(null);
+// 表格列配置
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    key: 'index',
+    width: 60,
+    align: 'center',
+    customRender: ({ text, record, index }) => index + 1
+  },
+  {
+    title: '沿程配置名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150
+  },
+  {
+    title: '配置编码',
+    key: 'code',
+    dataIndex: 'code',
+    width: 120
+  },
+  {
+    title: '所在河段',
+    dataIndex: 'rvnm',
+    key: 'rvnm',
+    ellipsis: true
+  },
+  {
+    title: '创建人',
+    key: 'recordUser',
+    dataIndex: 'recordUser'
+  },
+  {
+    title: '创建时间',
+    key: 'recordTime',
+    dataIndex: 'recordTime',
+    width: 150
+  },
+  {
+    title: '更新时间',
+    key: 'modifyTime',
+    dataIndex: 'modifyTime',
+    width: 150
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    width: 360
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 120,
+    fixed: 'right',
+    slots: { customRender: 'action' }
+  }
+];
+
+// 搜索参数
+const searchParams = ref({});
+// 编辑弹窗数据
+const currentRecord = ref<any | null>(null);
+const editModalVisible = ref(false);
+
+// 新增处理
+const handleAdd = () => {
+  currentRecord.value = null;
+  editModalVisible.value = true;
+};
+
+// 编辑处理
+const handleEdit = (record: any) => {
+  currentRecord.value = { ...record };
+  editModalVisible.value = true;
+};
+
+// 删除处理
+const handleDelete = (record: any) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除选中的记录吗？',
+    zIndex: 2002,
+    onOk: async () => {
+      try {
+        let res = await deleteBaseWbsb([record.id]);
+        message.success('删除成功');
+        basicTable.value.refresh();
+      } catch (error) {
+        message.error('删除失败');
+        return;
+      }
+    }
+  });
+};
+
+// 搜索完成处理
+const onSearchFinish = (values: any) => {
+  const params = {
+    logic: 'and',
+    filters: [
+      values.parentId
+        ? {
+            field: 'parentId',
+            operator: 'eq',
+            dataType: 'string',
+            value: values.parentId
+          }
+        : null,
+      values.name
+        ? {
+            field: 'name',
+            operator: 'contains',
+            dataType: 'string',
+            value: values.name
+          }
+        : null
+    ].filter(Boolean)
+  };
+  basicTable.value.getList(params);
+};
+
+// 重置
+const handleReset = () => {
+  basicTable.value.getList({
+    logic: 'and',
+    filters: []
+  });
+};
+
+// 表单取消
+const editModalCancel = () => {
+  currentRecord.value = null;
+  editModalVisible.value = false;
+};
+
+// 表单提交
+const handleEditSubmit = async (values: any) => {
+  try {
+    let res = await saveBaseWbsb({
+      ...currentRecord.value,
+      ...values
+    });
+    message.success(`保存成功`);
+
+    editModalVisible.value = false;
+    basicTable.value.refresh();
+  } catch (error) {
+    message.error(`保存失败`);
+
+    editModalVisible.value = false;
+    return;
+  }
+};
+
+const initOption = () => {};
+onMounted(() => {
+  initOption();
+});
+</script>
+
+<style scoped lang="scss">
+.config-management {
+  height: 100%;
+  padding: 16px;
+}
+</style>
diff --git a/frontend/src/views/system/alertRules/components/RulesManagement/LayerManagementForm.vue b/frontend/src/views/system/alertRules/components/RulesManagement/LayerManagementForm.vue
new file mode 100644
index 00000000..caa405e3
--- /dev/null
+++ b/frontend/src/views/system/alertRules/components/RulesManagement/LayerManagementForm.vue
@@ -0,0 +1,260 @@
+<template>
+  <a-modal
+    :title="isEdit ? '编辑图层' : '新增图层'"
+    v-model:open="modalVisible"
+    :confirm-loading="props.loading"
+    width="600px"
+    :destroy-on-close="true"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      name="edit_form"
+      :labelCol="{ span: 5 }"
+    >
+      <a-form-item label="图层名称" name="title">
+        <a-input
+          v-model:value="formData.title"
+          style="width: 100%"
+          placeholder="请输入图层名称"
+        />
+      </a-form-item>
+      <a-form-item label="图层编码" name="code">
+        <a-input
+          v-model:value="formData.code"
+          style="width: 100%"
+          placeholder="请输入图层编码"
+        />
+      </a-form-item>
+      <a-form-item label="图层类型" name="type" v-if="isInterface">
+        <a-select
+          :options="typeOpiton"
+          v-model:value="formData.type"
+          :fieldNames="{
+            label: 'dictName',
+            value: 'itemCode'
+          }"
+          style="width: 100%"
+          placeholder="请输入图层类型"
+        />
+      </a-form-item>
+      <a-form-item label="标签显示级别" name="treeLevel" v-if="!isInterface">
+        <a-input-number
+          v-model:value="formData.treeLevel"
+          style="width: 100%"
+          placeholder="请输入标签显示级别"
+          :min="0"
+          :max="24"
+          :step="1"
+        />
+      </a-form-item>
+      <a-form-item label="锚点接口" name="url" v-if="isInterface">
+        <a-input
+          v-model:value="formData.url"
+          style="width: 100%"
+          placeholder="请输入锚点接口"
+        />
+      </a-form-item>
+      <a-form-item label="接口参数" name="anchorParamJson" v-if="isInterface">
+        <a-textarea
+          :rows="6"
+          v-model:value="formData.anchorParamJson"
+          style="width: 100%"
+          placeholder="请输入接口参数"
+        />
+      </a-form-item>
+      <a-form-item
+        label="三维接口"
+        name="urlThd"
+        v-if="isInterface && formData.type === 'geojson'"
+      >
+        <a-input
+          v-model:value="formData.urlThd"
+          style="width: 100%"
+          placeholder="请输入三维接口"
+        />
+      </a-form-item>
+      <a-form-item
+        label="gisJson"
+        name="paramJson"
+        v-if="isInterface && formData.type === 'geojson'"
+      >
+        <a-textarea
+          :rows="4"
+          v-model:value="formData.paramJson"
+          style="width: 100%"
+          placeholder="请输入gisJson"
+        />
+      </a-form-item>
+      <a-form-item
+        label="备注"
+        name="description"
+        v-if="!isInterface || formData.type === 'geojson'"
+      >
+        <a-textarea
+          :rows="4"
+          v-model:value="formData.description"
+          style="width: 100%"
+          placeholder="请输入备注"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, watch } from 'vue';
+import { message } from 'ant-design-vue';
+import type { Rule } from 'ant-design-vue/es/form';
+import { getDictItemsByCode } from '@/api/dict';
+
+// 定义 Props
+interface Props {
+  visible: boolean;
+  initialValues?: any | null;
+  loading?: boolean;
+  isInterface?: boolean;
+}
+//  加载状态
+const localLoading = ref(false);
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  initialValues: null,
+  loading: false,
+  isInterface: false
+});
+const modalVisible = computed({
+  get: () => props.visible,
+  set: val => emit('update:visible', val)
+});
+// 定义 Emits
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'cancel'): void;
+  (e: 'ok', values: any, type: string): void;
+}>();
+
+// 表单引用
+const formRef = ref();
+// 1. 新增用于存储手动验证错误信息的响应式变量
+const bodyLengthError = ref<string>('');
+const weightError = ref<string>('');
+
+// 表单数据模型
+const defaultFormData = reactive({
+  id: undefined,
+  title: undefined,
+  code: undefined,
+  type: undefined,
+  treeLevel: undefined,
+  description: undefined,
+  parentId: undefined,
+  url: undefined,
+  urlThd: undefined,
+  paramJson: undefined,
+  anchorParamJson: undefined
+});
+const typeOpiton = ref<any>([]);
+const formData: any = reactive({ ...defaultFormData });
+// 验证规则
+const rules: Record<string, Rule[]> = {
+  title: [{ required: true, message: '请输入图层名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入图层编码', trigger: 'blur' }],
+  type: [{ required: true, message: '请输入图层类型', trigger: 'change' }],
+  treeLevel: [
+    { required: true, message: '请输入标签显示级别', trigger: 'blur' }
+  ]
+};
+
+// 计算是否为编辑模式
+const isEdit = computed(() => !!props.initialValues);
+// 确认操作
+const handleOk = async () => {
+  try {
+    // 验证表单
+    await formRef.value.validate();
+    // 准备提交数据
+    const submitValues = {
+      ...formData
+    };
+    emit('ok', submitValues, 'form');
+  } catch (error) {
+    console.error('Validate Failed:', error);
+    message.error('请检查表单填写是否正确');
+  }
+};
+const initForm = () => {
+  if (props.initialValues) {
+    // --- 编辑模式：回填数据 ---
+    const values = props.initialValues;
+    if (props.isInterface) {
+      initType();
+    }
+    // 回填其他普通字段
+    Object.keys(formData).forEach(key => {
+      // 确保字段存在于 initialValues 中再赋值，避免覆盖默认值
+      if (values.hasOwnProperty(key)) {
+        formData[key] = values[key];
+      }
+    });
+  } else {
+    resetForm();
+  }
+};
+const initType = () => {
+  getDictItemsByCode({ dictCode: 'LayerTypeCode' }).then(res => {
+    typeOpiton.value = res.data;
+  });
+};
+// 重置表单
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+  Object.assign(formData, defaultFormData);
+  // 清空手动验证的错误信息
+  bodyLengthError.value = '';
+  weightError.value = '';
+};
+
+// 取消操作
+const handleCancel = () => {
+  emit('update:visible', false);
+  emit('cancel');
+  resetForm();
+};
+
+watch(
+  () => props.visible,
+  newVisible => {
+    if (newVisible) {
+      initForm();
+    }
+  },
+  { immediate: false }
+);
+
+// 监听图层类型变化，清空相关字段
+watch(
+  () => formData.type,
+  (newType, oldType) => {
+    if (oldType && newType !== oldType) {
+      // 类型切换时清空相关字段
+      formData.urlThd = undefined;
+      formData.paramJson = undefined;
+      if (oldType === 'geojson') {
+        formData.description = undefined;
+      }
+    }
+  }
+);
+// 暴露变量
+defineExpose({
+  localLoading
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/system/alertRules/components/RulesManagement/LayerManagementSearch.vue b/frontend/src/views/system/alertRules/components/RulesManagement/LayerManagementSearch.vue
new file mode 100644
index 00000000..40cb5033
--- /dev/null
+++ b/frontend/src/views/system/alertRules/components/RulesManagement/LayerManagementSearch.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="content-search">
+    <BasicSearch
+      ref="basicSearchRef"
+      :searchList="searchList"
+      :initial-values="initSearchData"
+      @reset="handleReset"
+      @finish="onSearchFinish"
+      @values-change="onValuesChange"
+    >
+      <template #actions>
+        <a-tooltip title="新增图层">
+          <a-button @click="props.handleAdd" type="primary"> 新增图层 </a-button>
+        </a-tooltip>
+      </template>
+    </BasicSearch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch } from "vue";
+import BasicSearch from "@/components/BasicSearch/index.vue"; // 确保路径正确
+
+interface Props {
+  handleAdd: (record: any) => void;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "reset", values: any): void;
+  (e: "searchFinish", values: any): void;
+}>();
+
+const initSearchData = {
+  title: "",
+};
+
+const searchData = ref<any>({ ...initSearchData });
+const searchList: any = computed(() => [
+  {
+    type: "Input",
+    name: "title",
+    label: "图层名称",
+    fieldProps: {
+      allowClear: true,
+    },
+  },
+]);
+// --- Methods ---
+
+// 2. 搜索表单逻辑
+const onSearchFinish = (values: any) => {
+  emit("searchFinish", values);
+};
+// 值改变
+const onValuesChange = (changedValues: any, allValues: any) => {
+  searchData.value = { ...searchData.value, ...allValues };
+};
+// 重置
+const handleReset = () => {
+  emit("reset", initSearchData);
+};
+
+onMounted(() => {
+  emit("searchFinish", initSearchData);
+});
+</script>
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/system/alertRules/components/RulesManagement/index.vue b/frontend/src/views/system/alertRules/components/RulesManagement/index.vue
new file mode 100644
index 00000000..9484aa57
--- /dev/null
+++ b/frontend/src/views/system/alertRules/components/RulesManagement/index.vue
@@ -0,0 +1,358 @@
+<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\LayerManagement\index.vue -->
+<template>
+  <div class="content">
+    预警规则
+    <!-- <LayerManagementSearch
+      ref="layerManagementSearch"
+      :handle-add="handleAdd"
+      @reset="handleReset"
+      @search-finish="onSearchFinish"
+    />
+    <BasicTable
+      ref="basicTable"
+      :columns="columns"
+      :list-url="getAllMapLayerTree"
+      :search-params="searchParams"
+    >
+      <template #action="{ record }">
+        <div class="flex gap-[6px]">
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            @click="handleEdit(record)"
+            >编辑</a-button
+          >
+          <a-button
+            v-if="record.children && record.children.length == 0"
+            class="!p-0"
+            type="link"
+            size="small"
+            @click="handleEditInterface(record)"
+            >编辑接口</a-button
+          >
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            @click="handleAdd(record)"
+            >新增子图层</a-button
+          >
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            danger
+            @click="handleDelete(record)"
+            >删除</a-button
+          >
+        </div>
+      </template>
+      <template #enable="{ record }">
+        <a-switch
+          :checked="record.enable === 1"
+          @change="(checked: boolean) => handleEnableChange(record, checked)"
+        />
+      </template>
+      <template #checkable="{ record }">
+        <a-switch
+          :checked="record.checkable === 1"
+          @change="(checked: boolean) => handleCheckableChange(record, checked)"
+        />
+      </template>
+    </BasicTable>
+    <LayerManagementForm
+      ref="layerManagementForm"
+      v-model:visible="editModalVisible"
+      :initial-values="currentRecord"
+      :is-interface="isInterface"
+      :loading="editLoading"
+      @cancel="editModalCancel"
+      @ok="handleEditSubmit"
+    /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import LayerManagementSearch from './LayerManagementSearch.vue';
+import LayerManagementForm from './LayerManagementForm.vue';
+import { message, Modal } from 'ant-design-vue';
+import {
+  getAllMapLayerTree,
+  saveMapLayer,
+  deleteMapLayer
+} from '@/api/system/map/LayerManagement';
+// 表格列配置
+const columns = [
+  {
+    title: '',
+    dataIndex: '',
+    key: '',
+    width: 50,
+    customRender: () => {
+      return '';
+    }
+  },
+  {
+    title: '序号',
+    key: 'index',
+    width: 60,
+    align: 'center',
+    customRender: ({ record, index }: any) => {
+      // 对于树形结构，计算当前记录在其父节点的 children 中的位置
+      // 如果没有 parentId，说明是根节点，需要计算在所有根节点中的序号
+      if (!record.parentId) {
+        // 根节点：计算在 dataSource 中是第几个根节点
+        let rootIndex = 0;
+        for (let i = 0; i < basicTable.value.tableData.length; i++) {
+          const item = basicTable.value.tableData[i];
+          // 只统计根节点（没有 parentId 的节点）
+          if (!item.parentId) {
+            rootIndex++;
+            // 找到当前记录，返回其序号
+            if (
+              item.id === record.id ||
+              (item.key === record.key && item.id === record.id)
+            ) {
+              return rootIndex;
+            }
+          }
+        }
+        return rootIndex;
+      } else {
+        // 子节点：在其父节点的 children 中查找索引
+        const findParentAndIndex = (data: any[], parentId: string): number => {
+          for (const item of data) {
+            if (item.key === parentId || item.id === parentId) {
+              // 找到父节点，在其 children 中查找当前记录的位置
+              if (item.children && item.children.length > 0) {
+                const childIndex = item.children.findIndex(
+                  (child: any) =>
+                    child.key === record.key || child.id === record.id
+                );
+                return childIndex + 1;
+              }
+            }
+            // 递归查找更深层的父节点
+            if (item.children && item.children.length > 0) {
+              const result = findParentAndIndex(item.children, parentId);
+              if (result > 0) {
+                return result;
+              }
+            }
+          }
+          return 0;
+        };
+        return findParentAndIndex(basicTable.value.tableData, record.parentId);
+      }
+    }
+  },
+  {
+    title: '图层名称',
+    dataIndex: 'title',
+    key: 'title',
+    width: 150
+  },
+  {
+    title: '图层编码',
+    dataIndex: 'code',
+    key: 'code',
+    width: 120
+  },
+  {
+    title: '标签显示级别',
+    dataIndex: 'treeLevel',
+    key: 'treeLevel',
+    width: 100
+  },
+  {
+    title: '是否启用',
+    dataIndex: 'enable',
+    key: 'enable',
+    width: 80,
+    slots: { customRender: 'enable' }
+  },
+  {
+    title: '是否可选',
+    dataIndex: 'checkable',
+    key: 'checkable',
+    width: 80,
+    slots: { customRender: 'checkable' }
+  },
+  {
+    title: '备注',
+    dataIndex: 'description',
+    key: 'description'
+  },
+  {
+    title: '创建人',
+    key: 'displayRecordUser',
+    dataIndex: 'displayRecordUser'
+  },
+  {
+    title: '创建时间',
+    key: 'recordTime',
+    dataIndex: 'recordTime',
+    width: 150
+  },
+  {
+    title: '更新时间',
+    key: 'modifyTime',
+    dataIndex: 'modifyTime',
+    width: 150
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 220,
+    fixed: 'right',
+    slots: { customRender: 'action' }
+  }
+];
+// 表格实例
+const basicTable = ref<any>(null);
+// 搜索参数
+const searchParams = ref({});
+// 编辑弹窗数据
+const isInterface = ref(false);
+const editModalVisible = ref(false);
+const editLoading = ref(false);
+const parentId = ref<string | null>(null);
+const currentRecord = ref<any | null>(null);
+// 添加处理
+const handleAdd = (record: any) => {
+  currentRecord.value = null;
+  parentId.value = record.id;
+  editModalVisible.value = true;
+};
+// 过滤掉值为 '-' 的字段
+const filterRecord = (record: any) => {
+  const filtered: any = {};
+  const keepKeys = ['code']; // 这些键始终保留
+  Object.keys(record).forEach(key => {
+    if (keepKeys.includes(key) || record[key] !== '-') {
+      filtered[key] = record[key];
+    }
+  });
+  return filtered;
+};
+
+// 编辑处理
+const handleEdit = (record: any) => {
+  console.log('handleEdit', record);
+  parentId.value = null;
+  isInterface.value = false;
+  currentRecord.value = filterRecord(record);
+  editModalVisible.value = true;
+};
+// 编辑接口处理
+const handleEditInterface = (record: any) => {
+  console.log('handleEdit', record);
+  currentRecord.value = filterRecord(record);
+  console.log('handleEdit', currentRecord.value);
+  isInterface.value = true;
+  parentId.value = null;
+  editModalVisible.value = true;
+};
+
+// 删除处理
+const handleDelete = async (record: any) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除选中的记录吗？',
+    zIndex: 2002,
+    onOk: async () => {
+      try {
+        let res = await deleteMapLayer([record.id]);
+        message.success('删除成功');
+        basicTable.value.refresh();
+      } catch (error) {
+        message.error('删除失败');
+        return;
+      }
+    }
+  });
+};
+// 搜索
+const onSearchFinish = (values: any) => {
+  searchParams.value = values;
+  nextTick(() => {
+    basicTable.value.getList();
+  });
+};
+// 重置
+const handleReset = () => {
+  searchParams.value = {};
+  nextTick(() => {
+    basicTable.value.refresh();
+  });
+};
+
+// 是否启用切换处理
+const handleEnableChange = (record: any, checked: boolean) => {
+  currentRecord.value = filterRecord(record);
+  console.log(currentRecord.value);
+  record.enable = checked ? 1 : 0;
+  handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
+};
+
+// 是否可选切换处理
+const handleCheckableChange = (record: any, checked: boolean) => {
+  currentRecord.value = filterRecord(record);
+  record.checkable = checked ? 1 : 0;
+  handleEditSubmit({ checkable: checked ? 1 : 0 }, 'switch');
+};
+// 表单
+const editModalCancel = () => {
+  isInterface.value = false;
+  parentId.value = null;
+  currentRecord.value = null;
+  editModalVisible.value = false;
+};
+const handleEditSubmit = async (values: any, type: string) => {
+  editLoading.value = true;
+  try {
+    let res = await saveMapLayer({
+      ...currentRecord.value,
+      ...values,
+      parentId: parentId.value
+    });
+    if (res.code == 0) {
+      if (type === 'switch') {
+        message.success('修改状态成功');
+      } else {
+        message.success(`保存成功`);
+      }
+      editModalVisible.value = false;
+      basicTable.value.refresh();
+    } else {
+      if (type === 'switch') {
+        message.success('修改状态成功');
+      } else {
+        message.success(`保存成功`);
+      }
+    }
+  } catch (error) {
+    if (type === 'switch') {
+      message.error('修改状态失败');
+    } else {
+      message.error(`保存失败`);
+    }
+  } finally {
+    editLoading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.ant-table-cell-with-append) {
+  display: flex;
+  width: 100%;
+}
+:deep(.ant-table-row-expand-icon) {
+  width: 17px !important;
+  margin: 0 !important;
+}
+</style>
diff --git a/frontend/src/views/system/alertRules/index.vue b/frontend/src/views/system/alertRules/index.vue
new file mode 100644
index 00000000..15401494
--- /dev/null
+++ b/frontend/src/views/system/alertRules/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="map-page">
+    <!-- Ant Design Tabs -->
+    <a-tabs v-model:activeKey="activeTab" class="map-tabs">
+      <a-tab-pane v-for="tab in tabs" :key="tab.value" :tab="tab.name">
+        <!-- 动态加载对应的组件 -->
+        <component :is="getComponent(tab.value)" />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from 'vue';
+
+// Tab 配置
+const tabs = [
+  {
+    name: '预警规则',
+    value: 'rules'
+  },
+  {
+    name: '预警配置管理',
+    value: 'config'
+  }
+];
+
+// 当前激活的 tab
+const activeTab = ref('rules');
+
+// 获取对应组件的方法
+const getComponent = (value: string) => {
+  const componentMap: Record<string, any> = {
+    rules: defineAsyncComponent(
+      () => import('./components/RulesManagement/index.vue')
+    ),
+    config: defineAsyncComponent(
+      () => import('./components/ConfigManagement/index.vue')
+    )
+  };
+
+  return componentMap[value] || null;
+};
+</script>
+
+<style scoped lang="scss">
+.map-page {
+  position: relative;
+  z-index: 900;
+  pointer-events: all;
+  width: 100%;
+  height: 100%;
+  padding-top: 2px;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  overflow: hidden;
+  .content {
+    position: relative;
+    z-index: 900;
+    pointer-events: all;
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 0 !important;
+  }
+}
+
+:deep(.ant-tabs) {
+  height: 100%; // 减去 tabs header 的高度
+  padding: 0 13px;
+}
+.map-tabs {
+  :deep(.ant-tabs-content) {
+    height: 100%; // 减去 tabs header 的高度
+    overflow: auto;
+  }
+
+  :deep(.ant-tabs-tabpane) {
+    height: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/map/components/ConfigManagement/ConfigManagementForm.vue b/frontend/src/views/system/map/components/ConfigManagement/ConfigManagementForm.vue
index 4835ade9..90b7d48a 100644
--- a/frontend/src/views/system/map/components/ConfigManagement/ConfigManagementForm.vue
+++ b/frontend/src/views/system/map/components/ConfigManagement/ConfigManagementForm.vue
@@ -26,32 +26,40 @@
             /> </a-form-item
         ></a-col>
         <a-col :span="12">
-          <a-form-item label="配置编码" name="code">
+          <a-form-item label="沿程配置编码" name="code">
             <a-input
               v-model:value="formData.code"
               style="width: 100%"
-              placeholder="请输入配置编码"
-            /> </a-form-item
-        ></a-col>
+              placeholder="请输入沿程配置编码"
+            />
+          </a-form-item>
+        </a-col>
       </a-row>
       <a-row>
         <a-col :span="12">
-          <a-form-item label="所在河段" name="rvnm">
-            <a-input
-              v-model:value="formData.rvnm"
+          <a-form-item label="所在河段" name="rvcd">
+            <a-select
+              v-model:value="formData.rvcd"
+              show-search
               style="width: 100%"
-              placeholder="请输入所在河段"
-            /> </a-form-item
-        ></a-col>
+              placeholder="请选择所在河段"
+              :options="riverOptions"
+              :filter-option="filterOption"
+              @change="handleRiverSelect"
+              :disabled="isEdit"
+            />
+          </a-form-item>
+        </a-col>
         <a-col :span="12">
-          <a-form-item label="备注" name="description">
+          <a-form-item label="备注" name="remark">
             <a-textarea
               :rows="4"
-              v-model:value="formData.description"
+              v-model:value="formData.remark"
               style="width: 100%"
               placeholder="请输入备注"
-            /> </a-form-item
-        ></a-col>
+            />
+          </a-form-item>
+        </a-col>
       </a-row>
     </a-form>
     <div class="config-tree-container">
@@ -70,7 +78,7 @@
             :key="item.stcd"
             :value="item.stcd"
           >
-            {{ item.stnm }}
+            {{ item.ennm }}
           </a-select-option>
         </a-select>
         <a-button
@@ -109,14 +117,16 @@
               placeholder="请选择站点"
               style="width: 300px"
               :filter-option="filterOption"
-              @change="handleEditNodeSelect"
+              @change="() => handleEditNodeSelect(dataRef)"
             >
               <a-select-option
-                v-for="item in stationList"
+                v-for="item in dataRef.parentId
+                  ? childStationList
+                  : stationList"
                 :key="item.stcd"
                 :value="item.stcd"
               >
-                {{ item.stnm }}
+                {{ dataRef.parentId ? item.stnm : item.ennm }}
               </a-select-option>
             </a-select>
             <a-button
@@ -238,7 +248,7 @@
                 @change="handleChildNodeSelect"
               >
                 <a-select-option
-                  v-for="item in stationList"
+                  v-for="item in childStationList"
                   :key="item.stcd"
                   :value="item.stcd"
                 >
@@ -280,18 +290,21 @@ import {
   ArrowUpOutlined,
   ArrowDownOutlined
 } from '@ant-design/icons-vue';
+import { getEngInfoDropdown, getAddvcdDropdownByRvcd } from '@/api/select';
 
 interface Props {
   visible: boolean;
   initialValues?: any | null;
   loading?: boolean;
+  riverOptions?: any[];
 }
 
 const localLoading = ref(false);
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
   initialValues: null,
-  loading: false
+  loading: false,
+  riverOptions: () => []
 });
 
 const modalVisible = computed({
@@ -311,15 +324,20 @@ const defaultFormData = reactive({
   id: undefined,
   name: undefined,
   code: undefined,
-  rvnm: undefined,
-  description: undefined
+  rvcd: undefined,
+  remark: undefined
 });
 const formData: any = reactive({ ...defaultFormData });
 
 const rules: Record<string, Rule[]> = {
   name: [{ required: true, message: '请输入沿程配置名称', trigger: 'blur' }],
   code: [{ required: true, message: '请输入配置编码', trigger: 'blur' }],
-  rvnm: [{ required: true, message: '请输入所在河段', trigger: 'blur' }]
+  rvcd: [{ required: true, message: '请选择所在河段', trigger: 'change' }]
+};
+
+const handleRiverSelect = async (value: string) => {
+  const res = await getEngInfoDropdown({ rvcd: value });
+  stationList.value = res.data || [];
 };
 
 const isEdit = computed(() => !!props.initialValues);
@@ -331,7 +349,7 @@ const treeData = ref<any[]>([]);
 const addingNewNode = ref(false);
 const newNodeData = ref({
   stcd: undefined,
-  stnm: '',
+  ennm: '',
   sttpName: ''
 });
 
@@ -340,7 +358,7 @@ const addingChildNode = ref(false);
 const currentParentKey = ref<string | null>(null);
 const childNodeData = ref({
   stcd: undefined,
-  stnm: '',
+  ennm: '',
   sttpName: ''
 });
 
@@ -349,18 +367,13 @@ const editingNode = ref(false);
 const editingNodeKey = ref<string | null>(null);
 const editNodeData = ref({
   stcd: undefined,
-  stnm: '',
+  ennm: '',
   sttpName: '',
   originalData: null as any
 });
 
-// 站点列表（模拟数据，实际应从接口获取）
-const stationList = ref([
-  { stcd: '1', stnm: '站点A', sttpName: '类型1' },
-  { stcd: '2', stnm: '站点B', sttpName: '类型2' },
-  { stcd: '3', stnm: '站点C', sttpName: '类型1' },
-  { stcd: '4', stnm: '站点D', sttpName: '类型3' }
-]);
+const stationList = ref([]);
+const childStationList = ref([]);
 
 // 生成唯一ID
 let nodeIdCounter = 0;
@@ -369,19 +382,19 @@ const generateNodeId = () => `node_${Date.now()}_${++nodeIdCounter}`;
 // 获取节点标题
 const getNodeTitle = (dataRef: any) => {
   if (!dataRef.parentId) {
-    // 一级节点：只显示 stnm
-    return dataRef.stnm || '';
+    return dataRef.ennm || '';
   } else {
-    // 二级节点：显示 stnm + sttpName
-    return `${dataRef.stnm || ''} ${dataRef.sttpName || ''}`;
+    return `${dataRef.ennm || ''} ${dataRef.sttpName || ''}`;
   }
 };
 
 // 搜索过滤
-const filterOption = (input: string, option: any) => {
-  return (
-    option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-  );
+const filterOption = (inputValue: string, option: any) => {
+  const label = option.label || option.name || '';
+  const reachcdName = option.reachcdName || '';
+  const keyword = inputValue || '';
+
+  return label.indexOf(keyword) !== -1 || reachcdName.indexOf(keyword) !== -1;
 };
 
 // 判断是否为第一个节点
@@ -426,10 +439,14 @@ const findNodeByKey = (nodes: any[], key: string): any => {
 
 // 新增一级节点
 const handleAdd = () => {
+  if (!formData.rvcd) {
+    message.warning('请先选择所在河段');
+    return;
+  }
   addingNewNode.value = true;
   newNodeData.value = {
     stcd: undefined,
-    stnm: '',
+    ennm: '',
     sttpName: ''
   };
 };
@@ -438,7 +455,7 @@ const handleAdd = () => {
 const handleNodeSelect = (value: string) => {
   const station = stationList.value.find(item => item.stcd === value);
   if (station) {
-    newNodeData.value.stnm = station.stnm;
+    newNodeData.value.ennm = station.ennm;
     newNodeData.value.sttpName = station.sttpName;
   }
 };
@@ -453,7 +470,7 @@ const handleSaveNewNode = () => {
   const newNode = {
     key: generateNodeId(),
     stcd: newNodeData.value.stcd,
-    stnm: newNodeData.value.stnm,
+    ennm: newNodeData.value.ennm,
     sttpName: newNodeData.value.sttpName,
     parentId: null,
     children: []
@@ -469,27 +486,29 @@ const handleCancelAdd = () => {
   addingNewNode.value = false;
   newNodeData.value = {
     stcd: undefined,
-    stnm: '',
+    ennm: '',
     sttpName: ''
   };
 };
 
 // 添加子节点（二级节点）
-const handleAddChild = (parentData: any) => {
+const handleAddChild = async (parentData: any) => {
   addingChildNode.value = true;
   currentParentKey.value = parentData.key;
   childNodeData.value = {
     stcd: undefined,
-    stnm: '',
+    ennm: '',
     sttpName: ''
   };
+  const res = await getAddvcdDropdownByRvcd({ stcd: parentData.stcd });
+  childStationList.value = res.data || [];
 };
 
 // 选择子节点
 const handleChildNodeSelect = (value: string) => {
-  const station = stationList.value.find(item => item.stcd === value);
+  const station = childStationList.value.find(item => item.stcd === value);
   if (station) {
-    childNodeData.value.stnm = station.stnm;
+    childNodeData.value.ennm = station.stnm;
     childNodeData.value.sttpName = station.sttpName;
   }
 };
@@ -510,7 +529,7 @@ const handleSaveChildNode = () => {
   const newChild = {
     key: generateNodeId(),
     stcd: childNodeData.value.stcd,
-    stnm: childNodeData.value.stnm,
+    ennm: childNodeData.value.ennm,
     sttpName: childNodeData.value.sttpName,
     parentId: parent.key,
     children: []
@@ -533,29 +552,38 @@ const handleCancelAddChild = () => {
   currentParentKey.value = null;
   childNodeData.value = {
     stcd: undefined,
-    stnm: '',
+    ennm: '',
     sttpName: ''
   };
 };
 
 // 编辑节点
-const handleEditNode = (dataRef: any) => {
+const handleEditNode = async (dataRef: any) => {
   editingNode.value = true;
   editingNodeKey.value = dataRef.key;
   // 保存原始数据
   editNodeData.value = {
     stcd: dataRef.stcd,
-    stnm: dataRef.stnm,
+    ennm: dataRef.ennm,
     sttpName: dataRef.sttpName,
     originalData: { ...dataRef }
   };
+  if (dataRef.parentId) {
+    const parent = findNodeByKey(treeData.value, dataRef.parentId);
+    if (parent) {
+      const res = await getAddvcdDropdownByRvcd({ stcd: parent.stcd });
+      childStationList.value = res.data || [];
+    }
+  }
 };
 
 // 选择编辑节点
-const handleEditNodeSelect = (value: string) => {
-  const station = stationList.value.find(item => item.stcd === value);
+const handleEditNodeSelect = (dataRef: any) => {
+  const value = editNodeData.value.stcd;
+  const list = dataRef.parentId ? childStationList.value : stationList.value;
+  const station = list.find(item => item.stcd === value);
   if (station) {
-    editNodeData.value.stnm = station.stnm;
+    editNodeData.value.ennm = dataRef.parentId ? station.stnm : station.ennm;
     editNodeData.value.sttpName = station.sttpName;
     editNodeData.value.stcd = station.stcd;
   }
@@ -577,7 +605,7 @@ const handleSaveEditNode = () => {
 
   // 更新节点数据
   node.stcd = editNodeData.value.stcd;
-  node.stnm = editNodeData.value.stnm;
+  node.ennm = editNodeData.value.ennm;
   node.sttpName = editNodeData.value.sttpName;
 
   editingNode.value = false;
@@ -591,7 +619,7 @@ const handleCancelEditNode = () => {
   editingNodeKey.value = null;
   editNodeData.value = {
     stcd: undefined,
-    stnm: '',
+    ennm: '',
     sttpName: '',
     originalData: null
   };
@@ -631,7 +659,7 @@ const handleMoveDown = (dataRef: any) => {
 const handleDeleteNode = (dataRef: any) => {
   Modal.confirm({
     title: '确认删除',
-    content: `确定要删除节点"${dataRef.stnm}"吗？`,
+    content: `确定要删除节点"${dataRef.ennm}"吗？`,
     okText: '确定',
     cancelText: '取消',
     onOk: () => {
@@ -677,7 +705,7 @@ const handleOk = async () => {
   }
 };
 
-const initForm = () => {
+const initForm = async () => {
   if (props.initialValues) {
     const values = props.initialValues;
     Object.keys(formData).forEach(key => {
@@ -702,6 +730,12 @@ const initForm = () => {
     } else {
       treeData.value = [];
     }
+
+    // 编辑时调用接口获取一级站点列表
+    if (formData.rvcd) {
+      const res = await getEngInfoDropdown({ rvcd: formData.rvcd });
+      stationList.value = res.data || [];
+    }
   } else {
     resetForm();
   }
diff --git a/frontend/src/views/system/map/components/ConfigManagement/ConfigManagementSearch.vue b/frontend/src/views/system/map/components/ConfigManagement/ConfigManagementSearch.vue
index c10b93c8..91cd9b3b 100644
--- a/frontend/src/views/system/map/components/ConfigManagement/ConfigManagementSearch.vue
+++ b/frontend/src/views/system/map/components/ConfigManagement/ConfigManagementSearch.vue
@@ -10,7 +10,9 @@
     >
       <template #actions>
         <a-tooltip title="新增配置">
-          <a-button @click="props.handleAdd" type="primary"> 新增沿程配置 </a-button>
+          <a-button @click="props.handleAdd" type="primary">
+            新增沿程配置
+          </a-button>
         </a-tooltip>
       </template>
     </BasicSearch>
@@ -18,46 +20,52 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from "vue";
-import BasicSearch from "@/components/BasicSearch/index.vue";
+import { ref, computed, onMounted } from 'vue';
+import BasicSearch from '@/components/BasicSearch/index.vue';
 
 interface Props {
   handleAdd: () => void;
+  riverOptions: any[];
+  riverOptionsLoad: boolean;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  (e: "reset", values: any): void;
-  (e: "searchFinish", values: any): void;
+  (e: 'reset', values: any): void;
+  (e: 'searchFinish', values: any): void;
 }>();
 
 const initSearchData = {
-  configName: "",
+  name: null,
+  rvcd: null
 };
 
 const searchData = ref<any>({ ...initSearchData });
 const searchList: any = computed(() => [
   {
-    type: "Input",
-    name: "name",
-    label: "沿程配置名称",
+    type: 'Input',
+    name: 'name',
+    label: '沿程配置名称',
     fieldProps: {
-      allowClear: true,
-    },
+      allowClear: true
+    }
   },
   {
-    type: "Input",
-    name: "rvnm",
-    label: "所在河段",
+    type: 'Select',
+    name: 'rvcd',
+    label: '所在河段',
+    width: 300,
     fieldProps: {
-      allowClear: true,
+      allowClear: true
     },
-  },
+    options: props.riverOptions,
+    loading: props.riverOptionsLoad
+  }
 ]);
 
 const onSearchFinish = (values: any) => {
-  emit("searchFinish", values);
+  emit('searchFinish', values);
 };
 
 const onValuesChange = (changedValues: any, allValues: any) => {
@@ -65,11 +73,11 @@ const onValuesChange = (changedValues: any, allValues: any) => {
 };
 
 const handleReset = () => {
-  emit("reset", initSearchData);
+  emit('reset', initSearchData);
 };
 
 onMounted(() => {
-  emit("searchFinish", initSearchData);
+  emit('searchFinish', initSearchData);
 });
 </script>
 <style lang="scss"></style>
diff --git a/frontend/src/views/system/map/components/ConfigManagement/index.vue b/frontend/src/views/system/map/components/ConfigManagement/index.vue
index 84d71955..af27d7db 100644
--- a/frontend/src/views/system/map/components/ConfigManagement/index.vue
+++ b/frontend/src/views/system/map/components/ConfigManagement/index.vue
@@ -4,6 +4,8 @@
     <ConfigManagementSearch
       ref="configManagementSearch"
       :handle-add="handleAdd"
+      :river-options="riverOptions"
+      :river-options-load="riverOptionsLoad"
       @reset="handleReset"
       @search-finish="onSearchFinish"
     />
@@ -37,6 +39,8 @@
       ref="configManagementForm"
       v-model:visible="editModalVisible"
       :initial-values="currentRecord"
+      :river-options="riverOptions"
+      :river-options-load="riverOptionsLoad"
       @cancel="editModalCancel"
       @ok="handleEditSubmit"
     />
@@ -52,8 +56,10 @@ import { message, Modal } from 'ant-design-vue';
 import {
   getAllConfigTree,
   deleteBaseWbsb,
-  saveBaseWbsb
+  saveBaseWbsbChild,
+  saveBaseWbsbChildDetail
 } from '@/api/system/map/ConfigManagement';
+import { getRvcdDropdown } from '@/api/select';
 
 // 表格实例
 const basicTable = ref<any>(null);
@@ -129,9 +135,20 @@ const handleAdd = () => {
   editModalVisible.value = true;
 };
 
+// 过滤掉值为 '-' 的字段
+const filterRecord = (record: any) => {
+  const filtered: any = {};
+  Object.keys(record).forEach(key => {
+    if (record[key] !== '-') {
+      filtered[key] = record[key];
+    }
+  });
+  return filtered;
+};
+
 // 编辑处理
 const handleEdit = (record: any) => {
-  currentRecord.value = { ...record };
+  currentRecord.value = filterRecord(record);
   editModalVisible.value = true;
 };
 
@@ -144,8 +161,12 @@ const handleDelete = (record: any) => {
     onOk: async () => {
       try {
         let res = await deleteBaseWbsb([record.id]);
-        message.success('删除成功');
-        basicTable.value.refresh();
+        if (res.code == 0) {
+          message.success('删除成功');
+          basicTable.value.refresh();
+        } else {
+          message.error('删除失败');
+        }
       } catch (error) {
         message.error('删除失败');
         return;
@@ -159,12 +180,12 @@ const onSearchFinish = (values: any) => {
   const params = {
     logic: 'and',
     filters: [
-      values.parentId
+      values.rvcd
         ? {
-            field: 'parentId',
+            field: 'rvcd',
             operator: 'eq',
             dataType: 'string',
-            value: values.parentId
+            value: values.rvcd
           }
         : null,
       values.name
@@ -197,23 +218,79 @@ const editModalCancel = () => {
 // 表单提交
 const handleEditSubmit = async (values: any) => {
   try {
-    let res = await saveBaseWbsb({
+    const formData = {
       ...currentRecord.value,
       ...values
-    });
-    message.success(`保存成功`);
+    };
+    delete formData.configNodes;
 
-    editModalVisible.value = false;
-    basicTable.value.refresh();
+    Object.keys(formData).forEach(key => {
+      if (key.includes('-')) {
+        delete formData[key];
+      }
+    });
+
+    let res = await saveBaseWbsbChild(formData);
+    if (res.code == 0) {
+      const alongId = res.data;
+      const treeData = values.configNodes || [];
+
+      if (treeData.length > 0) {
+        const formatTreeData = (
+          nodes: any[],
+          parentId: string | null = null
+        ) => {
+          return nodes.map(node => ({
+            alongId,
+            stcd: node.stcd,
+            stnm: node.ennm,
+            sttpName: node.sttpName,
+            parentId: parentId ? parentId : null,
+            children:
+              node.children && node.children.length > 0
+                ? formatTreeData(node.children, node.key)
+                : []
+          }));
+        };
+
+        const detailData = formatTreeData(treeData);
+
+        const detailRes = await saveBaseWbsbChildDetail(detailData);
+        if (detailRes.code == 0) {
+          message.success(`保存成功`);
+          editModalVisible.value = false;
+          basicTable.value.refresh();
+        } else {
+          message.error(`保存子节点失败`);
+        }
+      } else {
+        message.success(`保存成功`);
+        editModalVisible.value = false;
+        basicTable.value.refresh();
+      }
+    } else {
+      message.error(`保存失败`);
+    }
   } catch (error) {
     message.error(`保存失败`);
-
     editModalVisible.value = false;
     return;
   }
 };
-
-const initOption = () => {};
+const riverOptions = ref<any>([]);
+const riverOptionsLoad = ref(false);
+const initOption = () => {
+  const params = {};
+  riverOptionsLoad.value = true;
+  getRvcdDropdown(params).then((res: any) => {
+    res.data.forEach((item: any) => {
+      item.value = item.rvcd;
+      item.label = item.rvnm;
+    });
+    riverOptions.value = res.data || [];
+    riverOptionsLoad.value = false;
+  });
+};
 onMounted(() => {
   initOption();
 });
diff --git a/frontend/src/views/system/map/components/LayerManagement/LayerManagementForm.vue b/frontend/src/views/system/map/components/LayerManagement/LayerManagementForm.vue
index c2de4376..caa405e3 100644
--- a/frontend/src/views/system/map/components/LayerManagement/LayerManagementForm.vue
+++ b/frontend/src/views/system/map/components/LayerManagement/LayerManagementForm.vue
@@ -58,6 +58,14 @@
           placeholder="请输入锚点接口"
         />
       </a-form-item>
+      <a-form-item label="接口参数" name="anchorParamJson" v-if="isInterface">
+        <a-textarea
+          :rows="6"
+          v-model:value="formData.anchorParamJson"
+          style="width: 100%"
+          placeholder="请输入接口参数"
+        />
+      </a-form-item>
       <a-form-item
         label="三维接口"
         name="urlThd"
@@ -140,9 +148,14 @@ const defaultFormData = reactive({
   id: undefined,
   title: undefined,
   code: undefined,
+  type: undefined,
   treeLevel: undefined,
   description: undefined,
-  parentId: undefined
+  parentId: undefined,
+  url: undefined,
+  urlThd: undefined,
+  paramJson: undefined,
+  anchorParamJson: undefined
 });
 const typeOpiton = ref<any>([]);
 const formData: any = reactive({ ...defaultFormData });
diff --git a/frontend/src/views/system/map/components/LayerManagement/index.vue b/frontend/src/views/system/map/components/LayerManagement/index.vue
index 84dde167..90c923ea 100644
--- a/frontend/src/views/system/map/components/LayerManagement/index.vue
+++ b/frontend/src/views/system/map/components/LayerManagement/index.vue
@@ -13,7 +13,7 @@
       :list-url="getAllMapLayerTree"
       :search-params="searchParams"
     >
-      <template #action="{ column, record }">
+      <template #action="{ record }">
         <div class="flex gap-[6px]">
           <a-button
             class="!p-0"
@@ -47,13 +47,13 @@
           >
         </div>
       </template>
-      <template #enable="{ column, record }">
+      <template #enable="{ record }">
         <a-switch
           :checked="record.enable === 1"
           @change="(checked: boolean) => handleEnableChange(record, checked)"
         />
       </template>
-      <template #checkable="{ column, record }">
+      <template #checkable="{ record }">
         <a-switch
           :checked="record.checkable === 1"
           @change="(checked: boolean) => handleCheckableChange(record, checked)"
@@ -89,7 +89,10 @@ const columns = [
     title: '',
     dataIndex: '',
     key: '',
-    width: 50
+    width: 50,
+    customRender: () => {
+      return '';
+    }
   },
   {
     title: '序号',
@@ -226,8 +229,9 @@ const handleAdd = (record: any) => {
 // 过滤掉值为 '-' 的字段
 const filterRecord = (record: any) => {
   const filtered: any = {};
+  const keepKeys = ['code']; // 这些键始终保留
   Object.keys(record).forEach(key => {
-    if (record[key] !== '-') {
+    if (keepKeys.includes(key) || record[key] !== '-') {
       filtered[key] = record[key];
     }
   });
@@ -236,6 +240,7 @@ const filterRecord = (record: any) => {
 
 // 编辑处理
 const handleEdit = (record: any) => {
+  console.log('handleEdit', record);
   parentId.value = null;
   isInterface.value = false;
   currentRecord.value = filterRecord(record);
@@ -243,8 +248,10 @@ const handleEdit = (record: any) => {
 };
 // 编辑接口处理
 const handleEditInterface = (record: any) => {
-  isInterface.value = true;
+  console.log('handleEdit', record);
   currentRecord.value = filterRecord(record);
+  console.log('handleEdit', currentRecord.value);
+  isInterface.value = true;
   parentId.value = null;
   editModalVisible.value = true;
 };
@@ -285,6 +292,7 @@ const handleReset = () => {
 // 是否启用切换处理
 const handleEnableChange = (record: any, checked: boolean) => {
   currentRecord.value = filterRecord(record);
+  console.log(currentRecord.value);
   record.enable = checked ? 1 : 0;
   handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
 };
@@ -310,13 +318,21 @@ const handleEditSubmit = async (values: any, type: string) => {
       ...values,
       parentId: parentId.value
     });
-    if (type === 'switch') {
-      message.success('修改状态成功');
+    if (res.code == 0) {
+      if (type === 'switch') {
+        message.success('修改状态成功');
+      } else {
+        message.success(`保存成功`);
+      }
+      editModalVisible.value = false;
+      basicTable.value.refresh();
     } else {
-      message.success(`保存成功`);
+      if (type === 'switch') {
+        message.success('修改状态成功');
+      } else {
+        message.success(`保存成功`);
+      }
     }
-    editModalVisible.value = false;
-    basicTable.value.refresh();
   } catch (error) {
     if (type === 'switch') {
       message.error('修改状态失败');
diff --git a/frontend/src/views/system/map/components/LegendData/LegendDataForm.vue b/frontend/src/views/system/map/components/LegendData/LegendDataForm.vue
index 75b22876..c2014599 100644
--- a/frontend/src/views/system/map/components/LegendData/LegendDataForm.vue
+++ b/frontend/src/views/system/map/components/LegendData/LegendDataForm.vue
@@ -2,7 +2,7 @@
   <a-modal
     :title="isEdit ? '编辑图例数据' : '新增图例数据'"
     v-model:open="modalVisible"
-    :confirm-loading="localLoading"
+    :confirm-loading="confirmLoading"
     width="600px"
     :destroy-on-close="true"
     @cancel="handleCancel"
@@ -67,29 +67,32 @@
           placeholder="请输入icon编码"
         />
       </a-form-item>
-      <a-form-item label="父级图例名称" name="parentId">
-        <a-select
+      <a-form-item label="父级图例" name="parentId">
+        <a-tree-select
           v-model:value="formData.parentId"
-          :options="LegendOptions"
+          :tree-data="processedLegendOptions"
           :fieldNames="{
             label: 'name',
-            value: 'id'
+            value: 'id',
+            children: 'childrenList'
           }"
           style="width: 100%"
-          placeholder="请选择父级图例名称"
+          placeholder="请选择父级图例"
+          @select="handleParentSelect"
         />
       </a-form-item>
-      <a-form-item label="图层名称" name="layerCode">
+      <a-form-item label="图层" name="layerCode">
         <a-tree-select
           v-model:value="formData.layerCode"
-          :tree-data="LayerOptions"
+          :tree-data="processedLayerOptions"
           :fieldNames="{
             label: 'title',
             value: 'code',
             children: 'children'
           }"
           style="width: 100%"
-          placeholder="请选择图层名称"
+          placeholder="请选择图层"
+          @select="handleLayerSelect"
         />
       </a-form-item>
       <a-form-item label="二维最小缩放" name="minZoom">
@@ -163,11 +166,38 @@ const options = ref([
   { label: '锚点', value: 'pointLayer' }
 ]);
 
+const processTreeData = (data: any[], childrenKey = 'children'): any[] => {
+  if (!data || !Array.isArray(data)) return [];
+  return data.map(item => {
+    const newItem = { ...item };
+    const hasChildren = newItem[childrenKey] && newItem[childrenKey].length > 0;
+    if (hasChildren) {
+      newItem.selectable = false;
+      newItem[childrenKey] = processTreeData(newItem[childrenKey], childrenKey);
+    } else {
+      newItem.selectable = true;
+    }
+    return newItem;
+  });
+};
+
+const processedLegendOptions = computed(() => {
+  return processTreeData(props.LegendOptions || [], 'childrenList');
+});
+
+const processedLayerOptions = computed(() => {
+  return processTreeData(props.LayerOptions || [], 'children');
+});
+
 const modalVisible = computed({
   get: () => props.visible,
   set: val => emit('update:visible', val)
 });
 
+const confirmLoading = computed(() => {
+  return localLoading.value || props.loading;
+});
+
 const emit = defineEmits<{
   (e: 'update:visible', value: boolean): void;
   (e: 'cancel'): void;
@@ -207,8 +237,50 @@ const rules: Record<string, Rule[]> = {
 };
 
 const isEdit = computed(() => !!props.initialValues);
+const handleChange = (value: any) => {
+  console.log(value);
+};
+
+const checkNodeHasChildren = (
+  nodes: any[],
+  value: any,
+  childrenKey: string
+): boolean => {
+  for (const node of nodes) {
+    if (node.id === value || node.code === value) {
+      return !!(node[childrenKey] && node[childrenKey].length > 0);
+    }
+    if (node[childrenKey] && node[childrenKey].length > 0) {
+      if (checkNodeHasChildren(node[childrenKey], value, childrenKey)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+const handleParentSelect = (value: any) => {
+  if (
+    value &&
+    checkNodeHasChildren(props.LegendOptions || [], value, 'childrenList')
+  ) {
+    message.warning('请选择叶子节点，不能选择有子级的父节点');
+    formData.parentId = undefined;
+  }
+};
+
+const handleLayerSelect = (value: any) => {
+  if (
+    value &&
+    checkNodeHasChildren(props.LayerOptions || [], value, 'children')
+  ) {
+    message.warning('请选择叶子节点，不能选择有子级的父节点');
+    formData.layerCode = undefined;
+  }
+};
 
 const handleOk = async () => {
+  localLoading.value = true;
   try {
     await formRef.value.validate();
     // 过滤掉 undefined 的字段，不提交空值
@@ -262,6 +334,7 @@ const handleOk = async () => {
   } catch (error) {
     console.error('Validate Failed:', error);
     message.error('请检查表单填写是否正确');
+    localLoading.value = false;
   }
 };
 
@@ -283,6 +356,7 @@ const resetForm = () => {
     formRef.value.resetFields();
   }
   Object.assign(formData, defaultFormData);
+  localLoading.value = false;
 };
 
 const handleCancel = () => {
@@ -291,11 +365,22 @@ const handleCancel = () => {
   resetForm();
 };
 
+watch(
+  () => props.loading,
+  newLoading => {
+    if (newLoading) {
+      localLoading.value = false;
+    }
+  }
+);
+
 watch(
   () => props.visible,
   newVisible => {
     if (newVisible) {
       initForm();
+    } else {
+      localLoading.value = false;
     }
   },
   { immediate: false }
diff --git a/frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfig.vue b/frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfig.vue
index 44934f55..fd2b65e5 100644
--- a/frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfig.vue
+++ b/frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfig.vue
@@ -9,6 +9,9 @@
   >
     <div class="mb-4">
       <a-button type="primary" @click="handleAdd">新增选中配置</a-button>
+      <a-button class="ml-2" @click="handleDeleteSelected"
+        >删除选中配置</a-button
+      >
     </div>
     <a-table
       :columns="columns"
@@ -17,6 +20,7 @@
       :pagination="pagination"
       row-key="id"
       @change="handleTableChange"
+      :row-selection="{ onChange: onSelectChange }"
     >
       <template #action="{ record }">
         <div class="flex gap-[6px]">
@@ -97,17 +101,17 @@ const columns = [
     }
   },
   {
-    title: '是否默认展示',
-    dataIndex: 'enable',
-    key: 'enable',
+    title: '是否默认选中',
+    dataIndex: 'checked',
+    key: 'checked',
     width: 150,
     customRender: ({ record }: any) => {
       const text =
-        record.enable === 1 ? '是' : record.enable === 0 ? '否' : '-';
+        record.checked === 1 ? '是' : record.checked === 0 ? '否' : '-';
       const color =
-        record.enable === 1
+        record.checked === 1
           ? '#52c41a'
-          : record.enable === 0
+          : record.checked === 0
           ? '#ff4d4f'
           : '#999';
       return h('span', { style: { color } }, text);
@@ -129,6 +133,7 @@ const columns = [
 
 const tableData = ref<any[]>([]);
 const tableLoading = ref(false);
+const selectedRows = ref<any[]>([]);
 const pagination = reactive({
   current: 1,
   pageSize: 10,
@@ -155,11 +160,11 @@ const fetchTableData = async () => {
   tableLoading.value = true;
   try {
     const res = await getAllMapLegendModuleTree({
-      skip: pagination.current - 1,
+      skip: pagination.current,
       take: pagination.pageSize,
       sort: [
         {
-          field: 'orderIndex',
+          field: 'id',
           dir: 'asc'
         }
       ],
@@ -184,7 +189,10 @@ const fetchTableData = async () => {
     tableLoading.value = false;
   }
 };
-
+const onSelectChange = (row: any[]) => {
+  console.log(row);
+  selectedRows.value = row;
+};
 const handleTableChange = (pag: any) => {
   pagination.current = pag.current;
   pagination.pageSize = pag.pageSize;
@@ -199,7 +207,7 @@ const handleAdd = () => {
 
 // 编辑
 const handleEdit = (record: any) => {
-  if (record.moduleId == 'tycd') {
+  if (record.moduleId == 'common') {
     record.universal = 1;
   } else {
     record.universal = 0;
@@ -226,6 +234,28 @@ const handleDelete = (record: any) => {
     }
   });
 };
+const handleDeleteSelected = () => {
+  console.log(selectedRows.value);
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除选中的记录吗？',
+    zIndex: 2100,
+    onOk: async () => {
+      try {
+        let res = await deleteMapLegendModule(selectedRows.value);
+        if (res.code == 0) {
+          message.success('删除成功');
+          fetchTableData();
+        } else {
+          message.error('删除失败');
+        }
+      } catch (error) {
+        message.error('删除失败');
+        return;
+      }
+    }
+  });
+};
 
 // 表单取消
 const handleFormCancel = () => {
@@ -241,7 +271,7 @@ const handleFormSubmit = async (values: any) => {
     let res = await saveMapLegendModule({
       ...values,
       resId: props.legendId,
-      resType: props.legendType
+      resType: 'legend'
     });
     // 刷新表格数据
     message.success('保存成功');
diff --git a/frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfigForm.vue b/frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfigForm.vue
index bfcfc5a4..d989bd7b 100644
--- a/frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfigForm.vue
+++ b/frontend/src/views/system/map/components/LegendData/LegendDataSelectedConfigForm.vue
@@ -31,7 +31,7 @@
       >
         <a-tree-select
           v-model:value="formData.moduleId"
-          :tree-data="menuTreeData"
+          :tree-data="processedMenuTreeData"
           :field-names="{ label: 'name', value: 'id', children: 'children' }"
           tree-node-filter-prop="name"
           style="width: 100%"
@@ -39,10 +39,11 @@
           allow-clear
           show-search
           tree-default-expand-all
+          @select="handleLayerSelect"
         />
       </a-form-item>
-      <a-form-item label="是否选中" name="enable">
-        <a-radio-group v-model:value="formData.enable">
+      <a-form-item label="是否默认选中" name="checked">
+        <a-radio-group v-model:value="formData.checked">
           <a-radio :value="1">是</a-radio>
           <a-radio :value="0">否</a-radio>
         </a-radio-group>
@@ -92,11 +93,33 @@ const modalVisible = computed({
 const formRef = ref();
 const menuTreeData = ref<any[]>([]);
 
+const processTreeData = (data: any[], childrenKey = 'children'): any[] => {
+  if (!data || !Array.isArray(data)) return [];
+
+  return data.map(item => {
+    const newItem = { ...item };
+    const hasChildren = newItem[childrenKey] && newItem[childrenKey].length > 0;
+
+    if (hasChildren) {
+      newItem.selectable = false;
+      newItem[childrenKey] = processTreeData(newItem[childrenKey], childrenKey);
+    } else {
+      newItem.selectable = true;
+    }
+
+    return newItem;
+  });
+};
+
+const processedMenuTreeData = computed(() => {
+  return processTreeData(menuTreeData.value || [], 'children');
+});
+
 const defaultFormData = reactive({
   id: undefined,
   legendId: undefined,
   moduleId: undefined,
-  enable: 1,
+  checked: 1,
   orderIndex: 0,
   universal: 0
 });
@@ -108,7 +131,7 @@ const rules: Record<string, Rule[]> = {
     { required: true, message: '请选择是否通用菜单', trigger: 'change' }
   ],
   moduleId: [{ required: true, message: '请选择所属菜单', trigger: 'change' }],
-  enable: [{ required: true, message: '请选择是否选中', trigger: 'change' }],
+  checked: [{ required: true, message: '请选择是否选中', trigger: 'change' }],
   orderIndex: [{ required: true, message: '请输入排序', trigger: 'blur' }]
 };
 
@@ -133,12 +156,16 @@ const fetchMenuTree = async () => {
 const handleOk = async () => {
   try {
     await formRef.value.validate();
-    const values = { ...formData, systemId: 'qgc', systemName: 'qgc' };
+    const values = {
+      ...formData,
+      systemId: 'qgc',
+      systemName: 'qgc'
+    };
     if (values.universal === 0) {
       delete values.universal;
     } else {
       delete values.universal;
-      values.moduleId = 'tycd';
+      values.moduleId = 'common';
     }
     console.log(values);
     emit('ok', values);
@@ -148,6 +175,32 @@ const handleOk = async () => {
   }
 };
 
+const checkNodeHasChildren = (
+  nodes: any[],
+  value: any,
+  childrenKey: string
+): boolean => {
+  for (const node of nodes) {
+    if (node.id === value || node.code === value) {
+      return !!(node[childrenKey] && node[childrenKey].length > 0);
+    }
+    if (node[childrenKey] && node[childrenKey].length > 0) {
+      if (checkNodeHasChildren(node[childrenKey], value, childrenKey)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+const handleLayerSelect = (value: any) => {
+  if (
+    value &&
+    checkNodeHasChildren(menuTreeData.value || [], value, 'children')
+  ) {
+    message.warning('请选择叶子节点，不能选择有子级的父节点');
+    formData.moduleId = undefined;
+  }
+};
 const handleCancel = () => {
   emit('update:visible', false);
   emit('cancel');
diff --git a/frontend/src/views/system/map/components/LegendData/index.vue b/frontend/src/views/system/map/components/LegendData/index.vue
index fe66f383..9738c1a6 100644
--- a/frontend/src/views/system/map/components/LegendData/index.vue
+++ b/frontend/src/views/system/map/components/LegendData/index.vue
@@ -15,7 +15,7 @@
       :list-url="getAllMapLegendTree"
       :search-params="searchParams"
     >
-      <template #action="{ column, record }">
+      <template #action="{ record }">
         <div class="flex gap-[6px] justify-between">
           <a-button
             class="!p-0"
@@ -41,19 +41,19 @@
           >
         </div>
       </template>
-      <template #enable="{ column, record }">
+      <template #enable="{ record }">
         <a-switch
           :checked="record.enable === 1"
           @change="(checked: boolean) => handleEnableChange(record, checked)"
         />
       </template>
-      <template #internal="{ column, record }">
+      <template #internal="{ record }">
         <a-switch
           :checked="record.internal === 1"
           @change="(checked: boolean) => handleInternalChange(record, checked)"
         />
       </template>
-      <template #ifShow="{ column, record }">
+      <template #ifShow="{ record }">
         <a-switch
           :checked="record.ifShow === 1"
           @change="(checked: boolean) => handleIfShowChange(record, checked)"
@@ -66,6 +66,7 @@
       :LayerOptions="LayerOptions"
       v-model:visible="editModalVisible"
       :initial-values="currentRecord"
+      :loading="editLoading"
       @cancel="editModalCancel"
       @ok="handleEditSubmit"
     />
@@ -249,6 +250,7 @@ const LegendOptions = ref<any[]>([]);
 const LayerOptions = ref<any[]>([]);
 const currentRecord = ref<any | null>(null);
 const editModalVisible = ref(false);
+const editLoading = ref(false);
 const handleAdd = () => {
   currentRecord.value = null;
   ensureOptionsLoaded().then(() => {
@@ -311,8 +313,12 @@ const handleDelete = (record: any) => {
     onOk: async () => {
       try {
         let res = await deleteMapLegend([record.id]);
-        message.success('删除成功');
-        basicTable.value.refresh();
+        if (res.code == 1) {
+          message.error('删除失败');
+        } else {
+          message.success('删除成功');
+          basicTable.value.refresh();
+        }
       } catch (error) {
         message.error('删除失败');
         return;
@@ -364,7 +370,7 @@ const handleReset = () => {
     basicTable.value.getList({
       logic: 'and',
       filters: [
-        { field: 'dataType', operator: 'eq', dataType: 'string', value: '1' }
+        { field: 'dataType', operator: 'eq', dataType: 'string', value: '2' }
       ]
     });
   });
@@ -397,11 +403,16 @@ const editModalCancel = () => {
 
 // 表单提交
 const handleEditSubmit = async (values: any, type: string) => {
+  editLoading.value = true;
   try {
     let res = await saveMapLegend({
       ...currentRecord.value,
       ...values
     });
+    if (res.code == 1) {
+      message.error('保存失败');
+      return;
+    }
     if (type === 'switch') {
       message.success('修改状态成功');
     } else {
@@ -417,6 +428,8 @@ const handleEditSubmit = async (values: any, type: string) => {
     }
     editModalVisible.value = false;
     return;
+  } finally {
+    editLoading.value = false;
   }
 };
 const initOption = () => {
diff --git a/frontend/src/views/system/map/components/LegendStructure/index.vue b/frontend/src/views/system/map/components/LegendStructure/index.vue
index 18e7ee15..ed0e04f1 100644
--- a/frontend/src/views/system/map/components/LegendStructure/index.vue
+++ b/frontend/src/views/system/map/components/LegendStructure/index.vue
@@ -14,7 +14,7 @@
       :transformData="transformData"
       :list-url="getAllMapLegendTree"
     >
-      <template #action="{ column, record }">
+      <template #action="{ record }">
         <div class="flex gap-[6px]">
           <a-button
             class="!p-0"
@@ -41,19 +41,19 @@
           >
         </div>
       </template>
-      <template #enable="{ column, record }">
+      <template #enable="{ record }">
         <a-switch
           :checked="record.enable === 1"
           @change="(checked: boolean) => handleEnableChange(record, checked)"
         />
       </template>
-      <template #internal="{ column, record }">
+      <template #internal="{ record }">
         <a-switch
           :checked="record.internal === 1"
           @change="(checked: boolean) => handleInternalChange(record, checked)"
         />
       </template>
-      <template #ifShow="{ column, record }">
+      <template #ifShow="{ record }">
         <a-switch
           :checked="record.ifShow === 1"
           @change="(checked: boolean) => handleIfShowChange(record, checked)"
@@ -88,7 +88,10 @@ const columns = [
     title: '',
     dataIndex: '',
     key: '',
-    width: 50
+    width: 50,
+    customRender: () => {
+      return null;
+    }
   },
   {
     title: '序号',
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index f2a5538d..2f30d94a 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { ElForm, ElMessageBox, ElMessage } from "element-plus";
+import { ref, onMounted } from 'vue';
+import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
 import {
   getdata,
   addmenu,
@@ -8,20 +8,20 @@ import {
   deltmenu,
   moveOrderno,
   uploadIcon,
-  moveIcon,
-} from "@/api/menu";
-import Sortable from "sortablejs";
+  moveIcon
+} from '@/api/menu';
+import Sortable from 'sortablejs';
 //定义表格数据
 const url = import.meta.env.VITE_APP_BASE_API;
 const tableData: any = ref([]);
 function gteTabledata() {
   const params = {
     systemcode: systemcode.value,
-    name: "",
+    name: ''
   };
   loading.value = true;
   getdata(params)
-    .then((res) => {
+    .then(res => {
       tableData.value = res;
       loading.value = false;
     })
@@ -34,54 +34,54 @@ const menuInfoRef = ref();
 const btnInfoRef = ref();
 const loading = ref(false);
 //定义tabbar
-const systemcode = ref("1");
-const activeIndex = ref("1");
+const systemcode = ref('1');
+const activeIndex = ref('1');
 function handleSelect(key: string) {
-  if (key == "1") {
-    systemcode.value = "1";
-  } else if (key == "2") {
-    systemcode.value = "2";
-  } else if (key == "3") {
-    systemcode.value = "3";
+  if (key == '1') {
+    systemcode.value = '1';
+  } else if (key == '2') {
+    systemcode.value = '2';
+  } else if (key == '3') {
+    systemcode.value = '3';
   }
   gteTabledata();
 }
 //定义搜索框文本
-const menuname = ref("");
+const menuname = ref('');
 //点击搜索
 function search() {
-  menuname.value = menuname.value.replace(/\s+/g, "");
+  menuname.value = menuname.value.replace(/\s+/g, '');
   let params = {
     systemcode: systemcode.value,
     name: menuname.value,
-    isdisplay: "",
+    isdisplay: ''
   };
-  getdata(params).then((res) => {
+  getdata(params).then(res => {
     tableData.value = res;
   });
 }
 //目录添加
-const title = ref("");
+const title = ref('');
 const expertInfo: any = ref({
-  name: "",
-  type: "0",
-  opturl: "",
-  permission: "",
+  name: '',
+  type: '0',
+  opturl: '',
+  permission: '',
   isdisplay: true,
-  systemcode: "",
-  icon: "",
-  code: "",
+  systemcode: '',
+  icon: '',
+  code: ''
 });
 const dialogVisible = ref(false);
 function addClick() {
-  title.value = "新增目录";
+  title.value = '新增目录';
   const orgnamemage = ref({
-    name: "",
-    type: "3",
-    opturl: "",
-    permission: "",
+    name: '',
+    type: '3',
+    opturl: '',
+    permission: '',
     orderno: 1,
-    isdisplay: "1",
+    isdisplay: '1'
   });
   expertInfo.value = orgnamemage.value;
   dialogVisible.value = true;
@@ -97,35 +97,37 @@ function handleClose() {
 }
 //表格规则定义
 const rules = ref({
-  name: [{ required: true, message: "请输入目录名称", trigger: "blur" }],
-  opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }],
-  permission: [{ required: true, message: "请输入目录权限标识", trigger: "blur" }],
+  name: [{ required: true, message: '请输入目录名称', trigger: 'blur' }],
+  opturl: [{ required: true, message: '请输入操作URL', trigger: 'blur' }],
+  permission: [
+    { required: true, message: '请输入目录权限标识', trigger: 'blur' }
+  ]
 });
 //添加子目录
-const parentID = ref("");
+const parentID = ref('');
 function addchilder(row: any) {
-  title.value = "新增子目录";
+  title.value = '新增子目录';
 
   const orgnamemage = ref({
-    name: "",
-    type: "3",
-    opturl: "",
-    permission: "",
+    name: '',
+    type: '3',
+    opturl: '',
+    permission: '',
     orderno: 1,
-    isdisplay: "1",
+    isdisplay: '1'
   });
   parentID.value = row.id;
   expertInfo.value = orgnamemage.value;
   dialogVisible.value = true;
-  iconall.value = "";
+  iconall.value = '';
   getid.value = row.id;
 }
 //新增目录-确认按钮
 function expertsubmit() {
-  if (expertInfo.value.name == "") {
+  if (expertInfo.value.name == '') {
     ElMessage({
-      message: "请填写目录名称",
-      type: "error",
+      message: '请填写目录名称',
+      type: 'error'
     });
     return false;
   }
@@ -133,116 +135,120 @@ function expertsubmit() {
     let params = {
       name: expertInfo.value.name,
       systemcode: systemcode.value,
-      type: "0",
-      parentid: "0",
+      type: '0',
+      parentid: '0',
       id: expertInfo.value.id,
       icon: iconall.value,
       opturl: expertInfo.value.opturl,
-      isdisplay: expertInfo.value.isdisplay,
+      isdisplay: expertInfo.value.isdisplay
     };
     editmenu(params).then(() => {
       gteTabledata();
       dialogVisible.value = false;
       ElMessage({
-        message: "修改成功",
-        type: "success",
+        message: '修改成功',
+        type: 'success'
       });
     });
-  } else if (title.value == "新增子目录") {
+  } else if (title.value == '新增子目录') {
     let params = {
       name: expertInfo.value.name,
       systemcode: systemcode.value,
-      type: "0",
+      type: '0',
       opturl: expertInfo.value.opturl,
       isdisplay: expertInfo.value.isdisplay,
       parentid: parentID.value,
-      icon: iconall.value,
+      icon: iconall.value
     };
     addmenu(params).then(() => {
       gteTabledata();
       dialogVisible.value = false;
       ElMessage({
-        message: "新建成功",
-        type: "success",
+        message: '新建成功',
+        type: 'success'
       });
     });
   } else {
     let params = {
       name: expertInfo.value.name,
       systemcode: systemcode.value,
-      type: "0",
+      type: '0',
       opturl: expertInfo.value.opturl,
       isdisplay: expertInfo.value.isdisplay,
-      parentid: "0",
+      parentid: '0',
       id: expertInfo.value.id,
-      icon: iconall.value,
+      icon: iconall.value
     };
     addmenu(params).then(() => {
       gteTabledata();
       dialogVisible.value = false;
       ElMessage({
-        message: "新建成功",
-        type: "success",
+        message: '新建成功',
+        type: 'success'
       });
     });
   }
 }
 //菜单目录
 const menurules = ref({
-  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
-  opturl: [{ required: true, message: "请输入操作URL", trigger: "blur" }],
-  permission: [{ required: true, message: "请输入菜单权限标识", trigger: "blur" }],
+  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+  opturl: [{ required: true, message: '请输入操作URL', trigger: 'blur' }],
+  permission: [
+    { required: true, message: '请输入菜单权限标识', trigger: 'blur' }
+  ]
 });
 const menuVisible = ref(false);
-const menutitle = ref("");
+const menutitle = ref('');
 //定义按钮弹窗数据
 const btnInfo: any = ref({
-  name: " ",
-  orderno: " ",
-  islink: " ",
-  opturl: " ",
-  permission: " ",
-  isdisplay: " ",
-  icon: "",
+  name: ' ',
+  orderno: ' ',
+  islink: ' ',
+  opturl: ' ',
+  permission: ' ',
+  isdisplay: ' ',
+  icon: ''
 });
 const btnVisible = ref(false);
 const btnrules = ref({
-  name: [{ required: true, message: "请输入按钮名称", trigger: "blur" }],
-  permission: [{ required: true, message: "请输入按钮权限标识", trigger: "blur" }],
+  name: [{ required: true, message: '请输入按钮名称', trigger: 'blur' }],
+  permission: [
+    { required: true, message: '请输入按钮权限标识', trigger: 'blur' }
+  ]
 });
 //定义菜单弹窗数据
 const menuInfo: any = ref({
-  name: "",
-  orderno: "",
-  islink: "",
-  opturl: "",
-  permission: "",
-  isdisplay: "",
-  icon: "",
+  name: '',
+  orderno: '',
+  islink: '',
+  opturl: '',
+  permission: '',
+  isdisplay: '',
+  icon: ''
 });
 //修改目录
-const btntitle = ref("");
-const getid = ref("");
-const allId = ref("");
+const btntitle = ref('');
+const getid = ref('');
+const allId = ref('');
 function handleEdit(row: any) {
   iconall.value = row.icon;
   const Row = JSON.parse(JSON.stringify(row));
   getid.value = row.id;
   btnparentid.value = row.parentid;
-  if (row.type == "2") {
-    btntitle.value = "修改按钮";
+  if (row.type == '2') {
+    btntitle.value = '修改按钮';
     let newInfo = ref({});
     newInfo.value = Row;
     btnInfo.value = newInfo.value;
     btnVisible.value = true;
-  } else if (row.type == "1") {
-    menutitle.value = "修改菜单";
+  } else if (row.type == '1') {
+    menutitle.value = '修改菜单';
     let newInfo = ref({});
     newInfo.value = Row;
     menuInfo.value = newInfo.value;
     menuVisible.value = true;
   } else {
-    title.value = "修改目录";
+    title.value = '修改目录';
     let newInfo = ref({});
     newInfo.value = Row;
     expertInfo.value = newInfo.value;
@@ -250,39 +256,39 @@ function handleEdit(row: any) {
   }
 }
 //新增菜单
-const btnparentid = ref("");
+const btnparentid = ref('');
 function menuclick(row: any) {
   if (row.id == undefined) {
-    btnparentid.value = "0";
+    btnparentid.value = '0';
   } else {
     btnparentid.value = row.id;
   }
-  menutitle.value = "添加菜单";
+  menutitle.value = '添加菜单';
   (menuInfo.value = {
-    name: "",
-    type: "1",
-    islink: "0",
-    opturl: "",
-    permission: "",
+    name: '',
+    type: '1',
+    islink: '0',
+    opturl: '',
+    permission: '',
     orderno: 1,
-    isdisplay: "1",
+    isdisplay: '1'
   }),
     (menuVisible.value = true);
-  iconall.value = "";
+  iconall.value = '';
   getid.value = row.id;
 }
 //添加按钮
 function btnclick(row: any) {
   getid.value = row.id;
-  btntitle.value = "添加按钮";
+  btntitle.value = '添加按钮';
   (btnInfo.value = {
-    name: "",
-    type: "2",
-    islink: "0",
-    opturl: "",
-    permission: "",
+    name: '',
+    type: '2',
+    islink: '0',
+    opturl: '',
+    permission: '',
     orderno: 1,
-    isdisplay: "1",
+    isdisplay: '1'
   }),
     (btnVisible.value = true);
   btnparentid.value = row.id;
@@ -290,36 +296,36 @@ function btnclick(row: any) {
 //删除
 function handleDelete(row: any) {
   const message = ref();
-  if (row.type == "0") {
-    message.value = "确定删除此目录及此目录下的所有菜单吗？";
-  } else if (row.type == "1") {
-    message.value = "确定删除此菜单及此菜单下的所有按钮吗？";
-  } else if (row.type == "2") {
-    message.value = "确定删除此按钮吗？";
+  if (row.type == '0') {
+    message.value = '确定删除此目录及此目录下的所有菜单吗？';
+  } else if (row.type == '1') {
+    message.value = '确定删除此菜单及此菜单下的所有按钮吗？';
+  } else if (row.type == '2') {
+    message.value = '确定删除此按钮吗？';
   }
-  ElMessageBox.confirm(message.value, "删除提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
+  ElMessageBox.confirm(message.value, '删除提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
   }).then(() => {
     const params = {
-      id: row.id,
+      id: row.id
     };
     deltmenu(params).then(() => {
       gteTabledata();
       ElMessage({
-        message: "删除成功",
-        type: "success",
+        message: '删除成功',
+        type: 'success'
       });
     });
   });
 }
 //菜单目录-确定
 function menusubmit() {
-  if (menuInfo.value.name == "") {
+  if (menuInfo.value.name == '') {
     ElMessage({
-      message: "请填写菜单名称",
-      type: "error",
+      message: '请填写菜单名称',
+      type: 'error'
     });
     return false;
   }
@@ -327,41 +333,41 @@ function menusubmit() {
     let params = {
       name: menuInfo.value.name,
       systemcode: systemcode.value,
-      type: "1",
+      type: '1',
       opturl: menuInfo.value.opturl,
       permission: menuInfo.value.permission,
       islink: menuInfo.value.islink,
       isdisplay: menuInfo.value.isdisplay,
       // parentid: '',
       id: getid.value,
-      icon: iconall.value,
+      icon: iconall.value
     };
     editmenu(params).then(() => {
       gteTabledata();
       menuVisible.value = false;
       ElMessage({
-        message: "修改成功",
-        type: "success",
+        message: '修改成功',
+        type: 'success'
       });
     });
   } else {
     let params = {
       name: menuInfo.value.name,
       systemcode: systemcode.value,
-      type: "1",
+      type: '1',
       opturl: menuInfo.value.opturl,
       islink: menuInfo.value.islink,
       isdisplay: menuInfo.value.isdisplay,
       parentid: btnparentid.value,
       id: expertInfo.value.id,
-      icon: iconall.value,
+      icon: iconall.value
     };
     addmenu(params).then(() => {
       gteTabledata();
       menuVisible.value = false;
       ElMessage({
-        message: "新建成功",
-        type: "success",
+        message: '新建成功',
+        type: 'success'
       });
     });
   }
@@ -369,10 +375,10 @@ function menusubmit() {
 //按钮目录-确定
 
 function btnsubmit() {
-  if (btnInfo.value.name == "" || btnInfo.value.permission == "") {
+  if (btnInfo.value.name == '' || btnInfo.value.permission == '') {
     ElMessage({
-      message: "请填写按钮名称和权限标识",
-      type: "error",
+      message: '请填写按钮名称和权限标识',
+      type: 'error'
     });
     return false;
   }
@@ -381,19 +387,19 @@ function btnsubmit() {
       code: btnInfo.value.code,
       name: btnInfo.value.name,
       systemcode: systemcode.value,
-      type: "2",
+      type: '2',
       opturl: btnInfo.value.opturl,
       permission: btnInfo.value.permission,
       islink: btnInfo.value.islink,
       // isdisplay: btnInfo.value.isdisplay,
-      id: getid.value,
+      id: getid.value
     };
     editmenu(params).then(() => {
       gteTabledata();
       dialogVisible.value = false;
       ElMessage({
-        message: "修改成功",
-        type: "success",
+        message: '修改成功',
+        type: 'success'
       });
       btnVisible.value = false;
     });
@@ -401,19 +407,19 @@ function btnsubmit() {
     let params = {
       name: btnInfo.value.name,
       systemcode: systemcode.value,
-      type: "2",
+      type: '2',
       opturl: btnInfo.value.opturl,
       permission: btnInfo.value.permission,
       islink: btnInfo.value.islink,
       isdisplay: btnInfo.value.isdisplay,
-      parentid: btnparentid.value,
+      parentid: btnparentid.value
     };
     addmenu(params).then(() => {
       gteTabledata();
       dialogVisible.value = false;
       ElMessage({
-        message: "新建成功",
-        type: "success",
+        message: '新建成功',
+        type: 'success'
       });
       btnVisible.value = false;
     });
@@ -425,70 +431,88 @@ function dateFormat(row: any) {
     var date = new Date(daterc);
     var year = date.getFullYear();
     var month =
-      date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
-    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
-    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
-    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
-    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      date.getMonth() + 1 < 10
+        ? '0' + (date.getMonth() + 1)
+        : date.getMonth() + 1;
+    date.getMonth() + 1 < 10
+      ? '0' + (date.getMonth() + 1)
+      : date.getMonth() + 1;
+    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+    var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+    var minutes =
+      date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+    var seconds =
+      date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
     // 拼接
-    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
+    return (
+      year +
+      '-' +
+      month +
+      '-' +
+      day +
+      ' ' +
+      hours +
+      ':' +
+      minutes +
+      ':' +
+      seconds
+    );
   }
 }
 //上传图标
 function fileClick(val: any) {
   allId.value = val;
-  const avatar = document.getElementById("avatar");
+  const avatar = document.getElementById('avatar');
   avatar?.click();
 }
-const iconall = ref("");
+const iconall = ref('');
 function changeFile(e: any) {
   const files = new FormData();
-  files.append("icon", e.target.files[0]);
-  files.append("menuId", allId.value);
+  files.append('icon', e.target.files[0]);
+  files.append('menuId', allId.value);
   uploadIcon(files)
-    .then((res) => {
+    .then(res => {
       iconall.value = res.data;
       gteTabledata();
       ElMessage({
-        type: "success",
-        message: "上传成功",
+        type: 'success',
+        message: '上传成功'
       });
       // location.reload()
-      var file: any = document.getElementById("avatar");
-      file.value = "";
+      var file: any = document.getElementById('avatar');
+      file.value = '';
     })
     .catch(() => {
       ElMessage({
-        type: "error",
-        message: "上传失败",
+        type: 'error',
+        message: '上传失败'
       });
-      var file: any = document.getElementById("avatar");
-      file.value = "";
+      var file: any = document.getElementById('avatar');
+      file.value = '';
     });
 }
 //图标删除事件
 function delectIcon(id: any) {
-  ElMessageBox.confirm("确定删除此图标吗？", "删除提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
+  ElMessageBox.confirm('确定删除此图标吗？', '删除提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
   }).then(() => {
     const params = {
-      id: id,
+      id: id
     };
     moveIcon(params).then(() => {
-      iconall.value = "";
+      iconall.value = '';
       gteTabledata();
       ElMessage({
-        type: "success",
-        message: "删除成功",
+        type: 'success',
+        message: '删除成功'
       });
     });
   });
 }
 // Icon选择器显示状态
-function treeToTile(treeData: any, childKey = "children") {
+function treeToTile(treeData: any, childKey = 'children') {
   const arr = [] as any[];
   const expanded = (data: any) => {
     if (data && data.length > 0) {
@@ -505,9 +529,11 @@ function treeToTile(treeData: any, childKey = "children") {
 }
 const activeRows: any = ref([]);
 function rowDrop() {
-  const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");
+  const tbody = document.querySelector(
+    '.draggable .el-table__body-wrapper tbody'
+  );
   Sortable.create(tbody, {
-    draggable: ".draggable .el-table__row",
+    draggable: '.draggable .el-table__row',
     onMove: () => {
       activeRows.value = treeToTile(tableData.value); // 把树形的结构转为列表再进行拖拽
     },
@@ -517,8 +543,8 @@ function rowDrop() {
 
       if (oldRow.type != newRow.type) {
         ElMessage({
-          message: "拖拽同级目录排序",
-          type: "warning",
+          message: '拖拽同级目录排序',
+          type: 'warning'
         });
         tableData.value = [];
         gteTabledata();
@@ -526,22 +552,22 @@ function rowDrop() {
       }
       const params = {
         fromId: oldRow.id,
-        toId: newRow.id,
+        toId: newRow.id
       };
       moveOrderno(params).then((res: any) => {
         if (res.code == 1) {
           tableData.value = [];
           gteTabledata();
           ElMessage({
-            type: "error",
-            message: "修改失败",
+            type: 'error',
+            message: '修改失败'
           });
         } else {
           tableData.value = [];
           gteTabledata();
         }
       });
-    },
+    }
   });
 }
 onMounted(() => {
@@ -612,10 +638,15 @@ onMounted(() => {
           :header-cell-style="{
             background: 'rgb(250 250 250)',
             color: '#383838',
-            height: '50px',
+            height: '50px'
           }"
         >
-          <el-table-column label="菜单标题" width="250" prop="name" show-overflow-tooltip>
+          <el-table-column
+            label="菜单标题"
+            width="250"
+            prop="name"
+            show-overflow-tooltip
+          >
             <template #default="scope">
               <div style="position: absolute; left: 15px">
                 <img src="@/assets/MenuIcon/lbcz_td.png" alt="" />
@@ -623,7 +654,12 @@ onMounted(() => {
               <div style="margin-left: 20px">{{ scope.row.name }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="菜单类型" width="100" align="center" prop="type">
+          <el-table-column
+            label="菜单类型"
+            width="100"
+            align="center"
+            prop="type"
+          >
             <template #default="scope">
               <span v-if="scope.row.type == '2'">按钮</span>
               <span v-else-if="scope.row.type == '1'">菜单</span>
@@ -636,14 +672,19 @@ onMounted(() => {
             width="100"
             show-overflow-tooltip
           />
-          <el-table-column label="系统类型" width="120" prop="systemcode" align="center">
+          <el-table-column
+            label="系统类型"
+            width="120"
+            prop="systemcode"
+            align="center"
+          >
             <template #default="scope">
               <span v-if="scope.row.systemcode == '1'">Web端</span>
               <span v-else-if="scope.row.systemcode == '2'">手机App</span>
               <span v-else>Pad端</span>
             </template>
           </el-table-column>
-          <el-table-column label="图标" width="100" prop="icon" align="center">
+          <!-- <el-table-column label="图标" width="100" prop="icon" align="center">
             <template #default="scope">
               <div
                 v-if="scope.row.type !== '2'"
@@ -702,11 +743,16 @@ onMounted(() => {
                     @change="changeFile"
                   />
                 </div>
-                <!-- <img :src="url + '/menu/' + scope.row.icon" alt=""> -->
+                 <img :src="url + '/menu/' + scope.row.icon" alt=""> 
               </div>
             </template>
-          </el-table-column>
-          <el-table-column label="是否外链" width="100" prop="islink" align="center">
+          </el-table-column> -->
+          <el-table-column
+            label="是否外链"
+            width="100"
+            prop="islink"
+            align="center"
+          >
             <template #default="scope">
               <span v-if="scope.row.islink == '1'">是</span>
               <span v-else>否</span>
@@ -729,7 +775,12 @@ onMounted(() => {
             prop="permission"
             show-overflow-tooltip
           />
-          <el-table-column label="是否显示" width="100" prop="isdisplay" align="center">
+          <el-table-column
+            label="是否显示"
+            width="100"
+            prop="isdisplay"
+            align="center"
+          >
             <template #default="scope">
               <span v-if="scope.row.isdisplay == '1'">是</span>
               <span v-else>否</span>
@@ -740,7 +791,11 @@ onMounted(() => {
             label="最近修改者"
             width="120"
           ></el-table-column>
-          <el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
+          <el-table-column
+            prop="lastmodifydate"
+            label="最近修改日期"
+            width="170"
+          >
             <template #default="scope">
               {{ dateFormat(scope.row.lastmodifydate) }}
             </template>
@@ -863,7 +918,12 @@ onMounted(() => {
       width="620px"
       class="dialogClass"
     >
-      <el-form ref="expertInfoRef" :model="expertInfo" :rules="rules" label-width="90px">
+      <el-form
+        ref="expertInfoRef"
+        :model="expertInfo"
+        :rules="rules"
+        label-width="90px"
+      >
         <el-form-item label="目录编号" prop="name">
           <el-input
             v-model="expertInfo.code"
@@ -910,7 +970,12 @@ onMounted(() => {
       width="620px"
       class="dialogClass"
     >
-      <el-form ref="menuInfoRef" :model="menuInfo" :rules="menurules" label-width="90px">
+      <el-form
+        ref="menuInfoRef"
+        :model="menuInfo"
+        :rules="menurules"
+        label-width="90px"
+      >
         <el-form-item label="菜单编号">
           <el-input
             v-model="menuInfo.code"
@@ -920,7 +985,11 @@ onMounted(() => {
           ></el-input>
         </el-form-item>
         <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="menuInfo.name" placeholder="" style="width: 100%"></el-input>
+          <el-input
+            v-model="menuInfo.name"
+            placeholder=""
+            style="width: 100%"
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="是否外链" prop="islink">
@@ -967,7 +1036,12 @@ onMounted(() => {
       class="dialogClass"
       draggable
     >
-      <el-form ref="btnInfoRef" :model="btnInfo" :rules="btnrules" label-width="90px">
+      <el-form
+        ref="btnInfoRef"
+        :model="btnInfo"
+        :rules="btnrules"
+        label-width="90px"
+      >
         <el-form-item label="按钮编号">
           <el-input
             v-model="btnInfo.code"
@@ -977,7 +1051,11 @@ onMounted(() => {
           ></el-input>
         </el-form-item>
         <el-form-item label="按钮名称" prop="name">
-          <el-input v-model="btnInfo.name" placeholder="" style="width: 100%"></el-input>
+          <el-input
+            v-model="btnInfo.name"
+            placeholder=""
+            style="width: 100%"
+          ></el-input>
         </el-form-item>
         <el-form-item label="权限标识" prop="permission">
           <el-input
diff --git a/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementForm.vue b/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementForm.vue
new file mode 100644
index 00000000..4835ade9
--- /dev/null
+++ b/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementForm.vue
@@ -0,0 +1,784 @@
+<template>
+  <a-modal
+    :title="isEdit ? '编辑沿程配置' : '新增沿程配置'"
+    v-model:open="modalVisible"
+    :confirm-loading="localLoading"
+    width="1200px"
+    :destroy-on-close="true"
+    ok-text="保存"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      name="edit_form"
+      :labelCol="{ span: 5 }"
+    >
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="沿程配置名称" name="name">
+            <a-input
+              v-model:value="formData.name"
+              style="width: 100%"
+              placeholder="请输入沿程配置名称"
+            /> </a-form-item
+        ></a-col>
+        <a-col :span="12">
+          <a-form-item label="配置编码" name="code">
+            <a-input
+              v-model:value="formData.code"
+              style="width: 100%"
+              placeholder="请输入配置编码"
+            /> </a-form-item
+        ></a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="所在河段" name="rvnm">
+            <a-input
+              v-model:value="formData.rvnm"
+              style="width: 100%"
+              placeholder="请输入所在河段"
+            /> </a-form-item
+        ></a-col>
+        <a-col :span="12">
+          <a-form-item label="备注" name="description">
+            <a-textarea
+              :rows="4"
+              v-model:value="formData.description"
+              style="width: 100%"
+              placeholder="请输入备注"
+            /> </a-form-item
+        ></a-col>
+      </a-row>
+    </a-form>
+    <div class="config-tree-container">
+      <!-- 新增一级节点区域 -->
+      <div v-if="addingNewNode" class="add-node-row">
+        <a-select
+          v-model:value="newNodeData.stcd"
+          show-search
+          placeholder="请选择站点"
+          style="width: 300px"
+          :filter-option="filterOption"
+          @change="handleNodeSelect"
+        >
+          <a-select-option
+            v-for="item in stationList"
+            :key="item.stcd"
+            :value="item.stcd"
+          >
+            {{ item.stnm }}
+          </a-select-option>
+        </a-select>
+        <a-button
+          type="primary"
+          @click="handleSaveNewNode"
+          style="margin-left: 8px"
+        >
+          保存
+        </a-button>
+        <a-button @click="handleCancelAdd" style="margin-left: 8px">
+          <MinusOutlined />
+        </a-button>
+      </div>
+      <a-button v-else class="mb-4" type="primary" @click="handleAdd">
+        <PlusOutlined /> 新增一级节点
+      </a-button>
+
+      <!-- 树形结构 -->
+      <a-tree
+        v-if="treeData.length > 0"
+        :tree-data="treeData"
+        :default-expand-all="false"
+        :selectable="false"
+        block-node
+        style="width: 300px"
+      >
+        <template #title="{ dataRef }">
+          <!-- 编辑状态：只显示编辑区域 -->
+          <div
+            v-if="editingNode && editingNodeKey === dataRef.key"
+            class="add-child-node-row w-[300px]"
+          >
+            <a-select
+              v-model:value="editNodeData.stcd"
+              show-search
+              placeholder="请选择站点"
+              style="width: 300px"
+              :filter-option="filterOption"
+              @change="handleEditNodeSelect"
+            >
+              <a-select-option
+                v-for="item in stationList"
+                :key="item.stcd"
+                :value="item.stcd"
+              >
+                {{ item.stnm }}
+              </a-select-option>
+            </a-select>
+            <a-button
+              type="primary"
+              @click.stop="handleSaveEditNode"
+              style="margin-left: 8px"
+            >
+              保存
+            </a-button>
+            <a-button
+              @click.stop="handleCancelEditNode"
+              style="margin-left: 8px"
+            >
+              <MinusOutlined />
+            </a-button>
+          </div>
+          <!-- 非编辑状态：显示正常节点内容 -->
+          <template v-else>
+            <div class="tree-node-wrapper">
+              <span class="tree-node-title"> {{ getNodeTitle(dataRef) }} </span>
+              <div class="tree-node-actions">
+                <!-- 一级节点：支持新增子节点、编辑、排序、删除 -->
+                <template v-if="!dataRef.parentId">
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleAddChild(dataRef)"
+                    title="添加子节点"
+                  >
+                    <PlusOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleEditNode(dataRef)"
+                    title="编辑"
+                  >
+                    <EditOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleMoveUp(dataRef)"
+                    title="上移"
+                    :disabled="isFirstNode(dataRef)"
+                  >
+                    <ArrowUpOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleMoveDown(dataRef)"
+                    title="下移"
+                    :disabled="isLastNode(dataRef)"
+                  >
+                    <ArrowDownOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    danger
+                    @click.stop="handleDeleteNode(dataRef)"
+                    title="删除"
+                  >
+                    <DeleteOutlined />
+                  </a-button>
+                </template>
+                <!-- 二级节点：只支持编辑、排序、删除 -->
+                <template v-else>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleEditNode(dataRef)"
+                    title="编辑"
+                  >
+                    <EditOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleMoveUp(dataRef)"
+                    title="上移"
+                    :disabled="isFirstNode(dataRef)"
+                  >
+                    <ArrowUpOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    @click.stop="handleMoveDown(dataRef)"
+                    title="下移"
+                    :disabled="isLastNode(dataRef)"
+                  >
+                    <ArrowDownOutlined />
+                  </a-button>
+                  <a-button
+                    type="link"
+                    size="small"
+                    danger
+                    @click.stop="handleDeleteNode(dataRef)"
+                    title="删除"
+                  >
+                    <DeleteOutlined />
+                  </a-button>
+                </template>
+              </div>
+            </div>
+            <!-- 子节点添加区域 -->
+            <div
+              v-if="addingChildNode && currentParentKey === dataRef.key"
+              class="add-child-node-row"
+            >
+              <a-select
+                v-model:value="childNodeData.stcd"
+                show-search
+                placeholder="请选择站点"
+                style="width: 300px"
+                :filter-option="filterOption"
+                @change="handleChildNodeSelect"
+              >
+                <a-select-option
+                  v-for="item in stationList"
+                  :key="item.stcd"
+                  :value="item.stcd"
+                >
+                  {{ item.stnm }}
+                </a-select-option>
+              </a-select>
+              <a-button
+                type="primary"
+                @click.stop="handleSaveChildNode"
+                style="margin-left: 8px"
+              >
+                保存
+              </a-button>
+              <a-button
+                @click.stop="handleCancelAddChild"
+                style="margin-left: 8px"
+              >
+                <MinusOutlined />
+              </a-button>
+            </div>
+          </template>
+        </template>
+      </a-tree>
+      <a-empty v-else description="暂无数据" style="margin-top: 20px" />
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, watch } from 'vue';
+import { message, Modal } from 'ant-design-vue';
+import type { Rule } from 'ant-design-vue/es/form';
+import dayjs from 'dayjs';
+import {
+  PlusOutlined,
+  MinusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined
+} from '@ant-design/icons-vue';
+
+interface Props {
+  visible: boolean;
+  initialValues?: any | null;
+  loading?: boolean;
+}
+
+const localLoading = ref(false);
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  initialValues: null,
+  loading: false
+});
+
+const modalVisible = computed({
+  get: () => props.visible,
+  set: val => emit('update:visible', val)
+});
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'cancel'): void;
+  (e: 'ok', values: any): void;
+}>();
+
+const formRef = ref();
+
+const defaultFormData = reactive({
+  id: undefined,
+  name: undefined,
+  code: undefined,
+  rvnm: undefined,
+  description: undefined
+});
+const formData: any = reactive({ ...defaultFormData });
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入沿程配置名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入配置编码', trigger: 'blur' }],
+  rvnm: [{ required: true, message: '请输入所在河段', trigger: 'blur' }]
+};
+
+const isEdit = computed(() => !!props.initialValues);
+
+// 树形数据
+const treeData = ref<any[]>([]);
+
+// 新增节点相关
+const addingNewNode = ref(false);
+const newNodeData = ref({
+  stcd: undefined,
+  stnm: '',
+  sttpName: ''
+});
+
+// 添加子节点相关
+const addingChildNode = ref(false);
+const currentParentKey = ref<string | null>(null);
+const childNodeData = ref({
+  stcd: undefined,
+  stnm: '',
+  sttpName: ''
+});
+
+// 编辑节点相关
+const editingNode = ref(false);
+const editingNodeKey = ref<string | null>(null);
+const editNodeData = ref({
+  stcd: undefined,
+  stnm: '',
+  sttpName: '',
+  originalData: null as any
+});
+
+// 站点列表（模拟数据，实际应从接口获取）
+const stationList = ref([
+  { stcd: '1', stnm: '站点A', sttpName: '类型1' },
+  { stcd: '2', stnm: '站点B', sttpName: '类型2' },
+  { stcd: '3', stnm: '站点C', sttpName: '类型1' },
+  { stcd: '4', stnm: '站点D', sttpName: '类型3' }
+]);
+
+// 生成唯一ID
+let nodeIdCounter = 0;
+const generateNodeId = () => `node_${Date.now()}_${++nodeIdCounter}`;
+
+// 获取节点标题
+const getNodeTitle = (dataRef: any) => {
+  if (!dataRef.parentId) {
+    // 一级节点：只显示 stnm
+    return dataRef.stnm || '';
+  } else {
+    // 二级节点：显示 stnm + sttpName
+    return `${dataRef.stnm || ''} ${dataRef.sttpName || ''}`;
+  }
+};
+
+// 搜索过滤
+const filterOption = (input: string, option: any) => {
+  return (
+    option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+  );
+};
+
+// 判断是否为第一个节点
+const isFirstNode = (dataRef: any) => {
+  const siblings = getSiblings(dataRef);
+  return siblings.length > 0 && siblings[0].key === dataRef.key;
+};
+
+// 判断是否为最后一个节点
+const isLastNode = (dataRef: any) => {
+  const siblings = getSiblings(dataRef);
+  return (
+    siblings.length > 0 && siblings[siblings.length - 1].key === dataRef.key
+  );
+};
+
+// 获取兄弟节点
+const getSiblings = (dataRef: any) => {
+  if (!dataRef.parentId) {
+    // 一级节点
+    return treeData.value;
+  } else {
+    // 二级节点，找到父节点的 children
+    const parent = findNodeByKey(treeData.value, dataRef.parentId);
+    return parent?.children || [];
+  }
+};
+
+// 根据 key 查找节点
+const findNodeByKey = (nodes: any[], key: string): any => {
+  for (const node of nodes) {
+    if (node.key === key) {
+      return node;
+    }
+    if (node.children && node.children.length > 0) {
+      const found = findNodeByKey(node.children, key);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+// 新增一级节点
+const handleAdd = () => {
+  addingNewNode.value = true;
+  newNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: ''
+  };
+};
+
+// 选择节点
+const handleNodeSelect = (value: string) => {
+  const station = stationList.value.find(item => item.stcd === value);
+  if (station) {
+    newNodeData.value.stnm = station.stnm;
+    newNodeData.value.sttpName = station.sttpName;
+  }
+};
+
+// 保存新增节点
+const handleSaveNewNode = () => {
+  if (!newNodeData.value.stcd) {
+    message.error('请选择站点');
+    return;
+  }
+
+  const newNode = {
+    key: generateNodeId(),
+    stcd: newNodeData.value.stcd,
+    stnm: newNodeData.value.stnm,
+    sttpName: newNodeData.value.sttpName,
+    parentId: null,
+    children: []
+  };
+
+  treeData.value.push(newNode);
+  addingNewNode.value = false;
+  message.success('添加成功');
+};
+
+// 取消新增
+const handleCancelAdd = () => {
+  addingNewNode.value = false;
+  newNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: ''
+  };
+};
+
+// 添加子节点（二级节点）
+const handleAddChild = (parentData: any) => {
+  addingChildNode.value = true;
+  currentParentKey.value = parentData.key;
+  childNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: ''
+  };
+};
+
+// 选择子节点
+const handleChildNodeSelect = (value: string) => {
+  const station = stationList.value.find(item => item.stcd === value);
+  if (station) {
+    childNodeData.value.stnm = station.stnm;
+    childNodeData.value.sttpName = station.sttpName;
+  }
+};
+
+// 保存新增子节点
+const handleSaveChildNode = () => {
+  if (!childNodeData.value.stcd) {
+    message.error('请选择站点');
+    return;
+  }
+
+  const parent = findNodeByKey(treeData.value, currentParentKey.value!);
+  if (!parent) {
+    message.error('父节点不存在');
+    return;
+  }
+
+  const newChild = {
+    key: generateNodeId(),
+    stcd: childNodeData.value.stcd,
+    stnm: childNodeData.value.stnm,
+    sttpName: childNodeData.value.sttpName,
+    parentId: parent.key,
+    children: []
+  };
+
+  if (!parent.children) {
+    parent.children = [];
+  }
+  // 在子节点列表顶部添加
+  parent.children.unshift(newChild);
+
+  addingChildNode.value = false;
+  currentParentKey.value = null;
+  message.success('添加子节点成功');
+};
+
+// 取消添加子节点
+const handleCancelAddChild = () => {
+  addingChildNode.value = false;
+  currentParentKey.value = null;
+  childNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: ''
+  };
+};
+
+// 编辑节点
+const handleEditNode = (dataRef: any) => {
+  editingNode.value = true;
+  editingNodeKey.value = dataRef.key;
+  // 保存原始数据
+  editNodeData.value = {
+    stcd: dataRef.stcd,
+    stnm: dataRef.stnm,
+    sttpName: dataRef.sttpName,
+    originalData: { ...dataRef }
+  };
+};
+
+// 选择编辑节点
+const handleEditNodeSelect = (value: string) => {
+  const station = stationList.value.find(item => item.stcd === value);
+  if (station) {
+    editNodeData.value.stnm = station.stnm;
+    editNodeData.value.sttpName = station.sttpName;
+    editNodeData.value.stcd = station.stcd;
+  }
+};
+
+// 保存编辑节点
+const handleSaveEditNode = () => {
+  if (!editNodeData.value.stcd) {
+    message.error('请选择站点');
+    return;
+  }
+
+  // 找到要编辑的节点
+  const node = findNodeByKey(treeData.value, editingNodeKey.value!);
+  if (!node) {
+    message.error('节点不存在');
+    return;
+  }
+
+  // 更新节点数据
+  node.stcd = editNodeData.value.stcd;
+  node.stnm = editNodeData.value.stnm;
+  node.sttpName = editNodeData.value.sttpName;
+
+  editingNode.value = false;
+  editingNodeKey.value = null;
+  message.success('编辑成功');
+};
+
+// 取消编辑节点
+const handleCancelEditNode = () => {
+  editingNode.value = false;
+  editingNodeKey.value = null;
+  editNodeData.value = {
+    stcd: undefined,
+    stnm: '',
+    sttpName: '',
+    originalData: null
+  };
+};
+
+// 上移
+const handleMoveUp = (dataRef: any) => {
+  const siblings = getSiblings(dataRef);
+  const index = siblings.findIndex(item => item.key === dataRef.key);
+
+  if (index > 0) {
+    // 交换位置
+    [siblings[index - 1], siblings[index]] = [
+      siblings[index],
+      siblings[index - 1]
+    ];
+    message.success('上移成功');
+  }
+};
+
+// 下移
+const handleMoveDown = (dataRef: any) => {
+  const siblings = getSiblings(dataRef);
+  const index = siblings.findIndex(item => item.key === dataRef.key);
+
+  if (index < siblings.length - 1) {
+    // 交换位置
+    [siblings[index], siblings[index + 1]] = [
+      siblings[index + 1],
+      siblings[index]
+    ];
+    message.success('下移成功');
+  }
+};
+
+// 删除节点
+const handleDeleteNode = (dataRef: any) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除节点"${dataRef.stnm}"吗？`,
+    okText: '确定',
+    cancelText: '取消',
+    onOk: () => {
+      if (!dataRef.parentId) {
+        // 删除一级节点
+        const index = treeData.value.findIndex(
+          item => item.key === dataRef.key
+        );
+        if (index > -1) {
+          treeData.value.splice(index, 1);
+        }
+      } else {
+        // 删除二级节点
+        const parent = findNodeByKey(treeData.value, dataRef.parentId);
+        if (parent && parent.children) {
+          const index = parent.children.findIndex(
+            item => item.key === dataRef.key
+          );
+          if (index > -1) {
+            parent.children.splice(index, 1);
+          }
+        }
+      }
+      message.success('删除成功');
+    }
+  });
+};
+
+const handleOk = async () => {
+  try {
+    await formRef.value.validate();
+    const submitValues = {
+      ...formData,
+      captureDate: formData.captureDate
+        ? dayjs(formData.captureDate).format('YYYY-MM-DD')
+        : undefined,
+      configNodes: treeData.value // 提交树形数据
+    };
+    emit('ok', submitValues);
+  } catch (error) {
+    console.error('Validate Failed:', error);
+    message.error('请检查表单填写是否正确');
+  }
+};
+
+const initForm = () => {
+  if (props.initialValues) {
+    const values = props.initialValues;
+    Object.keys(formData).forEach(key => {
+      if (values.hasOwnProperty(key)) {
+        if (key === 'captureDate' && values[key]) {
+          formData[key] = dayjs(values[key]);
+        } else {
+          formData[key] = values[key];
+        }
+      }
+    });
+
+    // 初始化树形数据
+    if (values.configNodes && Array.isArray(values.configNodes)) {
+      treeData.value = values.configNodes.map((node: any) => ({
+        ...node,
+        children:
+          node.children?.map((child: any) => ({
+            ...child
+          })) || []
+      }));
+    } else {
+      treeData.value = [];
+    }
+  } else {
+    resetForm();
+  }
+};
+
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+  Object.assign(formData, defaultFormData);
+  treeData.value = [];
+  addingNewNode.value = false;
+};
+
+const handleCancel = () => {
+  emit('update:visible', false);
+  emit('cancel');
+  resetForm();
+};
+
+watch(
+  () => props.visible,
+  newVisible => {
+    if (newVisible) {
+      initForm();
+    }
+  },
+  { immediate: false }
+);
+
+defineExpose({
+  localLoading
+});
+</script>
+
+<style scoped lang="scss">
+.config-tree-container {
+  margin-top: 16px;
+
+  .add-node-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+}
+
+.tree-node-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-right: 8px;
+
+  .tree-node-title {
+    flex: 1;
+  }
+
+  .tree-node-actions {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+}
+
+// 确保鼠标悬停时显示操作按钮
+.tree-node-wrapper:hover {
+  .tree-node-actions {
+    opacity: 1;
+  }
+}
+
+// 子节点添加区域样式
+.add-child-node-row {
+  display: flex;
+  align-items: center;
+  padding: 8px 0 8px 24px;
+  margin-top: 4px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+</style>
diff --git a/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementSearch.vue b/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementSearch.vue
new file mode 100644
index 00000000..c10b93c8
--- /dev/null
+++ b/frontend/src/views/system/pushManagement/components/ConfigManagement/ConfigManagementSearch.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="content-search">
+    <BasicSearch
+      ref="basicSearchRef"
+      :searchList="searchList"
+      :initial-values="initSearchData"
+      @reset="handleReset"
+      @finish="onSearchFinish"
+      @values-change="onValuesChange"
+    >
+      <template #actions>
+        <a-tooltip title="新增配置">
+          <a-button @click="props.handleAdd" type="primary"> 新增沿程配置 </a-button>
+        </a-tooltip>
+      </template>
+    </BasicSearch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
+import BasicSearch from "@/components/BasicSearch/index.vue";
+
+interface Props {
+  handleAdd: () => void;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "reset", values: any): void;
+  (e: "searchFinish", values: any): void;
+}>();
+
+const initSearchData = {
+  configName: "",
+};
+
+const searchData = ref<any>({ ...initSearchData });
+const searchList: any = computed(() => [
+  {
+    type: "Input",
+    name: "name",
+    label: "沿程配置名称",
+    fieldProps: {
+      allowClear: true,
+    },
+  },
+  {
+    type: "Input",
+    name: "rvnm",
+    label: "所在河段",
+    fieldProps: {
+      allowClear: true,
+    },
+  },
+]);
+
+const onSearchFinish = (values: any) => {
+  emit("searchFinish", values);
+};
+
+const onValuesChange = (changedValues: any, allValues: any) => {
+  searchData.value = { ...searchData.value, ...allValues };
+};
+
+const handleReset = () => {
+  emit("reset", initSearchData);
+};
+
+onMounted(() => {
+  emit("searchFinish", initSearchData);
+});
+</script>
+<style lang="scss"></style>
diff --git a/frontend/src/views/system/pushManagement/components/ConfigManagement/index.vue b/frontend/src/views/system/pushManagement/components/ConfigManagement/index.vue
new file mode 100644
index 00000000..64294dbc
--- /dev/null
+++ b/frontend/src/views/system/pushManagement/components/ConfigManagement/index.vue
@@ -0,0 +1,228 @@
+<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\ConfigManagement\index.vue -->
+<template>
+  <div class="content">
+    推送配置
+    <!-- <ConfigManagementSearch
+      ref="configManagementSearch"
+      :handle-add="handleAdd"
+      @reset="handleReset"
+      @search-finish="onSearchFinish"
+    />
+    <BasicTable
+      ref="basicTable"
+      :columns="columns"
+      :list-url="getAllConfigTree"
+      :search-params="searchParams"
+    >
+      <template #action="{ column, record }">
+        <div class="flex gap-[6px]">
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            @click="handleEdit(record)"
+            >编辑</a-button
+          >
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            danger
+            @click="handleDelete(record)"
+            >删除</a-button
+          >
+        </div>
+      </template>
+    </BasicTable>
+    <ConfigManagementForm
+      ref="configManagementForm"
+      v-model:visible="editModalVisible"
+      :initial-values="currentRecord"
+      @cancel="editModalCancel"
+      @ok="handleEditSubmit"
+    /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, onMounted } from 'vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import ConfigManagementSearch from './ConfigManagementSearch.vue';
+import ConfigManagementForm from './ConfigManagementForm.vue';
+import { message, Modal } from 'ant-design-vue';
+import {
+  getAllConfigTree,
+  deleteBaseWbsb,
+  saveBaseWbsb
+} from '@/api/system/map/ConfigManagement';
+
+// 表格实例
+const basicTable = ref<any>(null);
+// 表格列配置
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    key: 'index',
+    width: 60,
+    align: 'center',
+    customRender: ({ text, record, index }) => index + 1
+  },
+  {
+    title: '沿程配置名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150
+  },
+  {
+    title: '配置编码',
+    key: 'code',
+    dataIndex: 'code',
+    width: 120
+  },
+  {
+    title: '所在河段',
+    dataIndex: 'rvnm',
+    key: 'rvnm',
+    ellipsis: true
+  },
+  {
+    title: '创建人',
+    key: 'recordUser',
+    dataIndex: 'recordUser'
+  },
+  {
+    title: '创建时间',
+    key: 'recordTime',
+    dataIndex: 'recordTime',
+    width: 150
+  },
+  {
+    title: '更新时间',
+    key: 'modifyTime',
+    dataIndex: 'modifyTime',
+    width: 150
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    width: 360
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 120,
+    fixed: 'right',
+    slots: { customRender: 'action' }
+  }
+];
+
+// 搜索参数
+const searchParams = ref({});
+// 编辑弹窗数据
+const currentRecord = ref<any | null>(null);
+const editModalVisible = ref(false);
+
+// 新增处理
+const handleAdd = () => {
+  currentRecord.value = null;
+  editModalVisible.value = true;
+};
+
+// 编辑处理
+const handleEdit = (record: any) => {
+  currentRecord.value = { ...record };
+  editModalVisible.value = true;
+};
+
+// 删除处理
+const handleDelete = (record: any) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除选中的记录吗？',
+    zIndex: 2002,
+    onOk: async () => {
+      try {
+        let res = await deleteBaseWbsb([record.id]);
+        message.success('删除成功');
+        basicTable.value.refresh();
+      } catch (error) {
+        message.error('删除失败');
+        return;
+      }
+    }
+  });
+};
+
+// 搜索完成处理
+const onSearchFinish = (values: any) => {
+  const params = {
+    logic: 'and',
+    filters: [
+      values.parentId
+        ? {
+            field: 'parentId',
+            operator: 'eq',
+            dataType: 'string',
+            value: values.parentId
+          }
+        : null,
+      values.name
+        ? {
+            field: 'name',
+            operator: 'contains',
+            dataType: 'string',
+            value: values.name
+          }
+        : null
+    ].filter(Boolean)
+  };
+  basicTable.value.getList(params);
+};
+
+// 重置
+const handleReset = () => {
+  basicTable.value.getList({
+    logic: 'and',
+    filters: []
+  });
+};
+
+// 表单取消
+const editModalCancel = () => {
+  currentRecord.value = null;
+  editModalVisible.value = false;
+};
+
+// 表单提交
+const handleEditSubmit = async (values: any) => {
+  try {
+    let res = await saveBaseWbsb({
+      ...currentRecord.value,
+      ...values
+    });
+    message.success(`保存成功`);
+
+    editModalVisible.value = false;
+    basicTable.value.refresh();
+  } catch (error) {
+    message.error(`保存失败`);
+
+    editModalVisible.value = false;
+    return;
+  }
+};
+
+const initOption = () => {};
+onMounted(() => {
+  initOption();
+});
+</script>
+
+<style scoped lang="scss">
+.config-management {
+  height: 100%;
+  padding: 16px;
+}
+</style>
diff --git a/frontend/src/views/system/pushManagement/components/HistoryManagement/LayerManagementForm.vue b/frontend/src/views/system/pushManagement/components/HistoryManagement/LayerManagementForm.vue
new file mode 100644
index 00000000..caa405e3
--- /dev/null
+++ b/frontend/src/views/system/pushManagement/components/HistoryManagement/LayerManagementForm.vue
@@ -0,0 +1,260 @@
+<template>
+  <a-modal
+    :title="isEdit ? '编辑图层' : '新增图层'"
+    v-model:open="modalVisible"
+    :confirm-loading="props.loading"
+    width="600px"
+    :destroy-on-close="true"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      name="edit_form"
+      :labelCol="{ span: 5 }"
+    >
+      <a-form-item label="图层名称" name="title">
+        <a-input
+          v-model:value="formData.title"
+          style="width: 100%"
+          placeholder="请输入图层名称"
+        />
+      </a-form-item>
+      <a-form-item label="图层编码" name="code">
+        <a-input
+          v-model:value="formData.code"
+          style="width: 100%"
+          placeholder="请输入图层编码"
+        />
+      </a-form-item>
+      <a-form-item label="图层类型" name="type" v-if="isInterface">
+        <a-select
+          :options="typeOpiton"
+          v-model:value="formData.type"
+          :fieldNames="{
+            label: 'dictName',
+            value: 'itemCode'
+          }"
+          style="width: 100%"
+          placeholder="请输入图层类型"
+        />
+      </a-form-item>
+      <a-form-item label="标签显示级别" name="treeLevel" v-if="!isInterface">
+        <a-input-number
+          v-model:value="formData.treeLevel"
+          style="width: 100%"
+          placeholder="请输入标签显示级别"
+          :min="0"
+          :max="24"
+          :step="1"
+        />
+      </a-form-item>
+      <a-form-item label="锚点接口" name="url" v-if="isInterface">
+        <a-input
+          v-model:value="formData.url"
+          style="width: 100%"
+          placeholder="请输入锚点接口"
+        />
+      </a-form-item>
+      <a-form-item label="接口参数" name="anchorParamJson" v-if="isInterface">
+        <a-textarea
+          :rows="6"
+          v-model:value="formData.anchorParamJson"
+          style="width: 100%"
+          placeholder="请输入接口参数"
+        />
+      </a-form-item>
+      <a-form-item
+        label="三维接口"
+        name="urlThd"
+        v-if="isInterface && formData.type === 'geojson'"
+      >
+        <a-input
+          v-model:value="formData.urlThd"
+          style="width: 100%"
+          placeholder="请输入三维接口"
+        />
+      </a-form-item>
+      <a-form-item
+        label="gisJson"
+        name="paramJson"
+        v-if="isInterface && formData.type === 'geojson'"
+      >
+        <a-textarea
+          :rows="4"
+          v-model:value="formData.paramJson"
+          style="width: 100%"
+          placeholder="请输入gisJson"
+        />
+      </a-form-item>
+      <a-form-item
+        label="备注"
+        name="description"
+        v-if="!isInterface || formData.type === 'geojson'"
+      >
+        <a-textarea
+          :rows="4"
+          v-model:value="formData.description"
+          style="width: 100%"
+          placeholder="请输入备注"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, watch } from 'vue';
+import { message } from 'ant-design-vue';
+import type { Rule } from 'ant-design-vue/es/form';
+import { getDictItemsByCode } from '@/api/dict';
+
+// 定义 Props
+interface Props {
+  visible: boolean;
+  initialValues?: any | null;
+  loading?: boolean;
+  isInterface?: boolean;
+}
+//  加载状态
+const localLoading = ref(false);
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  initialValues: null,
+  loading: false,
+  isInterface: false
+});
+const modalVisible = computed({
+  get: () => props.visible,
+  set: val => emit('update:visible', val)
+});
+// 定义 Emits
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'cancel'): void;
+  (e: 'ok', values: any, type: string): void;
+}>();
+
+// 表单引用
+const formRef = ref();
+// 1. 新增用于存储手动验证错误信息的响应式变量
+const bodyLengthError = ref<string>('');
+const weightError = ref<string>('');
+
+// 表单数据模型
+const defaultFormData = reactive({
+  id: undefined,
+  title: undefined,
+  code: undefined,
+  type: undefined,
+  treeLevel: undefined,
+  description: undefined,
+  parentId: undefined,
+  url: undefined,
+  urlThd: undefined,
+  paramJson: undefined,
+  anchorParamJson: undefined
+});
+const typeOpiton = ref<any>([]);
+const formData: any = reactive({ ...defaultFormData });
+// 验证规则
+const rules: Record<string, Rule[]> = {
+  title: [{ required: true, message: '请输入图层名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入图层编码', trigger: 'blur' }],
+  type: [{ required: true, message: '请输入图层类型', trigger: 'change' }],
+  treeLevel: [
+    { required: true, message: '请输入标签显示级别', trigger: 'blur' }
+  ]
+};
+
+// 计算是否为编辑模式
+const isEdit = computed(() => !!props.initialValues);
+// 确认操作
+const handleOk = async () => {
+  try {
+    // 验证表单
+    await formRef.value.validate();
+    // 准备提交数据
+    const submitValues = {
+      ...formData
+    };
+    emit('ok', submitValues, 'form');
+  } catch (error) {
+    console.error('Validate Failed:', error);
+    message.error('请检查表单填写是否正确');
+  }
+};
+const initForm = () => {
+  if (props.initialValues) {
+    // --- 编辑模式：回填数据 ---
+    const values = props.initialValues;
+    if (props.isInterface) {
+      initType();
+    }
+    // 回填其他普通字段
+    Object.keys(formData).forEach(key => {
+      // 确保字段存在于 initialValues 中再赋值，避免覆盖默认值
+      if (values.hasOwnProperty(key)) {
+        formData[key] = values[key];
+      }
+    });
+  } else {
+    resetForm();
+  }
+};
+const initType = () => {
+  getDictItemsByCode({ dictCode: 'LayerTypeCode' }).then(res => {
+    typeOpiton.value = res.data;
+  });
+};
+// 重置表单
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+  Object.assign(formData, defaultFormData);
+  // 清空手动验证的错误信息
+  bodyLengthError.value = '';
+  weightError.value = '';
+};
+
+// 取消操作
+const handleCancel = () => {
+  emit('update:visible', false);
+  emit('cancel');
+  resetForm();
+};
+
+watch(
+  () => props.visible,
+  newVisible => {
+    if (newVisible) {
+      initForm();
+    }
+  },
+  { immediate: false }
+);
+
+// 监听图层类型变化，清空相关字段
+watch(
+  () => formData.type,
+  (newType, oldType) => {
+    if (oldType && newType !== oldType) {
+      // 类型切换时清空相关字段
+      formData.urlThd = undefined;
+      formData.paramJson = undefined;
+      if (oldType === 'geojson') {
+        formData.description = undefined;
+      }
+    }
+  }
+);
+// 暴露变量
+defineExpose({
+  localLoading
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/system/pushManagement/components/HistoryManagement/LayerManagementSearch.vue b/frontend/src/views/system/pushManagement/components/HistoryManagement/LayerManagementSearch.vue
new file mode 100644
index 00000000..40cb5033
--- /dev/null
+++ b/frontend/src/views/system/pushManagement/components/HistoryManagement/LayerManagementSearch.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="content-search">
+    <BasicSearch
+      ref="basicSearchRef"
+      :searchList="searchList"
+      :initial-values="initSearchData"
+      @reset="handleReset"
+      @finish="onSearchFinish"
+      @values-change="onValuesChange"
+    >
+      <template #actions>
+        <a-tooltip title="新增图层">
+          <a-button @click="props.handleAdd" type="primary"> 新增图层 </a-button>
+        </a-tooltip>
+      </template>
+    </BasicSearch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch } from "vue";
+import BasicSearch from "@/components/BasicSearch/index.vue"; // 确保路径正确
+
+interface Props {
+  handleAdd: (record: any) => void;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "reset", values: any): void;
+  (e: "searchFinish", values: any): void;
+}>();
+
+const initSearchData = {
+  title: "",
+};
+
+const searchData = ref<any>({ ...initSearchData });
+const searchList: any = computed(() => [
+  {
+    type: "Input",
+    name: "title",
+    label: "图层名称",
+    fieldProps: {
+      allowClear: true,
+    },
+  },
+]);
+// --- Methods ---
+
+// 2. 搜索表单逻辑
+const onSearchFinish = (values: any) => {
+  emit("searchFinish", values);
+};
+// 值改变
+const onValuesChange = (changedValues: any, allValues: any) => {
+  searchData.value = { ...searchData.value, ...allValues };
+};
+// 重置
+const handleReset = () => {
+  emit("reset", initSearchData);
+};
+
+onMounted(() => {
+  emit("searchFinish", initSearchData);
+});
+</script>
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/system/pushManagement/components/HistoryManagement/index.vue b/frontend/src/views/system/pushManagement/components/HistoryManagement/index.vue
new file mode 100644
index 00000000..372b78b1
--- /dev/null
+++ b/frontend/src/views/system/pushManagement/components/HistoryManagement/index.vue
@@ -0,0 +1,358 @@
+<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\LayerManagement\index.vue -->
+<template>
+  <div class="content">
+    推送历史
+    <!-- <LayerManagementSearch
+      ref="layerManagementSearch"
+      :handle-add="handleAdd"
+      @reset="handleReset"
+      @search-finish="onSearchFinish"
+    />
+    <BasicTable
+      ref="basicTable"
+      :columns="columns"
+      :list-url="getAllMapLayerTree"
+      :search-params="searchParams"
+    >
+      <template #action="{ record }">
+        <div class="flex gap-[6px]">
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            @click="handleEdit(record)"
+            >编辑</a-button
+          >
+          <a-button
+            v-if="record.children && record.children.length == 0"
+            class="!p-0"
+            type="link"
+            size="small"
+            @click="handleEditInterface(record)"
+            >编辑接口</a-button
+          >
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            @click="handleAdd(record)"
+            >新增子图层</a-button
+          >
+          <a-button
+            class="!p-0"
+            type="link"
+            size="small"
+            danger
+            @click="handleDelete(record)"
+            >删除</a-button
+          >
+        </div>
+      </template>
+      <template #enable="{ record }">
+        <a-switch
+          :checked="record.enable === 1"
+          @change="(checked: boolean) => handleEnableChange(record, checked)"
+        />
+      </template>
+      <template #checkable="{ record }">
+        <a-switch
+          :checked="record.checkable === 1"
+          @change="(checked: boolean) => handleCheckableChange(record, checked)"
+        />
+      </template>
+    </BasicTable>
+    <LayerManagementForm
+      ref="layerManagementForm"
+      v-model:visible="editModalVisible"
+      :initial-values="currentRecord"
+      :is-interface="isInterface"
+      :loading="editLoading"
+      @cancel="editModalCancel"
+      @ok="handleEditSubmit"
+    /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
+import BasicTable from '@/components/BasicTable/index.vue';
+import LayerManagementSearch from './LayerManagementSearch.vue';
+import LayerManagementForm from './LayerManagementForm.vue';
+import { message, Modal } from 'ant-design-vue';
+import {
+  getAllMapLayerTree,
+  saveMapLayer,
+  deleteMapLayer
+} from '@/api/system/map/LayerManagement';
+// 表格列配置
+const columns = [
+  {
+    title: '',
+    dataIndex: '',
+    key: '',
+    width: 50,
+    customRender: () => {
+      return '';
+    }
+  },
+  {
+    title: '序号',
+    key: 'index',
+    width: 60,
+    align: 'center',
+    customRender: ({ record, index }: any) => {
+      // 对于树形结构，计算当前记录在其父节点的 children 中的位置
+      // 如果没有 parentId，说明是根节点，需要计算在所有根节点中的序号
+      if (!record.parentId) {
+        // 根节点：计算在 dataSource 中是第几个根节点
+        let rootIndex = 0;
+        for (let i = 0; i < basicTable.value.tableData.length; i++) {
+          const item = basicTable.value.tableData[i];
+          // 只统计根节点（没有 parentId 的节点）
+          if (!item.parentId) {
+            rootIndex++;
+            // 找到当前记录，返回其序号
+            if (
+              item.id === record.id ||
+              (item.key === record.key && item.id === record.id)
+            ) {
+              return rootIndex;
+            }
+          }
+        }
+        return rootIndex;
+      } else {
+        // 子节点：在其父节点的 children 中查找索引
+        const findParentAndIndex = (data: any[], parentId: string): number => {
+          for (const item of data) {
+            if (item.key === parentId || item.id === parentId) {
+              // 找到父节点，在其 children 中查找当前记录的位置
+              if (item.children && item.children.length > 0) {
+                const childIndex = item.children.findIndex(
+                  (child: any) =>
+                    child.key === record.key || child.id === record.id
+                );
+                return childIndex + 1;
+              }
+            }
+            // 递归查找更深层的父节点
+            if (item.children && item.children.length > 0) {
+              const result = findParentAndIndex(item.children, parentId);
+              if (result > 0) {
+                return result;
+              }
+            }
+          }
+          return 0;
+        };
+        return findParentAndIndex(basicTable.value.tableData, record.parentId);
+      }
+    }
+  },
+  {
+    title: '图层名称',
+    dataIndex: 'title',
+    key: 'title',
+    width: 150
+  },
+  {
+    title: '图层编码',
+    dataIndex: 'code',
+    key: 'code',
+    width: 120
+  },
+  {
+    title: '标签显示级别',
+    dataIndex: 'treeLevel',
+    key: 'treeLevel',
+    width: 100
+  },
+  {
+    title: '是否启用',
+    dataIndex: 'enable',
+    key: 'enable',
+    width: 80,
+    slots: { customRender: 'enable' }
+  },
+  {
+    title: '是否可选',
+    dataIndex: 'checkable',
+    key: 'checkable',
+    width: 80,
+    slots: { customRender: 'checkable' }
+  },
+  {
+    title: '备注',
+    dataIndex: 'description',
+    key: 'description'
+  },
+  {
+    title: '创建人',
+    key: 'displayRecordUser',
+    dataIndex: 'displayRecordUser'
+  },
+  {
+    title: '创建时间',
+    key: 'recordTime',
+    dataIndex: 'recordTime',
+    width: 150
+  },
+  {
+    title: '更新时间',
+    key: 'modifyTime',
+    dataIndex: 'modifyTime',
+    width: 150
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 220,
+    fixed: 'right',
+    slots: { customRender: 'action' }
+  }
+];
+// 表格实例
+const basicTable = ref<any>(null);
+// 搜索参数
+const searchParams = ref({});
+// 编辑弹窗数据
+const isInterface = ref(false);
+const editModalVisible = ref(false);
+const editLoading = ref(false);
+const parentId = ref<string | null>(null);
+const currentRecord = ref<any | null>(null);
+// 添加处理
+const handleAdd = (record: any) => {
+  currentRecord.value = null;
+  parentId.value = record.id;
+  editModalVisible.value = true;
+};
+// 过滤掉值为 '-' 的字段
+const filterRecord = (record: any) => {
+  const filtered: any = {};
+  const keepKeys = ['code']; // 这些键始终保留
+  Object.keys(record).forEach(key => {
+    if (keepKeys.includes(key) || record[key] !== '-') {
+      filtered[key] = record[key];
+    }
+  });
+  return filtered;
+};
+
+// 编辑处理
+const handleEdit = (record: any) => {
+  console.log('handleEdit', record);
+  parentId.value = null;
+  isInterface.value = false;
+  currentRecord.value = filterRecord(record);
+  editModalVisible.value = true;
+};
+// 编辑接口处理
+const handleEditInterface = (record: any) => {
+  console.log('handleEdit', record);
+  currentRecord.value = filterRecord(record);
+  console.log('handleEdit', currentRecord.value);
+  isInterface.value = true;
+  parentId.value = null;
+  editModalVisible.value = true;
+};
+
+// 删除处理
+const handleDelete = async (record: any) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除选中的记录吗？',
+    zIndex: 2002,
+    onOk: async () => {
+      try {
+        let res = await deleteMapLayer([record.id]);
+        message.success('删除成功');
+        basicTable.value.refresh();
+      } catch (error) {
+        message.error('删除失败');
+        return;
+      }
+    }
+  });
+};
+// 搜索
+const onSearchFinish = (values: any) => {
+  searchParams.value = values;
+  nextTick(() => {
+    basicTable.value.getList();
+  });
+};
+// 重置
+const handleReset = () => {
+  searchParams.value = {};
+  nextTick(() => {
+    basicTable.value.refresh();
+  });
+};
+
+// 是否启用切换处理
+const handleEnableChange = (record: any, checked: boolean) => {
+  currentRecord.value = filterRecord(record);
+  console.log(currentRecord.value);
+  record.enable = checked ? 1 : 0;
+  handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
+};
+
+// 是否可选切换处理
+const handleCheckableChange = (record: any, checked: boolean) => {
+  currentRecord.value = filterRecord(record);
+  record.checkable = checked ? 1 : 0;
+  handleEditSubmit({ checkable: checked ? 1 : 0 }, 'switch');
+};
+// 表单
+const editModalCancel = () => {
+  isInterface.value = false;
+  parentId.value = null;
+  currentRecord.value = null;
+  editModalVisible.value = false;
+};
+const handleEditSubmit = async (values: any, type: string) => {
+  editLoading.value = true;
+  try {
+    let res = await saveMapLayer({
+      ...currentRecord.value,
+      ...values,
+      parentId: parentId.value
+    });
+    if (res.code == 0) {
+      if (type === 'switch') {
+        message.success('修改状态成功');
+      } else {
+        message.success(`保存成功`);
+      }
+      editModalVisible.value = false;
+      basicTable.value.refresh();
+    } else {
+      if (type === 'switch') {
+        message.success('修改状态成功');
+      } else {
+        message.success(`保存成功`);
+      }
+    }
+  } catch (error) {
+    if (type === 'switch') {
+      message.error('修改状态失败');
+    } else {
+      message.error(`保存失败`);
+    }
+  } finally {
+    editLoading.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+:deep(.ant-table-cell-with-append) {
+  display: flex;
+  width: 100%;
+}
+:deep(.ant-table-row-expand-icon) {
+  width: 17px !important;
+  margin: 0 !important;
+}
+</style>
diff --git a/frontend/src/views/system/pushManagement/index.vue b/frontend/src/views/system/pushManagement/index.vue
new file mode 100644
index 00000000..c630490d
--- /dev/null
+++ b/frontend/src/views/system/pushManagement/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="map-page">
+    <!-- Ant Design Tabs -->
+    <a-tabs v-model:activeKey="activeTab" class="map-tabs">
+      <a-tab-pane v-for="tab in tabs" :key="tab.value" :tab="tab.name">
+        <!-- 动态加载对应的组件 -->
+        <component :is="getComponent(tab.value)" />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from 'vue';
+
+// Tab 配置
+const tabs = [
+  {
+    name: '推送配置',
+    value: 'config'
+  },
+  {
+    name: '推送历史',
+    value: 'history'
+  }
+];
+
+// 当前激活的 tab
+const activeTab = ref('config');
+
+// 获取对应组件的方法
+const getComponent = (value: string) => {
+  const componentMap: Record<string, any> = {
+    config: defineAsyncComponent(
+      () => import('./components/ConfigManagement/index.vue')
+    ),
+    history: defineAsyncComponent(
+      () => import('./components/HistoryManagement/index.vue')
+    )
+  };
+
+  return componentMap[value] || null;
+};
+</script>
+
+<style scoped lang="scss">
+.map-page {
+  position: relative;
+  z-index: 900;
+  pointer-events: all;
+  width: 100%;
+  height: 100%;
+  padding-top: 2px;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  overflow: hidden;
+  .content {
+    position: relative;
+    z-index: 900;
+    pointer-events: all;
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 0 !important;
+  }
+}
+
+:deep(.ant-tabs) {
+  height: 100%; // 减去 tabs header 的高度
+  padding: 0 13px;
+}
+.map-tabs {
+  :deep(.ant-tabs-content) {
+    height: 100%; // 减去 tabs header 的高度
+    overflow: auto;
+  }
+
+  :deep(.ant-tabs-tabpane) {
+    height: 100%;
+  }
+}
+</style>