添加电站预警提示

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>

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>

frontend/src/components/BasicTable/index.vue

@@ -664,11 +664,8 @@ const enhancedColumns = computed(() => {
             },
             h(
               Tooltip,
-              {
+              { title: String(text) },
-                title: String(text)
+              h(
-              },
-              {
-                default: () =>    h(
                 'span',
                 {
                   style: {
@@ -681,7 +678,6 @@ const enhancedColumns = computed(() => {
                 },
                 String(text)
               )
-              }
             )
           );
         }

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',
+      dataIndex: 'stage',
-      key: 'majorChangeType'
+      key: 'stage'
     },
-    { title: '依据阶段', dataIndex: 'basisStage', key: 'basisStage' },
+    { title: '依据阶段', dataIndex: 'contrastphase', key: 'contrastphase' },
     {
       title: '有重大变动的阶段',
-      dataIndex: 'changedStage',
+      dataIndex: 'currentstage',
-      key: 'changedStage'
+      key: 'currentstage'
     },
     {
       title: '依据阶段数据',
-      dataIndex: 'basisStageData',
+      dataIndex: 'phasevalue',
-      key: 'basisStageData'
+      key: 'phasevalue'
     },
     {
       title: '重大变动阶段数据',
-      dataIndex: 'changedStageData',
+      dataIndex: 'stagevalue',
-      key: 'changedStageData'
+      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',
+      dataIndex: 'kyhzhb',
-      key: 'feasibilityApproval'
+      key: 'kyhzhb',
+      customRender: renderStatusIcon(true)
     },
     {
       title: '预可是否设计',
-      dataIndex: 'preFeasibilityDesign',
+      dataIndex: 'prdsgn',
-      key: 'preFeasibilityDesign'
+      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: '专项设计',
-    { title: '证明材料', dataIndex: 'proofMaterial', key: 'proofMaterial' }
+      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: 'stnm', key: 'stnm' },
-    { title: '行政区', dataIndex: 'district', key: 'district' },
+    { title: '行政区', dataIndex: 'addvnm', key: 'addvnm' },
-    { title: '流域', dataIndex: 'basin', key: 'basin' },
+    { title: '流域', dataIndex: 'rvnm', key: 'rvnm' },
     {
       title: '可研(核准)',
-      dataIndex: 'feasibilityApproval',
+      dataIndex: 'kyhzhb',
-      key: 'feasibilityApproval'
+      key: 'kyhzhb',
+      customRender: renderStatusIcon()
     },
     {
       title: '预可是否设计',
-      dataIndex: 'preFeasibilityDesign',
+      dataIndex: 'prdsgn',
-      key: 'preFeasibilityDesign'
+      key: 'prdsgn',
+      customRender: renderStatusIcon(true)
     },
     {
       title: '环评是否有要求',
-      dataIndex: 'eiaRequirement',
+      dataIndex: 'eiarqst',
-      key: 'eiaRequirement'
+      key: 'eiarqst',
+      customRender: renderStatusIcon(true)
     },
-    { title: '专项设计', dataIndex: 'specialDesign', key: 'specialDesign' },
+    {
-    { title: '建设', dataIndex: 'construction', key: 'construction' },
+      title: '专项设计',
-    { title: '证明材料', dataIndex: 'proofMaterial', key: 'proofMaterial' }
+      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: 'year', key: 'year' },
-    { title: '鱼类', dataIndex: 'fishType', key: 'fishType' },
+    { title: '鱼类', dataIndex: 'ftp', key: 'ftp' },
-    { title: '放鱼规格(cm)', dataIndex: 'fishSpec', key: 'fishSpec' },
+    { title: '放鱼规格(cm)', dataIndex: 'fsz', key: 'fsz' },
-    { title: '放鱼数量(尾)', dataIndex: 'fishCount', key: 'fishCount' },
+    { title: '放鱼数量(尾)', dataIndex: 'fcnt', key: 'fcnt' },
-    { title: '放流地点', dataIndex: 'releaseLocation', key: 'releaseLocation' },
+    { title: '放流地点', dataIndex: 'stlc', key: 'stlc' },
-    { title: '所在河流', dataIndex: 'river', key: 'river' },
+    { title: '所在河流', dataIndex: 'rvnm', key: 'rvnm' },
-    { title: '鱼龄(年)', dataIndex: 'fishAge', key: 'fishAge' },
+    { title: '鱼龄(年)', dataIndex: 'fage', key: 'fage' },
-    { title: '标记方式', dataIndex: 'markMethod', key: 'markMethod' },
+    { title: '标记方式', dataIndex: 'bjtp', key: 'bjtp' },
-    { title: '标记种类', dataIndex: 'markType', key: 'markType' },
+    { title: '标记种类', dataIndex: 'bjftp', key: 'bjftp' },
-    { title: '标记数量(尾)', dataIndex: 'markCount', key: 'markCount' },
+    { title: '标记数量(尾)', dataIndex: 'bjfcnt', key: 'bjfcnt' },
-    { title: '运行状态', dataIndex: 'runStatus', key: 'runStatus' }
+    { 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) {
+  nextTick(() => {
-    tableRef.value.refresh();
+    const table = tableRefMap.value[key];
+    if (table) {
+      table.getList(buildFilter());
     }
+  });
 };
 
 // 监听 isActive 变化，首次激活时请求数据
@@ -170,8 +307,9 @@ watch(
       hasLoaded.value = true;
       // 首次加载当前 tab 数据
       setTimeout(() => {
-        if (tableRef.value) {
+        const table = tableRefMap.value[activeTabKey.value];
-          //   tableRef.value.getList();
+        if (table) {
+          table.getList(buildFilter());
         }
       }, 100);
     }

frontend/src/components/MapModal/index.vue

@@ -604,13 +604,9 @@ const setQGCTabList = async (_tabs: any, stcd: string) => {
     } 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(
+        tabsConfig.value = newTabs.filter((item: any) => item.type == 'basic');
-            (item: any) => item.type == 'basic'
-          );
       } else {
-          tabsConfig.value = newTabs.filter(
+        tabsConfig.value = newTabs.filter((item: any) => item.type != 'video');
-            (item: any) => item.type != 'video'
-          );
       }
     }
   } catch (error) {

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:
+        tableUrl: '/base/engWarning/sgqhbss/GetKendoListCust'
-          '/dec-lygk-base-server/base/engWarning/sgqhbss/GetKendoListCust'
       },
       {
         name: '环保设施建设预警',
         key: 'ConstructionEarlyWarning',
         type: 'table',
         hiddenChart: true,
-        tableUrl:
+        tableUrl: '/base/engWarning/hbssjs/GetKendoListCust'
-          '/dec-lygk-base-server/base/engWarning/hbssjs/GetKendoListCust'
       },
       {
         name: '环保设施运行预警',
         key: 'RunEarlyWarning',
         type: 'table',
         hiddenChart: true,
-        tableUrl:
+        tableUrl: '/base/engWarning/hbssyx/GetKendoListCust'
-          '/dec-lygk-base-server/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'
       }
     ]
   },

frontend/src/modules/rightSearchDrawer/monitoringTable/components/Animal.vue

@@ -29,6 +29,7 @@
       </a-carousel>
     </a-spin>
     <div class="monitor-table">
+      <a-spin :spinning="tableLoading" tip="加载中...">
         <BasicTable
           ref="tableRef"
           :scrollY="300"
@@ -44,7 +45,9 @@
           }"
           @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;
     }

frontend/src/modules/rightSearchDrawer/monitoringTable/components/FlowMeasure.vue

@@ -23,6 +23,7 @@
         />
       </div>
       <div class="monitor-table">
+        <a-spin :spinning="tableLoading" tip="加载中...">
           <BasicTable
             ref="tableRef"
             :scrollY="240"
@@ -33,7 +34,9 @@
               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,14 +386,11 @@ const tableScrollX = computed(() => {
 });
 
 // ==================== 数据请求 ====================
-// 数据请求（查询参数取 modelStore.selectedAnchorPoint）
+// 构造表格/图表请求参数（stcd + 时间范围），排序传入时叠加 sort
-const fetchData = async () => {
+const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
   const stcd = modelStore.selectedAnchorPoint?.stcd;
-  if (!dateRange.value || !stcd) return;
+  if (!dateRange.value || !stcd) return null;
-  isLoading.value = true;
+  return {
-
-  try {
-    const filterParams = {
     filter: {
       logic: 'and',
       filters: [
@@ -410,10 +414,28 @@ const fetchData = async () => {
         }
       ]
     },
-      sort: [{ field: 'tm', dir: 'asc' }]
+    sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
   };
+};
 
-    const res = await getFlowStationList(filterParams);
+// data 模式表格：点击排序时重新请求接口（服务端排序）
+const {
+  tableData,
+  isLoading: tableLoading,
+  handleSortChange
+} = useServerSortTableData<any>({
+  request: getFlowStationList,
+  buildSearchParams
+});
+
+// 数据请求（查询参数取 modelStore.selectedAnchorPoint）
+const fetchData = async () => {
+  const params = buildSearchParams();
+  if (!params) return;
+  isLoading.value = true;
+
+  try {
+    const res = await getFlowStationList(params);
     const rawData = res?.data?.data || res?.data?.records || [];
 
     tableData.value = [...rawData].reverse();

frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterQuality.vue

@@ -34,6 +34,7 @@
         />
       </div>
       <div class="monitor-table">
+        <a-spin :spinning="tableLoading" tip="加载中...">
           <BasicTable
             ref="tableRef"
             :scrollY="240"
@@ -44,7 +45,9 @@
               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,13 +521,11 @@ const bindLegendEvent = () => {
 };
 
 // ==================== 数据请求 ====================
-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 {
-  isLoading.value = true;
-  try {
-    const filterParams = {
     filter: {
       logic: 'and',
       filters: [
@@ -542,19 +549,39 @@ const fetchData = async () => {
         }
       ]
     },
-      sort: [{ field: 'tm', dir: 'asc' }]
+    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 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且不为空数组时才显示）

frontend/src/modules/rightSearchDrawer/monitoringTable/components/WaterTemperature.vue

@@ -23,6 +23,7 @@
         />
       </div>
       <div class="monitor-table">
+        <a-spin :spinning="tableLoading" tip="加载中...">
           <BasicTable
             ref="tableRef"
             :scrollY="240"
@@ -33,6 +34,7 @@
               showSizeChanger: false,
               showQuickJumper: false
             }"
+            @sort-change="handleSortChange"
           >
             <template #summary>
               <a-table-summary fixed>
@@ -63,6 +65,7 @@
               </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,14 +417,11 @@ const summaryRows = computed(() => {
 });
 
 // ==================== 数据请求 ====================
-// 数据请求（查询参数取 modelStore.selectedAnchorPoint）
+// 构造表格/图表请求参数（stcd + 时间范围），排序传入时叠加 sort
-const fetchData = async () => {
+const buildSearchParams = (sort?: { field: string; dir: 'asc' | 'desc' }) => {
   const stcd = modelStore.selectedAnchorPoint?.stcd;
-  if (!dateRange.value || !stcd) return;
+  if (!dateRange.value || !stcd) return null;
-  isLoading.value = true;
+  return {
-
-  try {
-    const filterParams = {
     filter: {
       logic: 'and',
       filters: [
@@ -443,10 +445,27 @@ const fetchData = async () => {
         }
       ]
     },
-      sort: [{ field: 'tm', dir: 'asc' }]
+    sort: sort ? [sort] : [{ field: 'tm', dir: 'asc' }]
   };
+};
 
-    const res = await getMonitorDataWaterTemp(filterParams);
+// 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 res = await getMonitorDataWaterTemp(params);
     const rawData = res?.data?.data || res?.data?.records || [];
 
     chartData.value = rawData;

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';

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>