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

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

@@ -29,7 +29,8 @@
                     <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) }}
+                            {{ (record.wt - record.beforeWt) > 0 ? '+' : '' }}{{ (record.wt -
+                            record.beforeWt).toFixed(2) }}
                         </span>
                         <span v-else>-</span>
                     </template>
@@ -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">
@@ -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
         }
     });
 };

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