From 7b1e701ee3102f2c238cd4dcf66a3a4b0f9ac77a Mon Sep 17 00:00:00 2001
From: zhangyue <82248909@qq.com>
Date: Mon, 27 Jul 2026 15:02:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8A=A5=E8=A1=A8=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=94=B9=E4=B8=BA=E4=BB=A5=E7=AB=99=E7=82=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=8D=95=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../appmana/datacenter/datacenter.api.ts      |    7 +
 src/views/appmana/datacenter/statistics.vue   | 1328 +++++++++--------
 2 files changed, 683 insertions(+), 652 deletions(-)

diff --git a/src/views/appmana/datacenter/datacenter.api.ts b/src/views/appmana/datacenter/datacenter.api.ts
index 4903012..ce0e6d5 100644
--- a/src/views/appmana/datacenter/datacenter.api.ts
+++ b/src/views/appmana/datacenter/datacenter.api.ts
@@ -6,6 +6,7 @@ enum Api {
   dataSummary = '/appmana/dataCenter/dataSummary',
   deviceAlertStatistic = '/appmana/dataCenter/deviceAlertStatistic',
   deviceList = '/appmana/dataCenter/deviceList',
+  getStationList = '/appmana/survStationInfo/getStationList',
 }
 
 
@@ -36,3 +37,9 @@ export const getAllDeviceList = (params) => defHttp.get({ url: Api.deviceList, p
  * @param params
  */
 export const getDeviceAlertStatistic = (params) => defHttp.post({ url: Api.deviceAlertStatistic, params }, { isTransformResponse: false });
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const getStationList = (params) => defHttp.get({ url: Api.getStationList, params }, { isTransformResponse: false });
diff --git a/src/views/appmana/datacenter/statistics.vue b/src/views/appmana/datacenter/statistics.vue
index add110c..6b7a64b 100644
--- a/src/views/appmana/datacenter/statistics.vue
+++ b/src/views/appmana/datacenter/statistics.vue
@@ -4,26 +4,46 @@
     <div class="filter-section">
       <a-card :bordered="false" class="filter-card">
         <a-row :gutter="[8, 8]" align="middle">
-          <!-- 设备 -->
-          <a-col :xs="24" :sm="12" :md="8" :lg="7">
+          <!-- 站点 -->
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
             <div class="filter-item">
-              <span class="filter-label">设备</span>
+              <span class="filter-label">站点</span>
               <a-select
-                v-model:value="selectedCategory"
-                placeholder="请选择"
-                :loading="categoryLoading"
+                v-model:value="selectedSite"
+                placeholder="请选择站点"
+                :loading="siteLoading"
                 allow-clear
                 show-search
                 :filter-option="filterOption"
                 style="flex: 1; min-width: 0"
               >
-                <a-select-option v-for="item in categoryOptions" :key="item.id" :value="item.id">
-                  {{ item.deployDes }}
+                <a-select-option v-for="item in siteOptions" :key="item.stationCode" :value="item.stationCode">
+                  {{ item.stationName }}
                 </a-select-option>
               </a-select>
             </div>
           </a-col>
 
+          <!-- 设备 -->
+<!--          <a-col :xs="24" :sm="12" :md="6" :lg="5">-->
+<!--            <div class="filter-item">-->
+<!--              <span class="filter-label">设备</span>-->
+<!--              <a-select-->
+<!--                v-model:value="selectedCategory"-->
+<!--                placeholder="请选择设备"-->
+<!--                :loading="categoryLoading"-->
+<!--                allow-clear-->
+<!--                show-search-->
+<!--                :filter-option="filterOption"-->
+<!--                style="flex: 1; min-width: 0"-->
+<!--              >-->
+<!--                <a-select-option v-for="item in categoryOptions" :key="item.id" :value="item.id">-->
+<!--                  {{ item.deployDes }}-->
+<!--                </a-select-option>-->
+<!--              </a-select>-->
+<!--            </div>-->
+<!--          </a-col>-->
+
           <!-- 统计模式 -->
           <a-col :xs="24" :sm="12" :md="5" :lg="4">
             <div class="filter-item">
@@ -51,7 +71,7 @@
           </a-col>
 
           <!-- 查询按钮 -->
-          <a-col :xs="24" :sm="12" :md="5" :lg="4">
+          <a-col :xs="24" :sm="12" :md="5" :lg="5">
             <a-button type="primary" @click="handleSearch" :loading="loading" block>
               <template #icon>
                 <ReloadOutlined />
@@ -70,7 +90,6 @@
           <template #title>
             <div class="card-header">
               <span class="chart-title">{{ item.title || `图表 ${index + 1}` }}</span>
-              <!-- 保持您原来的写法，不做任何修改 -->
               <a-tag color="blue" size="small">{{ item.data?.length || 0 }} 项</a-tag>
             </div>
           </template>
@@ -87,727 +106,732 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue';
-import { message } from 'ant-design-vue';
-import { ReloadOutlined } from '@ant-design/icons-vue';
-import * as echarts from 'echarts';
-import dayjs from 'dayjs';
-import { getDeviceAlertStatistic, getAllDeviceList } from './datacenter.api';
+  import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import * as echarts from 'echarts';
+  import dayjs from 'dayjs';
+  import { getDeviceAlertStatistic, getAllDeviceList, getStationList } from './datacenter.api';
 
-const fetchCategoryOptions = () => {
-  return new Promise((resolve, reject) => {
-    getAllDeviceList({})
-      .then((res) => {
-        if (res.success) {
-          resolve(res.result);
-        } else {
-          reject(new Error('获取数据失败'));
-        }
-      })
-      .catch((error) => {
-        console.error('获取数据概况失败:', error);
-        reject(error);
-      });
-  });
-};
+  // ==================== 获取站点列表 ====================
+  const fetchSiteOptions = () => {
+    return new Promise((resolve, reject) => {
+      getStationList({})
+        .then((res) => {
+          if (res.success) {
+            resolve(res.result);
+          } else {
+            reject(new Error('获取站点数据失败'));
+          }
+        })
+        .catch((error) => {
+          console.error('获取站点数据失败:', error);
+          reject(error);
+        });
+    });
+  };
 
-// ==================== 根据类别获取图表数据 ====================
-const fetchChartDataByCategory = (deployId, summaryMode, startTime) => {
-  return new Promise((resolve, reject) => {
-    const chartData = [];
-    const dataMap = {
-      sales: [
-        {
-          title: '销售业绩月度对比',
-          xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
-          data: [180, 250, 220, 310, 280, 360],
-          markLines: [
-            { name: '月均线', value: 267, color: '#339af0', type: 'dashed' },
-            { name: '冲刺目标', value: 350, color: '#fcc419', type: 'dotted' },
-          ],
-        },
-        {
-          title: '销售团队排名',
-          xAxis: ['团队A', '团队B', '团队C', '团队D', '团队E'],
-          data: [95, 140, 82, 210, 115],
-          markLines: [
-            { name: '合格线', value: 100, color: '#ff6b6b', type: 'dashed' },
-            { name: '优秀线', value: 180, color: '#69db7c', type: 'dotted' },
-          ],
-        },
-        {
-          title: '各产品线销售额',
-          xAxis: ['产品线A', '产品线B', '产品线C', '产品线D'],
-          data: [420, 380, 560, 290],
-          markLines: [
-            { name: '平均线', value: 412, color: '#4dabf7', type: 'dashed' },
-            { name: '目标线', value: 500, color: '#ff922b', type: 'dotted' },
-          ],
-        },
-      ],
-    };
+  const fetchCategoryOptions = () => {
+    return new Promise((resolve, reject) => {
+      getAllDeviceList({})
+        .then((res) => {
+          if (res.success) {
+            resolve(res.result);
+          } else {
+            reject(new Error('获取设备数据失败'));
+          }
+        })
+        .catch((error) => {
+          console.error('获取设备数据失败:', error);
+          reject(error);
+        });
+    });
+  };
 
-    // 构建请求参数 - 使用新的参数名
-    const params = {
-      deployId: deployId,
-      summaryMode: summaryMode || 'dayhours',
-      startTime: startTime,
-    };
+  // ==================== 根据类别获取图表数据 ====================
+  const fetchChartDataByCategory = (stationCode, deployId, summaryMode, startTime) => {
+    return new Promise((resolve, reject) => {
+      const chartData = [];
+      const dataMap = {
+        sales: [
+          {
+            title: '销售业绩月度对比',
+            xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+            data: [180, 250, 220, 310, 280, 360],
+            markLines: [
+              { name: '高阈值', value: 350, color: '#fcc419', type: 'dashed' },
+              { name: '低阈值', value: 150, color: '#ff6b6b', type: 'dotted' },
+            ],
+          },
+          {
+            title: '销售团队排名',
+            xAxis: ['团队A', '团队B', '团队C', '团队D', '团队E'],
+            data: [95, 140, 82, 210, 115],
+            markLines: [
+              { name: '高阈值', value: 180, color: '#fcc419', type: 'dashed' },
+              { name: '低阈值', value: 80, color: '#ff6b6b', type: 'dotted' },
+            ],
+          },
+          {
+            title: '各产品线销售额',
+            xAxis: ['产品线A', '产品线B', '产品线C', '产品线D'],
+            data: [420, 380, 560, 290],
+            markLines: [
+              { name: '高阈值', value: 500, color: '#fcc419', type: 'dashed' },
+              { name: '低阈值', value: 300, color: '#ff6b6b', type: 'dotted' },
+            ],
+          },
+        ],
+      };
 
-    getDeviceAlertStatistic(params)
-      .then((res) => {
-        if (res.success) {
-          let itemMap = res.result.itemInfo;
-          let valueMap = res.result.dataMap;
-          Object.entries(valueMap).forEach(([key, value]) => {
-            let markLines = [];
-            let itemDetail = itemMap[key];
-            if (itemDetail.highVal) {
-              markLines.push({
-                name: itemDetail.itemName,
-                value: itemDetail.highVal,
-                color: '#339af0',
-                type: 'dotted',
+      // 构建请求参数 - stationCode
+      const params = {
+        stationCode: stationCode,
+        // deployId: deployId,
+        summaryMode: summaryMode || 'dayhours',
+        startTime: startTime,
+      };
+
+      getDeviceAlertStatistic(params)
+        .then((res) => {
+          if (res.success) {
+            let itemMap = res.result.itemInfo;
+            let valueMap = res.result.dataMap;
+            Object.entries(valueMap).forEach(([key, value]) => {
+              let markLines = [];
+              let itemDetail = itemMap[key];
+
+              // ✅ 高阈值：使用 highVal，名称为"高阈值"
+              if (itemDetail.highVal) {
+                markLines.push({
+                  name: itemDetail.itemName +'高阈值',
+                  value: itemDetail.highVal,
+                  color: '#fcc419',
+                  type: 'dashed',
+                });
+              }
+              // ✅ 低阈值：使用 lowVal，名称为"低阈值"
+              if (itemDetail.lowVal) {
+                markLines.push({
+                  name: itemDetail.itemName +'低阈值',
+                  value: itemDetail.lowVal,
+                  color: '#ff6b6b',
+                  type: 'dotted',
+                });
+              }
+
+              chartData.push({
+                title: itemDetail.itemName || key,
+                xAxis: res.result.timeList || [],
+                data: valueMap[key] || [],
+                markLines: markLines,
               });
-            }
-            if (itemDetail.lowVal) {
-              markLines.push({
-                name: itemDetail.itemName,
-                value: itemDetail.lowVal,
-                color: '#fcc419',
-                type: 'dashed',
-              });
-            }
-
-            chartData.push({
-              title: itemDetail.itemName || key,
-              xAxis: res.result.timeList || [],
-              data: valueMap[key] || [],
-              markLines: markLines,
             });
-          });
-          resolve(chartData || dataMap.sales);
-        } else {
-          reject(new Error('获取数据失败'));
-        }
-      })
-      .catch((error) => {
-        console.error('获取数据概况失败:', error);
-        reject(error);
-      });
+            resolve(chartData || dataMap.sales);
+          } else {
+            reject(new Error('获取数据失败'));
+          }
+        })
+        .catch((error) => {
+          console.error('获取数据概况失败:', error);
+          reject(error);
+        });
+    });
+  };
+
+  // ==================== 数据状态 ====================
+  const siteOptions = ref([]);
+  const siteLoading = ref(false);
+  const selectedSite = ref('');
+
+  const categoryOptions = ref([]);
+  const categoryLoading = ref(false);
+  const selectedCategory = ref('');
+  const chartDataList = ref([]);
+  const loading = ref(false);
+  const chartInstances = [];
+  const chartRefs = {};
+
+  const selectedDimension = ref('dayhours');
+  const selectedDate = ref(null);
+
+  // ==================== 根据统计模式动态计算日期格式 ====================
+  const dateFormat = computed(() => {
+    switch (selectedDimension.value) {
+      case 'dayhours':
+        return 'YYYY-MM-DD';
+      case 'monthDays':
+        return 'YYYY-MM';
+      case 'yearMonth':
+        return 'YYYY';
+      default:
+        return 'YYYY-MM-DD';
+    }
   });
-};
 
-// ==================== 数据状态 ====================
-const categoryOptions = ref([]);
-const categoryLoading = ref(false);
-const selectedCategory = ref('');
-const chartDataList = ref([]);
-const loading = ref(false);
-const chartInstances = [];
-const chartRefs = {};
+  const pickerType = computed(() => {
+    switch (selectedDimension.value) {
+      case 'dayhours':
+        return 'date';
+      case 'monthDays':
+        return 'month';
+      case 'yearMonth':
+        return 'year';
+      default:
+        return 'date';
+    }
+  });
 
-const selectedDimension = ref('dayhours');
-const selectedDate = ref(null);
+  const datePlaceholder = computed(() => {
+    switch (selectedDimension.value) {
+      case 'dayhours':
+        return '选择日期';
+      case 'monthDays':
+        return '选择月份';
+      case 'yearMonth':
+        return '选择年份';
+      default:
+        return '选择日期';
+    }
+  });
 
-// ==================== 根据统计模式动态计算日期格式 ====================
-const dateFormat = computed(() => {
-  switch (selectedDimension.value) {
-    case 'dayhours':
-      return 'YYYY-MM-DD';
-    case 'monthDays':
-      return 'YYYY-MM';
-    case 'yearMonth':
-      return 'YYYY';
-    default:
-      return 'YYYY-MM-DD';
-  }
-});
+  // ==================== 下拉框筛选 ====================
+  const filterOption = (input, option) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  };
 
-const pickerType = computed(() => {
-  switch (selectedDimension.value) {
-    case 'dayhours':
-      return 'date';
-    case 'monthDays':
-      return 'month';
-    case 'yearMonth':
-      return 'year';
-    default:
-      return 'date';
-  }
-});
+  const getCategoryLabel = (value) => {
+    const found = categoryOptions.value.find((item) => item.id === value);
+    return found ? found.deployDes : value;
+  };
 
-const datePlaceholder = computed(() => {
-  switch (selectedDimension.value) {
-    case 'dayhours':
-      return '选择日期';
-    case 'monthDays':
-      return '选择月份';
-    case 'yearMonth':
-      return '选择年份';
-    default:
-      return '选择日期';
-  }
-});
+  // ==================== 设置图表 DOM 引用 ====================
+  const setChartRef = (el, index) => {
+    if (el) {
+      chartRefs[index] = el;
+    }
+  };
 
-// ==================== 下拉框筛选 ====================
-const filterOption = (input, option) => {
-  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-};
+  // ==================== 加载下拉选项 ====================
+  const loadCategories = async () => {
+    // 先加载站点列表
+    siteLoading.value = true;
+    try {
+      const siteRes = await fetchSiteOptions();
+      siteOptions.value = siteRes;
+      if (siteRes.length > 0) {
+        selectedSite.value = siteRes[0].stationCode;
+      }
+    } catch (error) {
+      console.error('加载站点列表失败:', error);
+    } finally {
+      siteLoading.value = false;
+    }
 
-const getCategoryLabel = (value) => {
-  const found = categoryOptions.value.find((item) => item.id === value);
-  return found ? found.deployDes : value;
-};
+    // 再加载设备列表
+    categoryLoading.value = true;
+    try {
+      const res = await fetchCategoryOptions();
+      categoryOptions.value = res;
+      if (res.length > 0) {
+        selectedCategory.value = res[0].id;
+      }
+    } catch (error) {
+      console.error('加载设备列表失败:', error);
+    } finally {
+      categoryLoading.value = false;
+    }
 
-// ==================== 设置图表 DOM 引用 ====================
-const setChartRef = (el, index) => {
-  if (el) {
-    chartRefs[index] = el;
-  }
-};
-
-// ==================== 加载下拉选项 ====================
-const loadCategories = async () => {
-  categoryLoading.value = true;
-  try {
-    const res = await fetchCategoryOptions();
-    categoryOptions.value = res;
-
-    if (res.length > 0) {
-      selectedCategory.value = res[0].id;
+    // 如果有站点和设备，自动查询
+    if (selectedSite.value && selectedCategory.value) {
       await handleSearch();
     }
-  } catch (error) {
-    console.error(error);
-  } finally {
-    categoryLoading.value = false;
-  }
-};
+  };
 
-// ==================== 加载图表数据（参数名：deployId, summaryMode, startTime） ====================
-const loadChartData = async (deployId, summaryMode, startTime) => {
-  if (!deployId) return;
-
-  loading.value = true;
-  try {
-    // 格式化日期
-    let formattedDate = null;
-    if (startTime) {
-      if (dayjs.isDayjs(startTime)) {
-        formattedDate = startTime.format(dateFormat.value);
-      } else {
-        formattedDate = startTime;
-      }
+  // ==================== 加载图表数据（加入 stationCode 参数） ====================
+  const loadChartData = async (stationCode, deployId, summaryMode, startTime) => {
+    if (!stationCode) {
+      message.warning('请先选择站点');
+      return;
     }
-
-    const res = await fetchChartDataByCategory(deployId, summaryMode, formattedDate);
-    chartDataList.value = res;
-    await nextTick();
-    setTimeout(() => {
-      initCharts();
-    }, 150);
-  } catch (error) {
-    message.error('加载图表数据失败');
-    console.error(error);
-  } finally {
-    loading.value = false;
-  }
-};
-
-// ==================== 查询（收集所有参数） ====================
-const handleSearch = () => {
-  if (!selectedCategory.value) {
-    message.warning('请先选择设备');
-    return;
-  }
-  loadChartData(selectedCategory.value, selectedDimension.value, selectedDate.value);
-};
-
-// ==================== 初始化所有图表 ====================
-const initCharts = () => {
-  chartInstances.forEach((instance) => {
-    if (instance._resizeHandler) {
-      window.removeEventListener('resize', instance._resizeHandler);
-    }
-    if (!instance.isDisposed()) {
-      instance.dispose();
-    }
-  });
-  chartInstances.length = 0;
-
-  chartDataList.value.forEach((item, index) => {
-    const el = chartRefs[index];
-    if (!el) return;
-
-    if (el.offsetWidth === 0 || el.offsetHeight === 0) {
-      setTimeout(() => initCharts(), 100);
+    if (!deployId) {
+      message.warning('请先选择设备');
       return;
     }
 
-    const chart = echarts.init(el);
-    chart.setOption(getChartOption(item));
-    chartInstances.push(chart);
-
-    const resizeHandler = () => {
-      if (chart && !chart.isDisposed()) {
-        chart.resize();
+    loading.value = true;
+    try {
+      // 格式化日期
+      let formattedDate = null;
+      if (startTime) {
+        if (dayjs.isDayjs(startTime)) {
+          formattedDate = startTime.format(dateFormat.value);
+        } else {
+          formattedDate = startTime;
+        }
       }
-    };
-    window.addEventListener('resize', resizeHandler);
-    chart._resizeHandler = resizeHandler;
-  });
-};
 
-// ==================== 保留两位小数 ====================
-const roundToTwo = (num) => {
-  if (num === undefined || num === null || isNaN(num)) return num;
-  return Math.round(num * 100) / 100;
-};
+      const res = await fetchChartDataByCategory(stationCode, deployId, summaryMode, formattedDate);
+      chartDataList.value = res;
+      await nextTick();
+      setTimeout(() => {
+        initCharts();
+      }, 150);
+    } catch (error) {
+      message.error('加载图表数据失败');
+      console.error(error);
+    } finally {
+      loading.value = false;
+    }
+  };
 
-// ==================== 计算 y 轴范围（确保 markLine 可见） ====================
-const calculateYAxisRange = (data, markLines) => {
-  if (!data || data.length === 0) {
-    return { min: null, max: null };
-  }
+  // ==================== 查询（收集所有参数，包含 stationCode） ====================
+  const handleSearch = () => {
+    if (!selectedSite.value) {
+      message.warning('请先选择站点');
+      return;
+    }
+    if (!selectedCategory.value) {
+      message.warning('请先选择设备');
+      return;
+    }
+    loadChartData(selectedSite.value, selectedCategory.value, selectedDimension.value, selectedDate.value);
+  };
 
-  // 过滤有效数据
-  const validData = data.filter((v) => v !== undefined && v !== null && !isNaN(v));
-  if (validData.length === 0) {
-    return { min: null, max: null };
-  }
+  // ==================== 初始化所有图表 ====================
+  const initCharts = () => {
+    chartInstances.forEach((instance) => {
+      if (instance._resizeHandler) {
+        window.removeEventListener('resize', instance._resizeHandler);
+      }
+      if (!instance.isDisposed()) {
+        instance.dispose();
+      }
+    });
+    chartInstances.length = 0;
 
-  // 计算数据的最小值和最大值
-  let dataMin = Math.min(...validData);
-  let dataMax = Math.max(...validData);
+    chartDataList.value.forEach((item, index) => {
+      const el = chartRefs[index];
+      if (!el) return;
 
-  // 收集所有 markLine 的值
-  const markValues = (markLines || []).map((line) => line.value).filter((v) => v !== undefined && v !== null && !isNaN(v));
+      if (el.offsetWidth === 0 || el.offsetHeight === 0) {
+        setTimeout(() => initCharts(), 100);
+        return;
+      }
 
-  if (markValues.length > 0) {
-    const markMin = Math.min(...markValues);
-    const markMax = Math.max(...markValues);
+      const chart = echarts.init(el);
+      chart.setOption(getChartOption(item));
+      chartInstances.push(chart);
 
-    // 合并数据范围和 markLine 范围
-    const allMin = Math.min(dataMin, markMin);
-    const allMax = Math.max(dataMax, markMax);
+      const resizeHandler = () => {
+        if (chart && !chart.isDisposed()) {
+          chart.resize();
+        }
+      };
+      window.addEventListener('resize', resizeHandler);
+      chart._resizeHandler = resizeHandler;
+    });
+  };
 
-    // 计算 padding（上下留白 15%）
-    const range = allMax - allMin;
+  // ==================== 保留两位小数 ====================
+  const roundToTwo = (num) => {
+    if (num === undefined || num === null || isNaN(num)) return num;
+    return Math.round(num * 100) / 100;
+  };
+
+  // ==================== 计算 y 轴范围（确保 markLine 可见） ====================
+  const calculateYAxisRange = (data, markLines) => {
+    if (!data || data.length === 0) {
+      return { min: null, max: null };
+    }
+
+    // 过滤有效数据
+    const validData = data.filter((v) => v !== undefined && v !== null && !isNaN(v));
+    if (validData.length === 0) {
+      return { min: null, max: null };
+    }
+
+    // 计算数据的最小值和最大值
+    let dataMin = Math.min(...validData);
+    let dataMax = Math.max(...validData);
+
+    // 收集所有 markLine 的值
+    const markValues = (markLines || []).map((line) => line.value).filter((v) => v !== undefined && v !== null && !isNaN(v));
+
+    if (markValues.length > 0) {
+      const markMin = Math.min(...markValues);
+      const markMax = Math.max(...markValues);
+
+      // 合并数据范围和 markLine 范围
+      const allMin = Math.min(dataMin, markMin);
+      const allMax = Math.max(dataMax, markMax);
+
+      // 计算 padding（上下留白 15%）
+      const range = allMax - allMin;
+      const padding = range * 0.15 || 10;
+
+      // 保留两位小数
+      return {
+        min: roundToTwo(allMin - padding),
+        max: roundToTwo(allMax + padding),
+      };
+    }
+
+    // 没有 markLine 时，使用数据范围加 padding
+    const range = dataMax - dataMin;
     const padding = range * 0.15 || 10;
 
-    // 保留两位小数
     return {
-      min: roundToTwo(allMin - padding),
-      max: roundToTwo(allMax + padding),
+      min: roundToTwo(dataMin - padding),
+      max: roundToTwo(dataMax + padding),
     };
-  }
-
-  // 没有 markLine 时，使用数据范围加 padding
-  const range = dataMax - dataMin;
-  const padding = range * 0.15 || 10;
-
-  return {
-    min: roundToTwo(dataMin - padding),
-    max: roundToTwo(dataMax + padding),
   };
-};
 
-// ==================== 生成 ECharts 配置 ====================
-const getChartOption = (item) => {
-  // 计算 y 轴范围，确保 markLine 可见
-  const yAxisRange = calculateYAxisRange(item.data, item.markLines);
+  // ==================== 生成 ECharts 配置 ====================
+  const getChartOption = (item) => {
+    // 计算 y 轴范围，确保 markLine 可见
+    const yAxisRange = calculateYAxisRange(item.data, item.markLines);
 
-  const markLineData = (item.markLines || []).map((line) => ({
-    yAxis: line.value,
-    name: line.name,
-    lineStyle: {
-      color: line.color,
-      type: line.type || 'dashed',
-      width: 2,
-    },
-    label: {
-      formatter: `${line.name}: ${line.value}`,
-      color: line.color,
-      fontSize: 11,
-      position: 'insideEndTop',
-      fontWeight: 500,
-    },
-  }));
-
-  return {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'shadow' },
-      formatter: (params) => {
-        let result = `<strong>${params[0].axisValue}</strong><br/>`;
-        params.forEach((p) => {
-          result += `${p.marker} ${p.seriesName}: ${p.value}<br/>`;
-        });
-        item.markLines?.forEach((line) => {
-          result += `<span style="display:inline-block;width:10px;height:2px;background:${line.color};margin-right:5px;"></span> ${line.name}: ${line.value}<br/>`;
-        });
-        return result;
+    const markLineData = (item.markLines || []).map((line) => ({
+      yAxis: line.value,
+      name: line.name,
+      lineStyle: {
+        color: line.color,
+        type: line.type || 'dashed',
+        width: 2,
       },
-    },
-    grid: {
-      left: '6%',
-      right: '6%',
-      bottom: '14%',
-      top: '8%',
-      containLabel: true,
-    },
-    xAxis: {
-      type: 'category',
-      data: item.xAxis || [],
-      axisLabel: {
+      label: {
+        formatter: `${line.name}: ${line.value}`,
+        color: line.color,
         fontSize: 11,
+        position: 'insideEndTop',
         fontWeight: 500,
-        color: '#666',
       },
-      axisLine: {
-        lineStyle: { color: '#e0e0e0' },
-      },
-      axisTick: {
-        alignWithLabel: true,
-      },
-    },
-    yAxis: {
-      type: 'value',
-      min: yAxisRange.min !== null ? yAxisRange.min : undefined,
-      max: yAxisRange.max !== null ? yAxisRange.max : undefined,
-      splitLine: {
-        lineStyle: {
-          color: '#f0f0f0',
-          type: 'dashed',
+    }));
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' },
+        formatter: (params) => {
+          let result = `<strong>${params[0].axisValue}</strong><br/>`;
+          params.forEach((p) => {
+            result += `${p.marker} ${p.seriesName}: ${p.value}<br/>`;
+          });
+          item.markLines?.forEach((line) => {
+            result += `<span style="display:inline-block;width:10px;height:2px;background:${line.color};margin-right:5px;"></span> ${line.name}: ${line.value}<br/>`;
+          });
+          return result;
         },
       },
-      axisLabel: {
-        fontSize: 11,
-        color: '#888',
-        formatter: (value) => {
-          return roundToTwo(value);
-        },
+      grid: {
+        left: '6%',
+        right: '6%',
+        bottom: '14%',
+        top: '8%',
+        containLabel: true,
       },
-    },
-    series: [
-      // ========== 柱状图（保持不变） ==========
-      {
-        name: item.title || '数据',
-        type: 'bar',
-        data: item.data || [],
-        barWidth: '40%',
-        barMaxWidth: 50,
-        markLine: {
-          silent: true,
-          symbol: 'none',
-          data: markLineData,
-          lineStyle: {
-            width: 2,
-          },
-          label: {
-            position: 'insideEndTop',
-            fontSize: 11,
-            fontWeight: 500,
-          },
-        },
-        itemStyle: {
-          borderRadius: [4, 4, 0, 0],
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              { offset: 0, color: '#5b8def' },
-              { offset: 1, color: '#8db5f5' },
-            ],
-          },
-        },
-        emphasis: {
-          itemStyle: {
-            color: '#3b6fd4',
-          },
-        },
-      },
-      // ========== ✅ 新增：折线图 ==========
-      {
-        name: `${item.title || '数据'}趋势`,
-        type: 'line',
-        data: item.data || [],
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 6,
-        lineStyle: {
-          color: '#ff6b6b',
-          width: 2,
-        },
-        itemStyle: {
-          color: '#ff6b6b',
-        },
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              { offset: 0, color: 'rgba(255, 107, 107, 0.25)' },
-              { offset: 1, color: 'rgba(255, 107, 107, 0.02)' },
-            ],
-          },
-        },
-        label: {
-          show: true,
-          position: 'top',
-          fontSize: 10,
-          color: '#ff6b6b',
+      xAxis: {
+        type: 'category',
+        data: item.xAxis || [],
+        axisLabel: {
+          fontSize: 11,
           fontWeight: 500,
-          formatter: (params) => {
-            return params.value;
+          color: '#666',
+        },
+        axisLine: {
+          lineStyle: { color: '#e0e0e0' },
+        },
+        axisTick: {
+          alignWithLabel: true,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        min: yAxisRange.min !== null ? yAxisRange.min : undefined,
+        max: yAxisRange.max !== null ? yAxisRange.max : undefined,
+        splitLine: {
+          lineStyle: {
+            color: '#f0f0f0',
+            type: 'dashed',
           },
         },
-        emphasis: {
-          focus: 'series',
+        axisLabel: {
+          fontSize: 11,
+          color: '#888',
+          formatter: (value) => {
+            return roundToTwo(value);
+          },
         },
-        xAxisIndex: 0,
-        yAxisIndex: 0,
       },
-    ],
-    legend: {
-      show: true,
-      bottom: 0,
-      left: 'center',
-      icon: 'roundRect',
-      itemWidth: 12,
-      itemHeight: 8,
-      data: [
+      series: [
+        // ========== 柱状图 ==========
         {
           name: item.title || '数据',
-          icon: 'roundRect',
-        },
-        // ✅ 新增：折线图图例
-        {
-          name: `${item.title || '数据'}趋势`,
-          icon: 'line',
+          type: 'bar',
+          data: item.data || [],
+          barWidth: '40%',
+          barMaxWidth: 50,
+          markLine: {
+            silent: true,
+            symbol: 'none',
+            data: markLineData,
+            lineStyle: {
+              width: 2,
+            },
+            label: {
+              position: 'insideEndTop',
+              fontSize: 11,
+              fontWeight: 500,
+            },
+          },
           itemStyle: {
-            color: '#ff6b6b',
+            borderRadius: [4, 4, 0, 0],
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: '#5b8def' },
+                { offset: 1, color: '#8db5f5' },
+              ],
+            },
+          },
+          emphasis: {
+            itemStyle: {
+              color: '#3b6fd4',
+            },
           },
         },
-        ...(item.markLines || []).map((line) => ({
-          name: line.name,
-          icon: 'line',
-          itemStyle: {
-            color: line.color,
-          },
-        })),
       ],
-    },
+      legend: {
+        show: true,
+        bottom: 0,
+        left: 'center',
+        icon: 'roundRect',
+        itemWidth: 12,
+        itemHeight: 8,
+        data: [
+          {
+            name: item.title || '数据',
+            icon: 'roundRect',
+          },
+          ...(item.markLines || []).map((line) => ({
+            name: line.name,
+            icon: 'line',
+            itemStyle: {
+              color: line.color,
+            },
+          })),
+        ],
+      },
+    };
   };
-};
 
-// ==================== 生命周期 ====================
-onMounted(async () => {
-  await loadCategories();
-});
-
-onBeforeUnmount(() => {
-  chartInstances.forEach((instance) => {
-    if (instance._resizeHandler) {
-      window.removeEventListener('resize', instance._resizeHandler);
-    }
-    if (!instance.isDisposed()) {
-      instance.dispose();
-    }
+  // ==================== 生命周期 ====================
+  onMounted(async () => {
+    await loadCategories();
   });
-  chartInstances.length = 0;
-});
 
-defineExpose({
-  handleSearch,
-  loadChartData,
-  selectedCategory,
-  categoryOptions,
-  selectedDimension,
-  selectedDate,
-});
+  onBeforeUnmount(() => {
+    chartInstances.forEach((instance) => {
+      if (instance._resizeHandler) {
+        window.removeEventListener('resize', instance._resizeHandler);
+      }
+      if (!instance.isDisposed()) {
+        instance.dispose();
+      }
+    });
+    chartInstances.length = 0;
+  });
+
+  defineExpose({
+    handleSearch,
+    loadChartData,
+    selectedSite,
+    siteOptions,
+    selectedCategory,
+    categoryOptions,
+    selectedDimension,
+    selectedDate,
+  });
 </script>
 
 <style scoped>
-.dashboard-charts {
-  padding: 24px;
-  background: #f0f2f5;
-  min-height: 100vh;
-}
-
-/* ==================== 筛选区域样式 ==================== */
-.filter-section {
-  margin-bottom: 20px;
-}
-
-.filter-card {
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-}
-
-.filter-card :deep(.ant-card-body) {
-  padding: 16px 20px;
-}
-
-.filter-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.filter-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #1d2129;
-  white-space: nowrap;
-  min-width: 32px;
-}
-
-/* ==================== 图表区域样式 ==================== */
-.chart-grid {
-  margin: 0 -8px;
-}
-
-.chart-col {
-  padding: 0 8px;
-  margin-bottom: 16px;
-}
-
-.chart-card {
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  transition: all 0.3s ease;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.chart-card:hover {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-}
-
-.chart-card :deep(.ant-card-head) {
-  padding: 0 20px;
-  min-height: 52px;
-  border-bottom: 1px solid #f0f0f0;
-  background: #fafafa;
-  border-radius: 12px 12px 0 0;
-}
-
-.chart-card :deep(.ant-card-head-title) {
-  padding: 14px 0;
-  font-weight: 500;
-}
-
-.chart-card :deep(.ant-card-body) {
-  padding: 16px 12px 12px 12px;
-  flex: 1;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.chart-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1d2129;
-  letter-spacing: 0.3px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 70%;
-}
-
-.chart-container {
-  width: 100%;
-  height: 280px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.chart-instance {
-  width: 100%;
-  height: 280px;
-}
-
-/* 空状态样式 */
-.empty-state {
-  margin-top: 60px;
-  background: #ffffff;
-  padding: 60px 0;
-  border-radius: 16px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
-}
-
-/* ==================== 响应式调整 ==================== */
-@media screen and (max-width: 768px) {
   .dashboard-charts {
-    padding: 16px;
+    padding: 24px;
+    background: #f0f2f5;
+    min-height: 100vh;
+  }
+
+  /* ==================== 筛选区域样式 ==================== */
+  .filter-section {
+    margin-bottom: 20px;
+  }
+
+  .filter-card {
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 
   .filter-card :deep(.ant-card-body) {
-    padding: 12px 16px;
+    padding: 16px 20px;
   }
 
   .filter-item {
-    gap: 8px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
   }
 
   .filter-label {
-    min-width: 36px;
-  }
-
-  .chart-container {
-    height: 220px;
-  }
-
-  .chart-instance {
-    height: 220px;
-  }
-
-  .chart-title {
     font-size: 13px;
-    max-width: 60%;
+    font-weight: 500;
+    color: #1d2129;
+    white-space: nowrap;
+    min-width: 32px;
+  }
+
+  /* ==================== 图表区域样式 ==================== */
+  .chart-grid {
+    margin: 0 -8px;
+  }
+
+  .chart-col {
+    padding: 0 8px;
+    margin-bottom: 16px;
+  }
+
+  .chart-card {
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .chart-card:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    transform: translateY(-2px);
   }
 
   .chart-card :deep(.ant-card-head) {
-    padding: 0 16px;
-  }
-
-  .chart-card :deep(.ant-card-body) {
-    padding: 12px 8px 8px 8px;
-  }
-}
-
-@media screen and (max-width: 480px) {
-  .chart-container {
-    height: 200px;
-  }
-
-  .chart-instance {
-    height: 200px;
-  }
-
-  .chart-card :deep(.ant-card-head) {
-    min-height: 44px;
+    padding: 0 20px;
+    min-height: 52px;
+    border-bottom: 1px solid #f0f0f0;
+    background: #fafafa;
+    border-radius: 12px 12px 0 0;
   }
 
   .chart-card :deep(.ant-card-head-title) {
-    padding: 10px 0;
-    font-size: 13px;
+    padding: 14px 0;
+    font-weight: 500;
+  }
+
+  .chart-card :deep(.ant-card-body) {
+    padding: 16px 12px 12px 12px;
+    flex: 1;
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .chart-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1d2129;
+    letter-spacing: 0.3px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 70%;
+  }
+
+  .chart-container {
+    width: 100%;
+    height: 280px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .chart-instance {
+    width: 100%;
+    height: 280px;
+  }
+
+  /* 空状态样式 */
+  .empty-state {
+    margin-top: 60px;
+    background: #ffffff;
+    padding: 60px 0;
+    border-radius: 16px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  }
+
+  /* ==================== 响应式调整 ==================== */
+  @media screen and (max-width: 768px) {
+    .dashboard-charts {
+      padding: 16px;
+    }
+
+    .filter-card :deep(.ant-card-body) {
+      padding: 12px 16px;
+    }
+
+    .filter-item {
+      gap: 8px;
+    }
+
+    .filter-label {
+      min-width: 36px;
+    }
+
+    .chart-container {
+      height: 220px;
+    }
+
+    .chart-instance {
+      height: 220px;
+    }
+
+    .chart-title {
+      font-size: 13px;
+      max-width: 60%;
+    }
+
+    .chart-card :deep(.ant-card-head) {
+      padding: 0 16px;
+    }
+
+    .chart-card :deep(.ant-card-body) {
+      padding: 12px 8px 8px 8px;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .chart-container {
+      height: 200px;
+    }
+
+    .chart-instance {
+      height: 200px;
+    }
+
+    .chart-card :deep(.ant-card-head) {
+      min-height: 44px;
+    }
+
+    .chart-card :deep(.ant-card-head-title) {
+      padding: 10px 0;
+      font-size: 13px;
+    }
   }
-}
 </style>