From 55ff382434c6763774da41fec554ba40a26a4166 Mon Sep 17 00:00:00 2001
From: zhangyue <82248909@qq.com>
Date: Sat, 25 Jul 2026 18:20:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E6=8A=A5=E8=A1=A8?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E3=80=81=E6=95=B0=E6=8D=AE=E8=B4=A8=E9=87=8F?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../appmana/datacenter/DataSummaryPage.vue    | 117 +++
 .../datacenter/components/RichTextCard.vue    |  96 +++
 .../appmana/datacenter/datacenter.api.ts      |  38 +
 src/views/appmana/datacenter/quality.vue      | 286 +++++++
 src/views/appmana/datacenter/statistics.vue   | 761 ++++++++++++++++++
 5 files changed, 1298 insertions(+)
 create mode 100644 src/views/appmana/datacenter/DataSummaryPage.vue
 create mode 100644 src/views/appmana/datacenter/components/RichTextCard.vue
 create mode 100644 src/views/appmana/datacenter/datacenter.api.ts
 create mode 100644 src/views/appmana/datacenter/quality.vue
 create mode 100644 src/views/appmana/datacenter/statistics.vue

diff --git a/src/views/appmana/datacenter/DataSummaryPage.vue b/src/views/appmana/datacenter/DataSummaryPage.vue
new file mode 100644
index 0000000..e3aa590
--- /dev/null
+++ b/src/views/appmana/datacenter/DataSummaryPage.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="page-container">
+    <!-- 使用 Ant Design Vue 的栅格系统，PC端一行展示3个，响应式适配 -->
+    <a-row :gutter="[16, 16]">
+      <a-col :xs="24" :sm="24" :md="8" >
+        <RichTextCard title="本周数据概况" :html-content="weekSummary" :loading="loading" />
+      </a-col>
+      <a-col :xs="24" :sm="24" :md="8">
+        <RichTextCard title="本月数据概况" :html-content="monthSummary" :loading="loading" />
+      </a-col>
+      <a-col :xs="24" :sm="24" :md="8">
+        <RichTextCard title="本年度数据概况" :html-content="yearSummary" :loading="loading" />
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue';
+  import { Spin } from 'ant-design-vue';
+  import RichTextCard from './components/RichTextCard.vue'; // 引入子组件
+  // 假设的接口请求方法
+  import { getAllDataSummary } from './datacenter.api';
+
+  // 定义三个富文本的响应式变量
+  const weekSummary = ref('');
+  const monthSummary = ref('');
+  const yearSummary = ref('');
+  // 初始化为 true，确保组件一开始就显示 loading
+  const loading = ref(true);
+
+  // 最小显示时间，确保 loading 至少显示一段时间
+  const MIN_LOADING_TIME = 800; // 800ms
+
+  onMounted(async () => {
+    const startTime = Date.now();
+    try {
+      // 模拟网络延迟（可选，用于测试）
+      // await new Promise(resolve => setTimeout(resolve, 1000));
+
+      const res = await getAllDataSummary();
+      if (res.success) {
+        // 根据接口实际返回的字段名进行赋值
+        weekSummary.value = res.result.weekHtml;
+        monthSummary.value = res.result.monthHtml;
+        yearSummary.value = res.result.yearHtml;
+      }
+    } catch (error) {
+      console.error('获取数据概况失败:', error);
+    } finally {
+      // 确保 loading 至少显示 MIN_LOADING_TIME 毫秒
+      const elapsedTime = Date.now() - startTime;
+      if (elapsedTime < MIN_LOADING_TIME) {
+        setTimeout(() => {
+          loading.value = false;
+        }, MIN_LOADING_TIME - elapsedTime);
+      } else {
+        loading.value = false;
+      }
+    }
+  });
+</script>
+
+<style scoped>
+  .page-container {
+    background-color: #fdfdfd;
+    min-height: 100vh;
+    padding: 16px;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  /* 全局 Loading 遮罩样式 */
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    border-radius: 8px;
+  }
+
+  .page-container :deep(.ant-card) {
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    transition: box-shadow 0.3s ease;
+  }
+
+  .page-container :deep(.ant-card:hover) {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  /* 自定义卡片 loading 样式 */
+  .page-container :deep(.ant-spin-container) {
+    min-height: 200px;
+  }
+
+  .page-container :deep(.ant-card-loading) {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading-shimmer 1.5s infinite;
+  }
+
+  @keyframes loading-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+</style>
diff --git a/src/views/appmana/datacenter/components/RichTextCard.vue b/src/views/appmana/datacenter/components/RichTextCard.vue
new file mode 100644
index 0000000..f9b2fae
--- /dev/null
+++ b/src/views/appmana/datacenter/components/RichTextCard.vue
@@ -0,0 +1,96 @@
+<template>
+  <a-card :title="title" class="summary-card" :loading="false">
+    <!-- 加载状态：显示骨架屏占位符 -->
+    <div v-if="loading" class="skeleton-content">
+      <div class="skeleton-line skeleton-line-short"></div>
+      <div class="skeleton-line"></div>
+      <div class="skeleton-line"></div>
+      <div class="skeleton-line skeleton-line-medium"></div>
+      <div class="skeleton-line skeleton-line-short"></div>
+    </div>
+
+    <!-- 加载完成：显示实际内容 -->
+    <div v-else v-html="htmlContent" class="rich-text-content"></div>
+  </a-card>
+</template>
+
+<script setup>
+  // 定义组件接收的 props
+  defineProps({
+    title: {
+      type: String,
+      default: '数据概况',
+    },
+    htmlContent: {
+      type: String,
+      default: '',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  });
+</script>
+
+<style scoped>
+  .summary-card {
+    height: 100%; /* 保证三个卡片高度一致 */
+  }
+
+  /* 骨架屏占位符样式 */
+  .skeleton-content {
+    padding: 8px 0;
+  }
+
+  .skeleton-line {
+    height: 16px;
+    background: linear-gradient(90deg, #e8ecf1 25%, #d0d7de 50%, #e8ecf1 75%);
+    background-size: 200% 100%;
+    border-radius: 4px;
+    margin-bottom: 12px;
+    animation: shimmer 1.5s infinite;
+    width: 100%;
+  }
+
+  .skeleton-line-short {
+    width: 60%;
+  }
+
+  .skeleton-line-medium {
+    width: 80%;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  /* 使用 :deep() 穿透 scoped 限制，统一调整富文本内部的样式 */
+  .rich-text-content :deep(div) {
+    margin-bottom: 8px;
+  }
+
+  .rich-text-content :deep(strong) {
+    font-size: 15px;
+  }
+
+  /* 内容过渡动画 */
+  .rich-text-content {
+    animation: fadeIn 0.3s ease-in;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>
diff --git a/src/views/appmana/datacenter/datacenter.api.ts b/src/views/appmana/datacenter/datacenter.api.ts
new file mode 100644
index 0000000..4903012
--- /dev/null
+++ b/src/views/appmana/datacenter/datacenter.api.ts
@@ -0,0 +1,38 @@
+import { defHttp } from '/@/utils/http/axios';
+
+
+enum Api {
+  qualityData = '/appmana/survDisplayInfo/getQualityData',
+  dataSummary = '/appmana/dataCenter/dataSummary',
+  deviceAlertStatistic = '/appmana/dataCenter/deviceAlertStatistic',
+  deviceList = '/appmana/dataCenter/deviceList',
+}
+
+
+/**
+ * 获取数据质量数据
+ * @param params
+ */
+export const getQualityData = (params) => defHttp.get({ url: Api.qualityData, params }, { isTransformResponse: false });
+
+
+
+/**
+ * 获取数据报告
+ * @param params
+ */
+export const getAllDataSummary = (params) => defHttp.get({ url: Api.dataSummary, params }, { isTransformResponse: false });
+
+/**
+ * 获取支持的设备列表
+ * @param params
+ */
+export const getAllDeviceList = (params) => defHttp.get({ url: Api.deviceList, params }, { isTransformResponse: false });
+
+
+
+/**
+ * 获取数据报告
+ * @param params
+ */
+export const getDeviceAlertStatistic = (params) => defHttp.post({ url: Api.deviceAlertStatistic, params }, { isTransformResponse: false });
diff --git a/src/views/appmana/datacenter/quality.vue b/src/views/appmana/datacenter/quality.vue
new file mode 100644
index 0000000..a6dff6f
--- /dev/null
+++ b/src/views/appmana/datacenter/quality.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="dashboard-container">
+    <div class="bg-grid"></div>
+    <div class="main-content">
+      <div class="side-column left-side">
+        <div class="tech-card card-phosphorus">
+          <div class="card-label">{{ data.phosphoruss }}</div>
+          <div class="card-value">{{ data.phosphorus }}</div>
+        </div>
+        <div class="tech-card card-cod">
+          <div class="card-label">{{ data.cods }}</div>
+          <div class="card-value">{{ data.cod }}</div>
+        </div>
+      </div>
+
+      <div class="center-core">
+        <div class="core-ring-outer"></div>
+        <div class="core-ring-inner"></div>
+        <div class="core-text-group">
+          <div class="score-text">{{ data.level }}</div>
+          <div class="score-label">综合评价</div>
+        </div>
+      </div>
+
+      <div class="side-column right-side">
+        <div class="tech-card card-nitrogen">
+          <div class="card-label">{{ data.nitrogens }}</div>
+          <div class="card-value">{{ data.nitrogen }}</div>
+        </div>
+        <div class="tech-card card-waste">
+          <div class="card-label">{{ data.wasteRates }}</div>
+          <div class="card-value">{{ data.wasteRate }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import { getQualityData } from './datacenter.api';
+
+  const data = ref({
+    phosphorus: 0.9,
+    cod: 500,
+    nitrogen: 1.8,
+    wasteRate: 92.3,
+    level: '优',
+    phosphoruss: 0.9,
+    cods: 500,
+    nitrogens: 1.8,
+    wasteRates: 92.3,
+  });
+
+  let timer: any = null;
+
+  onMounted(() => {
+    getData();
+  });
+
+  onUnmounted(() => {});
+
+  /**
+   * 获取数据
+   */
+  function getData() {
+    getQualityData({ infoKey: 'effect_assess' }).then((res) => {
+      if (res.code == 200) {
+        let infoData = res.result.detailList;
+        data.value = {
+          phosphorus: infoData[0].detailValue,
+          cod: infoData[2].detailValue,
+          nitrogen: infoData[1].detailValue,
+          wasteRate: infoData[3].detailValue,
+          phosphoruss: infoData[0].detailCode,
+          cods: infoData[2].detailCode,
+          nitrogens: infoData[1].detailCode,
+          wasteRates: infoData[3].detailCode,
+          level: infoData[4].detailValue,
+        };
+      } else {
+      }
+    });
+  }
+</script>
+
+<style scoped lang="less">
+  @bg-light: #f4f7f9;
+  @card-bg: #ffffff;
+  @border-color: #e8ecf1;
+  @text-main: #1f2937;
+  @text-sub: #6b7280;
+  @cyan-glow: #00a8ff;
+  @green-glow: #10b981;
+  @orange-glow: #f59e0b;
+  @purple-glow: #8b5cf6;
+
+  .dashboard-container {
+    width: 100%;
+    height: 100vh;
+    background-color: @bg-light;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Arial', sans-serif;
+  }
+
+  .bg-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
+    background-size: 40px 40px;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  .main-content {
+    position: relative;
+    z-index: 1;
+    width: 90%;
+    max-width: 1200px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .side-column {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    width: 300px;
+  }
+
+  .tech-card {
+    position: relative;
+    background: @card-bg;
+    border: 1px solid @border-color;
+    padding: 24px 30px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  }
+
+  .tech-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  }
+
+  .card-phosphorus {
+    border-left: 4px solid @green-glow;
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
+  }
+
+  .card-cod {
+    border-left: 4px solid @orange-glow;
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
+  }
+
+  .card-nitrogen {
+    border-right: 4px solid @purple-glow;
+    text-align: right;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 20px);
+  }
+
+  .card-waste {
+    border-right: 4px solid @cyan-glow;
+    text-align: right;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 20px);
+  }
+
+  .card-label {
+    font-size: 15px;
+    color: @text-sub;
+    margin-bottom: 12px;
+    letter-spacing: 0.5px;
+  }
+
+  .card-value {
+    font-size: 36px;
+    font-weight: bold;
+    color: @text-main;
+    font-family: 'Verdana', sans-serif;
+  }
+
+  .unit {
+    font-size: 14px;
+    margin-left: 6px;
+    font-weight: normal;
+    color: @text-sub;
+  }
+
+  .center-core {
+    position: relative;
+    width: 340px;
+    height: 340px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: radial-gradient(circle, rgba(0, 168, 255, 0.08) 0%, transparent 70%);
+  }
+
+  .core-ring-outer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    border-top-color: @cyan-glow;
+    border-bottom-color: @cyan-glow;
+    box-shadow: 0 0 15px rgba(0, 168, 255, 0.2), inset 0 0 15px rgba(0, 168, 255, 0.2);
+    animation: spin 4s linear infinite;
+  }
+
+  .core-ring-inner {
+    position: absolute;
+    width: 80%;
+    height: 80%;
+    border-radius: 50%;
+    border: 3px dashed rgba(0, 168, 255, 0.3);
+    border-left-color: transparent;
+    border-right-color: transparent;
+    animation: spin-reverse 8s linear infinite;
+  }
+
+  .core-text-group {
+    text-align: center;
+    z-index: 2;
+  }
+
+  .score-text {
+    font-size: 80px;
+    font-weight: 900;
+    color: @cyan-glow;
+    line-height: 1;
+    text-shadow: 0 0 15px rgba(0, 168, 255, 0.4);
+    font-family: 'Verdana', sans-serif;
+  }
+
+  .score-label {
+    margin-top: 10px;
+    font-size: 16px;
+    color: @text-sub;
+    letter-spacing: 4px;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spin-reverse {
+    0% {
+      transform: rotate(360deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  @media screen and (max-width: 1000px) {
+    .main-content {
+      flex-direction: column;
+      gap: 30px;
+    }
+    .side-column {
+      flex-direction: row;
+      width: 100%;
+      gap: 16px;
+    }
+    .tech-card {
+      flex: 1;
+    }
+    .center-core {
+      width: 240px;
+      height: 240px;
+      order: -1;
+    }
+  }
+</style>
diff --git a/src/views/appmana/datacenter/statistics.vue b/src/views/appmana/datacenter/statistics.vue
new file mode 100644
index 0000000..5a5d28a
--- /dev/null
+++ b/src/views/appmana/datacenter/statistics.vue
@@ -0,0 +1,761 @@
+<template>
+  <div class="dashboard-charts">
+    <!-- ==================== 筛选区域 ==================== -->
+    <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">
+            <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">
+              <span class="filter-label">模式</span>
+              <a-select v-model:value="selectedDimension" placeholder="请选择" style="flex: 1; min-width: 0">
+                <a-select-option value="dayhours">日统计</a-select-option>
+                <a-select-option value="monthDays">月统计</a-select-option>
+                <a-select-option value="yearMonth">年统计</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-date-picker
+                v-model:value="selectedDate"
+                :format="dateFormat"
+                :picker="pickerType"
+                :placeholder="datePlaceholder"
+                style="flex: 1; min-width: 0"
+              />
+            </div>
+          </a-col>
+
+          <!-- 查询按钮 -->
+          <a-col :xs="24" :sm="12" :md="5" :lg="4">
+            <a-button type="primary" @click="handleSearch" :loading="loading" block>
+              <template #icon>
+                <ReloadOutlined />
+              </template>
+              查询
+            </a-button>
+          </a-col>
+        </a-row>
+      </a-card>
+    </div>
+
+    <!-- ==================== 图表区域 ==================== -->
+    <a-row :gutter="[16, 16]" class="chart-grid">
+      <a-col v-for="(item, index) in chartDataList" :key="index" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="chart-col">
+        <a-card class="chart-card" :hoverable="true" :bordered="false" :loading="loading">
+          <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>
+          <div class="chart-container">
+            <div :ref="(el) => setChartRef(el, index)" class="chart-instance"></div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <!-- 空状态 -->
+    <a-empty v-if="!chartDataList || chartDataList.length === 0" description="暂无图表数据" class="empty-state" />
+  </div>
+</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';
+
+  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 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 params = {
+        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];
+              if (itemDetail.highVal) {
+                markLines.push({
+                  name: itemDetail.itemName,
+                  value: itemDetail.highVal,
+                  color: '#339af0',
+                  type: 'dotted',
+                });
+              }
+              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);
+        });
+    });
+  };
+
+  // ==================== 数据状态 ====================
+  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 pickerType = computed(() => {
+    switch (selectedDimension.value) {
+      case 'dayhours':
+        return 'date';
+      case 'monthDays':
+        return 'month';
+      case 'yearMonth':
+        return 'year';
+      default:
+        return 'date';
+    }
+  });
+
+  const datePlaceholder = computed(() => {
+    switch (selectedDimension.value) {
+      case 'dayhours':
+        return '选择日期';
+      case 'monthDays':
+        return '选择月份';
+      case 'yearMonth':
+        return '选择年份';
+      default:
+        return '选择日期';
+    }
+  });
+
+  // ==================== 下拉框筛选 ====================
+  const filterOption = (input, option) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  };
+
+  const getCategoryLabel = (value) => {
+    const found = categoryOptions.value.find((item) => item.id === value);
+    return found ? found.deployDes : value;
+  };
+
+  // ==================== 设置图表 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;
+        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;
+        }
+      }
+
+      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);
+        return;
+      }
+
+      const chart = echarts.init(el);
+      chart.setOption(getChartOption(item));
+      chartInstances.push(chart);
+
+      const resizeHandler = () => {
+        if (chart && !chart.isDisposed()) {
+          chart.resize();
+        }
+      };
+      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;
+  };
+
+  // ==================== 计算 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(dataMin - padding),
+      max: roundToTwo(dataMax + padding),
+    };
+  };
+
+  // ==================== 生成 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;
+        },
+      },
+      grid: {
+        left: '6%',
+        right: '6%',
+        bottom: '14%',
+        top: '8%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: item.xAxis || [],
+        axisLabel: {
+          fontSize: 11,
+          fontWeight: 500,
+          color: '#666',
+        },
+        axisLine: {
+          lineStyle: { color: '#e0e0e0' },
+        },
+        axisTick: {
+          alignWithLabel: true,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        // ✅ 设置 y 轴范围，确保 markLine 可见（已保留两位小数）
+        min: yAxisRange.min !== null ? yAxisRange.min : undefined,
+        max: yAxisRange.max !== null ? yAxisRange.max : undefined,
+        splitLine: {
+          lineStyle: {
+            color: '#f0f0f0',
+            type: 'dashed',
+          },
+        },
+        axisLabel: {
+          fontSize: 11,
+          color: '#888',
+          // ✅ y轴标签也保留两位小数
+          formatter: (value) => {
+            return roundToTwo(value);
+          },
+        },
+      },
+      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',
+            },
+          },
+        },
+      ],
+      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();
+      }
+    });
+    chartInstances.length = 0;
+  });
+
+  defineExpose({
+    handleSearch,
+    loadChartData,
+    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;
+    }
+
+    .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>