From 4fce47618b414c04916581ead6c2e64903f61d7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Thu, 4 Jun 2026 11:42:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=96=E6=81=AF=E5=9C=B0=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=EF=BC=8C=E5=8A=A0BasicTabl?=
 =?UTF-8?q?e=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=E8=B6=85=E5=87=BA?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=92=8C=E6=96=87=E5=AD=97=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=8C=E5=A6=82=E6=9E=9C=E6=9C=89=E7=A9=BA=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=B0=B1=E6=98=BE=E7=A4=BA-=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/qxd/index.ts                 | 10 +--
 frontend/src/components/BasicTable/index.vue  | 89 +++++++++++++++----
 .../qixidiheduanjianceqingkuangEJ/index.vue   | 88 ++++++++++++------
 .../modules/qixidiliuliangbianhua/index.vue   |  3 +-
 .../modules/qixidishuiwenbianhua/index.vue    | 35 +++++---
 5 files changed, 161 insertions(+), 64 deletions(-)

diff --git a/frontend/src/api/qxd/index.ts b/frontend/src/api/qxd/index.ts
index e62f5109..9f9a8456 100644
--- a/frontend/src/api/qxd/index.ts
+++ b/frontend/src/api/qxd/index.ts
@@ -2,7 +2,7 @@ import request from '@/utils/request';
 //栖息地保护工作开展情况
 export function fhGetKendoListCust(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/fh/GetKendoListCust',
+    url: '/fh/GetKendoListCust',
     method: 'post',
     data
   });
@@ -10,7 +10,7 @@ export function fhGetKendoListCust(data: any) {
 //获取所属栖息地
 export function msstbprptGetKendoList(data: any) {
   return request({
-    url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
+    url: '/fh/msstbprpt/GetKendoList',
     method: 'post',
     data
   });
@@ -18,7 +18,7 @@ export function msstbprptGetKendoList(data: any) {
 //水温监测数据 
 export function sdrvwtsGetKendoList(data: any) {
   return request({
-    url: '/api/wmp-env-server/base/sdrvwts/GetKendoList',
+    url: '/fh/sdrvwts/GetKendoList',
     method: 'post',
     data
   });
@@ -26,7 +26,7 @@ export function sdrvwtsGetKendoList(data: any) {
 //水文监测 
 export function sdriverdaysGetKendoList(data: any) {
   return request({
-    url: '/api/wmp-swqx-server/zq/sdriverdays/GetKendoList',
+    url: '/fh/zq/sdriverdays/GetKendoList',
     method: 'post',
     data
   });
@@ -34,7 +34,7 @@ export function sdriverdaysGetKendoList(data: any) {
 //主要栖息地基本信息
 export function fhGetKendoListCustom(data: any) {
   return request({
-    url: '/api/wmp-env-server/env/fh/GetKendoListCustom',
+    url: '/fh/GetKendoListCustom',
     method: 'post',
     data
   });
diff --git a/frontend/src/components/BasicTable/index.vue b/frontend/src/components/BasicTable/index.vue
index 8d56bd12..16d1c5d3 100644
--- a/frontend/src/components/BasicTable/index.vue
+++ b/frontend/src/components/BasicTable/index.vue
@@ -1,16 +1,8 @@
 <template>
   <div class="table-container" ref="tableContainerRef">
-    <a-table
-      size="small"
-      :loading="loading"
-      :row-selection="enableRowSelection ? rowSelection : undefined"
-      :data-source="tableData"
-      :columns="columns"
-      :pagination="paginationConfig"
-      :scroll="scrollConfig"
-      :row-key="rowKey"
-      @change="handleTableChange"
-    >
+    <a-table size="small" :loading="loading" :row-selection="enableRowSelection ? rowSelection : undefined"
+      :data-source="tableData" :columns="enhancedColumns" :pagination="paginationConfig" :scroll="scrollConfig"
+      :row-key="rowKey" @change="handleTableChange">
       <!-- 透传插槽，支持自定义列内容 -->
       <template v-for="slot in Object.keys($slots)" #[slot]="scope" :key="slot">
         <slot :name="slot" v-bind="scope"></slot>
@@ -20,7 +12,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, nextTick } from "vue";
+import { ref, computed, onMounted, watch, nextTick, h } from "vue";
+import { Tooltip } from "ant-design-vue";
 import { calcTableScrollY } from "@/utils/index";
 
 // --- Types ---
@@ -36,6 +29,10 @@ interface Props {
   isPage?: boolean;
   getCheckboxProps?: (record: any) => any;
   transformData?: (res: any) => { records: any[]; total: number };
+  emptyPlaceholder?: string; // 新增：空值占位符
+  processEmptyValues?: boolean; // 新增：是否开启空值处理
+  enableEllipsis?: boolean; // 新增：是否开启超出隐藏
+  enableSort?: boolean; // 新增：是否启用排序功能
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -48,11 +45,16 @@ const props = withDefaults(defineProps<Props>(), {
   getCheckboxProps: undefined,
   transformData: undefined,
   scrollY: undefined,
+  emptyPlaceholder: "-",
+  processEmptyValues: true, // 默认开启
+  enableEllipsis: true, // 默认开启
+  enableSort: false, // 默认关闭，确保旧代码不受影响
 });
 
 const emit = defineEmits<{
   (e: "data-loaded", params: any, data: any): void;
   (e: "selection-change", selectedRowKeys: string[], selectedRows: any[]): void;
+  (e: "sort-change", sortInfo: { field: string; order: 'ascend' | 'descend' | null }): void;
 }>();
 
 // --- State ---
@@ -147,7 +149,7 @@ const getList = async (filter?: Record<string, any>) => {
       finalTotal = res.data?.data?.total || res?.data?.total || res?.total || 0;
     }
 
-    tableData.value = finalRecords;
+    tableData.value = processData(finalRecords);
     total.value = finalTotal;
     emit("data-loaded", params, { records: finalRecords, total: finalTotal });
   } catch (error) {
@@ -159,10 +161,19 @@ const getList = async (filter?: Record<string, any>) => {
   }
 };
 
-const handleTableChange = (pag: any) => {
+const handleTableChange = (pag: any, filters: any, sorter: any) => {
   page.value = pag.current;
   size.value = pag.pageSize;
-  getList();
+  if (props.enableSort) {
+    if (sorter && sorter.field) {
+      emit("sort-change", { field: sorter.field, order: sorter.order });
+    } else {
+      emit("sort-change", { field: '', order: null });
+    }
+  }else {
+    getList();
+  }
+  
 };
 
 const reset = () => {
@@ -197,6 +208,52 @@ defineExpose({
 const observer = new ResizeObserver(() => {
   tableScrollY.value = calcTableScrollY(tableContainerRef.value);
 });
+
+// --- 空值处理工具函数 ---
+const processData = (records: any[]) => {
+  if (!props.processEmptyValues || !Array.isArray(records)) return records;
+
+  return records.map(record => {
+    const processedRecord: any = { ...record };
+    for (const key in processedRecord) {
+      if (Object.prototype.hasOwnProperty.call(processedRecord, key)) {
+        const val = processedRecord[key];
+        if (val === null || val === undefined || val === "") {
+          processedRecord[key] = props.emptyPlaceholder;
+        }
+      }
+    }
+    return processedRecord;
+  });
+};
+
+// --- 列配置增强（超出隐藏 + Tooltip）---
+const enhancedColumns = computed(() => {
+  if (!props.enableEllipsis) return props.columns;
+
+  return props.columns.map(col => {
+    if (col.customRender) {
+      return col; // 如果已有自定义渲染，则不覆盖
+    }
+
+    return {
+      ...col,
+      ellipsis: true, // 启用 Ant Design Vue 原生的 ellipsis 支持
+      customRender: ({ text }: any) => {
+        const content = String(text ?? props.emptyPlaceholder);
+        return h(
+          Tooltip,
+          { title: content },
+          () => h('div', {
+            class: 'table-cell-ellipsis',
+            style: { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }
+          }, content)
+        );
+      },
+    };
+  });
+});
+
 onMounted(() => {
   nextTick(() => {
     tableScrollY.value = calcTableScrollY(tableContainerRef.value);
@@ -205,7 +262,7 @@ onMounted(() => {
     }
   });
   if (props.data && props.data.length > 0) {
-    tableData.value = props.data || [];
+    tableData.value = processData(props.data);
   }
 });
 </script>
diff --git a/frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue b/frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue
index 79aeb815..bb17a347 100644
--- a/frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue
+++ b/frontend/src/modules/qixidibaohugongzuokaizhanQK/qixidiheduanjianceqingkuangEJ/index.vue
@@ -11,7 +11,7 @@
                 <a-select v-model:value="searchData.baseId" placeholder="请选择所属基地" style="width: 200px" show-search
                     :filter-option="filterOption" :options="jiDiList" @change="handleHydropowerStationChange" />
                 <div>所属栖息地:</div>
-                <a-select v-model:value="searchData.fhstcd" placeholder=" " style="width: 200px" allow-clear show-search
+                <a-select v-model:value="searchData.fhstcd" placeholder=" " style="width: 200px"  show-search
                     :filter-option="filterOption" :options="stationOptions" />
                 <a-input v-model:value="searchData.stnm" placeholder="请输入电站或设施名称" style="width: 200px" allow-clear />
 
@@ -22,8 +22,8 @@
             </a-space>
         </div>
         <!-- 列表 -->
-        <BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="fhGetKendoListCust"
-            :search-params="{ sort: sortConfig }" :transform-data="customTransform">
+        <BasicTable ref="tableRef" :scrollY="360" :columns="columns" :list-url="fhGetKendoListCust" :enable-sort="true"  @sort-change="handleSortChange"
+            :search-params="searchParams" :transform-data="customTransform">
             <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'ennm'">
                     <a @click="handleViewDetail(record, 'dz')" class="text-link">
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed, watch, onMounted,nextTick } from 'vue'
 import { msstbprptGetKendoList, fhGetKendoListCust } from '@/api/qxd'
 import BasicTable from '@/components/BasicTable/index.vue'
 import { useModelStore } from "@/store/modules/model";
@@ -67,6 +67,7 @@ const searchData = ref<any>({
 const modelStore = useModelStore();
 const tableRef = ref()
 const stationOptions: any = ref([])
+
 // ==================== 基地列表数据(硬编码) ====================
 const jiDiList: any = ref([
     {
@@ -151,67 +152,78 @@ const columns = [
         key: 'stnm',
         title: '设施名称',
         dataIndex: 'stnm',
-        width: '176px'
+        width: '176px',
+        sorter: true,
     },
     {
         key: 'baseName',
         title: '所在基地',
         dataIndex: 'baseName',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         key: 'ennm',
         title: '所属电站',
         dataIndex: 'ennm',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         key: 'fhstnm',
         title: '所属栖息地',
         dataIndex: 'fhstnm',
-        width: '176px'
+        width: '176px',
+        sorter: true,
     },
     {
         key: 'ststdt',
         title: '开工日期',
         dataIndex: 'ststdt',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         key: 'esstdt',
         title: '建成日期',
         dataIndex: 'esstdt',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         key: 'mway',
         title: '监测方式',
         dataIndex: 'mway',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         key: 'vlsr',
         title: '数据接入来源',
         dataIndex: 'vlsr',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         key: 'hydrodtin_type',
         title: '数据接入类型',
         dataIndex: 'hydrodtinType',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         key: 'enable',
         title: '是否启用',
         dataIndex: 'enable',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         key: 'dtin',
         title: '是否接入',
         dataIndex: 'dtin',
-        width: '150px'
+        width: '150px',
+        sorter: true,
     },
     {
         title: '操作',
@@ -221,9 +233,29 @@ const columns = [
         fixed: 'right' as const
     }
 ];
-// 排序配置
-const sortConfig = computed(() => [
-    {
+// 1. 定义排序状态
+const sortState = ref<{ field: string; order: string } | null>(null);
+// 2. 处理排序事件（仅更新状态，不调用请求）
+const handleSortChange = (info: { field: string; order: string | null }) => {
+  if (info.field) {
+    sortState.value = info;
+  } else {
+    sortState.value = null; // 恢复默认排序
+  }
+  nextTick(() => {
+    handleSearch()
+  });
+}
+const searchParams = computed(() => {
+  const params: any = { group: [],groupResultFlat: false,select:[] };
+  if (sortState.value) {
+    // 转换为后端需要的格式，例如 [{ field: 'name', dir: 'asc' }]
+    params.sort = [{ 
+      field: sortState.value.field, 
+      dir: sortState.value.order === 'ascend' ? 'asc' : 'desc' 
+    }];
+  }else{
+    params.sort = [{
         "field": "baseStepSort",
         "dir": "asc"
     },
@@ -234,8 +266,11 @@ const sortConfig = computed(() => [
     {
         "field": "rstcdStepSort",
         "dir": "asc"
-    }
-])
+    }]
+  }
+  
+  return params;
+});
 const handleTabChange = (key: string) => {
     console.log('【Tab切换】', key)
     tabIndex.value = key
@@ -299,7 +334,7 @@ const handleSearch = () => {
         searchData.value.baseId != 'all' ? {
             "field": "baseId",
             "operator": "eq",
-            "value": "01"
+            "value": searchData.value.baseId 
         } : null,
         searchData.value.fhstcd != 'all' ? {
             "field": "fhstcd",
@@ -353,8 +388,6 @@ const customTransform = (res: any) => {
 }
 // 查看详情
 const handleViewDetail = (record: any, type: any) => {
-    console.log(tabIndex.value)
-    debugger
     if (type == 'dz') {
         modelStore.modalVisible = true;
         modelStore.params.sttp = "ENG";
@@ -379,10 +412,11 @@ const handleViewDetail = (record: any, type: any) => {
             modelStore.title = record.stnm + " 详情信息";
             modelStore.params.stcd = record.stcd;
         } else if (tabIndex.value == 'VD') {
-            // modelStore.modalVisible = true;
-            // modelStore.params.sttp = "fh_zq_point";
-            // modelStore.title = record.stnm + " 详情信息";
-            // modelStore.params.stcd = record.stcd;
+            modelStore.modalVisible = true;
+            modelStore.params.sttp = "stinfo_ai_video_point";
+            modelStore.title = "视频监控站详情信息";
+            modelStore.isBasicEdit = true;
+            modelStore.params.stcd = record.stcd;
         }
 
     }
diff --git a/frontend/src/modules/qixidiliuliangbianhua/index.vue b/frontend/src/modules/qixidiliuliangbianhua/index.vue
index 998f6429..6204a489 100644
--- a/frontend/src/modules/qixidiliuliangbianhua/index.vue
+++ b/frontend/src/modules/qixidiliuliangbianhua/index.vue
@@ -572,8 +572,7 @@ const getselsectData = async () => {
     }
     let res = await msstbprptGetKendoList(params)
     console.log(res)
-    if (!res?.data?.data) {
-
+    if (!res?.data?.data || res.data.data.length == 0) {
         select.value.value = ''
         select.value.options = []
         return
diff --git a/frontend/src/modules/qixidishuiwenbianhua/index.vue b/frontend/src/modules/qixidishuiwenbianhua/index.vue
index ec5dca19..425a3722 100644
--- a/frontend/src/modules/qixidishuiwenbianhua/index.vue
+++ b/frontend/src/modules/qixidishuiwenbianhua/index.vue
@@ -243,14 +243,14 @@ const updateChart = () => {
                 nameTextStyle: {
                     color: '#333333',
                     fontSize: 12,
-                  
+
                 },
                 // 计算 Y 轴范围：最小值向下取整，最大值向上取整
-                min: hasData && echartsData.value.length > 0 
-                    ? Math.floor(Math.min(...echartsData.value.map(item => item.wt))) 
+                min: hasData && echartsData.value.length > 0
+                    ? Math.floor(Math.min(...echartsData.value.map(item => item.wt)))
                     : undefined,
-                max: hasData && echartsData.value.length > 0 
-                    ? Math.ceil(Math.max(...echartsData.value.map(item => item.wt))) 
+                max: hasData && echartsData.value.length > 0
+                    ? Math.ceil(Math.max(...echartsData.value.map(item => item.wt)))
                     : undefined,
                 // 确保显示刻度和标签，保持整数
                 axisLabel: {
@@ -311,7 +311,7 @@ const handleResize = () => {
 const handleDataPointClick = (params: any) => {
     console.log('=== 数据点点击事件 ===');
     console.log('点击参数:', params);
-    
+
     if (!params || !params.dataIndex) {
         console.warn('无效的数据点点击');
         return;
@@ -319,7 +319,7 @@ const handleDataPointClick = (params: any) => {
 
     const dataIndex = params.dataIndex;
     const dataItem = echartsData.value[dataIndex];
-    
+
     if (dataItem) {
         console.log('点击的数据:', {
             日期: dataItem.dt,
@@ -384,19 +384,26 @@ const getChartData = async (startDate: string, endDate: string, stcd: string) =>
                         "value": endDate    // 例如: "2026-06-30 23:59:59"
                     },
                     {
-                        "field": "STCD",
+                        "field": "stcd",
                         "operator": "eq",
                         "dataType": "string",
                         "value": stcd
                     }
                 ]
-            }
+            },
+            "sort": [
+                {
+                    "field": "dt",
+                    "dir": "asc"
+                }
+            ]
         };
 
         // 调用实际的API获取数据
         const res = await sdrvwtsGetKendoList(params);
+        debugger
         console.log('API返回结果:', res);
-        
+
         let data = res?.data?.data || [];
         console.log('原始数据条数:', data.length);
 
@@ -418,14 +425,14 @@ const getChartData = async (startDate: string, endDate: string, stcd: string) =>
                     console.warn('无效的日期数据:', item);
                     return null;
                 }
-                
+
                 // 确保 wt 是数值类型
                 const wt = typeof item.wt === 'number' ? item.wt : parseFloat(item.wt);
                 if (isNaN(wt)) {
                     console.warn('无效的水温数据:', item);
                     return null;
                 }
-                
+
                 return {
                     dt: item.dt.substring(0, 10),  // 提取 "2026-05-02" 格式
                     wt: wt,  // 确保是 number 类型
@@ -577,12 +584,12 @@ const getselsectData = async () => {
     }
     let res = await msstbprptGetKendoList(params)
     console.log(res)
-    if (!res?.data?.data) {
-
+    if (!res?.data?.data || res.data.data.length == 0) {
         select.value.value = ''
         select.value.options = []
         return
     }
+    
     select.value.value = res.data.data[0].stcd
     select.value.options = res.data.data.map((item: any) => {
         return {