From 28e7b8013dd6760509f0f4005cc7cfdbea487a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Wed, 3 Jun 2026 18:25:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E4=BF=A1=E6=81=AF=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=B4=E6=94=B9-=E5=A2=9E=E5=8A=A0=E5=8F=AF?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E6=98=BE=E9=9A=90=E7=9A=84=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MapModal/components/BasicInfo.vue         | 17 ++++++++++---
 .../components/WaterTemperatureContrast.vue   | 25 ++++++++++++++-----
 frontend/src/components/MapModal/index.vue    | 21 +++++++++++++++-
 .../modules/qixidiliuliangbianhua/index.vue   |  8 +++---
 .../modules/qixidishuiwenbianhua/index.vue    |  2 ++
 frontend/src/store/modules/model.ts           |  5 +++-
 6 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/MapModal/components/BasicInfo.vue b/frontend/src/components/MapModal/components/BasicInfo.vue
index 0bd2b68c..2c890cdd 100644
--- a/frontend/src/components/MapModal/components/BasicInfo.vue
+++ b/frontend/src/components/MapModal/components/BasicInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <a-spin :spinning="loading">
-    <div class="modal-baseic-container">
-      <a-row class="w-[100%]">
+    <div class="modal-baseic-container" >
+      <a-row class="w-[100%]" v-if="!loading">
         <a-col :span="!item.visible ? 24 : (item.filed == '' ? 12 : 12)" v-for="(item, index) in tabledata"
           :key="item.key">
           <div class="col-title" v-if="!item.visible">
@@ -58,7 +58,7 @@
 
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick,watch } from "vue";
 import { BasicColumns, wtPointColumns, FhWpPointColumns, FhPointColumns, FhZQPointColumns, FPPointColumns, FBPointColumns, VaPointColumns, VPPointColumns, wePointColumns, waPointColumns, DwPointColumns, DwFivePointColumns, DwSixPointColumns, DwOnePointColumns, StinfoAiVidoPointColumns } from "../column.config";
 import { useModelStore } from "@/store/modules/model";
 import { getStcdDetail } from "@/api/mapModal"
@@ -268,6 +268,17 @@ onMounted(() => {
 
   }, 1000);
 });
+//监听modelStore.params.stcd数据变化，刷新数据
+watch(
+  () => modelStore.params.stcd,
+  (newStcd, oldStcd) => {
+    // 避免初始化时的无效触发
+    if (newStcd && newStcd !== oldStcd && props.url) {
+      console.log('【BasicInfo】stcd 变化,重新加载数据:', newStcd);
+      getData();
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/MapModal/components/WaterTemperatureContrast.vue b/frontend/src/components/MapModal/components/WaterTemperatureContrast.vue
index 16f4feff..63bdf773 100644
--- a/frontend/src/components/MapModal/components/WaterTemperatureContrast.vue
+++ b/frontend/src/components/MapModal/components/WaterTemperatureContrast.vue
@@ -27,9 +27,10 @@
                     :search-params="{}" :transform-data="customTransform">
                     <!-- 同期对比列的自定义渲染 -->
                     <template #contrast="{ record }">
-                        <span v-if="record.wt && record.beforeWt" 
-                              :style="{ color: (record.wt - record.beforeWt) > 0 ? 'rgb(255, 85, 0)' : 'rgb(135, 208, 104)' }">
-                            {{ (record.wt - record.beforeWt) > 0 ? '+' : '' }}{{ (record.wt - record.beforeWt).toFixed(2) }}
+                        <span v-if="record.wt && record.beforeWt"
+                            :style="{ color: (record.wt - record.beforeWt) > 0 ? 'rgb(255, 85, 0)' : 'rgb(135, 208, 104)' }">
+                            {{ (record.wt - record.beforeWt) > 0 ? '+' : '' }}{{ (record.wt -
+                            record.beforeWt).toFixed(2) }}
                         </span>
                         <span v-else>-</span>
                     </template>
@@ -243,7 +244,7 @@ const processChartData = (rawData: any[]) => {
 
     // 过滤掉 wt 或 beforeWt 为 null 的记录
     const filtered = rawData.filter(item =>
-        item.wt !== null && item.wt !== undefined 
+        item.wt !== null && item.wt !== undefined
     );
     // && item.beforeWt !== null && item.beforeWt !== undefined
 
@@ -437,12 +438,12 @@ const getChartOption = computed(() => {
                 interval: (() => {
                     const dataLen = xAxisData.length;
                     if (dataLen <= 8) return 0; // 数据少时全部显示
-                    
+
                     // 计算最大允许的间隔，确保首尾都能显示
                     // 需要显示的首尾2个 + 中间最多6个 = 总共8个标签
                     const maxLabels = 8;
                     const minInterval = Math.ceil((dataLen - 1) / (maxLabels - 1));
-                    
+
                     // 如果原有计算的间隔更大，使用原有逻辑；否则使用最小间隔
                     const calculatedInterval = Math.floor((dataLen - 1) / 7);
                     return Math.max(calculatedInterval, minInterval);
@@ -606,6 +607,18 @@ onMounted(() => {
 onUnmounted(() => {
     destroyChart()
 });
+watch(
+    () => modelStore.params.stcd,
+    (newStcd, oldStcd) => {
+        // 避免初始化时的无效触发
+        if (newStcd && newStcd !== oldStcd) {
+            console.log('【BasicInfo】stcd 变化,重新加载数据:', newStcd);
+            getSelectOption()
+            getEchartsData()
+            gerTableData()
+        }
+    }
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/MapModal/index.vue b/frontend/src/components/MapModal/index.vue
index 590459d7..af6c76a6 100644
--- a/frontend/src/components/MapModal/index.vue
+++ b/frontend/src/components/MapModal/index.vue
@@ -1,6 +1,11 @@
 <template>
   <a-modal :open="visible" :title="title" width="80vw" :footer="null" :closable="true" @cancel="handleClose"
     :destroyOnClose="true" class="map-modal">
+    <div v-if="modelStore.showStcdSelector" class="stcd-selector-wrapper">
+      <a-select v-model:value="modelStore.params.stcd" placeholder="请选择测站" style="width: 240px; margin-bottom: 12px;"
+        :options="modelStore.stcdOptions" show-search :filter-option="filterOption" @change="handleStcdChange">
+      </a-select>
+    </div>
     <a-tabs :active-key="currentActiveKey" @change="onTabChange">
       <a-tab-pane v-for="tab in tabsConfig" :key="tab.key" :tab="tab.name">
         <div class="content">
@@ -9,7 +14,7 @@
           <!-- 水温-监测数据 -->
           <WaterTemperature v-if="currentActiveKey === 'WaterTemperature'" />
           <!-- 水温-鱼类繁殖适宜性分析 -->
-           <WaterTemperatureContrast v-if="currentActiveKey === 'WaterTemperatureRep'" />
+          <WaterTemperatureContrast v-if="currentActiveKey === 'WaterTemperatureRep'" />
           <!-- 地图组件 -->
           <!-- <MapView v-else-if="currentActiveKey === 'mapView'" :data="modalData" /> -->
           <!-- 周边配套组件 -->
@@ -102,6 +107,9 @@ const onTabChange = (key: string) => {
 // 关闭弹窗
 const handleClose = () => {
   emit("update:visible", false);
+  // 清理状态,避免影响下次打开
+  modelStore.showStcdSelector = false;
+  modelStore.stcdOptions = [];
 };
 
 // 为了方便模板中使用，将 props.data 暴露给模板
@@ -112,6 +120,17 @@ watch(
     modalData.value = newVal;
   }
 );
+// 搜索过滤函数
+const filterOption = (input: string, option: any) => {
+  return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+// 处理测站切换
+const handleStcdChange = (newStcd: string) => {
+  console.log('【测站切换】', newStcd);
+  // 由于 BasicInfo.vue 监听了 stcd 变化,这里只需更新 store
+  // 如果需要刷新所有 tab 的数据,可以在这里触发事件
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/modules/qixidiliuliangbianhua/index.vue b/frontend/src/modules/qixidiliuliangbianhua/index.vue
index 6b62c1eb..998f6429 100644
--- a/frontend/src/modules/qixidiliuliangbianhua/index.vue
+++ b/frontend/src/modules/qixidiliuliangbianhua/index.vue
@@ -210,6 +210,8 @@ const initChart = () => {
             modelStore.params.sttp = "fh_zq_point";
             modelStore.title = "水文监测";
             modelStore.params.stcd = select.value.value;
+            modelStore.showStcdSelector = true
+            modelStore.stcdOptions = select.value.options
         }
     });
 };
@@ -697,17 +699,17 @@ const getChartData = async (startDate: string, endDate: string, stcd: string) =>
                     console.warn('无效的日期数据:', item);
                     return null;
                 }
-                
+
                 // 确保数值类型
                 const q = typeof item.q === 'number' ? item.q : parseFloat(item.q);
                 const z = typeof item.z === 'number' ? item.z : parseFloat(item.z);
                 const v = typeof item.v === 'number' ? item.v : parseFloat(item.v);
-                
+
                 if (isNaN(q) || isNaN(z) || isNaN(v)) {
                     console.warn('无效的水文数据:', item);
                     return null;
                 }
-                
+
                 return {
                     dt: item.dt.split(' ')[0],  // 提取日期部分 "2026-05-03"
                     v: v,     // 确保数值类型
diff --git a/frontend/src/modules/qixidishuiwenbianhua/index.vue b/frontend/src/modules/qixidishuiwenbianhua/index.vue
index 32bde6f6..ec5dca19 100644
--- a/frontend/src/modules/qixidishuiwenbianhua/index.vue
+++ b/frontend/src/modules/qixidishuiwenbianhua/index.vue
@@ -331,6 +331,8 @@ const handleDataPointClick = (params: any) => {
         modelStore.params.sttp = "wt_point";
         modelStore.title = '水温监测';
         modelStore.params.stcd = dataItem.stcd;
+        modelStore.showStcdSelector = true
+        modelStore.stcdOptions = select.value.options
     }
 };
 
diff --git a/frontend/src/store/modules/model.ts b/frontend/src/store/modules/model.ts
index cc255ffb..f01b390e 100644
--- a/frontend/src/store/modules/model.ts
+++ b/frontend/src/store/modules/model.ts
@@ -8,7 +8,8 @@ export const useModelStore = defineStore('model', () => {
   const tabList = ref([]);
   const title = ref('');
   const isBasicEdit = ref(false);
-
+  const showStcdSelector = ref(false); // 是否显示下拉框
+  const stcdOptions = ref<Array<{ label: string, value: string }>>([]); // 可选测站列表
   const params = ref<{
     sttp: string;
     stcd: any;
@@ -27,5 +28,7 @@ export const useModelStore = defineStore('model', () => {
     tabList,
     title,
     isBasicEdit,
+    showStcdSelector,  // 新增
+    stcdOptions        // 新增
   };
 });