From ce8855d3c22da4463589c289d2370ab0ea2ca7de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=88=E5=85=86=E5=A2=9E?= <你的邮箱@example.com>
Date: Tue, 16 Jun 2026 11:36:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B0=B4=E6=B8=A9=E5=9E=82?=
 =?UTF-8?q?=E5=90=91=E5=8F=B3=E4=BE=A7=E7=82=B9=E5=87=BB,=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=BD=95=E5=83=8F=E8=A7=86=E9=A2=91=E5=92=8C=E5=BB=BA?=
 =?UTF-8?q?=E8=AE=BE=E7=8A=B6=E6=80=81=EF=BC=8Cbug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/mapModal/index.ts            |   18 +
 .../components/MapModal/components/DZGJ.vue   |   12 +-
 .../MapModal/components/EcologicalFlow.vue    |    5 +
 .../MapModal/components/Ecology.vue           |    6 +-
 .../components/FishFacilityBuildState.vue     |  355 +++
 .../MapModal/components/FlowMeasure.vue       |    7 +
 .../MapModal/components/NoLiveVideo.vue       |  396 +++
 .../components/NormalDataMonitoring2.vue      |   24 +-
 .../components/VerticalWaterTemperature.vue   |    6 +
 .../MapModal/components/WaterTemperature.vue  |    8 +
 .../components/WaterTemperatureRep.vue        |   13 +-
 frontend/src/components/MapModal/index.vue    |   43 +-
 .../src/components/SidePanelItem/index.vue    | 1455 ++++++-----
 frontend/src/components/gis/map.class.ts      |    1 +
 frontend/src/components/gis/map.ol.ts         |   88 +-
 .../components/gis/ol/point-layer-manager.ts  |   29 +
 .../src/components/gis/ol/popup-manager.ts    |  208 ++
 .../chuixiangshuiwenChangeMod/index.vue       |  271 ++-
 .../src/modules/churukushuiwenMod/index.vue   | 1067 ++++----
 .../map/application/map-orchestrator.ts       |   23 +-
 .../monthlyAverage.vue                        |   99 +-
 .../modules/qixidiliuliangbianhua/index.vue   | 1397 +++++------
 .../modules/qixidishuiwenbianhua/index.vue    | 1098 +++++----
 .../TwoLayers/yaerAverage.vue                 |    6 +-
 .../src/modules/shuiWenNianNeiFenBu/index.vue |  961 ++++----
 frontend/src/modules/waterQuality/index.vue   | 2161 +++++++++--------
 .../yanchengshuiwenChangeMod/index.vue        |  350 +--
 27 files changed, 5926 insertions(+), 4181 deletions(-)
 create mode 100644 frontend/src/components/MapModal/components/FishFacilityBuildState.vue
 create mode 100644 frontend/src/components/MapModal/components/NoLiveVideo.vue

diff --git a/frontend/src/api/mapModal/index.ts b/frontend/src/api/mapModal/index.ts
index 3d57ef3b..1cb7afb2 100644
--- a/frontend/src/api/mapModal/index.ts
+++ b/frontend/src/api/mapModal/index.ts
@@ -91,6 +91,24 @@ export function getVideoList(data: any) {
     data
   });
 }
+// 录像视频 - 时间查询 没接
+export function getNoLiveVideoYear(data: any) {
+  return request({
+    url: '/wmp-env-server/env/vd/GetKendoListCust',
+    method: 'post',
+    data
+  });
+}
+
+// 录像视频
+export function getNoLiveVideoList(data: any) {
+  return request({
+    url: '/wmp-env-server/env/vd/runData/GetKendoListCust',
+    method: 'post',
+    data
+  });
+}
+
 // 实时视频单个查询
 export function getVideoDetail(data: any) {
   return request({
diff --git a/frontend/src/components/MapModal/components/DZGJ.vue b/frontend/src/components/MapModal/components/DZGJ.vue
index 0cd90d1d..d31327e3 100644
--- a/frontend/src/components/MapModal/components/DZGJ.vue
+++ b/frontend/src/components/MapModal/components/DZGJ.vue
@@ -74,11 +74,6 @@ const baseColumns = [
     dataIndex: 'rowId',
     width: 60
   },
-  {
-    title: '告警设施',
-    dataIndex: 'stnm',
-    width: 220
-  },
   {
     title: '告警时间',
     dataIndex: 'tms',
@@ -91,12 +86,7 @@ const baseColumns = [
     width: 120
   },
   {
-    title: '监测要素',
-    dataIndex: 'ysName',
-    width: 120
-  },
-  {
-    title: '判断标准',
+    title: '限值(m³/s)',
     dataIndex: 'bzz',
     width: 120
   },
diff --git a/frontend/src/components/MapModal/components/EcologicalFlow.vue b/frontend/src/components/MapModal/components/EcologicalFlow.vue
index a1f94f26..3393e6b1 100644
--- a/frontend/src/components/MapModal/components/EcologicalFlow.vue
+++ b/frontend/src/components/MapModal/components/EcologicalFlow.vue
@@ -21,6 +21,11 @@
           </div>
         </div>
         <div class="filter-row">
+          <a-select
+            v-model:value="timeType"
+            style="margin-right: 12px"
+            :options="timeTypeOptions"
+          />
           <a-range-picker
             v-model:value="dateRange"
             :format="dateFormat"
diff --git a/frontend/src/components/MapModal/components/Ecology.vue b/frontend/src/components/MapModal/components/Ecology.vue
index 46057dcc..2b7348b9 100644
--- a/frontend/src/components/MapModal/components/Ecology.vue
+++ b/frontend/src/components/MapModal/components/Ecology.vue
@@ -158,12 +158,12 @@ const columnsMap: Record<string, any[]> = {
     },
     {
       title: '性腺发育期',
-      dataIndex: 'fwgh',
+      dataIndex: 'st',
       width: 140
     },
     {
       title: '早期资源量和种类',
-      dataIndex: 'fwgh',
+      dataIndex: 'ps',
       width: 220
     },
     {
@@ -203,7 +203,7 @@ const columnsMap: Record<string, any[]> = {
     },
     {
       title: '电导率(μS/cm)',
-      dataIndex: 'tm',
+      dataIndex: 'cond',
       width: 180
     }
   ],
diff --git a/frontend/src/components/MapModal/components/FishFacilityBuildState.vue b/frontend/src/components/MapModal/components/FishFacilityBuildState.vue
new file mode 100644
index 00000000..df4c92f1
--- /dev/null
+++ b/frontend/src/components/MapModal/components/FishFacilityBuildState.vue
@@ -0,0 +1,355 @@
+<template>
+  <div class="fish-facility-build-state">
+    <a-spin :spinning="loading">
+      <!-- 步骤条 -->
+      <div class="steps-container">
+        <div class="steps-wrapper">
+          <div
+            v-for="(item, index) in bltList"
+            :key="item.code"
+            class="step-item"
+            :class="{
+              'step-active': currentStep > item.code,
+              'step-current': currentStep === item.code,
+              'step-last': index === bltList.length - 1
+            }"
+          >
+            <span class="step-label">{{ item.name }}</span>
+            <i
+              v-if="currentStep > item.code"
+              class="step-icon icon iconfont icon-check"
+            ></i>
+            <div v-if="currentStep == 0" class="step-line"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 建设进度 -->
+      <div class="progress-container">
+        <span class="progress-label">建设进度</span>
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar">
+            <div
+              class="progress-fill"
+              :style="{ width: progressPercent + '%' }"
+            ></div>
+          </div>
+          <span class="progress-text">{{ progressText }}</span>
+        </div>
+      </div>
+
+      <!-- 日期信息表格 -->
+      <div class="info-table">
+        <table>
+          <tbody>
+            <tr>
+              <td class="label-cell">计划开工日期：</td>
+              <td class="value-cell">{{ planStartDate || '-' }}</td>
+              <td class="label-cell">计划完工日期：</td>
+              <td class="value-cell">{{ planEndDate || '-' }}</td>
+            </tr>
+            <tr>
+              <td class="label-cell">实际开工日期：</td>
+              <td class="value-cell">{{ startDate || '-' }}</td>
+              <td class="label-cell">建成日期：</td>
+              <td class="value-cell">{{ endDate || '-' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useModelStore } from '@/store/modules/model';
+import dayjs from 'dayjs';
+import { queryPostUrlList } from '@/api/mapModal';
+
+const modelStore = useModelStore();
+const loading = ref(false);
+const hasLoaded = ref(false);
+
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  },
+  isActive: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const bltList = ref<any[]>([]);
+const currentStep = ref(0);
+const progressPercent = ref(0);
+const progressText = ref('0%');
+const planStartDate = ref('');
+const planEndDate = ref('');
+const startDate = ref('');
+const endDate = ref('');
+
+const formatDate = (date: any) => {
+  if (!date) return '';
+  return dayjs(date).format('YYYY-MM-DD');
+};
+
+const getData = async () => {
+  if (hasLoaded.value || !props.url || !modelStore.params.stcd) return;
+  loading.value = true;
+
+  try {
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: modelStore.params.stcd
+          }
+        ]
+      }
+    };
+
+    const res: any = await queryPostUrlList(props.url, params);
+    if (res && res.data) {
+      const data = Array.isArray(res.data.data)
+        ? res.data.data[0]
+        : res.data.data;
+      if (data) {
+        bltList.value = data.bltList || [];
+        currentStep.value = data.blprd || 0;
+
+        // 解析进度
+        const progress = data.progress || '0%';
+        progressText.value = progress;
+        progressPercent.value = parseInt(progress) || 0;
+
+        planStartDate.value = formatDate(data.planStartDate);
+        planEndDate.value = formatDate(data.planEndDate);
+        startDate.value = formatDate(data.startDate);
+        endDate.value = formatDate(data.endDate);
+      }
+    }
+  } catch (error) {
+    console.error('获取建设状态数据失败:', error);
+  } finally {
+    loading.value = false;
+    hasLoaded.value = true;
+  }
+};
+
+watch(
+  () => props.isActive,
+  active => {
+    if (active && !hasLoaded.value) {
+      getData();
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => modelStore.params.stcd,
+  (newStcd, oldStcd) => {
+    if (newStcd && newStcd !== oldStcd && props.url) {
+      hasLoaded.value = false;
+      getData();
+    }
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.fish-facility-build-state {
+  width: 880px;
+  margin: 0 auto;
+  margin-top: 24px;
+  border: 1px solid #dfe6ec;
+
+  // 步骤条
+  .steps-container {
+    background: #e4ecf2;
+    padding: 0;
+    margin-bottom: 24px;
+
+    .step-line {
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        right: -6px; /* 负值让第二条线更靠右 */
+        top: 50%;
+        transform: translateY(-50%) rotate(45deg);
+        width: 26px;
+        height: 26px;
+        border-top: 2px solid #fff;
+        border-right: 2px solid #fff;
+      }
+    }
+
+    .steps-wrapper {
+      display: flex;
+      align-items: stretch;
+
+      .step-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        flex: 1;
+        min-height: 40px;
+        gap: 6px;
+
+        .step-label {
+          font-size: 14px;
+          color: #999;
+          white-space: nowrap;
+        }
+
+        .step-icon {
+          font-size: 16px;
+          color: #2f6b98;
+        }
+
+        // 默认伪元素箭头 - 半透明白色边框
+        &::after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: 0;
+
+          height: 0;
+          width: 0;
+        }
+        // 已完成步骤
+        &.step-active {
+          background: #f0f4f8;
+
+          .step-label {
+            color: #00000080;
+          }
+
+          &::after {
+            border-top: 20px solid transparent;
+            border-left: 15px solid #f0f4f8;
+            border-bottom: 20px solid transparent;
+          }
+        }
+
+        // 当前步骤的前一个 div - 显示蓝色箭头
+        &.step-active:has(+ .step-current)::after {
+          border-top-color: #2f6b98;
+          border-bottom-color: #2f6b98;
+        }
+
+        // 当前步骤 - 蓝色背景 + 右侧箭头
+        &.step-current {
+          background: #2f6b98;
+
+          .step-label {
+            color: #fff;
+          }
+
+          // 右侧箭头
+          &::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 0;
+            width: 0;
+            border-top: 20px solid #e4ecf2;
+            border-left: 15px solid #2f6b98;
+            border-bottom: 20px solid #e4ecf2;
+          }
+        }
+
+        // 最后一个步骤不需要箭头
+        &.step-last::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  // 进度条
+  .progress-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24px;
+
+    .progress-label {
+      font-size: 14px;
+      color: #333;
+      margin-right: 16px;
+      white-space: nowrap;
+    }
+
+    .progress-bar-wrapper {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      max-width: 500px;
+
+      .progress-bar {
+        flex: 1;
+        height: 12px;
+        background: #e8e8e8;
+        border-radius: 6px;
+        overflow: hidden;
+        margin-right: 12px;
+
+        .progress-fill {
+          height: 100%;
+          background: linear-gradient(90deg, #2a7aaf 0%, #5cb85c 100%);
+          border-radius: 6px;
+          transition: width 0.3s ease;
+        }
+      }
+
+      .progress-text {
+        font-size: 14px;
+        color: #2a7aaf;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  // 信息表格
+  .info-table {
+    padding: 16px;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+
+      tr {
+        td {
+          padding: 12px 16px;
+          border: 1px solid #a8d8f0;
+          font-size: 14px;
+
+          &.label-cell {
+            background: #f4f7f9;
+            color: #333;
+            width: 18%;
+            text-align: right;
+            white-space: nowrap;
+          }
+
+          &.value-cell {
+            color: #333;
+            width: 32%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/components/MapModal/components/FlowMeasure.vue b/frontend/src/components/MapModal/components/FlowMeasure.vue
index ad36ad53..b3908191 100644
--- a/frontend/src/components/MapModal/components/FlowMeasure.vue
+++ b/frontend/src/components/MapModal/components/FlowMeasure.vue
@@ -472,6 +472,13 @@ const handleSearch = () => fetchData();
 
 const initData = () => {
   if (hasLoaded.value) return;
+  console.log(modelStore.filter.rangeTm);
+  if (modelStore.filter.rangeTm.length > 0) {
+    dateRange.value = [
+      dayjs(modelStore.filter.rangeTm[0]),
+      dayjs(modelStore.filter.rangeTm[1])
+    ];
+  }
   nextTick(() => initChart());
   fetchData();
   hasLoaded.value = true;
diff --git a/frontend/src/components/MapModal/components/NoLiveVideo.vue b/frontend/src/components/MapModal/components/NoLiveVideo.vue
new file mode 100644
index 00000000..17b5eb60
--- /dev/null
+++ b/frontend/src/components/MapModal/components/NoLiveVideo.vue
@@ -0,0 +1,396 @@
+<template>
+  <div class="no-live-video">
+    <!-- 视频模式 -->
+    <div class="video-mode">
+      <div class="video-main" v-loading="videoLoading">
+        <!-- 视频显示 -->
+        <div v-if="activeMedia.src" class="media-display">
+          <LiveVideoBox
+            ref="liveVideoRef"
+            :videoData="{ url: activeMedia.src }"
+            height="100%"
+            :showTitle="false"
+          />
+        </div>
+        <div v-else class="media-empty">
+          <a-empty description="请选择右侧数据" />
+        </div>
+      </div>
+      <div class="video-sidebar" v-loading="videoLoading">
+        <!-- 时间范围查询 -->
+        <div class="sidebar-search">
+          <a-range-picker
+            v-model:value="dateRange"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
+            @change="handleDateChange"
+          />
+          <a-button type="primary" class="ml-2" @click="handleSearch">
+            查询
+          </a-button>
+        </div>
+        <!-- 列表 -->
+        <div class="sidebar-list" v-if="videoList.length > 0">
+          <div
+            v-for="item in videoList"
+            :key="item.flpth"
+            class="sidebar-item"
+            :class="{ active: activeFlpth === item.flpth }"
+            @click="handleSelectMedia(item)"
+          >
+            <div class="item-thumb">
+              <img
+                v-if="item.imgPath"
+                :src="item.imgPath"
+                @error="handleImageError"
+              />
+              <div v-else class="thumb-placeholder">
+                <img :src="videoCover" />
+              </div>
+            </div>
+            <div class="item-time">
+              <div>{{ item.titleName || item.stnm || '-' }}</div>
+              {{ item.tm }}
+            </div>
+          </div>
+        </div>
+        <a-empty
+          v-else
+          description="暂无数据"
+          class="empty-wrapper h-full flex items-center justify-center flex-col"
+        />
+        <!-- 分页 -->
+        <div class="sidebar-pagination">
+          <a-pagination
+            v-model:current="videoPage"
+            v-model:pageSize="videoTake"
+            :page-size-options="videoPageSizeOptions"
+            :total="videoTotal"
+            show-size-changer
+            size="small"
+            @change="handleVideoPageChange"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import dayjs from 'dayjs';
+import LiveVideoBox from '@/views/shiPinJianKong/components/LiveVideoBox.vue';
+import { getNoLiveVideoYear, getNoLiveVideoList } from '@/api/mapModal';
+import { useModelStore } from '@/store/modules/model';
+import videoCover from '@/assets/images/videFm.jpg';
+
+const modelStore = useModelStore();
+
+const props = defineProps({
+  isActive: { type: Boolean, default: false }
+});
+
+const hasLoaded = ref(false);
+
+// 时间范围选择
+const dateRange = ref<[string, string] | null>(null);
+
+// 视频模式相关
+const videoPage = ref(1);
+const videoTake = ref(10);
+const videoPageSizeOptions = ['10', '20', '50'];
+const videoTotal = ref(0);
+const videoLoading = ref(false);
+const videoList = ref<any[]>([]);
+const activeFlpth = ref('');
+const activeMedia = ref<{ src: string }>({ src: '' });
+const liveVideoRef = ref();
+
+// 初始化默认时间范围（先调用getNoLiveVideoYear获取时间）
+const initDefaultDateRange = async () => {
+  try {
+    const res: any = await getNoLiveVideoYear({
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'stcd',
+            operator: 'in',
+            value: [modelStore.params.stcd]
+          }
+        ]
+      },
+      sort: [{ field: 'tm', dir: 'desc' }]
+    });
+
+    const data = res?.data?.data || res?.data || [];
+    if (data.length > 0) {
+      // 取最新的时间作为结束时间
+      const latestTm = data[0].tm;
+      const endDate = dayjs(latestTm);
+      const startDate = endDate.subtract(7, 'day');
+      dateRange.value = [
+        startDate.format('YYYY-MM-DD'),
+        endDate.format('YYYY-MM-DD')
+      ];
+    } else {
+      // 没有数据时默认往前7天
+      const endDate = dayjs();
+      const startDate = endDate.subtract(7, 'day');
+      dateRange.value = [
+        startDate.format('YYYY-MM-DD'),
+        endDate.format('YYYY-MM-DD')
+      ];
+    }
+  } catch (error) {
+    console.error('获取时间范围失败:', error);
+    // 失败时默认往前7天
+    const endDate = dayjs();
+    const startDate = endDate.subtract(7, 'day');
+    dateRange.value = [
+      startDate.format('YYYY-MM-DD'),
+      endDate.format('YYYY-MM-DD')
+    ];
+  }
+};
+
+// 初始化
+const initData = async () => {
+  await initDefaultDateRange();
+  fetchVideoList();
+};
+
+// 时间变化
+const handleDateChange = () => {
+  videoPage.value = 1;
+  fetchVideoList();
+};
+
+// 查询
+const handleSearch = () => {
+  videoPage.value = 1;
+  fetchVideoList();
+};
+
+// 获取视频列表
+const fetchVideoList = async () => {
+  videoLoading.value = true;
+  try {
+    const skip = (videoPage.value - 1) * videoTake.value;
+
+    const timeFilters: any[] = [];
+    if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
+      timeFilters.push({
+        field: 'tm',
+        operator: 'gte',
+        dataType: 'date',
+        value: `${dateRange.value[0]} 00:00:00`
+      });
+      timeFilters.push({
+        field: 'tm',
+        operator: 'lte',
+        dataType: 'date',
+        value: `${dateRange.value[1]} 23:59:59`
+      });
+    }
+
+    const res: any = await getNoLiveVideoList({
+      take: videoTake.value,
+      skip,
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'stcd',
+            operator: 'in',
+            value: [modelStore.params.stcd]
+          },
+          ...timeFilters
+        ]
+      },
+      sort: [{ field: 'tm', dir: 'desc' }]
+    });
+
+    res?.data?.data.forEach(item => {
+      item.tm = dayjs(item.tm).format('YYYY-MM-DD HH') || '-';
+    });
+    videoList.value = res?.data?.data || [];
+    videoTotal.value = res?.data?.total || 0;
+
+    if (videoList.value.length > 0 && !activeFlpth.value) {
+      handleSelectMedia(videoList.value[0]);
+    }
+  } catch (error) {
+    console.error('获取视频列表失败:', error);
+    videoList.value = [];
+  } finally {
+    videoLoading.value = false;
+  }
+};
+
+// 选择媒体
+const handleSelectMedia = (item: any) => {
+  activeFlpth.value = item.flpth;
+  activeMedia.value = { src: item.flpth || '' };
+};
+
+// 分页切换
+const handleVideoPageChange = (page: number) => {
+  videoPage.value = page;
+  activeFlpth.value = '';
+  activeMedia.value = { src: '' };
+  fetchVideoList();
+};
+
+// 图片加载失败处理
+const handleImageError = (e: Event) => {
+  const target = e.target as HTMLImageElement;
+  target.style.display = 'none';
+};
+
+// 监听isActive
+watch(
+  () => props.isActive,
+  active => {
+    if (active && !hasLoaded.value) {
+      initData();
+    }
+  },
+  { immediate: true }
+);
+
+// 监听stcd变化
+watch(
+  () => modelStore.params.stcd,
+  async (newStcd, oldStcd) => {
+    if (newStcd && newStcd !== oldStcd) {
+      videoList.value = [];
+      activeFlpth.value = '';
+      activeMedia.value = { src: '' };
+      await initDefaultDateRange();
+      fetchVideoList();
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.no-live-video {
+  width: 100%;
+
+  .video-mode {
+    display: flex;
+    height: 600px;
+    gap: 12px;
+
+    .video-main {
+      flex: 0 0 60%;
+      background: #000;
+      border-radius: 4px;
+      overflow: hidden;
+
+      .media-display {
+        width: 100%;
+        height: 100%;
+      }
+
+      .media-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+    }
+
+    .video-sidebar {
+      flex: 0 0 40%;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid #e8e8e8;
+      border-radius: 4px;
+
+      .sidebar-search {
+        padding: 8px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #e8e8e8;
+      }
+
+      .sidebar-list {
+        height: 600px;
+        overflow-y: auto;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-auto-rows: min-content;
+        gap: 8px;
+        padding: 8px;
+
+        .sidebar-item {
+          cursor: pointer;
+          border: 1px solid #f0f0f0;
+          border-radius: 4px;
+          overflow: hidden;
+          transition: all 0.2s;
+
+          &:hover {
+            border-color: #1890ff;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          }
+
+          &.active {
+            border-color: #1890ff;
+            background: #e6f7ff;
+          }
+
+          .item-thumb {
+            width: 100%;
+            height: 105px;
+            background: #1a1a1a;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+
+            .thumb-placeholder {
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+          }
+
+          .item-time {
+            padding: 4px;
+            font-size: 11px;
+            color: #666;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .sidebar-pagination {
+        padding: 8px;
+        text-align: center;
+        border-top: 1px solid #e8e8e8;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/components/MapModal/components/NormalDataMonitoring2.vue b/frontend/src/components/MapModal/components/NormalDataMonitoring2.vue
index a2d276e5..d7304cb6 100644
--- a/frontend/src/components/MapModal/components/NormalDataMonitoring2.vue
+++ b/frontend/src/components/MapModal/components/NormalDataMonitoring2.vue
@@ -103,13 +103,13 @@ const tableColumns = ref([
         String(record.tecnt).trim() !== ''
           ? record.tecnt
           : '-';
-      const transplant =
-        record?.transplant !== undefined &&
-        record?.transplant !== null &&
-        String(record.transplant).trim() !== ''
-          ? record.transplant
+      const plantask =
+        record?.plantask !== undefined &&
+        record?.plantask !== null &&
+        String(record.plplantask).trim() !== ''
+          ? record.plplantask
           : '-';
-      return `${tecnt}/${transplant}`;
+      return `${tecnt}/${plantask}`;
     }
   },
   {
@@ -123,13 +123,13 @@ const tableColumns = ref([
         String(record.surnum).trim() !== ''
           ? record.surnum
           : '-';
-      const plantask =
-        record?.plantask !== undefined &&
-        record?.plantask !== null &&
-        String(record.plantask).trim() !== ''
-          ? record.plantask
+      const transplant =
+        record?.transplant !== undefined &&
+        record?.transplant !== null &&
+        String(record.transplant).trim() !== ''
+          ? record.transplant
           : '-';
-      return `${surnum}/${plantask}`;
+      return `${surnum}/${transplant}`;
     }
   },
   {
diff --git a/frontend/src/components/MapModal/components/VerticalWaterTemperature.vue b/frontend/src/components/MapModal/components/VerticalWaterTemperature.vue
index 7c9b25fe..2d3c665e 100644
--- a/frontend/src/components/MapModal/components/VerticalWaterTemperature.vue
+++ b/frontend/src/components/MapModal/components/VerticalWaterTemperature.vue
@@ -479,6 +479,12 @@ const handleSearch = () => fetchData();
 const initData = () => {
   if (hasLoaded.value) return;
   nextTick(() => {
+    if (modelStore.filter.rangeTm.length > 0) {
+      dateRange.value = [
+        dayjs(modelStore.filter.rangeTm[0]),
+        dayjs(modelStore.filter.rangeTm[1])
+      ];
+    }
     if (chartRef.value && !chartInstance)
       chartInstance = echarts.init(chartRef.value);
   });
diff --git a/frontend/src/components/MapModal/components/WaterTemperature.vue b/frontend/src/components/MapModal/components/WaterTemperature.vue
index 497c806f..15c238e0 100644
--- a/frontend/src/components/MapModal/components/WaterTemperature.vue
+++ b/frontend/src/components/MapModal/components/WaterTemperature.vue
@@ -903,7 +903,15 @@ const handleExport = () => {
 
 const initData = () => {
   if (hasLoaded.value) return;
+  console.log('modelStore.filter.rangeTm:', modelStore.filter.rangeTm);
+
   nextTick(() => {
+    if (modelStore.filter.rangeTm.length > 0) {
+      dateRange.value = [
+        dayjs(modelStore.filter.rangeTm[0]),
+        dayjs(modelStore.filter.rangeTm[1])
+      ];
+    }
     if (chartRef.value && !chartInstance)
       chartInstance = echarts.init(chartRef.value);
   });
diff --git a/frontend/src/components/MapModal/components/WaterTemperatureRep.vue b/frontend/src/components/MapModal/components/WaterTemperatureRep.vue
index 63fca633..a7334bb2 100644
--- a/frontend/src/components/MapModal/components/WaterTemperatureRep.vue
+++ b/frontend/src/components/MapModal/components/WaterTemperatureRep.vue
@@ -37,7 +37,12 @@
           <!-- 同期对比列的自定义渲染 -->
           <template #contrast="{ record }">
             <span
-              v-if="record.wt  && record.beforeWt  && !isNaN(Number(record.wt)) && !isNaN(Number(record.beforeWt))"
+              v-if="
+                record.wt &&
+                record.beforeWt &&
+                !isNaN(Number(record.wt)) &&
+                !isNaN(Number(record.beforeWt))
+              "
               :style="{
                 color:
                   Number(record.wt) - Number(record.beforeWt) > 0
@@ -664,6 +669,12 @@ const initData = () => {
   setTimeout(() => {
     initChart();
   }, 200);
+  if (modelStore.filter.rangeTm.length > 0) {
+    rangePicker.value = [
+      dayjs(modelStore.filter.rangeTm[0]),
+      dayjs(modelStore.filter.rangeTm[1])
+    ];
+  }
   hasLoaded.value = true; // 标记为已请求过
 };
 
diff --git a/frontend/src/components/MapModal/index.vue b/frontend/src/components/MapModal/index.vue
index 0bdcf287..09e4f41e 100644
--- a/frontend/src/components/MapModal/index.vue
+++ b/frontend/src/components/MapModal/index.vue
@@ -10,8 +10,8 @@
     class="map-modal"
   >
     <!-- 问题：
-  1.基础信息图片展示是什么逻辑
-  2. 电站专题展示逻辑
+  1.基础信息图片展示是什么逻辑✅️
+  2. 电站专题展示逻辑✅️
   3. 实时视频回放 少接口✅️
   4. 预警提示 少接口
   5. 生态流量 达标率查询不对(✅️)
@@ -20,13 +20,13 @@
   8. 栖息地-流量监测 没有水位视频和流量视频 字段没数据 
   9. 栖息地 水温、水质、流量没有数据没法测
   10.鱼类增殖站 - 运行数据 要添加字典
-  11.珍惜植物园 - 种植要求字段不知道
-  12.水生调查断面 - 监测数据 不知道电导率 ，性腺发育期，早期资源量和种类
-  13.水电告警情况 生态流量 不知道字段 接口传参有问题
+  11.珍惜植物园 - 种植要求字段不知道✅️
+  12.水生调查断面 - 监测数据 不知道电导率 ，性腺发育期，早期资源量和种类 ✅️
+  13.水电告警情况 生态流量 不知道字段 ✅️ 接口传参有问题
+  14. 地图抽吸  碰撞检测 放大到具体层级锚点抽吸了但是popup弹框还在显示;
+  15.运行情况 计划开始运行时间 接口没接
 
 
-
-没弄： 环保设施
    -->
     <div v-if="modelStore.showStcdSelector" class="stcd-selector-wrapper">
       <a-select
@@ -88,18 +88,23 @@
           v-show="currentActiveKey === 'videoInfo'"
           :is-active="currentActiveKey === 'videoInfo'"
         />
+        <!-- 录像视频 -->
+        <NoLiveVideo
+          v-show="currentActiveKey === 'noLiveVideo'"
+          :is-active="currentActiveKey === 'noLiveVideo'"
+        />
         <!-- 全景影像 -->
         <PanoramaInfo
           v-show="currentActiveKey === 'panoramaInfo'"
           :url="getTabUrl('panoramaInfo')"
           :is-active="currentActiveKey === 'panoramaInfo'"
         />
-        <!-- 监测数据 - 电站运行过程线 -->
+        <!-- 监测数据 - 电站运行过程线 ✅️-->
         <MonitorInfo
           v-show="currentActiveKey === 'monitorInfo'"
           :is-active="currentActiveKey === 'monitorInfo'"
         />
-        <!-- 监测数据 - 水温 -->
+        <!-- 监测数据 - 水温 ✅️-->
         <WaterTemperature
           v-show="currentActiveKey === 'WaterTemperature'"
           :is-active="currentActiveKey === 'WaterTemperature'"
@@ -111,7 +116,7 @@
           "
           :wt-config="modelStore.wtConfig"
         />
-        <!-- 监测数据 - 垂向水温 -->
+        <!-- 监测数据 - 垂向水温 ✅️ -->
         <VerticalWaterTemperature
           v-show="currentActiveKey === 'VerticalWaterTemperature'"
           :is-active="currentActiveKey === 'VerticalWaterTemperature'"
@@ -167,6 +172,12 @@
           v-show="currentActiveKey === 'FishZHFX'"
           :is-active="currentActiveKey === 'FishZHFX'"
         />
+        <!-- 建设情况 -->
+        <FishFacilityBuildState
+          v-show="currentActiveKey === 'FishFacilityBuildState'"
+          :is-active="currentActiveKey === 'FishFacilityBuildState'"
+          :url="getTabUrl('FishFacilityBuildState')"
+        />
         <!-- AI运行识别 -->
         <AIYXSB
           v-show="currentActiveKey === 'AIYXSB'"
@@ -178,12 +189,12 @@
           :tabs-items="getTabChildren('tableTabs')"
           :is-active="currentActiveKey === 'tableTabs'"
         />
-        <!-- 生态流量 -->
+        <!-- 生态流量 ✅️-->
         <EcologicalFlow
           v-show="currentActiveKey === 'EcologicalFlow'"
           :is-active="currentActiveKey === 'EcologicalFlow'"
         />
-        <!-- 鱼类繁殖适宜性分析 -->
+        <!-- 鱼类繁殖适宜性分析 ✅️-->
         <WaterTemperatureRep
           v-show="currentActiveKey === 'WaterTemperatureRep'"
           :is-active="currentActiveKey === 'WaterTemperatureRep'"
@@ -259,6 +270,7 @@ import { ref, watch, reactive, computed } from 'vue';
 // 导入预定义的 Tab 内容组件
 import BasicInfo from './components/BasicInfo.vue'; // 基本信息
 import VideoInfo from './components/videoInfo.vue'; // 实时视频
+import NoLiveVideo from './components/NoLiveVideo.vue'; // 录像视频
 import PanoramaInfo from './components/PanoramaInfo.vue'; // 全景影像
 import MonitorInfo from './components/MonitorInfo.vue'; // 电站运行过程线
 import WaterTemperature from './components/WaterTemperature.vue'; // 水温
@@ -270,6 +282,7 @@ import FlowMeasure from './components/FlowMeasure.vue'; // 流量监测
 import FishFacilityMonitorData from './components/FishFacilityMonitorData.vue'; // 在线监测数据
 import FishFacilityRunState from './components/FishFacilityRunState.vue'; // 运行情况
 import FlowDischarge from './components/FlowDischarge.vue'; // 生态流量泄放设施 - 监测数据
+import FishFacilityBuildState from './components/FishFacilityBuildState.vue'; // 建设情况
 // 鱼类增殖站
 import NormalOperationData from './components/NormalOperationData/index.vue'; // 运行数据
 import ProcessDiagram from './components/ProcessDiagram.vue'; // 过程图
@@ -999,6 +1012,12 @@ const handleClose = () => {
   modelStore.verticalWaterStcd = '';
   modelStore.aiSites = [];
   modelStore.wtConfig = {};
+  modelStore.filter = {
+    stllgzlx: '', // 生态流量 - 规则类型
+    stllTmType: '', // 生态流量 - 时间类型
+    tm: '',
+    rangeTm: []
+  };
   modelStore.wqShow = false;
   modelStore.fishTabInfo = null;
 };
diff --git a/frontend/src/components/SidePanelItem/index.vue b/frontend/src/components/SidePanelItem/index.vue
index 7649cc2f..c75111ff 100644
--- a/frontend/src/components/SidePanelItem/index.vue
+++ b/frontend/src/components/SidePanelItem/index.vue
@@ -1,90 +1,169 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <div class="qgc-side-pannel-item">
-        <div class="qgc_title">
-            <div class="title_left">
-                <span class="texttitle">{{ title }}</span>
-                <span v-if="prompt.show" class="title_icon">
-                    <a-tooltip placement="top" :title="prompt.value" :get-popup-container="getPopupContainer">
-                        <QuestionCircleOutlined />
-                    </a-tooltip>
-                </span>
-                <span v-if="clickprompt.show" class="title_icon">
-                    <a-tooltip placement="top" trigger="click" :title="clickprompt.value"
-                        :get-popup-container="getPopupContainer">
-                        <InfoCircleOutlined />
-                    </a-tooltip>
-                </span>
-                <span v-if="iconmap.show" class="title_icon">
-                    <a-tooltip placement="top" :title="iconmap.value" :get-popup-container="getPopupContainer">
-                        <span :class="iconmap.icon"></span>
-                    </a-tooltip>
-                </span>
-                <!-- 新增的 clickAction 插槽区域 -->
-                <span v-if="clickAction.show" class="title_icon">
-                    <a-tooltip placement="top" trigger="click" :get-popup-container="getPopupContainer">
-                        <template #title>
-                            <slot name="click-action-content"></slot>
-                        </template>
-                        <InfoCircleOutlined />
-                    </a-tooltip>
-                </span>
-            </div>
-            <div class="title_right">
-                <div v-if="select.show">
-                    <a-select v-model:value="selectValue" show-search placeholder="请选择" :size="'small'"
-                        style="width: 120px" :options="select.options" :filter-option="filterOption"
-                        @focus="handleFocus" @blur="handleBlur" @change="handleChange"></a-select>
-                </div>
-                <div v-if="shrink" class="title_shrink" @click="isExpand = !isExpand">
-                    <img v-if="isExpand" src="@/assets/components/arrow-up.png" alt="">
-                    <img v-else src="@/assets/components/arrow-down.png" alt="">
-                </div>
-                <div v-if="moreSelect.show">
-                    <a-tree-select v-model:value="moreSelectValue" v-model:tree-expanded-keys="treeExpandedKeys"
-                        show-search :size="'small'" style="width: 110px"
-                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto', minWidth: '180px' }" placeholder=" "
-                        :tree-data="processedMoreSelectOptions"
-                        :field-names="{ label: 'title', value: 'value', children: 'children' }"
-                        tree-node-filter-prop="label" popup-class-name="no-wrap-tree-select" @select="handleTreeSelect"
-                        @expand="handleTreeExpand">
-                    </a-tree-select>
-                </div>
-                <div v-if="datetimePicker.show">
-                    <!-- 添加 locale 属性来设置语言 -->
-                    <a-date-picker v-model:value="datetimeValue"
-                        :show-time="timePickerConfig"
-                        :style="{ width: datetimePicker.picker === 'year' ? '80px' : datetimePicker.picker === 'month' ? '90px' : '130px' }"
-                        :format="datetimePicker.format !== null ? datetimePicker.format : undefined"
-                        :picker="datetimePicker.picker" :allowClear="false" placeholder=" "
-                        @change="handleDateTimeChange" :size="'small'"
-                        :disabledDate="createDisabledDateFn(datetimePicker.picker)"
-                        :disabledTime="disabledTimeForSinglePicker" />
-                    <!-- 修改为 locale 变量 -->
-                </div>
-                <div v-if="scopeDate.show" class="title_scopeDate">
-                    <a-range-picker v-model:value="scopeDateValue" :picker="scopeDate.picker" :allowClear="false"
-                        :style="{ width: scopeDate.picker === 'year' ? '80px' : (scopeDate.picker === 'month' ? '180px' : '') }"
-                        :format="scopeDate.format" :range-separator="' 至 '" :size="'small'"
-                        :presets="computedScopeDatePresets" :disabledDate="createDisabledDateFn(scopeDate.picker)" />
-                </div>
-                <div v-if="tabs.show" class="typeOne">
-                    <div @click="handleTabClick('one')" :class="tabsValue == 'one' ? 'typezhong' : ''">图片</div>
-                    <div @click="handleTabClick('two')" :class="tabsValue == 'two' ? 'typezhong' : ''">视频</div>
-                </div>
-            </div>
+  <div class="qgc-side-pannel-item">
+    <div class="qgc_title">
+      <div class="title_left">
+        <span class="texttitle">{{ title }}</span>
+        <span v-if="prompt.show" class="title_icon">
+          <a-tooltip
+            placement="top"
+            :title="prompt.value"
+            :get-popup-container="getPopupContainer"
+          >
+            <QuestionCircleOutlined />
+          </a-tooltip>
+        </span>
+        <span v-if="clickprompt.show" class="title_icon">
+          <a-tooltip
+            placement="top"
+            trigger="click"
+            :title="clickprompt.value"
+            :get-popup-container="getPopupContainer"
+          >
+            <InfoCircleOutlined />
+          </a-tooltip>
+        </span>
+        <span v-if="iconmap.show" class="title_icon">
+          <a-tooltip
+            placement="top"
+            :title="iconmap.value"
+            :get-popup-container="getPopupContainer"
+          >
+            <span :class="iconmap.icon"></span>
+          </a-tooltip>
+        </span>
+        <!-- 新增的 clickAction 插槽区域 -->
+        <span v-if="clickAction.show" class="title_icon">
+          <a-tooltip
+            placement="top"
+            trigger="click"
+            :get-popup-container="getPopupContainer"
+          >
+            <template #title>
+              <slot name="click-action-content"></slot>
+            </template>
+            <InfoCircleOutlined />
+          </a-tooltip>
+        </span>
+      </div>
+      <div class="title_right">
+        <div v-if="select.show">
+          <a-select
+            v-model:value="selectValue"
+            show-search
+            placeholder="请选择"
+            :size="'small'"
+            style="width: 120px"
+            :options="select.options"
+            :filter-option="filterOption"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="handleChange"
+          ></a-select>
         </div>
-        <div class="body">
-            <slot v-if="isExpand" />
+        <div v-if="shrink" class="title_shrink" @click="isExpand = !isExpand">
+          <img v-if="isExpand" src="@/assets/components/arrow-up.png" alt="" />
+          <img v-else src="@/assets/components/arrow-down.png" alt="" />
         </div>
+        <div v-if="moreSelect.show">
+          <a-tree-select
+            v-model:value="moreSelectValue"
+            v-model:tree-expanded-keys="treeExpandedKeys"
+            show-search
+            :size="'small'"
+            style="width: 110px"
+            :dropdown-style="{
+              maxHeight: '400px',
+              overflow: 'auto',
+              minWidth: '200px'
+            }"
+            placeholder=" "
+            :tree-data="processedMoreSelectOptions"
+            :field-names="{
+              label: 'title',
+              value: 'value',
+              children: 'children'
+            }"
+            tree-node-filter-prop="label"
+            popup-class-name="no-wrap-tree-select"
+            @select="handleTreeSelect"
+            @expand="handleTreeExpand"
+          >
+          </a-tree-select>
+        </div>
+        <div v-if="datetimePicker.show">
+          <!-- 添加 locale 属性来设置语言 -->
+          <a-date-picker
+            v-model:value="datetimeValue"
+            :show-time="timePickerConfig"
+            :style="{
+              width:
+                datetimePicker.picker === 'year'
+                  ? '80px'
+                  : datetimePicker.picker === 'month'
+                  ? '90px'
+                  : '130px'
+            }"
+            :format="
+              datetimePicker.format !== null ? datetimePicker.format : undefined
+            "
+            :picker="datetimePicker.picker"
+            :allowClear="false"
+            placeholder=" "
+            @change="handleDateTimeChange"
+            :size="'small'"
+            :disabledDate="createDisabledDateFn(datetimePicker.picker)"
+            :disabledTime="disabledTimeForSinglePicker"
+          />
+          <!-- 修改为 locale 变量 -->
+        </div>
+        <div v-if="scopeDate.show" class="title_scopeDate">
+          <a-range-picker
+            v-model:value="scopeDateValue"
+            :picker="scopeDate.picker"
+            :allowClear="false"
+            :style="{
+              width:
+                scopeDate.picker === 'year'
+                  ? '80px'
+                  : scopeDate.picker === 'month'
+                  ? '180px'
+                  : ''
+            }"
+            :format="scopeDate.format"
+            :range-separator="' 至 '"
+            :size="'small'"
+            :presets="computedScopeDatePresets"
+            :disabledDate="createDisabledDateFn(scopeDate.picker)"
+          />
+        </div>
+        <div v-if="tabs.show" class="typeOne">
+          <div
+            @click="handleTabClick('one')"
+            :class="tabsValue == 'one' ? 'typezhong' : ''"
+          >
+            图片
+          </div>
+          <div
+            @click="handleTabClick('two')"
+            :class="tabsValue == 'two' ? 'typezhong' : ''"
+          >
+            视频
+          </div>
+        </div>
+      </div>
     </div>
+    <div class="body">
+      <slot v-if="isExpand" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
 import {
-    QuestionCircleOutlined,
-    InfoCircleOutlined
+  QuestionCircleOutlined,
+  InfoCircleOutlined
 } from '@ant-design/icons-vue';
 import type { SelectProps } from 'ant-design-vue';
 // 导入 dayjs
@@ -92,125 +171,140 @@ import dayjs, { Dayjs } from 'dayjs';
 
 // 定义类型接口
 interface PromptConfig {
-    show: boolean;
-    value: string;
-    icon?: string;
+  show: boolean;
+  value: string;
+  icon?: string;
 }
 
 interface SelectConfig {
-    picker: any;
-    format: any;
-    show: boolean;
-    value: string | undefined;
-    options: SelectProps['options'];
+  picker: any;
+  format: any;
+  show: boolean;
+  value: string | undefined;
+  options: SelectProps['options'];
 }
 
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'SidePanelItem'
+  name: 'SidePanelItem'
 });
 
 // 定义props
 const props = defineProps({
-    title: { // 标题
-        type: String,
-        default: ''
+  title: {
+    // 标题
+    type: String,
+    default: ''
+  },
+  shrink: {
+    // 是否显示收缩
+    type: Boolean,
+    default: false
+  },
+  prompt: {
+    // 浮动提示
+    type: Object as () => PromptConfig,
+    default: () => ({
+      show: false,
+      value: ''
+    })
+  },
+  clickprompt: {
+    // 点击提示
+    type: Object as () => PromptConfig,
+    default: () => ({
+      show: false,
+      value: ''
+    })
+  },
+  iconmap: {
+    //自定义图标浮动
+    type: Object as () => PromptConfig,
+    default: () => ({
+      show: false,
+      value: '',
+      icon: 'iconfont icon-time'
+    })
+  },
+  clickAction: {
+    // 新增：用于控制带交互的提示插槽
+    type: Object as () => { show: boolean },
+    default: () => ({
+      show: false
+    })
+  },
+  select: {
+    // 选择框
+    type: Object as () => SelectConfig,
+    default: () => ({
+      show: false,
+      value: undefined,
+      options: []
+    })
+  },
+  moreSelect: {
+    //树选择框
+    type: Object as () => SelectConfig,
+    default: () => ({
+      show: false,
+      value: undefined,
+      options: []
+    })
+  },
+  datetimePicker: {
+    // 时间选择框
+    type: Object as () => SelectConfig & {
+      timeFormat?: string; // 新增：时间选择器的格式（控制选择粒度）
     },
-    shrink: { // 是否显示收缩
-        type: Boolean,
-        default: false
-    },
-    prompt: { // 浮动提示
-        type: Object as () => PromptConfig,
-        default: () => ({
-            show: false,
-            value: '',
-        })
-    },
-    clickprompt: { // 点击提示
-        type: Object as () => PromptConfig,
-        default: () => ({
-            show: false,
-            value: '',
-        })
-    },
-    iconmap: {//自定义图标浮动
-        type: Object as () => PromptConfig,
-        default: () => ({
-            show: false,
-            value: '',
-            icon: 'iconfont icon-time',
-        })
-    },
-    clickAction: { // 新增：用于控制带交互的提示插槽
-        type: Object as () => { show: boolean },
-        default: () => ({
-            show: false
-        })
-    },
-    select: { // 选择框
-        type: Object as () => SelectConfig,
-        default: () => ({
-            show: false,
-            value: undefined,
-            options: []
-        })
-    },
-    moreSelect: {//树选择框
-        type: Object as () => SelectConfig,
-        default: () => ({
-            show: false,
-            value: undefined,
-            options: []
-        })
-    },
-    datetimePicker: { // 时间选择框
-        type: Object as () => SelectConfig & {
-            timeFormat?: string;  // 新增：时间选择器的格式（控制选择粒度）
-        },
-        default: () => ({
-            show: false,
-            value: undefined,
-            format: null, //YYYY-MM-DD HH
-            picker: 'date', //date | week | month | quarter | year
-            timeFormat: 'HH:mm:ss'  // 默认值：显示时分秒选择器
-        })
-    },
-    scopeDate: { // 时间选择框
-        type: Object as () => SelectConfig,
-        default: () => ({
-            show: false,
-            value: undefined,
-            format: null, //YYYY-MM-DD HH
-            picker: 'month' //date | week | month | quarter | year
-        })
-    },
-    tabs: {
-        type: Object,
-        default: () => ({
-            show: false,
-            value: 'one',
-        })
-    }
+    default: () => ({
+      show: false,
+      value: undefined,
+      format: null, //YYYY-MM-DD HH
+      picker: 'date', //date | week | month | quarter | year
+      timeFormat: 'HH:mm:ss' // 默认值：显示时分秒选择器
+    })
+  },
+  scopeDate: {
+    // 时间选择框
+    type: Object as () => SelectConfig,
+    default: () => ({
+      show: false,
+      value: undefined,
+      format: null, //YYYY-MM-DD HH
+      picker: 'month' //date | week | month | quarter | year
+    })
+  },
+  tabs: {
+    type: Object,
+    default: () => ({
+      show: false,
+      value: 'one'
+    })
+  }
 });
 const emit = defineEmits(['tab-change', 'update-values']);
 const isExpand = ref(true);
-const selectValue = ref(props.select.value)
-const moreSelectValue = ref(props.moreSelect.value)
-const datetimeValue = ref<Dayjs | null>(props.datetimePicker.value ? dayjs(props.datetimePicker.value) : null);
-const scopeDateValue = ref<[Dayjs, Dayjs] | undefined>(
-    props.scopeDate.value && Array.isArray(props.scopeDate.value)
-        ? [dayjs(props.scopeDate.value[0]), dayjs(props.scopeDate.value[1])]
-        : undefined
+const selectValue = ref(props.select.value);
+const moreSelectValue = ref(props.moreSelect.value);
+const datetimeValue = ref<Dayjs | null>(
+  props.datetimePicker.value ? dayjs(props.datetimePicker.value) : null
 );
-const tabsValue = ref(props.tabs.value)
+const scopeDateValue = ref<[Dayjs, Dayjs] | undefined>(
+  props.scopeDate.value && Array.isArray(props.scopeDate.value)
+    ? [dayjs(props.scopeDate.value[0]), dayjs(props.scopeDate.value[1])]
+    : undefined
+);
+const tabsValue = ref(props.tabs.value);
+
+// 保存选中树节点的额外属性（如 lgtd、lttd 等）
+const selectedNodeExtra = ref<{ lgtd?: any; lttd?: any }>({});
 
 // 保存最后一次选择的月份值（用于从year切换回month时恢复月份）
 const lastMonthValue = ref<string | null>(null);
 
 // 树形选择器展开状态管理
-const treeExpandedKeys = ref<string[]>([])
-const nodeMap = new Map<string, { node: any; parentKey: string | null }>()
+const treeExpandedKeys = ref<string[]>([]);
+const nodeMap = new Map<string, { node: any; parentKey: string | null }>();
 
 /**
  * 创建针对不同 picker 类型的日期禁用函数
@@ -218,35 +312,35 @@ const nodeMap = new Map<string, { node: any; parentKey: string | null }>()
  * @returns disabledDate 回调函数
  */
 const createDisabledDateFn = (pickerType: string) => {
-    return (current: Dayjs) => {
-        if (!current) return false
+  return (current: Dayjs) => {
+    if (!current) return false;
 
-        const now = dayjs()
+    const now = dayjs();
 
-        switch (pickerType) {
-            case 'year':
-                // 年份选择器：禁用 > 当前年份
-                return current.year() > now.year()
+    switch (pickerType) {
+      case 'year':
+        // 年份选择器：禁用 > 当前年份
+        return current.year() > now.year();
 
-            case 'month':
-                // 月份选择器：禁用 > 当前年月
-                return current.isAfter(now, 'month')
+      case 'month':
+        // 月份选择器：禁用 > 当前年月
+        return current.isAfter(now, 'month');
 
-            case 'quarter':
-                // 季度选择器：禁用 > 当前季度
-                return current.isAfter(now, 'quarter')
+      case 'quarter':
+        // 季度选择器：禁用 > 当前季度
+        return current.isAfter(now, 'quarter');
 
-            case 'week':
-                // 周选择器：禁用 > 当前周
-                return current.isAfter(now, 'week')
+      case 'week':
+        // 周选择器：禁用 > 当前周
+        return current.isAfter(now, 'week');
 
-            case 'date':
-            default:
-                // 日期选择器：禁用 > 当前日期
-                return current.isAfter(now, 'day')
-        }
+      case 'date':
+      default:
+        // 日期选择器：禁用 > 当前日期
+        return current.isAfter(now, 'day');
     }
-}
+  };
+};
 
 /**
  * 单日期选择器的时间禁用函数（针对 show-time）
@@ -254,54 +348,54 @@ const createDisabledDateFn = (pickerType: string) => {
  * @param current - 用户当前悬停或选择的日期（由 Ant Design Vue 自动传入）
  */
 const disabledTimeForSinglePicker = (current?: Dayjs) => {
-    // 只在 datetimePicker 显示且为 date 类型时生效
-    if (!props.datetimePicker.show || props.datetimePicker.picker !== 'date') {
-        return undefined
+  // 只在 datetimePicker 显示且为 date 类型时生效
+  if (!props.datetimePicker.show || props.datetimePicker.picker !== 'date') {
+    return undefined;
+  }
+
+  const now = dayjs();
+
+  // 关键修复：使用传入的 current 参数，而不是 datetimeValue.value
+  // current 是用户当前在面板中操作的日期，会实时响应面板内的日期切换
+  const selectedDate = current || datetimeValue.value;
+
+  // 如果未选择日期，或选择的不是今天，则不限制时间
+  if (!selectedDate || !selectedDate.isSame(now, 'day')) {
+    return {};
+  }
+
+  // 辅助函数：生成从 start 到 end-1 的数组
+  const range = (start: number, end: number) => {
+    const result: number[] = [];
+    for (let i = start; i < end; i++) {
+      result.push(i);
     }
+    return result;
+  };
 
-    const now = dayjs()
-    
-    // 关键修复：使用传入的 current 参数，而不是 datetimeValue.value
-    // current 是用户当前在面板中操作的日期，会实时响应面板内的日期切换
-    const selectedDate = current || datetimeValue.value
+  return {
+    // 禁用当前小时之后的所有小时
+    disabledHours: () => {
+      return range(now.hour() + 1, 24);
+    },
 
-    // 如果未选择日期，或选择的不是今天，则不限制时间
-    if (!selectedDate || !selectedDate.isSame(now, 'day')) {
-        return {}
+    // 禁用当前分钟之后的所有分钟（仅在当前小时）
+    disabledMinutes: (selectedHour: number) => {
+      if (selectedHour === now.hour()) {
+        return range(now.minute() + 1, 60);
+      }
+      return [];
+    },
+
+    // 禁用当前秒数之后的所有秒数（仅在当前小时和分钟）
+    disabledSeconds: (selectedHour: number, selectedMinute: number) => {
+      if (selectedHour === now.hour() && selectedMinute === now.minute()) {
+        return range(now.second() + 1, 60);
+      }
+      return [];
     }
-
-    // 辅助函数：生成从 start 到 end-1 的数组
-    const range = (start: number, end: number) => {
-        const result: number[] = []
-        for (let i = start; i < end; i++) {
-            result.push(i)
-        }
-        return result
-    }
-
-    return {
-        // 禁用当前小时之后的所有小时
-        disabledHours: () => {
-            return range(now.hour() + 1, 24)
-        },
-
-        // 禁用当前分钟之后的所有分钟（仅在当前小时）
-        disabledMinutes: (selectedHour: number) => {
-            if (selectedHour === now.hour()) {
-                return range(now.minute() + 1, 60)
-            }
-            return []
-        },
-
-        // 禁用当前秒数之后的所有秒数（仅在当前小时和分钟）
-        disabledSeconds: (selectedHour: number, selectedMinute: number) => {
-            if (selectedHour === now.hour() && selectedMinute === now.minute()) {
-                return range(now.second() + 1, 60)
-            }
-            return []
-        }
-    }
-}
+  };
+};
 
 // // 定义 locale 变量
 // const locale = zhCN;
@@ -314,28 +408,28 @@ const disabledTimeForSinglePicker = (current?: Dayjs) => {
  * @returns 处理后的树数据
  */
 const processTreeData = (data: any[]): any[] => {
-    if (!data || !Array.isArray(data)) return [];
+  if (!data || !Array.isArray(data)) return [];
 
-    return data.map(item => {
-        const newItem = { ...item };
+  return data.map(item => {
+    const newItem = { ...item };
 
-        // 如果有子项，标记为不可选中
-        if (newItem.children && newItem.children.length > 0) {
-            newItem.selectable = false;
-            // 递归处理子项
-            newItem.children = processTreeData(newItem.children);
-        } else {
-            // 叶子节点默认可选中（显式声明更清晰）
-            newItem.selectable = true;
-        }
+    // 如果有子项，标记为不可选中
+    if (newItem.children && newItem.children.length > 0) {
+      newItem.selectable = false;
+      // 递归处理子项
+      newItem.children = processTreeData(newItem.children);
+    } else {
+      // 叶子节点默认可选中（显式声明更清晰）
+      newItem.selectable = true;
+    }
 
-        return newItem;
-    });
+    return newItem;
+  });
 };
 
 // 计算属性：处理后的树数据
 const processedMoreSelectOptions = computed(() => {
-    return processTreeData(props.moreSelect.options || []);
+  return processTreeData(props.moreSelect.options || []);
 });
 
 /**
@@ -344,21 +438,21 @@ const processedMoreSelectOptions = computed(() => {
  * @param parentKey 父节点key
  */
 const buildNodeMap = (treeData: any[], parentKey: string | null = null) => {
-    if (!treeData || !Array.isArray(treeData)) return
+  if (!treeData || !Array.isArray(treeData)) return;
 
-    treeData.forEach(node => {
-        // 存储当前节点及其父节点信息
-        nodeMap.set(node.value, {
-            node,
-            parentKey
-        })
+  treeData.forEach(node => {
+    // 存储当前节点及其父节点信息
+    nodeMap.set(node.value, {
+      node,
+      parentKey
+    });
 
-        // 递归处理子节点
-        if (node.children && node.children.length > 0) {
-            buildNodeMap(node.children, node.value)
-        }
-    })
-}
+    // 递归处理子节点
+    if (node.children && node.children.length > 0) {
+      buildNodeMap(node.children, node.value);
+    }
+  });
+};
 
 /**
  * 获取目标节点的所有父节点keys
@@ -366,158 +460,174 @@ const buildNodeMap = (treeData: any[], parentKey: string | null = null) => {
  * @returns 父节点keys数组（从根到直接父节点）
  */
 const getParentKeys = (targetValue: string): string[] => {
-    const parentKeys: string[] = []
-    let currentKey: string | null = targetValue
+  const parentKeys: string[] = [];
+  let currentKey: string | null = targetValue;
 
-    // 向上追溯所有父节点
-    while (currentKey !== null && currentKey !== undefined) {
-        const nodeInfo = nodeMap.get(currentKey)
+  // 向上追溯所有父节点
+  while (currentKey !== null && currentKey !== undefined) {
+    const nodeInfo = nodeMap.get(currentKey);
 
-        // 如果节点不存在或已到达根节点，停止追溯
-        if (!nodeInfo || nodeInfo.parentKey === null || nodeInfo.parentKey === undefined) {
-            break
-        }
-
-        // 将父节点插入到数组开头（保持从根到叶的顺序）
-        parentKeys.unshift(nodeInfo.parentKey)
-        currentKey = nodeInfo.parentKey
+    // 如果节点不存在或已到达根节点，停止追溯
+    if (
+      !nodeInfo ||
+      nodeInfo.parentKey === null ||
+      nodeInfo.parentKey === undefined
+    ) {
+      break;
     }
 
-    return parentKeys
-}
+    // 将父节点插入到数组开头（保持从根到叶的顺序）
+    parentKeys.unshift(nodeInfo.parentKey);
+    currentKey = nodeInfo.parentKey;
+  }
+
+  return parentKeys;
+};
 
 /**
  * 计算属性：根据 picker 类型动态生成快捷日期选项
  */
 const computedScopeDatePresets = computed(() => {
-    const now = dayjs();
-    const presets: Array<{ label: string; value: [Dayjs, Dayjs] }> = [];
+  const now = dayjs();
+  const presets: Array<{ label: string; value: [Dayjs, Dayjs] }> = [];
 
-    // 根据 picker 类型生成对应的快捷选项
-    switch (props.scopeDate.picker) {
-        case 'year':
-            // 年份选择器：只显示今年
-            presets.push({
-                label: '今年',
-                value: [now.startOf('year'), now]
-            });
-            break;
+  // 根据 picker 类型生成对应的快捷选项
+  switch (props.scopeDate.picker) {
+    case 'year':
+      // 年份选择器：只显示今年
+      presets.push({
+        label: '今年',
+        value: [now.startOf('year'), now]
+      });
+      break;
 
-        case 'month':
-            // 月份选择器：显示今天、昨天、最近七天、最近一个月、最近三个月、今年
-            presets.push(
-                {
-                    label: '今天',
-                    value: [now.startOf('day'), now.endOf('day')]
-                },
-                {
-                    label: '昨天',
-                    value: [now.subtract(1, 'day').startOf('day'), now.subtract(1, 'day').endOf('day')]
-                },
-                {
-                    label: '最近七天',
-                    value: [now.subtract(6, 'day').startOf('day'), now.endOf('day')]
-                },
-                {
-                    label: '最近一个月',
-                    value: [now.subtract(1, 'month').startOf('day'), now.endOf('day')]
-                },
-                {
-                    label: '最近三个月',
-                    value: [now.subtract(3, 'month').startOf('day'), now.endOf('day')]
-                },
-                {
-                    label: '今年',
-                    value: [now.startOf('year'), now.endOf('day')]
-                }
-            );
-            break;
+    case 'month':
+      // 月份选择器：显示今天、昨天、最近七天、最近一个月、最近三个月、今年
+      presets.push(
+        {
+          label: '今天',
+          value: [now.startOf('day'), now.endOf('day')]
+        },
+        {
+          label: '昨天',
+          value: [
+            now.subtract(1, 'day').startOf('day'),
+            now.subtract(1, 'day').endOf('day')
+          ]
+        },
+        {
+          label: '最近七天',
+          value: [now.subtract(6, 'day').startOf('day'), now.endOf('day')]
+        },
+        {
+          label: '最近一个月',
+          value: [now.subtract(1, 'month').startOf('day'), now.endOf('day')]
+        },
+        {
+          label: '最近三个月',
+          value: [now.subtract(3, 'month').startOf('day'), now.endOf('day')]
+        },
+        {
+          label: '今年',
+          value: [now.startOf('year'), now.endOf('day')]
+        }
+      );
+      break;
 
-        case 'quarter':
-            // 季度选择器：显示最近一季度、今年
-            presets.push(
-                {
-                    label: '最近一季度',
-                    value: [now.subtract(1, 'quarter').startOf('quarter'), now.endOf('quarter')]
-                },
-                {
-                    label: '今年',
-                    value: [now.startOf('year'), now.endOf('quarter')]
-                }
-            );
-            break;
+    case 'quarter':
+      // 季度选择器：显示最近一季度、今年
+      presets.push(
+        {
+          label: '最近一季度',
+          value: [
+            now.subtract(1, 'quarter').startOf('quarter'),
+            now.endOf('quarter')
+          ]
+        },
+        {
+          label: '今年',
+          value: [now.startOf('year'), now.endOf('quarter')]
+        }
+      );
+      break;
 
-        case 'week':
-            // 周选择器：显示本周、上周、最近四周
-            presets.push(
-                {
-                    label: '本周',
-                    value: [now.startOf('week'), now.endOf('week')]
-                },
-                {
-                    label: '上周',
-                    value: [now.subtract(1, 'week').startOf('week'), now.subtract(1, 'week').endOf('week')]
-                },
-                {
-                    label: '最近四周',
-                    value: [now.subtract(3, 'week').startOf('week'), now.endOf('week')]
-                }
-            );
-            break;
+    case 'week':
+      // 周选择器：显示本周、上周、最近四周
+      presets.push(
+        {
+          label: '本周',
+          value: [now.startOf('week'), now.endOf('week')]
+        },
+        {
+          label: '上周',
+          value: [
+            now.subtract(1, 'week').startOf('week'),
+            now.subtract(1, 'week').endOf('week')
+          ]
+        },
+        {
+          label: '最近四周',
+          value: [now.subtract(3, 'week').startOf('week'), now.endOf('week')]
+        }
+      );
+      break;
 
-        case 'date':
-        default:
-            // 日期选择器：显示所有常用选项
-            presets.push(
-                {
-                    label: '今天',
-                    value: [now.startOf('day'), now.endOf('day')]
-                },
-                {
-                    label: '昨天',
-                    value: [now.subtract(1, 'day').startOf('day'), now.subtract(1, 'day').endOf('day')]
-                },
-                {
-                    label: '最近七天',
-                    value: [now.subtract(6, 'day').startOf('day'), now.endOf('day')]
-                },
-                {
-                    label: '最近一个月',
-                    value: [now.subtract(1, 'month').startOf('day'), now.endOf('day')]
-                },
-                {
-                    label: '最近三个月',
-                    value: [now.subtract(3, 'month').startOf('day'), now.endOf('day')]
-                },
-                {
-                    label: '今年',
-                    value: [now.startOf('year'), now.endOf('day')]
-                }
-            );
-            break;
-    }
+    case 'date':
+    default:
+      // 日期选择器：显示所有常用选项
+      presets.push(
+        {
+          label: '今天',
+          value: [now.startOf('day'), now.endOf('day')]
+        },
+        {
+          label: '昨天',
+          value: [
+            now.subtract(1, 'day').startOf('day'),
+            now.subtract(1, 'day').endOf('day')
+          ]
+        },
+        {
+          label: '最近七天',
+          value: [now.subtract(6, 'day').startOf('day'), now.endOf('day')]
+        },
+        {
+          label: '最近一个月',
+          value: [now.subtract(1, 'month').startOf('day'), now.endOf('day')]
+        },
+        {
+          label: '最近三个月',
+          value: [now.subtract(3, 'month').startOf('day'), now.endOf('day')]
+        },
+        {
+          label: '今年',
+          value: [now.startOf('year'), now.endOf('day')]
+        }
+      );
+      break;
+  }
 
-    return presets;
+  return presets;
 });
 
 /**
  * 计算属性：根据 datetimePicker 的 timeFormat 配置生成时间选择器的配置对象
  */
 const timePickerConfig = computed(() => {
-    if (!props.datetimePicker.show || props.datetimePicker.picker !== 'date') {
-        return true; // 默认行为
-    }
-    
-    // 如果配置了 timeFormat，则使用该格式控制选择粒度
-    if (props.datetimePicker.timeFormat) {
-        return {
-            format: props.datetimePicker.timeFormat,
-            hideDisabledOptions: true, // 隐藏禁用的时间选项
-            defaultValue: dayjs().startOf('hour') // 默认选中整点
-        };
-    }
-    
+  if (!props.datetimePicker.show || props.datetimePicker.picker !== 'date') {
     return true; // 默认行为
+  }
+
+  // 如果配置了 timeFormat，则使用该格式控制选择粒度
+  if (props.datetimePicker.timeFormat) {
+    return {
+      format: props.datetimePicker.timeFormat,
+      hideDisabledOptions: true, // 隐藏禁用的时间选项
+      defaultValue: dayjs().startOf('hour') // 默认选中整点
+    };
+  }
+
+  return true; // 默认行为
 });
 
 /**
@@ -527,21 +637,29 @@ const timePickerConfig = computed(() => {
  * @param info 节点信息对象（本身就是节点，不是包含 node 的对象）
  */
 const handleTreeSelect = (selectedKeys: string | string[], info: any) => {
-    // selectedKeys 可能是字符串（单选模式）或数组（多选模式）
-    let selectedValue: string;
+  // selectedKeys 可能是字符串（单选模式）或数组（多选模式）
+  let selectedValue: string;
 
-    if (typeof selectedKeys === 'string') {
-        // 单选模式：selectedKeys 直接就是字符串
-        selectedValue = selectedKeys;
-    } else if (Array.isArray(selectedKeys)) {
-        // 多选模式：取第一个元素
-        selectedValue = selectedKeys[0];
-    } else {
-        // 兜底：尝试从 info 中获取
-        selectedValue = info?.value || '';
-    }
+  if (typeof selectedKeys === 'string') {
+    // 单选模式：selectedKeys 直接就是字符串
+    selectedValue = selectedKeys;
+  } else if (Array.isArray(selectedKeys)) {
+    // 多选模式：取第一个元素
+    selectedValue = selectedKeys[0];
+  } else {
+    // 兜底：尝试从 info 中获取
+    selectedValue = info?.value || '';
+  }
 
-    moreSelectValue.value = selectedValue;
+  moreSelectValue.value = selectedValue;
+
+  // 保存选中节点的额外属性（如 lgtd、lttd 等）
+  if (info && typeof info === 'object') {
+    selectedNodeExtra.value = {
+      lgtd: info.lgtd,
+      lttd: info.lttd
+    };
+  }
 };
 
 /**
@@ -549,354 +667,379 @@ const handleTreeSelect = (selectedKeys: string | string[], info: any) => {
  * @param keys 展开的节点键值数组
  */
 const handleTreeExpand = (keys: string[]) => {
-    // 保留事件处理函数以维持组件接口完整性
+  // 保留事件处理函数以维持组件接口完整性
 };
 
 // 下拉选择框事件处理
 const handleChange = (value: string) => {
-    // Handle change
+  // Handle change
 };
 
 const handleBlur = () => {
-    // Handle blur
+  // Handle blur
 };
 
 const handleFocus = () => {
-    // Handle focus
+  // Handle focus
 };
 
 const filterOption = (input: string, option?: { value: string }) => {
-    if (!option) return false;
-    return option.value.toLowerCase().includes(input.toLowerCase());
+  if (!option) return false;
+  return option.value.toLowerCase().includes(input.toLowerCase());
 };
 
 // 文字提示容器
 const getPopupContainer = (trigger: HTMLElement) => {
-    return trigger.parentElement;
+  return trigger.parentElement;
 };
 
 //时间选择框事件处理
 const handleDateTimeChange = (date: any | null, dateString: string) => {
-    // 当选择器为 month 时，保存当前选择的月份值
-    if (props.datetimePicker.picker === 'month' && date) {
-        lastMonthValue.value = dayjs(date).format('YYYY-MM');
-    }
-    
-    // 如果配置了 timeFormat 为 'HH'（只选择小时），确保分钟和秒为 00
-    if (props.datetimePicker.timeFormat === 'HH' && date) {
-        const normalizedDate = dayjs(date).minute(0).second(0);
-        datetimeValue.value = normalizedDate;
-    }
+  // 当选择器为 month 时，保存当前选择的月份值
+  if (props.datetimePicker.picker === 'month' && date) {
+    lastMonthValue.value = dayjs(date).format('YYYY-MM');
+  }
+
+  // 如果配置了 timeFormat 为 'HH'（只选择小时），确保分钟和秒为 00
+  if (props.datetimePicker.timeFormat === 'HH' && date) {
+    const normalizedDate = dayjs(date).minute(0).second(0);
+    datetimeValue.value = normalizedDate;
+  }
 };
 
 const handleTabClick = (value: string) => {
-    tabsValue.value = value;
-    // 向父组件传递参数
-    emit('tab-change', {
-        tabValue: value,
-        tabLabel: value === 'one' ? '图片' : '视频'
-    });
+  tabsValue.value = value;
+  // 向父组件传递参数
+  emit('tab-change', {
+    tabValue: value,
+    tabLabel: value === 'one' ? '图片' : '视频'
+  });
 };
 
 // 统一收集并发送所有控件的值
 const emitAllValues = () => {
-    const payload: any = {
-        select: selectValue.value,
-        moreSelect: moreSelectValue.value,
-        tabs: tabsValue.value,
-    };
+  const payload: any = {
+    select: selectValue.value,
+    moreSelect: moreSelectValue.value,
+    tabs: tabsValue.value,
+    selectedNodeExtra: selectedNodeExtra.value
+  };
 
-    // 处理单个时间选择器
-    if (datetimeValue.value) {
-        // 使用传入的 format，如果没有则根据 picker 类型设置默认格式
-        const format = props.datetimePicker.format || getDefaultFormat(props.datetimePicker.picker);
-        payload.datetime = datetimeValue.value.format(format);
-    } else {
-        payload.datetime = null;
-    }
+  // 处理单个时间选择器
+  if (datetimeValue.value) {
+    // 使用传入的 format，如果没有则根据 picker 类型设置默认格式
+    const format =
+      props.datetimePicker.format ||
+      getDefaultFormat(props.datetimePicker.picker);
+    payload.datetime = datetimeValue.value.format(format);
+  } else {
+    payload.datetime = null;
+  }
 
-    // 处理时间范围选择器
-    if (scopeDateValue.value && Array.isArray(scopeDateValue.value)) {
-        // 使用传入的 format，如果没有则根据 picker 类型设置默认格式
-        const format = props.scopeDate.format || getDefaultFormat(props.scopeDate.picker);
-        payload.scopeDate = scopeDateValue.value.map(d => d ? d.format(format) : null);
-    } else {
-        payload.scopeDate = [];
-    }
+  // 处理时间范围选择器
+  if (scopeDateValue.value && Array.isArray(scopeDateValue.value)) {
+    // 使用传入的 format，如果没有则根据 picker 类型设置默认格式
+    const format =
+      props.scopeDate.format || getDefaultFormat(props.scopeDate.picker);
+    payload.scopeDate = scopeDateValue.value.map(d =>
+      d ? d.format(format) : null
+    );
+  } else {
+    payload.scopeDate = [];
+  }
 
-    emit('update-values', payload);
+  emit('update-values', payload);
 };
 
 // 根据 picker 类型获取默认格式
 const getDefaultFormat = (picker: string): string => {
-    switch (picker) {
-        case 'year':
-            return 'YYYY';
-        case 'month':
-            return 'YYYY-MM';
-        case 'quarter':
-            return 'YYYY-[Q]Q';
-        case 'week':
-            return 'YYYY-wo';
-        case 'date':
-        default:
-            return 'YYYY-MM-DD';
-    }
+  switch (picker) {
+    case 'year':
+      return 'YYYY';
+    case 'month':
+      return 'YYYY-MM';
+    case 'quarter':
+      return 'YYYY-[Q]Q';
+    case 'week':
+      return 'YYYY-wo';
+    case 'date':
+    default:
+      return 'YYYY-MM-DD';
+  }
 };
 
 // 监听各个变量的变化
-watch([selectValue, moreSelectValue, datetimeValue, scopeDateValue, tabsValue], () => {
+watch(
+  [selectValue, moreSelectValue, datetimeValue, scopeDateValue, tabsValue],
+  () => {
     emitAllValues();
-});
+  }
+);
 
 // 监听 props 变化，实现父子组件数据同步
 watch(
-    () => props.select.value,
-    (newVal) => {
-        if (newVal !== selectValue.value) {
-            selectValue.value = newVal;
-        }
+  () => props.select.value,
+  newVal => {
+    if (newVal !== selectValue.value) {
+      selectValue.value = newVal;
     }
+  }
 );
 
 // 监听 moreSelectValue 的变化，移除了自动展开逻辑
 watch(
-    () => props.moreSelect.value,
-    (newVal) => {
-        if (newVal !== moreSelectValue.value) {
-            moreSelectValue.value = newVal;
-        }
+  () => props.moreSelect.value,
+  newVal => {
+    if (newVal !== moreSelectValue.value) {
+      moreSelectValue.value = newVal;
     }
+  }
 );
 
 watch(
-    () => props.datetimePicker.value,
-    (newVal) => {
-        const newDayjs = newVal ? dayjs(newVal) : null;
-        if (!datetimeValue.value || !newDayjs || !datetimeValue.value.isSame(newDayjs)) {
-            datetimeValue.value = newDayjs;
-        }
+  () => props.datetimePicker.value,
+  newVal => {
+    const newDayjs = newVal ? dayjs(newVal) : null;
+    if (
+      !datetimeValue.value ||
+      !newDayjs ||
+      !datetimeValue.value.isSame(newDayjs)
+    ) {
+      datetimeValue.value = newDayjs;
     }
+  }
 );
 
 watch(
-    () => props.scopeDate.value,
-    (newVal) => {
-        if (newVal && Array.isArray(newVal) && newVal.length === 2) {
-            const newRange: [Dayjs, Dayjs] = [dayjs(newVal[0]), dayjs(newVal[1])];
-            const currentRange = scopeDateValue.value;
+  () => props.scopeDate.value,
+  newVal => {
+    if (newVal && Array.isArray(newVal) && newVal.length === 2) {
+      const newRange: [Dayjs, Dayjs] = [dayjs(newVal[0]), dayjs(newVal[1])];
+      const currentRange = scopeDateValue.value;
 
-            // 检查是否需要更新（避免不必要的触发）
-            if (!currentRange ||
-                !currentRange[0].isSame(newRange[0]) ||
-                !currentRange[1].isSame(newRange[1])) {
-                scopeDateValue.value = newRange;
-            }
-        } else {
-            if (scopeDateValue.value) {
-                scopeDateValue.value = undefined;
-            }
-        }
+      // 检查是否需要更新（避免不必要的触发）
+      if (
+        !currentRange ||
+        !currentRange[0].isSame(newRange[0]) ||
+        !currentRange[1].isSame(newRange[1])
+      ) {
+        scopeDateValue.value = newRange;
+      }
+    } else {
+      if (scopeDateValue.value) {
+        scopeDateValue.value = undefined;
+      }
     }
+  }
 );
 
 watch(
-    () => props.tabs.value,
-    (newVal) => {
-        if (newVal !== tabsValue.value) {
-            tabsValue.value = newVal;
-        }
+  () => props.tabs.value,
+  newVal => {
+    if (newVal !== tabsValue.value) {
+      tabsValue.value = newVal;
     }
+  }
 );
 
 // 监听 datetimePicker.picker 的变化，处理从 year 切换到 month 时的月份恢复
 watch(
-    () => props.datetimePicker.picker,
-    (newPicker, oldPicker) => {
-        // 当从 year 切换到 month 时，恢复之前保存的月份
-        if (oldPicker === 'year' && newPicker === 'month' && lastMonthValue.value && datetimeValue.value) {
-            const currentYear = datetimeValue.value.year(); // 获取当前选择的年份
-            const lastMonth = dayjs(lastMonthValue.value); // 获取上次保存的月份值
-            const lastMonthNum = lastMonth.month(); // 获取月份（0-11）
-            
-            // 组合：新选择的年份 + 上次选择的月份
-            let newValue = dayjs().year(currentYear).month(lastMonthNum);
-            
-            // 检查组合后的时间是否超过当前时间
-            const now = dayjs();
-            if (newValue.isAfter(now, 'month')) {
-                // 超过当前月份，修正为当前月份
-                newValue = now.startOf('month');
-            }
-            
-            datetimeValue.value = newValue;
-        }
+  () => props.datetimePicker.picker,
+  (newPicker, oldPicker) => {
+    // 当从 year 切换到 month 时，恢复之前保存的月份
+    if (
+      oldPicker === 'year' &&
+      newPicker === 'month' &&
+      lastMonthValue.value &&
+      datetimeValue.value
+    ) {
+      const currentYear = datetimeValue.value.year(); // 获取当前选择的年份
+      const lastMonth = dayjs(lastMonthValue.value); // 获取上次保存的月份值
+      const lastMonthNum = lastMonth.month(); // 获取月份（0-11）
+
+      // 组合：新选择的年份 + 上次选择的月份
+      let newValue = dayjs().year(currentYear).month(lastMonthNum);
+
+      // 检查组合后的时间是否超过当前时间
+      const now = dayjs();
+      if (newValue.isAfter(now, 'month')) {
+        // 超过当前月份，修正为当前月份
+        newValue = now.startOf('month');
+      }
+
+      datetimeValue.value = newValue;
     }
+  }
 );
 
 // 监听 moreSelectValue 变化（包括默认值和用户选择）
-watch(() => moreSelectValue.value, (newValue) => {
-    console.log('moreSelectValue 变化:', newValue)
+watch(
+  () => moreSelectValue.value,
+  newValue => {
+    console.log('moreSelectValue 变化:', newValue);
 
     if (newValue && nodeMap.size > 0) {
-        // 只有当 nodeMap 已构建时才执行
-        const parentKeys = getParentKeys(newValue as string)
-        treeExpandedKeys.value = parentKeys
-        console.log('自动展开父节点:', parentKeys)
+      // 只有当 nodeMap 已构建时才执行
+      const parentKeys = getParentKeys(newValue as string);
+      treeExpandedKeys.value = parentKeys;
+      console.log('自动展开父节点:', parentKeys);
     } else {
-        treeExpandedKeys.value = []
+      treeExpandedKeys.value = [];
     }
-}, { immediate: true }) // immediate: true 确保默认值也能触发
+  },
+  { immediate: true }
+); // immediate: true 确保默认值也能触发
 
 // 监听树数据变化，重新构建映射
-watch(() => processedMoreSelectOptions.value, (newData) => {
-    console.log('树数据变化，重新构建映射')
+watch(
+  () => processedMoreSelectOptions.value,
+  newData => {
+    console.log('树数据变化，重新构建映射');
 
     if (newData && newData.length > 0) {
-        // 清空旧映射
-        nodeMap.clear()
-        // 重新构建映射
-        buildNodeMap(newData)
+      // 清空旧映射
+      nodeMap.clear();
+      // 重新构建映射
+      buildNodeMap(newData);
 
-        // 数据加载完成后，如果已有默认值，重新触发一次
-        if (moreSelectValue.value) {
-            nextTick(() => {
-                const parentKeys = getParentKeys(moreSelectValue.value as string)
-                treeExpandedKeys.value = parentKeys
-                console.log('数据加载后自动展开父节点:', parentKeys)
-            })
-        }
+      // 数据加载完成后，如果已有默认值，重新触发一次
+      if (moreSelectValue.value) {
+        nextTick(() => {
+          const parentKeys = getParentKeys(moreSelectValue.value as string);
+          treeExpandedKeys.value = parentKeys;
+          console.log('数据加载后自动展开父节点:', parentKeys);
+        });
+      }
     }
-}, { deep: true })
+  },
+  { deep: true }
+);
 
 // 页面加载时执行的逻辑
 onMounted(() => {
-    // 如果初始 picker 是 month，保存初始月份值
-    if (props.datetimePicker.picker === 'month' && datetimeValue.value) {
-        lastMonthValue.value = datetimeValue.value.format('YYYY-MM');
-    }
-    
-    // 初始化时发送一次默认值
-    emitAllValues();
+  // 如果初始 picker 是 month，保存初始月份值
+  if (props.datetimePicker.picker === 'month' && datetimeValue.value) {
+    lastMonthValue.value = datetimeValue.value.format('YYYY-MM');
+  }
+
+  // 初始化时发送一次默认值
+  emitAllValues();
 });
 
 // 组件卸载时清空状态，避免影响其他页面
 onUnmounted(() => {
-    // 清空月份记忆，防止组件复用时的状态污染
-    lastMonthValue.value = null;
+  // 清空月份记忆，防止组件复用时的状态污染
+  lastMonthValue.value = null;
 });
 </script>
 
 <style lang="scss">
 .qgc-side-pannel-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  .qgc_title {
     width: 100%;
+    background-color: #e5edf3;
+    border-radius: 2px;
+    font-size: 16px;
+    color: #2f6b98;
+    line-height: 36px;
+    padding-left: 16px;
+    padding-right: 8px;
     display: flex;
     justify-content: space-between;
-    flex-direction: column;
+    position: relative;
+    font-weight: 500;
 
-    .qgc_title {
-        width: 100%;
-        background-color: #e5edf3;
-        border-radius: 2px;
-        font-size: 16px;
-        color: #2f6b98;
-        line-height: 36px;
-        padding-left: 16px;
-        padding-right: 8px;
-        display: flex;
-        justify-content: space-between;
-        position: relative;
-        font-weight: 500;
-
-        .title_shrink {
-            cursor: pointer;
-        }
-
-        .title_left {
-            display: flex;
-            align-items: center;
-
-            .texttitle {
-                display: inline-block;
-                //width:180px;
-            }
-
-            .title_icon {
-                display: inline-block;
-                margin-left: 5px;
-                cursor: pointer;
-            }
-
-        }
-
-        .title_right {
-            display: flex;
-            align-items: center;
-
-            div {
-
-                margin-right: 2px;
-            }
-        }
-
-        .typeOne {
-            display: flex;
-            // width: 84px;
-            height: 24px;
-            box-sizing: border-box;
-            cursor: pointer;
-
-            div {
-                width: 38px;
-                height: 24px;
-                font-size: 14px;
-                line-height: 24px;
-                text-align: center;
-                background: #fff;
-                margin: 0px;
-                color: rgba(0, 0, 0, .85);
-            }
-
-            .typezhong {
-                background: #40a9ff;
-                color: #fff;
-            }
-        }
+    .title_shrink {
+      cursor: pointer;
     }
 
-    .qgc_title:before {
-        position: absolute;
-        content: "";
+    .title_left {
+      display: flex;
+      align-items: center;
+
+      .texttitle {
         display: inline-block;
-        left: 0;
-        width: 2px;
-        background-color: #005293;
-        top: 2px;
-        height: 32px;
-        border-radius: 3px;
+        //width:180px;
+      }
+
+      .title_icon {
+        display: inline-block;
+        margin-left: 5px;
+        cursor: pointer;
+      }
     }
 
-    .body {
-        width: 100%;
+    .title_right {
+      display: flex;
+      align-items: center;
+
+      div {
+        margin-right: 2px;
+      }
+    }
+
+    .typeOne {
+      display: flex;
+      // width: 84px;
+      height: 24px;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      div {
+        width: 38px;
+        height: 24px;
         font-size: 14px;
-        line-height: 22px;
-        padding: 16px 0 0;
-        margin-bottom: 16px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        height: calc(100% - 36px);
-        box-sizing: border-box;
+        line-height: 24px;
+        text-align: center;
+        background: #fff;
+        margin: 0px;
+        color: rgba(0, 0, 0, 0.85);
+      }
 
-
-        p {
-            text-indent: 2em;
-        }
+      .typezhong {
+        background: #40a9ff;
+        color: #fff;
+      }
     }
+  }
+
+  .qgc_title:before {
+    position: absolute;
+    content: '';
+    display: inline-block;
+    left: 0;
+    width: 2px;
+    background-color: #005293;
+    top: 2px;
+    height: 32px;
+    border-radius: 3px;
+  }
+
+  .body {
+    width: 100%;
+    font-size: 14px;
+    line-height: 22px;
+    padding: 16px 0 0;
+    margin-bottom: 16px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: calc(100% - 36px);
+    box-sizing: border-box;
+
+    p {
+      text-indent: 2em;
+    }
+  }
 }
 
 .title_scopeDate {
-    :deep(.ant-picker-range-separator) {
-        padding: 0px !important;
-    }
+  :deep(.ant-picker-range-separator) {
+    padding: 0px !important;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/gis/map.class.ts b/frontend/src/components/gis/map.class.ts
index 9c0ca759..66c2d8a7 100644
--- a/frontend/src/components/gis/map.class.ts
+++ b/frontend/src/components/gis/map.class.ts
@@ -33,6 +33,7 @@ export class MapClass implements MapClassInterface {
     this.service = new MapOl();
   }
   static getInstance(): MapClass {
+    console.log('getInstance');
     if (!this.instance) {
       this.instance = new MapClass();
     }
diff --git a/frontend/src/components/gis/map.ol.ts b/frontend/src/components/gis/map.ol.ts
index 7eed35d8..fc0bf1a3 100644
--- a/frontend/src/components/gis/map.ol.ts
+++ b/frontend/src/components/gis/map.ol.ts
@@ -72,6 +72,7 @@ export class MapOl implements MapInterface {
   private hoveredFeatureId: string | number | null = null;
   private popupManager: PopupManager;
   private regionMaskManager: RegionMaskManager;
+  private isBatchPopupMode = false;
   constructor() {
     this.pointLayerManager = new PointLayerManager({
       map: null,
@@ -142,7 +143,11 @@ export class MapOl implements MapInterface {
       this.popupManager.setMap(this.map);
       this.regionMaskManager.setContext(this.map, this.view);
 
-      this.view.on('change:resolution', () => {});
+      this.view.on('change:resolution', () => {
+        this.handleZoomChange();
+        const zoom = this.view.getZoom();
+        console.log('mouse zoom:', zoom);
+      });
       this.map.on('click', evt => {
         this.popupManager.showPopup(undefined, undefined);
         this.popupManager.handleMapClick(evt.pixel, detectedFeature => {
@@ -169,9 +174,24 @@ export class MapOl implements MapInterface {
             targetElement.style.cursor = payload.hoveredId ? 'pointer' : '';
           }
 
-          this.showPopup(payload.detectedFeature, payload.coordinate);
+          // 批量 popup 模式下（>= 14 级）不触发 hover popup
+          if (!this.isBatchPopupMode) {
+            this.showPopup(payload.detectedFeature, payload.coordinate);
+          }
         });
       });
+
+      this.map.on('pointerdrag', () => {
+        if (this.isBatchPopupMode) {
+          this.updateBatchPopups();
+        }
+      });
+      this.map.on('moveend', () => {
+        if (this.isBatchPopupMode) {
+          this.updateBatchPopups();
+        }
+      });
+
       return Promise.resolve(this.map);
     } catch (e) {
       console.error('OL Init Error', e);
@@ -220,6 +240,52 @@ export class MapOl implements MapInterface {
   showPopup(feature: Feature | undefined, coordinate: number[] | undefined) {
     this.popupManager.showPopup(feature, coordinate);
   }
+
+  /**
+   * 监听缩放层级变化，>= 15 时自动显示可视区域内所有锚点的 popup
+   */
+  private handleZoomChange() {
+    if (!this.view) return;
+
+    const zoom = this.view.getZoom();
+    if (zoom === undefined) return;
+
+    if (zoom >= 15) {
+      this.enableBatchPopupMode();
+    } else {
+      this.disableBatchPopupMode();
+    }
+  }
+
+  /**
+   * 启用批量 popup 模式：自动显示可视区域内所有锚点的 popup
+   */
+  private enableBatchPopupMode() {
+    this.isBatchPopupMode = true;
+    this.popupManager.clearBatchPopups();
+    this.updateBatchPopups();
+  }
+
+  /**
+   * 禁用批量 popup 模式：恢复鼠标悬停显示 popup
+   */
+  private disableBatchPopupMode() {
+    this.isBatchPopupMode = false;
+    this.popupManager.clearBatchPopups();
+    this.popupManager.showPopup(undefined, undefined);
+  }
+
+  /**
+   * 更新批量显示的 popups（拖动地图后调用）
+   */
+  private updateBatchPopups() {
+    const features = this.pointLayerManager.getFeaturesInViewport();
+    // 传入样式检查器，过滤掉 declutter/距离过滤等隐藏的锚点
+    this.popupManager.showPopupsForFeatures(features, feature => {
+      const style = this.createPointStyle(feature);
+      return style !== null;
+    });
+  }
   /**
    * 创建点样式 (模拟 Leaflet 的 DivIcon 效果，支持随缩放动态调整大小)
    */
@@ -660,6 +726,10 @@ export class MapOl implements MapInterface {
     const layerInstance = this.layerRegistry.get(registryKey as string);
     if (layerInstance) {
       layerInstance.setVisible(checked);
+      // 图层显隐变化时刷新 batch popup
+      if (this.isBatchPopupMode) {
+        this.updateBatchPopups();
+      }
     } else {
       console.warn(
         `未找到标识为 [${registryKey}] 的图层实例，当前注册表 keys:`,
@@ -669,6 +739,10 @@ export class MapOl implements MapInterface {
   }
   mdLayerTreeShowOrHidden(layerType: string, checked?: boolean): void {
     this.pointLayerManager.setLayerVisible(layerType, checked);
+    // 图层显隐变化时刷新 batch popup
+    if (this.isBatchPopupMode) {
+      this.updateBatchPopups();
+    }
   }
 
   hasLayer(layerType: string): void {
@@ -1212,7 +1286,6 @@ export class MapOl implements MapInterface {
     // 使用 Object.assign 批量设置样式，代码更整洁
     Object.assign(container.style, {
       position: 'absolute',
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
       border: '1px solid #000',
       padding: '4px 8px',
       borderRadius: '4px',
@@ -1223,7 +1296,6 @@ export class MapOl implements MapInterface {
       display: 'flex',
       alignItems: 'center',
       zIndex: '1001',
-      boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
       pointerEvents: 'auto' // 确保可以点击
     });
 
@@ -1309,6 +1381,10 @@ export class MapOl implements MapInterface {
       key || '',
       !!checked
     );
+    // 图例变化时刷新 batch popup
+    if (this.isBatchPopupMode) {
+      this.updateBatchPopups();
+    }
   }
 
   /**
@@ -1327,6 +1403,10 @@ export class MapOl implements MapInterface {
       anchoPointState,
       checked
     );
+    // 图例变化时刷新 batch popup
+    if (this.isBatchPopupMode) {
+      this.updateBatchPopups();
+    }
   }
 
   switchView(_type): void {}
diff --git a/frontend/src/components/gis/ol/point-layer-manager.ts b/frontend/src/components/gis/ol/point-layer-manager.ts
index 8cb6c29a..78903e68 100644
--- a/frontend/src/components/gis/ol/point-layer-manager.ts
+++ b/frontend/src/components/gis/ol/point-layer-manager.ts
@@ -32,6 +32,34 @@ export class PointLayerManager {
     this.map = map;
   }
 
+  // 备注：获取当前屏幕可视区域内的所有点要素（仅包含图层可见且图例可见的要素）。
+  getFeaturesInViewport(): Feature[] {
+    if (!this.map) return [];
+
+    const extent = this.map.getView().calculateExtent(this.map.getSize());
+    if (!extent) return [];
+
+    const [minX, minY, maxX, maxY] = extent;
+    const result: Feature[] = [];
+
+    this.forEachFeature((feature, layer) => {
+      // 跳过图层本身不可见的要素
+      if (!layer.getVisible()) return;
+
+      const geom = feature.getGeometry();
+      if (!geom || geom.getType() !== 'Point') return;
+
+      const coords = (geom as Point).getCoordinates();
+      const [x, y] = coords;
+
+      if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
+        result.push(feature);
+      }
+    });
+
+    return result;
+  }
+
   // 备注：统一返回当前点图层注册表，供外层做遍历或清理。
   getRegistry() {
     return this.layerRegistry;
@@ -128,6 +156,7 @@ export class PointLayerManager {
     const vectorLayer = this.layerRegistry.get(layerKey);
     if (vectorLayer && vectorLayer.getVisible() !== visible) {
       vectorLayer.setVisible(visible);
+      vectorLayer.changed();
     }
   }
 
diff --git a/frontend/src/components/gis/ol/popup-manager.ts b/frontend/src/components/gis/ol/popup-manager.ts
index e9a947ee..d2f9f4a5 100644
--- a/frontend/src/components/gis/ol/popup-manager.ts
+++ b/frontend/src/components/gis/ol/popup-manager.ts
@@ -204,6 +204,213 @@ export class PopupManager {
     this.popupElement.style.display = 'none';
   }
 
+  // 备注：批量显示多个要素的 Popup，使用绝对定位的 div 而非 Overlay。
+  showPopupsForFeatures(
+    features: Feature[],
+    styleChecker?: (feature: Feature) => boolean
+  ) {
+    if (!this.map || !this.popupElement) return;
+
+    // 清除之前批量显示的 popups
+    this.clearBatchPopups();
+
+    // 过滤：只显示图例可见的要素
+    const visibleFeatures = features.filter(
+      f => f.get('_legendVisible') !== false
+    );
+
+    if (visibleFeatures.length === 0) return;
+
+    const mapElement = this.map.getTargetElement();
+    const batchContainer = document.createElement('div');
+    batchContainer.className = 'batch-popup-container';
+    batchContainer.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 1000;
+    `;
+    batchContainer.id = 'batch-popup-container';
+
+    // 先添加容器到 DOM，以便后续元素能正确测量尺寸
+    mapElement.appendChild(batchContainer);
+
+    // 用于碰撞检测的已放置 popup 列表
+    const placedPopups: Array<{
+      left: number;
+      right: number;
+      top: number;
+      bottom: number;
+    }> = [];
+    let styleHiddenCount = 0;
+    let blockedCount = 0;
+    let renderedCount = 0;
+    const renderedIds: Array<string | number | null> = [];
+    const blockedIds: Array<string | number | null> = [];
+
+    // 用于 declutter 模拟检测的已放置要素边界框列表
+    const placedAnchors: Array<{
+      bbLeft: number;
+      bbRight: number;
+      bbTop: number;
+      bbBottom: number;
+    }> = [];
+
+    visibleFeatures.forEach(feature => {
+      const geom = feature.getGeometry();
+      if (!geom || geom.getType() !== 'Point') return;
+
+      const coords = (geom as Point).getCoordinates();
+      const pixel = this.map?.getPixelFromCoordinate(coords);
+      if (!pixel) return;
+
+      // 检查样式是否隐藏（declutter、距离过滤等）
+      if (styleChecker && !styleChecker(feature)) {
+        styleHiddenCount += 1;
+        return;
+      }
+
+      // 模拟 OpenLayers declutter：基于图标+文字的边界框碰撞检测
+      const zoom = this.map.getView().getZoom() ?? 14;
+      let dynamicScale = 0.7 + (zoom - 4.5) * 0.08;
+      dynamicScale = Math.max(0.5, Math.min(3.0, dynamicScale));
+
+      // 计算要素的碰撞边界框
+      const labelText = (feature.get('_labelText') as string) || '';
+      const labelLineCount = labelText.split('\n').length;
+      const labelWidth = Math.min(
+        labelText
+          .split('\n')
+          .reduce((max, line) => Math.max(max, line.length), 0) *
+          7 *
+          dynamicScale,
+        200
+      );
+      const labelHeight = 12 * dynamicScale * labelLineCount;
+      const labelOffsetY =
+        labelLineCount > 1 ? -30 * dynamicScale : -22 * dynamicScale;
+      const iconSize = 32 * dynamicScale; // 假设图标原始大小 32x32
+
+      // 碰撞框 = 图标框 ∪ 文字框
+      const bbLeft = pixel[0] - Math.max(iconSize / 2, labelWidth / 2);
+      const bbRight = pixel[0] + Math.max(iconSize / 2, labelWidth / 2);
+      const bbTop = pixel[1] + labelOffsetY - labelHeight;
+      const bbBottom = pixel[1] + iconSize / 2;
+
+      // 检查是否和已放置的要素碰撞
+      let blocked = false;
+      for (const placed of placedAnchors) {
+        if (
+          bbRight > placed.bbLeft &&
+          bbLeft < placed.bbRight &&
+          bbBottom > placed.bbTop &&
+          bbTop < placed.bbBottom
+        ) {
+          blocked = true;
+          break;
+        }
+      }
+      if (blocked) {
+        blockedCount += 1;
+        blockedIds.push((feature.getId?.() as string | number | null) ?? null);
+        return;
+      }
+
+      const props = feature.getProperties();
+      const popupHtml = props.popupHtml || generatePopupHtml(props);
+      if (!popupHtml) return;
+
+      // 记录边界框用于 declutter 检测
+      placedAnchors.push({ bbLeft, bbRight, bbTop, bbBottom });
+
+      // 创建与原始 popupElement 完全相同的样式
+      const popupEl = document.createElement('div');
+      popupEl.className = this.popupElement.className;
+      popupEl.innerHTML = popupHtml;
+      // 不设置自定义 cssText，只设置定位（对应原始 popup 的 positioning: 'bottom-center', offset: [0, -10]）
+      popupEl.style.position = 'absolute';
+      popupEl.style.display = 'block';
+      popupEl.style.transform = 'translate(-50%, -100%)'; // bottom-center 对齐
+      popupEl.style.pointerEvents = 'none';
+
+      // 临时设置 visibility: hidden 来测量尺寸
+      popupEl.style.visibility = 'hidden';
+      popupEl.style.left = `${pixel[0]}px`;
+      popupEl.style.top = `${pixel[1] - 10}px`;
+      batchContainer.appendChild(popupEl);
+
+      // 获取 popup 尺寸
+      const rect = popupEl.getBoundingClientRect();
+      const popupWidth = rect.width;
+      const popupHeight = rect.height;
+
+      // 计算 popup 的位置（对应原始 positioning: 'bottom-center', offset: [0, -10]）
+      const popupX = pixel[0];
+      const popupY = pixel[1] - 10; // bottom-center 对齐 + 10px 偏移
+      const popupRect = {
+        left: popupX - popupWidth / 2,
+        right: popupX + popupWidth / 2,
+        top: popupY - popupHeight,
+        bottom: popupY
+      };
+
+      // 碰撞检测
+      let hasCollision = false;
+      for (const placed of placedPopups) {
+        if (this.checkCollision(popupRect, placed)) {
+          hasCollision = true;
+          break;
+        }
+      }
+
+      if (!hasCollision) {
+        // 无碰撞，显示 popup
+        popupEl.style.visibility = 'visible';
+        popupEl.style.left = `${popupX}px`;
+        popupEl.style.top = `${popupY}px`;
+        renderedCount += 1;
+        renderedIds.push((feature.getId?.() as string | number | null) ?? null);
+
+        placedPopups.push({
+          left: popupRect.left,
+          right: popupRect.right,
+          top: popupRect.top,
+          bottom: popupRect.bottom
+        });
+      } else {
+        // 有碰撞，移除该 popup
+        blockedCount += 1;
+        blockedIds.push((feature.getId?.() as string | number | null) ?? null);
+        batchContainer.removeChild(popupEl);
+      }
+    });
+  }
+
+  // 备注：清除批量显示的 popups。
+  clearBatchPopups() {
+    const existing = document.getElementById('batch-popup-container');
+    if (existing) {
+      existing.remove();
+    }
+  }
+
+  // 备注：检测两个 popup 矩形是否碰撞。
+  private checkCollision(
+    rect1: { left: number; right: number; top: number; bottom: number },
+    rect2: { left: number; right: number; top: number; bottom: number }
+  ): boolean {
+    const padding = 4;
+    return !(
+      rect1.right + padding < rect2.left ||
+      rect1.left - padding > rect2.right ||
+      rect1.bottom + padding < rect2.top ||
+      rect1.top - padding > rect2.bottom
+    );
+  }
+
   // 备注：统一重置 hover 和 Popup 状态，供地图销毁和切换时复用。
   reset() {
     if (this.animationFrameId) {
@@ -264,6 +471,7 @@ export class PopupManager {
 
   // 备注：销毁 Popup 管理器内部状态和 Overlay 引用。
   destroy() {
+    this.clearBatchPopups();
     this.reset();
     if (this.popupElement && this.popupMouseEnterHandler) {
       this.popupElement.removeEventListener(
diff --git a/frontend/src/modules/chuixiangshuiwenChangeMod/index.vue b/frontend/src/modules/chuixiangshuiwenChangeMod/index.vue
index 0f4d9c29..0f04e34d 100644
--- a/frontend/src/modules/chuixiangshuiwenChangeMod/index.vue
+++ b/frontend/src/modules/chuixiangshuiwenChangeMod/index.vue
@@ -1,11 +1,19 @@
 <!-- 垂向水温变化图 -->
 <template>
-  <SidePanelItem title="垂向水温变化" :moreSelect="select" :datetimePicker="datetimePicker"
-    @update-values="handlePanelChange1">
+  <SidePanelItem
+    title="垂向水温变化"
+    :moreSelect="select"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
     <div class="chart-wrapper">
       <!-- 图表容器 -->
       <a-spin :spinning="loading" tip="加载中...">
-        <div v-show="showemit && !loading" ref="chartRef" class="chart-container"></div>
+        <div
+          v-show="showemit && !loading"
+          ref="chartRef"
+          class="chart-container"
+        ></div>
         <div v-show="!showemit && !loading" class="chart-container">
           <a-empty />
         </div>
@@ -15,18 +23,29 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import {
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  nextTick
+} from 'vue';
 import * as echarts from 'echarts';
 import type { ECharts } from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
-import { getChuiXiangShuiWenTreeStcd, getCxswList } from "@/api/sw";
-import { useModelStore } from "@/store/modules/model";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { getChuiXiangShuiWenTreeStcd, getCxswList } from '@/api/sw';
+import { useModelStore } from '@/store/modules/model';
+import { useMapModalStore } from '@/store/modules/mapModal';
+import { MapClass } from '@/components/gis/map.class';
 
 const modelStore = useModelStore();
 const JidiSelectEventStore = useJidiSelectEventStore();
 const baseid = ref('');
 
+// 选择的时间
+const year = ref('');
 // 定义组件名
 defineOptions({
   name: 'chuixiangshuiwenChangeMod'
@@ -140,7 +159,7 @@ function transformAggregatesToChartData(
     if (!monthData || monthData.length === 0) {
       result.push({
         name: `${month}月`,
-        dataXy: []  // 空数组，ECharts 会显示为断开
+        dataXy: [] // 空数组，ECharts 会显示为断开
       });
       continue;
     }
@@ -152,11 +171,11 @@ function transformAggregatesToChartData(
       stnm: string;
     }> = monthData.map((item: any) => ({
       value: [
-        parseFloat(item.vwt),   // 温度
-        parseInt(item.wthg)     // 深度/高程
-      ] as [number, number],  // ✅ 显式声明为元组类型
-      stcd: stcd,    // 站点编码
-      stnm: stnm     // 站点名称
+        parseFloat(item.vwt), // 温度
+        parseInt(item.wthg) // 深度/高程
+      ] as [number, number], // ✅ 显式声明为元组类型
+      stcd: stcd, // 站点编码
+      stnm: stnm // 站点名称
     }));
 
     result.push({
@@ -172,16 +191,25 @@ function transformAggregatesToChartData(
  * 根据当前年月生成颜色和图例显隐状态
  */
 function generateColorsAndVisibility(
-  dataLength: number,  // ⚠️ 现在固定传入 12
+  dataLength: number, // ⚠️ 现在固定传入 12
   sDate: string | number
 ): {
   colors: string[];
   selected: Record<string, boolean>;
 } {
   const baseColors = [
-    '#6ca4f7', '#78c300', '#9556a4', '#df91ab',
-    '#7399c6', '#dbb629', '#56c2e3', '#f56a06',
-    '#cdba75', '#76523b', '#df75b6', '#00a050'
+    '#6ca4f7',
+    '#78c300',
+    '#9556a4',
+    '#df91ab',
+    '#7399c6',
+    '#dbb629',
+    '#56c2e3',
+    '#f56a06',
+    '#cdba75',
+    '#76523b',
+    '#df75b6',
+    '#00a050'
   ];
 
   const currentYear = new Date().getFullYear();
@@ -233,7 +261,7 @@ const getCurrentHourTimeTwo = () => {
   const startTime = new Date(endTime);
   startTime.setMonth(startTime.getMonth() - 1);
 
-  const formatDateTime = (date) => {
+  const formatDateTime = date => {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
     const day = String(date.getDate()).padStart(2, '0');
@@ -253,15 +281,15 @@ const select = ref({
   value: '',
   options: [],
   picker: undefined,
-  format: undefined,
+  format: undefined
 });
 
 const datetimePicker = ref({
   show: true,
   value: computed(() => getCurrentHourTime()),
-  format: "YYYY",
-  picker: "year" as const,
-  options: [],
+  format: 'YYYY',
+  picker: 'year' as const,
+  options: []
 });
 
 /**
@@ -273,58 +301,61 @@ const selectOptions = async () => {
   try {
     let filters = [
       {
-        "field": "mway",
-        "operator": "eq",
-        "dataType": "string",
-        "value": 2
+        field: 'mway',
+        operator: 'eq',
+        dataType: 'string',
+        value: 2
       },
       {
-        "field": "tm",
-        "operator": "gte",
-        "dataType": "date",
-        "value": getCurrentHourTimeTwo()[0]
+        field: 'tm',
+        operator: 'gte',
+        dataType: 'date',
+        value: getCurrentHourTimeTwo()[0]
       },
       {
-        "field": "tm",
-        "operator": "lte",
-        "dataType": "date",
-        "value": getCurrentHourTimeTwo()[1]
+        field: 'tm',
+        operator: 'lte',
+        dataType: 'date',
+        value: getCurrentHourTimeTwo()[1]
       }
     ];
 
     if (baseid.value && baseid.value !== 'all') {
       filters.push({
-        "field": "baseId",
-        "operator": "eq",
-        "dataType": "string",
-        "value": baseid.value
+        field: 'baseId',
+        operator: 'eq',
+        dataType: 'string',
+        value: baseid.value
       });
     }
 
     let filter = {
-      "logic": "and",
-      "filters": filters
+      logic: 'and',
+      filters: filters
     };
 
-    let sort = baseid.value && baseid.value !== 'all' ? [
-      {
-        "field": "rstcdStepSort",
-        "dir": "asc"
-      }
-    ] : [
-      {
-        "field": "baseId",
-        "dir": "asc"
-      },
-      {
-        "field": "rstcdStepSort",
-        "dir": "asc"
-      }
-    ];
+    let sort =
+      baseid.value && baseid.value !== 'all'
+        ? [
+            {
+              field: 'rstcdStepSort',
+              dir: 'asc'
+            }
+          ]
+        : [
+            {
+              field: 'baseId',
+              dir: 'asc'
+            },
+            {
+              field: 'rstcdStepSort',
+              dir: 'asc'
+            }
+          ];
 
     const data = { filter, sort };
     const res = await getChuiXiangShuiWenTreeStcd(data);
-    let dataOne = res?.data?.data || res.data
+    let dataOne = res?.data?.data || res.data;
 
     if (dataOne.length > 0) {
       const treeData = dataOne.map(item => {
@@ -334,27 +365,29 @@ const selectOptions = async () => {
           selectable: false,
           children: (item.stcdVo || []).map(child => ({
             title: child.stnm,
-            value: child.stcd
+            value: child.stcd,
+            lgtd: child.lgtd,
+            lttd: child.lttd
           }))
         };
       });
       if (baseid.value == 'all') {
-        select.value.value = '008640203800001014'
+        select.value.value = '008640203800001014';
         select.value.options = treeData;
       } else {
-        select.value.value = treeData[0].children[0].value
+        select.value.value = treeData[0].children[0].value;
         select.value.options = treeData;
       }
     } else {
-      select.value.options = []
-      select.value.value = ''
+      select.value.options = [];
+      select.value.value = '';
     }
   } catch (error) {
     console.error('获取站点数据失败:', error);
   } finally {
     loading.value = false; // 关闭loading
   }
-}
+};
 
 // ==================== 新增图表相关状态 ====================
 
@@ -362,14 +395,16 @@ const chartRef = ref<HTMLElement | null>(null);
 let chartInstance: ECharts | null = null;
 
 // 图表数据（对象型格式，包含站点元信息）
-const chartData = ref<Array<{
-  name: string;
-  dataXy: Array<{
-    value: [number, number];
-    stcd: string;
-    stnm: string;
-  }>;
-}>>([]);
+const chartData = ref<
+  Array<{
+    name: string;
+    dataXy: Array<{
+      value: [number, number];
+      stcd: string;
+      stnm: string;
+    }>;
+  }>
+>([]);
 
 // Y轴类型（1=水深，2=高程）
 const type = ref(1);
@@ -390,26 +425,26 @@ const fetchChartData = async (stcd: string, year: string | number) => {
   try {
     const params = {
       filter: {
-        logic: "and",
+        logic: 'and',
         filters: [
           {
-            field: "year",
-            operator: "eq",
-            dataType: "string",
+            field: 'year',
+            operator: 'eq',
+            dataType: 'string',
             value: String(year)
           },
           {
-            field: "stcd",
-            operator: "eq",
-            dataType: "string",
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
             value: stcd
           }
         ]
       },
       sort: [
         {
-          field: "depth",
-          dir: "asc"
+          field: 'depth',
+          dir: 'asc'
         }
       ]
     };
@@ -429,18 +464,26 @@ const fetchChartData = async (stcd: string, year: string | number) => {
       });
 
       // ✅ 转换数据，传递 stcd 和 stnm
-      chartData.value = transformAggregatesToChartData(aggregates, stcd, currentStnm);
+      chartData.value = transformAggregatesToChartData(
+        aggregates,
+        stcd,
+        currentStnm
+      );
 
       // ✅ 修改：传入固定值 12，而非 chartData.value.length
-      const { colors: newColors, selected: newSelected } = generateColorsAndVisibility(
-        12,  // ⚠️ 固定传入 12
-        year
-      );
+      const { colors: newColors, selected: newSelected } =
+        generateColorsAndVisibility(
+          12, // ⚠️ 固定传入 12
+          year
+        );
       colors.value = newColors;
       selected.value = newSelected;
 
       // 根据数据长度决定showemit
-      if (chartData.value.length > 0 && chartData.value.some(item => item.dataXy.length > 0)) {
+      if (
+        chartData.value.length > 0 &&
+        chartData.value.some(item => item.dataXy.length > 0)
+      ) {
         showemit.value = true; // 有数据则显示图表
       } else {
         showemit.value = false; // 无数据显示空状态
@@ -490,12 +533,26 @@ const initChart = () => {
     console.log('站点名称:', stnm);
     console.log('水温:', temperature);
     console.log('深度:', depth);
+
+    const matchMonth = params.seriesName.match(/\d+/);
+    const monthNum = matchMonth ? parseInt(matchMonth[0]) : 1;
+    const startTime = `${year.value}-${String(monthNum).padStart(
+      2,
+      '0'
+    )}-01 00:00:00`;
+    const lastDay = new Date(year.value, monthNum, 0).getDate();
+    const endTime = `${year.value}-${String(monthNum).padStart(
+      2,
+      '0'
+    )}-${lastDay} 23:59:59`;
+    console.log(endTime);
     modelStore.modalVisible = true;
-    modelStore.params.sttp = "WT";
+    modelStore.params.sttp = 'WT';
     modelStore.params.enfc = '1';
-    modelStore.title = stnm ;
+    modelStore.title = stnm;
     // modelStore.isBasicEdit = true;
     modelStore.params.stcd = stcd;
+    modelStore.filter.rangeTm = [startTime, endTime];
 
     // TODO: 在此处添加您的业务逻辑
   });
@@ -511,7 +568,7 @@ const updateChart = () => {
   const yData: any[] = [];
   const legend: string[] = [];
 
-  chartData.value.forEach((item) => {
+  chartData.value.forEach(item => {
     if (item.dataXy.length > 0) {
       // ✅ 从对象中提取 value[0]（温度值）
       xData.push(item.dataXy[0].value[0]);
@@ -521,7 +578,7 @@ const updateChart = () => {
 
     yData.push({
       name: item.name,
-      data: item.dataXy,  // ✅ 直接使用对象数组
+      data: item.dataXy, // ✅ 直接使用对象数组
       type: 'line',
       smooth: true,
       connectNulls: true,
@@ -593,7 +650,7 @@ const updateChart = () => {
       type: 'value' as const,
       name: type.value === 2 ? '高程(m)' : '水深(m)',
       min: 0,
-      scale: false,  // ✅ 新增：确保 Y 轴从 0 开始，防止自动调整
+      scale: false, // ✅ 新增：确保 Y 轴从 0 开始，防止自动调整
       nameGap: type.value === 2 ? 22 : 10,
       inverse: type.value !== 2
     },
@@ -612,13 +669,17 @@ const handleChartClick = (params: any) => {
   const matchMonth = params.seriesName.match(/\d+/);
   const monthNum = matchMonth ? parseInt(matchMonth[0]) : 1;
 
-  const year = typeof datetimePicker.value.value === 'string'
-    ? parseInt(datetimePicker.value.value)
-    : datetimePicker.value.value;
+  const year =
+    typeof datetimePicker.value.value === 'string'
+      ? parseInt(datetimePicker.value.value)
+      : datetimePicker.value.value;
 
   const startTime = `${year}-${String(monthNum).padStart(2, '0')}-01 00:00:00`;
   const lastDay = new Date(year, monthNum, 0).getDate();
-  const endTime = `${year}-${String(monthNum).padStart(2, '0')}-${lastDay} 23:59:59`;
+  const endTime = `${year}-${String(monthNum).padStart(
+    2,
+    '0'
+  )}-${lastDay} 23:59:59`;
 
   const currentStcd = select.value.value;
   let currentStnm = '';
@@ -669,7 +730,7 @@ onBeforeUnmount(() => {
 
 watch(
   () => JidiSelectEventStore.selectedItem,
-  async (newVal) => {
+  async newVal => {
     if (!newVal || !newVal.wbsCode) {
       return;
     }
@@ -689,20 +750,28 @@ watch(
 //   },
 //   { deep: true }
 // );
-
-const handlePanelChange1 = (data: any) => {
+const handlePanelChange1 = (data: any, type: string) => {
   console.log('当前所有控件状态:', data);
   if (data.moreSelect && data.datetime) {
-    fetchChartData(data.moreSelect, data.datetime)
+    if (type == 'click') {
+      const mapClass = MapClass.getInstance();
+      mapClass.flyTopanto(
+        [
+          Number(data.selectedNodeExtra.lgtd),
+          Number(data.selectedNodeExtra.lttd)
+        ],
+        15
+      );
+    }
+    year.value = data.datetime;
+    fetchChartData(data.moreSelect, data.datetime);
   } else {
-    showemit.value = true
+    showemit.value = true;
     chartData.value = [];
     colors.value = [];
     selected.value = {};
     showemit.value = false;
   }
-
-
 };
 </script>
 
diff --git a/frontend/src/modules/churukushuiwenMod/index.vue b/frontend/src/modules/churukushuiwenMod/index.vue
index b565b801..71ff0fb7 100644
--- a/frontend/src/modules/churukushuiwenMod/index.vue
+++ b/frontend/src/modules/churukushuiwenMod/index.vue
@@ -6,24 +6,42 @@
   特性：支持月份选择、站点筛选、数据缩放、空值断开显示
 -->
 <template>
-    <SidePanelItem title="出入库水温" :moreSelect="select" :scopeDate="scopeDate" @update-values="handlePanelChange1">
-        <!-- ECharts图表容器 -->
-        <a-spin :spinning="loading" tip="加载中...">
-            <div v-show="showemit && !loading" ref="chartContainer" class="chart-container"></div>
-            <div v-show="!showemit && !loading" class="chart-container">
-                <a-empty />
-            </div>
-        </a-spin>
+  <SidePanelItem
+    title="出入库水温"
+    :moreSelect="select"
+    :scopeDate="scopeDate"
+    @update-values="handlePanelChange1"
+  >
+    <!-- ECharts图表容器 -->
+    <a-spin :spinning="loading" tip="加载中...">
+      <div
+        v-show="showemit && !loading"
+        ref="chartContainer"
+        class="chart-container"
+      ></div>
+      <div v-show="!showemit && !loading" class="chart-container">
+        <a-empty />
+      </div>
+    </a-spin>
 
-        <!-- 数据点详情弹框 -->
-        <a-modal v-model:open="modalVisible" :title="`${stationName}出入库水温`" :width="1536" :footer="null"
-            @cancel="handleModalClose">
-            <!-- 弹框内容区域 - 待完善 -->
-            <div class="modal-content">
-               <churukushuiwen v-if="clickDataInfo" :tm="[clickDataInfo.date, clickDataInfo.date]" :stcd="paramsOne.value" />
-            </div>
-        </a-modal>
-    </SidePanelItem>
+    <!-- 数据点详情弹框 -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="`${stationName}出入库水温`"
+      :width="1536"
+      :footer="null"
+      @cancel="handleModalClose"
+    >
+      <!-- 弹框内容区域 - 待完善 -->
+      <div class="modal-content">
+        <churukushuiwen
+          v-if="clickDataInfo"
+          :tm="[clickDataInfo.date, clickDataInfo.date]"
+          :stcd="paramsOne.value"
+        />
+      </div>
+    </a-modal>
+  </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
@@ -32,12 +50,12 @@ import * as echarts from 'echarts';
 import dayjs from 'dayjs';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
 import { getVmsstbprpt, inOutOneGetKendoListCust } from '@/api/sw';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
-import churukushuiwen from './churukushuiwen.vue'
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import churukushuiwen from './churukushuiwen.vue';
 // ==================== 组件基础配置 ====================
 // 定义组件名(便于调试和递归)
 defineOptions({
-    name: 'churukushuiwenMod'
+  name: 'churukushuiwenMod'
 });
 
 // ==================== 状态管理初始化 ====================
@@ -55,20 +73,20 @@ const loading = ref(false); // 控制加载状态
 
 // ==================== 下拉框配置(站点选择) ====================
 const select = ref({
-    show: true,           // 是否显示下拉框
-    value: '',            // 当前选中值(站点编码)
-    options: [],          // 下拉选项列表
-    picker: undefined,    // 选择器类型(未使用)
-    format: undefined,    // 格式化字符串(未使用)
+  show: true, // 是否显示下拉框
+  value: '', // 当前选中值(站点编码)
+  options: [], // 下拉选项列表
+  picker: undefined, // 选择器类型(未使用)
+  format: undefined // 格式化字符串(未使用)
 });
 
 // ==================== 日期范围选择器配置 ====================
 const scopeDate = ref({
-    show: true,                          // 是否显示日期选择器
-    value: [currentMonth, currentMonth] as any, // 默认选中当前月份范围（使用 as any 绕过类型检查）
-    format: "YYYY-MM",                   // 显示格式
-    picker: "month" as const,            // 选择器类型:月份选择
-    options: [],                         // 可选日期范围(未使用)
+  show: true, // 是否显示日期选择器
+  value: [currentMonth, currentMonth] as any, // 默认选中当前月份范围（使用 as any 绕过类型检查）
+  format: 'YYYY-MM', // 显示格式
+  picker: 'month' as const, // 选择器类型:月份选择
+  options: [] // 可选日期范围(未使用)
 });
 
 // ==================== 业务变量 ====================
@@ -85,35 +103,35 @@ const stationName = ref(''); // 站点名称
  * @returns 包含日期数组、入库水温数组、出库水温数组的对象
  */
 function transformChartData(rawData: any[]) {
-    // 1. 提取所有唯一日期并排序
-    const dateSet = new Set<string>()
-    rawData.forEach(item => {
-        const date = item.tm?.split(' ')[0] // "2026-04-01 00:00:00" -> "2026-04-01"
-        if (date) dateSet.add(date)
-    })
-    const dates = Array.from(dateSet).sort()
+  // 1. 提取所有唯一日期并排序
+  const dateSet = new Set<string>();
+  rawData.forEach(item => {
+    const date = item.tm?.split(' ')[0]; // "2026-04-01 00:00:00" -> "2026-04-01"
+    if (date) dateSet.add(date);
+  });
+  const dates = Array.from(dateSet).sort();
 
-    // 2. 构建两条线的数据(入库水温和出库水温)
-    const iwtData: (number | null)[] = []  // 入库水温(Inlet Water Temperature)
-    const dwtData: (number | null)[] = []  // 出库水温(Discharge Water Temperature)
+  // 2. 构建两条线的数据(入库水温和出库水温)
+  const iwtData: (number | null)[] = []; // 入库水温(Inlet Water Temperature)
+  const dwtData: (number | null)[] = []; // 出库水温(Discharge Water Temperature)
 
-    dates.forEach(date => {
-        // 查找该日期的入库水温(dwtp='IWT')
-        const iwtItem = rawData.find(item =>
-            item.tm?.startsWith(date) && item.dwtp === 'IWT'
-        )
-        // 保留一位小数,缺失则填null(曲线断开)
-        iwtData.push(iwtItem ? Number(iwtItem.wt.toFixed(1)) : null)
+  dates.forEach(date => {
+    // 查找该日期的入库水温(dwtp='IWT')
+    const iwtItem = rawData.find(
+      item => item.tm?.startsWith(date) && item.dwtp === 'IWT'
+    );
+    // 保留一位小数,缺失则填null(曲线断开)
+    iwtData.push(iwtItem ? Number(iwtItem.wt.toFixed(1)) : null);
 
-        // 查找该日期的出库水温(dwtp='DWT')
-        const dwtItem = rawData.find(item =>
-            item.tm?.startsWith(date) && item.dwtp === 'DWT'
-        )
-        // 保留一位小数,缺失则填null(曲线断开)
-        dwtData.push(dwtItem ? Number(dwtItem.wt.toFixed(1)) : null)
-    })
+    // 查找该日期的出库水温(dwtp='DWT')
+    const dwtItem = rawData.find(
+      item => item.tm?.startsWith(date) && item.dwtp === 'DWT'
+    );
+    // 保留一位小数,缺失则填null(曲线断开)
+    dwtData.push(dwtItem ? Number(dwtItem.wt.toFixed(1)) : null);
+  });
 
-    return { dates, iwtData, dwtData }
+  return { dates, iwtData, dwtData };
 }
 
 /**
@@ -123,18 +141,18 @@ function transformChartData(rawData: any[]) {
  * @returns Y轴的最小值和最大值对象
  */
 function calculateYAxisRange(data: (number | null)[]) {
-    // 过滤出有效数值
-    const validValues = data.filter(v => v !== null) as number[]
-    if (validValues.length === 0) return { min: 0, max: 10 } // 无数据时返回默认范围
+  // 过滤出有效数值
+  const validValues = data.filter(v => v !== null) as number[];
+  if (validValues.length === 0) return { min: 0, max: 10 }; // 无数据时返回默认范围
 
-    const min = Math.min(...validValues)
-    const max = Math.max(...validValues)
+  const min = Math.min(...validValues);
+  const max = Math.max(...validValues);
 
-    // 上下各扩展0.2,避免曲线贴边
-    return {
-        min: Number((min - 0.2).toFixed(1)),  // 最小值减0.2
-        max: Number((max + 0.1).toFixed(1))   // 最大值加0.2
-    }
+  // 上下各扩展0.2,避免曲线贴边
+  return {
+    min: Number((min - 0.2).toFixed(1)), // 最小值减0.2
+    max: Number((max + 0.1).toFixed(1)) // 最大值加0.2
+  };
 }
 
 /**
@@ -144,91 +162,99 @@ function calculateYAxisRange(data: (number | null)[]) {
  * @returns X轴刻度间隔值(interval属性)
  */
 function calculateXAxisInterval(dateCount: number): number {
-    if (dateCount <= 4) return 0  // 数据点≤4时,显示所有刻度
-    return Math.ceil(dateCount / 4) - 1  // 动态计算间隔,保证最多4个刻度
+  if (dateCount <= 4) return 0; // 数据点≤4时,显示所有刻度
+  return Math.ceil(dateCount / 4) - 1; // 动态计算间隔,保证最多4个刻度
 }
-const paramsOne:any = ref({
-    value: '',
-    tm: [currentMonth, currentMonth]
-})
+const paramsOne: any = ref({
+  value: '',
+  tm: [currentMonth, currentMonth]
+});
 /**
  * 获取图表数据
  * 调用后端接口获取出入库水温数据,并触发图表更新
  */
 async function fetchChartData() {
-    if (loading.value) return; // 防止重复请求
+  if (loading.value) return; // 防止重复请求
 
-    loading.value = true; // 开始请求前设置loading
+  loading.value = true; // 开始请求前设置loading
 
-    try {
-        // 动态计算时间范围（考虑不同月份的实际天数）
-        const startDate = paramsOne.value.tm[0] + '-01 00:00:00';
-        const endDate = dayjs(paramsOne.value.tm[1]).endOf('month').format('YYYY-MM-DD') + ' 23:59:59';
+  try {
+    // 动态计算时间范围（考虑不同月份的实际天数）
+    const startDate = paramsOne.value.tm[0] + '-01 00:00:00';
+    const endDate =
+      dayjs(paramsOne.value.tm[1]).endOf('month').format('YYYY-MM-DD') +
+      ' 23:59:59';
 
-        // 构建查询参数(固定参数,后续可扩展为动态)
-        const params = {
-            filter: {
-                logic: "and",
-                filters: [
-                    {
-                        // OR逻辑:查询入库或出库水温
-                        logic: "or",
-                        filters: [
-                            { field: "engDwtCode", operator: "eq", value: paramsOne.value.value }, // 出库站点编码
-                            { field: "engIwtCode", operator: "eq", value: paramsOne.value.value }  // 入库站点编码
-                        ]
-                    },
-                    // 时间范围过滤
-                    { field: "dt", operator: "gte", dataType: "date", value: startDate },
-                    { field: "dt", operator: "lte", dataType: "date", value: endDate }
-                ]
-            }
-        }
+    // 构建查询参数(固定参数,后续可扩展为动态)
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            // OR逻辑:查询入库或出库水温
+            logic: 'or',
+            filters: [
+              {
+                field: 'engDwtCode',
+                operator: 'eq',
+                value: paramsOne.value.value
+              }, // 出库站点编码
+              {
+                field: 'engIwtCode',
+                operator: 'eq',
+                value: paramsOne.value.value
+              } // 入库站点编码
+            ]
+          },
+          // 时间范围过滤
+          { field: 'dt', operator: 'gte', dataType: 'date', value: startDate },
+          { field: 'dt', operator: 'lte', dataType: 'date', value: endDate }
+        ]
+      }
+    };
 
-        // 调用API获取数据
-        const res = await inOutOneGetKendoListCust(params)
-        const rawData = res?.data?.data || []
+    // 调用API获取数据
+    const res = await inOutOneGetKendoListCust(params);
+    const rawData = res?.data?.data || [];
 
-        console.log('原始数据:', rawData)
+    console.log('原始数据:', rawData);
 
-        // 根据数据长度决定showemit
-        if (rawData.length > 0) {
-            showemit.value = true; // 有数据则显示图表
+    // 根据数据长度决定showemit
+    if (rawData.length > 0) {
+      showemit.value = true; // 有数据则显示图表
 
-            // 转换数据格式
-            const { dates, iwtData, dwtData } = transformChartData(rawData)
+      // 转换数据格式
+      const { dates, iwtData, dwtData } = transformChartData(rawData);
 
-            console.log('转换后的数据:', { dates, iwtData, dwtData })
-
-            // 数据就绪后初始化或更新图表
-            setTimeout(() => {
-                if (!chartInstance) {
-                    initChartWithData(dates, iwtData, dwtData); // 带数据初始化
-                } else {
-                    updateChart(dates, iwtData, dwtData, 0); // 已有实例则更新
-                }
-
-                // 强制重绘,确保图表尺寸正确适配容器
-                setTimeout(() => {
-                    if (chartInstance) {
-                        chartInstance.resize();
-                    }
-                }, 50);
-            }, 50);
+      console.log('转换后的数据:', { dates, iwtData, dwtData });
 
+      // 数据就绪后初始化或更新图表
+      setTimeout(() => {
+        if (!chartInstance) {
+          initChartWithData(dates, iwtData, dwtData); // 带数据初始化
         } else {
-            showemit.value = false; // 无数据显示空状态
+          updateChart(dates, iwtData, dwtData, 0); // 已有实例则更新
         }
 
-        chartDataLoaded.value = true; // 标记数据已加载
-
-    } catch (error) {
-        console.error('获取图表数据失败:', error);
-        showemit.value = false; // 出错也显示空状态
-        chartDataLoaded.value = true; // 即使失败也标记为已加载,避免重复请求
-    } finally {
-        loading.value = false; // 无论成功失败都关闭loading
+        // 强制重绘,确保图表尺寸正确适配容器
+        setTimeout(() => {
+          if (chartInstance) {
+            chartInstance.resize();
+          }
+        }, 50);
+      }, 50);
+    } else {
+      showemit.value = false; // 无数据显示空状态
     }
+
+    chartDataLoaded.value = true; // 标记数据已加载
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+    showemit.value = false; // 出错也显示空状态
+    chartDataLoaded.value = true; // 即使失败也标记为已加载,避免重复请求
+  } finally {
+    loading.value = false; // 无论成功失败都关闭loading
+  }
 }
 
 /**
@@ -237,17 +263,21 @@ async function fetchChartData() {
  * @param iwtData - 入库水温数据
  * @param dwtData - 出库水温数据
  */
-const initChartWithData = (dates: string[], iwtData: (number | null)[], dwtData: (number | null)[]) => {
-    if (!chartContainer.value) return;
+const initChartWithData = (
+  dates: string[],
+  iwtData: (number | null)[],
+  dwtData: (number | null)[]
+) => {
+  if (!chartContainer.value) return;
 
-    const containerHeight = chartContainer.value.offsetHeight;
-    if (containerHeight === 0) {
-        setTimeout(() => initChartWithData(dates, iwtData, dwtData), 100);
-        return;
-    }
+  const containerHeight = chartContainer.value.offsetHeight;
+  if (containerHeight === 0) {
+    setTimeout(() => initChartWithData(dates, iwtData, dwtData), 100);
+    return;
+  }
 
-    chartInstance = echarts.init(chartContainer.value);
-    updateChart(dates, iwtData, dwtData, 0);
+  chartInstance = echarts.init(chartContainer.value);
+  updateChart(dates, iwtData, dwtData, 0);
 };
 
 /**
@@ -258,225 +288,238 @@ const initChartWithData = (dates: string[], iwtData: (number | null)[], dwtData:
  * @param dwtData - 出库水温数据数组
  * @param yAxisMax - 废弃参数,保留以兼容旧代码
  */
-function updateChart(dates: string[], iwtData: (number | null)[], dwtData: (number | null)[], yAxisMax: number) {
-    if (!chartInstance) {
-        console.warn('图表实例未初始化')
-        return
-    }
+function updateChart(
+  dates: string[],
+  iwtData: (number | null)[],
+  dwtData: (number | null)[],
+  yAxisMax: number
+) {
+  if (!chartInstance) {
+    console.warn('图表实例未初始化');
+    return;
+  }
 
-    try {
-        // ==================== 动态计算坐标轴范围 ====================
-        const xAxisInterval = calculateXAxisInterval(dates.length) // X轴刻度间隔
-        const { min: yAxisMin, max: yAxisMaxValue } = calculateYAxisRange([...iwtData, ...dwtData]) // Y轴范围
+  try {
+    // ==================== 动态计算坐标轴范围 ====================
+    const xAxisInterval = calculateXAxisInterval(dates.length); // X轴刻度间隔
+    const { min: yAxisMin, max: yAxisMaxValue } = calculateYAxisRange([
+      ...iwtData,
+      ...dwtData
+    ]); // Y轴范围
 
-        console.log('X轴间隔:', xAxisInterval, 'Y轴范围:', { min: yAxisMin, max: yAxisMaxValue })
+    console.log('X轴间隔:', xAxisInterval, 'Y轴范围:', {
+      min: yAxisMin,
+      max: yAxisMaxValue
+    });
 
-        // ==================== ECharts配置项 ====================
-        const option = {
-            // 提示框配置
-            tooltip: {
-                trigger: 'axis', // 触发类型:坐标轴触发
-                backgroundColor: 'rgba(50, 50, 50, 0.9)', // 背景色
-                borderColor: 'transparent', // 边框透明
-                textStyle: {
-                    color: '#fff', // 文字颜色
-                    fontSize: 14 // 字体大小
-                },
-                axisPointer: {
-                    type: 'line', // 指示器类型:直线
-                    lineStyle: {
-                        color: 'rgba(91, 143, 249, 0.15)', // 指示线颜色
-                        width: 30, // 指示线宽度
-                        type: 'solid' // 线型:实线
-                    }
-                },
-                // 自定义提示框内容
-                formatter: function (params: any) {
-                    if (!params || params.length === 0) return '';
-                    const date = params[0].name; // 获取日期
-                    let result = `<div style="font-weight: bold; margin-bottom: 8px; font-size: 14px;">${date}</div>`;
-                    params.forEach((item: any) => {
-                        // 空值显示'-',符合项目规范
-                        const value = item.value !== null && item.value !== undefined ? `${item.value}°C` : '-'
-                        result += `<div style="display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 14px;">
+    // ==================== ECharts配置项 ====================
+    const option = {
+      // 提示框配置
+      tooltip: {
+        trigger: 'axis', // 触发类型:坐标轴触发
+        backgroundColor: 'rgba(50, 50, 50, 0.9)', // 背景色
+        borderColor: 'transparent', // 边框透明
+        textStyle: {
+          color: '#fff', // 文字颜色
+          fontSize: 14 // 字体大小
+        },
+        axisPointer: {
+          type: 'line', // 指示器类型:直线
+          lineStyle: {
+            color: 'rgba(91, 143, 249, 0.15)', // 指示线颜色
+            width: 30, // 指示线宽度
+            type: 'solid' // 线型:实线
+          }
+        },
+        // 自定义提示框内容
+        formatter: function (params: any) {
+          if (!params || params.length === 0) return '';
+          const date = params[0].name; // 获取日期
+          let result = `<div style="font-weight: bold; margin-bottom: 8px; font-size: 14px;">${date}</div>`;
+          params.forEach((item: any) => {
+            // 空值显示'-',符合项目规范
+            const value =
+              item.value !== null && item.value !== undefined
+                ? `${item.value}°C`
+                : '-';
+            result += `<div style="display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 14px;">
               <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color};"></span>
               <span>${item.seriesName}</span>
               <span style="font-weight: bold; margin-left: auto;">${value}</span>
             </div>`;
-                    });
-                    return result;
-                }
-            },
+          });
+          return result;
+        }
+      },
 
-            // 标题配置
-            title: {
-                text: '水温(°C)', // 标题文本
-                left: 17, // 左侧位置
-                top: 13, // 顶部位置
-                textStyle: {
-                    fontSize: 13,
-                    color: '#000000',
-                    fontWeight: 'normal'
-                }
-            },
+      // 标题配置
+      title: {
+        text: '水温(°C)', // 标题文本
+        left: 17, // 左侧位置
+        top: 13, // 顶部位置
+        textStyle: {
+          fontSize: 13,
+          color: '#000000',
+          fontWeight: 'normal'
+        }
+      },
 
-            // 图例配置
-            legend: {
-                data: ['入库水温', '出库水温'], // 图例项
-                top: 13, // 顶部对齐
-                left: 'center', // 水平居中
-                itemWidth: 10, // 图例图标宽度
-                itemHeight: 10, // 图例图标高度
-                itemGap: 20, // 图例间距
-                textStyle: {
-                    fontSize: 13,
-                    color: '#000000'
-                }
-            },
+      // 图例配置
+      legend: {
+        data: ['入库水温', '出库水温'], // 图例项
+        top: 13, // 顶部对齐
+        left: 'center', // 水平居中
+        itemWidth: 10, // 图例图标宽度
+        itemHeight: 10, // 图例图标高度
+        itemGap: 20, // 图例间距
+        textStyle: {
+          fontSize: 13,
+          color: '#000000'
+        }
+      },
 
-            // 网格配置(图表区域边距)
-            grid: {
-                left: '10%',
-                right: '5%',
-                top: '15%',
-                bottom: '10%'
-            },
+      // 网格配置(图表区域边距)
+      grid: {
+        left: '10%',
+        right: '5%',
+        top: '15%',
+        bottom: '10%'
+      },
 
-            // X轴配置
-            xAxis: {
-                type: 'category', // 类目轴
-                data: dates, // 日期数据
-                boundaryGap: true, // 两侧留白
-                interval: xAxisInterval,  // 动态刻度间隔,最多显示4个标签
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#000000' // 轴线颜色
-                    }
-                },
-                axisTick: {
-                    show: false // 隐藏刻度线
-                },
-                axisLabel: {
-                    color: '#000000', // 标签颜色
-                    fontSize: 13, // 字体大小
-                    margin: 10 // 标签与轴线距离
-                },
-                splitLine: {
-                    show: true, // 显示分割线
-                    lineStyle: {
-                        color: '#bfbfbf', // 分割线颜色
-                        type: 'solid' // 实线
-                    }
-                }
-            },
+      // X轴配置
+      xAxis: {
+        type: 'category', // 类目轴
+        data: dates, // 日期数据
+        boundaryGap: true, // 两侧留白
+        interval: xAxisInterval, // 动态刻度间隔,最多显示4个标签
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#000000' // 轴线颜色
+          }
+        },
+        axisTick: {
+          show: false // 隐藏刻度线
+        },
+        axisLabel: {
+          color: '#000000', // 标签颜色
+          fontSize: 13, // 字体大小
+          margin: 10 // 标签与轴线距离
+        },
+        splitLine: {
+          show: true, // 显示分割线
+          lineStyle: {
+            color: '#bfbfbf', // 分割线颜色
+            type: 'solid' // 实线
+          }
+        }
+      },
 
-            // 数据缩放配置(鼠标滚轮缩放)
-            dataZoom: [
-                {
-                    type: 'inside', // 内置型数据区域缩放
-                    start: 0, // 起始位置0%
-                    end: 100, // 结束位置100%
-                    minValueSpan: 2, // 最小显示2个数据点
-                    zoomOnMouseWheel: true, // 允许滚轮缩放
-                    moveOnMouseMove: true, // 允许鼠标拖拽平移
-                    moveOnMouseWheel: false, // 滚轮不触发平移
-                    zoomLock: false, // 不锁定缩放比例
-                    throttle: 50 // 节流50ms
-                }
-            ],
+      // 数据缩放配置(鼠标滚轮缩放)
+      dataZoom: [
+        {
+          type: 'inside', // 内置型数据区域缩放
+          start: 0, // 起始位置0%
+          end: 100, // 结束位置100%
+          minValueSpan: 2, // 最小显示2个数据点
+          zoomOnMouseWheel: true, // 允许滚轮缩放
+          moveOnMouseMove: true, // 允许鼠标拖拽平移
+          moveOnMouseWheel: false, // 滚轮不触发平移
+          zoomLock: false, // 不锁定缩放比例
+          throttle: 50 // 节流50ms
+        }
+      ],
 
-            // Y轴配置
-            yAxis: {
-                type: 'value', // 数值轴
-                min: yAxisMin, // 动态最小值(数据最小值-0.2)
-                max: yAxisMaxValue, // 动态最大值(数据最大值+0.2)
-                scale: true,  // 自适应缩放,不强制从0开始
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#000000',
-                        width: 1
-                    }
-                },
-                axisTick: {
-                    show: true, // 显示刻度线
-                    lineStyle: {
-                        color: '#000000',
-                        width: 1
-                    },
-                    length: 4 // 刻度线长度
-                },
-                axisLabel: {
-                    color: '#000000',
-                    fontSize: 12,
-                    formatter: '{value}' // 标签格式
-                },
-                splitLine: {
-                    show: true, // 显示网格线
-                    lineStyle: {
-                        color: '#bfbfbf',
-                        type: 'solid'
-                    }
-                }
-            },
+      // Y轴配置
+      yAxis: {
+        type: 'value', // 数值轴
+        min: yAxisMin, // 动态最小值(数据最小值-0.2)
+        max: yAxisMaxValue, // 动态最大值(数据最大值+0.2)
+        scale: true, // 自适应缩放,不强制从0开始
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#000000',
+            width: 1
+          }
+        },
+        axisTick: {
+          show: true, // 显示刻度线
+          lineStyle: {
+            color: '#000000',
+            width: 1
+          },
+          length: 4 // 刻度线长度
+        },
+        axisLabel: {
+          color: '#000000',
+          fontSize: 12,
+          formatter: '{value}' // 标签格式
+        },
+        splitLine: {
+          show: true, // 显示网格线
+          lineStyle: {
+            color: '#bfbfbf',
+            type: 'solid'
+          }
+        }
+      },
 
-            // 系列数据配置(两条折线)
-            series: [
-                {
-                    name: '入库水温', // 系列名称
-                    type: 'line', // 图表类型:折线图
-                    smooth: true, // 平滑曲线
-                    symbol: 'circle', // 数据点形状:圆形
-                    symbolSize: 4, // 数据点大小
-                    connectNulls: true,  // 关键:不连接空值,实现曲线断开效果
-                    lineStyle: {
-                        width: 2, // 线宽
-                        color: '#4b79ab' // 线条颜色:蓝色
-                    },
-                    itemStyle: {
-                        color: '#4b79ab' // 数据点颜色
-                    },
-                    data: iwtData // 入库水温数据
-                },
-                {
-                    name: '出库水温', // 系列名称
-                    type: 'line', // 图表类型:折线图
-                    smooth: true, // 平滑曲线
-                    symbol: 'circle', // 数据点形状:圆形
-                    symbolSize: 4, // 数据点大小
-                    connectNulls: true, // 不连接空值,实现断开效果
-                    lineStyle: {
-                        width: 2, // 线宽
-                        color: '#78c300' // 线条颜色:绿色
-                    },
-                    itemStyle: {
-                        color: '#78c300' // 数据点颜色
-                    },
-                    data: dwtData // 出库水温数据
-                }
-            ]
-        };
+      // 系列数据配置(两条折线)
+      series: [
+        {
+          name: '入库水温', // 系列名称
+          type: 'line', // 图表类型:折线图
+          smooth: true, // 平滑曲线
+          symbol: 'circle', // 数据点形状:圆形
+          symbolSize: 4, // 数据点大小
+          connectNulls: true, // 关键:不连接空值,实现曲线断开效果
+          lineStyle: {
+            width: 2, // 线宽
+            color: '#4b79ab' // 线条颜色:蓝色
+          },
+          itemStyle: {
+            color: '#4b79ab' // 数据点颜色
+          },
+          data: iwtData // 入库水温数据
+        },
+        {
+          name: '出库水温', // 系列名称
+          type: 'line', // 图表类型:折线图
+          smooth: true, // 平滑曲线
+          symbol: 'circle', // 数据点形状:圆形
+          symbolSize: 4, // 数据点大小
+          connectNulls: true, // 不连接空值,实现断开效果
+          lineStyle: {
+            width: 2, // 线宽
+            color: '#78c300' // 线条颜色:绿色
+          },
+          itemStyle: {
+            color: '#78c300' // 数据点颜色
+          },
+          data: dwtData // 出库水温数据
+        }
+      ]
+    };
 
-        // 应用配置到图表实例
-        chartInstance.setOption(option, true); // true表示完全替换配置
+    // 应用配置到图表实例
+    chartInstance.setOption(option, true); // true表示完全替换配置
 
-        // 绑定点击事件监听器
-        chartInstance.off('click'); // 先移除旧的事件监听
-        chartInstance.on('click', handleChartClick);
+    // 绑定点击事件监听器
+    chartInstance.off('click'); // 先移除旧的事件监听
+    chartInstance.on('click', handleChartClick);
 
-        console.log('图表更新成功')
+    console.log('图表更新成功');
 
-        // 强制重绘,确保图表尺寸正确适配容器
-        setTimeout(() => {
-            if (chartInstance) {
-                chartInstance.resize(); // 重新计算图表尺寸
-            }
-        }, 50);
-
-    } catch (error) {
-        console.error('更新图表失败:', error)
-    }
+    // 强制重绘,确保图表尺寸正确适配容器
+    setTimeout(() => {
+      if (chartInstance) {
+        chartInstance.resize(); // 重新计算图表尺寸
+      }
+    }, 50);
+  } catch (error) {
+    console.error('更新图表失败:', error);
+  }
 }
 
 // ==================== 生命周期钩子 ====================
@@ -486,13 +529,13 @@ function updateChart(dates: string[], iwtData: (number | null)[], dwtData: (numb
  * 初始化图表并获取数据
  */
 onMounted(() => {
-    // 延迟100ms初始化,确保DOM渲染完成
-    setTimeout(() => {
-        if (chartContainer.value) {
-            // fetchChartData(); // 先获取真实数据
-            window.addEventListener('resize', handleResize); // 监听窗口大小变化
-        }
-    }, 100);
+  // 延迟100ms初始化,确保DOM渲染完成
+  setTimeout(() => {
+    if (chartContainer.value) {
+      // fetchChartData(); // 先获取真实数据
+      window.addEventListener('resize', handleResize); // 监听窗口大小变化
+    }
+  }, 100);
 });
 
 /**
@@ -500,11 +543,11 @@ onMounted(() => {
  * 清理资源,防止内存泄漏
  */
 onUnmounted(() => {
-    if (chartInstance) {
-        chartInstance.dispose(); // 销毁图表实例
-        chartInstance = null;
-    }
-    window.removeEventListener('resize', handleResize); // 移除事件监听
+  if (chartInstance) {
+    chartInstance.dispose(); // 销毁图表实例
+    chartInstance = null;
+  }
+  window.removeEventListener('resize', handleResize); // 移除事件监听
 });
 
 /**
@@ -512,9 +555,9 @@ onUnmounted(() => {
  * 自适应调整图表尺寸
  */
 const handleResize = () => {
-    if (chartInstance) {
-        chartInstance.resize(); // 重新计算图表尺寸
-    }
+  if (chartInstance) {
+    chartInstance.resize(); // 重新计算图表尺寸
+  }
 };
 
 // ==================== 事件处理函数 ====================
@@ -524,38 +567,38 @@ const handleResize = () => {
  * @param params - ECharts点击事件参数
  */
 const handleChartClick = (params: any) => {
-    console.log('图表点击事件:', params);
+  console.log('图表点击事件:', params);
 
-    // 只处理数据系列的点击
-    if (params.componentType === 'series') {
-        const { seriesName, name, value, dataIndex } = params;
+  // 只处理数据系列的点击
+  if (params.componentType === 'series') {
+    const { seriesName, name, value, dataIndex } = params;
 
-        // 保存点击数据信息 
-        clickDataInfo.value = {
-            date: name, // 日期
-            temperature: value, // 水温值
-            type: seriesName, // 类型：入库水温/出库水温
-            dataIndex: dataIndex // 数据索引
-        };
+    // 保存点击数据信息
+    clickDataInfo.value = {
+      date: name, // 日期
+      temperature: value, // 水温值
+      type: seriesName, // 类型：入库水温/出库水温
+      dataIndex: dataIndex // 数据索引
+    };
 
-        // 获取站点名称（从下拉选项中查找）
-        // console.log('站点名称:', select.value.options, paramsOne.value.value);
-        const selectedStation = select.value.options
-            .flatMap((base: any) => base.children || [])
-            .find((station: any) => station.stcd === paramsOne.value.value);
-        stationName.value = selectedStation?.title || '未知站点';
+    // 获取站点名称（从下拉选项中查找）
+    // console.log('站点名称:', select.value.options, paramsOne.value.value);
+    const selectedStation = select.value.options
+      .flatMap((base: any) => base.children || [])
+      .find((station: any) => station.stcd === paramsOne.value.value);
+    stationName.value = selectedStation?.title || '未知站点';
 
-        // 打开弹框
-        modalVisible.value = true;
-    }
+    // 打开弹框
+    modalVisible.value = true;
+  }
 };
 
 /**
  * 弹框关闭处理
  */
 const handleModalClose = () => {
-    modalVisible.value = false;
-    clickDataInfo.value = null;
+  modalVisible.value = false;
+  clickDataInfo.value = null;
 };
 
 /**
@@ -563,13 +606,23 @@ const handleModalClose = () => {
  * 处理下拉框和日期选择器的值变化
  * @param data - 包含moreSelect(下拉框值)和datetime(日期范围)的对象
  */
-const handlePanelChange1 = (data: any) => {
-    // TODO: 后续可扩展联动逻辑
-    if (data.moreSelect) {
-        paramsOne.value.value = data.moreSelect;
-    }
-    paramsOne.value.tm = data.scopeDate
-    fetchChartData()
+const handlePanelChange1 = (data: any, type: string) => {
+  // TODO: 后续可扩展联动逻辑
+  if (data.moreSelect) {
+    paramsOne.value.value = data.moreSelect;
+  }
+  if (type == 'click') {
+    const mapClass = MapClass.getInstance();
+    mapClass.flyTopanto(
+      [
+        Number(data.selectedNodeExtra.lgtd),
+        Number(data.selectedNodeExtra.lttd)
+      ],
+      13
+    );
+  }
+  paramsOne.value.tm = data.scopeDate;
+  fetchChartData();
 };
 
 /**
@@ -577,106 +630,126 @@ const handlePanelChange1 = (data: any) => {
  * 根据选中的基地ID查询对应的站点列表
  */
 const getselsectData = async () => {
-    loading.value = true; // 开始加载站点数据
+  loading.value = true; // 开始加载站点数据
 
-    try {
-        let params = {
-            "filter": {
-                "logic": "and",
-                "filters": [
-                    // 如果baseid不是'all',则添加基地过滤条件
-                    baseid.value != 'all' ? {
-                        "field": "baseId",
-                        "operator": "eq",
-                        "dataType": "string",
-                        "value": baseid.value
-                    } : null,
-                    // 站点类型过滤:只查询ENG类型站点
-                    {
-                        "field": "sttpCode",
-                        "operator": "contains",
-                        "dataType": "string",
-                        "value": "ENG"
-                    },
-                    // 只查询有效站点(dtin=1)
-                    {
-                        "field": "dtin",
-                        "operator": "eq",
-                        "dataType": "string",
-                        "value": 1
-                    }
-                ].filter(Boolean) // 过滤掉null值
-            },
-            "sort": [
-                // 如果是'all',按基地排序;否则不排序
-                baseid.value == 'all' ? {
-                    "field": "baseStepSort",
-                    "dir": "asc"
-                } : null,
-                {
-                    "field": "rvcdStepSort",
-                    "dir": "asc"
-                },
-                {
-                    "field": "siteStepSort",
-                    "dir": "asc"
-                }
-            ].filter(Boolean), // 过滤掉null值
-            "select": [
-                "stcd",      // 站点编码
-                "stnm",      // 站点名称
-                "lgtd",      // 经度
-                "lttd",      // 纬度
-                "siteStepSort", // 站点排序
-                "baseId",    // 基地ID
-                "baseName"   // 基地名称
-            ]
-        }
-
-        // 调用API获取站点数据
-        const res = await getVmsstbprpt(params)
-        console.log('res', res)
-        const data = res?.data?.data || res?.data
-        const obj: any = {}
-
-        if (data) {
-            // 将扁平数据转换为树形结构(按基地分组)
-            data.map((e) => {
-                if (obj[e.baseId]) {
-                    // 如果基地已存在,添加子节点
-                    obj[e.baseId] = { ...obj[e.baseId], children: [...obj[e.baseId].children, { ...e, value: e.stcd, title: e.stnm }] }
-                } else {
-                    // 创建新的基地节点
-                    obj[e.baseId] = { value: e.baseId, title: e.baseName, selectable: false, key: e.baseId, children: [{ ...e, value: e.stcd, title: e.stnm }] }
-                }
-            })
-
-            // 转换为数组并按jiDiList顺序排序
-            let treeData: any = []
-            const dataMapNameArr: any = Object.entries(obj).map(([, v]) => v)
-            treeData = dataMapNameArr?.sort((a: any, b: any) => {
-                const indexA = JidiSelectEventStore.jidiData.findIndex(item => item.wbsCode === a.value);
-                const indexB = JidiSelectEventStore.jidiData.findIndex(item => item.wbsCode === b.value);
-                return indexA - indexB;
-            })
-            console.log('treeData', treeData)
-
-            // 更新下拉框选项
-            select.value.options = treeData
-
-            // 设置默认选中值
-            if (baseid.value == 'all') {
-                select.value.value = '008640203800000001' // 默认选中第一个站点
-            } else {
-                select.value.value = treeData?.[0]?.children[0]?.value // 选中当前基地的第一个站点
+  try {
+    let params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          // 如果baseid不是'all',则添加基地过滤条件
+          baseid.value != 'all'
+            ? {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: baseid.value
+              }
+            : null,
+          // 站点类型过滤:只查询ENG类型站点
+          {
+            field: 'sttpCode',
+            operator: 'contains',
+            dataType: 'string',
+            value: 'ENG'
+          },
+          // 只查询有效站点(dtin=1)
+          {
+            field: 'dtin',
+            operator: 'eq',
+            dataType: 'string',
+            value: 1
+          }
+        ].filter(Boolean) // 过滤掉null值
+      },
+      sort: [
+        // 如果是'all',按基地排序;否则不排序
+        baseid.value == 'all'
+          ? {
+              field: 'baseStepSort',
+              dir: 'asc'
             }
+          : null,
+        {
+          field: 'rvcdStepSort',
+          dir: 'asc'
+        },
+        {
+          field: 'siteStepSort',
+          dir: 'asc'
         }
-    } catch (error) {
-        console.error('获取站点数据失败:', error);
-    } finally {
-        loading.value = false; // 关闭loading
+      ].filter(Boolean), // 过滤掉null值
+      select: [
+        'stcd', // 站点编码
+        'stnm', // 站点名称
+        'lgtd', // 经度
+        'lttd', // 纬度
+        'siteStepSort', // 站点排序
+        'baseId', // 基地ID
+        'baseName' // 基地名称
+      ]
+    };
+
+    // 调用API获取站点数据
+    const res = await getVmsstbprpt(params);
+    console.log('res', res);
+    const data = res?.data?.data || res?.data;
+    const obj: any = {};
+
+    if (data) {
+      // 将扁平数据转换为树形结构(按基地分组)
+      data.map(e => {
+        if (obj[e.baseId]) {
+          // 如果基地已存在,添加子节点
+          obj[e.baseId] = {
+            ...obj[e.baseId],
+            children: [
+              ...obj[e.baseId].children,
+              { ...e, value: e.stcd, title: e.stnm }
+            ]
+          };
+        } else {
+          // 创建新的基地节点
+          obj[e.baseId] = {
+            value: e.baseId,
+            title: e.baseName,
+            selectable: false,
+            key: e.baseId,
+            children: [{ ...e, value: e.stcd, title: e.stnm }]
+          };
+        }
+      });
+
+      // 转换为数组并按jiDiList顺序排序
+      let treeData: any = [];
+      const dataMapNameArr: any = Object.entries(obj).map(([, v]) => v);
+      treeData = dataMapNameArr?.sort((a: any, b: any) => {
+        const indexA = JidiSelectEventStore.jidiData.findIndex(
+          item => item.wbsCode === a.value
+        );
+        const indexB = JidiSelectEventStore.jidiData.findIndex(
+          item => item.wbsCode === b.value
+        );
+        return indexA - indexB;
+      });
+      console.log('treeData', treeData);
+
+      // 更新下拉框选项
+      select.value.options = treeData;
+
+      // 设置默认选中值
+      if (baseid.value == 'all') {
+        select.value.value = '008640203800000001'; // 默认选中第一个站点
+      } else {
+        select.value.value = treeData?.[0]?.children[0]?.value; // 选中当前基地的第一个站点
+      }
     }
-}
+  } catch (error) {
+    console.error('获取站点数据失败:', error);
+  } finally {
+    loading.value = false; // 关闭loading
+  }
+};
 
 // ==================== Watch监听器 ====================
 
@@ -685,33 +758,33 @@ const getselsectData = async () => {
  * 当用户切换基地时,重新加载站点下拉选项
  */
 watch(
-    () => JidiSelectEventStore.selectedItem, // 监听Store中的选中项
-    (newVal) => {
-        baseid.value = newVal.wbsCode; // 更新基地ID
-        getselsectData() // 重新获取站点数据
-    },
-    { deep: true, immediate: true } // 深度监听,立即执行
+  () => JidiSelectEventStore.selectedItem, // 监听Store中的选中项
+  newVal => {
+    baseid.value = newVal.wbsCode; // 更新基地ID
+    getselsectData(); // 重新获取站点数据
+  },
+  { deep: true, immediate: true } // 深度监听,立即执行
 );
 </script>
 
 <style lang="scss" scoped>
 /* 图表容器样式 */
 .chart-container {
-    width: 100%;
-    height: 252px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    /* 固定高度252px */
+  width: 100%;
+  height: 252px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 固定高度252px */
 }
 
 :deep(.ant-spin-nested-loading) {
-    height: 252px !important;
+  height: 252px !important;
 }
 
 /* 弹框内容样式 */
 .modal-content {
-    min-height: 100px;
-    padding: 16px 0;
+  min-height: 100px;
+  padding: 16px 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/map/application/map-orchestrator.ts b/frontend/src/modules/map/application/map-orchestrator.ts
index 2d29d449..1e70dcf4 100644
--- a/frontend/src/modules/map/application/map-orchestrator.ts
+++ b/frontend/src/modules/map/application/map-orchestrator.ts
@@ -107,6 +107,8 @@ export const useMapOrchestrator = () => {
     mapDataStore.setLoading(true);
 
     try {
+      const previousPageKey = mapConfigStore.lastLoadOptions?.pageKey || '';
+      const previousCheckedKeys = mapViewStore.getCheckedLayerKeys();
       const { layerConfig, legendOriginal, pageLegend } =
         await mapConfigStore.loadPageMapConfig({
           systemId: SYSTEM_ID,
@@ -122,11 +124,26 @@ export const useMapOrchestrator = () => {
       if (layerConfig.length > 0) {
         mapStore.setLayerData(layerConfig);
         ensureBaseLayersInitialized(layerConfig);
-        const checkedKeys = mapViewStore.getCheckedLayerKeys();
+        let checkedKeys = mapViewStore.getCheckedLayerKeys();
+        if (previousPageKey === pageKey && previousCheckedKeys.length > 0) {
+          const currentLayerKeys = new Set(
+            layerConfig
+              .flatMap((item: any) => layerConfig2Flat([item]))
+              .map((item: any) => item?.key)
+              .filter(Boolean)
+          );
+          const runtimeCheckedKeys = previousCheckedKeys.filter(key =>
+            currentLayerKeys.has(key)
+          );
+          if (runtimeCheckedKeys.length > 0) {
+            mapViewStore.setCheckedLayerKeys(runtimeCheckedKeys);
+            checkedKeys = runtimeCheckedKeys;
+          }
+        }
         await mapStore.loadAllLayerData(layerConfig, checkedKeys);
       }
     } finally {
-      mapDataStore.setLoading(false);
+      // mapDataStore.setLoading(false);
     }
   };
 
@@ -380,7 +397,7 @@ export const useMapOrchestrator = () => {
   };
 
   // 备注：统一处理搜索定位，按点位编码从缓存数据中查找并飞行到目标位置。
-  const focusPoint = (pointId: string, zoom: number = 14) => {
+  const focusPoint = (pointId: string, zoom: number = 15) => {
     if (!pointId) return;
     const targetPoint = mapDataStore.pointData.find((item: any) => {
       return item.stcd === pointId || item._id === pointId;
diff --git a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
index 3ba5df66..c1a416c3 100644
--- a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
+++ b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/monthlyAverage.vue
@@ -1,36 +1,73 @@
 <template>
   <div class="monthly-average-container">
     <!-- 搜索表单 -->
-    <a-form ref="formRef" :model="formValue" layout="inline" class="search-form">
+    <a-form
+      ref="formRef"
+      :model="formValue"
+      layout="inline"
+      class="search-form"
+    >
       <a-form-item label="基地名称" name="dataDimensionVal">
-        <a-select v-model:value="formValue.dataDimensionVal" placeholder="请选择" style="width: 200px"
-          @change="handleBaseChange">
-          <a-select-option v-for="item in jdList" :key="item.wbsCode" :value="item.wbsCode">
+        <a-select
+          v-model:value="formValue.dataDimensionVal"
+          placeholder="请选择"
+          style="width: 200px"
+          @change="handleBaseChange"
+        >
+          <a-select-option
+            v-for="item in jdList"
+            :key="item.wbsCode"
+            :value="item.wbsCode"
+          >
             {{ item.wbsName }}
           </a-select-option>
         </a-select>
       </a-form-item>
 
       <a-form-item label="所在流域" name="rvcd">
-        <a-select v-model:value="formValue.rvcd" placeholder="请选择" style="width: 200px"
-          :disabled="!formValue.dataDimensionVal" @change="handleRvcdChange">
-          <a-select-option v-for="item in lyList" :key="item.value" :value="item.value">
+        <a-select
+          v-model:value="formValue.rvcd"
+          placeholder="请选择"
+          style="width: 200px"
+          :disabled="!formValue.dataDimensionVal"
+          @change="handleRvcdChange"
+        >
+          <a-select-option
+            v-for="item in lyList"
+            :key="item.value"
+            :value="item.value"
+          >
             {{ item.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
 
       <a-form-item label="断面名称" name="stcd">
-        <a-select v-model:value="formValue.stcd" placeholder="请选择" style="width: 200px" :disabled="!formValue.rvcd">
-          <a-select-option v-for="item in dmList" :key="item.value" :value="item.value">
+        <a-select
+          v-model:value="formValue.stcd"
+          placeholder="请选择"
+          style="width: 200px"
+          :disabled="!formValue.rvcd"
+        >
+          <a-select-option
+            v-for="item in dmList"
+            :key="item.value"
+            :value="item.value"
+          >
             {{ item.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
 
       <a-form-item label="月份" name="tm">
-        <a-date-picker v-model:value="formValue.tm" picker="month" :disabled-date="disabledDate" format="YYYY-MM"
-          value-format="YYYY-MM-DD HH:mm:ss" :allow-clear="false" />
+        <a-date-picker
+          v-model:value="formValue.tm"
+          picker="month"
+          :disabled-date="disabledDate"
+          format="YYYY-MM"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :allow-clear="false"
+        />
       </a-form-item>
 
       <a-form-item>
@@ -45,8 +82,14 @@
     <div style="width: 100%; display: flex">
       <!-- 图表容器：始终存在，不再使用 v-if -->
       <div class="chart-wrapper" ref="chartRef"></div>
-      <BasicTable ref="tableRef" :scrollY="460" :columns="columns" :list-url="DetGetKendoListCust"
-        :search-params="{ sort: sort }" :transform-data="customTransform">
+      <BasicTable
+        ref="tableRef"
+        :scrollY="460"
+        :columns="columns"
+        :list-url="DetGetKendoListCust"
+        :search-params="{ sort: sort }"
+        :transform-data="customTransform"
+      >
         <template #action="{ record }">
           <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
         </template>
@@ -254,10 +297,10 @@ const fetchLyData = async () => {
           },
           formValue.dataDimensionVal != 'all'
             ? {
-              field: 'fullPath',
-              operator: 'startswith',
-              value: formValue.dataDimensionVal
-            }
+                field: 'fullPath',
+                operator: 'startswith',
+                value: formValue.dataDimensionVal
+              }
             : null
         ].filter(Boolean)
       },
@@ -311,15 +354,15 @@ const fetchDmData = async () => {
           { field: 'mway', operator: 'eq', value: 2 },
           formValue.dataDimensionVal == 'all'
             ? {
-              field: 'rvcd',
-              operator: 'contains',
-              value: formValue.rvcd
-            }
+                field: 'rvcd',
+                operator: 'contains',
+                value: formValue.rvcd
+              }
             : {
-              field: 'baseId',
-              operator: 'contains',
-              value: formValue.dataDimensionVal
-            }
+                field: 'baseId',
+                operator: 'contains',
+                value: formValue.dataDimensionVal
+              }
         ]
       },
       select: ['stcd', 'stnm', 'lgtd', 'lttd', 'rstcdStepSort'],
@@ -816,8 +859,12 @@ const handleViewDetail = (record: any) => {
   });
   modelStore.modalVisible = true;
   modelStore.params.sttp = 'WT';
-  modelStore.title = stnm ;
+  modelStore.title = stnm;
   modelStore.params.stcd = formValue.stcd;
+  modelStore.filter.rangeTm = [
+    dayjs(formValue.value.tm).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
+    dayjs(formValue.value.tm).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+  ];
 };
 
 defineExpose({
diff --git a/frontend/src/modules/qixidiliuliangbianhua/index.vue b/frontend/src/modules/qixidiliuliangbianhua/index.vue
index 6204a489..cb30c56f 100644
--- a/frontend/src/modules/qixidiliuliangbianhua/index.vue
+++ b/frontend/src/modules/qixidiliuliangbianhua/index.vue
@@ -1,17 +1,22 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="水文监测" :select="select" :scopeDate="datetimePicker" @update-values="handlePanelChange1">
-        <div class="chart-wrapper">
-            <a-spin :spinning="loading">
-                <!-- 始终渲染图表容器，确保有固定宽高 -->
-                <div ref="chartRef" class="echarts-chart"></div>
-                <!-- 无数据时显示Empty，但不影响容器尺寸 -->
-                <div v-if="!loading && !hasData" class="empty-overlay">
-                    <a-empty description="暂无数据" />
-                </div>
-            </a-spin>
+  <SidePanelItem
+    title="水文监测"
+    :select="select"
+    :scopeDate="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <div class="chart-wrapper">
+      <a-spin :spinning="loading">
+        <!-- 始终渲染图表容器，确保有固定宽高 -->
+        <div ref="chartRef" class="echarts-chart"></div>
+        <!-- 无数据时显示Empty，但不影响容器尺寸 -->
+        <div v-if="!loading && !hasData" class="empty-overlay">
+          <a-empty description="暂无数据" />
         </div>
-    </SidePanelItem>
+      </a-spin>
+    </div>
+  </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
@@ -19,43 +24,47 @@ import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import * as echarts from 'echarts';
 import type { EChartsOption } from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { msstbprptGetKendoList, sdriverdaysGetKendoList } from '@/api/qxd';
-import { useModelStore } from "@/store/modules/model";
+import { useModelStore } from '@/store/modules/model';
+import dayjs from 'dayjs';
 // 定义组件名
 defineOptions({
-    name: 'qixidiliuliangbianhua'
+  name: 'qixidiliuliangbianhua'
 });
 
 // ==================== 选择器配置 ====================
 const JidiSelectEventStore = useJidiSelectEventStore();
-const baseid = ref('')
+const baseid = ref('');
 const modelStore = useModelStore();
 
 // Loading 状态和数据状态
 const loading = ref(false);
 const hasData = ref(true); // 初始化为 true，因为 initChart 时会渲染
-
 const select = ref({
-    show: true,
-    value: undefined,
-    options: [],
-    picker: undefined,
-    format: undefined
+  show: true,
+  value: undefined,
+  options: [],
+  picker: undefined,
+  format: undefined
 });
 // 日期选择器配置
 const datetimePicker: any = ref({
-    show: true,
-    value: (() => {
-        const now = new Date();
-        const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
-        const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-        const lastMonthStr = `${lastMonth.getFullYear()}-${String(lastMonth.getMonth() + 1).padStart(2, '0')}`;
-        return [lastMonthStr, currentMonth];
-    })(),
-    format: 'YY-MM',
-    picker: 'month' as const,
-    options: []
+  show: true,
+  value: (() => {
+    const now = new Date();
+    const currentMonth = `${now.getFullYear()}-${String(
+      now.getMonth() + 1
+    ).padStart(2, '0')}`;
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    const lastMonthStr = `${lastMonth.getFullYear()}-${String(
+      lastMonth.getMonth() + 1
+    ).padStart(2, '0')}`;
+    return [lastMonthStr, currentMonth];
+  })(),
+  format: 'YY-MM',
+  picker: 'month' as const,
+  options: []
 });
 
 // ==================== 图表相关响应式数据 ====================
@@ -70,9 +79,9 @@ const echartOptionRef = ref<EChartsOption>({});
 
 // ==================== 工具函数：omit ====================
 const omit = (obj: any, key: string) => {
-    const newObj = { ...obj };
-    delete newObj[key];
-    return newObj;
+  const newObj = { ...obj };
+  delete newObj[key];
+  return newObj;
 };
 
 // ==================== 多Y轴动态布局算法 ====================
@@ -80,552 +89,573 @@ const omit = (obj: any, key: string) => {
  * 根据图例选中状态动态调整 Y 轴布局和 grid 边距
  * @param selected - 图例选中状态对象 { '系列名': boolean }
  * @param options - ECharts 配置对象
- * 
+ *
  * 规则：
  * - 左侧最多 1 个 Y 轴（第一个可见系列）
  * - 右侧可以显示多个 Y 轴（其余可见系列）
  */
 const yAxisShowDynamic = (selected: Record<string, boolean>, options: any) => {
-    const allShow = options.yAxis?.filter((item: any) => item.show);
-    const showCount = allShow?.length || 0;
+  const allShow = options.yAxis?.filter((item: any) => item.show);
+  const showCount = allShow?.length || 0;
 
-    // 没有显示的Y轴
-    if (showCount === 0) {
-        return;
-    }
+  // 没有显示的Y轴
+  if (showCount === 0) {
+    return;
+  }
 
-    // 只有一个Y轴：统一置于左侧
-    if (showCount === 1) {
+  // 只有一个Y轴：统一置于左侧
+  if (showCount === 1) {
+    options.grid = omit(options.grid, 'right');
+    options.grid.left = '60px';
+
+    options.yAxis = options.yAxis.map((item: any) => {
+      if (item.show) {
+        return {
+          ...item,
+          position: 'left',
+          offset: 0
+        };
+      }
+      return item;
+    });
+    return;
+  }
+
+  // 两个及以上Y轴：左侧1个，右侧其余
+  if (showCount >= 2) {
+    let leftIndex = 0; // 左侧Y轴索引
+    let rightIndex = 0; // 右侧Y轴计数
+
+    options.yAxis = options.yAxis.map((item: any) => {
+      if (!item.show) {
+        return item;
+      }
+
+      // 第一个可见的Y轴放在左侧
+      if (leftIndex === 0) {
+        leftIndex++;
         options.grid = omit(options.grid, 'right');
         options.grid.left = '60px';
 
-        options.yAxis = options.yAxis.map((item: any) => {
-            if (item.show) {
-                return {
-                    ...item,
-                    position: 'left',
-                    offset: 0
-                };
-            }
-            return item;
-        });
-        return;
-    }
+        return {
+          ...item,
+          position: 'left',
+          offset: 0
+        };
+      } else {
+        // 其余Y轴放在右侧
+        rightIndex++;
 
-    // 两个及以上Y轴：左侧1个，右侧其余
-    if (showCount >= 2) {
-        let leftIndex = 0; // 左侧Y轴索引
-        let rightIndex = 0; // 右侧Y轴计数
-
-        options.yAxis = options.yAxis.map((item: any) => {
-            if (!item.show) {
-                return item;
-            }
-
-            // 第一个可见的Y轴放在左侧
-            if (leftIndex === 0) {
-                leftIndex++;
-                options.grid = omit(options.grid, 'right');
-                options.grid.left = '60px';
-
-                return {
-                    ...item,
-                    position: 'left',
-                    offset: 0
-                };
-            } else {
-                // 其余Y轴放在右侧
-                rightIndex++;
-
-                // 右侧有多个Y轴时，需要增加右边距并设置偏移
-                if (rightIndex > 1) {
-                    options.grid.right = '100px';
-                    return {
-                        ...item,
-                        position: 'right',
-                        offset: 60
-                    };
-                } else {
-                    options.grid.right = '60px';
-                    return {
-                        ...item,
-                        position: 'right',
-                        offset: 0
-                    };
-                }
-            }
-        });
-    }
+        // 右侧有多个Y轴时，需要增加右边距并设置偏移
+        if (rightIndex > 1) {
+          options.grid.right = '100px';
+          return {
+            ...item,
+            position: 'right',
+            offset: 60
+          };
+        } else {
+          options.grid.right = '60px';
+          return {
+            ...item,
+            position: 'right',
+            offset: 0
+          };
+        }
+      }
+    });
+  }
 };
 
 // ==================== 图表初始化 ====================
 const initChart = () => {
-    if (!chartRef.value) {
-        console.warn('图表容器未就绪');
-        return;
+  if (!chartRef.value) {
+    console.warn('图表容器未就绪');
+    return;
+  }
+
+  // 初始化 ECharts 实例
+  chartInstance = echarts.init(chartRef.value);
+
+  // 监听图例选择变化事件
+  chartInstance.on('legendselectchanged', (params: any) => {
+    const { selected } = params;
+
+    // ✅ 方案A：手动构建新配置对象，保留所有函数引用（包括formatter）
+    const currentOptions = echartOptionRef.value as any;
+
+    const options: any = {
+      ...currentOptions,
+      legend: {
+        ...currentOptions.legend,
+        selected: selected
+      },
+      yAxis: Array.isArray(currentOptions.yAxis)
+        ? currentOptions.yAxis.map((item: any) => {
+            let isShow = true;
+            for (const key in selected) {
+              if (key === item.name) {
+                isShow = selected[key];
+              }
+            }
+            return { ...item, show: isShow }; // ✅ 保留formatter等函数
+          })
+        : currentOptions.yAxis
+    };
+
+    // 触发布局调整
+    yAxisShowDynamic(selected, options);
+
+    // 完全替换模式更新配置
+    chartInstance?.setOption(options, true);
+    echartOptionRef.value = options;
+  });
+
+  // 监听数据点点击事件
+  chartInstance.on('click', (params: any) => {
+    // ✅ 判断是否点击的是数据点（series中的点）
+    if (params.componentType === 'series') {
+      modelStore.modalVisible = true;
+      modelStore.params.sttp = 'fh_zq_point';
+      modelStore.title = '水文监测';
+      modelStore.params.stcd = select.value.value;
+      modelStore.showStcdSelector = true;
+      modelStore.stcdOptions = select.value.options;
+      modelStore.filter.rangeTm = [
+        dayjs(params.name).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        dayjs(params.name).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+      ];
     }
-
-    // 初始化 ECharts 实例
-    chartInstance = echarts.init(chartRef.value);
-
-    // 监听图例选择变化事件
-    chartInstance.on('legendselectchanged', (params: any) => {
-        const { selected } = params;
-
-        // ✅ 方案A：手动构建新配置对象，保留所有函数引用（包括formatter）
-        const currentOptions = echartOptionRef.value as any;
-
-        const options: any = {
-            ...currentOptions,
-            legend: {
-                ...currentOptions.legend,
-                selected: selected
-            },
-            yAxis: Array.isArray(currentOptions.yAxis)
-                ? currentOptions.yAxis.map((item: any) => {
-                    let isShow = true;
-                    for (const key in selected) {
-                        if (key === item.name) {
-                            isShow = selected[key];
-                        }
-                    }
-                    return { ...item, show: isShow }; // ✅ 保留formatter等函数
-                })
-                : currentOptions.yAxis
-        };
-
-        // 触发布局调整
-        yAxisShowDynamic(selected, options);
-
-        // 完全替换模式更新配置
-        chartInstance?.setOption(options, true);
-        echartOptionRef.value = options;
-    });
-
-    // 监听数据点点击事件
-    chartInstance.on('click', (params: any) => {
-        // ✅ 判断是否点击的是数据点（series中的点）
-        if (params.componentType === 'series') {
-            modelStore.modalVisible = true;
-            modelStore.params.sttp = "fh_zq_point";
-            modelStore.title = "水文监测";
-            modelStore.params.stcd = select.value.value;
-            modelStore.showStcdSelector = true
-            modelStore.stcdOptions = select.value.options
-        }
-    });
+  });
 };
 
 // ==================== 图表配置生成 ====================
 const updateChart = () => {
-    if (!chartInstance) return;
+  if (!chartInstance) return;
 
-    // ✅ 计算数据统计值（用于Y轴动态范围）
-    const qValues = echartsData.value.map(item => item.q).filter(v => v != null && !isNaN(v));
-    const zValues = echartsData.value.map(item => item.z).filter(v => v != null && !isNaN(v));
-    const vValues = echartsData.value.map(item => item.v).filter(v => v != null && !isNaN(v));
+  // ✅ 计算数据统计值（用于Y轴动态范围）
+  const qValues = echartsData.value
+    .map(item => item.q)
+    .filter(v => v != null && !isNaN(v));
+  const zValues = echartsData.value
+    .map(item => item.z)
+    .filter(v => v != null && !isNaN(v));
+  const vValues = echartsData.value
+    .map(item => item.v)
+    .filter(v => v != null && !isNaN(v));
 
-    const minQ = qValues.length > 0 ? Math.min(...qValues) : 0;
-    const maxQ = qValues.length > 0 ? Math.max(...qValues) : 0;
-    const minZ = zValues.length > 0 ? Math.min(...zValues) : 0;
-    const maxZ = zValues.length > 0 ? Math.max(...zValues) : 0;
-    const minV = vValues.length > 0 ? Math.min(...vValues) : 0;
-    const maxV = vValues.length > 0 ? Math.max(...vValues) : 0;
+  const minQ = qValues.length > 0 ? Math.min(...qValues) : 0;
+  const maxQ = qValues.length > 0 ? Math.max(...qValues) : 0;
+  const minZ = zValues.length > 0 ? Math.min(...zValues) : 0;
+  const maxZ = zValues.length > 0 ? Math.max(...zValues) : 0;
+  const minV = vValues.length > 0 ? Math.min(...vValues) : 0;
+  const maxV = vValues.length > 0 ? Math.max(...vValues) : 0;
 
-    // ✅ 颜色和Y轴配置
-    const Color = ['#9556a4', '#56c2e3', '#78c300'];
+  // ✅ 颜色和Y轴配置
+  const Color = ['#9556a4', '#56c2e3', '#78c300'];
 
-    const _legendData = ['流量(m³/s)', '水位(m)', '流速(m/s)'];
+  const _legendData = ['流量(m³/s)', '水位(m)', '流速(m/s)'];
 
-    const setting: EChartsOption = {
-        // Tooltip 配置
-        tooltip: {
-            trigger: 'axis',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            borderColor: 'transparent',
-            textStyle: {
-                color: '#ffffff'
-            },
-            valueFormatter: (value: any) => (value === undefined ? '-' : value),
-            formatter: (params: any) => {
-                let res = `${params[0].name}<br/>`;
-                params.forEach((item: any) => {
-                    const seriesName = item.seriesName ?? '';
-                    const regx = /\(([^()]+?)\)/;
-                    const unit = seriesName.match(regx);
+  const setting: EChartsOption = {
+    // Tooltip 配置
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#ffffff'
+      },
+      valueFormatter: (value: any) => (value === undefined ? '-' : value),
+      formatter: (params: any) => {
+        let res = `${params[0].name}<br/>`;
+        params.forEach((item: any) => {
+          const seriesName = item.seriesName ?? '';
+          const regx = /\(([^()]+?)\)/;
+          const unit = seriesName.match(regx);
 
-                    if (item.value !== undefined && item.value !== null) {
-                        // ✅ 保留两位小数
-                        const formattedValue = Number(item.value).toFixed(2);
-                        res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%; display: inline-block; margin-right:10px;"></span>${item.seriesName} ${formattedValue}${unit?.[1] || ''}<br/>`;
-                    } else {
-                        res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%; display: inline-block; margin-right:10px;"></span>${item.seriesName} -${unit?.[1] || ''}<br/>`;
-                    }
-                });
-                return res;
-            }
-        },
+          if (item.value !== undefined && item.value !== null) {
+            // ✅ 保留两位小数
+            const formattedValue = Number(item.value).toFixed(2);
+            res += `<span style="background: ${
+              item.color
+            }; height:10px; width: 10px; border-radius: 50%; display: inline-block; margin-right:10px;"></span>${
+              item.seriesName
+            } ${formattedValue}${unit?.[1] || ''}<br/>`;
+          } else {
+            res += `<span style="background: ${
+              item.color
+            }; height:10px; width: 10px; border-radius: 50%; display: inline-block; margin-right:10px;"></span>${
+              item.seriesName
+            } -${unit?.[1] || ''}<br/>`;
+          }
+        });
+        return res;
+      }
+    },
 
-        // ✅ 颜色配置：流量-紫色，水位-青色，流速-绿色
-        color: Color,
+    // ✅ 颜色配置：流量-紫色，水位-青色，流速-绿色
+    color: Color,
 
-        // 图例配置
-        legend: {
-            data: _legendData,
-            selectedMode: 'multiple',
-            top: 0,
-            left: 'center',
-            itemGap: 15,
-            // 默认只选中"水温"，其他系列隐藏
-            selected: {
-                '流速(m/s)': false,
-                '流量(m³/s)': true,
-                '水位(m)': false
-            }
-        },
-        axisPointer: {
-            type: 'shadow',
-            label: {
-                show: false
-            },
-            shadowStyle: {
-                color: 'rgba(84, 112, 198, 0.2)'
-            }
-        },
-        // 网格配置 - 为三个Y轴预留空间
-        grid: {
-            left: '0px',
-            right: '60px',
-            bottom: '10%',
-            top: '65px'
-        },
-
-        // 数据缩放配置
-        dataZoom: {
-            type: 'inside',
-            start: 0,
-            end: 100
-        },
-
-        // X轴配置
-        xAxis: {
-            type: 'category',
-            data: echartsData.value.map(item => item.dt),
-            boundaryGap: true,
-            axisLabel: {
-                show: true,
-                // ✅ X轴标签显示策略：最多显示5个标签，强制显示首尾
-                interval: (index: number) => {
-                    const total = echartsData.value.length;
-                    if (total <= 5) return true; // 数据少于等于5个，全部显示
-                    if (index === 0 || index === total - 1) return true; // 首尾必显
-
-                    // 中间标签均匀分布
-                    const step = Math.floor((total - 1) / 3); // 中间显示3个
-                    return index % step === 0;
-                }
-            },
-            axisLine: {
-                show: true
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    type: 'solid',
-                    color: '#e0e0e0'
-                }
-            },
-            axisPointer: {
-                type: 'shadow',
-                shadowStyle: {
-                    color: 'rgba(84, 112, 198, 0.2)'
-                }
-            }
-        },
-
-        // Y轴配置 - 三个独立Y轴（按期望顺序：流量、水位、流速）
-        yAxis: [
-            {
-                type: 'value',
-                name: '流量(m³/s)',
-                position: 'left',
-                offset: 0,
-                show: true,
-                // ✅ 动态范围：floor(min) ~ ceil(max)+5
-                min: qValues.length > 0 ? Math.floor(minQ) : undefined,
-                max: qValues.length > 0 ? Math.ceil(maxQ) : undefined,
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        type: 'solid',
-                        color: '#e0e0e0'
-                    }
-                },
-                axisTick: {
-                    show: true
-                },
-                axisLabel: {
-                    show: true,
-                    formatter: '{value}',
-                    color: '#9556a4'
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#6e7079',
-                        width: 2
-                    }
-                },
-                nameTextStyle: {
-                    color: '#9556a4',
-                    fontSize: 12
-                }
-            },
-            {
-                type: 'value',
-                name: '水位(m)',
-                position: 'left',
-                offset: 60,
-                show: false,
-                // ✅ 动态范围：min-0.01 ~ max+0.04
-                min: zValues.length > 0 ? minZ : undefined,
-                max: zValues.length > 0 ? maxZ : undefined,
-                splitLine: { show: false },
-                axisTick: {
-                    show: true
-                },
-                axisLabel: {
-                    show: true,
-                    // ✅ Y轴刻度保留两位小数（使用函数形式）
-                    formatter: (value: any) => value.toFixed(2),
-                    color: '#56c2e3'
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#6e7079',
-                        width: 2
-                    }
-                },
-                nameTextStyle: {
-                    color: '#56c2e3',
-                    fontSize: 12
-                }
-            },
-            {
-                type: 'value',
-                name: '流速(m/s)',
-                position: 'right',
-                offset: 0,
-                show: false,
-                // ✅ 动态范围：min-0.2 ~ max+0.5
-                min: vValues.length > 0 ? minV - 0.02 : undefined,
-                max: vValues.length > 0 ? maxV + 0.02 : undefined,
-                splitLine: { show: false },
-                axisTick: {
-                    show: true
-                },
-                axisLabel: {
-                    show: true,
-                    // ✅ Y轴刻度保留三位小数
-                    formatter: (value: any) => value.toFixed(3),
-                    color: '#78c300'
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#6e7079',
-                        width: 2
-                    }
-                },
-                nameTextStyle: {
-                    color: '#78c300',
-                    fontSize: 12
-                }
-            }
-        ],
-
-        // 系列配置（按期望顺序：流量、水位、流速）
-        series: [
-
-            {
-                name: '流量(m³/s)',
-                data: echartsData.value.map(item => item.q),
-                type: 'line',
-                smooth: true,
-                // connectNulls: true,
-                symbolSize: 3,
-                symbol: 'circle',
-                itemStyle: {
-                    color: '#9556a4'
-                },
-                lineStyle: {
-                    width: 2
-                },
-                yAxisIndex: 0
-            },
-            {
-                name: '水位(m)',
-                data: echartsData.value.map(item => item.z),
-                type: 'line',
-                smooth: true,
-                // connectNulls: true,
-                symbolSize: 3,
-                symbol: 'circle',
-                itemStyle: {
-                    color: '#56c2e3'
-                },
-                lineStyle: {
-                    width: 2
-                },
-                yAxisIndex: 1
-            },
-            {
-                name: '流速(m/s)',
-                data: echartsData.value.map(item => item.v),
-                type: 'line',
-                smooth: true,
-                // connectNulls: true,
-                symbolSize: 3,
-                symbol: 'circle',
-                itemStyle: {
-                    color: '#78c300'
-                },
-                lineStyle: {
-                    width: 2
-                },
-                yAxisIndex: 2
-            },
-        ]
-    };
-
-    // 保存配置引用
-    echartOptionRef.value = setting;
-
-    // 完全替换模式更新图表
-    chartInstance.setOption(setting, true);
-
-    // ✅ 初始化时应用动态布局算法，确保只有流量Y轴显示
-    yAxisShowDynamic({
+    // 图例配置
+    legend: {
+      data: _legendData,
+      selectedMode: 'multiple',
+      top: 0,
+      left: 'center',
+      itemGap: 15,
+      // 默认只选中"水温"，其他系列隐藏
+      selected: {
+        '流速(m/s)': false,
         '流量(m³/s)': true,
-        '水位(m)': false,
-        '流速(m/s)': false
-    }, setting);
+        '水位(m)': false
+      }
+    },
+    axisPointer: {
+      type: 'shadow',
+      label: {
+        show: false
+      },
+      shadowStyle: {
+        color: 'rgba(84, 112, 198, 0.2)'
+      }
+    },
+    // 网格配置 - 为三个Y轴预留空间
+    grid: {
+      left: '0px',
+      right: '60px',
+      bottom: '10%',
+      top: '65px'
+    },
 
-    // 再次应用调整后的配置
-    chartInstance.setOption(setting, true);
+    // 数据缩放配置
+    dataZoom: {
+      type: 'inside',
+      start: 0,
+      end: 100
+    },
+
+    // X轴配置
+    xAxis: {
+      type: 'category',
+      data: echartsData.value.map(item => item.dt),
+      boundaryGap: true,
+      axisLabel: {
+        show: true,
+        // ✅ X轴标签显示策略：最多显示5个标签，强制显示首尾
+        interval: (index: number) => {
+          const total = echartsData.value.length;
+          if (total <= 5) return true; // 数据少于等于5个，全部显示
+          if (index === 0 || index === total - 1) return true; // 首尾必显
+
+          // 中间标签均匀分布
+          const step = Math.floor((total - 1) / 3); // 中间显示3个
+          return index % step === 0;
+        }
+      },
+      axisLine: {
+        show: true
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: '#e0e0e0'
+        }
+      },
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(84, 112, 198, 0.2)'
+        }
+      }
+    },
+
+    // Y轴配置 - 三个独立Y轴（按期望顺序：流量、水位、流速）
+    yAxis: [
+      {
+        type: 'value',
+        name: '流量(m³/s)',
+        position: 'left',
+        offset: 0,
+        show: true,
+        // ✅ 动态范围：floor(min) ~ ceil(max)+5
+        min: qValues.length > 0 ? Math.floor(minQ) : undefined,
+        max: qValues.length > 0 ? Math.ceil(maxQ) : undefined,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'solid',
+            color: '#e0e0e0'
+          }
+        },
+        axisTick: {
+          show: true
+        },
+        axisLabel: {
+          show: true,
+          formatter: '{value}',
+          color: '#9556a4'
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#6e7079',
+            width: 2
+          }
+        },
+        nameTextStyle: {
+          color: '#9556a4',
+          fontSize: 12
+        }
+      },
+      {
+        type: 'value',
+        name: '水位(m)',
+        position: 'left',
+        offset: 60,
+        show: false,
+        // ✅ 动态范围：min-0.01 ~ max+0.04
+        min: zValues.length > 0 ? minZ : undefined,
+        max: zValues.length > 0 ? maxZ : undefined,
+        splitLine: { show: false },
+        axisTick: {
+          show: true
+        },
+        axisLabel: {
+          show: true,
+          // ✅ Y轴刻度保留两位小数（使用函数形式）
+          formatter: (value: any) => value.toFixed(2),
+          color: '#56c2e3'
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#6e7079',
+            width: 2
+          }
+        },
+        nameTextStyle: {
+          color: '#56c2e3',
+          fontSize: 12
+        }
+      },
+      {
+        type: 'value',
+        name: '流速(m/s)',
+        position: 'right',
+        offset: 0,
+        show: false,
+        // ✅ 动态范围：min-0.2 ~ max+0.5
+        min: vValues.length > 0 ? minV - 0.02 : undefined,
+        max: vValues.length > 0 ? maxV + 0.02 : undefined,
+        splitLine: { show: false },
+        axisTick: {
+          show: true
+        },
+        axisLabel: {
+          show: true,
+          // ✅ Y轴刻度保留三位小数
+          formatter: (value: any) => value.toFixed(3),
+          color: '#78c300'
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#6e7079',
+            width: 2
+          }
+        },
+        nameTextStyle: {
+          color: '#78c300',
+          fontSize: 12
+        }
+      }
+    ],
+
+    // 系列配置（按期望顺序：流量、水位、流速）
+    series: [
+      {
+        name: '流量(m³/s)',
+        data: echartsData.value.map(item => item.q),
+        type: 'line',
+        smooth: true,
+        // connectNulls: true,
+        symbolSize: 3,
+        symbol: 'circle',
+        itemStyle: {
+          color: '#9556a4'
+        },
+        lineStyle: {
+          width: 2
+        },
+        yAxisIndex: 0
+      },
+      {
+        name: '水位(m)',
+        data: echartsData.value.map(item => item.z),
+        type: 'line',
+        smooth: true,
+        // connectNulls: true,
+        symbolSize: 3,
+        symbol: 'circle',
+        itemStyle: {
+          color: '#56c2e3'
+        },
+        lineStyle: {
+          width: 2
+        },
+        yAxisIndex: 1
+      },
+      {
+        name: '流速(m/s)',
+        data: echartsData.value.map(item => item.v),
+        type: 'line',
+        smooth: true,
+        // connectNulls: true,
+        symbolSize: 3,
+        symbol: 'circle',
+        itemStyle: {
+          color: '#78c300'
+        },
+        lineStyle: {
+          width: 2
+        },
+        yAxisIndex: 2
+      }
+    ]
+  };
+
+  // 保存配置引用
+  echartOptionRef.value = setting;
+
+  // 完全替换模式更新图表
+  chartInstance.setOption(setting, true);
+
+  // ✅ 初始化时应用动态布局算法，确保只有流量Y轴显示
+  yAxisShowDynamic(
+    {
+      '流量(m³/s)': true,
+      '水位(m)': false,
+      '流速(m/s)': false
+    },
+    setting
+  );
+
+  // 再次应用调整后的配置
+  chartInstance.setOption(setting, true);
 };
 
 // ==================== 生命周期钩子 ====================
 onMounted(async () => {
-    // 双重等待机制：nextTick + setTimeout
-    await nextTick();
-    setTimeout(() => {
-        initChart();
-        updateChart();
-    }, 50);
+  // 双重等待机制：nextTick + setTimeout
+  await nextTick();
+  setTimeout(() => {
+    initChart();
+    updateChart();
+  }, 50);
 });
 
 onUnmounted(() => {
-    // 销毁图表实例，防止内存泄漏
-    if (chartInstance) {
-        chartInstance.dispose();
-        chartInstance = null;
-    }
+  // 销毁图表实例，防止内存泄漏
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
 });
 //获取水温监测下拉框
 const getselsectData = async () => {
-    let params = {
-        "filter": {
-            "logic": "and",
-            "filters": [
-                baseid.value != 'all' ? {
-                    "field": "baseId",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": baseid.value
-                } : null,
-                {
-                    "field": "fhstcd",
-                    "operator": "isnotnull"
-                },
-                {
-                    "logic": "or",
-                    "filters": [
-                        {
-                            "field": "sttpCode",
-                            "operator": "eq",
-                            "dataType": "string",
-                            "value": "ZQ"
-                        }
-                    ]
-                }
-            ].filter(Boolean)
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        baseid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: baseid.value
+            }
+          : null,
+        {
+          field: 'fhstcd',
+          operator: 'isnotnull'
         },
-        "select": [
-            "stcd",
-            "stnm",
-            "fhstcd",
-            "fhstnm",
-            "sttpCode"
-        ]
-    }
-    let res = await msstbprptGetKendoList(params)
-    console.log(res)
-    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 {
-            label: item.stnm,
-            value: item.stcd
+        {
+          logic: 'or',
+          filters: [
+            {
+              field: 'sttpCode',
+              operator: 'eq',
+              dataType: 'string',
+              value: 'ZQ'
+            }
+          ]
         }
-    })
-    // debugger
+      ].filter(Boolean)
+    },
+    select: ['stcd', 'stnm', 'fhstcd', 'fhstnm', 'sttpCode']
+  };
+  let res = await msstbprptGetKendoList(params);
+  console.log(res);
+  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 {
+      label: item.stnm,
+      value: item.stcd
+    };
+  });
+  // debugger
 };
 const convertDateRange = (dateRange: string[]) => {
-    if (!dateRange || dateRange.length !== 2) {
-        return null;
-    }
-    // debugger
+  if (!dateRange || dateRange.length !== 2) {
+    return null;
+  }
+  // debugger
 
-    const [startStr, endStr] = dateRange;
+  const [startStr, endStr] = dateRange;
 
-    // 获取今天的日期（日部分）
-    const today = new Date();
-    const currentDay = today.getDate();
+  // 获取今天的日期（日部分）
+  const today = new Date();
+  const currentDay = today.getDate();
 
-    // 解析开始日期 YY-MM
-    const [startYearStr, startMonthStr] = startStr.split('-');
-    const startYear = parseInt(startYearStr);
-    const startMonth = parseInt(startMonthStr);
-    const fullStartYear = startYear < 100 ? 2000 + startYear : startYear;
+  // 解析开始日期 YY-MM
+  const [startYearStr, startMonthStr] = startStr.split('-');
+  const startYear = parseInt(startYearStr);
+  const startMonth = parseInt(startMonthStr);
+  const fullStartYear = startYear < 100 ? 2000 + startYear : startYear;
 
-    // 解析结束日期 YY-MM
-    const [endYearStr, endMonthStr] = endStr.split('-');
-    const endYear = parseInt(endYearStr);
-    const endMonth = parseInt(endMonthStr);
-    const fullEndYear = endYear < 100 ? 2000 + endYear : endYear;
+  // 解析结束日期 YY-MM
+  const [endYearStr, endMonthStr] = endStr.split('-');
+  const endYear = parseInt(endYearStr);
+  const endMonth = parseInt(endMonthStr);
+  const fullEndYear = endYear < 100 ? 2000 + endYear : endYear;
 
-    // 开始日期：基于第一个值的年月 + 今天的日期 + 00:00:00
-    // 需要处理月份天数边界问题（如今天是31号，但2月只有28天）
-    const startMonthLastDay = new Date(fullStartYear, startMonth, 0).getDate();
-    const actualStartDay = Math.min(currentDay, startMonthLastDay);
-    const startDate = `${fullStartYear}-${String(startMonth).padStart(2, '0')}-${String(actualStartDay).padStart(2, '0')} 00:00:00`;
+  // 开始日期：基于第一个值的年月 + 今天的日期 + 00:00:00
+  // 需要处理月份天数边界问题（如今天是31号，但2月只有28天）
+  const startMonthLastDay = new Date(fullStartYear, startMonth, 0).getDate();
+  const actualStartDay = Math.min(currentDay, startMonthLastDay);
+  const startDate = `${fullStartYear}-${String(startMonth).padStart(
+    2,
+    '0'
+  )}-${String(actualStartDay).padStart(2, '0')} 00:00:00`;
 
-    // 结束日期：基于第二个值的年月 + 今天的日期 + 23:59:59
-    // 同样需要处理月份天数边界问题
-    const endMonthLastDay = new Date(fullEndYear, endMonth, 0).getDate();
-    const actualEndDay = Math.min(currentDay, endMonthLastDay);
-    const endDate = `${fullEndYear}-${String(endMonth).padStart(2, '0')}-${String(actualEndDay).padStart(2, '0')} 23:59:59`;
+  // 结束日期：基于第二个值的年月 + 今天的日期 + 23:59:59
+  // 同样需要处理月份天数边界问题
+  const endMonthLastDay = new Date(fullEndYear, endMonth, 0).getDate();
+  const actualEndDay = Math.min(currentDay, endMonthLastDay);
+  const endDate = `${fullEndYear}-${String(endMonth).padStart(2, '0')}-${String(
+    actualEndDay
+  ).padStart(2, '0')} 23:59:59`;
 
-    return {
-        startDate,
-        endDate
-    };
+  return {
+    startDate,
+    endDate
+  };
 };
 
 /**
@@ -634,181 +664,184 @@ const convertDateRange = (dateRange: string[]) => {
  * @param endDate 结束日期 (格式: YYYY-MM-DD HH:mm:ss)
  * @param stcd 测站代码
  */
-const getChartData = async (startDate: string, endDate: string, stcd: string) => {
-    try {
-        console.log('=== 开始加载图表数据 ===');
-        console.log('请求参数:', { startDate, endDate, stcd });
+const getChartData = async (
+  startDate: string,
+  endDate: string,
+  stcd: string
+) => {
+  try {
+    console.log('=== 开始加载图表数据 ===');
+    console.log('请求参数:', { startDate, endDate, stcd });
 
-        // 设置 loading 状态
-        loading.value = true;
-        hasData.value = false;
+    // 设置 loading 状态
+    loading.value = true;
+    hasData.value = false;
 
-        const params = {
-            "filter": {
-                "logic": "and",
-                "filters": [
-                    {
-                        "field": "DT",
-                        "operator": "gte",
-                        "value": startDate
-                    },
-                    {
-                        "field": "DT",
-                        "operator": "lte",
-                        "value": endDate
-                    },
-                    {
-                        "field": "stcd",
-                        "operator": "eq",
-                        "dataType": "string",
-                        "value": stcd
-                    }
-                ]
-            },
-            "sort": [
-                {
-                    "field": "dt",
-                    "dir": "asc"
-                }
-            ]
-        };
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'DT',
+            operator: 'gte',
+            value: startDate
+          },
+          {
+            field: 'DT',
+            operator: 'lte',
+            value: endDate
+          },
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: stcd
+          }
+        ]
+      },
+      sort: [
+        {
+          field: 'dt',
+          dir: 'asc'
+        }
+      ]
+    };
 
-        // 调用实际的API获取数据
-        const res = await sdriverdaysGetKendoList(params);
-        console.log('API返回结果:', res);
+    // 调用实际的API获取数据
+    const res = await sdriverdaysGetKendoList(params);
+    console.log('API返回结果:', res);
 
-        let data = res?.data?.data || [];
-        console.log('原始数据条数:', data.length);
+    let data = res?.data?.data || [];
+    console.log('原始数据条数:', data.length);
 
-        // 处理空数据情况
-        if (!data || data.length === 0) {
-            echartsData.value = [];
-            hasData.value = false;
-            await nextTick();
-            updateChart();
-            console.warn('未查询到水文数据');
-            return;
+    // 处理空数据情况
+    if (!data || data.length === 0) {
+      echartsData.value = [];
+      hasData.value = false;
+      await nextTick();
+      updateChart();
+      console.warn('未查询到水文数据');
+      return;
+    }
+
+    // ✅ 数据预处理：验证字段存在性并转换类型
+    const processedData = data
+      .map(item => {
+        // 验证必要字段
+        if (!item.dt || typeof item.dt !== 'string') {
+          console.warn('无效的日期数据:', item);
+          return null;
         }
 
-        // ✅ 数据预处理：验证字段存在性并转换类型
-        const processedData = data
-            .map(item => {
-                // 验证必要字段
-                if (!item.dt || typeof item.dt !== '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);
 
-                // 确保数值类型
-                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;
+        }
 
-                if (isNaN(q) || isNaN(z) || isNaN(v)) {
-                    console.warn('无效的水文数据:', item);
-                    return null;
-                }
+        return {
+          dt: item.dt.split(' ')[0], // 提取日期部分 "2026-05-03"
+          v: v, // 确保数值类型
+          q: q,
+          z: z
+        };
+      })
+      .filter(Boolean); // 过滤掉无效数据
 
-                return {
-                    dt: item.dt.split(' ')[0],  // 提取日期部分 "2026-05-03"
-                    v: v,     // 确保数值类型
-                    q: q,
-                    z: z
-                };
-            })
-            .filter(Boolean);  // 过滤掉无效数据
+    console.log('处理后数据条数:', processedData.length);
+    console.log('处理后数据示例:', processedData[0]);
 
-        console.log('处理后数据条数:', processedData.length);
-        console.log('处理后数据示例:', processedData[0]);
+    // ✅ 更新响应式数据
+    echartsData.value = processedData;
 
-        // ✅ 更新响应式数据
-        echartsData.value = processedData;
+    // 判断是否有数据
+    hasData.value = echartsData.value.length > 0;
+    console.log('hasData 设置为:', hasData.value);
 
-        // 判断是否有数据
-        hasData.value = echartsData.value.length > 0;
-        console.log('hasData 设置为:', hasData.value);
-
-        // ✅ 刷新图表（确保DOM更新后执行）
-        await nextTick();
-        updateChart();
-        console.log('图表已更新');
-
-    } catch (error) {
-        console.error('获取图表数据失败:', error);
-        hasData.value = false;
-    } finally {
-        // 关闭 loading 状态
-        await nextTick();
-        console.log('关闭 loading 状态');
-        loading.value = false;
-    }
+    // ✅ 刷新图表（确保DOM更新后执行）
+    await nextTick();
+    updateChart();
+    console.log('图表已更新');
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+    hasData.value = false;
+  } finally {
+    // 关闭 loading 状态
+    await nextTick();
+    console.log('关闭 loading 状态');
+    loading.value = false;
+  }
 };
 
-const handlePanelChange1 = async (data) => {
-    console.log('=== 用户交互触发 ===');
-    console.log('当前所有控件状态:', data);
-    // scopeDate: ['26-05', '26-06']
-    // select: "0836000011"
-    if (data.scopeDate && data.scopeDate.length > 0 && data.select) {
-        console.log('参数验证通过，开始加载数据');
-        // 转换日期格式并加载数据
-        const dateRange = convertDateRange(data.scopeDate);
-        if (dateRange) {
-            console.log('日期转换结果:', dateRange);
-            await getChartData(dateRange.startDate, dateRange.endDate, data.select);
-        } else {
-            console.error('日期转换失败');
-        }
+const handlePanelChange1 = async data => {
+  console.log('=== 用户交互触发 ===');
+  console.log('当前所有控件状态:', data);
+  // scopeDate: ['26-05', '26-06']
+  // select: "0836000011"
+  if (data.scopeDate && data.scopeDate.length > 0 && data.select) {
+    console.log('参数验证通过，开始加载数据');
+    // 转换日期格式并加载数据
+    const dateRange = convertDateRange(data.scopeDate);
+    if (dateRange) {
+      console.log('日期转换结果:', dateRange);
+      await getChartData(dateRange.startDate, dateRange.endDate, data.select);
     } else {
-        loading.value = false;
-        hasData.value = false;
-        // 清空图表数据
-        echartsData.value = [];
-        // 更新图表显示空状态
-        await nextTick();
-        updateChart();
-        console.warn('参数不完整:', {
-            scopeDate: data.scopeDate,
-            select: data.select
-        });
+      console.error('日期转换失败');
     }
-}
+  } else {
+    loading.value = false;
+    hasData.value = false;
+    // 清空图表数据
+    echartsData.value = [];
+    // 更新图表显示空状态
+    await nextTick();
+    updateChart();
+    console.warn('参数不完整:', {
+      scopeDate: data.scopeDate,
+      select: data.select
+    });
+  }
+};
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        baseid.value = newVal.wbsCode;
-        getselsectData()
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getselsectData();
+  },
+  { deep: true, immediate: true }
 );
 </script>
 
 <style lang="scss" scoped>
 .chart-wrapper {
-    width: 100%;
-    height: 231px;
+  width: 100%;
+  height: 231px;
+  min-height: 231px;
+  position: relative;
+  /* 为empty-overlay提供定位上下文 */
+
+  .echarts-chart {
+    width: 100% !important;
+    height: 100% !important;
+    min-width: 100%;
     min-height: 231px;
-    position: relative;
-    /* 为empty-overlay提供定位上下文 */
+  }
 
-    .echarts-chart {
-        width: 100% !important;
-        height: 100% !important;
-        min-width: 100%;
-        min-height: 231px;
-    }
-
-    .empty-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255);
-        z-index: 10;
-    }
+  .empty-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255);
+    z-index: 10;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/qixidishuiwenbianhua/index.vue b/frontend/src/modules/qixidishuiwenbianhua/index.vue
index 9550aefa..42cb222a 100644
--- a/frontend/src/modules/qixidishuiwenbianhua/index.vue
+++ b/frontend/src/modules/qixidishuiwenbianhua/index.vue
@@ -1,17 +1,22 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="水温监测" :select="select" :scopeDate="datetimePicker" @update-values="handlePanelChange1">
-        <div class="chart-wrapper">
-            <a-spin :spinning="loading">
-                <!-- 始终渲染图表容器，确保有固定宽高 -->
-                <div ref="chartRef" class="water-temp-chart"></div>
-                <!-- 无数据时显示Empty，但不影响容器尺寸 -->
-                <div v-if="!loading && !hasData" class="empty-overlay">
-                    <a-empty description="暂无数据" />
-                </div>
-            </a-spin>
+  <SidePanelItem
+    title="水温监测"
+    :select="select"
+    :scopeDate="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <div class="chart-wrapper">
+      <a-spin :spinning="loading">
+        <!-- 始终渲染图表容器，确保有固定宽高 -->
+        <div ref="chartRef" class="water-temp-chart"></div>
+        <!-- 无数据时显示Empty，但不影响容器尺寸 -->
+        <div v-if="!loading && !hasData" class="empty-overlay">
+          <a-empty description="暂无数据" />
         </div>
-    </SidePanelItem>
+      </a-spin>
+    </div>
+  </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
@@ -19,12 +24,13 @@ import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import * as echarts from 'echarts';
 import type { EChartsOption } from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 import { msstbprptGetKendoList, sdrvwtsGetKendoList } from '@/api/qxd';
-import { useModelStore } from "@/store/modules/model";
+import { useModelStore } from '@/store/modules/model';
+import dayjs from 'dayjs';
 // 定义组件名
 defineOptions({
-    name: 'qixidishuiwenbianhua'
+  name: 'qixidishuiwenbianhua'
 });
 
 // ==================== 响应式变量定义 ====================
@@ -32,7 +38,7 @@ const JidiSelectEventStore = useJidiSelectEventStore();
 // 图表容器引用
 const chartRef = ref<HTMLDivElement>();
 let chartInstance: echarts.ECharts | null = null;
-const baseid = ref('')
+const baseid = ref('');
 
 // Loading 状态和数据状态
 const loading = ref(false);
@@ -40,26 +46,30 @@ const hasData = ref(true); // 初始化为 true，因为 initChart 时会渲染
 
 // 选择器配置
 const select = ref({
-    show: true,
-    value: undefined,
-    options: [],
-    picker: undefined,
-    format: undefined
+  show: true,
+  value: undefined,
+  options: [],
+  picker: undefined,
+  format: undefined
 });
 
 // 日期选择器配置
 const datetimePicker: any = ref({
-    show: true,
-    value: (() => {
-        const now = new Date();
-        const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
-        const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-        const lastMonthStr = `${lastMonth.getFullYear()}-${String(lastMonth.getMonth() + 1).padStart(2, '0')}`;
-        return [lastMonthStr, currentMonth];
-    })(),
-    format: 'YY-MM',
-    picker: 'month' as const,
-    options: []
+  show: true,
+  value: (() => {
+    const now = new Date();
+    const currentMonth = `${now.getFullYear()}-${String(
+      now.getMonth() + 1
+    ).padStart(2, '0')}`;
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    const lastMonthStr = `${lastMonth.getFullYear()}-${String(
+      lastMonth.getMonth() + 1
+    ).padStart(2, '0')}`;
+    return [lastMonthStr, currentMonth];
+  })(),
+  format: 'YY-MM',
+  picker: 'month' as const,
+  options: []
 });
 
 // 图表数据
@@ -69,7 +79,16 @@ const modelStore = useModelStore();
 const unita = ref('℃');
 
 // 颜色配置 - 使用HSL色彩空间生成舒适的颜色
-const Color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
+const Color = [
+  '#5470c6',
+  '#91cc75',
+  '#fac858',
+  '#ee6666',
+  '#73c0de',
+  '#3ba272',
+  '#fc8452',
+  '#9a60b4'
+];
 
 // ==================== 工具函数 ====================
 
@@ -77,279 +96,294 @@ const Color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272',
  * 生成模拟数据 - 季节性水温变化
  */
 const generateMockData = () => {
-    const data = [];
-    const baseTemp = 15; // 基础温度
+  const data = [];
+  const baseTemp = 15; // 基础温度
 
-    for (let i = 0; i < 12; i++) {
-        const month = String(i + 1).padStart(2, '0');
-        // 模拟季节性变化：夏季高，冬季低
-        // 正弦波模拟：峰值在7-8月，谷值在1-2月
-        const temp = baseTemp + Math.sin((i / 12) * Math.PI * 2 - Math.PI / 2) * 10 + Math.random() * 2;
+  for (let i = 0; i < 12; i++) {
+    const month = String(i + 1).padStart(2, '0');
+    // 模拟季节性变化：夏季高，冬季低
+    // 正弦波模拟：峰值在7-8月，谷值在1-2月
+    const temp =
+      baseTemp +
+      Math.sin((i / 12) * Math.PI * 2 - Math.PI / 2) * 10 +
+      Math.random() * 2;
 
-        data.push({
-            dt: `2024-${month}`,
-            wt: parseFloat(temp.toFixed(1))
-        });
-    }
+    data.push({
+      dt: `2024-${month}`,
+      wt: parseFloat(temp.toFixed(1))
+    });
+  }
 
-    return data;
+  return data;
 };
 
 /**
  * 初始化图表
  */
 const initChart = () => {
-    if (!chartRef.value) {
-        console.warn('图表容器未找到');
-        return;
-    }
+  if (!chartRef.value) {
+    console.warn('图表容器未找到');
+    return;
+  }
 
-    // 销毁已存在的实例
-    if (chartInstance) {
-        chartInstance.dispose();
-    }
+  // 销毁已存在的实例
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
 
-    // 创建新实例
-    chartInstance = echarts.init(chartRef.value);
+  // 创建新实例
+  chartInstance = echarts.init(chartRef.value);
 
-    // 绑定数据点点击事件
-    chartInstance.on('click', handleDataPointClick);
+  // 绑定数据点点击事件
+  chartInstance.on('click', handleDataPointClick);
 
-    // 更新图表
-    updateChart();
+  // 更新图表
+  updateChart();
 
-    // 监听窗口大小变化
-    window.addEventListener('resize', handleResize);
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize);
 };
 
 /**
  * 更新图表配置
  */
 const updateChart = () => {
-    if (!chartInstance) return;
+  if (!chartInstance) return;
 
-    const _legendData = [`水温(${unita.value})`];
+  const _legendData = [`水温(${unita.value})`];
 
-    // 处理空数据情况
-    const hasData = echartsData.value && echartsData.value.length > 0;
+  // 处理空数据情况
+  const hasData = echartsData.value && echartsData.value.length > 0;
 
-    const option: EChartsOption = {
-        tooltip: {
-            trigger: 'axis',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            borderColor: 'transparent',
-            textStyle: {
-                color: '#ffffff'
-            },
-            formatter: function (params: any) {
-                if (!params || params.length === 0) return '';
+  const option: EChartsOption = {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#ffffff'
+      },
+      formatter: function (params: any) {
+        if (!params || params.length === 0) return '';
 
-                let res = `${params[0].name} <br/>`;
+        let res = `${params[0].name} <br/>`;
 
-                for (const item of params) {
-                    const seriesName = item.seriesName ?? '';
-                    let regx = /\(([^()]+?)\)/;
-                    let unit = seriesName.match(regx);
-                    // 数据保留一位小数
-                    const finalValue = item.value !== undefined && item.value !== null
-                        ? Number(item.value).toFixed(1)
-                        : '-';
+        for (const item of params) {
+          const seriesName = item.seriesName ?? '';
+          let regx = /\(([^()]+?)\)/;
+          let unit = seriesName.match(regx);
+          // 数据保留一位小数
+          const finalValue =
+            item.value !== undefined && item.value !== null
+              ? Number(item.value).toFixed(1)
+              : '-';
 
-                    if (item.value !== undefined && item.value !== null) {
-                        res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} ${finalValue}${unit?.[1] || ''} <br/>`;
-                    }
-                }
-                return res;
-            }
+          if (item.value !== undefined && item.value !== null) {
+            res += `<span style="background: ${
+              item.color
+            }; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${
+              item.seriesName
+            } ${finalValue}${unit?.[1] || ''} <br/>`;
+          }
+        }
+        return res;
+      }
+    },
+    // axisPointer 配置：鼠标经过时显示阴影块
+    axisPointer: {
+      type: 'shadow',
+      label: {
+        show: false
+      },
+      shadowStyle: {
+        color: 'rgba(84, 112, 198, 0.2)'
+      }
+    },
+    color: Color,
+    legend: {
+      data: _legendData,
+      top: 0,
+      left: 'center',
+      selectedMode: 'multiple'
+    },
+    grid: {
+      top: 25,
+      left: '3%',
+      right: '3%',
+      bottom: '3%',
+      containLabel: true
+    },
+    dataZoom: {
+      type: 'inside',
+      start: 0,
+      end: 100
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: echartsData.value?.map((item: any) => item.dt) || [],
+        boundaryGap: true,
+        // X轴标签配置 - 最多显示4个标签，强制显示第一个
+        axisLabel: {
+          show: true,
+          rotate: 0, // 不倾斜
+          interval: (index: number, value: string): boolean => {
+            const total = echartsData.value?.length || 0;
+            if (total <= 4) return true; // 数据少于4条，全部显示
+
+            // 强制显示第一个
+            if (index === 0) return true;
+
+            // 其余均匀分布3个标签（总共4个）
+            const step = Math.floor((total - 1) / 3);
+            return index % step === 0 && index < total;
+          },
+          formatter: function (value: string) {
+            // 显示完整日期 "YYYY-MM-DD" 格式
+            return value;
+          }
         },
-        // axisPointer 配置：鼠标经过时显示阴影块
+        // X轴网格线（垂直方向）
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'solid',
+            color: '#e0e0e0'
+          }
+        },
+        // X轴的axisPointer配置：鼠标经过时显示阴影块
         axisPointer: {
-            type: 'shadow',
-            label: {
-                show: false
-            },
-            shadowStyle: {
-                color: 'rgba(84, 112, 198, 0.2)'
-            }
+          type: 'shadow',
+          shadowStyle: {
+            color: 'rgba(84, 112, 198, 0.2)'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        // 移除 name，避免与 legend 重复，在刻度上显示单位
+        name: _legendData[0], // 显示 "水温(℃)"
+        nameLocation: 'end', // 显示在 Y 轴顶部
+        nameGap: 8, // 与轴线距离 20px
+        nameTextStyle: {
+          color: '#333333',
+          fontSize: 12
         },
-        color: Color,
-        legend: {
-            data: _legendData,
-            top: 0,
-            left: 'center',
-            selectedMode: 'multiple'
+        // 计算 Y 轴范围：最小值向下取整，最大值向上取整
+        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)))
+            : undefined,
+        // 确保显示刻度和标签，保持整数
+        axisLabel: {
+          show: true,
+          color: '#333',
+          formatter: (value: number) => `${Math.round(value)} ℃` // 取整并显示单位
         },
-        grid: {
-            top: 25,
-            left: '3%',
-            right: '3%',
-            bottom: '3%',
-            containLabel: true
+        axisTick: {
+          show: true
         },
-        dataZoom: {
-            type: 'inside',
-            start: 0,
-            end: 100
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#333'
+          }
         },
-        xAxis: [
-            {
-                type: 'category',
-                data: echartsData.value?.map((item: any) => item.dt) || [],
-                boundaryGap: true,
-                // X轴标签配置 - 最多显示4个标签，强制显示第一个
-                axisLabel: {
-                    show: true,
-                    rotate: 0,  // 不倾斜
-                    interval: (index: number, value: string): boolean => {
-                        const total = echartsData.value?.length || 0;
-                        if (total <= 4) return true;  // 数据少于4条，全部显示
-
-                        // 强制显示第一个
-                        if (index === 0) return true;
-
-                        // 其余均匀分布3个标签（总共4个）
-                        const step = Math.floor((total - 1) / 3);
-                        return index % step === 0 && index < total;
-                    },
-                    formatter: function (value: string) {
-                        // 显示完整日期 "YYYY-MM-DD" 格式
-                        return value;
-                    }
-                },
-                // X轴网格线（垂直方向）
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        type: 'solid',
-                        color: '#e0e0e0'
-                    }
-                },
-                // X轴的axisPointer配置：鼠标经过时显示阴影块
-                axisPointer: {
-                    type: 'shadow',
-                    shadowStyle: {
-                        color: 'rgba(84, 112, 198, 0.2)'
-                    }
-                }
-            }
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                // 移除 name，避免与 legend 重复，在刻度上显示单位
-                name: _legendData[0],  // 显示 "水温(℃)"
-                nameLocation: 'end',   // 显示在 Y 轴顶部
-                nameGap: 8,           // 与轴线距离 20px
-                nameTextStyle: {
-                    color: '#333333',
-                    fontSize: 12,
-
-                },
-                // 计算 Y 轴范围：最小值向下取整，最大值向上取整
-                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)))
-                    : undefined,
-                // 确保显示刻度和标签，保持整数
-                axisLabel: {
-                    show: true,
-                    color: '#333',
-                    formatter: (value: number) => `${Math.round(value)} ℃`  // 取整并显示单位
-                },
-                axisTick: {
-                    show: true
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#333'
-                    }
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        type: 'solid'
-                    }
-                },
-                // 确保 Y 轴刻度为整数
-                minInterval: 1,
-                maxInterval: 1
-            }
-        ],
-        series: [
-            {
-                name: _legendData[0],
-                data: hasData ? (echartsData.value?.map((item: any) => item.wt) || []) : [],
-                type: 'line',
-                smooth: true,
-                symbol: 'circle',
-                symbolSize: 4,
-                lineStyle: {
-                    width: 2
-                }
-            }
-        ]
-    };
-    // 使用完全替换模式更新配置
-    chartInstance.setOption(option, true);
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'solid'
+          }
+        },
+        // 确保 Y 轴刻度为整数
+        minInterval: 1,
+        maxInterval: 1
+      }
+    ],
+    series: [
+      {
+        name: _legendData[0],
+        data: hasData
+          ? echartsData.value?.map((item: any) => item.wt) || []
+          : [],
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        lineStyle: {
+          width: 2
+        }
+      }
+    ]
+  };
+  // 使用完全替换模式更新配置
+  chartInstance.setOption(option, true);
 };
 
 /**
  * 处理窗口大小变化
  */
 const handleResize = () => {
-    if (chartInstance) {
-        chartInstance.resize();
-    }
+  if (chartInstance) {
+    chartInstance.resize();
+  }
 };
 
 /**
  * 处理数据点点击事件
  */
 const handleDataPointClick = (params: any) => {
-    console.log('=== 数据点点击事件 ===');
-    console.log('点击参数:', params);
+  console.log('=== 数据点点击事件 ===');
+  console.log('点击参数:', params);
 
-    if (!params || !params.dataIndex) {
-        console.warn('无效的数据点点击');
-        return;
-    }
+  if (!params || !params.dataIndex) {
+    console.warn('无效的数据点点击');
+    return;
+  }
 
-    const dataIndex = params.dataIndex;
-    const dataItem = echartsData.value[dataIndex];
+  const dataIndex = params.dataIndex;
+  const dataItem = echartsData.value[dataIndex];
 
-    if (dataItem) {
-        console.log('点击的数据:', {
-            日期: dataItem.dt,
-            水温: dataItem.wt,
-            测站代码: dataItem.stcd,
-            索引: dataIndex
-        });
-        modelStore.modalVisible = true;
-        modelStore.params.sttp = "WT";
-        modelStore.title = '水温监测';
-        modelStore.params.stcd = dataItem.stcd;
-        modelStore.showStcdSelector = true
-        modelStore.stcdOptions = select.value.options
-    }
+  if (dataItem) {
+    console.log('点击的数据:', {
+      日期: dataItem.dt,
+      水温: dataItem.wt,
+      测站代码: dataItem.stcd,
+      索引: dataIndex
+    });
+    modelStore.modalVisible = true;
+    modelStore.params.sttp = 'WT';
+    modelStore.title = '水温监测';
+    modelStore.params.stcd = dataItem.stcd;
+    modelStore.showStcdSelector = true;
+    modelStore.stcdOptions = select.value.options;
+    modelStore.filter.rangeTm = [
+      dayjs(dataItem.dt).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+      dayjs(dataItem.dt).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+    ];
+  }
 };
 
 /**
  * 加载模拟数据
  */
 const loadData = async () => {
-    try {
-        // 生成模拟数据
-        echartsData.value = generateMockData();
+  try {
+    // 生成模拟数据
+    echartsData.value = generateMockData();
 
-        // 数据加载完成后更新图表
-        await nextTick();
-        updateChart();
-    } catch (error) {
-        console.error('加载水温数据失败:', error);
-    }
+    // 数据加载完成后更新图表
+    await nextTick();
+    updateChart();
+  } catch (error) {
+    console.error('加载水温数据失败:', error);
+  }
 };
 
 /**
@@ -358,114 +392,117 @@ const loadData = async () => {
  * @param endDate 结束日期 (格式: YYYY-MM-DD HH:mm:ss)
  * @param stcd 测站代码
  */
-const getChartData = async (startDate: string, endDate: string, stcd: string) => {
-    try {
-        console.log('=== 开始加载图表数据 ===');
-        console.log('请求参数:', { startDate, endDate, stcd });
+const getChartData = async (
+  startDate: string,
+  endDate: string,
+  stcd: string
+) => {
+  try {
+    console.log('=== 开始加载图表数据 ===');
+    console.log('请求参数:', { startDate, endDate, stcd });
 
-        // 设置 loading 状态
-        loading.value = true;
-        hasData.value = false;
+    // 设置 loading 状态
+    loading.value = true;
+    hasData.value = false;
 
-        // TODO: 实现API调用逻辑
-        // 参考选中的代码结构，构建请求参数
-        const params = {
-            "filter": {
-                "logic": "and",
-                "filters": [
-                    {
-                        "field": "DT",
-                        "operator": "gte",
-                        "value": startDate  // 例如: "2026-05-01 00:00:00"
-                    },
-                    {
-                        "field": "DT",
-                        "operator": "lte",
-                        "value": endDate    // 例如: "2026-06-30 23:59:59"
-                    },
-                    {
-                        "field": "stcd",
-                        "operator": "eq",
-                        "dataType": "string",
-                        "value": stcd
-                    }
-                ]
-            },
-            "sort": [
-                {
-                    "field": "dt",
-                    "dir": "asc"
-                }
-            ]
-        };
+    // TODO: 实现API调用逻辑
+    // 参考选中的代码结构，构建请求参数
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'DT',
+            operator: 'gte',
+            value: startDate // 例如: "2026-05-01 00:00:00"
+          },
+          {
+            field: 'DT',
+            operator: 'lte',
+            value: endDate // 例如: "2026-06-30 23:59:59"
+          },
+          {
+            field: 'stcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: stcd
+          }
+        ]
+      },
+      sort: [
+        {
+          field: 'dt',
+          dir: 'asc'
+        }
+      ]
+    };
 
-        // 调用实际的API获取数据
-        const res = await sdrvwtsGetKendoList(params);
-        console.log('API返回结果:', res);
+    // 调用实际的API获取数据
+    const res = await sdrvwtsGetKendoList(params);
+    console.log('API返回结果:', res);
 
-        let data = res?.data?.data || [];
-        console.log('原始数据条数:', data.length);
+    let data = res?.data?.data || [];
+    console.log('原始数据条数:', data.length);
 
-        // 处理空数据情况
-        if (!data || data.length === 0) {
-            echartsData.value = [];
-            hasData.value = false;
-            await nextTick();
-            updateChart();
-            console.warn('未查询到水温数据');
-            return;
+    // 处理空数据情况
+    if (!data || data.length === 0) {
+      echartsData.value = [];
+      hasData.value = false;
+      await nextTick();
+      updateChart();
+      console.warn('未查询到水温数据');
+      return;
+    }
+
+    // 转换数据格式：提取日期部分用于X轴显示，并进行数据验证和类型转换
+    echartsData.value = data
+      .map(item => {
+        // 验证必要字段
+        if (!item.dt || typeof item.dt !== 'string') {
+          console.warn('无效的日期数据:', item);
+          return null;
         }
 
-        // 转换数据格式：提取日期部分用于X轴显示，并进行数据验证和类型转换
-        echartsData.value = data
-            .map(item => {
-                // 验证必要字段
-                if (!item.dt || typeof item.dt !== '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;
+        }
 
-                // 确保 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 类型
+          stcd: item.stcd || stcd // 保留 stcd 字段，如果 API 返回中没有则使用传入的 stcd
+        };
+      })
+      .filter(Boolean); // 过滤掉无效数据
 
-                return {
-                    dt: item.dt.substring(0, 10),  // 提取 "2026-05-02" 格式
-                    wt: wt,  // 确保是 number 类型
-                    stcd: item.stcd || stcd  // 保留 stcd 字段，如果 API 返回中没有则使用传入的 stcd
-                };
-            })
-            .filter(Boolean);  // 过滤掉无效数据
+    console.log('转换后的图表数据:', echartsData.value);
+    console.log('数据类型检查:', {
+      第一条数据: echartsData.value[0],
+      dt类型: typeof echartsData.value[0]?.dt,
+      wt类型: typeof echartsData.value[0]?.wt,
+      wt값: echartsData.value[0]?.wt
+    });
 
-        console.log('转换后的图表数据:', echartsData.value);
-        console.log('数据类型检查:', {
-            第一条数据: echartsData.value[0],
-            dt类型: typeof echartsData.value[0]?.dt,
-            wt类型: typeof echartsData.value[0]?.wt,
-            wt값: echartsData.value[0]?.wt
-        });
+    // 判断是否有数据
+    hasData.value = echartsData.value.length > 0;
+    console.log('hasData 设置为:', hasData.value);
 
-        // 判断是否有数据
-        hasData.value = echartsData.value.length > 0;
-        console.log('hasData 设置为:', hasData.value);
-
-        // 数据加载完成后更新图表
-        await nextTick();
-        updateChart();
-        console.log('✅ 图表数据加载完成');
-
-    } catch (error) {
-        console.error('获取图表数据失败:', error);
-        hasData.value = false;
-    } finally {
-        // 关闭 loading 状态
-        await nextTick();
-        console.log('关闭 loading 状态');
-        loading.value = false;
-    }
+    // 数据加载完成后更新图表
+    await nextTick();
+    updateChart();
+    console.log('✅ 图表数据加载完成');
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+    hasData.value = false;
+  } finally {
+    // 关闭 loading 状态
+    await nextTick();
+    console.log('关闭 loading 状态');
+    loading.value = false;
+  }
 };
 
 /**
@@ -474,224 +511,225 @@ const getChartData = async (startDate: string, endDate: string, stcd: string) =>
  * @returns { startDate: string, endDate: string } 格式化后的日期范围
  */
 const convertDateRange = (dateRange: string[]) => {
-    if (!dateRange || dateRange.length !== 2) {
-        return null;
-    }
-    // debugger
+  if (!dateRange || dateRange.length !== 2) {
+    return null;
+  }
+  // debugger
 
-    const [startStr, endStr] = dateRange;
+  const [startStr, endStr] = dateRange;
 
-    // 获取今天的日期（日部分）
-    const today = new Date();
-    const currentDay = today.getDate();
+  // 获取今天的日期（日部分）
+  const today = new Date();
+  const currentDay = today.getDate();
 
-    // 解析开始日期 YY-MM
-    const [startYearStr, startMonthStr] = startStr.split('-');
-    const startYear = parseInt(startYearStr);
-    const startMonth = parseInt(startMonthStr);
-    const fullStartYear = startYear < 100 ? 2000 + startYear : startYear;
+  // 解析开始日期 YY-MM
+  const [startYearStr, startMonthStr] = startStr.split('-');
+  const startYear = parseInt(startYearStr);
+  const startMonth = parseInt(startMonthStr);
+  const fullStartYear = startYear < 100 ? 2000 + startYear : startYear;
 
-    // 解析结束日期 YY-MM
-    const [endYearStr, endMonthStr] = endStr.split('-');
-    const endYear = parseInt(endYearStr);
-    const endMonth = parseInt(endMonthStr);
-    const fullEndYear = endYear < 100 ? 2000 + endYear : endYear;
+  // 解析结束日期 YY-MM
+  const [endYearStr, endMonthStr] = endStr.split('-');
+  const endYear = parseInt(endYearStr);
+  const endMonth = parseInt(endMonthStr);
+  const fullEndYear = endYear < 100 ? 2000 + endYear : endYear;
 
-    // 开始日期：基于第一个值的年月 + 今天的日期 + 00:00:00
-    // 需要处理月份天数边界问题（如今天是31号，但2月只有28天）
-    const startMonthLastDay = new Date(fullStartYear, startMonth, 0).getDate();
-    const actualStartDay = Math.min(currentDay, startMonthLastDay);
-    const startDate = `${fullStartYear}-${String(startMonth).padStart(2, '0')}-${String(actualStartDay).padStart(2, '0')} 00:00:00`;
+  // 开始日期：基于第一个值的年月 + 今天的日期 + 00:00:00
+  // 需要处理月份天数边界问题（如今天是31号，但2月只有28天）
+  const startMonthLastDay = new Date(fullStartYear, startMonth, 0).getDate();
+  const actualStartDay = Math.min(currentDay, startMonthLastDay);
+  const startDate = `${fullStartYear}-${String(startMonth).padStart(
+    2,
+    '0'
+  )}-${String(actualStartDay).padStart(2, '0')} 00:00:00`;
 
-    // 结束日期：基于第二个值的年月 + 今天的日期 + 23:59:59
-    // 同样需要处理月份天数边界问题
-    const endMonthLastDay = new Date(fullEndYear, endMonth, 0).getDate();
-    const actualEndDay = Math.min(currentDay, endMonthLastDay);
-    const endDate = `${fullEndYear}-${String(endMonth).padStart(2, '0')}-${String(actualEndDay).padStart(2, '0')} 23:59:59`;
+  // 结束日期：基于第二个值的年月 + 今天的日期 + 23:59:59
+  // 同样需要处理月份天数边界问题
+  const endMonthLastDay = new Date(fullEndYear, endMonth, 0).getDate();
+  const actualEndDay = Math.min(currentDay, endMonthLastDay);
+  const endDate = `${fullEndYear}-${String(endMonth).padStart(2, '0')}-${String(
+    actualEndDay
+  ).padStart(2, '0')} 23:59:59`;
 
-    return {
-        startDate,
-        endDate
-    };
+  return {
+    startDate,
+    endDate
+  };
 };
 
-const handlePanelChange1 = async (data) => {
-    console.log('=== 用户交互触发 ===');
-    console.log('当前所有控件状态:', data);
-    // scopeDate: ['26-05', '26-06']
-    // select: "0836000011"
-    if (data.scopeDate && data.scopeDate.length > 0 && data.select) {
-        console.log('参数验证通过，开始加载数据');
-        // 转换日期格式并加载数据
-        const dateRange = convertDateRange(data.scopeDate);
-        if (dateRange) {
-            console.log('日期转换结果:', dateRange);
-            await getChartData(dateRange.startDate, dateRange.endDate, data.select);
-        } else {
-            console.error('日期转换失败');
-        }
+const handlePanelChange1 = async data => {
+  console.log('=== 用户交互触发 ===');
+  console.log('当前所有控件状态:', data);
+  // scopeDate: ['26-05', '26-06']
+  // select: "0836000011"
+  if (data.scopeDate && data.scopeDate.length > 0 && data.select) {
+    console.log('参数验证通过，开始加载数据');
+    // 转换日期格式并加载数据
+    const dateRange = convertDateRange(data.scopeDate);
+    if (dateRange) {
+      console.log('日期转换结果:', dateRange);
+      await getChartData(dateRange.startDate, dateRange.endDate, data.select);
     } else {
-        loading.value = false;
-        hasData.value = false;
-        // 清空图表数据
-        echartsData.value = [];
-        // 更新图表显示空状态
-        await nextTick();
-        updateChart();
-        console.warn('参数不完整:', {
-            scopeDate: data.scopeDate,
-            select: data.select
-        });
+      console.error('日期转换失败');
     }
-}
+  } else {
+    loading.value = false;
+    hasData.value = false;
+    // 清空图表数据
+    echartsData.value = [];
+    // 更新图表显示空状态
+    await nextTick();
+    updateChart();
+    console.warn('参数不完整:', {
+      scopeDate: data.scopeDate,
+      select: data.select
+    });
+  }
+};
 //获取水温监测下拉框
 const getselsectData = async () => {
-    let params = {
-        "filter": {
-            "logic": "and",
-            "filters": [
-                baseid.value != 'all' ? {
-                    "field": "baseId",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": baseid.value
-                } : null,
-                {
-                    "field": "fhstcd",
-                    "operator": "isnotnull"
-                },
-                {
-                    "logic": "or",
-                    "filters": [
-                        {
-                            "field": "sttpCode",
-                            "operator": "eq",
-                            "dataType": "string",
-                            "value": "WTRV"
-                        }
-                    ]
-                }
-            ].filter(Boolean)
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        baseid.value != 'all'
+          ? {
+              field: 'baseId',
+              operator: 'eq',
+              dataType: 'string',
+              value: baseid.value
+            }
+          : null,
+        {
+          field: 'fhstcd',
+          operator: 'isnotnull'
         },
-        "select": [
-            "stcd",
-            "stnm",
-            "fhstcd",
-            "fhstnm",
-            "sttpCode"
-        ]
-    }
-    let res = await msstbprptGetKendoList(params)
-    console.log(res)
-    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 {
-            label: item.stnm,
-            value: item.stcd
+        {
+          logic: 'or',
+          filters: [
+            {
+              field: 'sttpCode',
+              operator: 'eq',
+              dataType: 'string',
+              value: 'WTRV'
+            }
+          ]
         }
-    })
-    // debugger
+      ].filter(Boolean)
+    },
+    select: ['stcd', 'stnm', 'fhstcd', 'fhstnm', 'sttpCode']
+  };
+  let res = await msstbprptGetKendoList(params);
+  console.log(res);
+  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 {
+      label: item.stnm,
+      value: item.stcd
+    };
+  });
+  // debugger
 };
 ////
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        baseid.value = newVal.wbsCode;
-        getselsectData()
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getselsectData();
+  },
+  { deep: true, immediate: true }
 );
 // ==================== 生命周期钩子 ====================
 
 // 页面加载时执行
 onMounted(() => {
-    // 双重等待确保DOM和样式计算完成
-    nextTick(() => {
-        setTimeout(() => {
-            // 校验容器尺寸
-            if (chartRef.value) {
-                const rect = chartRef.value.getBoundingClientRect();
-                if (rect.width > 0 && rect.height > 0) {
-                    initChart();
-                    // 注释掉模拟数据加载，等待用户交互后加载真实数据
-                    // loadData();
-                    console.log('✅ 图表初始化完成，等待用户交互加载数据');
+  // 双重等待确保DOM和样式计算完成
+  nextTick(() => {
+    setTimeout(() => {
+      // 校验容器尺寸
+      if (chartRef.value) {
+        const rect = chartRef.value.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+          initChart();
+          // 注释掉模拟数据加载，等待用户交互后加载真实数据
+          // loadData();
+          console.log('✅ 图表初始化完成，等待用户交互加载数据');
+        } else {
+          console.warn('图表容器尺寸为0，启动重试机制');
+          // 指数退避重试
+          let retryCount = 0;
+          const maxRetries = 5;
+          const retryInit = () => {
+            if (retryCount < maxRetries) {
+              retryCount++;
+              setTimeout(() => {
+                const newRect = chartRef.value?.getBoundingClientRect();
+                if (newRect && newRect.width > 0 && newRect.height > 0) {
+                  initChart();
+                  // loadData();
+                  console.log('✅ 图表初始化完成（重试成功）');
                 } else {
-                    console.warn('图表容器尺寸为0，启动重试机制');
-                    // 指数退避重试
-                    let retryCount = 0;
-                    const maxRetries = 5;
-                    const retryInit = () => {
-                        if (retryCount < maxRetries) {
-                            retryCount++;
-                            setTimeout(() => {
-                                const newRect = chartRef.value?.getBoundingClientRect();
-                                if (newRect && newRect.width > 0 && newRect.height > 0) {
-                                    initChart();
-                                    // loadData();
-                                    console.log('✅ 图表初始化完成（重试成功）');
-                                } else {
-                                    retryInit();
-                                }
-                            }, 50 * Math.pow(2, retryCount));
-                        } else {
-                            console.error('图表容器初始化失败，已达到最大重试次数');
-                        }
-                    };
-                    retryInit();
+                  retryInit();
                 }
+              }, 50 * Math.pow(2, retryCount));
+            } else {
+              console.error('图表容器初始化失败，已达到最大重试次数');
             }
-        }, 50);
-    });
+          };
+          retryInit();
+        }
+      }
+    }, 50);
+  });
 });
 
 // 组件卸载时清理
 onUnmounted(() => {
-    // 移除事件监听
-    window.removeEventListener('resize', handleResize);
+  // 移除事件监听
+  window.removeEventListener('resize', handleResize);
 
-    // 销毁图表实例
-    if (chartInstance) {
-        // 解绑数据点点击事件
-        chartInstance.off('click', handleDataPointClick);
-        chartInstance.dispose();
-        chartInstance = null;
-    }
+  // 销毁图表实例
+  if (chartInstance) {
+    // 解绑数据点点击事件
+    chartInstance.off('click', handleDataPointClick);
+    chartInstance.dispose();
+    chartInstance = null;
+  }
 });
 </script>
 
 <style lang="scss" scoped>
 .chart-wrapper {
-    width: 100%;
-    height: 231px;
+  width: 100%;
+  height: 231px;
+  min-height: 231px;
+  position: relative;
+  /* 为empty-overlay提供定位上下文 */
+
+  .water-temp-chart {
+    width: 100% !important;
+    height: 100% !important;
+    min-width: 100%;
     min-height: 231px;
-    position: relative;
-    /* 为empty-overlay提供定位上下文 */
+  }
 
-    .water-temp-chart {
-        width: 100% !important;
-        height: 100% !important;
-        min-width: 100%;
-        min-height: 231px;
-    }
-
-    .empty-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255);
-        z-index: 10;
-    }
+  .empty-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255);
+    z-index: 10;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue b/frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue
index d3836f4c..7aa7f981 100644
--- a/frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue
+++ b/frontend/src/modules/shuiWenNianNeiFenBu/TwoLayers/yaerAverage.vue
@@ -298,8 +298,12 @@ const handleExport = async () => {};
 const handleViewDetail = (record: any) => {
   modelStore.modalVisible = true;
   modelStore.params.sttp = 'WT';
-  modelStore.title = record.stnm ;
+  modelStore.title = record.stnm;
   modelStore.params.stcd = record.stcd;
+  modelStore.filter.rangeTm = [
+    dayjs(record.dt).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
+    dayjs(record.dt).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+  ];
 };
 
 // 关闭弹窗
diff --git a/frontend/src/modules/shuiWenNianNeiFenBu/index.vue b/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
index de788324..42ec49b6 100644
--- a/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
+++ b/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
@@ -1,540 +1,585 @@
 <template>
-    <SidePanelItem title="水温年内分布" :moreSelect="select" :datetimePicker="datetimePicker"
-        @update-values="handlePanelChange1">
-        <a-spin :spinning="loading" tip="加载中...">
-            <div v-show="!loading && showemit" class="water-temp-chart-container">
-                <div ref="chartRef" class="chart-wrapper"></div>
-            </div>
-            <div v-show="!loading && !showemit" class="water-temp-chart-container">
-                <a-empty description="暂无数据" />
-            </div>
-        </a-spin>
-    </SidePanelItem>
-
-    <!-- 数据点详情弹框 -->
-    <a-modal v-model:open="modalVisible" title="水温数据详情" :footer="null" width="1536px" @cancel="handleModalClose">
-        <YaerAverage :tm="`${datetimePicker.value}-${String(currentData.monthInt).padStart(2, '0')}-01 00:00:00`"
-            :dataDimensionVal="baseid" :stcd="select.value" />
-    </a-modal>
+  <SidePanelItem
+    title="水温年内分布"
+    :moreSelect="select"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <a-spin :spinning="loading" tip="加载中...">
+      <div v-show="!loading && showemit" class="water-temp-chart-container">
+        <div ref="chartRef" class="chart-wrapper"></div>
+      </div>
+      <div v-show="!loading && !showemit" class="water-temp-chart-container">
+        <a-empty description="暂无数据" />
+      </div>
+    </a-spin>
+  </SidePanelItem>
 
+  <!-- 数据点详情弹框 -->
+  <a-modal
+    v-model:open="modalVisible"
+    title="水温数据详情"
+    :footer="null"
+    width="1536px"
+    @cancel="handleModalClose"
+  >
+    <YaerAverage
+      :tm="`${datetimePicker.value}-${String(currentData.monthInt).padStart(
+        2,
+        '0'
+      )}-01 00:00:00`"
+      :dataDimensionVal="baseid"
+      :stcd="select.value"
+    />
+  </a-modal>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
-import * as echarts from 'echarts'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import * as echarts from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { getVmsstbprpt, yearListGetKendoListCust } from "@/api/sw";
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
-import YaerAverage from "./TwoLayers/yaerAverage.vue"
+import { getVmsstbprpt, yearListGetKendoListCust } from '@/api/sw';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import YaerAverage from './TwoLayers/yaerAverage.vue';
+
+import { MapClass } from '@/components/gis/map.class';
+
 const JidiSelectEventStore = useJidiSelectEventStore();
 // 水温年内分布数据（响应式）
-const waterTempData = ref<any[]>([])
-const loading = ref(false)
-const showemit = ref(true)
+const waterTempData = ref<any[]>([]);
+const loading = ref(false);
+const showemit = ref(true);
 // 弹框相关状态
-const modalVisible = ref(false)
-const currentData = ref<any>({})
+const modalVisible = ref(false);
+const currentData = ref<any>({});
 
-
-const chartRef = ref<HTMLElement | null>(null)
-let chartInstance: echarts.ECharts | null = null
+const chartRef = ref<HTMLElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
 // 选择器配置
 const select = ref({
-    show: true,
-    value: '',
-    options: [],
-    picker: undefined,
-    format: undefined,
+  show: true,
+  value: '',
+  options: [],
+  picker: undefined,
+  format: undefined
 });
 
 // 日期选择器配置
 const datetimePicker = ref({
-    show: true,
-    value: (() => {
-        const now = new Date();
-        const year = now.getFullYear();
-        return `${year}`;
-    })(),
-    format: "YYYY",
-    picker: "year" as const,
-    options: [],
+  show: true,
+  value: (() => {
+    const now = new Date();
+    const year = now.getFullYear();
+    return `${year}`;
+  })(),
+  format: 'YYYY',
+  picker: 'year' as const,
+  options: []
 });
 const transUnit = (value: number | null) => {
-    if (value === null) return null
-    return value
-}
+  if (value === null) return null;
+  return value;
+};
 
 const getUnitConfigByCode = (_code: string, _type: string) => {
-    return {
-        unit: '℃'
-    }
-}
+  return {
+    unit: '℃'
+  };
+};
 
 const getColorByCodeAndType = (_code: string[], _typeKey: string[]) => {
-    return ['#4b79ab', '#78c300']
-}
+  return ['#4b79ab', '#78c300'];
+};
 
 // 处理图表数据点点击事件
 const handleChartClick = (params: any) => {
-    if (!params || !String(params.dataIndex)) return
+  if (!params || !String(params.dataIndex)) return;
 
-    // 获取点击的数据点索引
-    const dataIndex = params.dataIndex
-    const dataItem = waterTempData.value[dataIndex]
+  // 获取点击的数据点索引
+  const dataIndex = params.dataIndex;
+  const dataItem = waterTempData.value[dataIndex];
 
-    if (dataItem) {
-        currentData.value = {
-            ...dataItem,
-            stnm: select.value.options.find((opt: any) =>
-                opt.children?.some((child: any) => child.value === select.value.value)
-            )?.children?.find((child: any) => child.value === select.value.value)?.title || '未知站点'
-        }
-        modalVisible.value = true
-    }
-}
+  if (dataItem) {
+    currentData.value = {
+      ...dataItem,
+      stnm:
+        select.value.options
+          .find((opt: any) =>
+            opt.children?.some(
+              (child: any) => child.value === select.value.value
+            )
+          )
+          ?.children?.find((child: any) => child.value === select.value.value)
+          ?.title || '未知站点'
+    };
+    modalVisible.value = true;
+  }
+};
 
 // 关闭弹框
 const handleModalClose = () => {
-    modalVisible.value = false
-    currentData.value = {}
-}
+  modalVisible.value = false;
+  currentData.value = {};
+};
 
 //下拉框数据选择
 const getselectData = async () => {
-    try {
-        const params = {
-            filter: {
-                logic: "and",
-                filters: [
-                    {
-                        field: "sttpFullPath",
-                        operator: "contains",
-                        value: "ENV,ENVM,WT,"
-                    },
-                    {
-                        field: "sttpCode",
-                        operator: "eq",
-                        value: "WTRV"
-                    },
-                    baseid.value !== 'all' ? {
-                        field: "baseId",
-                        operator: "contains",
-                        value: baseid.value
-                    } : null
-                ].filter(Boolean)
-            },
-            select: [
-                "stcd", "stnm", "lgtd", "lttd",
-                "baseId", "baseName", "siteStepSort"
-            ]
-        }
+  try {
+    const params = {
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: 'sttpFullPath',
+            operator: 'contains',
+            value: 'ENV,ENVM,WT,'
+          },
+          {
+            field: 'sttpCode',
+            operator: 'eq',
+            value: 'WTRV'
+          },
+          baseid.value !== 'all'
+            ? {
+                field: 'baseId',
+                operator: 'contains',
+                value: baseid.value
+              }
+            : null
+        ].filter(Boolean)
+      },
+      select: [
+        'stcd',
+        'stnm',
+        'lgtd',
+        'lttd',
+        'baseId',
+        'baseName',
+        'siteStepSort'
+      ]
+    };
 
-        const res = await getVmsstbprpt(params)
+    const res = await getVmsstbprpt(params);
 
-        // if (!res?.data?.length) {
-        //     select.value.options = []
-        //     return
-        // }
-        let data = res?.data?.date || res?.data || []
-        // 设置默认选中值（第一个站点的 stcd）
-        if (res.data) {
-            select.value.value = data?.data[0]?.stcd
-        } else {
-            select.value.value = ''
-        }
-        // 按 baseId 分组
-        const dataMapNameMap: Record<string, any[]> = {}
-        data.data.forEach((item: any) => {
-            const { baseId } = item
-            if (dataMapNameMap[baseId]) {
-                dataMapNameMap[baseId].push(item)
-            } else {
-                dataMapNameMap[baseId] = [item]
-            }
-        })
-
-        // 构建树形结构
-        const dataMapNameArr: any[] = []
-        const otherArr: any[] = []
-
-        Object.keys(dataMapNameMap).forEach((baseId: string) => {
-            const stations = dataMapNameMap[baseId]
-
-            const treeItem = {
-                title: stations[0]?.baseName,
-                value: baseId,
-                selectable: false,
-                children: stations
-                    .sort((a, b) => a.siteStepSort - b.siteStepSort)
-                    .map((station) => ({
-                        title: station.stnm,
-                        value: station.stcd,
-                        lgtd: station.lgtd,
-                        lttd: station.lttd
-                    }))
-            }
-
-            // 区分普通基地和 other 基地
-            if (+baseId) {
-                dataMapNameArr.push(treeItem)
-            } else if (baseId === 'other') {
-                otherArr.push(treeItem)
-            }
-        })
-
-        dataMapNameArr.sort((a, b) => {
-            const indexA = JidiSelectEventStore.jidiData.findIndex((item: any) => item.wbsCode === a.value)
-            const indexB = JidiSelectEventStore.jidiData.findIndex((item: any) => item.wbsCode === b.value)
-            return indexA - indexB
-        })
-
-        // 合并结果并设置选项
-        select.value.options = [...dataMapNameArr, ...otherArr]
-
-
-        // if (baseid.value == 'all') {
-        //     select.value.value = '008640202300001021'
-        // }
-        // else if (data.data.length > 0) {
-        //     select.value.value = data.data[0].stcd
-        // }
-        getshuiwenList()
-
-    } catch (error) {
-        console.error('获取站点数据失败:', error)
-        select.value.options = []
+    // if (!res?.data?.length) {
+    //     select.value.options = []
+    //     return
+    // }
+    let data = res?.data?.date || res?.data || [];
+    // 设置默认选中值（第一个站点的 stcd）
+    if (res.data) {
+      select.value.value = data?.data[0]?.stcd;
+    } else {
+      select.value.value = '';
     }
-}
+    // 按 baseId 分组
+    const dataMapNameMap: Record<string, any[]> = {};
+    data.data.forEach((item: any) => {
+      const { baseId } = item;
+      if (dataMapNameMap[baseId]) {
+        dataMapNameMap[baseId].push(item);
+      } else {
+        dataMapNameMap[baseId] = [item];
+      }
+    });
+
+    // 构建树形结构
+    const dataMapNameArr: any[] = [];
+    const otherArr: any[] = [];
+
+    Object.keys(dataMapNameMap).forEach((baseId: string) => {
+      const stations = dataMapNameMap[baseId];
+
+      const treeItem = {
+        title: stations[0]?.baseName,
+        value: baseId,
+        selectable: false,
+        children: stations
+          .sort((a, b) => a.siteStepSort - b.siteStepSort)
+          .map(station => ({
+            title: station.stnm,
+            value: station.stcd,
+            lgtd: station.lgtd,
+            lttd: station.lttd
+          }))
+      };
+
+      // 区分普通基地和 other 基地
+      if (+baseId) {
+        dataMapNameArr.push(treeItem);
+      } else if (baseId === 'other') {
+        otherArr.push(treeItem);
+      }
+    });
+
+    dataMapNameArr.sort((a, b) => {
+      const indexA = JidiSelectEventStore.jidiData.findIndex(
+        (item: any) => item.wbsCode === a.value
+      );
+      const indexB = JidiSelectEventStore.jidiData.findIndex(
+        (item: any) => item.wbsCode === b.value
+      );
+      return indexA - indexB;
+    });
+
+    // 合并结果并设置选项
+    select.value.options = [...dataMapNameArr, ...otherArr];
+
+    // if (baseid.value == 'all') {
+    //     select.value.value = '008640202300001021'
+    // }
+    // else if (data.data.length > 0) {
+    //     select.value.value = data.data[0].stcd
+    // }
+    getshuiwenList();
+  } catch (error) {
+    console.error('获取站点数据失败:', error);
+    select.value.options = [];
+  }
+};
 //水温年内分布
 const getshuiwenList = async () => {
-    if (loading.value) return; // 防止重复请求
-    if (!select.value.value) {
-        showemit.value = false
-        waterTempData.value = []
-        return;
-    }
-    loading.value = true;
+  if (loading.value) return; // 防止重复请求
+  if (!select.value.value) {
+    showemit.value = false;
+    waterTempData.value = [];
+    return;
+  }
+  loading.value = true;
 
-    const params = {
-        "filter": {
-            "logic": "and",
-            "filters": [
-                {
-                    "field": "stcd",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": select.value.value
-                },
-                {
-                    "field": "year",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": datetimePicker.value.value
-                }
-            ]
+  const params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'stcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: select.value.value
         },
-        "sort": [
-            {
-                "field": "month",
-                "dir": "asc"
-            }
-        ]
-    }
-
-    try {
-        let res = await yearListGetKendoListCust(params)
-        let data = res?.data?.data || res?.data || []
-
-        // 处理空数据情况
-        if (data.length === 0) {
-            showemit.value = false
-            waterTempData.value = []
-            return
+        {
+          field: 'year',
+          operator: 'eq',
+          dataType: 'string',
+          value: datetimePicker.value.value
         }
+      ]
+    },
+    sort: [
+      {
+        field: 'month',
+        dir: 'asc'
+      }
+    ]
+  };
 
-        showemit.value = true
+  try {
+    let res = await yearListGetKendoListCust(params);
+    let data = res?.data?.data || res?.data || [];
 
-        // 更新响应式数据
-        waterTempData.value = data
-
-        // 重新渲染图表
-        setTimeout(() => {
-            if (!chartInstance) {
-                initChart()
-            } else {
-                const option = getChartOption()
-                chartInstance.setOption(option, true)
-            }
-            // 强制重绘，确保尺寸正确
-            setTimeout(() => {
-                chartInstance?.resize()
-            }, 100)
-        }, 50)
-    } catch (error) {
-        console.error('获取水温数据失败:', error)
-        showemit.value = false
-        waterTempData.value = []
-    } finally {
-        loading.value = false;
+    // 处理空数据情况
+    if (data.length === 0) {
+      showemit.value = false;
+      waterTempData.value = [];
+      return;
     }
-}
+
+    showemit.value = true;
+
+    // 更新响应式数据
+    waterTempData.value = data;
+
+    // 重新渲染图表
+    setTimeout(() => {
+      if (!chartInstance) {
+        initChart();
+      } else {
+        const option = getChartOption();
+        chartInstance.setOption(option, true);
+      }
+      // 强制重绘，确保尺寸正确
+      setTimeout(() => {
+        chartInstance?.resize();
+      }, 100);
+    }, 50);
+  } catch (error) {
+    console.error('获取水温数据失败:', error);
+    showemit.value = false;
+    waterTempData.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
 
 const getChartOption = () => {
-    const { unit } = getUnitConfigByCode('Other', 'ACTUALTEMP')
-    const legendData = ['实测值', '天然']
-    const xData: string[] = []
-    const actualData: (number | null)[] = []
-    const naturalData: (number | null)[] = []
+  const { unit } = getUnitConfigByCode('Other', 'ACTUALTEMP');
+  const legendData = ['实测值', '天然'];
+  const xData: string[] = [];
+  const actualData: (number | null)[] = [];
+  const naturalData: (number | null)[] = [];
 
-    // 使用响应式数据waterTempData替代静态data
-    waterTempData.value.forEach((item: any) => {
-        xData.push(`${item.monthInt}月`)
-        actualData.push(item.actualTemp === null ? null : transUnit(item.actualTemp))
-        naturalData.push(item.naturalTemp === null ? null : transUnit(item.naturalTemp))
-    })
+  // 使用响应式数据waterTempData替代静态data
+  waterTempData.value.forEach((item: any) => {
+    xData.push(`${item.monthInt}月`);
+    actualData.push(
+      item.actualTemp === null ? null : transUnit(item.actualTemp)
+    );
+    naturalData.push(
+      item.naturalTemp === null ? null : transUnit(item.naturalTemp)
+    );
+  });
 
-    const code = ['Other']
-    const typeKey = ['ACTUALTEMP', 'NATURALTEMP']
-    const colors = getColorByCodeAndType(code, typeKey)
+  const code = ['Other'];
+  const typeKey = ['ACTUALTEMP', 'NATURALTEMP'];
+  const colors = getColorByCodeAndType(code, typeKey);
 
-    const options: any = {
-        color: colors,
-        tooltip: {
-            trigger: 'axis',
-            backgroundColor: 'rgba(51, 51, 51, 0.9)',
-            borderColor: 'transparent',
-            textStyle: {
-                color: '#ffffff',
-                fontSize: 14
-            },
-            formatter: function (params: any) {
-                if (!params || params.length === 0) return '';
-                let result = `<div style="font-weight: bold; margin-bottom: 8px;">${params[0].axisValue}</div>`;
-                params.forEach((item: any) => {
-                    result += `<div style="display: flex; align-items: center; margin: 4px 0;">`;
-                    result += `<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 8px;"></span>`;
-                    const displayValue = item.value !== null && item.value !== undefined ? item.value: '-';
-                    result += `<span>${item.seriesName}  ${displayValue}${unit}</span>`;
-                    result += `</div>`;
-                });
-                return result;
-            }
+  const options: any = {
+    color: colors,
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(51, 51, 51, 0.9)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#ffffff',
+        fontSize: 14
+      },
+      formatter: function (params: any) {
+        if (!params || params.length === 0) return '';
+        let result = `<div style="font-weight: bold; margin-bottom: 8px;">${params[0].axisValue}</div>`;
+        params.forEach((item: any) => {
+          result += `<div style="display: flex; align-items: center; margin: 4px 0;">`;
+          result += `<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${item.color}; margin-right: 8px;"></span>`;
+          const displayValue =
+            item.value !== null && item.value !== undefined ? item.value : '-';
+          result += `<span>${item.seriesName}  ${displayValue}${unit}</span>`;
+          result += `</div>`;
+        });
+        return result;
+      }
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 100,
+        xAxisIndex: [0],
+        filterMode: 'filter',
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: false,
+        moveOnMouseWheel: false
+      }
+    ],
+    xAxis: {
+      type: 'category',
+      boundaryGap: true,
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: '#007aff1a'
+        }
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#8f8f8f'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#bfbfbf',
+          type: 'solid'
+        }
+      },
+      axisLabel: {
+        interval: 0,
+        color: '#000000',
+        fontSize: 12,
+        rotate: 0,
+        margin: 8,
+        align: 'center'
+      },
+      data: xData
+    },
+    yAxis: [
+      {
+        name: '水温(℃)',
+        type: 'value',
+        splitNumber: 5,
+        nameTextStyle: {
+          fontSize: 12,
+          color: '#000000'
         },
-        dataZoom: [
-            {
-                type: 'inside',
-                start: 0,
-                end: 100,
-                xAxisIndex: [0],
-                filterMode: 'filter',
-                zoomOnMouseWheel: true,
-                moveOnMouseMove: false,
-                moveOnMouseWheel: false
-            }
-        ],
-        xAxis: {
-            type: 'category',
-            boundaryGap: true,
-            axisPointer: {
-                type: 'shadow',
-                shadowStyle: {
-                    color: '#007aff1a'
-                }
-            },
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: '#8f8f8f'
-                }
-            },
-            axisTick: {
-                show: false
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: '#bfbfbf',
-                    type: 'solid'
-                }
-            },
-            axisLabel: {
-                interval: 0,
-                color: '#000000',
-                fontSize: 12,
-                rotate: 0,
-                margin: 8,
-                align: 'center'
-            },
-            data: xData
+        lineStyle: {
+          color: '#6ca4f7',
+          width: 2
         },
-        yAxis: [
-            {
-                name: '水温(℃)',
-                type: 'value',
-                splitNumber: 5,
-                nameTextStyle: {
-                    fontSize: 12,
-                    color: '#000000'
-                },
-                lineStyle: {
-                    color: '#6ca4f7',
-                    width: 2
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#000000'
-                    }
-                },
-                axisTick: {
-                    show: true,
-                    length: 3,
-                    lineStyle: {
-                        color: '#000000'
-                    }
-                },
-                axisLabel: {
-                    color: '#333',
-                    fontSize: 12
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#bfbfbf',
-                        type: 'solid'
-                    }
-                }
-            }
-        ],
-        legend: {
-            data: legendData
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#000000'
+          }
         },
-        grid: {
-            top: 30,
-            bottom: 50,
-            right: 15,
-            left: 30
+        axisTick: {
+          show: true,
+          length: 3,
+          lineStyle: {
+            color: '#000000'
+          }
         },
-        series: [
-            {
-                name: legendData[0],
-                data: actualData,
-                connectNulls: true,
-                smooth: true,
-                type: 'line',
-                itemStyle: {
-                    color: colors[0]
-                }
-            },
-            {
-                name: legendData[1],
-                data: naturalData,
-                connectNulls: true,
-                smooth: true,
-                type: 'line',
-                itemStyle: {
-                    color: colors[1]
-                }
-            }
-        ]
-    }
+        axisLabel: {
+          color: '#333',
+          fontSize: 12
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#bfbfbf',
+            type: 'solid'
+          }
+        }
+      }
+    ],
+    legend: {
+      data: legendData
+    },
+    grid: {
+      top: 30,
+      bottom: 50,
+      right: 15,
+      left: 30
+    },
+    series: [
+      {
+        name: legendData[0],
+        data: actualData,
+        connectNulls: true,
+        smooth: true,
+        type: 'line',
+        itemStyle: {
+          color: colors[0]
+        }
+      },
+      {
+        name: legendData[1],
+        data: naturalData,
+        connectNulls: true,
+        smooth: true,
+        type: 'line',
+        itemStyle: {
+          color: colors[1]
+        }
+      }
+    ]
+  };
 
-    return options
-}
+  return options;
+};
 
 const initChart = async () => {
-    // 延迟初始化，确保容器已完成渲染
-    await new Promise(resolve => setTimeout(resolve, 100))
+  // 延迟初始化，确保容器已完成渲染
+  await new Promise(resolve => setTimeout(resolve, 100));
 
-    if (!chartRef.value) {
-        console.error('图表容器未找到')
-        return
+  if (!chartRef.value) {
+    console.error('图表容器未找到');
+    return;
+  }
+
+  try {
+    if (!chartInstance) {
+      chartInstance = echarts.init(chartRef.value);
     }
 
-    try {
-        if (!chartInstance) {
-            chartInstance = echarts.init(chartRef.value)
-        }
+    const option = getChartOption();
+    chartInstance.setOption(option, false);
 
-        const option = getChartOption()
-        chartInstance.setOption(option, false)
+    // 添加点击事件监听
+    chartInstance.off('click');
+    chartInstance.on('click', handleChartClick);
 
-        // 添加点击事件监听
-        chartInstance.off('click')
-        chartInstance.on('click', handleChartClick)
+    // 强制重绘，确保图表尺寸正确
+    setTimeout(() => {
+      chartInstance?.resize();
+    }, 100);
 
-        // 强制重绘，确保图表尺寸正确
-        setTimeout(() => {
-            chartInstance?.resize()
-        }, 100)
-
-        window.addEventListener('resize', handleResize)
-    } catch (error) {
-        console.error('图表初始化失败:', error)
-    }
-}
+    window.addEventListener('resize', handleResize);
+  } catch (error) {
+    console.error('图表初始化失败:', error);
+  }
+};
 
 const handleResize = () => {
-    if (chartInstance) {
-        chartInstance.resize()
-    }
-}
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
 
 onMounted(() => {
-    // 初始化图表
-    initChart()
-    // 加载初始数据
-    // if (select.value.value) {
-    //     getshuiwenList()
-    // }
-})
+  // 初始化图表
+  initChart();
+  // 加载初始数据
+  // if (select.value.value) {
+  //     getshuiwenList()
+  // }
+});
 
 onBeforeUnmount(() => {
-    window.removeEventListener('resize', handleResize)
-    if (chartInstance) {
-        chartInstance.dispose()
-        chartInstance = null
-    }
-})
+  window.removeEventListener('resize', handleResize);
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+});
 //监听子组件的数据变化
-const handlePanelChange1 = (data) => {
-    console.log('当前所有控件状态:', data);
-
-    // 当选择器或日期变化时，重新加载图表数据
-    if (data.moreSelect || data.datetime) {
-        select.value.value = data.moreSelect
-        datetimePicker.value.value = data.datetime
-        //  debugger
-        getshuiwenList()
-    }
-}
-const baseid = ref('')
+const handlePanelChange1 = (data: any, type: string) => {
+  console.log('当前所有控件状态:', data);
+  if (type == 'click') {
+    const mapClass = MapClass.getInstance();
+    mapClass.flyTopanto(
+      [
+        Number(data.selectedNodeExtra.lgtd),
+        Number(data.selectedNodeExtra.lttd)
+      ],
+      15
+    );
+  }
+  // 当选择器或日期变化时，重新加载图表数据
+  if (data.moreSelect || data.datetime) {
+    select.value.value = data.moreSelect;
+    datetimePicker.value.value = data.datetime;
+    //  debugger
+    getshuiwenList();
+  }
+};
+const baseid = ref('');
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        baseid.value = newVal.wbsCode;
-        getselectData()
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    baseid.value = newVal.wbsCode;
+    getselectData();
+  },
+  { deep: true, immediate: true }
 );
-
 </script>
 
 <style scoped>
 .water-temp-chart-container {
-    width: 100%;
-    height: 290px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 100%;
+  height: 290px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .chart-wrapper {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 :deep(.ant-spin-nested-loading) {
-    height: 290px !important;
+  height: 290px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/modules/waterQuality/index.vue b/frontend/src/modules/waterQuality/index.vue
index 02a4141c..ba62cf76 100644
--- a/frontend/src/modules/waterQuality/index.vue
+++ b/frontend/src/modules/waterQuality/index.vue
@@ -1,19 +1,24 @@
 <!-- SidePanelItem.vue -->
 
 <template>
-    <SidePanelItem title="沿程水质变化" :iconmap="iconmap" :select="select" :datetimePicker="datetimePicker"
-        @update-values="handlePanelChange1">
-        <div class="chart-wrapper">
-            <a-spin :spinning="loading">
-                <!-- 始终渲染图表容器，确保有固定宽高 -->
-                <div ref="chartRef" class="chart-container"></div>
-                <!-- 无数据时显示Empty，但不影响容器尺寸 -->
-                <div v-if="!loading && !hasData" class="empty-overlay">
-                    <a-empty description="暂无数据" />
-                </div>
-            </a-spin>
+  <SidePanelItem
+    title="沿程水质变化"
+    :iconmap="iconmap"
+    :select="select"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
+    <div class="chart-wrapper">
+      <a-spin :spinning="loading">
+        <!-- 始终渲染图表容器，确保有固定宽高 -->
+        <div ref="chartRef" class="chart-container"></div>
+        <!-- 无数据时显示Empty，但不影响容器尺寸 -->
+        <div v-if="!loading && !hasData" class="empty-overlay">
+          <a-empty description="暂无数据" />
         </div>
-    </SidePanelItem>
+      </a-spin>
+    </div>
+  </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
@@ -21,21 +26,24 @@ import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import * as echarts from 'echarts';
 import type { EChartsOption } from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-import { qgcGetKendoListCust, wbsbGetKendoList } from '@/api/sz'
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
-import { useModelStore } from "@/store/modules/model";
-import { WATER_QUALITY_INDICATORS, type WaterQualityIndicator } from '@/modules/waterQuality/padig';
+import { qgcGetKendoListCust, wbsbGetKendoList } from '@/api/sz';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
+import { useModelStore } from '@/store/modules/model';
+import {
+  WATER_QUALITY_INDICATORS,
+  type WaterQualityIndicator
+} from '@/modules/waterQuality/padig';
 const indicators = WATER_QUALITY_INDICATORS;
 // 定义组件名（便于调试和递归）
 defineOptions({
-    name: 'waterQuality'
+  name: 'waterQuality'
 });
 const modelStore = useModelStore();
 const JidiSelectEventStore = useJidiSelectEventStore();
 const iconmap = ref({
-    show: true,
-    value: '',
-    icon: 'iconfont icon-time',
+  show: true,
+  value: '',
+  icon: 'iconfont icon-time'
 });
 // ==================== 响应式数据 ====================
 const chartRef = ref<HTMLElement | null>(null);
@@ -47,1190 +55,1269 @@ const hasData = ref(true); // 初始化为 true，因为 initChart 会使用 moc
 
 // 获取当天早上8:00的时间
 const now = new Date();
-const todayAtEightAM = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0);
-const defaultValue = `${todayAtEightAM.getFullYear()}-${String(todayAtEightAM.getMonth() + 1).padStart(2, '0')}-${String(todayAtEightAM.getDate()).padStart(2, '0')} ${String(todayAtEightAM.getHours()).padStart(2, '0')}:00`;
+const todayAtEightAM = new Date(
+  now.getFullYear(),
+  now.getMonth(),
+  now.getDate(),
+  8,
+  0,
+  0
+);
+const defaultValue = `${todayAtEightAM.getFullYear()}-${String(
+  todayAtEightAM.getMonth() + 1
+).padStart(2, '0')}-${String(todayAtEightAM.getDate()).padStart(
+  2,
+  '0'
+)} ${String(todayAtEightAM.getHours()).padStart(2, '0')}:00`;
 // 👆 注意这里分钟固定为 :00，与 timeFormat: 'HH' 配置保持一致
 
 const datetimePicker = ref({
-    show: true,
-    value: defaultValue,
-    format: 'YYYY-MM-DD HH:mm',      // 显示格式：包含分钟
-    picker: 'date',
-    timeFormat: 'HH',                // 新增：选择格式：只选择小时
-    options: []
+  show: true,
+  value: defaultValue,
+  format: 'YYYY-MM-DD HH:mm', // 显示格式：包含分钟
+  picker: 'date',
+  timeFormat: 'HH', // 新增：选择格式：只选择小时
+  options: []
 });
 const select = ref({
-    show: true,
-    value: '',
-    options: [],
-    picker: undefined,
-    format: undefined,
+  show: true,
+  value: '',
+  options: [],
+  picker: undefined,
+  format: undefined
 });
 
 // ==================== 可见系列队列（最多2个）====================
 const visibleSeriesQueue = ref<string[]>([]);
 
 // ==================== 动态指标配置 ====================
-const indicatorConfig = ref<Array<{ key: string; name: string; unit: string; color: string; sort: number }>>([]);
+const indicatorConfig = ref<
+  Array<{
+    key: string;
+    name: string;
+    unit: string;
+    color: string;
+    sort: number;
+  }>
+>([]);
 
 // ==================== HSL 随机颜色生成 ====================
 const generateRandomColor = (index: number): string => {
-    // 使用黄金角度确保颜色均匀分布
-    const goldenAngle = 137.508;
-    const hue = (index * goldenAngle) % 360;
-    
-    // 饱和度控制在 45%-65% 之间
-    const saturation = 45 + Math.random() * 20;
-    
-    // 亮度控制在 45%-60% 之间，避免太亮或太暗
-    const lightness = 45 + Math.random() * 15;
-    
-    // HSL 转 RGB
-    const c = (1 - Math.abs(2 * lightness / 100 - 1)) * saturation / 100;
-    const x = c * (1 - Math.abs((hue / 60) % 2 - 1));
-    const m = lightness / 100 - c / 2;
-    
-    let r = 0, g = 0, b = 0;
-    
-    if (hue < 60) {
-        [r, g, b] = [c, x, 0];
-    } else if (hue < 120) {
-        [r, g, b] = [x, c, 0];
-    } else if (hue < 180) {
-        [r, g, b] = [0, c, x];
-    } else if (hue < 240) {
-        [r, g, b] = [0, x, c];
-    } else if (hue < 300) {
-        [r, g, b] = [x, 0, c];
-    } else {
-        [r, g, b] = [c, 0, x];
-    }
-    
-    const toHex = (value: number) => {
-        const hex = Math.round((value + m) * 255).toString(16);
-        return hex.length === 1 ? '0' + hex : hex;
-    };
-    
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  // 使用黄金角度确保颜色均匀分布
+  const goldenAngle = 137.508;
+  const hue = (index * goldenAngle) % 360;
+
+  // 饱和度控制在 45%-65% 之间
+  const saturation = 45 + Math.random() * 20;
+
+  // 亮度控制在 45%-60% 之间，避免太亮或太暗
+  const lightness = 45 + Math.random() * 15;
+
+  // HSL 转 RGB
+  const c = ((1 - Math.abs((2 * lightness) / 100 - 1)) * saturation) / 100;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = lightness / 100 - c / 2;
+
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (hue < 60) {
+    [r, g, b] = [c, x, 0];
+  } else if (hue < 120) {
+    [r, g, b] = [x, c, 0];
+  } else if (hue < 180) {
+    [r, g, b] = [0, c, x];
+  } else if (hue < 240) {
+    [r, g, b] = [0, x, c];
+  } else if (hue < 300) {
+    [r, g, b] = [x, 0, c];
+  } else {
+    [r, g, b] = [c, 0, x];
+  }
+
+  const toHex = (value: number) => {
+    const hex = Math.round((value + m) * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 };
 
 // ==================== 动态指标筛选和配置生成 ====================
 const generateIndicatorConfig = (data: StationData[]) => {
-    if (!data || data.length === 0) {
-        indicatorConfig.value = [];
-        return;
-    }
+  if (!data || data.length === 0) {
+    indicatorConfig.value = [];
+    return;
+  }
 
-    // 定义需要排除的元数据字段
-    const excludeKeys = new Set([
-        'stcd', 'stcd2', 'stnm', 'rstcd', 'sttp', 'tm', 'SORT', 
-        'limits', 'minTm', 'wwqtg', 'wqgrd', 'wqgrdName', 'min', 'max',
-        '_tls', 'id', 'recordUser', 'recordTime', 'modifyTime', 
-        'displayRecordUser', 'departmentId', 'displayDepartment'
-    ]);
+  // 定义需要排除的元数据字段
+  const excludeKeys = new Set([
+    'stcd',
+    'stcd2',
+    'stnm',
+    'rstcd',
+    'sttp',
+    'tm',
+    'SORT',
+    'limits',
+    'minTm',
+    'wwqtg',
+    'wqgrd',
+    'wqgrdName',
+    'min',
+    'max',
+    '_tls',
+    'id',
+    'recordUser',
+    'recordTime',
+    'modifyTime',
+    'displayRecordUser',
+    'departmentId',
+    'displayDepartment'
+  ]);
 
-    // 收集所有有效指标的 key
-    const validKeysSet = new Set<string>();
-    
-    data.forEach(station => {
-        Object.keys(station).forEach(key => {
-            // 跳过排除字段
-            if (excludeKeys.has(key)) return;
-            
-            const value = station[key as keyof typeof station];
-            
-            // 检查是否为有效数值（不为 null 且不是 NaN）
-            if (value !== null && value !== undefined && typeof value === 'number' && !isNaN(value)) {
-                // 在 indicators 中查找匹配的项（小写比较）
-                const matchedIndicator = indicators.find(ind => ind.key.toLowerCase() === key.toLowerCase());
-                if (matchedIndicator) {
-                    validKeysSet.add(matchedIndicator.key);
-                }
-            }
-        });
+  // 收集所有有效指标的 key
+  const validKeysSet = new Set<string>();
+
+  data.forEach(station => {
+    Object.keys(station).forEach(key => {
+      // 跳过排除字段
+      if (excludeKeys.has(key)) return;
+
+      const value = station[key as keyof typeof station];
+
+      // 检查是否为有效数值（不为 null 且不是 NaN）
+      if (
+        value !== null &&
+        value !== undefined &&
+        typeof value === 'number' &&
+        !isNaN(value)
+      ) {
+        // 在 indicators 中查找匹配的项（小写比较）
+        const matchedIndicator = indicators.find(
+          ind => ind.key.toLowerCase() === key.toLowerCase()
+        );
+        if (matchedIndicator) {
+          validKeysSet.add(matchedIndicator.key);
+        }
+      }
     });
+  });
 
-    // 如果没有有效指标，返回空数组
-    if (validKeysSet.size === 0) {
-        indicatorConfig.value = [];
-        return;
-    }
+  // 如果没有有效指标，返回空数组
+  if (validKeysSet.size === 0) {
+    indicatorConfig.value = [];
+    return;
+  }
 
-    // 根据 indicators 中的 sort 排序，并生成配置
-    const validIndicators = indicators
-        .filter(ind => validKeysSet.has(ind.key))
-        .sort((a, b) => a.sort - b.sort);
+  // 根据 indicators 中的 sort 排序，并生成配置
+  const validIndicators = indicators
+    .filter(ind => validKeysSet.has(ind.key))
+    .sort((a, b) => a.sort - b.sort);
 
-    // 生成最终配置
-    indicatorConfig.value = validIndicators.map((ind, index) => ({
-        key: ind.key,
-        name: ind.name,
-        unit: ind.description || '',
-        color: generateRandomColor(index),
-        sort: ind.sort
-    }));
+  // 生成最终配置
+  indicatorConfig.value = validIndicators.map((ind, index) => ({
+    key: ind.key,
+    name: ind.name,
+    unit: ind.description || '',
+    color: generateRandomColor(index),
+    sort: ind.sort
+  }));
 
-    console.log('动态生成指标配置:', indicatorConfig.value);
+  console.log('动态生成指标配置:', indicatorConfig.value);
 };
 
 // ==================== 模拟数据 ====================
 const generateMockData = () => {
-    const stations = [
-        { stnm: '两河口', stcd: 'ST001', type: '0' },
-        { stnm: '锦屏一级', stcd: 'ST002', type: '1' },
-        { stnm: '桐子林', stcd: 'ST003', type: '0' },
-        { stnm: '溪洛渡', stcd: 'ST004', type: '0' },
-        { stnm: '向家坝', stcd: 'ST005', type: '1' },
-        { stnm: '三峡', stcd: 'ST006', type: '0' },
-        { stnm: '葛洲坝', stcd: 'ST007', type: '0' }
-    ];
+  const stations = [
+    { stnm: '两河口', stcd: 'ST001', type: '0' },
+    { stnm: '锦屏一级', stcd: 'ST002', type: '1' },
+    { stnm: '桐子林', stcd: 'ST003', type: '0' },
+    { stnm: '溪洛渡', stcd: 'ST004', type: '0' },
+    { stnm: '向家坝', stcd: 'ST005', type: '1' },
+    { stnm: '三峡', stcd: 'ST006', type: '0' },
+    { stnm: '葛洲坝', stcd: 'ST007', type: '0' }
+  ];
 
-    const tm = '2024-01-15 08:00:00';
+  const tm = '2024-01-15 08:00:00';
 
-    // 模拟限值数据
-    const mockLimits = {
-        ph: { min: 6, max: 9 },
-        dox: { min: 6 },
-        codmn: { max: 4 },
-        nh3n: { max: 0.5 },
-        tp: { max: 0.1 },
-        tn: { max: 1.0 }
-    };
+  // 模拟限值数据
+  const mockLimits = {
+    ph: { min: 6, max: 9 },
+    dox: { min: 6 },
+    codmn: { max: 4 },
+    nh3n: { max: 0.5 },
+    tp: { max: 0.1 },
+    tn: { max: 1.0 }
+  };
 
-    return stations.map((station, index) => ({
-        ...station,
-        tm,
-        SORT: index + 1,
-        ph: 7.2 + Math.random() * 0.8,
-        dox: 6.5 + Math.random() * 2.5,
-        codmn: 1.5 + Math.random() * 2.0,
-        nh3n: 0.15 + Math.random() * 0.35,
-        tp: 0.05 + Math.random() * 0.15,
-        tn: 0.8 + Math.random() * 1.2,
-        limits: mockLimits  // 新增：存储该站点的所有限值
-    }));
+  return stations.map((station, index) => ({
+    ...station,
+    tm,
+    SORT: index + 1,
+    ph: 7.2 + Math.random() * 0.8,
+    dox: 6.5 + Math.random() * 2.5,
+    codmn: 1.5 + Math.random() * 2.0,
+    nh3n: 0.15 + Math.random() * 0.35,
+    tp: 0.05 + Math.random() * 0.15,
+    tn: 0.8 + Math.random() * 1.2,
+    limits: mockLimits // 新增：存储该站点的所有限值
+  }));
 };
 
 // 定义数据类型接口
 interface StationData {
-    stnm: string;
-    stcd: string;
-    type: string;
-    tm: string;
-    SORT: number;
-    // 所有水质指标字段（动态）
-    ph?: number | null;
-    dox?: number | null;
-    codmn?: number | null;
-    codcr?: number | null;
-    bod5?: number | null;
-    nh3n?: number | null;
-    tp?: number | null;
-    tn?: number | null;
-    cu?: number | null;
-    zn?: number | null;
-    f?: number | null;
-    se?: number | null;
-    ars?: number | null;
-    hg?: number | null;
-    cd?: number | null;
-    cr6?: number | null;
-    pb?: number | null;
-    cn?: number | null;
-    vlph?: number | null;
-    oil?: number | null;
-    las?: number | null;
-    s2?: number | null;
-    fcg?: number | null;
-    cl?: number | null;
-    so4?: number | null;
-    no3?: number | null;
-    thrd?: number | null;
-    cond?: number | null;
-    fe?: number | null;
-    mn?: number | null;
-    al?: number | null;
-    chla?: number | null;
-    clarity?: number | null;
-    tu?: number | null;
-    wtmp?: number | null;
-    limits: Record<string, { min?: number; max?: number }>;
-    [key: string]: any; // 允许任意水质指标字段
+  stnm: string;
+  stcd: string;
+  type: string;
+  tm: string;
+  SORT: number;
+  // 所有水质指标字段（动态）
+  ph?: number | null;
+  dox?: number | null;
+  codmn?: number | null;
+  codcr?: number | null;
+  bod5?: number | null;
+  nh3n?: number | null;
+  tp?: number | null;
+  tn?: number | null;
+  cu?: number | null;
+  zn?: number | null;
+  f?: number | null;
+  se?: number | null;
+  ars?: number | null;
+  hg?: number | null;
+  cd?: number | null;
+  cr6?: number | null;
+  pb?: number | null;
+  cn?: number | null;
+  vlph?: number | null;
+  oil?: number | null;
+  las?: number | null;
+  s2?: number | null;
+  fcg?: number | null;
+  cl?: number | null;
+  so4?: number | null;
+  no3?: number | null;
+  thrd?: number | null;
+  cond?: number | null;
+  fe?: number | null;
+  mn?: number | null;
+  al?: number | null;
+  chla?: number | null;
+  clarity?: number | null;
+  tu?: number | null;
+  wtmp?: number | null;
+  limits: Record<string, { min?: number; max?: number }>;
+  [key: string]: any; // 允许任意水质指标字段
 }
 
 const mockData = ref<StationData[]>([]);
 
 // ==================== 图表配置生成 ====================
 const getChartOption = (): EChartsOption => {
-    const data = mockData.value;
+  const data = mockData.value;
 
-    if (!data || data.length === 0 || indicatorConfig.value.length === 0) {
-        return {};
+  if (!data || data.length === 0 || indicatorConfig.value.length === 0) {
+    return {};
+  }
+
+  // X轴数据（站点名称）
+  const xData = data.map((item, index) => {
+    // 去除站点名称中的"出库水质监测站"或"坝上水质监测站"后缀
+    let stnm = item.stnm || '-';
+    if (stnm.includes('出库水质监测站')) {
+      stnm = stnm.replace('出库水质监测站', '');
+    } else if (stnm.includes('坝上水质监测站')) {
+      stnm = stnm.replace('坝上水质监测站', '');
     }
 
-    // X轴数据（站点名称）
-    const xData = data.map((item, index) => {
-        // 去除站点名称中的"出库水质监测站"或"坝上水质监测站"后缀
-        let stnm = item.stnm || '-';
-        if (stnm.includes('出库水质监测站')) {
-            stnm = stnm.replace('出库水质监测站', '');
-        } else if (stnm.includes('坝上水质监测站')) {
-            stnm = stnm.replace('坝上水质监测站', '');
-        }
-
-        return {
-            value: stnm,
-            textStyle: {
-                padding: index % 2 !== 0 ? [16, 0, 0, 0] : 0
-            }
-        };
-    });
-
-    // 电站标记线数据
-    const markLineData: any[] = [];
-    data.forEach((item, index) => {
-        if (item.type === '1') {
-            markLineData.push({ xAxis: index });
-        }
-    });
-
-    // 图例数据
-    const legendData = indicatorConfig.value.map(item => item.name);
-
-    // 根据可见队列构建选中状态
-    const selectedState: Record<string, boolean> = {};
-    indicatorConfig.value.forEach(config => {
-        selectedState[config.name] = visibleSeriesQueue.value.includes(config.name);
-    });
-
-    // Series 数据
-    const seriesData = indicatorConfig.value.map((config, index) => {
-        const _key = config.key === 'dox' ? 'do' : config.key;
-        return {
-            name: config.name,
-            type: 'line' as const,
-            yAxisIndex: index,
-            smooth: true,
-            connectNulls: true,
-            symbol: 'circle' as const,
-            symbolSize: 6,
-            itemStyle: {
-                color: config.color
-            },
-            data: data.map(item => {
-                const value = item[config.key as keyof typeof item];
-                return typeof value === 'number' && !isNaN(value) ? value : null;
-            }),
-            markLine: index === 0 ? {
-                symbol: ['none', 'none'],
-                label: { show: false },
-                lineStyle: {
-                    color: '#ccc',
-                    type: 'dashed' as const
-                },
-                data: markLineData
-            } : undefined
-        };
-    });
-
-    // 计算每个Y轴的数据范围（用于自适应，使用整数）
-    const calculateYAxisRange = (configIndex: number) => {
-        if (!selectedState[indicatorConfig.value[configIndex].name]) {
-            return null;
-        }
-
-        const values = data
-            .map(item => item[indicatorConfig.value[configIndex].key as keyof typeof item])
-            .filter((val): val is number => typeof val === 'number' && !isNaN(val));
-
-        if (values.length === 0) {
-            return { min: 0, max: 10 };
-        }
-
-        const min = Math.min(...values);
-        const max = Math.max(...values);
-
-        // Y轴使用整数：向下取整-1，向上取整+1
-        return {
-            min: Math.floor(min) - 1,
-            max: Math.ceil(max) + 1
-        };
+    return {
+      value: stnm,
+      textStyle: {
+        padding: index % 2 !== 0 ? [16, 0, 0, 0] : 0
+      }
     };
+  });
 
-    // Y轴配置（左1右1原则，最多显示2个Y轴）
-    const yAxisData = indicatorConfig.value.map((config, index) => {
-        const isShow = selectedState[config.name];
-        
-        // 如果不显示，直接返回隐藏配置
-        if (!isShow) {
-            return {
-                type: 'value' as const,
-                name: config.name,
-                show: false
-            };
-        }
+  // 电站标记线数据
+  const markLineData: any[] = [];
+  data.forEach((item, index) => {
+    if (item.type === '1') {
+      markLineData.push({ xAxis: index });
+    }
+  });
 
-        // 计算当前是第几个显示的Y轴
-        let displayIndex = 0;
-        for (let i = 0; i < index; i++) {
-            if (selectedState[indicatorConfig.value[i].name]) {
-                displayIndex++;
+  // 图例数据
+  const legendData = indicatorConfig.value.map(item => item.name);
+
+  // 根据可见队列构建选中状态
+  const selectedState: Record<string, boolean> = {};
+  indicatorConfig.value.forEach(config => {
+    selectedState[config.name] = visibleSeriesQueue.value.includes(config.name);
+  });
+
+  // Series 数据
+  const seriesData = indicatorConfig.value.map((config, index) => {
+    const _key = config.key === 'dox' ? 'do' : config.key;
+    return {
+      name: config.name,
+      type: 'line' as const,
+      yAxisIndex: index,
+      smooth: true,
+      connectNulls: true,
+      symbol: 'circle' as const,
+      symbolSize: 6,
+      itemStyle: {
+        color: config.color
+      },
+      data: data.map(item => {
+        const value = item[config.key as keyof typeof item];
+        return typeof value === 'number' && !isNaN(value) ? value : null;
+      }),
+      markLine:
+        index === 0
+          ? {
+              symbol: ['none', 'none'],
+              label: { show: false },
+              lineStyle: {
+                color: '#ccc',
+                type: 'dashed' as const
+              },
+              data: markLineData
             }
-        }
-
-        // 最多只显示2个Y轴（索引0和1）
-        if (displayIndex >= 2) {
-            return {
-                type: 'value' as const,
-                name: config.name,
-                show: false
-            };
-        }
-
-        const isLeft = displayIndex === 0;
-        const offset = displayIndex === 1 ? 0 : 0;
-        const range = calculateYAxisRange(index);
-
-        return {
-            type: 'value' as const,
-            name: config.name,
-            position: isLeft ? ('left' as const) : ('right' as const),
-            offset,
-            min: range ? range.min : undefined,
-            max: range ? range.max : undefined,
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: config.color
-                }
-            },
-            axisLabel: {
-                color: config.color,
-                formatter: (value: number) => {
-                    // Y轴刻度使用整数显示
-                    return Math.round(value).toString();
-                }
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: '#e0e0e0',
-                    type: 'solid' as const
-                }
-            },
-            show: true
-        };
-    });
-
-    const option: EChartsOption = {
-        tooltip: {
-            trigger: 'axis',
-            confine: true,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            borderColor: 'transparent',
-            textStyle: {
-                color: '#ffffff'
-            },
-            formatter: (params: any) => {
-                if (!params || params.length === 0) return '';
-
-                // 在最上面显示用户选择的时间
-                let result = `<div style="font-weight: bold; margin-bottom: 8px;">${datetimePicker.value.value}</div>`;
-
-                const tm = data.find(item => item.stnm === params[0].name)?.tm;
-                result += `${params[0].name}<br/>`;
-
-                // 判断是否只显示一个系列
-                const showOnlyOneSeries = visibleSeriesQueue.value.length === 1;
-
-                params.forEach((param: any) => {
-                    const config = indicatorConfig.value.find(c => c.name === param.seriesName);
-                    const unit = config?.unit || '';
-
-                    if (param.value !== null && param.value !== undefined) {
-                        // 折线数据保留一位小数
-                        const numValue = Number(param.value);
-                        let displayValue = param.value;
-
-                        if (!isNaN(numValue)) {
-                            displayValue = numValue.toFixed(1);
-                        }
-
-                        result += `${param.marker}${param.seriesName}：${displayValue}${unit}`;
-
-                        // 如果只显示一个系列，且该指标有限值，则显示限值
-                        if (showOnlyOneSeries && config) {
-                            // 从 data 中获取当前站点的限值
-                            const stationData = data.find(item => item.stnm === param.name);
-                            if (stationData && stationData.limits) {
-                                const limitKey = config.key; // 如 'ph', 'dox'
-                                const limits = stationData.limits[limitKey];
-                                
-                                if (limits) {
-                                    // 构建限值显示字符串
-                                    let limitText = '';
-                                    const unit = config.unit || ''; // 获取单位
-                                    
-                                    if (limits.min !== undefined && limits.max !== undefined) {
-                                        // 既有上限又有下限
-                                        limitText = `&nbsp;&nbsp;&nbsp;&nbsp;限值: ${limits.min}-${limits.max}${unit ? unit : ''}`;
-                                    } else if (limits.min !== undefined) {
-                                        // 只有下限
-                                        limitText = `&nbsp;&nbsp;&nbsp;&nbsp;限值: ${limits.min}${unit ? unit : ''}`;
-                                    } else if (limits.max !== undefined) {
-                                        // 只有上限
-                                        limitText = `&nbsp;&nbsp;&nbsp;&nbsp;限值: ${limits.max}${unit ? unit : ''}`;
-                                    }
-                                    
-                                    result += ('<br/>'+limitText);
-                                }
-                            }
-                        }
-
-                        result += '<br/>';
-                    }
-                });
-
-                return result;
-            }
-        },
-        legend: {
-            type: 'scroll',
-            top: 0,
-            right: 10, // 右侧留白，避免箭头按钮被遮挡
-            data: legendData,
-            selected: selectedState,
-            inactiveColor: '#ccc',
-            itemWidth: 16,
-            itemHeight: 12,
-            itemGap: 8,
-            pageButtonItemGap: 5, // 分页按钮与图例项的间距
-            pageIconColor: '#2f4554', // 分页按钮颜色
-            pageIconInactiveColor: '#aaa', // 分页按钮禁用时的颜色
-            pageIconSize: 12, // 分页按钮大小
-            pageFormatter: '{current}/{total}', // 分页格式：当前页/总页数
-            textStyle: {
-                fontSize: 14
-            }
-        },
-        // 添加 dataZoom 组件实现X轴滚轮缩放（仅内置类型，无滑动条）
-        dataZoom: [
-            {
-                type: 'inside', // 内置型数据区域缩放组件（支持鼠标滚轮）
-                xAxisIndex: 0, // 控制第一个X轴
-                start: 0, // 默认显示全部数据
-                end: 100,
-                zoomOnMouseWheel: true, // 开启鼠标滚轮缩放
-                moveOnMouseMove: true, // 开启鼠标移动平移
-                filterMode: 'filter' // 过滤模式
-            }
-        ],
-        grid: {
-            top: 60,
-            bottom: 50,
-            left: '20px',
-            right: '20px',
-            containLabel: true
-        },
-        xAxis: {
-            type: 'category',
-            data: xData,
-            axisLabel: {
-                interval: 0,
-                color: '#333',
-                fontSize: 12
-            },
-            axisLine: {
-                lineStyle: {
-                    color: '#8f8f8f'
-                }
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: '#e0e0e0',
-                    type: 'solid' as const
-                }
-            }
-        },
-        yAxis: yAxisData,
-        series: seriesData
+          : undefined
     };
+  });
 
-    return option;
+  // 计算每个Y轴的数据范围（用于自适应，使用整数）
+  const calculateYAxisRange = (configIndex: number) => {
+    if (!selectedState[indicatorConfig.value[configIndex].name]) {
+      return null;
+    }
+
+    const values = data
+      .map(
+        item =>
+          item[indicatorConfig.value[configIndex].key as keyof typeof item]
+      )
+      .filter((val): val is number => typeof val === 'number' && !isNaN(val));
+
+    if (values.length === 0) {
+      return { min: 0, max: 10 };
+    }
+
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+
+    // Y轴使用整数：向下取整-1，向上取整+1
+    return {
+      min: Math.floor(min) - 1,
+      max: Math.ceil(max) + 1
+    };
+  };
+
+  // Y轴配置（左1右1原则，最多显示2个Y轴）
+  const yAxisData = indicatorConfig.value.map((config, index) => {
+    const isShow = selectedState[config.name];
+
+    // 如果不显示，直接返回隐藏配置
+    if (!isShow) {
+      return {
+        type: 'value' as const,
+        name: config.name,
+        show: false
+      };
+    }
+
+    // 计算当前是第几个显示的Y轴
+    let displayIndex = 0;
+    for (let i = 0; i < index; i++) {
+      if (selectedState[indicatorConfig.value[i].name]) {
+        displayIndex++;
+      }
+    }
+
+    // 最多只显示2个Y轴（索引0和1）
+    if (displayIndex >= 2) {
+      return {
+        type: 'value' as const,
+        name: config.name,
+        show: false
+      };
+    }
+
+    const isLeft = displayIndex === 0;
+    const offset = displayIndex === 1 ? 0 : 0;
+    const range = calculateYAxisRange(index);
+
+    return {
+      type: 'value' as const,
+      name: config.name,
+      position: isLeft ? ('left' as const) : ('right' as const),
+      offset,
+      min: range ? range.min : undefined,
+      max: range ? range.max : undefined,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: config.color
+        }
+      },
+      axisLabel: {
+        color: config.color,
+        formatter: (value: number) => {
+          // Y轴刻度使用整数显示
+          return Math.round(value).toString();
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e0e0e0',
+          type: 'solid' as const
+        }
+      },
+      show: true
+    };
+  });
+
+  const option: EChartsOption = {
+    tooltip: {
+      trigger: 'axis',
+      confine: true,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      borderColor: 'transparent',
+      textStyle: {
+        color: '#ffffff'
+      },
+      formatter: (params: any) => {
+        if (!params || params.length === 0) return '';
+
+        // 在最上面显示用户选择的时间
+        let result = `<div style="font-weight: bold; margin-bottom: 8px;">${datetimePicker.value.value}</div>`;
+
+        const tm = data.find(item => item.stnm === params[0].name)?.tm;
+        result += `${params[0].name}<br/>`;
+
+        // 判断是否只显示一个系列
+        const showOnlyOneSeries = visibleSeriesQueue.value.length === 1;
+
+        params.forEach((param: any) => {
+          const config = indicatorConfig.value.find(
+            c => c.name === param.seriesName
+          );
+          const unit = config?.unit || '';
+
+          if (param.value !== null && param.value !== undefined) {
+            // 折线数据保留一位小数
+            const numValue = Number(param.value);
+            let displayValue = param.value;
+
+            if (!isNaN(numValue)) {
+              displayValue = numValue.toFixed(1);
+            }
+
+            result += `${param.marker}${param.seriesName}：${displayValue}${unit}`;
+
+            // 如果只显示一个系列，且该指标有限值，则显示限值
+            if (showOnlyOneSeries && config) {
+              // 从 data 中获取当前站点的限值
+              const stationData = data.find(item => item.stnm === param.name);
+              if (stationData && stationData.limits) {
+                const limitKey = config.key; // 如 'ph', 'dox'
+                const limits = stationData.limits[limitKey];
+
+                if (limits) {
+                  // 构建限值显示字符串
+                  let limitText = '';
+                  const unit = config.unit || ''; // 获取单位
+
+                  if (limits.min !== undefined && limits.max !== undefined) {
+                    // 既有上限又有下限
+                    limitText = `&nbsp;&nbsp;&nbsp;&nbsp;限值: ${limits.min}-${
+                      limits.max
+                    }${unit ? unit : ''}`;
+                  } else if (limits.min !== undefined) {
+                    // 只有下限
+                    limitText = `&nbsp;&nbsp;&nbsp;&nbsp;限值: ${limits.min}${
+                      unit ? unit : ''
+                    }`;
+                  } else if (limits.max !== undefined) {
+                    // 只有上限
+                    limitText = `&nbsp;&nbsp;&nbsp;&nbsp;限值: ${limits.max}${
+                      unit ? unit : ''
+                    }`;
+                  }
+
+                  result += '<br/>' + limitText;
+                }
+              }
+            }
+
+            result += '<br/>';
+          }
+        });
+
+        return result;
+      }
+    },
+    legend: {
+      type: 'scroll',
+      top: 0,
+      right: 10, // 右侧留白，避免箭头按钮被遮挡
+      data: legendData,
+      selected: selectedState,
+      inactiveColor: '#ccc',
+      itemWidth: 16,
+      itemHeight: 12,
+      itemGap: 8,
+      pageButtonItemGap: 5, // 分页按钮与图例项的间距
+      pageIconColor: '#2f4554', // 分页按钮颜色
+      pageIconInactiveColor: '#aaa', // 分页按钮禁用时的颜色
+      pageIconSize: 12, // 分页按钮大小
+      pageFormatter: '{current}/{total}', // 分页格式：当前页/总页数
+      textStyle: {
+        fontSize: 14
+      }
+    },
+    // 添加 dataZoom 组件实现X轴滚轮缩放（仅内置类型，无滑动条）
+    dataZoom: [
+      {
+        type: 'inside', // 内置型数据区域缩放组件（支持鼠标滚轮）
+        xAxisIndex: 0, // 控制第一个X轴
+        start: 0, // 默认显示全部数据
+        end: 100,
+        zoomOnMouseWheel: true, // 开启鼠标滚轮缩放
+        moveOnMouseMove: true, // 开启鼠标移动平移
+        filterMode: 'filter' // 过滤模式
+      }
+    ],
+    grid: {
+      top: 60,
+      bottom: 50,
+      left: '20px',
+      right: '20px',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisLabel: {
+        interval: 0,
+        color: '#333',
+        fontSize: 12
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#8f8f8f'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e0e0e0',
+          type: 'solid' as const
+        }
+      }
+    },
+    yAxis: yAxisData,
+    series: seriesData
+  };
+
+  return option;
 };
 
 // ==================== 图例选择事件处理（最多2个系列）====================
 const handleLegendSelectChanged = (params: any) => {
-    if (!chartInstance) return;
+  if (!chartInstance) return;
 
-    const { selected, name } = params;
-    const clickedName = name;
-    const isNowSelected = selected[clickedName];
+  const { selected, name } = params;
+  const clickedName = name;
+  const isNowSelected = selected[clickedName];
 
-    console.log(`图例点击: ${clickedName}, 当前状态: ${isNowSelected ? '显示' : '隐藏'}`);
-    console.log('当前可见队列:', visibleSeriesQueue.value);
+  console.log(
+    `图例点击: ${clickedName}, 当前状态: ${isNowSelected ? '显示' : '隐藏'}`
+  );
+  console.log('当前可见队列:', visibleSeriesQueue.value);
 
-    if (isNowSelected) {
-        // 用户想要显示这个系列
-        if (visibleSeriesQueue.value.length >= 2) {
-            // 已满2个，移除最早的（队列头部）
-            const removed = visibleSeriesQueue.value.shift();
-            console.log(`已达上限，移除最早系列: ${removed}`);
-        }
-        // 添加到队列尾部
-        if (!visibleSeriesQueue.value.includes(clickedName)) {
-            visibleSeriesQueue.value.push(clickedName);
-        }
-    } else {
-        // 用户想要隐藏这个系列
-        const index = visibleSeriesQueue.value.indexOf(clickedName);
-        if (index > -1) {
-            visibleSeriesQueue.value.splice(index, 1);
-            console.log(`从队列中移除: ${clickedName}`);
+  if (isNowSelected) {
+    // 用户想要显示这个系列
+    if (visibleSeriesQueue.value.length >= 2) {
+      // 已满2个，移除最早的（队列头部）
+      const removed = visibleSeriesQueue.value.shift();
+      console.log(`已达上限，移除最早系列: ${removed}`);
+    }
+    // 添加到队列尾部
+    if (!visibleSeriesQueue.value.includes(clickedName)) {
+      visibleSeriesQueue.value.push(clickedName);
+    }
+  } else {
+    // 用户想要隐藏这个系列
+    const index = visibleSeriesQueue.value.indexOf(clickedName);
+    if (index > -1) {
+      visibleSeriesQueue.value.splice(index, 1);
+      console.log(`从队列中移除: ${clickedName}`);
+    }
+  }
+
+  console.log('更新后可见队列:', visibleSeriesQueue.value);
+
+  // 根据队列构建最终的 selected 状态
+  const finalSelected: Record<string, boolean> = {};
+  indicatorConfig.value.forEach(config => {
+    finalSelected[config.name] = visibleSeriesQueue.value.includes(config.name);
+  });
+
+  // 深拷贝当前配置
+  const currentOption = JSON.parse(JSON.stringify(chartInstance.getOption()));
+
+  // 同步图例选中状态
+  currentOption.legend[0].selected = finalSelected;
+
+  // 根据图例状态更新 Y 轴显隐
+  const newYAxis = currentOption.yAxis.map((item: any) => {
+    let isShow = false;
+    let displayIndex = 0;
+
+    // 计算这是第几个显示的Y轴
+    for (const key in finalSelected) {
+      if (finalSelected[key]) {
+        const config = indicatorConfig.value.find(c => c.name === key);
+        if (config && config.name === item.name) {
+          isShow = true;
+          break;
         }
+        displayIndex++;
+      }
     }
 
-    console.log('更新后可见队列:', visibleSeriesQueue.value);
-
-    // 根据队列构建最终的 selected 状态
-    const finalSelected: Record<string, boolean> = {};
-    indicatorConfig.value.forEach(config => {
-        finalSelected[config.name] = visibleSeriesQueue.value.includes(config.name);
-    });
-
-    // 深拷贝当前配置
-    const currentOption = JSON.parse(JSON.stringify(chartInstance.getOption()));
-
-    // 同步图例选中状态
-    currentOption.legend[0].selected = finalSelected;
-
-    // 根据图例状态更新 Y 轴显隐
-    const newYAxis = currentOption.yAxis.map((item: any) => {
-        let isShow = false;
-        let displayIndex = 0;
-        
-        // 计算这是第几个显示的Y轴
-        for (const key in finalSelected) {
-            if (finalSelected[key]) {
-                const config = indicatorConfig.value.find(c => c.name === key);
-                if (config && config.name === item.name) {
-                    isShow = true;
-                    break;
-                }
-                displayIndex++;
-            }
-        }
-        
-        // 最多只显示2个Y轴
-        if (!isShow || displayIndex >= 2) {
-            return { ...item, show: false };
-        }
-        
-        return { ...item, show: true };
-    });
-
-    currentOption.yAxis = newYAxis;
-
-    // 动态调整 Y 轴布局
-    yAxisShowDynamic(finalSelected, currentOption);
-
-    // 完全替换模式更新
-    try {
-        chartInstance.setOption(currentOption, true);
-        console.log('图表配置已更新');
-    } catch (error) {
-        console.error('图表更新失败:', error);
+    // 最多只显示2个Y轴
+    if (!isShow || displayIndex >= 2) {
+      return { ...item, show: false };
     }
+
+    return { ...item, show: true };
+  });
+
+  currentOption.yAxis = newYAxis;
+
+  // 动态调整 Y 轴布局
+  yAxisShowDynamic(finalSelected, currentOption);
+
+  // 完全替换模式更新
+  try {
+    chartInstance.setOption(currentOption, true);
+    console.log('图表配置已更新');
+  } catch (error) {
+    console.error('图表更新失败:', error);
+  }
 };
 
 // ==================== Y轴动态布局调整 ====================
 const yAxisShowDynamic = (selected: Record<string, boolean>, options: any) => {
-    const allShow = options.yAxis?.filter((item: any) => item.show);
-    const showCount = allShow?.length || 0;
+  const allShow = options.yAxis?.filter((item: any) => item.show);
+  const showCount = allShow?.length || 0;
 
-    // 没有显示的Y轴
-    if (showCount === 0) {
-        return;
-    }
+  // 没有显示的Y轴
+  if (showCount === 0) {
+    return;
+  }
 
-    // 只有一个Y轴：统一置于左侧
-    if (showCount === 1) {
+  // 只有一个Y轴：统一置于左侧
+  if (showCount === 1) {
+    delete options.grid.right;
+    options.grid.left = '80px';
+
+    options.yAxis = options.yAxis.map((item: any) => {
+      if (item.show) {
+        return {
+          ...item,
+          position: 'left',
+          offset: 0
+        };
+      }
+      return item;
+    });
+    return;
+  }
+
+  // 两个Y轴：左侧1个，右侧1个
+  if (showCount >= 2) {
+    let leftAssigned = false;
+    let rightAssigned = false;
+
+    options.yAxis = options.yAxis.map((item: any) => {
+      if (!item.show) {
+        return item;
+      }
+
+      // 第一个可见的Y轴放在左侧
+      if (!leftAssigned) {
+        leftAssigned = true;
         delete options.grid.right;
         options.grid.left = '80px';
 
-        options.yAxis = options.yAxis.map((item: any) => {
-            if (item.show) {
-                return {
-                    ...item,
-                    position: 'left',
-                    offset: 0
-                };
-            }
-            return item;
-        });
-        return;
-    }
-
-    // 两个Y轴：左侧1个，右侧1个
-    if (showCount >= 2) {
-        let leftAssigned = false;
-        let rightAssigned = false;
-
-        options.yAxis = options.yAxis.map((item: any) => {
-            if (!item.show) {
-                return item;
-            }
-
-            // 第一个可见的Y轴放在左侧
-            if (!leftAssigned) {
-                leftAssigned = true;
-                delete options.grid.right;
-                options.grid.left = '80px';
-
-                return {
-                    ...item,
-                    position: 'left',
-                    offset: 0
-                };
-            } else if (!rightAssigned) {
-                // 第二个Y轴放在右侧
-                rightAssigned = true;
-                options.grid.right = '60px';
-                return {
-                    ...item,
-                    position: 'right',
-                    offset: 0
-                };
-            } else {
-                // 第三个及以后的Y轴隐藏（理论上不应该到这里）
-                return {
-                    ...item,
-                    show: false
-                };
-            }
-        });
-    }
+        return {
+          ...item,
+          position: 'left',
+          offset: 0
+        };
+      } else if (!rightAssigned) {
+        // 第二个Y轴放在右侧
+        rightAssigned = true;
+        options.grid.right = '60px';
+        return {
+          ...item,
+          position: 'right',
+          offset: 0
+        };
+      } else {
+        // 第三个及以后的Y轴隐藏（理论上不应该到这里）
+        return {
+          ...item,
+          show: false
+        };
+      }
+    });
+  }
 };
 
 // ==================== 数据点点击事件处理 ====================
 const handleDataPointClick = (params: any) => {
-    if (!params || !params.dataIndex) return;
+  if (!params || !params.dataIndex) return;
 
-    // 获取点击的数据点对应的站点信息
-    const dataIndex = params.dataIndex;
-    const stationData = mockData.value[dataIndex];
+  // 获取点击的数据点对应的站点信息
+  const dataIndex = params.dataIndex;
+  const stationData = mockData.value[dataIndex];
 
-    if (stationData && stationData.stcd) {
-        modelStore.modalVisible = true;
-        modelStore.params.sttp = "WQFB";
-        modelStore.title = stationData.stnm ;
-        // modelStore.isBasicEdit = true;
-        modelStore.params.stcd = stationData.stcd;
-    }
+  if (stationData && stationData.stcd) {
+    modelStore.modalVisible = true;
+    modelStore.params.sttp = 'WQFB';
+    modelStore.title = stationData.stnm;
+    // modelStore.isBasicEdit = true;
+    modelStore.params.stcd = stationData.stcd;
+    modelStore.filter.rangeTm = [
+      dayjs(datetimePicker.value.value)
+        .startOf('month')
+        .format('YYYY-MM-DD HH:mm:ss'),
+      dayjs(datetimePicker.value.value)
+        .endOf('month')
+        .format('YYYY-MM-DD HH:mm:ss')
+    ];
+  }
 };
 
 // ==================== 图表初始化 ====================
 
 //获取图参数
 const getecharts = async () => {
-    if (!select.value.value) {
-        console.warn('选择器值为空，无法获取图表数据');
-        loading.value = false;
-        hasData.value = false;
-        chartInstance?.clear();
-        return;
-    }
-
-    console.log('开始获取图表数据，select.value:', select.value.value);
-
-    // 设置 loading 状态
-    loading.value = true;
+  if (!select.value.value) {
+    console.warn('选择器值为空，无法获取图表数据');
+    loading.value = false;
     hasData.value = false;
+    chartInstance?.clear();
+    return;
+  }
 
-    let params = {
-        "filter": {
-            "logic": "and",
-            "filters": [
-                {
-                    "field": "baseId",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": wbsCode.value
-                },
-                {
-                    "field": "rvcd",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": select.value.value
-                },
-                {
-                    "field": "tm",
-                    "operator": "gte",
-                    "dataType": "date",
-                    "value": getStartTime()
-                },
-                {
-                    "field": "tm",
-                    "operator": "lte",
-                    "dataType": "date",
-                    "value": getEndTime()
-                }
-            ]
+  console.log('开始获取图表数据，select.value:', select.value.value);
+
+  // 设置 loading 状态
+  loading.value = true;
+  hasData.value = false;
+
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'baseId',
+          operator: 'eq',
+          dataType: 'string',
+          value: wbsCode.value
         },
-        "sort": [
-            {
-                "field": "sort",
-                "dir": "asc"
-            }
-        ]
+        {
+          field: 'rvcd',
+          operator: 'eq',
+          dataType: 'string',
+          value: select.value.value
+        },
+        {
+          field: 'tm',
+          operator: 'gte',
+          dataType: 'date',
+          value: getStartTime()
+        },
+        {
+          field: 'tm',
+          operator: 'lte',
+          dataType: 'date',
+          value: getEndTime()
+        }
+      ]
+    },
+    sort: [
+      {
+        field: 'sort',
+        dir: 'asc'
+      }
+    ]
+  };
+
+  try {
+    console.log('请求参数:', params);
+    let res = await qgcGetKendoListCust(params);
+    console.log('接口返回数据:', res);
+
+    // 处理返回的数据 - 兼容多种数据结构
+    let apiData: any[] = [];
+
+    if (res && res.data) {
+      // 情况1: res.data.data 是数组（当前实际情况）
+      if (Array.isArray(res.data.data)) {
+        apiData = res.data.data;
+      }
+      // 情况2: res.data.data.data 是数组
+      else if (res.data.data && Array.isArray(res.data.data.data)) {
+        apiData = res.data.data.data;
+      }
+      // 情况3: res.data 直接是数组
+      else if (Array.isArray(res.data)) {
+        apiData = res.data;
+      }
     }
 
-    try {
-        console.log('请求参数:', params);
-        let res = await qgcGetKendoListCust(params);
-        console.log('接口返回数据:', res);
+    console.log('原始数据条数:', apiData.length);
 
-        // 处理返回的数据 - 兼容多种数据结构
-        let apiData: any[] = [];
+    // 过滤出有水质数据的站点（sttp === 'WQ'）并按sort排序
+    const filteredData = apiData
+      .filter((item: any) => item.sttp === 'WQ')
+      .sort((a: any, b: any) => {
+        // 如果有sort字段则使用，否则按索引排序
+        return (a.sort || 0) - (b.sort || 0);
+      });
 
-        if (res && res.data) {
-            // 情况1: res.data.data 是数组（当前实际情况）
-            if (Array.isArray(res.data.data)) {
-                apiData = res.data.data;
-            }
-            // 情况2: res.data.data.data 是数组
-            else if (res.data.data && Array.isArray(res.data.data.data)) {
-                apiData = res.data.data.data;
-            }
-            // 情况3: res.data 直接是数组
-            else if (Array.isArray(res.data)) {
-                apiData = res.data;
-            }
-        }
+    console.log('过滤后水质数据条数:', filteredData.length);
 
-        console.log('原始数据条数:', apiData.length);
+    // 转换为图表所需的数据格式
+    const chartData = filteredData.map((item: any, index: number) => {
+      // 去除站点名称中的"出库水质站"后缀
+      let stnm = item.stnm || '-';
+      if (stnm.includes('出库水质站')) {
+        stnm = stnm.replace('出库水质站', '');
+      }
+      if (stnm.includes('出库水质_')) {
+        stnm = stnm.replace('出库水质_', '');
+      }
 
-        // 过滤出有水质数据的站点（sttp === 'WQ'）并按sort排序
-        const filteredData = apiData
-            .filter((item: any) => item.sttp === 'WQ')
-            .sort((a: any, b: any) => {
-                // 如果有sort字段则使用，否则按索引排序
-                return (a.sort || 0) - (b.sort || 0);
-            });
+      // 解析 min 和 max 数组，构建限值对象
+      const limits: Record<string, { min?: number; max?: number }> = {};
 
-        console.log('过滤后水质数据条数:', filteredData.length);
-
-        // 转换为图表所需的数据格式
-        const chartData = filteredData.map((item: any, index: number) => {
-            // 去除站点名称中的"出库水质站"后缀
-            let stnm = item.stnm || '-';
-            if (stnm.includes('出库水质站')) {
-                stnm = stnm.replace('出库水质站', '');
-            }
-            if (stnm.includes('出库水质_')) {
-                stnm = stnm.replace('出库水质_', '');
-            }
-
-            // 解析 min 和 max 数组，构建限值对象
-            const limits: Record<string, { min?: number; max?: number }> = {};
-            
-            // 处理下限
-            if (item.min && Array.isArray(item.min)) {
-                item.min.forEach((limitItem: any) => {
-                    Object.keys(limitItem).forEach(key => {
-                        // key 是大写，如 "PH", "DOX"，转为小写以匹配 indicatorConfig
-                        const lowerKey = key.toLowerCase();
-                        limits[lowerKey] = limits[lowerKey] || {};
-                        limits[lowerKey].min = limitItem[key];
-                    });
-                });
-            }
-            
-            // 处理上限
-            if (item.max && Array.isArray(item.max)) {
-                item.max.forEach((limitItem: any) => {
-                    Object.keys(limitItem).forEach(key => {
-                        const lowerKey = key.toLowerCase();
-                        limits[lowerKey] = limits[lowerKey] || {};
-                        limits[lowerKey].max = limitItem[key];
-                    });
-                });
-            }
-
-            return {
-                stnm: stnm,
-                stcd: item.stcd || '',
-                type: item.rstcd ? '1' : '0', // 有rstcd表示是电站出库站
-                tm: item.tm || '',
-                SORT: index + 1,
-                ph: item.ph != null ? Number(item.ph) : null,
-                dox: item.dox != null ? Number(item.dox) : null,
-                codmn: item.codmn != null ? Number(item.codmn) : null,
-                codcr: item.codcr != null ? Number(item.codcr) : null,
-                bod5: item.bod5 != null ? Number(item.bod5) : null,
-                nh3n: item.nh3n != null ? Number(item.nh3n) : null,
-                tp: item.tp != null ? Number(item.tp) : null,
-                tn: item.tn != null ? Number(item.tn) : null,
-                cu: item.cu != null ? Number(item.cu) : null,
-                zn: item.zn != null ? Number(item.zn) : null,
-                f: item.f != null ? Number(item.f) : null,
-                se: item.se != null ? Number(item.se) : null,
-                ars: item.ars != null ? Number(item.ars) : null,
-                hg: item.hg != null ? Number(item.hg) : null,
-                cd: item.cd != null ? Number(item.cd) : null,
-                cr6: item.cr6 != null ? Number(item.cr6) : null,
-                pb: item.pb != null ? Number(item.pb) : null,
-                cn: item.cn != null ? Number(item.cn) : null,
-                vlph: item.vlph != null ? Number(item.vlph) : null,
-                oil: item.oil != null ? Number(item.oil) : null,
-                las: item.las != null ? Number(item.las) : null,
-                s2: item.s2 != null ? Number(item.s2) : null,
-                fcg: item.fcg != null ? Number(item.fcg) : null,
-                cl: item.cl != null ? Number(item.cl) : null,
-                so4: item.so4 != null ? Number(item.so4) : null,
-                no3: item.no3 != null ? Number(item.no3) : null,
-                thrd: item.thrd != null ? Number(item.thrd) : null,
-                cond: item.cond != null ? Number(item.cond) : null,
-                fe: item.fe != null ? Number(item.fe) : null,
-                mn: item.mn != null ? Number(item.mn) : null,
-                al: item.al != null ? Number(item.al) : null,
-                chla: item.chla != null ? Number(item.chla) : null,
-                clarity: item.clarity != null ? Number(item.clarity) : null,
-                tu: item.tu != null ? Number(item.tu) : null,
-                wtmp: item.wtmp != null ? Number(item.wtmp) : null,
-                limits: limits  // 新增：存储该站点的所有限值
-            };
+      // 处理下限
+      if (item.min && Array.isArray(item.min)) {
+        item.min.forEach((limitItem: any) => {
+          Object.keys(limitItem).forEach(key => {
+            // key 是大写，如 "PH", "DOX"，转为小写以匹配 indicatorConfig
+            const lowerKey = key.toLowerCase();
+            limits[lowerKey] = limits[lowerKey] || {};
+            limits[lowerKey].min = limitItem[key];
+          });
         });
+      }
 
-        // 更新模拟数据
-        mockData.value = chartData;
+      // 处理上限
+      if (item.max && Array.isArray(item.max)) {
+        item.max.forEach((limitItem: any) => {
+          Object.keys(limitItem).forEach(key => {
+            const lowerKey = key.toLowerCase();
+            limits[lowerKey] = limits[lowerKey] || {};
+            limits[lowerKey].max = limitItem[key];
+          });
+        });
+      }
 
-        // 判断是否有数据
-        hasData.value = chartData.length > 0;
-        console.log('hasData 设置为:', hasData.value);
+      return {
+        stnm: stnm,
+        stcd: item.stcd || '',
+        type: item.rstcd ? '1' : '0', // 有rstcd表示是电站出库站
+        tm: item.tm || '',
+        SORT: index + 1,
+        ph: item.ph != null ? Number(item.ph) : null,
+        dox: item.dox != null ? Number(item.dox) : null,
+        codmn: item.codmn != null ? Number(item.codmn) : null,
+        codcr: item.codcr != null ? Number(item.codcr) : null,
+        bod5: item.bod5 != null ? Number(item.bod5) : null,
+        nh3n: item.nh3n != null ? Number(item.nh3n) : null,
+        tp: item.tp != null ? Number(item.tp) : null,
+        tn: item.tn != null ? Number(item.tn) : null,
+        cu: item.cu != null ? Number(item.cu) : null,
+        zn: item.zn != null ? Number(item.zn) : null,
+        f: item.f != null ? Number(item.f) : null,
+        se: item.se != null ? Number(item.se) : null,
+        ars: item.ars != null ? Number(item.ars) : null,
+        hg: item.hg != null ? Number(item.hg) : null,
+        cd: item.cd != null ? Number(item.cd) : null,
+        cr6: item.cr6 != null ? Number(item.cr6) : null,
+        pb: item.pb != null ? Number(item.pb) : null,
+        cn: item.cn != null ? Number(item.cn) : null,
+        vlph: item.vlph != null ? Number(item.vlph) : null,
+        oil: item.oil != null ? Number(item.oil) : null,
+        las: item.las != null ? Number(item.las) : null,
+        s2: item.s2 != null ? Number(item.s2) : null,
+        fcg: item.fcg != null ? Number(item.fcg) : null,
+        cl: item.cl != null ? Number(item.cl) : null,
+        so4: item.so4 != null ? Number(item.so4) : null,
+        no3: item.no3 != null ? Number(item.no3) : null,
+        thrd: item.thrd != null ? Number(item.thrd) : null,
+        cond: item.cond != null ? Number(item.cond) : null,
+        fe: item.fe != null ? Number(item.fe) : null,
+        mn: item.mn != null ? Number(item.mn) : null,
+        al: item.al != null ? Number(item.al) : null,
+        chla: item.chla != null ? Number(item.chla) : null,
+        clarity: item.clarity != null ? Number(item.clarity) : null,
+        tu: item.tu != null ? Number(item.tu) : null,
+        wtmp: item.wtmp != null ? Number(item.wtmp) : null,
+        limits: limits // 新增：存储该站点的所有限值
+      };
+    });
 
-        if (!hasData.value) {
-            // 无数据时清空图表
-            console.log('无数据，清空图表');
-            chartInstance?.clear();
-            indicatorConfig.value = [];
-            loading.value = false;
-            return;
-        }
+    // 更新模拟数据
+    mockData.value = chartData;
 
-        // 动态生成指标配置
-        generateIndicatorConfig(chartData);
+    // 判断是否有数据
+    hasData.value = chartData.length > 0;
+    console.log('hasData 设置为:', hasData.value);
 
-        // 如果没有有效指标，显示空状态
-        if (indicatorConfig.value.length === 0) {
-            console.log('没有有效指标，显示空状态');
-            hasData.value = false;
-            chartInstance?.clear();
-            loading.value = false;
-            return;
-        }
-
-        // 重新渲染图表 - 使用 nextTick 确保 DOM 更新完成
-        await nextTick();
-
-        if (chartInstance) {
-            // 如果图表已存在，更新配置
-            requestAnimationFrame(() => {
-                const option = getChartOption();
-                chartInstance?.setOption(option, true);
-                chartInstance?.resize();
-                console.log('图表数据已更新，共', chartData.length, '个站点，', indicatorConfig.value.length, '个指标');
-            });
-        } else {
-            // 如果图表不存在，初始化图表
-            await initChart();
-        }
-    } catch (error) {
-        console.error('获取图表数据失败:', error);
-        hasData.value = false;
-        indicatorConfig.value = [];
-    } finally {
-        // 关闭 loading 状态 - 使用 nextTick 确保在下一个 tick 关闭
-        await nextTick();
-        console.log('关闭 loading 状态');
-        loading.value = false;
+    if (!hasData.value) {
+      // 无数据时清空图表
+      console.log('无数据，清空图表');
+      chartInstance?.clear();
+      indicatorConfig.value = [];
+      loading.value = false;
+      return;
     }
-}
+
+    // 动态生成指标配置
+    generateIndicatorConfig(chartData);
+
+    // 如果没有有效指标，显示空状态
+    if (indicatorConfig.value.length === 0) {
+      console.log('没有有效指标，显示空状态');
+      hasData.value = false;
+      chartInstance?.clear();
+      loading.value = false;
+      return;
+    }
+
+    // 重新渲染图表 - 使用 nextTick 确保 DOM 更新完成
+    await nextTick();
+
+    if (chartInstance) {
+      // 如果图表已存在，更新配置
+      requestAnimationFrame(() => {
+        const option = getChartOption();
+        chartInstance?.setOption(option, true);
+        chartInstance?.resize();
+        console.log(
+          '图表数据已更新，共',
+          chartData.length,
+          '个站点，',
+          indicatorConfig.value.length,
+          '个指标'
+        );
+      });
+    } else {
+      // 如果图表不存在，初始化图表
+      await initChart();
+    }
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+    hasData.value = false;
+    indicatorConfig.value = [];
+  } finally {
+    // 关闭 loading 状态 - 使用 nextTick 确保在下一个 tick 关闭
+    await nextTick();
+    console.log('关闭 loading 状态');
+    loading.value = false;
+  }
+};
 
 // 获取起始时间（当前选择日期前一个月）
 const getStartTime = () => {
-    const currentDate = new Date(datetimePicker.value.value);
-    const oneMonthAgo = new Date(currentDate);
-    oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
+  const currentDate = new Date(datetimePicker.value.value);
+  const oneMonthAgo = new Date(currentDate);
+  oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
 
-    const year = oneMonthAgo.getFullYear();
-    const month = String(oneMonthAgo.getMonth() + 1).padStart(2, '0');
-    const day = String(oneMonthAgo.getDate()).padStart(2, '0');
-    const hours = String(oneMonthAgo.getHours()).padStart(2, '0');
-    const minutes = String(oneMonthAgo.getMinutes()).padStart(2, '0');
-    const seconds = String(oneMonthAgo.getSeconds()).padStart(2, '0');
+  const year = oneMonthAgo.getFullYear();
+  const month = String(oneMonthAgo.getMonth() + 1).padStart(2, '0');
+  const day = String(oneMonthAgo.getDate()).padStart(2, '0');
+  const hours = String(oneMonthAgo.getHours()).padStart(2, '0');
+  const minutes = String(oneMonthAgo.getMinutes()).padStart(2, '0');
+  const seconds = String(oneMonthAgo.getSeconds()).padStart(2, '0');
 
-    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 };
 
 // 获取结束时间（当前选择日期的当天 23:59:59）
 const getEndTime = () => {
-    const currentDate = new Date(datetimePicker.value.value);
+  const currentDate = new Date(datetimePicker.value.value);
 
-    const year = currentDate.getFullYear();
-    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
-    const day = String(currentDate.getDate()).padStart(2, '0');
+  const year = currentDate.getFullYear();
+  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
+  const day = String(currentDate.getDate()).padStart(2, '0');
 
-    return `${year}-${month}-${day} 23:59:59`;
+  return `${year}-${month}-${day} 23:59:59`;
 };
 
 // ==================== 图表初始化 ====================
 
 const initChart = async () => {
-    if (!chartRef.value) {
-        console.warn('图表容器未就绪');
-        return;
-    }
+  if (!chartRef.value) {
+    console.warn('图表容器未就绪');
+    return;
+  }
 
-    // 检查容器尺寸
-    const rect = chartRef.value.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
-        console.warn('图表容器尺寸为0，等待渲染...');
-        // 使用 requestAnimationFrame 确保在浏览器下一重绘帧再初始化
-        return new Promise((resolve) => {
-            requestAnimationFrame(() => {
-                setTimeout(() => {
-                    initChart().then(resolve);
-                }, 50);
-            });
-        });
-    }
+  // 检查容器尺寸
+  const rect = chartRef.value.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    console.warn('图表容器尺寸为0，等待渲染...');
+    // 使用 requestAnimationFrame 确保在浏览器下一重绘帧再初始化
+    return new Promise(resolve => {
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          initChart().then(resolve);
+        }, 50);
+      });
+    });
+  }
 
-    // 如果图表实例已存在，先销毁
-    if (chartInstance) {
-        chartInstance.dispose();
-        chartInstance = null;
-    }
+  // 如果图表实例已存在，先销毁
+  if (chartInstance) {
+    chartInstance.dispose();
+    chartInstance = null;
+  }
 
-    // 如果没有有效指标配置，不初始化图表
-    if (indicatorConfig.value.length === 0) {
-        console.warn('没有有效的指标配置，跳过图表初始化');
-        hasData.value = false;
-        return;
-    }
+  // 如果没有有效指标配置，不初始化图表
+  if (indicatorConfig.value.length === 0) {
+    console.warn('没有有效的指标配置，跳过图表初始化');
+    hasData.value = false;
+    return;
+  }
 
-    // 初始化可见队列：默认只显示第一个系列（按sort排序后的第一个）
-    visibleSeriesQueue.value = [indicatorConfig.value[0].name];
-    console.log('初始化可见队列:', visibleSeriesQueue.value);
+  // 初始化可见队列：默认只显示第一个系列（按sort排序后的第一个）
+  visibleSeriesQueue.value = [indicatorConfig.value[0].name];
+  console.log('初始化可见队列:', visibleSeriesQueue.value);
 
-    // 初始化 ECharts 实例
-    chartInstance = echarts.init(chartRef.value);
+  // 初始化 ECharts 实例
+  chartInstance = echarts.init(chartRef.value);
 
-    // 设置初始配置
-    const option = getChartOption();
-    chartInstance.setOption(option);
+  // 设置初始配置
+  const option = getChartOption();
+  chartInstance.setOption(option);
 
-    // 监听图例选择变化事件
-    chartInstance.on('legendselectchanged', handleLegendSelectChanged);
+  // 监听图例选择变化事件
+  chartInstance.on('legendselectchanged', handleLegendSelectChanged);
 
-    // 监听数据点点击事件
-    chartInstance.on('click', handleDataPointClick);
+  // 监听数据点点击事件
+  chartInstance.on('click', handleDataPointClick);
 
-    // 强制 resize 确保正确渲染
-    setTimeout(() => {
-        chartInstance?.resize();
-    }, 50);
+  // 强制 resize 确保正确渲染
+  setTimeout(() => {
+    chartInstance?.resize();
+  }, 50);
 
-    console.log('图表初始化成功');
+  console.log('图表初始化成功');
 };
 
 // ==================== 窗口大小变化处理 ====================
 const handleResize = () => {
-    chartInstance?.resize();
+  chartInstance?.resize();
 };
 
 // ==================== 生命周期钩子 ====================
 onMounted(async () => {
-    await nextTick();
-    // 不再立即初始化图表，等待数据加载完成
-    
-    window.addEventListener('resize', handleResize);
+  await nextTick();
+  // 不再立即初始化图表，等待数据加载完成
+
+  window.addEventListener('resize', handleResize);
 });
 
 onBeforeUnmount(() => {
-    window.removeEventListener('resize', handleResize);
+  window.removeEventListener('resize', handleResize);
 
-    if (chartInstance) {
-        chartInstance.off('legendselectchanged', handleLegendSelectChanged);
-        chartInstance.off('click', handleDataPointClick);
-        chartInstance.dispose();
-        chartInstance = null;
-    }
+  if (chartInstance) {
+    chartInstance.off('legendselectchanged', handleLegendSelectChanged);
+    chartInstance.off('click', handleDataPointClick);
+    chartInstance.dispose();
+    chartInstance = null;
+  }
 });
 
 //根据流域获取河段
 const getSelect = async () => {
-    if (!wbsCode.value) {
-        console.warn('wbsCode 为空，无法获取河段数据');
-        return;
-    }
+  if (!wbsCode.value) {
+    console.warn('wbsCode 为空，无法获取河段数据');
+    return;
+  }
 
-    let params = {
-        "filter": {
-            "logic": "and",
-            "filters": [
-                {
-                    "field": "objId",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": wbsCode.value
-                },
-                {
-                    "field": "wbsType",
-                    "operator": "eq",
-                    "dataType": "string",
-                    "value": "PSB_RVCD"
-                }
-            ]
+  let params = {
+    filter: {
+      logic: 'and',
+      filters: [
+        {
+          field: 'objId',
+          operator: 'eq',
+          dataType: 'string',
+          value: wbsCode.value
         },
-        "group": [
-            {
-                "dir": "asc",
-                "field": "orderIndex"
-            },
-            {
-                "dir": "des",
-                "field": "wbsCode"
-            },
-            {
-                "dir": "des",
-                "field": "wbsName"
-            }
-        ],
-        "groupResultFlat": "true"
+        {
+          field: 'wbsType',
+          operator: 'eq',
+          dataType: 'string',
+          value: 'PSB_RVCD'
+        }
+      ]
+    },
+    group: [
+      {
+        dir: 'asc',
+        field: 'orderIndex'
+      },
+      {
+        dir: 'des',
+        field: 'wbsCode'
+      },
+      {
+        dir: 'des',
+        field: 'wbsName'
+      }
+    ],
+    groupResultFlat: 'true'
+  };
+
+  try {
+    let res = await wbsbGetKendoList(params);
+
+    // 处理返回的数据 - 注意数据结构可能是嵌套的
+    let data;
+    if (res && res.data && res.data.data) {
+      // 如果 res.data.data 是数组，直接使用
+      if (Array.isArray(res.data.data)) {
+        data = res.data.data;
+      }
+      // 如果 res.data.data 是对象且有 data 属性，使用 res.data.data.data
+      else if (res.data.data.data && Array.isArray(res.data.data.data)) {
+        data = res.data.data.data;
+      } else {
+        console.warn('无法解析河段数据:', res);
+        return;
+      }
+    } else {
+      console.warn('未获取到河段数据');
+      return;
     }
 
-    try {
-        let res = await wbsbGetKendoList(params);
+    if (data && data.length > 0) {
+      select.value.value = data[0].wbsCode;
+      select.value.options = data.map(item => {
+        return {
+          value: item.wbsCode,
+          label: item.wbsName
+        };
+      });
 
-        // 处理返回的数据 - 注意数据结构可能是嵌套的
-        let data;
-        if (res && res.data && res.data.data) {
-            // 如果 res.data.data 是数组，直接使用
-            if (Array.isArray(res.data.data)) {
-                data = res.data.data;
-            }
-            // 如果 res.data.data 是对象且有 data 属性，使用 res.data.data.data
-            else if (res.data.data.data && Array.isArray(res.data.data.data)) {
-                data = res.data.data.data;
-            } else {
-                console.warn('无法解析河段数据:', res);
-                return;
-            }
-        } else {
-            console.warn('未获取到河段数据');
-            return;
-        }
-
-        if (data && data.length > 0) {
-            select.value.value = data[0].wbsCode;
-            select.value.options = data.map(item => {
-                return {
-                    value: item.wbsCode,
-                    label: item.wbsName
-                };
-            });
-
-            // 获取完选择器数据后，立即加载图表数据
-            await nextTick();
-            getecharts();
-        } else {
-            console.warn('河段数据为空');
-            select.value.value = '';
-            select.value.options = [];
-            hasData.value = false;
-        }
-    } catch (error) {
-        console.error('获取河段数据失败:', error);
+      // 获取完选择器数据后，立即加载图表数据
+      await nextTick();
+      getecharts();
+    } else {
+      console.warn('河段数据为空');
+      select.value.value = '';
+      select.value.options = [];
+      hasData.value = false;
     }
-}
+  } catch (error) {
+    console.error('获取河段数据失败:', error);
+  }
+};
 
 //监听子组件的数据变化
-const handlePanelChange1 = async (data) => {
-    console.log('当前所有控件状态:', data);
-    // 当选择器或日期变化时，重新加载图表数据
-    if (data.datetime || data.select) {
-        select.value.value = data.select
-        datetimePicker.value.value = data.datetime
-        getecharts()
-    }
-}
+const handlePanelChange1 = async data => {
+  console.log('当前所有控件状态:', data);
+  // 当选择器或日期变化时，重新加载图表数据
+  if (data.datetime || data.select) {
+    select.value.value = data.select;
+    datetimePicker.value.value = data.datetime;
+    getecharts();
+  }
+};
 
 // 监听 datetimePicker 变化，更新 iconmap 中的时间显示
 watch(
-    () => datetimePicker.value.value,
-    (newVal) => {
-        if (newVal) {
-            iconmap.value.value = `注：最新数据时间为${newVal}`;
-        }
-    },
-    { immediate: true }
+  () => datetimePicker.value.value,
+  newVal => {
+    if (newVal) {
+      iconmap.value.value = `注：最新数据时间为${newVal}`;
+    }
+  },
+  { immediate: true }
 );
 
 const wbsCode = ref('');
 watch(
-    () => JidiSelectEventStore.selectedItem,
-    (newVal) => {
-        console.log(newVal);
-        wbsCode.value = newVal.wbsCode;
-        getSelect()
-    },
-    { deep: true, immediate: true }
+  () => JidiSelectEventStore.selectedItem,
+  newVal => {
+    console.log(newVal);
+    wbsCode.value = newVal.wbsCode;
+    getSelect();
+  },
+  { deep: true, immediate: true }
 );
 
 // 监听可见系列数量变化，重新设置图表配置以确保 tooltip formatter 使用最新的 visibleSeriesQueue 值
 watch(
-    () => visibleSeriesQueue.value.length,
-    (newLength, oldLength) => {
-        // 只有当长度真正变化时才重新设置
-        if (newLength !== oldLength && chartInstance && indicatorConfig.value.length > 0) {
-            // 重新生成 option（这会创建新的 formatter 闭包，捕获最新的 visibleSeriesQueue）
-            const newOption = getChartOption();
-            chartInstance.setOption(newOption, true);
-        }
+  () => visibleSeriesQueue.value.length,
+  (newLength, oldLength) => {
+    // 只有当长度真正变化时才重新设置
+    if (
+      newLength !== oldLength &&
+      chartInstance &&
+      indicatorConfig.value.length > 0
+    ) {
+      // 重新生成 option（这会创建新的 formatter 闭包，捕获最新的 visibleSeriesQueue）
+      const newOption = getChartOption();
+      chartInstance.setOption(newOption, true);
     }
+  }
 );
-
-
 </script>
 
 <style lang="scss" scoped>
 .chart-wrapper {
+  width: 100%;
+  height: 280px;
+  min-height: 231px;
+  position: relative;
+  /* 为empty-overlay提供定位上下文 */
+
+  .chart-container {
+    width: 100% !important;
+    height: 100% !important;
+    min-width: 100%;
+    min-height: 280px;
+  }
+
+  .empty-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 280px;
-    min-height: 231px;
-    position: relative;
-    /* 为empty-overlay提供定位上下文 */
-
-    .chart-container {
-        width: 100% !important;
-        height: 100% !important;
-        min-width: 100%;
-        min-height: 280px;
-    }
-
-    .empty-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255, 0.9);
-        z-index: 10;
-    }
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.9);
+    z-index: 10;
+  }
 }
 </style>
diff --git a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
index d6d30b22..cc98cf77 100644
--- a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
+++ b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
@@ -1,34 +1,42 @@
 <!-- SidePanelItem.vue -->
 <template>
-  <SidePanelItem title="沿程水温变化" :prompt="prompts" :moreSelect="select" :datetimePicker="datetimePicker"
-    @update-values="handlePanelChange1">
+  <SidePanelItem
+    title="沿程水温变化"
+    :prompt="prompts"
+    :moreSelect="select"
+    :datetimePicker="datetimePicker"
+    @update-values="handlePanelChange1"
+  >
     <a-spin :spinning="loading" tip="加载中...">
-      <div v-show="showemit && !loading" ref="chartRef" class="chart-container"></div>
-      <div v-show="!showemit && !loading" class="chart-container"> <a-empty /></div>
+      <div
+        v-show="showemit && !loading"
+        ref="chartRef"
+        class="chart-container"
+      ></div>
+      <div v-show="!showemit && !loading" class="chart-container">
+        <a-empty />
+      </div>
     </a-spin>
   </SidePanelItem>
-
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, watch, computed } from "vue";
-import * as echarts from "echarts";
-import type { ECharts } from "echarts";
-import SidePanelItem from "@/components/SidePanelItem/index.vue";
-import { getKendoListCust, wbsbGetKendoList } from "@/api/sw";
-import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue';
+import * as echarts from 'echarts';
+import type { ECharts } from 'echarts';
+import SidePanelItem from '@/components/SidePanelItem/index.vue';
+import { getKendoListCust, wbsbGetKendoList } from '@/api/sw';
+import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
 
-import { da } from "element-plus/es/locale/index.mjs";
-import { f } from "vue-router/dist/router-CWoNjPRp.mjs";
-import { useModelStore } from "@/store/modules/model";
+import { da } from 'element-plus/es/locale/index.mjs';
+import { f } from 'vue-router/dist/router-CWoNjPRp.mjs';
+import { useModelStore } from '@/store/modules/model';
 
 const modelStore = useModelStore();
 
-
-
 // 定义组件名（便于调试和递归）
 defineOptions({
-  name: "yanchengshuiwenChangeMod",
+  name: 'yanchengshuiwenChangeMod'
 });
 // 改为动态获取当前时间
 const getCurrentHourTime = () => {
@@ -46,21 +54,21 @@ const baseid: any = ref(null);
 const paramsOne = {
   rvcd: '',
   tm: []
-}
-const dataOne = ref('')
+};
+const dataOne = ref('');
 // 使用 computed 使 prompts 响应 dataOne.value 的变化
 const prompts = computed(() => ({
   show: true,
-  value: `注:最新数据时间为${dataOne.value || getCurrentHourTime()}`,
+  value: `注:最新数据时间为${dataOne.value || getCurrentHourTime()}`
 }));
-const showemit = ref(false)
-const loading = ref(false)
+const showemit = ref(false);
+const loading = ref(false);
 // const selectOptions: any = ref([])
 const optionsFmt = (options: any) =>
   options.map((item: any) => ({
     label: item.wbsName,
     value: item.wbsCode
-  }))
+  }));
 
 const chartRef = ref<HTMLElement | null>(null);
 let chartInstance: ECharts | null = null;
@@ -69,7 +77,9 @@ let chartInstance: ECharts | null = null;
 const stationNames = ref([]);
 
 // 静态数据 - 水温值 (°C)，班多无数据设为 null，使用对象格式携带stcd信息
-const waterTemperatures = ref<{ value: number | null; stcd: string; stnm: string }[]>([]);
+const waterTemperatures = ref<
+  { value: number | null; stcd: string; stnm: string }[]
+>([]);
 
 // 使用 computed 使 currentTime 响应 dataOne.value 的变化
 const currentTime = computed(() => dataOne.value || getCurrentHourTime());
@@ -79,16 +89,16 @@ const select = ref({
   value: '',
   options: [],
   picker: undefined,
-  format: undefined,
+  format: undefined
 });
 
 // 日期选择器配置
 const datetimePicker = ref({
   show: true,
   value: computed(() => getCurrentHourTime()),
-  format: "YYYY-MM-DD HH",
-  picker: "date" as const,
-  options: [],
+  format: 'YYYY-MM-DD HH',
+  picker: 'date' as const,
+  options: []
 });
 // 初始化图表
 const initChart = () => {
@@ -98,14 +108,14 @@ const initChart = () => {
 
   const option = {
     title: {
-      text: "水温(°C)",
+      text: '水温(°C)',
       left: 5,
       top: 0,
       textStyle: {
-        color: "#000000",
+        color: '#000000',
         fontSize: 12,
-        fontWeight: "normal",
-      },
+        fontWeight: 'normal'
+      }
     },
     dataZoom: [
       {
@@ -118,7 +128,7 @@ const initChart = () => {
       }
     ],
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
       formatter: (params: any) => {
         if (params && params.length > 0) {
           const data = params[0];
@@ -129,31 +139,31 @@ const initChart = () => {
             return `${currentTime.value}<br/>${data.name}：-`;
           }
         }
-        return "";
-      },
+        return '';
+      }
     },
     grid: {
-      left: "3%",
-      right: "4%",
-      bottom: "3%",
-      top: "15%",
-      containLabel: true,
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true
     },
     xAxis: {
-      type: "category",
+      type: 'category',
       data: stationNames.value,
       boundaryGap: true,
       axisLine: {
         show: true,
         lineStyle: {
-          color: "#8f8f8f",
-        },
+          color: '#8f8f8f'
+        }
       },
       axisTick: {
-        show: false,
+        show: false
       },
       axisLabel: {
-        color: "#333",
+        color: '#333',
         fontSize: 12,
         margin: 8,
         interval: 0,
@@ -166,76 +176,76 @@ const initChart = () => {
           } else {
             return ` \n${value}`; // 下方标签：空格占位 + 换行 + 文字
           }
-        },
+        }
       },
       splitLine: {
         show: true,
         lineStyle: {
-          color: "#e0e0e0",
-          type: "solid",
-        },
-      },
+          color: '#e0e0e0',
+          type: 'solid'
+        }
+      }
     },
     yAxis: {
-      type: "value",
+      type: 'value',
       min: 0,
       // max: 10,
       interval: 2,
       axisLine: {
         show: true,
         lineStyle: {
-          color: "#8f8f8f",
-        },
+          color: '#8f8f8f'
+        }
       },
       axisTick: {
         show: true,
         length: 3,
         lineStyle: {
-          color: "#8f8f8f",
-        },
+          color: '#8f8f8f'
+        }
       },
       axisLabel: {
-        color: "#333",
-        fontSize: 12,
+        color: '#333',
+        fontSize: 12
       },
       splitLine: {
         show: true,
         lineStyle: {
-          color: "#e0e0e0",
-          type: "solid",
-        },
-      },
+          color: '#e0e0e0',
+          type: 'solid'
+        }
+      }
     },
     series: [
       {
-        name: "水温",
-        type: "line",
+        name: '水温',
+        type: 'line',
         smooth: true,
-        symbol: "circle",
+        symbol: 'circle',
         symbolSize: 6,
-        connectNulls: true,  // 连接空值两侧的线段，避免折线断开
+        connectNulls: true, // 连接空值两侧的线段，避免折线断开
         lineStyle: {
-          color: "#6ca4f7",
-          width: 2,
+          color: '#6ca4f7',
+          width: 2
         },
         itemStyle: {
-          color: "#6ca4f7",
+          color: '#6ca4f7'
         },
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: "rgba(108, 164, 247, 0.3)",
+              color: 'rgba(108, 164, 247, 0.3)'
             },
             {
               offset: 1,
-              color: "rgba(108, 164, 247, 0.05)",
-            },
-          ]),
+              color: 'rgba(108, 164, 247, 0.05)'
+            }
+          ])
         },
-        data: waterTemperatures.value,
-      },
-    ],
+        data: waterTemperatures.value
+      }
+    ]
   };
 
   chartInstance.setOption(option);
@@ -247,11 +257,12 @@ const initChart = () => {
       console.log('stcd:', params.data.stcd);
       console.log('stnm:', params.data.stnm);
       console.log('temperature:', params.data.value);
+      console.log('temperature:', paramsOne.tm);
       modelStore.modalVisible = true;
-      modelStore.params.sttp = "WT";
+      modelStore.params.sttp = 'WT';
       modelStore.title = params.data.stnm;
       modelStore.params.stcd = params.data.stcd;
-      modelStore.params.date = paramsOne.tm;
+      modelStore.filter.rangeTm = [paramsOne.tm[1], paramsOne.tm[0]];
     }
   });
 };
@@ -269,33 +280,48 @@ const init = async () => {
   try {
     const params = {
       filter: {
-        logic: "and",
+        logic: 'and',
         filters: [
-          { field: "rvcd", operator: "eq", dataType: "string", value: paramsOne.rvcd },
-          { field: "tm", operator: "gte", dataType: "date", value: paramsOne.tm[1] },
-          { field: "tm", operator: "lte", dataType: "date", value: paramsOne.tm[0] },
-        ],
+          {
+            field: 'rvcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: paramsOne.rvcd
+          },
+          {
+            field: 'tm',
+            operator: 'gte',
+            dataType: 'date',
+            value: paramsOne.tm[1]
+          },
+          {
+            field: 'tm',
+            operator: 'lte',
+            dataType: 'date',
+            value: paramsOne.tm[0]
+          }
+        ]
       },
-      sort: [{ field: "sort", dir: "asc" }],
+      sort: [{ field: 'sort', dir: 'asc' }]
     };
 
     let res = await getKendoListCust(params);
-    let data = res.data.data || res.data
+    let data = res.data.data || res.data;
 
     if (data.length > 0) {
-      showemit.value = true
+      showemit.value = true;
     } else {
-      showemit.value = false
+      showemit.value = false;
     }
 
     stationNames.value = data
-      .filter((item: any) => item.sttp == "1")
+      .filter((item: any) => item.sttp == '1')
       .map((item: any) => item.stnm);
     console.log(stationNames.value);
 
     // 修改为对象格式，携带stcd和stnm信息
     waterTemperatures.value = data
-      .filter((item: any) => item.sttp == "2")
+      .filter((item: any) => item.sttp == '2')
       .map((item: any) => ({
         value: item.temperature,
         stcd: item.stcd,
@@ -311,13 +337,13 @@ const init = async () => {
         // 如果图表已存在，只更新数据
         chartInstance.setOption({
           xAxis: {
-            data: stationNames.value,
+            data: stationNames.value
           },
           series: [
             {
-              data: waterTemperatures.value,
-            },
-          ],
+              data: waterTemperatures.value
+            }
+          ]
         });
       }
       // 强制重绘，确保尺寸正确
@@ -336,11 +362,11 @@ const init = async () => {
 const getSelectConfig = async () => {
   loading.value = true;
   try {
-    let obj: any = {}
+    let obj: any = {};
     if (baseid.value === 'all') {
-      obj = { rstcdStepSort: 'asc', siteStepSort: 'asc' }
+      obj = { rstcdStepSort: 'asc', siteStepSort: 'asc' };
     } else {
-      obj = { siteStepSort: 'asc' }
+      obj = { siteStepSort: 'asc' };
     }
     const filters = [
       {
@@ -348,13 +374,13 @@ const getSelectConfig = async () => {
         operator: 'eq',
         value: 'PSB_RVCD'
       }
-    ]
+    ];
     if (baseid.value && baseid.value !== 'all') {
       filters.push({
         field: 'objId',
         operator: 'eq', // contains
         value: baseid.value
-      })
+      });
     }
     let data: any = {
       filter: {
@@ -362,10 +388,10 @@ const getSelectConfig = async () => {
         filters
       }
       // select: ['WBS_CODE', 'WBS_NAME']
-    }
+    };
 
     if (obj) {
-      data.sort = [obj]
+      data.sort = [obj];
     } else {
       data = {
         ...data,
@@ -373,31 +399,42 @@ const getSelectConfig = async () => {
           { dir: 'asc', field: 'orderIndex' },
           { dir: 'asc', field: 'wbsCode' },
           { dir: 'asc', field: 'wbsName' },
-          { dir: 'asc', field: 'objid' },
+          { dir: 'asc', field: 'objid' }
         ],
         groupResultFlat: true
-      }
+      };
     }
-    let res = await wbsbGetKendoList(data)
-    let dataOne = res?.data?.data || res?.data
+    let res = await wbsbGetKendoList(data);
+    let dataOne = res?.data?.data || res?.data;
 
     if (dataOne.length > 0) {
-      let dataMapNameMap: any = {}
-      let jiDiListMap: any = {}
+      let dataMapNameMap: any = {};
+      let jiDiListMap: any = {};
       JidiSelectEventStore.jidiData.forEach((item: any) => {
-        jiDiListMap[item.wbsCode] = item.wbsName
-      })
+        jiDiListMap[item.wbsCode] = item.wbsName;
+      });
 
       dataOne.map((item: any, index: number) => {
-        const { stcd, stnm, objId } = item
+        const { stcd, stnm, objId } = item;
         if (dataMapNameMap[objId]) {
-          dataMapNameMap[objId].push({ ...item, baseName: jiDiListMap[objId], baseId: objId })
+          dataMapNameMap[objId].push({
+            ...item,
+            baseName: jiDiListMap[objId],
+            baseId: objId
+          });
         } else {
-          dataMapNameMap[objId] = [{ ...item, baseName: jiDiListMap[objId], baseId: objId }]
+          dataMapNameMap[objId] = [
+            { ...item, baseName: jiDiListMap[objId], baseId: objId }
+          ];
         }
-        return { label: item.wbsName, value: item.wbsCode, baseId: objId, baseName: jiDiListMap[objId] }
-      })
-      let dataMapNameArr: any = []
+        return {
+          label: item.wbsName,
+          value: item.wbsCode,
+          baseId: objId,
+          baseName: jiDiListMap[objId]
+        };
+      });
+      let dataMapNameArr: any = [];
 
       Object.keys(dataMapNameMap).forEach((item: any) => {
         dataMapNameArr.push({
@@ -409,24 +446,29 @@ const getSelectConfig = async () => {
             return {
               title: item2.wbsName,
               value: item2.wbsCode
-            }
+            };
           })
-        })
-      })
+        });
+      });
       dataMapNameArr = dataMapNameArr.sort((a: any, b: any) => {
-        const indexA = JidiSelectEventStore.jidiData.findIndex(item => item.wbsCode === a.value);
-        const indexB = JidiSelectEventStore.jidiData.findIndex(item => item.wbsCode === b.value);
+        const indexA = JidiSelectEventStore.jidiData.findIndex(
+          item => item.wbsCode === a.value
+        );
+        const indexB = JidiSelectEventStore.jidiData.findIndex(
+          item => item.wbsCode === b.value
+        );
         return indexA - indexB;
-      })
-      select.value.options = filterSelectOptions(dataMapNameArr)
+      });
+      select.value.options = filterSelectOptions(dataMapNameArr);
       if (baseid.value === 'all') {
-        select.value.value = 'SJLY1U'
+        select.value.value = 'SJLY1U';
       } else if (filterSelectOptions(dataMapNameArr)[0]?.children) {
-        select.value.value = filterSelectOptions(dataMapNameArr)[0]?.children[0]?.value
+        select.value.value =
+          filterSelectOptions(dataMapNameArr)[0]?.children[0]?.value;
       } else if (filterSelectOptions(dataMapNameArr)[0]?.value) {
-        select.value.value = filterSelectOptions(dataMapNameArr)[0]?.value
+        select.value.value = filterSelectOptions(dataMapNameArr)[0]?.value;
       } else {
-        select.value.value = ''
+        select.value.value = '';
       }
     }
   } catch (error) {
@@ -434,31 +476,39 @@ const getSelectConfig = async () => {
   } finally {
     loading.value = false;
   }
-}
+};
 
 const filterSelectOptions = (selectOptions: any) => {
-  if (selectOptions?.length === 1 && selectOptions?.[0]?.children?.length === 1) {
-    return [{ ...selectOptions?.[0]?.children?.[0], isLeaf: true }]
+  if (
+    selectOptions?.length === 1 &&
+    selectOptions?.[0]?.children?.length === 1
+  ) {
+    return [{ ...selectOptions?.[0]?.children?.[0], isLeaf: true }];
   } else if (selectOptions.length) {
-    return selectOptions.map((e) => {
+    return selectOptions.map(e => {
       if (e?.children?.length > 1) {
-        return { ...e, isLeaf: false, selectable: true, children: e.children.map((item) => ({ ...item, isLeaf: true })) }
+        return {
+          ...e,
+          isLeaf: false,
+          selectable: true,
+          children: e.children.map(item => ({ ...item, isLeaf: true }))
+        };
       } else {
-        return { ...e.children[0], isLeaf: true }
+        return { ...e.children[0], isLeaf: true };
       }
-    })
+    });
   }
-  return []
-}
+  return [];
+};
 //监听子组件的数据变化
-const handlePanelChange1 = (data) => {
+const handlePanelChange1 = data => {
   console.log('当前所有控件状态:', data);
   if (data.moreSelect) {
-    paramsOne.rvcd = data.moreSelect
+    paramsOne.rvcd = data.moreSelect;
   }
 
   if (data.datetime) {
-    dataOne.value = data.datetime
+    dataOne.value = data.datetime;
     const datetime = data.datetime;
 
     // 解析日期和时间
@@ -466,7 +516,14 @@ const handlePanelChange1 = (data) => {
     const [year, month, day] = datePart.split('-').map(Number);
 
     // 创建当前时间的 Date 对象
-    const currentDate = new Date(year, month - 1, day, parseInt(hourPart), 0, 0);
+    const currentDate = new Date(
+      year,
+      month - 1,
+      day,
+      parseInt(hourPart),
+      0,
+      0
+    );
 
     // 创建一个月前的 Date 对象
     const previousDate = new Date(year, month - 2, day, 0, 0, 0);
@@ -484,23 +541,22 @@ const handlePanelChange1 = (data) => {
 
     // 生成结果数组
     const result = [
-      formatDate(currentDate),   // "2026-05-15 15:00:00"
-      formatDate(previousDate)   // "2026-04-15 00:00:00"
+      formatDate(currentDate), // "2026-05-15 15:00:00"
+      formatDate(previousDate) // "2026-04-15 00:00:00"
     ];
-    paramsOne.tm = result
-    console.log(paramsOne.tm, 'paramsOne.tm')
+    paramsOne.tm = result;
+    console.log(paramsOne.tm, 'paramsOne.tm');
   }
   if (paramsOne.rvcd || paramsOne.tm.length > 0) {
     init();
   }
-
-}
+};
 
 watch(
   () => JidiSelectEventStore.selectedItem,
-  (newVal) => {
+  newVal => {
     baseid.value = newVal.wbsCode;
-    getSelectConfig()
+    getSelectConfig();
   },
   { deep: true, immediate: true }
 );
@@ -508,12 +564,12 @@ watch(
 onMounted(() => {
   // 延迟初始化，确保 DOM 渲染完成
   init();
-  window.addEventListener("resize", handleResize);
+  window.addEventListener('resize', handleResize);
 });
 
 // 组件卸载前清理
 onBeforeUnmount(() => {
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize);
   chartInstance?.dispose();
 });
 </script>