diff --git a/frontend/.env.development b/frontend/.env.development
index 40dff0cf..b9d4b82d 100644
--- a/frontend/.env.development
+++ b/frontend/.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.122:8093'
+# VITE_APP_BASE_URL = 'http://172.16.54.1: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/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/mapModal/index.ts b/frontend/src/api/mapModal/index.ts
index 8be8ff6c..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'
     }
   });
 }
diff --git a/frontend/src/api/zngj/index.ts b/frontend/src/api/zngj/index.ts
index c7b1bc6b..986deeec 100644
--- a/frontend/src/api/zngj/index.ts
+++ b/frontend/src/api/zngj/index.ts
@@ -3,13 +3,13 @@ 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',
@@ -21,7 +21,7 @@ export function getAiChartTable(data: any) {
 // 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,13 +75,13 @@ 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',
diff --git a/frontend/src/components/developStatusChart/index.vue b/frontend/src/components/developStatusChart/index.vue
index 235a8a25..c9bb000d 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="1536px"
+            :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';
 
 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>({});
+
+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..b368b924 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="1536px"
+      :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';
 
 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>({});
+
+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/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/liuyu/ai/spdzwaijc/AISPTK.vue b/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue
new file mode 100644
index 00000000..f7ac18b1
--- /dev/null
+++ b/frontend/src/modules/liuyu/ai/spdzwaijc/AISPTK.vue
@@ -0,0 +1,1948 @@
+<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';
+
+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(dayjs());
+const detailModalVisible = ref(false);
+const detailActiveKey = ref('2');
+const detailDate = ref('');
+
+// 日历状态映射（运行/未运行）
+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?.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();
+  }
+);
+
+// ==================== 监听 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..ffc41b99 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,12 +25,30 @@
             </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';
 
@@ -39,6 +62,10 @@ const baseid = ref('');
 const dataLoading = ref(false);
 const panelDetail = ref<any>({});
 
+// ==================== 弹框状态 ====================
+const modalVisible = ref(false);
+const currentAction = ref('AI_5006');
+
 const lyName = computed(() => baseid.value === '02' ? '升鱼斗运行' : '升鱼机运行');
 
 // ==================== 日期选择器配置 ====================
@@ -56,37 +83,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 +132,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/shuidianhuangjingjieruMod/DataTable.vue b/frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
index 6a5ea44b..6ec73248 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="1536px"
+            :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,7 @@
 import { ref, watch } from 'vue';
 import { getVmsstbprptKendoList } from '@/api/home';
 import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import ShuiDianKaiFQKTwoLayer from './TwoLayer/ShuiDianKaiFQKTwoLayer.vue';
 
 defineOptions({
     name: 'DataTable'
@@ -25,6 +41,26 @@ const baseid = ref('');
 const dataLoading = ref(false);
 const tableData = ref<any[]>([]);
 
+const modalVisible = ref(false);
+const modalProps = ref<any>({});
+
+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 +219,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/yunXingGaoJIng/Aisbdbyx/AISBTK.vue b/frontend/src/modules/yunXingGaoJIng/Aisbdbyx/AISBTK.vue
index d5024398..78d074ea 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,7 +383,15 @@ 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';
@@ -368,8 +414,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);
@@ -431,7 +479,10 @@ 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('');
@@ -439,15 +490,53 @@ const detailDataType = ref('');
 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' }
+// 日历状态映射（与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 +803,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 +909,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 +1246,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 +1323,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 +1349,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?.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,9 +1508,15 @@ 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;
@@ -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;
   }
@@ -1280,18 +1543,20 @@ const handleCalendarDayClick = async (current: any, dayData: any) => {
   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 +1571,163 @@ 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,
+      // 时间范围
       {
         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 +1737,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 +1801,31 @@ 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();
+  }
+);
+
 // ==================== 监听 Tab 切换 ====================
 watch(tabIndex, () => {
   pieCode.value = [];
@@ -1479,6 +1854,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 +2027,7 @@ onBeforeUnmount(() => {
 
       .media-empty {
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         height: 100%;
@@ -1724,6 +2108,7 @@ onBeforeUnmount(() => {
         display: flex;
         align-items: center;
         justify-content: center;
+        flex-direction: column;
       }
 
       .sidebar-pagination {
@@ -1733,5 +2118,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/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/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) {