From ac32e8c026b8882a122cd1e0974ff0ccc05add46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E5=87=AF?= <2448379534@qq.com>
Date: Mon, 1 Jun 2026 08:37:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B0=B4=E8=B4=A8=E6=8E=A5=E5=8F=A3=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5-=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.env.development                     |   4 +-
 frontend/src/api/sz/index.ts                  |  50 +
 .../src/components/MapModal/column.config.ts  |  32 +-
 .../components/WaterTemperatureContrast.vue   |  17 +-
 .../src/components/MapModal/setting.config.ts |   2 +-
 .../src/components/SidePanelItem/index.vue    |  54 +-
 .../EnvironmentalQualityTwoLayers.vue         | 844 +++++++++++++++++
 .../modules/EnvironmentalQuality/index.vue    | 859 ++++++++++++++++--
 ...eixingzuchengjijieruqingkuangTwoLayers.vue |  22 +-
 .../index.vue                                 |  13 +-
 .../index.vue                                 |  41 +-
 .../src/modules/shuiWenNianNeiFenBu/index.vue |   2 +-
 .../shuiwenjiancegongzuoEJ.vue                |  72 +-
 .../modules/shuizhijiancegongzuoQK/index.vue  | 239 ++++-
 .../shuiwenjiancegongzuoEJ.vue                | 636 +++++++++++++
 frontend/src/modules/waterQuality/index.vue   | 500 +++++++++-
 .../yanchengshuiwenChangeMod/index.vue        |  11 +-
 frontend/src/utils/request.ts                 |   2 +-
 .../shuiHuanJingZhiLiangZhuangKuang.vue       |   3 +-
 19 files changed, 3180 insertions(+), 223 deletions(-)
 create mode 100644 frontend/src/api/sz/index.ts
 create mode 100644 frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
 create mode 100644 frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue

diff --git a/frontend/.env.development b/frontend/.env.development
index c9ce1af6..3c90805a 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -7,12 +7,12 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/dev-api'
 # 本地环境
-# VITE_APP_BASE_URL = 'http://localhost:8093'
+VITE_APP_BASE_URL = 'http://localhost:8093'
 # 测试环境
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
 # VITE_APP_BASE_URL = 'http://172.16.21.142:8096'
 # 汤伟
-VITE_APP_BASE_URL = 'http://10.84.121.21:8093'
+# VITE_APP_BASE_URL = 'http://10.84.121.21:8093'
 # VITE_APP_BASE_URL = 'http://192.168.1.162:8093'
 
 # 测试环境线上
diff --git a/frontend/src/api/sz/index.ts b/frontend/src/api/sz/index.ts
new file mode 100644
index 00000000..3433aa41
--- /dev/null
+++ b/frontend/src/api/sz/index.ts
@@ -0,0 +1,50 @@
+import request from '@/utils/request';
+//水质监测工作开展情况
+export function msstbprptGetKendoList(data: any) {
+  return request({
+    url: '/api/dec-lygk-base-server/base/msstbprpt/GetKendoList',
+    method: 'post',
+    data
+  });
+}
+////水温监测工作开展情况弹框
+export function vmsstbprptGetKendoList(data: any) {
+  return request({
+    url: '/wq/vmsstbprpt/GetKendoList',
+    method: 'post',
+    data
+  });
+}
+//地表水水质达标率
+export function wqGetKendoListCust(data: any) {
+  return request({
+    url: '/api/wmp-env-server/env/wq/GetKendoListCust',
+    method: 'post',
+    data
+  });
+}
+
+//环境质量满足度 - 表格数据列表
+export function wqGetKendoList(data: any) {
+  return request({
+    url: '/api/wmp-env-server/env/wq/GetKendoListCust',
+    method: 'post',
+    data
+  });
+}
+//沿程水质变化_ 图表数据
+export function qgcGetKendoListCust(data: any) {
+  return request({
+    url: '/api/wmp-env-server/env/wq/along/qgc/GetKendoListCust',
+    method: 'post',
+    data
+  });
+}
+//沿程水质变化_ 根据流域获取河段  https://211.99.26.225:12122
+export function wbsbGetKendoList(data: any) {
+  return request({
+    url: '/api/dec-lygk-base-server/base/wbsb/GetKendoList',
+    method: 'post',
+    data
+  });
+}
\ No newline at end of file
diff --git a/frontend/src/components/MapModal/column.config.ts b/frontend/src/components/MapModal/column.config.ts
index 0856aa04..975b9a94 100644
--- a/frontend/src/components/MapModal/column.config.ts
+++ b/frontend/src/components/MapModal/column.config.ts
@@ -1455,7 +1455,7 @@ const FPPointColumns: Array<any> = [
     filed: 'inv',
     visible: true,
     type: 'number',
-    toFixed: 4,
+    toFixed: 6,
     url: '',
   },
   {
@@ -1629,7 +1629,7 @@ const FBPointColumns: Array<any> = [
     filed: 'inv',
     visible: true,
     type: 'number',
-    toFixed: 4,
+    toFixed: 6,
     url: '',
   },
   {
@@ -1760,7 +1760,7 @@ const VaPointColumns: Array<any> = [
     filed: 'inv',
     visible: true,
     type: 'number',
-    toFixed: 4,
+   toFixed: 6,
     url: '',
   },
   {
@@ -2149,6 +2149,7 @@ const DwPointColumns: Array<any> = [
     filed: 'nrmxavwt',
     visible: true,
     type: 'number',
+    toFixed: 1,
     url: '',
   },
   {
@@ -2156,6 +2157,7 @@ const DwPointColumns: Array<any> = [
     filed: 'nrmnavwt',
     visible: true,
     type: 'number',
+    toFixed: 1,
     url: '',
   },
   {
@@ -2163,6 +2165,7 @@ const DwPointColumns: Array<any> = [
     filed: 'dnavwt',
     visible: true,
     type: 'number',
+    toFixed: 1,
     url: '',
   },
   {
@@ -2170,6 +2173,7 @@ const DwPointColumns: Array<any> = [
     filed: 'dnmxavwt',
     visible: true,
     type: 'number',
+    toFixed: 1,
     url: '',
   },
   {
@@ -2177,6 +2181,7 @@ const DwPointColumns: Array<any> = [
     filed: 'dnwnavwt',
     visible: true,
     type: 'number',
+    toFixed: 1,
     url: '',
   },
   {
@@ -2200,7 +2205,7 @@ const DwPointColumns: Array<any> = [
     filed: 'inv',
     visible: true,
     type: 'number',
-    toFixed: 4,
+    toFixed: 6,
     url: '',
   },
   {
@@ -2336,6 +2341,7 @@ const DwFivePointColumns: Array<any> = [
     filed: 'nrmxavwt',
     visible: true,
     type: 'number',
+     toFixed: 1,
     url: '',
   },
   {
@@ -2343,6 +2349,7 @@ const DwFivePointColumns: Array<any> = [
     filed: 'nrmnavwt',
     visible: true,
     type: 'number',
+     toFixed: 1,
     url: '',
   },
   {
@@ -2350,6 +2357,7 @@ const DwFivePointColumns: Array<any> = [
     filed: 'dnavwt',
     visible: true,
     type: 'number',
+     toFixed: 1,
     url: '',
   },
   {
@@ -2357,6 +2365,7 @@ const DwFivePointColumns: Array<any> = [
     filed: 'dnmxavwt',
     visible: true,
     type: 'number',
+     toFixed: 1,
     url: '',
   },
   {
@@ -2364,6 +2373,7 @@ const DwFivePointColumns: Array<any> = [
     filed: 'dnwnavwt',
     visible: true,
     type: 'number',
+     toFixed: 1,
     url: '',
   },
 
@@ -2372,7 +2382,7 @@ const DwFivePointColumns: Array<any> = [
     filed: 'inv',
     visible: true,
     type: 'number',
-    toFixed: 4,
+    toFixed: 6,
     url: '',
   },
   {
@@ -2627,7 +2637,7 @@ const DwOnePointColumns: Array<any> = [
     filed: 'nrmxavwt',
     visible: true,
     type: 'number',
-    toFixed: 2,
+    toFixed: 1,
     url: '',
   },
   {
@@ -2635,7 +2645,7 @@ const DwOnePointColumns: Array<any> = [
     filed: 'nrmnavwt',
     visible: true,
     type: 'number',
-    toFixed: 2,
+    toFixed: 1,
     url: '',
   },
   {
@@ -2643,7 +2653,7 @@ const DwOnePointColumns: Array<any> = [
     filed: 'dnavwt',
     visible: true,
     type: 'number',
-    toFixed: 2,
+    toFixed: 1,
     url: '',
   },
   {
@@ -2651,7 +2661,7 @@ const DwOnePointColumns: Array<any> = [
     filed: 'dnmxavwt',
     visible: true,
     type: 'number',
-    toFixed: 2,
+    toFixed: 1,
     url: '',
   },
   {
@@ -2659,7 +2669,7 @@ const DwOnePointColumns: Array<any> = [
     filed: 'dnmnavwt',
     visible: true,
     type: 'number',
-    toFixed: 2,
+    toFixed: 1,
     url: '',
   },
   {
@@ -2667,7 +2677,7 @@ const DwOnePointColumns: Array<any> = [
     filed: 'inv',
     visible: true,
     type: 'number',
-    toFixed: 4,
+    toFixed: 6,
     url: '',
   },
   {
diff --git a/frontend/src/components/MapModal/components/WaterTemperatureContrast.vue b/frontend/src/components/MapModal/components/WaterTemperatureContrast.vue
index 6837ef96..16f4feff 100644
--- a/frontend/src/components/MapModal/components/WaterTemperatureContrast.vue
+++ b/frontend/src/components/MapModal/components/WaterTemperatureContrast.vue
@@ -392,11 +392,12 @@ const getChartOption = computed(() => {
                 params.forEach((param: any) => {
                     const dataIndex = param.dataIndex;
                     const record = data[dataIndex];
+                    const value = param.value != null ? param.value : '-';
 
                     html += `
                         <div style="display:flex;align-items:center;margin:4px 0;">
                             <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${param.color};margin-right:8px;"></span>
-                            <span>${param.seriesName}: ${param.value}°C</span>
+                            <span>${param.seriesName}: ${value}°C</span>
                         </div>
                     `;
 
@@ -433,7 +434,19 @@ const getChartOption = computed(() => {
                 show: false
             },
             axisLabel: {
-                interval: xAxisData.length > 7 ? Math.floor((xAxisData.length - 1) / 7) : 0,
+                interval: (() => {
+                    const dataLen = xAxisData.length;
+                    if (dataLen <= 8) return 0; // 数据少时全部显示
+                    
+                    // 计算最大允许的间隔，确保首尾都能显示
+                    // 需要显示的首尾2个 + 中间最多6个 = 总共8个标签
+                    const maxLabels = 8;
+                    const minInterval = Math.ceil((dataLen - 1) / (maxLabels - 1));
+                    
+                    // 如果原有计算的间隔更大，使用原有逻辑；否则使用最小间隔
+                    const calculatedInterval = Math.floor((dataLen - 1) / 7);
+                    return Math.max(calculatedInterval, minInterval);
+                })(),
                 fontSize: 12,
                 rotate: 0,
                 margin: 10
diff --git a/frontend/src/components/MapModal/setting.config.ts b/frontend/src/components/MapModal/setting.config.ts
index 4094836e..a868bd18 100644
--- a/frontend/src/components/MapModal/setting.config.ts
+++ b/frontend/src/components/MapModal/setting.config.ts
@@ -661,7 +661,7 @@ const WQFBTabs: Array<any> = [
     name: '基础信息',
     key: 'basicInfo',
     type: 'basic',
-    url: '/bbi/siteBipc/getSiteBasicInfo'
+    url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo'
   },
   {
     name: '监测数据',
diff --git a/frontend/src/components/SidePanelItem/index.vue b/frontend/src/components/SidePanelItem/index.vue
index 36e07e6d..c23835e2 100644
--- a/frontend/src/components/SidePanelItem/index.vue
+++ b/frontend/src/components/SidePanelItem/index.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, watch, computed, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
 import {
     QuestionCircleOutlined,
     InfoCircleOutlined
@@ -186,6 +186,9 @@ const scopeDateValue = ref<[Dayjs, Dayjs] | undefined>(
 );
 const tabsValue = ref(props.tabs.value)
 
+// 保存最后一次选择的月份值（用于从year切换回month时恢复月份）
+const lastMonthValue = ref<string | null>(null);
+
 // 树形选择器展开状态管理
 const treeExpandedKeys = ref<string[]>([])
 const nodeMap = new Map<string, { node: any; parentKey: string | null }>()
@@ -229,15 +232,19 @@ const createDisabledDateFn = (pickerType: string) => {
 /**
  * 单日期选择器的时间禁用函数（针对 show-time）
  * 精确限制到当前时刻的时分秒
+ * @param current - 用户当前悬停或选择的日期（由 Ant Design Vue 自动传入）
  */
-const disabledTimeForSinglePicker = () => {
+const disabledTimeForSinglePicker = (current?: Dayjs) => {
     // 只在 datetimePicker 显示且为 date 类型时生效
     if (!props.datetimePicker.show || props.datetimePicker.picker !== 'date') {
         return undefined
     }
 
     const now = dayjs()
-    const selectedDate = datetimeValue.value
+    
+    // 关键修复：使用传入的 current 参数，而不是 datetimeValue.value
+    // current 是用户当前在面板中操作的日期，会实时响应面板内的日期切换
+    const selectedDate = current || datetimeValue.value
 
     // 如果未选择日期，或选择的不是今天，则不限制时间
     if (!selectedDate || !selectedDate.isSame(now, 'day')) {
@@ -531,7 +538,10 @@ const getPopupContainer = (trigger: HTMLElement) => {
 
 //时间选择框事件处理
 const handleDateTimeChange = (date: any | null, dateString: string) => {
-    // Handle date time change
+    // 当选择器为 month 时，保存当前选择的月份值
+    if (props.datetimePicker.picker === 'month' && date) {
+        lastMonthValue.value = dayjs(date).format('YYYY-MM');
+    }
 };
 
 const handleTabClick = (value: string) => {
@@ -654,6 +664,31 @@ watch(
     }
 );
 
+// 监听 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;
+        }
+    }
+);
+
 // 监听 moreSelectValue 变化（包括默认值和用户选择）
 watch(() => moreSelectValue.value, (newValue) => {
     console.log('moreSelectValue 变化:', newValue)
@@ -691,9 +726,20 @@ watch(() => processedMoreSelectOptions.value, (newData) => {
 
 // 页面加载时执行的逻辑
 onMounted(() => {
+    // 如果初始 picker 是 month，保存初始月份值
+    if (props.datetimePicker.picker === 'month' && datetimeValue.value) {
+        lastMonthValue.value = datetimeValue.value.format('YYYY-MM');
+    }
+    
     // 初始化时发送一次默认值
     emitAllValues();
 });
+
+// 组件卸载时清空状态，避免影响其他页面
+onUnmounted(() => {
+    // 清空月份记忆，防止组件复用时的状态污染
+    lastMonthValue.value = null;
+});
 </script>
 
 <style lang="scss">
diff --git a/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue b/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
new file mode 100644
index 00000000..a73b0aa4
--- /dev/null
+++ b/frontend/src/modules/EnvironmentalQuality/TwoLayers/EnvironmentalQualityTwoLayers.vue
@@ -0,0 +1,844 @@
+<template>
+    <div class="environmental-quality-container">
+        <!-- 搜索区域 -->
+        <a-form ref="formRef" :model="formState" layout="inline" class="search-form">
+            <a-space wrap>
+                <a-form-item label="所属基地" name="dataDimensionVal">
+                    <a-select 
+                        v-model:value="formState.dataDimensionVal" 
+                        placeholder="请选择" 
+                        style="width: 120px"
+                        show-search
+                        :filter-option="filterBaseOption"
+                        option-filter-prop="label"
+                        @change="handleBaseChange"
+                    >
+                        <a-select-option 
+                            v-for="item in baseList" 
+                            :key="item.baseid" 
+                            :value="item.baseid"
+                            :label="item.basename"
+                        >
+                            {{ item.basename }}
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item v-if="formState.dataDimensionVal === 'all'" label="测站类型" name="dtinType">
+                    <a-select 
+                        v-model:value="formState.dtinType" 
+                        placeholder="请选择" 
+                        style="width: 100px"
+                        show-search
+                        :filter-option="filterOption"
+                        option-filter-prop="label"
+                    >
+                        <a-select-option value="" label="全部">全部</a-select-option>
+                        <a-select-option value="0" label="自建水质站">自建水质站</a-select-option>
+                        <a-select-option value="1" label="国家水质站">国家水质站</a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item label="时间维度" name="types">
+                    <a-select 
+                        v-model:value="formState.types" 
+                        placeholder="请选择" 
+                        style="width: 80px"
+                        show-search
+                        :filter-option="filterOption"
+                        option-filter-prop="label"
+                    >
+                        <a-select-option value="year" label="年度">年度</a-select-option>
+                        <a-select-option value="month" label="月度">月度</a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item label="达标状态" name="sfdb">
+                    <a-select 
+                        v-model:value="formState.sfdb" 
+                        placeholder="请选择" 
+                        style="width: 100px"
+                        show-search
+                        :filter-option="filterOption"
+                        option-filter-prop="label"
+                    >
+                        <a-select-option value="" label="全部">全部</a-select-option>
+                        <a-select-option value="0" label="不达标">不达标</a-select-option>
+                        <a-select-option value="1" label="达标">达标</a-select-option>
+                        <a-select-option value="2" label="无目标等级/无数据">无目标等级/无数据</a-select-option>
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item label="时间" name="dateValues">
+                    <a-month-picker 
+                        v-if="formState.types === 'month'"
+                        v-model:value="formState.dateValues" 
+                        format="YYYY-MM" 
+                        placeholder="请选择月份" 
+                        style="width: 160px"
+                        :disabled-date="disabledMonthDate"
+                    />
+                    <a-year-picker 
+                        v-else
+                        v-model:value="formState.dateValues" 
+                        format="YYYY" 
+                        placeholder="请选择年份" 
+                        style="width: 160px"
+                        :disabled-date="disabledYearDate"
+                    />
+                </a-form-item>
+
+                <a-form-item label="断面名称" name="stnm">
+                    <a-input 
+                        v-model:value="formState.stnm" 
+                        placeholder="请输入断面名称" 
+                        style="width: 200px" 
+                        allow-clear 
+                    />
+                </a-form-item>
+
+                <a-form-item>
+                    <a-space>
+                        <a-button type="primary" @click="handleSearch">查询</a-button>
+                        <a-button @click="handleReset">重置</a-button>
+                    </a-space>
+                </a-form-item>
+            </a-space>
+        </a-form>
+
+        <!-- 图表和表格布局区域 -->
+        <div class="content-layout">
+            <!-- 左侧饼图区域 -->
+            <div class="chart-section">
+                <a-spin :spinning="pieLoading" tip="加载中...">
+                    <div ref="pieChartRef" class="pie-chart-container"></div>
+                    <div v-if="!showPieChart && !pieLoading" class="empty-overlay">
+                        <a-empty description="暂无数据" />
+                    </div>
+                </a-spin>
+            </div>
+
+            <!-- 右侧表格区域 -->
+            <div class="table-section">
+                <BasicTable 
+                    ref="tableRef" 
+                    :scrollY="360" 
+                    :columns="columns"
+                    :list-url="wqGetKendoList" 
+                    :search-params="{ sort: sortConfig }"
+                    :transform-data="customTransform"
+                >
+                    <template #bodyCell="{ column, record }">
+                        <!-- 断面名称列 - 可点击 -->
+                        <template v-if="column.key === 'stnm'">
+                            <a @click="handleViewStnmDetail(record)" class="text-link">
+                                {{ record.stnm }}
+                            </a>
+                        </template>
+                        <!-- 操作列 -->
+                        <template v-if="column.key === 'action'">
+                            <a @click="handleViewDetail(record)" class="text-link">
+                                查看详情
+                            </a>
+                        </template>
+                    </template>
+                </BasicTable>
+            </div>
+        </div>
+
+        <!-- 详情弹窗 -->
+        <a-modal 
+            v-model:open="detailModalVisible" 
+            :title="`${detailData.stnm || ''} 详细信息`" 
+            width="80%"
+            :footer="null"
+            @cancel="handleDetailModalClose"
+        >
+            <div class="modal-content">
+                <!-- TODO: 这里放置详情组件，待后续实现 -->
+                <p>详情内容待实现...</p>
+                <pre>{{ detailData }}</pre>
+            </div>
+        </a-modal>
+
+        <!-- 地图弹窗（断面名称点击） -->
+        <a-modal 
+            v-model:open="mapModalVisible" 
+            :title="`${mapModalData.titleName || ''} 详情信息`" 
+            width="80%"
+            :footer="null"
+            @cancel="handleMapModalClose"
+        >
+            <div class="modal-content">
+                <!-- TODO: 这里放置地图标签页组件，待后续实现 -->
+                <p>地图详情内容待实现...</p>
+                <pre>{{ mapModalData }}</pre>
+            </div>
+        </a-modal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { message } from 'ant-design-vue'
+import * as echarts from 'echarts'
+import dayjs, { Dayjs } from 'dayjs'
+import BasicTable from '@/components/BasicTable/index.vue'
+import {  wqGetKendoList } from '@/api/sz'
+
+// Props 定义
+const props = defineProps<{
+    datas?: Array<{ baseid: string; basename: string }>  // 基地列表
+    type?: 'month' | 'year'  // 时间维度
+    modalData?: string  // 模态框数据
+    dateValue?: string | Dayjs  // 日期值
+    dataDimensionVal?: string  // 数据维度值
+    buildType?: string | number  // 建设类型
+}>()
+
+// Refs
+const formRef = ref()
+const tableRef = ref()
+const pieChartRef = ref<HTMLElement | null>(null)
+let pieChartInstance: echarts.ECharts | null = null
+
+// State
+const formState = reactive({
+    dataDimensionVal: props.dataDimensionVal || '',
+    dtinType: '',
+    types: props.type || 'month',
+    sfdb: '',
+    dateValues: props.dateValue ? (typeof props.dateValue === 'string' ? dayjs(props.dateValue, props.type === 'month' ? 'YYYY-MM' : 'YYYY') : props.dateValue) : dayjs(),
+    stnm: ''
+})
+
+const baseList = computed(() => props.datas || [])
+const pieLoading = ref(false)
+const showPieChart = ref(true)
+const pieCode = ref<string[]>([])  // 饼图选中的代码，用于过滤表格
+
+// 弹窗相关
+const detailModalVisible = ref(false)
+const detailData = ref<any>({})
+const mapModalVisible = ref(false)
+const mapModalData = ref<any>({})
+
+// 排序配置
+const sortConfig = computed(() => [
+    { field: 'rstcdStepSort', dir: 'asc' },
+    { field: 'stnm', dir: 'asc' },
+    { field: 'tm', dir: 'desc' }
+])
+
+// 获取列表URL
+const getListUrl = async (params: any) => {
+    try {
+        const res = await wqGetKendoList(params)
+        return res
+    } catch (error) {
+        console.error('获取表格数据失败:', error)
+        message.error('获取表格数据失败')
+        return { data: { data: [], total: 0 } }
+    }
+}
+
+// 自定义数据转换
+const customTransform = (res: any) => {
+    return {
+        records: res?.data?.data || [],
+        total: res?.data?.total || 0
+    }
+}
+
+// 表格列定义
+const columns = [
+    {
+        title: '日期',
+        dataIndex: 'tm',
+        key: 'tm',
+        width: 120,
+        customRender: ({ record }: any) => {
+            const date = record.tm
+            if (!date) return '-'
+            if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
+                return date
+            }
+            if (typeof date === 'string' && date.includes(' ')) {
+                return date.split(' ')[0]
+            }
+            return date
+        }
+    },
+    {
+        title: '断面名称',
+        dataIndex: 'stnm',
+        key: 'stnm',
+        width: 150,
+        ellipsis: true
+    },
+    {
+        title: '断面编码',
+        dataIndex: 'stcd',
+        key: 'stcd',
+        width: 120,
+        visible: false
+    },
+    {
+        title: '测站类型',
+        dataIndex: 'sttypeName',
+        key: 'sttypeName',
+        width: 120
+    },
+    {
+        title: '达标状态',
+        dataIndex: 'sfdbName',
+        key: 'sfdbName',
+        width: 120
+    },
+    {
+        title: '水质要求',
+        dataIndex: 'wwqtgName',
+        key: 'wwqtgName',
+        width: 120
+    },
+    {
+        title: '当前水质',
+        dataIndex: 'wqGrdName',
+        key: 'wqGrdName',
+        width: 120
+    },
+    {
+        title: '去年同期水质',
+        dataIndex: 'beforeWqGrdName',
+        key: 'beforeWqGrdName',
+        width: 150
+    },
+    {
+        title: '操作',
+        key: 'action',
+        width: 100,
+        fixed: 'right'
+    }
+]
+
+// 禁用未来月份
+const disabledMonthDate = (current: Dayjs) => {
+    if (!current) return false
+    const now = dayjs()
+    return current.isAfter(now, 'month')
+}
+
+// 禁用未去年份
+const disabledYearDate = (current: Dayjs) => {
+    if (!current) return false
+    const now = dayjs()
+    return current.year() > now.year()
+}
+
+// 基地选择器搜索过滤函数
+const filterBaseOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+// 通用下拉框搜索过滤函数
+const filterOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+// 获取饼图数据
+const fetchPieData = async () => {
+    pieLoading.value = true
+    
+    try {
+        // 计算时间参数
+        const timeFormat = formState.types === 'month' ? 'YYYY-MM' : 'YYYY'
+        const startTime = formState.dateValues ? formState.dateValues.format(timeFormat) : ''
+        
+        if (!startTime || !formState.dataDimensionVal) {
+            showPieChart.value = false
+            return
+        }
+
+        // 构建请求参数
+        const filters: any[] = [
+            {
+                field: 'baseId',
+                operator: 'eq',
+                dataType: 'string',
+                value: formState.dataDimensionVal
+            },
+            {
+                field: 'type',
+                operator: 'eq',
+                dataType: 'string',
+                value: 'DAY'
+            },
+            formState.types === 'month' ? {
+                field: 'drMonth',
+                operator: 'eq',
+                dataType: 'string',
+                value: startTime
+            } : {
+                field: 'drYear',
+                operator: 'eq',
+                dataType: 'string',
+                value: startTime
+            },
+            formState.dataDimensionVal !== 'all' ? {
+                field: 'rstcd',
+                operator: 'eq',
+                dataType: 'string',
+                value: formState.dataDimensionVal
+            } : null,
+            formState.sfdb ? {
+                field: 'sfdb',
+                operator: 'eq',
+                dataType: 'string',
+                value: formState.sfdb
+            } : null,
+            formState.stnm ? {
+                field: 'stnm',
+                operator: 'contains',
+                dataType: 'string',
+                value: formState.stnm
+            } : null,
+            formState.dataDimensionVal == 'all' && formState.dtinType ? {
+                field: 'dtinType',
+                operator: 'eq',
+                dataType: 'string',
+                value: formState.dtinType
+            } : null
+        ].filter(Boolean)
+
+        const params = {
+            filter: {
+                logic: 'and',
+                filters
+            }
+        }
+
+        // 调用API获取饼图数据
+        const res = await wqGetKendoList(params)
+        
+        let data = res?.data?.data || res?.data || []
+
+        if (data.length === 0) {
+            showPieChart.value = false
+            return
+        }
+
+        // 转换数据格式
+        const dataSource = data.map((item: any) => ({
+            name: item.keyName || 'null',
+            value: item.count,
+            key: item.keyName === '达标' ? 'DB_STATUS_1' : item.keyName === '不达标' ? 'DB_STATUS_0' : 'CURNODATA',
+            keyData: item?.key
+        }))
+
+        // 过滤掉"无数据"项
+        const filteredDataSource = dataSource.filter(item => item.name !== '无数据')
+
+        if (filteredDataSource.length === 0) {
+            showPieChart.value = false
+            return
+        }
+
+        showPieChart.value = true
+        
+        // 初始化或更新饼图
+        await nextTick()
+        initPieChart(filteredDataSource)
+        
+    } catch (error) {
+        console.error('获取饼图数据失败:', error)
+        message.error('获取饼图数据失败')
+        showPieChart.value = false
+    } finally {
+        pieLoading.value = false
+    }
+}
+
+// 初始化饼图
+const initPieChart = (data: any[]) => {
+    if (!pieChartRef.value) return
+
+    // 如果实例已存在，先销毁
+    if (pieChartInstance) {
+        pieChartInstance.dispose()
+        pieChartInstance = null
+    }
+
+    pieChartInstance = echarts.init(pieChartRef.value)
+
+    // 计算总数
+    const total = data.reduce((sum, item) => sum + item.value, 0)
+
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c} 次 ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            right: '10%',
+            top: '10%',
+            data: data.map(item => item.name)
+        },
+        title: [
+            {
+                text: total.toString(),
+                left: '45%',
+                top: '50%',
+                textAlign: 'center',
+                textStyle: {
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    color: '#333'
+                }
+            },
+            {
+                text: '监测总次数',
+                left: '45%',
+                top: '56%',
+                textAlign: 'center',
+                textStyle: {
+                    fontSize: 12,
+                    color: '#666'
+                }
+            },
+            {
+                text: '(次)',
+                left: '45%',
+                top: '61%',
+                textAlign: 'center',
+                textStyle: {
+                    fontSize: 10,
+                    color: '#999'
+                }
+            }
+        ],
+        series: [
+            {
+                name: '断面总数量',
+                type: 'pie',
+                radius: ['20%', '35%'],
+                center: ['45%', '55%'],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                label: {
+                    show: true,
+                    formatter: '{b}: {c} ({d}%)'
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 14,
+                        fontWeight: 'bold'
+                    }
+                },
+                data: data
+            }
+        ]
+    }
+
+    // 颜色配置（根据数据类型动态设置）
+    const colorConfig: any = {
+        color: ['#52c41a', '#ff4d4f', '#d9d9d9']
+    }
+
+    pieChartInstance.setOption({ ...option, ...colorConfig })
+
+    // 绑定点击事件 - 过滤表格数据
+    pieChartInstance.on('legendselectchanged', (params: any) => {
+        const selectedKeys = Object.keys(params.selected).filter(key => params.selected[key])
+        const allFalse = Object.values(params.selected).every(value => value === false)
+        
+        // 映射到后端需要的keyData
+        const dataMap: Record<string, string> = {
+            '达标': 'DB_STATUS_1',
+            '不达标': 'DB_STATUS_0',
+            '无数据': 'CURNODATA'
+        }
+        
+        const selectedCodes = data
+            .filter(item => selectedKeys.includes(item.name))
+            .map(item => item.keyData)
+        
+        pieCode.value = allFalse ? ['5'] : selectedCodes
+        
+        // 刷新表格
+        handleSearch()
+    })
+}
+
+// 基地变化处理
+const handleBaseChange = () => {
+    formState.stnm = ''
+    fetchPieData()
+    handleSearch()
+}
+
+// 查询处理
+const handleSearch = () => {
+    const timeFormat = formState.types === 'month' ? 'YYYY-MM' : 'YYYY'
+    const startTime = formState.dateValues ? formState.dateValues.format(timeFormat) : ''
+
+    const filters: any[] = [
+        {
+            field: 'baseId',
+            operator: 'eq',
+            dataType: 'string',
+            value: formState.dataDimensionVal
+        },
+        formState.types === 'month' ? {
+            field: 'drMonth',
+            operator: 'eq',
+            dataType: 'string',
+            value: startTime
+        } : {
+            field: 'drYear',
+            operator: 'eq',
+            dataType: 'string',
+            value: startTime
+        },
+        {
+            field: 'type',
+            operator: 'eq',
+            dataType: 'string',
+            value: 'DAY'
+        },
+        formState.dataDimensionVal !== 'all' ? {
+            field: 'rstcd',
+            operator: 'eq',
+            dataType: 'string',
+            value: formState.dataDimensionVal
+        } : null,
+        pieCode.value.length > 0 ? {
+            field: 'sfdb',
+            operator: 'in',
+            dataType: 'string',
+            value: pieCode.value
+        } : (formState.sfdb ? {
+            field: 'sfdb',
+            operator: 'eq',
+            dataType: 'string',
+            value: formState.sfdb
+        } : null),
+        formState.stnm ? {
+            field: 'stnm',
+            operator: 'contains',
+            dataType: 'string',
+            value: formState.stnm
+        } : null,
+        formState.dataDimensionVal === 'all' && formState.dtinType ? {
+            field: 'dtinType',
+            operator: 'eq',
+            dataType: 'string',
+            value: formState.dtinType
+        } : null
+    ].filter(Boolean)
+
+    const filter = {
+        logic: 'and',
+        filters
+    }
+
+    // 刷新表格
+    tableRef.value?.getList(filter)
+}
+
+// 重置处理
+const handleReset = () => {
+    formState.dataDimensionVal = props.dataDimensionVal || ''
+    formState.dtinType = ''
+    formState.types = props.type || 'month'
+    formState.sfdb = ''
+    formState.dateValues = dayjs()
+    formState.stnm = ''
+    pieCode.value = []
+    
+    fetchPieData()
+    handleSearch()
+}
+
+// 查看详情
+const handleViewDetail = (record: any) => {
+    detailData.value = { ...record }
+    detailModalVisible.value = true
+}
+
+// 详情弹窗关闭
+const handleDetailModalClose = () => {
+    detailModalVisible.value = false
+    detailData.value = {}
+}
+
+// 查看断面名称详情（地图）
+const handleViewStnmDetail = (record: any) => {
+    const timeRange = formState.dateValues 
+        ? [dayjs(formState.dateValues).startOf(formState.types === 'month' ? 'month' : 'year'), 
+           dayjs(formState.dateValues).endOf(formState.types === 'month' ? 'month' : 'year')]
+        : []
+    
+    mapModalData.value = {
+        sttp: 'wq',
+        stcd: record.stcd,
+        titleName: record.stnm,
+        timeRange,
+        calculateFlag: null  // TODO: 根据实际情况设置
+    }
+    mapModalVisible.value = true
+}
+
+// 地图弹窗关闭
+const handleMapModalClose = () => {
+    mapModalVisible.value = false
+    mapModalData.value = {}
+}
+
+// 监听表单变化，自动查询
+watch(
+    () => [formState.dataDimensionVal, formState.types, formState.sfdb, formState.stnm, formState.dtinType],
+    () => {
+        fetchPieData()
+        handleSearch()
+    },
+    { deep: true }
+)
+
+// 监听日期变化
+watch(
+    () => formState.dateValues,
+    () => {
+        fetchPieData()
+        handleSearch()
+    }
+)
+
+// 初始化
+onMounted(async () => {
+    await nextTick()
+    fetchPieData()
+    handleSearch()
+    
+    // 监听窗口resize
+    window.addEventListener('resize', () => {
+        pieChartInstance?.resize()
+    })
+})
+
+// 组件卸载时清理
+onBeforeUnmount(() => {
+    pieChartInstance?.dispose()
+    pieChartInstance = null
+    window.removeEventListener('resize', () => {
+        pieChartInstance?.resize()
+    })
+})
+
+// 暴露方法给父组件
+defineExpose({
+    handleSearch
+})
+
+</script>
+
+<style scoped lang="scss">
+.environmental-quality-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .search-form {
+        background: #fff;
+        border-radius: 4px;
+        padding: 16px;
+
+        :deep(.ant-space) {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        :deep(.ant-form-item) {
+            margin-bottom: 0;
+        }
+    }
+
+    .content-layout {
+        flex: 1;
+        display: flex;
+        gap: 16px;
+        overflow: hidden;
+
+        .chart-section {
+            width: 35%;
+            min-width: 300px;
+            background: #fff;
+            border-radius: 4px;
+            padding: 16px;
+            position: relative;
+
+            .pie-chart-container {
+                width: 100%;
+                height: 482px;
+            }
+
+            .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;
+            }
+        }
+
+        .table-section {
+            flex: 1;
+            background: #fff;
+            border-radius: 4px;
+            padding: 16px;
+            overflow: hidden;
+        }
+    }
+
+    .text-link {
+        color: #2f6b98;
+
+        &:hover {
+            color: #40a9ff;
+        }
+    }
+
+    .modal-content {
+        padding: 20px;
+        max-height: 600px;
+        overflow-y: auto;
+
+        pre {
+            background: #f5f5f5;
+            padding: 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            margin-top: 16px;
+        }
+    }
+}
+
+:deep(.ant-spin-nested-loading) {
+    height: 100%;
+}
+
+:deep(.ant-spin-container) {
+    height: 100%;
+}
+</style>
diff --git a/frontend/src/modules/EnvironmentalQuality/index.vue b/frontend/src/modules/EnvironmentalQuality/index.vue
index 79d2c83e..d6dff2ec 100644
--- a/frontend/src/modules/EnvironmentalQuality/index.vue
+++ b/frontend/src/modules/EnvironmentalQuality/index.vue
@@ -1,81 +1,574 @@
 <!-- SidePanelItem.vue -->
 <template>
-    <SidePanelItem title="地表水水质达标率">
+    <SidePanelItem title="地表水水质达标率" :select="select" :datetimePicker="datetimePicker"
+        @update-values="handlePanelChange1" style="height: 650px;">
         <div class="body_item">
-            <div class="tabs_all">
-                <div :class="tabs == 1 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(1)">自建水质站</div>
-                <div :class="tabs == 2 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(2)">国家水质站</div>
+            <div v-if="baseid == 'all'" class="tabs_all">
+                <div :class="tabs == 0 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(0)">自建水质站</div>
+                <div :class="tabs == 1 ? 'zhong_tabs' : 'no_tabs'" @click="handleTabChange(1)">国家水质站</div>
             </div>
-            <div v-show="tabs == 1 || tabs == 2" class="tabs_body">
-                <div ref="chartRef" class="chart-container"></div>
+            <div v-show="tabs == 0 || tabs == 1" class="tabs_body">
+                <a-spin :spinning="loading">
+                    <!-- 始终渲染图表容器，确保有固定宽高 -->
+                    <div ref="chartRef" class="chart-container"></div>
+                    <!-- 无数据时显示Empty，但不影响容器尺寸 -->
+                    <div v-if="chartData.length === 0 && !loading" class="empty-overlay">
+                        <a-empty description="暂无数据" />
+                    </div>
+                </a-spin>
             </div>
         </div>
 
     </SidePanelItem>
+
+    <!-- 环境质量满足度弹框 -->
+    <a-modal
+        v-model:open="modalVisible"
+        title="环境质量满足度"
+        width="1536px"
+        :footer="null"
+        centered
+    >
+           <EnvironmentalQualityTwoLayers 
+               :datas="jiDiList"
+               :type="select.value "
+               :dateValue="datetimePicker.value"
+               :dataDimensionVal="baseid"
+               :buildType="tabs"
+           />
+    </a-modal>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue';
 import * as echarts from 'echarts';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-
+import { wqGetKendoListCust } from '@/api/sz'
+import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import EnvironmentalQualityTwoLayers from "./TwoLayers/EnvironmentalQualityTwoLayers.vue"
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'EnvironmentalQuality'
 });
-
-const tabs = ref(1);
+const JidiSelectEventStore = useJidiSelectEventStore();
+const tabs = ref(0);
 const chartRef = ref<HTMLElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
+const loading = ref(false);
 
-// 静态数据 - 自建水质站（第1页）
-const selfBuiltData = [
-    { name: '雅砻江\n干流', current: 99, lastYear: 100 },
-    { name: '大渡河\n干流', current: 99, lastYear: 100 },
-    { name: '黄河上游\n干流', current: 99, lastYear: 100 }
-];
+// 响应式图表数据
+const chartData = ref<Array<{ name: string; current: number | null; lastYear: number | null }>>([]);
 
-// 静态数据 - 国家水质站（第2页）
-const nationalData = [
-    { name: '长江\n干流', current: 98, lastYear: 99 },
-    { name: '珠江\n干流', current: 97, lastYear: 98 },
-    { name: '淮河\n干流', current: 96, lastYear: 97 }
-];
+const select = ref({
+    show: true,
+    value: 'month',
+    options: [
+        { value: 'month', label: '月度' },
+        { value: 'year', label: '年度' }
+    ],
+    picker: undefined,
+    format: undefined,
+});
 
-// 根据tab获取对应数据
-const getCurrentData = () => {
-    return tabs.value === 1 ? selfBuiltData : nationalData;
+// 日期选择器配置
+const datetimePicker = ref({
+    show: true,
+    value: (() => {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, '0');
+        return `${year}-${month}`;
+    })(),
+    format: "YYYY-MM",
+    picker: "month" as const,
+    options: [],
+});
+const baseid = ref("")
+const jiDiList: any = ref([
+    {
+        "baseid": "all",
+        "basename": "当前全部",
+        "id": "9BFEC848-83EA-AD22-6DE2-10E969476693"
+    },
+    {
+        "baseid": "01",
+        "basename": "金沙江干流",
+        "id": "A33040B7-8977-D9F1-5E02-D7F0241AB8AA"
+    },
+    {
+        "baseid": "02",
+        "basename": "雅砻江干流",
+        "id": "C63D6020-995D-FE97-2F4A-F619A7142C79"
+    },
+    {
+        "baseid": "03",
+        "basename": "大渡河干流",
+        "id": "CCB0766B-F1D4-7DD6-650F-5C556B7231B3"
+    },
+    {
+        "baseid": "04",
+        "basename": "乌江干流",
+        "id": "E8A66641-B4F4-CC85-0815-38C5B2F93DBD"
+    },
+    {
+        "baseid": "05",
+        "basename": "长江上游干流",
+        "id": "E02C11E9-CEA5-A030-202F-3BFE84465D03"
+    },
+    {
+        "baseid": "10",
+        "basename": "湘西",
+        "id": "B1D1D52D-CEEF-6DC4-27DF-9990EB572F8D"
+    },
+    {
+        "baseid": "08",
+        "basename": "黄河上游干流",
+        "id": "BC6AF135-263D-09A9-D5CA-C99B2598FE6E"
+    },
+    {
+        "baseid": "09",
+        "basename": "黄河中游干流",
+        "id": "60EEEC28-128F-A2A8-44F3-6EAAC8FD8BB6"
+    },
+    {
+        "baseid": "06",
+        "basename": "南盘江-红水河",
+        "id": "7BB9A8F4-34B5-42B4-A7FC-CE910AD7F203"
+    },
+    {
+        "baseid": "12",
+        "basename": "东北",
+        "id": "47F8EF06-924E-E161-FCAF-62A66BBF252D"
+    },
+    {
+        "baseid": "07",
+        "basename": "澜沧江干流",
+        "id": "A966A4C9-278C-B0DA-2B97-2D10B7A6E96A"
+    },
+    {
+        "baseid": "13",
+        "basename": "怒江干流",
+        "id": "FA89E8CB-67A8-76DA-DC1E-23AE4C54F9E4"
+    },
+    {
+        "baseid": "11",
+        "basename": "闽浙赣",
+        "id": "CD98F995-EEB2-1021-D807-DA1B1AD9E49A"
+    },
+    {
+        "baseid": "other",
+        "basename": "其他",
+        "id": "AFBDFC67-B955-4EFD-959A-014CFB59EBFC"
+    }
+])
+// 基地列表（从 Store 或其他来源获取）
+const baseList = computed(() => {
+    // TODO: 根据实际情况返回基地列表
+    // 这里需要根据项目实际情况从 Store 或 API 获取
+    // 示例结构：
+    // return [
+    //     { baseid: 'all', basename: '全部' },
+    //     { baseid: '01', basename: '金沙江干流' },
+    //     ...
+    // ]
+    
+    // 临时返回空数组，待后续补充实际数据源
+    return []
+})
+
+// 解析API返回的嵌套数据（支持两种结构）
+const parseApiResponse = (items: any[], currentValueForApi: string, lastYearValue: string) => {
+    const result: Array<{ name: string; current: number | null; lastYear: number | null }> = [];
+
+    console.log('=== parseApiResponse 开始解析 ===');
+    console.log('currentValueForApi:', currentValueForApi);
+    console.log('lastYearValue:', lastYearValue);
+    console.log('items数量:', items?.length);
+
+    items.forEach((group, groupIndex) => {
+        console.log(`\n--- 处理第${groupIndex + 1}个group ---`);
+        console.log('group.key:', group.key);
+        console.log('group.items数量:', group.items?.length);
+        
+        group.items?.forEach((mainGroup, mainIndex) => {
+            console.log(`  → 第${mainIndex + 1}个mainGroup:`);
+            console.log('    field:', mainGroup.field);
+            console.log('    key:', mainGroup.key);
+            
+            // 判断是哪种结构：检查第二层的field字段
+            const field = mainGroup.field;
+            
+            if (field === 'ennm' || field === 'baseId') {
+                // 提取中文名称：从mainGroup.key获取（站点名或基地ID）
+                let displayName = '';
+                
+                // mainGroup.key 可能是站点名（如"两河口"）或基地ID（如"02"）
+                if (mainGroup.key && typeof mainGroup.key === 'string') {
+                    displayName = mainGroup.key;
+                    console.log('    从mainGroup.key获取名称:', displayName);
+                }
+                
+                // 如果mainGroup.key不是有效的中文名称，尝试从subGroup.key获取
+                if (!displayName || !/[\u4e00-\u9fa5]/.test(displayName)) {
+                    const subGroup = mainGroup.items?.[0];
+                    console.log('    subGroup.key:', subGroup?.key);
+                    if (subGroup && subGroup.key && typeof subGroup.key === 'string') {
+                        displayName = subGroup.key; // 这里应该是中文名（如"雅砻江干流"）
+                        console.log('    从subGroup.key获取名称:', displayName);
+                    }
+                }
+                
+                // 如果还是没有，尝试从最内层数据获取
+                if (!displayName) {
+                    const subGroup = mainGroup.items?.[0];
+                    const firstMonthGroup = subGroup?.items?.[0];
+                    const dataItem = firstMonthGroup?.items?.[0];
+                    if (dataItem) {
+                        if (field === 'ennm') {
+                            displayName = dataItem.ENNM || '';
+                        } else if (field === 'baseId') {
+                            displayName = dataItem.BASENAME || '';
+                        }
+                        console.log('    从最内层数据获取名称:', displayName);
+                    }
+                }
+                
+                if (!displayName) {
+                    console.log('    ⚠️ 跳过：没有名称');
+                    return; // 跳过没有名称的数据
+                }
+                
+                let currentPeriodValue: number | null = null;
+                let lastYearPeriodValue: number | null = null;
+
+                // 遍历时间分组：需要深入到第3层
+                const subGroup = mainGroup.items?.[0];
+                console.log('    subGroup.items数量:', subGroup?.items?.length);
+                
+                subGroup?.items?.forEach(monthGroup => {
+                    const periodKey = monthGroup.key; // "2026-05" 或 "2025-05"
+                    const dataItem = monthGroup.items?.[0];
+
+                    if (dataItem) {
+                        const value = dataItem.COUNT_DRMONTH ?? dataItem.wqRate;
+                        console.log(`    时间:${periodKey}, 值:${value}`);
+
+                        // 判断是当前期还是去年同期
+                        if (periodKey === currentValueForApi) {
+                            currentPeriodValue = value != null ? Number(value) : null;
+                            console.log(`    ✓ 当前期值: ${currentPeriodValue}`);
+                        } else if (periodKey === lastYearValue) {
+                            lastYearPeriodValue = value != null ? Number(value) : null;
+                            console.log(`    ✓ 去年同期值: ${lastYearPeriodValue}`);
+                        }
+                    }
+                });
+
+                // 添加换行符：在"干流"前添加\n
+                const finalDisplayName = displayName.replace(/干流$/, '\n干流');
+
+                console.log(`  → 最终数据: {name: "${finalDisplayName}", current: ${currentPeriodValue}, lastYear: ${lastYearPeriodValue}}`);
+                
+                result.push({
+                    name: finalDisplayName,
+                    current: currentPeriodValue,
+                    lastYear: lastYearPeriodValue
+                });
+            }
+        });
+    });
+
+    console.log('\n=== parseApiResponse 解析完成 ===');
+    console.log('result数量:', result.length);
+    console.log('result:', result);
+
+    return result;
 };
 
 // 处理tab切换
 const handleTabChange = (tab: number) => {
     tabs.value = tab;
+    getEchartsData()
 };
 
-// 监听tabs变化，处理图表刷新
+//监听tabs变化，处理图表刷新
 watch(tabs, (newVal) => {
-    if (newVal === 1 || newVal === 2) {
+    if (newVal === 0 || newVal === 1) {
         nextTick(() => {
             setTimeout(() => {
-                if (!chartInstance) {
-                    initChart();
-                } else {
-                    // 更新图表数据
-                    updateChartData();
-                }
+                getEchartsData();
+
             }, 50);
         });
     }
 });
+watch(
+    () => JidiSelectEventStore.selectedItem,
+    (newVal) => {
+        if (newVal && newVal.wbsCode) {
+            baseid.value = newVal.wbsCode;
+            getEchartsData();
+        }
+    },
+    { deep: true }
+);
+
+// 初始化图表实例（仅创建实例，不设置option）
+const initChart = (): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        if (!chartRef.value) {
+            console.error('图表容器ref不存在');
+            reject(new Error('图表容器不存在'));
+            return;
+        }
+
+        if (chartInstance) {
+            resolve();
+            return;
+        }
+
+        const domElement = chartRef.value;
+
+        // 检查 DOM 尺寸
+        if (domElement.clientWidth === 0 || domElement.clientHeight === 0) {
+            console.warn('图表容器尺寸为0，等待DOM布局完成...', {
+                clientWidth: domElement.clientWidth,
+                clientHeight: domElement.clientHeight,
+                offsetWidth: domElement.offsetWidth,
+                offsetHeight: domElement.offsetHeight
+            });
+
+            // 使用多次重试机制
+            let retryCount = 0;
+            const maxRetries = 10;
+
+            const tryInit = () => {
+                retryCount++;
+
+                if (domElement.clientWidth > 0 && domElement.clientHeight > 0) {
+                    chartInstance = echarts.init(domElement);
+                    console.log('图表实例已创建（第' + retryCount + '次尝试）');
+                    resolve();
+                } else if (retryCount < maxRetries) {
+                    console.log(`第${retryCount}次尝试，容器尺寸仍为0，继续等待...`);
+                    requestAnimationFrame(tryInit);
+                } else {
+                    console.error('图表容器尺寸仍为0，已达到最大重试次数', {
+                        clientWidth: domElement.clientWidth,
+                        clientHeight: domElement.clientHeight
+                    });
+                    reject(new Error('图表容器尺寸为0'));
+                }
+            };
+
+            // 开始重试
+            requestAnimationFrame(tryInit);
+        } else {
+            // 尺寸正常，直接初始化
+            chartInstance = echarts.init(domElement);
+            console.log('图表实例已创建');
+            resolve();
+        }
+    });
+};
+
+//获取图表数据
+const getEchartsData = async () => {
+    // 1. 格式验证
+    const currentValue = datetimePicker.value.value;
+    // debugger
+    if (select.value.value === 'year') {
+        // 年度模式：验证是否为 YYYY 格式（4位数字）
+        if (!/^\d{4}$/.test(currentValue)) {
+            console.warn('年度模式下日期格式不正确，应为 YYYY 格式');
+            return;
+        }
+    } else if (select.value.value === 'month') {
+        // 月度模式：验证是否为 YYYY-MM 格式
+        if (!/^\d{4}-\d{2}$/.test(currentValue)) {
+            console.warn('月度模式下日期格式不正确，应为 YYYY-MM 格式');
+            return;
+        }
+    } else {
+        console.warn('未知的选择器类型');
+        return;
+    }
+
+    // 2. 计算当前值和上一年的值
+    let currentValueForApi: string;  // 第一个值：当前选择
+    let lastYearValue: string;       // 第二个值：上一年同期
+
+    if (select.value.value === 'year') {
+        // 年模式
+        currentValueForApi = currentValue;  // "2025"
+        lastYearValue = String(Number(currentValue) - 1);  // "2024"
+    } else {
+        // 月模式
+        currentValueForApi = currentValue;  // "2025-03"
+
+        // 提取年份和月份
+        const [year, month] = currentValue.split('-');
+        // 年份减1，月份保持不变
+        const lastYear = String(Number(year) - 1);
+        lastYearValue = `${lastYear}-${month}`;  // "2024-03"
+    }
+
+    // 3. 构建请求参数
+    let params = {
+        "filter": {
+            "logic": "and",
+            "filters": [
+                baseid.value != 'all' ? {
+                    "field": "baseId",
+                    "operator": "eq",
+                    "value": baseid.value
+                } : null,
+                {
+                    "field": "type",
+                    "operator": "eq",
+                    "value": select.value.value == "year" ? "YEAR" : "MON"
+                },
+                {
+                    "field": "dtinType",
+                    "operator": "eq",
+                    "value": tabs.value
+                },
+                {
+                    "logic": "or",
+                    "filters": [
+                        {
+                            "field": select.value.value == "year" ? "drYear" : "drMonth",
+                            "operator": "eq",
+                            "value": currentValueForApi,  // 当前值（年或年月）
+                            "dataType": "string"
+                        },
+                        {
+                            "field": select.value.value == "year" ? "drYear" : "drMonth",
+                            "operator": "eq",
+                            "value": lastYearValue,  // 上一年同期
+                            "dataType": "string"
+                        }
+                    ]
+                }
+            ].filter(Boolean)
+        },
+        "group": [
+            {
+                "dir": "des",
+                "field": "baseStepSort"
+            },
+            baseid.value == 'all' ? {
+                "dir": "des",
+                "field": "baseId"
+            } : {
+                "dir": "asc",
+                "field": "ennm"
+            },
+            baseid.value == 'all' ? {
+                "dir": "des",
+                "field": "baseName"
+            } : {
+                "dir": "des",
+                "field": "rstcd"
+            },
+            {
+                "dir": "desc",
+                "field": select.value.value == "year" ? "drYear" : "drMonth"
+            }
+        ],
+        "groupResultFlat": false,
+        "aggregate": [
+            {
+                "aggregate": "sum",
+                "field": "wqRate"
+            }
+        ]
+    };
+
+    // 4. 调用API并处理数据
+    loading.value = true;
+    try {
+        const res = await wqGetKendoListCust(params);
+
+        console.log('=== API返回数据调试 ===');
+        console.log('res:', res);
+        console.log('res.data:', res?.data);
+        console.log('res.data.data:', res?.data?.data);
+        console.log('currentValueForApi:', currentValueForApi);
+        console.log('lastYearValue:', lastYearValue);
+
+        if (!res?.data?.data) {
+            console.warn('数据获取失败或数据为空');
+            chartData.value = [];
+            // 清空图表中原有的数据
+            if (chartInstance) {
+                chartInstance.clear();
+                console.log('图表已清空（数据获取失败）');
+            }
+            return;
+        }
+
+        // 解析数据
+        const parsedData = parseApiResponse(res.data.data, currentValueForApi, lastYearValue);
+
+        console.log('解析后的数据 parsedData:', parsedData);
+
+        // 只有当有数据时才更新
+        if (parsedData.length > 0) {
+            chartData.value = parsedData;
+
+            console.log('chartData.value:', chartData.value);
+
+            // 等待 DOM 更新后，再初始化和更新图表
+            await nextTick();
+
+            try {
+                // 如果图表实例不存在，先初始化（等待完成）
+                if (!chartInstance) {
+                    await initChart();
+                }
+
+                // 更新图表
+                if (chartInstance) {
+                    updateChartData(currentValueForApi, lastYearValue);
+                    console.log('图表已更新');
+                } else {
+                    console.error('图表实例创建失败');
+                }
+            } catch (error) {
+                console.error('图表初始化失败:', error);
+            }
+        } else {
+            chartData.value = [];
+            console.warn('解析后数据为空');
+            // 清空图表中原有的数据
+            if (chartInstance) {
+                chartInstance.clear();
+                console.log('图表已清空（解析后数据为空）');
+            }
+        }
+    } catch (error) {
+        console.error('获取图表数据失败:', error);
+        chartData.value = [];
+        // 清空图表中原有的数据
+        if (chartInstance) {
+            chartInstance.clear();
+            console.log('图表已清空（发生错误）');
+        }
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 更新图表数据
+const updateChartData = (currentLabel: string, lastYearLabel: string) => {
+    if (!chartInstance) return;
+
+    // 动态生成图例标签
+    const modeText = select.value.value === 'year' ? '' : ' 月度';
+    const legendCurrentLabel = currentLabel + modeText;
+    const legendLastYearLabel = ' 去年同期';
 
-// 初始化图表
-const initChart = () => {
-    if (!chartRef.value) return;
-    
-    chartInstance = echarts.init(chartRef.value);
-    
-    const currentData = getCurrentData();
-    
     const option = {
         // 图例配置
         legend: {
@@ -85,15 +578,15 @@ const initChart = () => {
             itemGap: 20,
             icon: 'roundRect',
             data: [
-                { name: '2026-04 月度', itemStyle: { color: '#4A8BC2' } },
-                { name: '去年同期', itemStyle: { color: '#9B59B6' } }
+                { name: legendCurrentLabel, itemStyle: { color: '#4A8BC2' } },
+                { name: legendLastYearLabel, itemStyle: { color: '#9B59B6' } }
             ],
             textStyle: {
                 fontSize: 12,
                 color: '#333'
             }
         },
-        
+
         // 提示框配置
         tooltip: {
             trigger: 'axis',
@@ -118,24 +611,25 @@ const initChart = () => {
                 const name = params[0].name.replace('\n', '');
                 let result = `<div style="font-weight: bold; margin-bottom: 8px;">${name}</div>`;
                 params.forEach((item: any) => {
+                    const value = item.value != null ? Number(item.value).toFixed(1) : '-';
                     result += `<div style="display: flex; align-items: center; margin-bottom: 4px;">
                         <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${item.color}; margin-right: 8px;"></span>
                         <span>${item.seriesName}:</span>
-                        <span style="margin-left: auto; font-weight: bold;">${item.value} %</span>
+                        <span style="margin-left: auto; font-weight: bold;">${value}%</span>
                     </div>`;
                 });
                 return result;
             }
         },
-        
+
         // 网格配置
         grid: {
             left: 60,
             right: 10,
             top: 60,
-            bottom: 50
+            bottom: 60
         },
-        
+
         // X轴配置
         xAxis: {
             type: 'value',
@@ -159,11 +653,11 @@ const initChart = () => {
                 color: '#666'
             }
         },
-        
+
         // Y轴配置
         yAxis: {
             type: 'category',
-            data: currentData.map(item => item.name),
+            data: chartData.value.map(item => item.name),
             inverse: true,
             axisLine: {
                 show: true,
@@ -195,33 +689,24 @@ const initChart = () => {
                 align: 'left'
             }
         },
-        
+
         // 系列配置
         series: [
             {
-                name: '2026-04 月度',
+                name: legendCurrentLabel,
                 type: 'bar',
-                data: currentData.map(item => item.current),
+                data: chartData.value.map(item => item.current != null ? Number(item.current).toFixed(1) : null),
                 barWidth: 10,
                 barGap: '20%',
                 itemStyle: {
                     color: '#4A8BC2',
                     borderRadius: [0, 3, 3, 0]
-                },
-                markArea: {
-                    silent: true,
-                    itemStyle: {
-                        color: 'rgba(240, 245, 250, 0.5)'
-                    },
-                    data: [
-                        [{ yAxis: 1 }, { yAxis: 2 }]
-                    ]
                 }
             },
             {
-                name: '去年同期',
+                name: legendLastYearLabel,
                 type: 'bar',
-                data: currentData.map(item => item.lastYear),
+                data: chartData.value.map(item => item.lastYear != null ? Number(item.lastYear).toFixed(1) : null),
                 barWidth: 10,
                 barGap: '20%',
                 itemStyle: {
@@ -231,41 +716,72 @@ const initChart = () => {
             }
         ]
     };
+
+    chartInstance.setOption(option, { notMerge: true });
     
-    chartInstance.setOption(option);
+    // 移除旧的点击事件监听
+    chartInstance.off('click');
+    
+    // 绑定点击事件
+    chartInstance.on('click', (params: any) => {
+        if (params.componentType === 'series' && params.seriesType === 'bar') {
+            // 获取点击的柱子对应的数据
+            const dataIndex = params.dataIndex;
+            const barData = chartData.value[dataIndex];
+            
+            if (barData) {
+                clickedBarData.value = {
+                    name: barData.name.replace('\n', ''), // 去除换行符
+                    current: barData.current,
+                    lastYear: barData.lastYear
+                };
+                modalVisible.value = true;
+            }
+        }
+    });
 };
 
-// 更新图表数据
-const updateChartData = () => {
-    if (!chartInstance) return;
-    
-    const currentData = getCurrentData();
-    
-    chartInstance.setOption({
-        yAxis: {
-            data: currentData.map(item => item.name)
-        },
-        series: [
-            {
-                data: currentData.map(item => item.current)
-            },
-            {
-                data: currentData.map(item => item.lastYear)
-            }
-        ]
-    });
-    
-    // 强制重新计算尺寸
-    chartInstance.resize();
-};
+// 监听 datetimePicker.value.value 的变化
+watch(
+    () => datetimePicker.value.value,
+    async (newValue, oldValue) => {
+        // 确保新值和旧值不同，且图表已初始化
+        if (newValue !== oldValue && chartInstance) {
+            await nextTick();
+            getEchartsData();
+        }
+    }
+);
+
+//监听子组件的数据变化
+const handlePanelChange1 = async (data) => {
+    console.log('当前所有控件状态:', data);
+    // debugger
+    // 当选择器或日期变化时，重新加载图表数据
+    if (data.select || data.datetime) {
+        await (select.value.value = data.select)
+        await (datetimePicker.value.value = data.datetime)
+        await (datetimePicker.value.picker = data.select)
+        await (datetimePicker.value.format = data.select == 'month' ? 'YYYY-MM' : 'YYYY')
+        getEchartsData()
+    }
+}
+//获取图表数据
+
+
 
 // 页面加载时执行
 onMounted(() => {
     // 延迟初始化，确保容器已渲染
     setTimeout(() => {
         initChart();
+        // 如果已有 selectedItem，触发数据加载
+        if (JidiSelectEventStore.selectedItem?.wbsCode) {
+            baseid.value = JidiSelectEventStore.selectedItem.wbsCode;
+            getEchartsData();
+        }
     }, 100);
-    
+
     // 监听窗口resize
     window.addEventListener('resize', () => {
         chartInstance?.resize();
@@ -275,10 +791,55 @@ onMounted(() => {
 // 组件卸载时清理
 onUnmounted(() => {
     chartInstance?.dispose();
+    chartInstance = null;
+    chartData.value = [];
     window.removeEventListener('resize', () => {
         chartInstance?.resize();
     });
 });
+
+// 弹框相关状态
+const modalVisible = ref(false);
+const clickedBarData = ref<{ name: string; current: number | null; lastYear: number | null } | null>(null);
+
+// 计算弹框中的时间信息
+const modalTimeInfo = computed(() => {
+    if (!datetimePicker.value.value) return '';
+    
+    const currentValue = datetimePicker.value.value;
+    const modeText = select.value.value === 'year' ? '年度' : '月度';
+    
+    if (select.value.value === 'year') {
+        return `${currentValue}年 ${modeText}`;
+    } else {
+        const [year, month] = currentValue.split('-');
+        return `${year}年${month}月 ${modeText}`;
+    }
+});
+
+// 计算同比变化值
+const getChangeValue = () => {
+    if (!clickedBarData.value || clickedBarData.value.current == null || clickedBarData.value.lastYear == null) {
+        return '-';
+    }
+    
+    const change = Number(clickedBarData.value.current) - Number(clickedBarData.value.lastYear);
+    const symbol = change > 0 ? '+' : '';
+    return `${symbol}${change.toFixed(1)}%`;
+};
+
+// 获取变化值的样式类
+const getChangeClass = () => {
+    if (!clickedBarData.value || clickedBarData.value.current == null || clickedBarData.value.lastYear == null) {
+        return '';
+    }
+    
+    const change = Number(clickedBarData.value.current) - Number(clickedBarData.value.lastYear);
+    if (change > 0) return 'positive';
+    if (change < 0) return 'negative';
+    return 'neutral';
+};
+
 </script>
 
 <style lang="scss" scoped>
@@ -291,7 +852,7 @@ onUnmounted(() => {
 
     .tabs_all {
         width: 28px;
-        height: 600px;
+        height: 500px;
         box-sizing: border-box;
         border: 2px solid #2f6b98;
         border-radius: 5px;
@@ -322,21 +883,131 @@ onUnmounted(() => {
             box-sizing: border-box;
             cursor: pointer;
         }
-         .no_tabs:hover {
-          color: #40a9ff;
+
+        .no_tabs:hover {
+            color: #40a9ff;
         }
     }
-    
+
     .tabs_body {
         width: 368px;
         height: 600px;
         display: flex;
         align-items: center;
         justify-content: center;
-        
+        position: relative;
+        /* 为empty-overlay提供定位上下文 */
+
         .chart-container {
+            width: 100% !important;
+            height: 100% !important;
+            min-width: 368px;
+            /* 强制最小宽度 */
+            min-height: 600px;
+            /* 强制最小高度 */
+        }
+
+        .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;
+        }
+    }
+}
+
+.modal-content {
+    padding: 20px;
+    
+    .detail-info {
+        .info-header {
+            margin-bottom: 24px;
+            padding-bottom: 16px;
+            border-bottom: 2px solid #e8e8e8;
+            
+            h3 {
+                margin: 0 0 8px 0;
+                font-size: 20px;
+                color: #333;
+                font-weight: bold;
+            }
+            
+            .time-info {
+                margin: 0;
+                font-size: 14px;
+                color: #666;
+            }
+        }
+        
+        .info-body {
+            .info-item {
+                display: flex;
+                align-items: center;
+                margin-bottom: 16px;
+                padding: 12px 16px;
+                background: #f5f7fa;
+                border-radius: 4px;
+                
+                .label {
+                    font-size: 14px;
+                    color: #666;
+                    min-width: 140px;
+                }
+                
+                .value {
+                    font-size: 16px;
+                    font-weight: bold;
+                    
+                    &.current {
+                        color: #4A8BC2;
+                    }
+                    
+                    &.last-year {
+                        color: #9B59B6;
+                    }
+                    
+                    &.change {
+                        &.positive {
+                            color: #52c41a;
+                        }
+                        
+                        &.negative {
+                            color: #ff4d4f;
+                        }
+                        
+                        &.neutral {
+                            color: #666;
+                        }
+                    }
+                }
+            }
+            
+            .custom-section {
+                margin-top: 24px;
+                padding: 16px;
+                background: #fafafa;
+                border-radius: 4px;
+                border: 1px solid #e8e8e8;
+                
+                h4 {
+                    margin: 0 0 12px 0;
+                    font-size: 16px;
+                    color: #333;
+                }
+                
+                p {
+                    margin: 0;
+                    font-size: 14px;
+                    color: #666;
+                    line-height: 1.6;
+                }
+            }
         }
     }
 }
diff --git a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue
index 4b2648eb..a387724e 100644
--- a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue
+++ b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue
@@ -473,8 +473,8 @@ const handleViewDetail = (record: any, type: string) => {
 watch(
     () => [formState.dataDimensionVal, formState.hydrodtin, formState.bldstt],
     async () => {
-        // await fetchFacilityStats()
-        // handleSearch()
+        await fetchFacilityStats()
+        handleSearch()
     }
 )
 
@@ -512,9 +512,25 @@ onMounted(async () => {
     handleSearch()
 })
 
+// 重置搜索状态方法
+const resetSearchState = () => {
+    // 重置表单状态为初始值
+    formState.dataDimensionVal = props.BID || ''
+    formState.hydrodtin = props.res?.hydrodtin || ''
+    formState.bldstt = props.res?.bldstt || ''
+    formState.stnm = ''
+    
+    // 重置activeTab为当前设施类型对应的key
+    activeTab.value = currentDwtp.value
+    
+    // 清空表格引用
+    tableRefs.value = {}
+}
+
 // 暴露方法给父组件
 defineExpose({
-    handleSearch
+    handleSearch,
+    resetSearchState
 })
 </script>
 
diff --git a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
index bc206e32..df77fb78 100644
--- a/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
+++ b/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue
@@ -20,10 +20,10 @@
     </SidePanelItem>
 
     <!-- 自定义弹框 -->
-    <a-modal v-model:open="modalVisible" title="设施类型及接入情况" width="1536px" :footer="null">
+    <a-modal v-model:open="modalVisible" title="设施类型及接入情况" width="1536px" :footer="null" @cancel="handleModalClose">
         <div class="modal-content">
 
-            <DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers :datas="jiDiList" :BID="baseid"
+            <DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers ref="twoLayersRef" :datas="jiDiList" :BID="baseid"
                 :data="selectedItem" :res="res">
             </DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers>
         </div>
@@ -149,6 +149,7 @@ const baseid = ref('')
 // 弹框相关
 const modalVisible = ref(false);
 const selectedItem: any = ref<DataString | null>(null);
+const twoLayersRef = ref();
 
 
 const getListData = async () => {
@@ -211,6 +212,14 @@ const imgclick = (item: DataString) => {
     modalVisible.value = true;
 }
 
+// 模态框关闭处理
+const handleModalClose = () => {
+    // 重置子组件的搜索状态
+    if (twoLayersRef.value && twoLayersRef.value.resetSearchState) {
+        twoLayersRef.value.resetSearchState()
+    }
+}
+
 // 页面加载时执行的逻辑
 onMounted(() => {
     // 可以在这里加载实际的图片数据
diff --git a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
index feaae288..6a327568 100644
--- a/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
+++ b/frontend/src/modules/monthlyAvgWaterTemCompareHistory/index.vue
@@ -58,6 +58,9 @@ const baseid: any = ref(null);
 const loading = ref(false);
 const showemit = ref(true);
 
+// X轴数据，用于formatter中获取站点名称
+const xData = ref<any[]>([]);
+
 // 弹框相关状态
 const modalVisible = ref(false);
 const modalData = ref<any>(null);
@@ -359,12 +362,15 @@ const getEchartsData = async () => {
 
         // 筛选 sttp === "1" 的数据作为 X 轴站点名称
         const stationData = data.filter((item: any) => item.sttp === "1")
-        const xData = stationData.map((item: any) => ({
+        const newXData = stationData.map((item: any) => ({
             value: item.stnm,
             stnm: item.stnm,
             stcd: item.stcd  // 保留站点编码用于点击事件
         }))
 
+        // 更新响应式 xData
+        xData.value = newXData;
+
         // 筛选 sttp === "2" 的数据作为图表系列数据
         const tempData = data.filter((item: any) => item.sttp === "2")
 
@@ -393,19 +399,12 @@ const getEchartsData = async () => {
         // 初始化或更新图表
         setTimeout(() => {
             if (!chartInstance) {
-                initChart(xData, actualData, lastData, naturalData)
+                initChart(newXData, actualData, lastData, naturalData)
             } else {
-                // 如果图表已存在，只更新数据
-                chartInstance.setOption({
-                    xAxis: {
-                        data: xData
-                    },
-                    series: [
-                        { data: actualData },
-                        { data: lastData },
-                        { data: naturalData }
-                    ]
-                })
+                // 如果图表已存在，重新初始化以确保 formatter 使用最新的数据
+                chartInstance.dispose()
+                chartInstance = null
+                initChart(newXData, actualData, lastData, naturalData)
             }
             // 强制重绘，确保尺寸正确
             setTimeout(() => {
@@ -420,7 +419,7 @@ const getEchartsData = async () => {
     }
 }
 
-const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData: any[]) => {
+const initChart = (newXData: any[], actualData: any[], lastData: any[], naturalData: any[]) => {
     if (!chartRef.value) return
 
     chartInstance = echarts.init(chartRef.value)
@@ -438,7 +437,7 @@ const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData
     const options: any = {
         noShowToolbox: true,
         yAxisSplit: 5,
-        xData,
+        xData: newXData,
         dataZoom: [
             {
                 type: 'inside',
@@ -454,7 +453,8 @@ const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData
             trigger: 'axis',
             confine: true,
             formatter: (params: any) => {
-                const label = xData.filter((item: any) => item.value === params[0].axisValueLabel)?.[0]?.stnm
+                // 使用响应式 xData.value 获取站点名称，确保与最新数据一致
+                const label = xData.value.filter((item: any) => item.value === params[0].axisValueLabel)?.[0]?.stnm
                 let elm = ``
                 for (const item of params) {
                     const value = item.data?.value ?? item.value;
@@ -498,10 +498,13 @@ const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData
             axisLabel: {
                 color: '#000000',
                 fontSize: 12,
-                interval: xData.length < 5 ? 0 : 2,
+                interval: xData.value.length < 5 ? 0 : 2,
                 rotate: 0,
                 formatter: (value: any) => {
-                    const label = xData.filter((item: any) => item.value === value)?.[0]?.stnm
+                    // 使用响应式 xData.value 获取站点名称，确保与最新数据一致
+                    const label = xData.value.filter((item: any) => item.value === value)?.[0]?.stnm
+                    // 空值检查，防止 undefined 导致的错误
+                    if (!label) return '-'
                     return `{a|${label.substring(0, 6)}}` + (label.length > 6 ? '...\n{b|}' : '\n{b|}')
                 },
                 rich: {
@@ -515,7 +518,7 @@ const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData
                     }
                 }
             },
-            data: xData,
+            data: xData.value,
             splitLine: {
                 show: false
             }
diff --git a/frontend/src/modules/shuiWenNianNeiFenBu/index.vue b/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
index b8e28cff..69779628 100644
--- a/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
+++ b/frontend/src/modules/shuiWenNianNeiFenBu/index.vue
@@ -390,7 +390,7 @@ const getChartOption = () => {
                 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 : '-';
+                    const displayValue = item.value !== null && item.value !== undefined ? item.value: '-';
                     result += `<span>${item.seriesName}  ${displayValue}${unit}</span>`;
                     result += `</div>`;
                 });
diff --git a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
index 852e4159..4a804d05 100644
--- a/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
+++ b/frontend/src/modules/shuiwenjiancegongzuokaizhangqingkuang/shuiwenjiancegongzuoEJ.vue
@@ -9,20 +9,25 @@
         <div class="search-form">
             <a-space size="middle">
                 <div>选择水电站:</div>
-                <a-select v-model:value="searchData.stcd.dataDimensionData" placeholder="请选择水电站" style="width: 200px"
-                    @change="handleHydropowerStationChange">
-                    <a-select-option v-for="station in hydropowerStationList" :key="station.wbsCode"
-                        :value="station.wbsCode">
-                        {{ station.wbsName }}
-                    </a-select-option>
-                </a-select>
-                <a-select v-model:value="searchData.stnm" placeholder=" " style="width: 200px" allow-clear
-                    @change="handleStationChange">
-                    <a-select-option v-for="station in stationDataList" :key="station.wbsCode" :value="station.stcd">
-                        {{ station.stnm }}
-                    </a-select-option>
-                </a-select>
-                <!-- <a-input v-model:value="searchData.stnm" placeholder="请输入测站名称" style="width: 200px" allow-clear /> -->
+                <a-select 
+                    v-model:value="searchData.stcd.dataDimensionData" 
+                    placeholder="请选择水电站" 
+                    style="width: 200px"  
+                    show-search 
+                    :filter-option="filterOption" 
+                    :options="hydropowerStationOptions"
+                    @change="handleHydropowerStationChange"
+                />
+                <a-select 
+                    v-model:value="searchData.stnm" 
+                    placeholder=" " 
+                    style="width: 200px" 
+                    allow-clear 
+                    show-search
+                    :filter-option="filterOption" 
+                    :options="stationOptions"
+                    @change="handleStationChange"
+                />
 
                 <a-button type="primary" @click="handleSearch">查询</a-button>
                 <a-tooltip title="重置">
@@ -90,6 +95,22 @@ const tableHeight = 'calc(48vh)'
 // 水电站列表数据
 const hydropowerStationList = ref<any[]>([])
 const stationDataList: any = ref([])
+
+// 转换为 a-select options 格式
+const hydropowerStationOptions = computed(() => {
+    return hydropowerStationList.value.map(station => ({
+        label: station.wbsName,
+        value: station.wbsCode
+    }))
+})
+
+const stationOptions = computed(() => {
+    return stationDataList.value.map(station => ({
+        label: station.stnm,
+        value: station.stcd
+    }))
+})
+
 const searchData = ref<any>({
     stcd: {
         dataDimensionType: 'hyBase',
@@ -227,14 +248,14 @@ const buildSearchFilter = () => {
         })
     }
 
-    // 测站ID过滤
-    if (searchData.value?.stcd?.stcdId) {
-        filters.push({
-            field: 'rstcd',
-            operator: 'eq',
-            value: searchData.value.stcd.stcdId
-        })
-    }
+    // // 测站ID过滤
+    // if (searchData.value?.stcd?.stcdId) {
+    //     filters.push({
+    //         field: 'rstcd',
+    //         operator: 'eq',
+    //         value: searchData.value.stcd.stcdId
+    //     })
+    // }
 
     // 测站名称模糊搜索
     if (searchData.value?.stnm) {
@@ -293,6 +314,8 @@ const fetchData = async () => {
     try {
         const filter = buildSearchFilter()
         const params = {
+            take: pagination.value.pageSize,
+            skip: pagination.value.current,
             filter: filter,
             select: [
                 'baseName',
@@ -445,6 +468,11 @@ const getselectTwo = async (code: any) => {
 }
 
 // ==================== 事件处理 ====================
+const filterOption = (input: string, option: any) => {
+    // 使用 options 属性时，option 是标准对象 { label, value }
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
 const handleHydropowerStationChange = (value: string) => {
     console.log('【水电站选择变化】', value)
     // 清空测站选择
diff --git a/frontend/src/modules/shuizhijiancegongzuoQK/index.vue b/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
index 6d46b9f2..1317cc04 100644
--- a/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
+++ b/frontend/src/modules/shuizhijiancegongzuoQK/index.vue
@@ -1,8 +1,10 @@
 <!-- SidePanelItem.vue -->
 <template>
-        <SidePanelItem title="水质监测工作开展情况">
-            <div class="facility-grid" >
-                <div v-for="facility in facilities" :key="facility.name" class="facility-card">
+    <SidePanelItem title="水质监测工作开展情况">
+        <a-spin :spinning="loading" tip="加载中...">
+            <div class="facility-grid">
+                <div v-for="facility in facilities" :key="facility.name" class="facility-card"
+                    @click="handleFacilityClick(facility)">
                     <div style="width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;">
                         <div class="facility-icon">
                             <i style="color: #fff;" :class="facility.icon" type="icon-shengtailiuliang2"></i>
@@ -11,42 +13,249 @@
 
                     <div class="facility-info">
                         <div class="facility-name">{{ facility.name }}</div>
-                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count }}</span><span>个</span></div>
+                        <div style="font-size: 16px;"> <span class="facility-count">{{ facility.count
+                        }}</span><span>个</span></div>
                     </div>
                 </div>
             </div>
-        </SidePanelItem>
+        </a-spin>
+    </SidePanelItem>
+    <!-- 弹框 -->
+    <a-modal v-model:open="modalVisible" :title="'水质监测工作开展情况'" :footer="null" width="1536px" @cancel="handleCloseModal">
+        <ShuiwenjiancegongzuoEJ v-if="currentFacility" :activeKey="currentFacility.key" :tabs="facilities"
+            :baseId="baseid" />
+    </a-modal>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import SidePanelItem from '@/components/SidePanelItem/index.vue';
-
+import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
+import { msstbprptGetKendoList } from '@/api/sz'
+import ShuiwenjiancegongzuoEJ from "./shuiwenjiancegongzuoEJ.vue"
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'shuizhijiancegongzuoQK'
 });
-
+const JidiSelectEventStore = useJidiSelectEventStore();
+// loading状态
+const loading = ref(false);
 // 设施数据
 const facilities = ref([
     {
-        name: '自建水质站',
-        count: 56,
-        icon: 'icon iconfont icon-qixidi'
+        name: '河道水质站',
+        count: 0,
+        icon: 'icon iconfont icon-qixidi',
+        key: '0'
+    },
+    {
+        icon: 'icon iconfont icon-yuleizengzhizhan',
+        name: '增殖站水质站',
+        count: '0',
+        key: '3'
     },
     {
         name: '国家水质站',
-        count: 1722,
-        icon: 'icon iconfont icon-diwenshuijianhuan'
+        count: 0,
+        icon: 'icon iconfont icon-diwenshuijianhuan',
+        key: '1'
     },
     {
         name: '人工水质监测断面',
-        count: 135,
-        icon: 'icon iconfont icon-shuiwen-line'
+        count: 0,
+        icon: 'icon iconfont icon-shuiwen-line',
+        key: '2'
     },
 
 ]);
 
+// 弹框相关状态
+const modalVisible = ref(false);
+const currentFacility = ref<any>(null);
+const baseid = ref("")
+
+
+//获取水质监测工作开展情况数据
+const getDataList = async () => {
+    loading.value = true;
+    try {
+        let data1 = {
+            "filter": {
+                "logic": "and",
+                "filters": [
+                    baseid.value != "all" ? {
+                        "field": "baseId",
+                        "operator": "eq",
+                        "dataType": "string",
+                        "value": "01"
+                    } : null,
+                    {
+                        "field": "isDeleted",
+                        "operator": "eq",
+                        "value": 0
+                    },
+                    {
+                        "field": "sttpCode",
+                        "operator": "eq",
+                        "value": "WQ"
+                    },
+                    {
+                        "logic": "or",
+                        "filters": [
+                            {
+                                "logic": "and",
+                                "filters": [
+                                    {
+                                        "field": "mway",
+                                        "operator": "eq",
+                                        "value": 2
+                                    },
+                                    {
+                                        "field": "dtinType",
+                                        "operator": "eq",
+                                        "value": 0
+                                    }
+                                ]
+                            },
+                            {
+                                "logic": "and",
+                                "filters": [
+                                    {
+                                        "field": "mway",
+                                        "operator": "eq",
+                                        "value": 1
+                                    },
+                                    {
+                                        "field": "dtinType",
+                                        "operator": "eq",
+                                        "value": 2
+                                    }
+                                ]
+                            },
+                            {
+                                "logic": "and",
+                                "filters": [
+                                    {
+                                        "field": "mway",
+                                        "operator": "eq",
+                                        "value": 2
+                                    },
+                                    {
+                                        "field": "dtinType",
+                                        "operator": "eq",
+                                        "value": 1
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ].filter(Boolean)
+            },
+            "group": [
+                {
+                    "dir": "asc",
+                    "field": "dtinType"
+                }
+            ]
+        }
+        let data2 = {
+            "filter": {
+                "logic": "and",
+                "filters": [
+                    baseid.value != "all" ? {
+                        "field": "baseId",
+                        "operator": "eq",
+                        "dataType": "string",
+                        "value": "01"
+                    } : null,
+                    {
+                        "field": "isDeleted",
+                        "operator": "eq",
+                        "value": 0
+                    },
+                    {
+                        "field": "sttpCode",
+                        "operator": "eq",
+                        "value": "WQFB"
+                    },
+                    {
+                        "filters": [
+                            {
+                                "logic": "and",
+                                "filters": [
+                                    {
+                                        "field": "mway",
+                                        "operator": "eq",
+                                        "value": 2
+                                    },
+                                    {
+                                        "field": "dtinType",
+                                        "operator": "eq",
+                                        "value": 0
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ].filter(Boolean)
+            },
+            "group": [
+                {
+                    "dir": "asc",
+                    "field": "dtinType"
+                }
+            ]
+        }
+        // const params = [data1, data2]
+        const res1 = await msstbprptGetKendoList(data1);
+        let finalData = facilities.value.map((item) => ({ ...item, count: 0 }))
+        if (res1.data) {
+            const { data } = res1
+            data.data.forEach((item: any, index: number) => {
+                const target = finalData.find((n) => n.key == item.key)
+                if (target) {
+                    target.count = item.count
+                }
+            })
+        }
+        const res2 = await msstbprptGetKendoList(data2);
+        if (res2.data) {
+            const responseData = res2?.data?.data
+            const target1 = finalData.find((n) => n.key == '3')
+            if (target1) {
+                target1.count = responseData[0].count || 0
+            }
+        }
+        facilities.value = finalData
+    } catch (error) {
+        console.error('获取数据失败:', error);
+    } finally {
+        loading.value = false;
+    }
+}
+watch(
+    () => JidiSelectEventStore.selectedItem,
+    (newVal) => {
+        baseid.value = newVal.wbsCode;
+        getDataList()
+    },
+    { deep: true, immediate: true }
+);
+// 点击处理函数
+const handleFacilityClick = (facility: any) => {
+    // console.log(facility);
+    currentFacility.value = facility;
+    modalVisible.value = true;
+
+
+};
+// 关闭弹框
+const handleCloseModal = () => {
+    modalVisible.value = false;
+    currentFacility.value = null;
+};
+
+
 // 页面加载时执行的逻辑
 onMounted(() => {
 
diff --git a/frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue b/frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue
new file mode 100644
index 00000000..b6213636
--- /dev/null
+++ b/frontend/src/modules/shuizhijiancegongzuoQK/shuiwenjiancegongzuoEJ.vue
@@ -0,0 +1,636 @@
+<template>
+    <div class="shuiwenjiancegongzwo-ej-container">
+        <!-- Tab切换 -->
+        <a-tabs v-model:activeKey="tabIndex" @change="handleTabChange">
+            <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.name" />
+        </a-tabs>
+
+        <!-- 搜索表单 -->
+        <div class="search-form">
+            <a-space size="middle">
+                <div>选择水电站:</div>
+                <a-select 
+                    v-model:value="searchData.stcd.dataDimensionData" 
+                    placeholder="请选择水电站" 
+                    style="width: 200px"  
+                    show-search 
+                    :filter-option="filterOption" 
+                    :options="hydropowerStationOptions"
+                    @change="handleHydropowerStationChange"
+                />
+                <a-select 
+                    v-model:value="searchData.stnm" 
+                    placeholder=" " 
+                    style="width: 200px" 
+                    allow-clear 
+                    show-search
+                    :filter-option="filterOption" 
+                    :options="stationOptions"
+                    @change="handleStationChange"
+                />
+                <!-- <a-input v-model:value="searchData.stnm" placeholder="请输入测站名称" style="width: 200px" allow-clear /> -->
+
+                <a-button type="primary" @click="handleSearch">查询</a-button>
+                <a-tooltip title="重置">
+                    <a-button @click="handleReset">重置</a-button>
+                </a-tooltip>
+            </a-space>
+        </div>
+
+        <!-- 数据表格 -->
+        <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
+            :scroll="{ y: tableHeight }" row-key="stcd" @change="handleTableChange">
+            <template #bodyCell="{ column, record }">
+                <!-- 监测状态 -->
+                <template v-if="column.key === 'coenvwState'">
+                    <a-tooltip placement="top">
+                        <template #title>
+                            <ol>
+                                <li>最近1天有监测数据为在线，否则为离线。</li>
+                            </ol>
+                        </template>
+                        <a-tag :color="record.coenvwState > 0 ? 'green' : '#999'">
+                            {{ record.coenvwState > 0 ? '在线' : '离线' }}
+                        </a-tag>
+                    </a-tooltip>
+                </template>
+
+                <!-- 操作 -->
+                <template v-else-if="column.key === 'action'">
+                    <a @click="handleViewDetail(record)" class="text_hocer">查看详情</a>
+                </template>
+            </template>
+        </a-table>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import {  wbsbGetKendoList, getVmsstbprpt } from '@/api/sw'
+import { vmsstbprptGetKendoList } from '@/api/sz'
+import { useModelStore } from "@/store/modules/model";
+
+const modelStore = useModelStore();
+// ==================== Props 定义 ====================
+const props = defineProps<{
+    baseId?: string
+    tabs?: any[]
+    activeKey?: string
+}>()
+
+// ==================== 状态管理 ====================
+const tabIndex = ref(props.activeKey || '0')
+const loading = ref(false)
+const tableData = ref<any[]>([])
+const pagination = ref({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+    size: 'small',
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total: number) => `共 ${total} 条`,
+    pageSizeOptions: ['10', '20', '50', '100']
+})
+const tableHeight = 'calc(48vh)'
+
+// 水电站列表数据
+const hydropowerStationList = ref<any[]>([])
+const stationDataList: any = ref([])
+
+// 转换为 a-select options 格式
+const hydropowerStationOptions = computed(() => {
+    return hydropowerStationList.value.map(station => ({
+        label: station.wbsName,
+        value: station.wbsCode
+    }))
+})
+
+const stationOptions = computed(() => {
+    return stationDataList.value.map(station => ({
+        label: station.stnm,
+        value: station.stcd
+    }))
+})
+
+const searchData = ref<any>({
+    stcd: {
+        dataDimensionType: 'hyBase',
+        stcdId: '',
+        dataDimensionData: props.baseId || 'all'
+    },
+    stnm: null
+})
+
+// ==================== 计算合并信息 ====================
+const getRowSpanInfo = (dataIndex: string) => {
+    const spanMap = new Map()
+
+    if (!tableData.value || tableData.value.length === 0) {
+        return spanMap
+    }
+
+    let currentGroupStart = 0
+    let currentValue = tableData.value[0][dataIndex]
+
+    for (let i = 0; i < tableData.value.length; i++) {
+        const value = tableData.value[i][dataIndex]
+
+        if (value !== currentValue) {
+            // 记录当前组的起始位置和行数
+            spanMap.set(currentGroupStart, i - currentGroupStart)
+            currentGroupStart = i
+            currentValue = value
+        }
+    }
+
+    // 处理最后一组
+    spanMap.set(currentGroupStart, tableData.value.length - currentGroupStart)
+
+    return spanMap
+}
+
+// ==================== 监听 Props 变化 ====================
+// const baseId = ref('')
+watch(
+    () => props.baseId,
+    (newVal) => {
+        if (newVal && newVal !== searchData.value.stcd.dataDimensionData) {
+            searchData.value.stcd.dataDimensionData = newVal
+            fetchData()
+        }
+    }
+)
+
+watch(
+    () => props.activeKey,
+    (newVal) => {
+        if (newVal && newVal !== tabIndex.value) {
+            tabIndex.value = newVal
+            fetchData()
+        }
+    }
+)
+
+
+// ==================== 列配置 ====================
+const columns = computed(() => {
+    const baseColumns = [
+        {
+            title: '所属基地',
+            dataIndex: 'baseName',
+            key: 'baseName',
+            width: 150,
+            customCell: (record: any, index: number) => {
+                const spanMap = getRowSpanInfo('baseName')
+                const rowSpan = spanMap.get(index)
+
+                if (rowSpan === undefined) {
+                    // 被合并的行，不显示
+                    return { rowSpan: 0 }
+                }
+
+                // 第一行，设置合并行数
+                return { rowSpan }
+            }
+        },
+        {
+            title: '测站名称',
+            dataIndex: 'stnm',
+            key: 'stnm',
+            width: 150
+        },
+        {
+            title: '电站',
+            dataIndex: 'ennm',
+            key: 'ennm',
+            width: 150
+        },
+        // {
+        //     title: '建成时间',
+        //     dataIndex: 'jcdt',
+        //     key: 'jcdt',
+        //     width: 120
+        // },
+        {
+            title: '监测指标',
+            dataIndex: 'stindx',
+            key: 'stindx',
+            width: 150
+        },
+        // {
+        //     title: '监测状态',
+        //     key: 'coenvwState',
+        //     dataIndex: 'coenvwState',
+        //     width: 100,
+        //     align: 'center' as const
+        // },
+        {
+            title: '操作',
+            key: 'action',
+            width: 100,
+            align: 'center' as const,
+            fixed: 'right' as const
+        }
+    ]
+
+    return baseColumns.filter(Boolean)
+})
+
+// ==================== 过滤条件构建 ====================
+const buildSearchFilter = () => {
+    const filters: any[] = []
+
+    // 基地ID过滤
+    if (searchData.value?.stcd?.dataDimensionData && searchData.value.stcd.dataDimensionData !== 'all') {
+        filters.push({
+            field: 'baseId',
+            operator: 'eq',
+            value: searchData.value.stcd.dataDimensionData
+        })
+    }
+
+    // 测站ID过滤
+    if (searchData.value?.stcd?.stcdId) {
+        filters.push({
+            field: 'rstcd',
+            operator: 'eq',
+            value: searchData.value.stcd.stcdId
+        })
+    }
+
+    // 测站名称模糊搜索
+    if (searchData.value?.stnm) {
+        filters.push({
+            field: 'rstcd',
+            operator: 'eq',
+            value: searchData.value.stnm
+        })
+    }
+
+    // 根据 tabIndex 设置站点类型（水质监测）
+    if (tabIndex.value === '3') {
+        filters.push({
+            field: 'sttpCode',
+            operator: 'eq',
+            dataType: 'string',
+            value: 'WQFB'
+        })
+    } else {
+        filters.push({
+            field: 'sttpCode',
+            operator: 'eq',
+            dataType: 'string',
+            value: 'WQ'
+        })
+    }
+
+    // Tab特定过滤 - 对齐 React 版本的水质监测逻辑
+    switch (tabIndex.value) {
+        case '0':  // 自动监测-实时
+            filters.push(
+                {
+                    field: 'mway',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 2
+                },
+                {
+                    field: 'dtinType',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 0
+                }
+            )
+            break
+        case '1':  // 自动监测-历史
+            filters.push(
+                {
+                    field: 'mway',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 2
+                },
+                {
+                    field: 'dtinType',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 1
+                }
+            )
+            break
+        case '2':  // 人工监测
+            filters.push(
+                {
+                    field: 'mway',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 1
+                },
+                {
+                    field: 'dtinType',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 2
+                }
+            )
+            break
+        case '3':  // 特殊类型
+            filters.push(
+                {
+                    field: 'mway',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 2
+                },
+                {
+                    field: 'dtinType',
+                    operator: 'eq',
+                    dataType: 'string',
+                    value: 0
+                }
+            )
+            break
+    }
+
+    return {
+        logic: 'and',
+        filters: filters.filter((f) => f.value !== undefined && f.value !== null && f.value !== '')
+    }
+}
+
+// ==================== API调用 ====================
+const fetchData = async () => {
+    loading.value = true
+    try {
+        const filter = buildSearchFilter()
+        const params = {
+            take: pagination.value.pageSize,
+            skip: pagination.value.current,
+            filter: filter,
+            select: [
+                'baseName',
+                'stnm',
+                'ennm',
+                'jcdt',
+                'stindx',
+                'coenvwState',
+                'sttpCode',
+                'stcd',
+                'rstcd',
+                'stCode',
+                'stName',
+                'dvtp'
+            ],
+            sort: [
+                { field: 'baseStepSort', dir: 'asc' },
+                { field: 'hbrvcd', dir: 'asc' },
+                { field: 'rstcdStepSort', dir: 'asc' },
+                { field: 'siteStepSort', dir: 'asc' }
+            ],
+            groupResultFlat:false
+        }
+
+        console.log('【请求参数】', params)
+        const res = await vmsstbprptGetKendoList(params)
+        console.log('【响应数据】', res)
+
+        // 数据处理
+        let total = res.data.total
+        let records = res?.data?.data || res?.data
+        // if (Array.isArray(res?.data?.data)) {
+        //   records = res.data.data
+        //   total = res.data.data.length
+        // } 
+
+        tableData.value = records || []
+        pagination.value.total = total
+        loading.value = false
+    } catch (error) {
+        console.error('获取水文监测数据失败:', error)
+        tableData.value = []
+        pagination.value.total = 0
+    } finally {
+        loading.value = false
+    }
+}
+
+const getselect = async () => {
+    try {
+        const params = {
+            "filter": {
+                "logic": "and",
+                "filters": [
+                    {
+                        "field": "wbsType",
+                        "operator": "eq",
+                        "dataType": "string",
+                        "value": "PSB"
+                    },
+                    {
+                        "field": "treeLevel",
+                        "operator": "eq",
+                        "dataType": "string",
+                        "value": "1"
+                    }
+                ]
+            },
+            "sort": [
+                {
+                    "field": "orderIndex",
+                    "dir": "asc"
+                }
+            ]
+        }
+
+        const res = await wbsbGetKendoList(params)
+        console.log('【水电站列表】', res)
+
+        // 数据处理：提取水电站列表
+        if (res?.data?.data && Array.isArray(res.data.data)) {
+            hydropowerStationList.value = res.data.data
+            console.log('站点数据列表', stationDataList.value)
+            getselectTwo(searchData.value.stcd.dataDimensionData)
+            console.log('【水电站数量】', hydropowerStationList.value.length)
+        } else {
+            console.warn('【警告】未获取到有效的水电站数据')
+            hydropowerStationList.value = []
+        }
+
+    } catch (error) {
+        console.error('【错误】获取水电站列表失败:', error)
+        hydropowerStationList.value = []
+    }
+}
+const getselectTwo = async (code: any) => {
+    console.log('站点数据列表')
+    // 根据当前 Tab 确定站点类型
+    // const sttpCodeValue = tabIndex.value === '3' ? 'WQFB' : 'WQ'
+    
+    const params = {
+        "filter": {
+            "logic": "and",
+            "filters": [
+                code != 'all' ? {
+                    "field": "baseId",
+                    "operator": "contains",
+                    "dataType": "string",
+                    "value": code
+                } : null,
+                {
+                    "field": "sttpCode",
+                    "operator": "eq",
+                    "dataType": "string",
+                    "value": "ENG"
+                }
+            ].filter(Boolean)
+        },
+        "sort": code !== 'all'
+            ? [
+                {
+                    "field": "baseId",
+                    "dir": "asc"
+                },
+                {
+                    "field": "rvcdStepSort",
+                    "dir": "asc"
+                },
+                {
+                    "field": "rstcdStepSort",
+                    "dir": "asc"
+                },
+                {
+                    "field": "siteStepSort",
+                    "dir": "asc"
+                }
+            ]
+            : [
+                {
+                    "field": "ttpwr",
+                    "dir": "desc"
+                }
+            ],
+        "select": [
+            "stcd",
+            "stnm"
+        ]
+    }
+    const res = await getVmsstbprpt(params)
+    // console.log('结果', res)
+    console.log('站点数据列表', res?.data?.data)
+    stationDataList.value = res?.data?.data || res?.data
+
+}
+
+// ==================== 事件处理 ====================
+const filterOption = (input: string, option: any) => {
+    // 使用 options 属性时，option 是标准对象 { label, value }
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+const handleHydropowerStationChange = (value: string) => {
+    console.log('【水电站选择变化】', value)
+    // 清空测站选择
+    searchData.value.stnm = null
+    searchData.value.stcd.stcdId = ''
+    // 获取该水电站下的测站列表
+    getselectTwo(value)
+    // 重新查询数据
+    // pagination.value.current = 1
+    // fetchData()
+}
+
+const handleStationChange = (value: string | undefined) => {
+    console.log('【测站选择变化】', value)
+    // 更新测站ID
+    if (value) {
+        searchData.value.stcd.stcdId = value
+    } else {
+        searchData.value.stcd.stcdId = ''
+    }
+}
+
+const handleSearch = () => {
+    console.log('【搜索】', searchData.value)
+    pagination.value.current = 1
+    fetchData()
+}
+
+const handleReset = () => {
+    console.log('【重置】')
+    searchData.value = {
+        stcd: {
+            dataDimensionType: 'hyBase',
+            stcdId: '',
+            dataDimensionData: props.baseId || 'all'
+        },
+        stnm: null
+    }
+    pagination.value.current = 1
+    fetchData()
+}
+
+const handleTabChange = (key: string) => {
+    console.log('【Tab切换】', key)
+    tabIndex.value = key
+    pagination.value.current = 1
+    fetchData()
+}
+
+const handleTableChange = (pag: any) => {
+    pagination.value.current = pag.current
+    pagination.value.pageSize = pag.pageSize
+    fetchData()
+}
+
+const handleViewDetail = (record: any) => {
+    if (record) {
+         modelStore.modalVisible = true;
+        modelStore.params.sttp = "fh_wq_point";
+        modelStore.title = record.stnm + "详情信息";
+        // modelStore.isBasicEdit = true;
+        modelStore.params.stcd = record.stcd;
+        modelStore.modalVisible = true;
+        
+       
+    }
+
+    // TODO: 后续实现详情查看功能
+}
+
+// ==================== 生命周期 ====================
+onMounted(() => {
+    console.log('【组件挂载】水文监测工作二级页面已加载')
+    fetchData()
+    getselect()
+})
+</script>
+
+<style scoped lang="scss">
+.shuiwenjiancegongzwo-ej-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    box-sizing: border-box;
+
+    .search-form {
+        margin-bottom: 16px;
+        border-radius: 4px;
+    }
+
+    :deep(.ant-table-wrapper) {
+        flex: 1;
+        overflow: hidden;
+    }
+}
+
+.text_hocer {
+    color: #2f6b98;
+}
+
+.text_hocer:hover {
+    color: #40a9ff;
+}
+</style>
diff --git a/frontend/src/modules/waterQuality/index.vue b/frontend/src/modules/waterQuality/index.vue
index 8d8e6cbf..3261e932 100644
--- a/frontend/src/modules/waterQuality/index.vue
+++ b/frontend/src/modules/waterQuality/index.vue
@@ -1,22 +1,37 @@
 <!-- SidePanelItem.vue -->
 
 <template>
-    <SidePanelItem title="沿程水质变化" :iconmap="iconmap" :datetimePicker="datetimePicker">
-        <div class="chart-container" ref="chartRef"></div>
+    <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>
+        </div>
     </SidePanelItem>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+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";
 
 
 // 定义组件名（便于调试和递归）
 defineOptions({
     name: 'waterQuality'
 });
+const modelStore = useModelStore();
+const JidiSelectEventStore = useJidiSelectEventStore();
 const iconmap = ref({
     show: true,
     value: '注：最新数据时间为2026-05-14 23：00',
@@ -26,6 +41,10 @@ const iconmap = ref({
 const chartRef = ref<HTMLElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 
+// Loading 状态和数据状态
+const loading = ref(false);
+const hasData = ref(true); // 初始化为 true，因为 initChart 会使用 mockData 渲染
+
 // 获取当天早上8:00的时间
 const now = new Date();
 const todayAtEightAM = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0);
@@ -38,6 +57,13 @@ const datetimePicker = ref({
     picker: 'date',
     options: []
 });
+const select = ref({
+    show: true,
+    value: '',
+    options: [],
+    picker: undefined,
+    format: undefined,
+});
 
 // ==================== 可见系列队列（最多2个）====================
 const visibleSeriesQueue = ref<string[]>([]);
@@ -84,18 +110,28 @@ const indicatorConfig = [
 // ==================== 图表配置生成 ====================
 const getChartOption = (): EChartsOption => {
     const data = mockData.value;
-    
+
     if (!data || data.length === 0) {
         return {};
     }
 
     // X轴数据（站点名称）
-    const xData = data.map((item, index) => ({
-        value: item.stnm,
-        textStyle: {
-            padding: index % 2 !== 0 ? [16, 0, 0, 0] : 0
+    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[] = [];
@@ -107,7 +143,7 @@ const getChartOption = (): EChartsOption => {
 
     // 图例数据
     const legendData = indicatorConfig.map(item => item.name);
-    
+
     // 根据可见队列构建选中状态
     const selectedState: Record<string, boolean> = {};
     indicatorConfig.forEach(config => {
@@ -144,16 +180,43 @@ const getChartOption = (): EChartsOption => {
         };
     });
 
+    // 计算每个Y轴的数据范围（用于自适应，使用整数）
+    const calculateYAxisRange = (configIndex: number) => {
+        if (!selectedState[indicatorConfig[configIndex].name]) {
+            return null;
+        }
+
+        const values = data
+            .map(item => item[indicatorConfig[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右N原则）
     const yAxisData = indicatorConfig.map((config, index) => {
         const isLeft = index === 0;
         const offset = index < 2 ? 0 : (index - 1) * 60;
-        
+        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: {
@@ -163,8 +226,8 @@ const getChartOption = (): EChartsOption => {
             axisLabel: {
                 color: config.color,
                 formatter: (value: number) => {
-                    const decimalCount = (value.toString().split('.')[1] || '').length;
-                    return decimalCount >= 2 ? value.toFixed(1) : value;
+                    // Y轴刻度使用整数显示
+                    return Math.round(value).toString();
                 }
             },
             splitLine: {
@@ -189,32 +252,30 @@ const getChartOption = (): EChartsOption => {
             },
             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;
-                let result = tm ? `${new Date(tm).toLocaleString('zh-CN')}<br/>` : '';
                 result += `${params[0].name}<br/>`;
-                
+
                 params.forEach((param: any) => {
                     const config = indicatorConfig.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;
-                        
-                        // 如果是数字且小数位超过2位，则保留两位小数
+
                         if (!isNaN(numValue)) {
-                            const decimalPart = param.value.toString().split('.')[1];
-                            if (decimalPart && decimalPart.length > 2) {
-                                displayValue = numValue.toFixed(2);
-                            }
+                            displayValue = numValue.toFixed(1);
                         }
-                        
+
                         result += `${param.marker}${param.seriesName}：${displayValue}${unit}<br/>`;
                     }
                 });
-                
+
                 return result;
             }
         },
@@ -231,6 +292,18 @@ const getChartOption = (): EChartsOption => {
                 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,
@@ -269,14 +342,14 @@ const getChartOption = (): EChartsOption => {
 // ==================== 图例选择事件处理（最多2个系列）====================
 const handleLegendSelectChanged = (params: any) => {
     if (!chartInstance) return;
-    
+
     const { selected, name } = params;
     const clickedName = name;
     const isNowSelected = selected[clickedName];
-    
+
     console.log(`图例点击: ${clickedName}, 当前状态: ${isNowSelected ? '显示' : '隐藏'}`);
     console.log('当前可见队列:', visibleSeriesQueue.value);
-    
+
     if (isNowSelected) {
         // 用户想要显示这个系列
         if (visibleSeriesQueue.value.length >= 2) {
@@ -296,21 +369,21 @@ const handleLegendSelectChanged = (params: any) => {
             console.log(`从队列中移除: ${clickedName}`);
         }
     }
-    
+
     console.log('更新后可见队列:', visibleSeriesQueue.value);
-    
+
     // 根据队列构建最终的 selected 状态
     const finalSelected: Record<string, boolean> = {};
     indicatorConfig.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;
@@ -322,12 +395,12 @@ const handleLegendSelectChanged = (params: any) => {
         }
         return { ...item, show: isShow };
     });
-    
+
     currentOption.yAxis = newYAxis;
-    
+
     // 动态调整 Y 轴布局
     yAxisShowDynamic(finalSelected, currentOption);
-    
+
     // 完全替换模式更新
     try {
         chartInstance.setOption(currentOption, true);
@@ -337,6 +410,24 @@ const handleLegendSelectChanged = (params: any) => {
     }
 };
 
+// ==================== 数据点点击事件处理 ====================
+const handleDataPointClick = (params: any) => {
+    if (!params || !params.dataIndex) return;
+
+    // 获取点击的数据点对应的站点信息
+    const dataIndex = params.dataIndex;
+    const stationData = mockData.value[dataIndex];
+
+    if (stationData && stationData.stcd) {
+        modelStore.modalVisible = true;
+        modelStore.params.sttp = "fh_wq_point";
+        modelStore.title = stationData.stnm + "详情信息";
+        // modelStore.isBasicEdit = true;
+        modelStore.params.stcd = stationData.stcd;
+
+    }
+};
+
 // ==================== Y轴动态布局调整 ====================
 const yAxisShowDynamic = (selected: Record<string, boolean>, options: any) => {
     const allShow = options.yAxis?.filter((item: any) => item.show);
@@ -421,8 +512,20 @@ const initChart = async () => {
     const rect = chartRef.value.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) {
         console.warn('图表容器尺寸为0，等待渲染...');
-        await new Promise(resolve => setTimeout(resolve, 50));
-        return initChart();
+        // 使用 requestAnimationFrame 确保在浏览器下一重绘帧再初始化
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    initChart().then(resolve);
+                }, 50);
+            });
+        });
+    }
+
+    // 如果图表实例已存在，先销毁
+    if (chartInstance) {
+        chartInstance.dispose();
+        chartInstance = null;
     }
 
     // 初始化可见队列：默认只显示第一个系列
@@ -439,6 +542,9 @@ const initChart = async () => {
     // 监听图例选择变化事件
     chartInstance.on('legendselectchanged', handleLegendSelectChanged);
 
+    // 监听数据点点击事件
+    chartInstance.on('click', handleDataPointClick);
+
     // 强制 resize 确保正确渲染
     setTimeout(() => {
         chartInstance?.resize();
@@ -465,19 +571,331 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
     window.removeEventListener('resize', handleResize);
-    
+
     if (chartInstance) {
         chartInstance.off('legendselectchanged', handleLegendSelectChanged);
+        chartInstance.off('click', handleDataPointClick);
         chartInstance.dispose();
         chartInstance = null;
     }
 });
+//获取图参数
+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;
+    hasData.value = false;
+
+    // 确保图表实例存在
+    if (!chartInstance) {
+        console.log('图表实例不存在，重新初始化...');
+        await nextTick();
+        await initChart();
+        // 等待图表初始化完成
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+
+    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()
+                }
+            ]
+        },
+        "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;
+            }
+        }
+
+        console.log('原始数据条数:', apiData.length);
+
+        // 过滤出有水质数据的站点（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);
+            });
+
+        console.log('过滤后水质数据条数:', filteredData.length);
+
+        // 转换为图表所需的数据格式
+        const chartData = filteredData.map((item: any, index: number) => {
+            // 去除站点名称中的"出库水质站"后缀
+            let stnm = item.stnm || '-';
+            if (stnm.includes('出库水质站')) {
+                stnm = stnm.replace('出库水质站', '');
+            }
+
+            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,
+                nh3n: item.nh3n != null ? Number(item.nh3n) : null,
+                tp: item.tp != null ? Number(item.tp) : null,
+                tn: item.tn != null ? Number(item.tn) : null
+            };
+        });
+
+        // 更新模拟数据
+        mockData.value = chartData;
+
+        // 判断是否有数据
+        hasData.value = chartData.length > 0;
+        console.log('hasData 设置为:', hasData.value);
+
+        // 重新渲染图表 - 使用 nextTick 确保 DOM 更新完成
+        await nextTick();
+
+        if (chartInstance && hasData.value) {
+            // 使用 requestAnimationFrame 确保容器尺寸正确
+            requestAnimationFrame(() => {
+                const option = getChartOption();
+                chartInstance?.setOption(option, true);
+                chartInstance?.resize();
+                console.log('图表数据已更新，共', chartData.length, '个站点');
+            });
+        } else if (!hasData.value) {
+            // 无数据时清空图表
+            console.log('无数据，清空图表');
+            chartInstance?.clear();
+        }
+    } catch (error) {
+        console.error('获取图表数据失败:', error);
+        hasData.value = false;
+    } 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 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}`;
+};
+
+// 获取结束时间（当前选择日期的当天 23:59:59）
+const getEndTime = () => {
+    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');
+
+    return `${year}-${month}-${day} 23:59:59`;
+};
+
+//根据流域获取河段
+const getSelect = async () => {
+    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"
+                }
+            ]
+        },
+        "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;
+        }
+
+        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);
+    }
+}
+//监听子组件的数据变化
+const handlePanelChange1 = async (data) => {
+    console.log('当前所有控件状态:', data);
+    // 当选择器或日期变化时，重新加载图表数据
+    if (data.datetime || data.select) {
+        getecharts()
+
+    }
+}
+const wbsCode = ref('');
+watch(
+    () => JidiSelectEventStore.selectedItem,
+    (newVal) => {
+        console.log(newVal);
+        wbsCode.value = newVal.wbsCode;
+        getSelect()
+    },
+    { deep: true, immediate: true }
+);
+
+
 </script>
 
 <style lang="scss" scoped>
-.chart-container {
+.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: 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 484415a2..e2152a82 100644
--- a/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
+++ b/frontend/src/modules/yanchengshuiwenChangeMod/index.vue
@@ -199,9 +199,11 @@ const initChart = () => {
       formatter: (params: any) => {
         if (params && params.length > 0) {
           const data = params[0];
-          // 过滤掉 null 值的数据点
-          if (data.value !== null && data.value !== undefined) {
+          // 根据项目规范：空值统一显示为短横线 `-`
+          if (data.value != null) {
             return `${currentTime.value}<br/>${data.name}：${data.value}°C`;
+          } else {
+            return `${currentTime.value}<br/>${data.name}：-`;
           }
         }
         return "";
@@ -288,6 +290,7 @@ const initChart = () => {
         smooth: true,
         symbol: "circle",
         symbolSize: 6,
+        connectNulls: true,  // 连接空值两侧的线段，避免折线断开
         lineStyle: {
           color: "#6ca4f7",
           width: 2,
@@ -347,8 +350,8 @@ const init = async () => {
         logic: "and",
         filters: [
           { field: "rvcd", operator: "eq", dataType: "string", value: paramsOne.rvcd },
-          { field: "tm", operator: "gte", dataType: "date", value: paramsOne.tm[0] },
-          { field: "tm", operator: "lte", dataType: "date", value: paramsOne.tm[1] },
+          { 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" }],
diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
index 1960cdb4..b3e6d7ad 100644
--- a/frontend/src/utils/request.ts
+++ b/frontend/src/utils/request.ts
@@ -31,7 +31,7 @@ service.interceptors.request.use(
       config.headers._sysid = '10EC2E0B-AEA9-4757-83A2-201BA1BC54E9';
 
       config.headers.authorization =
-        'bearer a385ef90-a17d-429f-817f-7d961594020c';
+        'bearer 3f010383-deb5-464c-9198-b42af9c5c839';
       config.baseURL = '/';
     } else {
       const user = useUserStoreHook();
diff --git a/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue b/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
index a2840847..33661117 100644
--- a/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
+++ b/frontend/src/views/shuiZhiJianCe/shuiHuanJingZhiLiangZhuangKuang.vue
@@ -12,9 +12,10 @@ watch(
   () => JidiSelectEventStore.selectedItem,
   (newVal) => {
     console.log(newVal);
+    // debugger
     wbsCode.value = newVal.wbsCode;
   },
-  { deep: true }
+   { deep: true, immediate: true }
 );
 </script>