添加电站预警提示

2026-09-03 16:47:28 +08:00 · 2026-09-03 16:47:28 +08:00 · d327e990eb
commit d327e990eb
parent f42a10f8b1
12 changed files with 481 additions and 269 deletions
--- a/frontend/src/assets/svg/for.svg
+++ 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>
--- a/frontend/src/assets/svg/not-building.svg
+++ 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>
--- 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)
+              )
            )
          );
        }
--- 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);
    }
--- 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);
--- 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':
--- 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;
    }
--- 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();
--- 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且不为空数组时才显示）
--- 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;
--- 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';
--- 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>
				`@ -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>`
				`@ -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>`