基础信息组件更改-增加可控制显隐的下拉框

frontend/src/components/MapModal/components/BasicInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <a-spin :spinning="loading">
-    <div class="modal-baseic-container">
+    <div class="modal-baseic-container" >
-      <a-row class="w-[100%]">
+      <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>

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" 
+                        <span v-if="record.wt && record.beforeWt"
-                              :style="{ color: (record.wt - record.beforeWt) > 0 ? 'rgb(255, 85, 0)' : 'rgb(135, 208, 104)' }">
+                            :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) }}
+                            {{ (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>

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>

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,     // 确保数值类型

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

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        // 新增
   };
 });