From d327e990eb703fe63b09830977080d72dd273fe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com>
Date: Thu, 3 Sep 2026 16:47:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=B5=E7=AB=99=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/svg/for.svg               |   1 +
 frontend/src/assets/svg/not-building.svg      |   1 +
 frontend/src/components/BasicTable/index.vue  |  32 +--
 .../MapModal/components/EarlyWarningAlert.vue | 240 ++++++++++++++----
 frontend/src/components/MapModal/index.vue    |  14 +-
 .../src/components/MapModal/setting.config.ts |  15 +-
 .../monitoringTable/components/Animal.vue     |  51 ++--
 .../components/FlowMeasure.vue                | 112 ++++----
 .../components/WaterQuality.vue               | 117 +++++----
 .../components/WaterTemperature.vue           | 161 ++++++------
 .../monitoringTable/index.vue                 |   4 +-
 frontend/src/utils/popupHtmlGenerator.ts      |   2 +-
 12 files changed, 481 insertions(+), 269 deletions(-)
 create mode 100644 frontend/src/assets/svg/for.svg
 create mode 100644 frontend/src/assets/svg/not-building.svg

diff --git a/frontend/src/assets/svg/for.svg b/frontend/src/assets/svg/for.svg
new file mode 100644
index 00000000..01c15df0
--- /dev/null
+++ b/frontend/src/assets/svg/for.svg
@@ -0,0 +1 @@
+<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M6.71 14 0 7.069l1.722-1.401L5.6 8.758c1.59-1.918 5.12-5.729 9.99-8.758L16 .96C11.529 5.13 7.87 11 6.71 14Z" fill="#3BA272" fill-rule="nonzero"/></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/not-building.svg b/frontend/src/assets/svg/not-building.svg
new file mode 100644
index 00000000..547e671f
--- /dev/null
+++ b/frontend/src/assets/svg/not-building.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L14 14M14 2L2 14" stroke="#ff4d4f" stroke-width="2" fill="none"/></svg>
\ No newline at end of file
diff --git a/frontend/src/components/BasicTable/index.vue b/frontend/src/components/BasicTable/index.vue
index 9148e7cf..beda4dad 100644
--- a/frontend/src/components/BasicTable/index.vue
+++ b/frontend/src/components/BasicTable/index.vue
@@ -664,24 +664,20 @@ const enhancedColumns = computed(() => {
             },
             h(
               Tooltip,
-              {
-                title: String(text)
-              },
-              {
-                default: () =>    h(
-                    'span',
-                    {
-                      style: {
-                        display: 'inline-block',
-                        maxWidth: '100%',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap'
-                      }
-                    },
-                    String(text)
-                  )
-              }
+              { title: String(text) },
+              h(
+                'span',
+                {
+                  style: {
+                    display: 'inline-block',
+                    maxWidth: '100%',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap'
+                  }
+                },
+                String(text)
+              )
             )
           );
         }
diff --git a/frontend/src/components/MapModal/components/EarlyWarningAlert.vue b/frontend/src/components/MapModal/components/EarlyWarningAlert.vue
index 7d7488da..60315a09 100644
--- a/frontend/src/components/MapModal/components/EarlyWarningAlert.vue
+++ b/frontend/src/components/MapModal/components/EarlyWarningAlert.vue
@@ -4,7 +4,8 @@
       <a-tab-pane v-for="tab in tabsItems" :key="tab.key" :tab="tab.name">
         <div class="table-wrapper">
           <BasicTable
-            ref="tableRef"
+            scrollY="400px"
+            :ref="(el: any) => setTableRef(el, tab.key)"
             :columns="currentColumns"
             :list-url="fetchTableData"
             :search-params="searchParams"
@@ -12,14 +13,24 @@
         </div>
       </a-tab-pane>
     </a-tabs>
+    <CommonAttachmentModal
+      v-model:open="attachmentModalVisible"
+      :fid="currentAttachmentFid"
+      title="查看附件"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick, h } from 'vue';
 import BasicTable from '@/components/BasicTable/index.vue';
 import { queryPostUrlList } from '@/api/mapModal';
 import { useModelStore } from '@/store/modules/model';
+import forSvg from '@/assets/svg/for.svg';
+import notBuildingSvg from '@/assets/svg/not-building.svg';
+import runWarningSvg from '@/assets/svg/run-warning.svg';
+import CommonAttachmentModal from './CommonAttachmentModal.vue';
+import { Button, Tooltip } from 'ant-design-vue';
 
 const props = defineProps<{
   tabsItems: Array<{
@@ -35,38 +46,80 @@ const props = defineProps<{
 const modelStore = useModelStore();
 const activeTabKey = ref(props.tabsItems?.[0]?.key || '');
 const hasLoaded = ref(false);
-const tableRef = ref();
+const tableRefMap = ref<Record<string, any>>({});
+const attachmentModalVisible = ref(false);
+const currentAttachmentFid = ref('');
+const setTableRef = (el: any, key: string) => {
+  if (el) {
+    tableRefMap.value[key] = el;
+  }
+};
 
 // 搜索参数
 const searchParams = computed(() => ({
   ...modelStore.params
 }));
 
+// 构建 stcd 过滤条件
+const buildFilter = () => ({
+  logic: 'and' as const,
+  filters: [
+    {
+      field: 'stcd',
+      operator: 'eq' as const,
+      dataType: 'string' as const,
+      value: modelStore.params.stcd
+    }
+  ]
+});
+
+// 通用 是/否 图标渲染（处理 '-' 占位符）
+const renderStatusIcon = (withBorderRadius = false) => {
+  return ({ text }: { text: string }) => {
+    if (text == '-') return '-';
+    return h('img', {
+      src: text == '1' ? forSvg : notBuildingSvg,
+      style: {
+        width: '16px',
+        height: '16px',
+        ...(withBorderRadius ? { objectFit: 'cover', borderRadius: '4px' } : {})
+      }
+    });
+  };
+};
+
+// 查看附件
+const handleViewAttachment = (record: any) => {
+  if (!record?.file) return;
+  currentAttachmentFid.value = String(record.file);
+  attachmentModalVisible.value = true;
+};
+
 // 不同 tab 的表头配置
 const columnsMap: Record<string, any[]> = {
   DesignParameterChangePrompt: [
     {
       title: '重大变动类型',
-      dataIndex: 'majorChangeType',
-      key: 'majorChangeType'
+      dataIndex: 'stage',
+      key: 'stage'
     },
-    { title: '依据阶段', dataIndex: 'basisStage', key: 'basisStage' },
+    { title: '依据阶段', dataIndex: 'contrastphase', key: 'contrastphase' },
     {
       title: '有重大变动的阶段',
-      dataIndex: 'changedStage',
-      key: 'changedStage'
+      dataIndex: 'currentstage',
+      key: 'currentstage'
     },
     {
       title: '依据阶段数据',
-      dataIndex: 'basisStageData',
-      key: 'basisStageData'
+      dataIndex: 'phasevalue',
+      key: 'phasevalue'
     },
     {
       title: '重大变动阶段数据',
-      dataIndex: 'changedStageData',
-      key: 'changedStageData'
+      dataIndex: 'stagevalue',
+      key: 'stagevalue'
     },
-    { title: '预警描述', dataIndex: 'warningDesc', key: 'warningDesc' }
+    { title: '预警描述', dataIndex: 'messagename', key: 'messagename' }
   ],
   ImplementEarlyWarning: [
     { title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
@@ -74,63 +127,141 @@ const columnsMap: Record<string, any[]> = {
     { title: '流域', dataIndex: 'rvnm', key: 'rvnm' },
     {
       title: '可研(核准)',
-      dataIndex: 'feasibilityApproval',
-      key: 'feasibilityApproval'
+      dataIndex: 'kyhzhb',
+      key: 'kyhzhb',
+      customRender: renderStatusIcon(true)
     },
     {
       title: '预可是否设计',
-      dataIndex: 'preFeasibilityDesign',
-      key: 'preFeasibilityDesign'
+      dataIndex: 'prdsgn',
+      key: 'prdsgn',
+      customRender: renderStatusIcon(true)
     },
     {
       title: '环评是否有要求',
       dataIndex: 'eiarqst',
-      key: 'eiarqst'
+      key: 'eiarqst',
+      customRender: renderStatusIcon(true)
     },
-    { title: '专项设计', dataIndex: 'specialDesign', key: 'specialDesign' },
-    { title: '建设', dataIndex: 'isbuild', key: 'isbuild' },
-    { title: '证明材料', dataIndex: 'proofMaterial', key: 'proofMaterial' }
+    {
+      title: '专项设计',
+      dataIndex: 'zxsjhb',
+      key: 'zxsjhb',
+      customRender: renderStatusIcon()
+    },
+    {
+      title: '建设',
+      dataIndex: 'isbuild',
+      key: 'isbuild',
+      customRender: renderStatusIcon()
+    },
+    {
+      title: '证明材料',
+      dataIndex: 'file',
+      key: 'file',
+      customRender: ({ record }: { record: any }) => {
+        return h(
+          Button,
+          {
+            type: 'link',
+            size: 'small',
+            disabled: !record?.file,
+            onClick: () => handleViewAttachment(record)
+          },
+          '查看附件'
+        );
+      }
+    }
   ],
   ConstructionEarlyWarning: [
-    { title: '设施名称', dataIndex: 'facilityName', key: 'facilityName' },
-    { title: '行政区', dataIndex: 'district', key: 'district' },
-    { title: '流域', dataIndex: 'basin', key: 'basin' },
+    { title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
+    { title: '行政区', dataIndex: 'addvnm', key: 'addvnm' },
+    { title: '流域', dataIndex: 'rvnm', key: 'rvnm' },
     {
       title: '可研(核准)',
-      dataIndex: 'feasibilityApproval',
-      key: 'feasibilityApproval'
+      dataIndex: 'kyhzhb',
+      key: 'kyhzhb',
+      customRender: renderStatusIcon()
     },
     {
       title: '预可是否设计',
-      dataIndex: 'preFeasibilityDesign',
-      key: 'preFeasibilityDesign'
+      dataIndex: 'prdsgn',
+      key: 'prdsgn',
+      customRender: renderStatusIcon(true)
     },
     {
       title: '环评是否有要求',
-      dataIndex: 'eiaRequirement',
-      key: 'eiaRequirement'
+      dataIndex: 'eiarqst',
+      key: 'eiarqst',
+      customRender: renderStatusIcon(true)
     },
-    { title: '专项设计', dataIndex: 'specialDesign', key: 'specialDesign' },
-    { title: '建设', dataIndex: 'construction', key: 'construction' },
-    { title: '证明材料', dataIndex: 'proofMaterial', key: 'proofMaterial' }
+    {
+      title: '专项设计',
+      dataIndex: 'zxsjhb',
+      key: 'zxsjhb',
+      customRender: renderStatusIcon()
+    },
+    {
+      title: '建设',
+      dataIndex: 'isbuild',
+      key: 'isbuild',
+      customRender: renderStatusIcon()
+    },
+    {
+      title: '证明材料',
+      dataIndex: 'file',
+      key: 'file',
+      customRender: ({ record }: { record: any }) => {
+        return h(
+          Button,
+          {
+            type: 'link',
+            size: 'small',
+            disabled: !record?.file,
+            onClick: () => handleViewAttachment(record)
+          },
+          '查看附件'
+        );
+      }
+    }
   ],
   RunEarlyWarning: [
     { title: '设施名称', dataIndex: 'stnm', key: 'stnm' },
     { title: '所属行政区域', dataIndex: 'addvnm', key: 'addvnm' },
-    { title: '运行状态', dataIndex: 'status', key: 'status' }
+    {
+      title: '运行状态',
+      dataIndex: 'status',
+      key: 'status',
+      customRender: ({ text }: { text: string }) => {
+        if (text == '1') {
+          const img = h('img', {
+            src: runWarningSvg, // 或你需要的图标
+            style: {
+              width: '16px',
+              height: '16px'
+            }
+          });
+          return h(
+            Tooltip,
+            { title: '一年内是否有填报数据判断是否运行。' },
+            { default: () => img }
+          );
+        }
+      }
+    }
   ],
   ReleaseEarlyWarning: [
-    { title: '时间', dataIndex: 'releaseTime', key: 'releaseTime' },
-    { title: '鱼类', dataIndex: 'fishType', key: 'fishType' },
-    { title: '放鱼规格(cm)', dataIndex: 'fishSpec', key: 'fishSpec' },
-    { title: '放鱼数量(尾)', dataIndex: 'fishCount', key: 'fishCount' },
-    { title: '放流地点', dataIndex: 'releaseLocation', key: 'releaseLocation' },
-    { title: '所在河流', dataIndex: 'river', key: 'river' },
-    { title: '鱼龄(年)', dataIndex: 'fishAge', key: 'fishAge' },
-    { title: '标记方式', dataIndex: 'markMethod', key: 'markMethod' },
-    { title: '标记种类', dataIndex: 'markType', key: 'markType' },
-    { title: '标记数量(尾)', dataIndex: 'markCount', key: 'markCount' },
-    { title: '运行状态', dataIndex: 'runStatus', key: 'runStatus' }
+    { title: '时间', dataIndex: 'year', key: 'year' },
+    { title: '鱼类', dataIndex: 'ftp', key: 'ftp' },
+    { title: '放鱼规格(cm)', dataIndex: 'fsz', key: 'fsz' },
+    { title: '放鱼数量(尾)', dataIndex: 'fcnt', key: 'fcnt' },
+    { title: '放流地点', dataIndex: 'stlc', key: 'stlc' },
+    { title: '所在河流', dataIndex: 'rvnm', key: 'rvnm' },
+    { title: '鱼龄(年)', dataIndex: 'fage', key: 'fage' },
+    { title: '标记方式', dataIndex: 'bjtp', key: 'bjtp' },
+    { title: '标记种类', dataIndex: 'bjftp', key: 'bjftp' },
+    { title: '标记数量(尾)', dataIndex: 'bjfcnt', key: 'bjfcnt' },
+    { title: '运行状态', dataIndex: 'normal', key: 'normal' }
   ]
 };
 
@@ -150,16 +281,22 @@ const fetchTableData = async (params: any) => {
   if (!currentTableUrl.value) {
     return { data: { records: [], total: 0 } };
   }
-  return await queryPostUrlList(currentTableUrl.value, params);
+  return await queryPostUrlList(currentTableUrl.value, {
+    ...params,
+    filter: params?.filter || buildFilter()
+  });
 };
 
 // tab 切换
 const handleTabChange = (key: string) => {
   activeTabKey.value = key;
   // 切换 tab 时刷新表格数据
-  if (tableRef.value) {
-    tableRef.value.refresh();
-  }
+  nextTick(() => {
+    const table = tableRefMap.value[key];
+    if (table) {
+      table.getList(buildFilter());
+    }
+  });
 };
 
 // 监听 isActive 变化，首次激活时请求数据
@@ -170,8 +307,9 @@ watch(
       hasLoaded.value = true;
       // 首次加载当前 tab 数据
       setTimeout(() => {
-        if (tableRef.value) {
-          //   tableRef.value.getList();
+        const table = tableRefMap.value[activeTabKey.value];
+        if (table) {
+          table.getList(buildFilter());
         }
       }, 100);
     }
diff --git a/frontend/src/components/MapModal/index.vue b/frontend/src/components/MapModal/index.vue
index 9aeca1a6..456539cd 100644
--- a/frontend/src/components/MapModal/index.vue
+++ b/frontend/src/components/MapModal/index.vue
@@ -603,15 +603,11 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
       tabsConfig.value = newTabs;
     } else {
       let arr = ['DW', 'DW_1', 'DW_2', 'DW_3', 'DW_4', 'DW_5', 'DW_6'];
-        if (arr.includes(modelStore.params.sttp)) {
-          tabsConfig.value = newTabs.filter(
-            (item: any) => item.type == 'basic'
-          );
-        } else {
-          tabsConfig.value = newTabs.filter(
-            (item: any) => item.type != 'video'
-          );
-        }
+      if (arr.includes(modelStore.params.sttp)) {
+        tabsConfig.value = newTabs.filter((item: any) => item.type == 'basic');
+      } else {
+        tabsConfig.value = newTabs.filter((item: any) => item.type != 'video');
+      }
     }
   } catch (error) {
     console.error('QGC Tab 过滤失败:', error);
diff --git a/frontend/src/components/MapModal/setting.config.ts b/frontend/src/components/MapModal/setting.config.ts
index 5fcd12b4..d60bcf96 100644
--- a/frontend/src/components/MapModal/setting.config.ts
+++ b/frontend/src/components/MapModal/setting.config.ts
@@ -54,38 +54,35 @@ const ENGTabs: Array<any> = [
         key: 'DesignParameterChangePrompt',
         type: 'table',
         hiddenChart: true,
-        tableUrl: '/dec-lygk-base-server/base/engWarning/GetKendoList'
+        tableUrl: '/base/engWarning/GetKendoList'
       },
       {
         name: '施工期环保措施落实预警',
         key: 'ImplementEarlyWarning',
         type: 'table',
         hiddenChart: true,
-        tableUrl:
-          '/dec-lygk-base-server/base/engWarning/sgqhbss/GetKendoListCust'
+        tableUrl: '/base/engWarning/sgqhbss/GetKendoListCust'
       },
       {
         name: '环保设施建设预警',
         key: 'ConstructionEarlyWarning',
         type: 'table',
         hiddenChart: true,
-        tableUrl:
-          '/dec-lygk-base-server/base/engWarning/hbssjs/GetKendoListCust'
+        tableUrl: '/base/engWarning/hbssjs/GetKendoListCust'
       },
       {
         name: '环保设施运行预警',
         key: 'RunEarlyWarning',
         type: 'table',
         hiddenChart: true,
-        tableUrl:
-          '/dec-lygk-base-server/base/engWarning/hbssyx/GetKendoListCust'
+        tableUrl: '/base/engWarning/hbssyx/GetKendoListCust'
       },
       {
         name: '鱼类放流预警',
         key: 'ReleaseEarlyWarning',
         type: 'table',
         hiddenChart: true,
-        tableUrl: '/dec-lygk-base-server/base/engWarning/ylfl/GetKendoListCust'
+        tableUrl: '/base/engWarning/ylfl/GetKendoListCust'
       }
     ]
   },
@@ -1185,7 +1182,7 @@ const handleTabs = (modaldata: any) => {
     //         }
     //     case 'FH':
     //         return FHTabs
-  //  {
+    //  {
 
     case 'VD_FB':
     case 'VD_FP':
diff --git a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/Animal.vue b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/Animal.vue
index 17970cea..158004de 100644
--- a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/Animal.vue
+++ b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/Animal.vue
@@ -29,22 +29,25 @@
       </a-carousel>
     </a-spin>
     <div class="monitor-table">
-      <BasicTable
-        ref="tableRef"
-        :scrollY="300"
-        :scrollX="tableScrollX"
-        :columns="tableColumns"
-        :list-url="getTableList"
-        :transform-data="transformTableData"
-        :enableRowHighlight="true"
-        row-key="_rowKey"
-        :paginationConfig="{
-          showSizeChanger: false,
-          showQuickJumper: false
-        }"
-        @row-click="handleRowClick"
-        @data-loaded="handleDataLoaded"
-      />
+      <a-spin :spinning="tableLoading" tip="加载中...">
+        <BasicTable
+          ref="tableRef"
+          :scrollY="300"
+          :scrollX="tableScrollX"
+          :columns="tableColumns"
+          :list-url="getTableList"
+          :transform-data="transformTableData"
+          :enableRowHighlight="true"
+          row-key="_rowKey"
+          :paginationConfig="{
+            showSizeChanger: false,
+            showQuickJumper: false
+          }"
+          @row-click="handleRowClick"
+          @data-loaded="handleDataLoaded"
+          @sort-change="handleSortChange"
+        />
+      </a-spin>
     </div>
   </SidePanelItem>
 </template>
@@ -64,6 +67,7 @@ const DEFAULT_PAGE_SIZE = 20;
 
 const tableRef = ref();
 const year = ref<string>('');
+const tableLoading = ref(false);
 const tableColumns = ref([
   {
     title: '种类',
@@ -78,6 +82,7 @@ const tableColumns = ref([
   {
     title: '救助数量(只)',
     dataIndex: 'tecnt',
+    sort: true,
     width: 98
   },
   {
@@ -126,8 +131,9 @@ const handleRowClick = (record: any) => {
   loadImages(record);
 };
 
-// 数据加载完成后默认展示第一条的照片；无数据时清空图片
+// 数据加载完成后默认展示第一条的照片；无数据时清空图片；清除表格加载状态
 const handleDataLoaded = (params: any, data: any) => {
+  tableLoading.value = false;
   const records = data?.records || [];
   if (records.length > 0) {
     loadImages(records[0]);
@@ -136,6 +142,11 @@ const handleDataLoaded = (params: any, data: any) => {
   }
 };
 
+// 表格排序变化时显示加载状态
+const handleSortChange = () => {
+  tableLoading.value = true;
+};
+
 // ==================== 年份与数据查询 ====================
 const getDefaultYear = (yearList: any[]) => {
   const firstItem = yearList?.[0];
@@ -205,7 +216,10 @@ const getTableList = (params: any) => {
 
 const refreshTable = () => {
   if (!modelStore.selectedAnchorPoint?.stcd || !year.value) return;
-  tableRef.value?.getList(buildFilter());
+  if (tableRef.value) {
+    tableLoading.value = true;
+    tableRef.value.getList(buildFilter());
+  }
 };
 
 // 获取年份列表并赋值默认年份（年份列表第一个），然后自动查询
@@ -234,6 +248,7 @@ const getYearList = async () => {
     refreshTable();
   } catch (error) {
     console.error('获取年份列表失败:', error);
+    tableLoading.value = false;
     if (tableRef.value) {
       tableRef.value.loading = false;
     }
diff --git a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/FlowMeasure.vue b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/FlowMeasure.vue
index 3eb6fbd3..62f9d7e2 100644
--- a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/FlowMeasure.vue
+++ b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/FlowMeasure.vue
@@ -23,17 +23,20 @@
         />
       </div>
       <div class="monitor-table">
-        <BasicTable
-          ref="tableRef"
-          :scrollY="240"
-          :scrollX="tableScrollX"
-          :columns="tableColumns"
-          :data="tableData"
-          :paginationConfig="{
-            showSizeChanger: false,
-            showQuickJumper: false
-          }"
-        />
+        <a-spin :spinning="tableLoading" tip="加载中...">
+          <BasicTable
+            ref="tableRef"
+            :scrollY="240"
+            :scrollX="tableScrollX"
+            :columns="tableColumns"
+            :data="tableData"
+            :paginationConfig="{
+              showSizeChanger: false,
+              showQuickJumper: false
+            }"
+            @sort-change="handleSortChange"
+          />
+        </a-spin>
       </div>
     </a-spin>
   </SidePanelItem>
@@ -55,6 +58,7 @@ import { getFlowStationList } from '@/api/DataQueryMenuModule';
 import { useModelStore } from '@/store/modules/model';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import BasicTable from '@/components/BasicTable/index.vue';
+import { useServerSortTableData } from '@/hooks/useServerSortTableData';
 import { DateSetting } from '@/utils/enumeration';
 
 const uiStore = useUiStore();
@@ -62,7 +66,6 @@ const modelStore = useModelStore();
 
 const isLoading = ref(false);
 const chartData = ref<any[]>([]);
-const tableData = ref<any[]>([]);
 const tableRef = ref<any>();
 
 const isDataEmpty = computed(() => {
@@ -344,27 +347,31 @@ const tableColumns = [
     dataIndex: 'tm',
     width: 160,
     fixed: 'left',
+    sort: true,
     customRender: ({ text }: any) =>
       text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-'
   },
   {
     title: '水位(m)',
     dataIndex: 'z',
-    width: 120,
+    width: 90,
+    sort: true,
     customRender: ({ text }: any) =>
       text !== undefined && text !== null ? Number(text).toFixed(2) : '-'
   },
   {
     title: '流量(m³/s)',
     dataIndex: 'q',
-    width: 130,
+    width: 100,
+    sort: true,
     customRender: ({ text }: any) =>
       text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
   },
   {
     title: '流速(m³/s)',
     dataIndex: 'v',
-    width: 130,
+    width: 100,
+    sort: true,
     customRender: ({ text }: any) =>
       text !== undefined && text !== null ? Number(text).toFixed(2) : '-'
   }
@@ -379,41 +386,56 @@ const tableScrollX = computed(() => {
 });
 
 // ==================== 数据请求 ====================
+// 构造表格/图表请求参数（stcd + 时间范围），排序传入时叠加 sort
+const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
+  const stcd = modelStore.selectedAnchorPoint?.stcd;
+  if (!dateRange.value || !stcd) return null;
+  return {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: stcd
+        },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
+        }
+      ]
+    },
+    sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
+  };
+};
+
+// data 模式表格：点击排序时重新请求接口（服务端排序）
+const {
+  tableData,
+  isLoading: tableLoading,
+  handleSortChange
+} = useServerSortTableData<any>({
+  request: getFlowStationList,
+  buildSearchParams
+});
+
 // 数据请求（查询参数取 modelStore.selectedAnchorPoint）
 const fetchData = async () => {
-  const stcd = modelStore.selectedAnchorPoint?.stcd;
-  if (!dateRange.value || !stcd) return;
+  const params = buildSearchParams();
+  if (!params) return;
   isLoading.value = true;
 
   try {
-    const filterParams = {
-      filter: {
-        logic: 'and',
-        filters: [
-          {
-            field: 'stcd',
-            operator: 'eq',
-            dataType: 'string',
-            value: stcd
-          },
-          {
-            field: 'tm',
-            operator: 'gte',
-            dataType: 'date',
-            value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
-          },
-          {
-            field: 'tm',
-            operator: 'lte',
-            dataType: 'date',
-            value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
-          }
-        ]
-      },
-      sort: [{ field: 'tm', dir: 'asc' }]
-    };
-
-    const res = await getFlowStationList(filterParams);
+    const res = await getFlowStationList(params);
     const rawData = res?.data?.data || res?.data?.records || [];
 
     tableData.value = [...rawData].reverse();
diff --git a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterQuality.vue b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterQuality.vue
index e384e2ab..c0f140bb 100644
--- a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterQuality.vue
+++ b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterQuality.vue
@@ -34,17 +34,20 @@
         />
       </div>
       <div class="monitor-table">
-        <BasicTable
-          ref="tableRef"
-          :scrollY="240"
-          :scrollX="tableScrollX"
-          :columns="currentColumns"
-          :data="tableData"
-          :paginationConfig="{
-            showSizeChanger: false,
-            showQuickJumper: false
-          }"
-        />
+        <a-spin :spinning="tableLoading" tip="加载中...">
+          <BasicTable
+            ref="tableRef"
+            :scrollY="240"
+            :scrollX="tableScrollX"
+            :columns="currentColumns"
+            :data="tableData"
+            :paginationConfig="{
+              showSizeChanger: false,
+              showQuickJumper: false
+            }"
+            @sort-change="handleSortChange"
+          />
+        </a-spin>
       </div>
     </a-spin>
   </SidePanelItem>
@@ -70,13 +73,13 @@ import { useModelStore } from '@/store/modules/model';
 import { useUiStore } from '@/store/modules/ui';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import BasicTable from '@/components/BasicTable/index.vue';
+import { useServerSortTableData } from '@/hooks/useServerSortTableData';
 import { DateSetting } from '@/utils/enumeration';
 
 const uiStore = useUiStore();
 const modelStore = useModelStore();
 
 const isLoading = ref(false);
-const tableData = ref<any[]>([]);
 const chartData = ref<any[]>([]);
 const tableRef = ref<any>();
 
@@ -161,24 +164,28 @@ const fixedColumns = [
   {
     title: '时间',
     dataIndex: 'tm',
-    width: 160,
+    width: 140,
+    sort: true,
     customRender: ({ text }: any) =>
       text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
   },
   {
     title: '水质要求',
     dataIndex: 'wwqtgName',
-    width: 100
+    sort: true,
+    width: 90
   },
   {
     title: '水质等级',
     dataIndex: 'wqgrdName',
-    width: 100
+    sort: true,
+    width: 90
   },
   {
     title: '是否达标',
     dataIndex: 'sfdb',
-    width: 100,
+    sort: true,
+    width: 90,
     customRender: ({ text }: any) => {
       const isUnqualified = text == 0; // 0是不达标，1是达标
       return {
@@ -201,7 +208,7 @@ const fixedQualityColumns = computed(() => {
 
     // 宽度判断：默认100，超过5个字140，超过6个字160
     const titleLen = title.length;
-    let width = 100;
+    let width = 80;
     if (titleLen > 6) {
       width = 160;
     } else if (titleLen > 5) {
@@ -215,6 +222,7 @@ const fixedQualityColumns = computed(() => {
       dataIndex,
       enabled: isEnabled,
       width,
+      sort: true,
       customRender: ({ text, record }: any) => {
         if (!isEnabled) return '-'; // enable=0 显示-
         if (text === undefined || text === null || text === '') return '-';
@@ -255,6 +263,7 @@ const fixedQualityColumns = computed(() => {
       title: '出库流量(m³/s)',
       dataIndex: 'qo',
       width: 140,
+      sort: true,
       customRender: ({ text }: any) => {
         if (text === undefined || text === null || text === '') return '-';
         const num = Number(text);
@@ -512,49 +521,67 @@ const bindLegendEvent = () => {
 };
 
 // ==================== 数据请求 ====================
+// 构造表格/图表请求参数（stcd + 时间范围），排序传入时叠加 sort
+const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
+  const stcd = modelStore.selectedAnchorPoint?.stcd;
+  if (!dateRange.value || !stcd) return null;
+  return {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: stcd
+        },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
+        }
+      ]
+    },
+    sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
+  };
+};
+
+// data 模式表格：点击排序时重新请求接口（服务端排序），仅请求列表接口
+const {
+  tableData,
+  isLoading: tableLoading,
+  handleSortChange
+} = useServerSortTableData<any>({
+  request: getMonitorDataWaterQualityList,
+  buildSearchParams
+});
+
 const fetchData = async () => {
   const stcd = modelStore.selectedAnchorPoint?.stcd;
   if (!dateRange.value || !stcd) return;
 
   isLoading.value = true;
   try {
-    const filterParams = {
-      filter: {
-        logic: 'and',
-        filters: [
-          {
-            field: 'stcd',
-            operator: 'eq',
-            dataType: 'string',
-            value: stcd
-          },
-          {
-            field: 'tm',
-            operator: 'gte',
-            dataType: 'date',
-            value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
-          },
-          {
-            field: 'tm',
-            operator: 'lte',
-            dataType: 'date',
-            value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
-          }
-        ]
-      },
-      sort: [{ field: 'tm', dir: 'asc' }]
-    };
+    const params = buildSearchParams();
+    if (!params) return;
 
     // 并发请求三个接口
     const [qualityRes, detailRes, listRes] = await Promise.all([
-      getMonitorDataWaterQuality(filterParams),
+      getMonitorDataWaterQuality(params),
       getMonitorDataWaterQualityDetail({
         stcd,
         tbCode: 'WQ_R',
         startTime: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss'),
         endTime: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
       }),
-      getMonitorDataWaterQualityList(filterParams)
+      getMonitorDataWaterQualityList(params)
     ]);
 
     // 判断是否显示综合分析（只有当data不为null且不为空数组时才显示）
diff --git a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterTemperature.vue b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterTemperature.vue
index 05655701..1ebad209 100644
--- a/frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterTemperature.vue
+++ b/frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterTemperature.vue
@@ -23,46 +23,49 @@
         />
       </div>
       <div class="monitor-table">
-        <BasicTable
-          ref="tableRef"
-          :scrollY="240"
-          :scrollX="tableScrollX"
-          :columns="currentColumns"
-          :data="tableData"
-          :paginationConfig="{
-            showSizeChanger: false,
-            showQuickJumper: false
-          }"
-        >
-          <template #summary>
-            <a-table-summary fixed>
-              <template
-                v-for="summaryRow in summaryRows"
-                :key="summaryRow.label"
-              >
-                <a-table-summary-row class="summary-row">
-                  <a-table-summary-cell :index="0">
-                    {{ summaryRow.label }}
-                  </a-table-summary-cell>
-                  <a-table-summary-cell
-                    v-for="col in summaryColumns"
-                    :key="col.dataIndex"
-                    :index="col.summaryIndex"
-                  >
-                    {{ summaryRow.cells[col.dataIndex]?.value ?? '-' }}
-                    <Tooltip
-                      v-if="summaryRow.cells[col.dataIndex]?.time"
-                      :title="`时间：${summaryRow.cells[col.dataIndex].time}`"
-                      placement="top"
+        <a-spin :spinning="tableLoading" tip="加载中...">
+          <BasicTable
+            ref="tableRef"
+            :scrollY="240"
+            :scrollX="tableScrollX"
+            :columns="currentColumns"
+            :data="tableData"
+            :paginationConfig="{
+              showSizeChanger: false,
+              showQuickJumper: false
+            }"
+            @sort-change="handleSortChange"
+          >
+            <template #summary>
+              <a-table-summary fixed>
+                <template
+                  v-for="summaryRow in summaryRows"
+                  :key="summaryRow.label"
+                >
+                  <a-table-summary-row class="summary-row">
+                    <a-table-summary-cell :index="0">
+                      {{ summaryRow.label }}
+                    </a-table-summary-cell>
+                    <a-table-summary-cell
+                      v-for="col in summaryColumns"
+                      :key="col.dataIndex"
+                      :index="col.summaryIndex"
                     >
-                      <InfoCircleOutlined class="summary-tip-icon" />
-                    </Tooltip>
-                  </a-table-summary-cell>
-                </a-table-summary-row>
-              </template>
-            </a-table-summary>
-          </template>
-        </BasicTable>
+                      {{ summaryRow.cells[col.dataIndex]?.value ?? '-' }}
+                      <Tooltip
+                        v-if="summaryRow.cells[col.dataIndex]?.time"
+                        :title="`时间：${summaryRow.cells[col.dataIndex].time}`"
+                        placement="top"
+                      >
+                        <InfoCircleOutlined class="summary-tip-icon" />
+                      </Tooltip>
+                    </a-table-summary-cell>
+                  </a-table-summary-row>
+                </template>
+              </a-table-summary>
+            </template>
+          </BasicTable>
+        </a-spin>
       </div>
     </a-spin>
   </SidePanelItem>
@@ -85,6 +88,7 @@ import { getMonitorDataWaterTemp } from '@/api/mapModal';
 import { useModelStore } from '@/store/modules/model';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import BasicTable from '@/components/BasicTable/index.vue';
+import { useServerSortTableData } from '@/hooks/useServerSortTableData';
 import { DateSetting } from '@/utils/enumeration';
 import { InfoCircleOutlined } from '@ant-design/icons-vue';
 
@@ -93,7 +97,6 @@ const modelStore = useModelStore();
 
 const isLoading = ref(false);
 const chartData = ref<any[]>([]);
-const tableData = ref<any[]>([]);
 const tableRef = ref<any>();
 
 // ==================== 图表 ====================
@@ -278,6 +281,7 @@ const baseWaterTempColumns = [
     title: '时间',
     dataIndex: 'tm',
     fixed: 'left',
+    sort: true,
     customRender: ({ text }: any) =>
       text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
   },
@@ -285,6 +289,7 @@ const baseWaterTempColumns = [
     title: '水温(°C)',
     dataIndex: 'wt',
     summary: true,
+    sort: true,
     customRender: ({ text }: any) =>
       text !== undefined && text !== null ? Number(text).toFixed(1) : '-'
   }
@@ -412,41 +417,55 @@ const summaryRows = computed(() => {
 });
 
 // ==================== 数据请求 ====================
-// 数据请求（查询参数取 modelStore.selectedAnchorPoint）
-const fetchData = async () => {
+// 构造表格/图表请求参数（stcd + 时间范围），排序传入时叠加 sort
+const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
   const stcd = modelStore.selectedAnchorPoint?.stcd;
-  if (!dateRange.value || !stcd) return;
+  if (!dateRange.value || !stcd) return null;
+  return {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: stcd
+        },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
+        }
+      ]
+    },
+    sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
+  };
+};
+
+// data 模式表格：点击排序时重新请求接口（服务端排序）
+const {
+  tableData,
+  isLoading: tableLoading,
+  handleSortChange
+} = useServerSortTableData<any>({
+  request: getMonitorDataWaterTemp,
+  buildSearchParams
+});
+
+const fetchData = async () => {
+  const params = buildSearchParams();
+  if (!params) return;
   isLoading.value = true;
 
   try {
-    const filterParams = {
-      filter: {
-        logic: 'and',
-        filters: [
-          {
-            field: 'stcd',
-            operator: 'eq',
-            dataType: 'string',
-            value: stcd
-          },
-          {
-            field: 'tm',
-            operator: 'gte',
-            dataType: 'date',
-            value: dateRange.value[0].format('YYYY-MM-DD HH:mm:ss')
-          },
-          {
-            field: 'tm',
-            operator: 'lte',
-            dataType: 'date',
-            value: dateRange.value[1].format('YYYY-MM-DD HH:mm:ss')
-          }
-        ]
-      },
-      sort: [{ field: 'tm', dir: 'asc' }]
-    };
-
-    const res = await getMonitorDataWaterTemp(filterParams);
+    const res = await getMonitorDataWaterTemp(params);
     const rawData = res?.data?.data || res?.data?.records || [];
 
     chartData.value = rawData;
diff --git a/frontend/src/modules/rightSearchDrawer/monitoringTable/index.vue b/frontend/src/modules/rightSearchDrawer/monitoringTable/index.vue
index 9262166f..092223f5 100644
--- a/frontend/src/modules/rightSearchDrawer/monitoringTable/index.vue
+++ b/frontend/src/modules/rightSearchDrawer/monitoringTable/index.vue
@@ -5,7 +5,7 @@
         2. 生态调查  陆生 水生
      -->
     <!-- 电站运行过程线 -->
-    <monitorInfoMod v-if="sttpValue == 'ENG'" />
+    <MonitorInfoMod v-if="sttpValue == 'ENG'" />
     <!-- 水温监控 -->
     <WaterTemperature v-if="sttpValue == 'WTRV'" />
     <!-- 垂向水温监控 -->
@@ -45,7 +45,7 @@ import { useModelStore } from '@/store/modules/model';
 import WaterTemperature from '@/modules/rightSearchDrawer/monitoringTable/components/WaterTemperature.vue';
 import VerticalWaterTemperature from '@/modules/rightSearchDrawer/monitoringTable/components/VerticalWaterTemperature.vue';
 import WaterQuality from '@/modules/rightSearchDrawer/monitoringTable/components/WaterQuality.vue';
-import monitorInfoMod from '@/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue';
+import MonitorInfoMod from '@/modules/rightSearchDrawer/monitoringTable/components/monitorInfo.vue';
 import GYZLLB from '@/modules/rightSearchDrawer/monitoringTable/components/GYZLLB.vue';
 import QXDInfo from '@/modules/rightSearchDrawer/monitoringTable/components/QXDInfo.vue';
 import FlowMeasure from '@/modules/rightSearchDrawer/monitoringTable/components/FlowMeasure.vue';
diff --git a/frontend/src/utils/popupHtmlGenerator.ts b/frontend/src/utils/popupHtmlGenerator.ts
index a85bfc8b..f33c7037 100644
--- a/frontend/src/utils/popupHtmlGenerator.ts
+++ b/frontend/src/utils/popupHtmlGenerator.ts
@@ -2665,7 +2665,7 @@ export function generatePopupHtml(
         <div class="${'iconEngDiv_' + props.anchoPointState} ${
         'iconEngDiv-' + props.anchoPointState + '-' + props?.bldsttCcode
       }">
-          <div class="iconDivTitle ${getTitleClass(titleClass)}">${title}</div>
+          <div class="iconDivTitle ${titleClass}">${title}</div>
           <div class="iconDivContent">
             <div class="iconDivLeft">
               <div>${transUnitRender(p?.ttpwr, 'Other', 'ZJRL')}</div>