From c4ec1748a8f8fa5d147fcb6fd3f5cfa5d67898ed Mon Sep 17 00:00:00 2001
From: haohao <1036606149@qq.com>
Date: Sun, 23 Nov 2025 16:02:21 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=E3=80=90antd=E3=80=91=E3=80=90iot?=
 =?UTF-8?q?=E3=80=91=E6=9B=B4=E6=96=B0=E6=B6=88=E6=81=AF=E8=B6=8B=E5=8A=BF?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=E5=99=A8=E4=B8=BA=E5=BF=AB?=
 =?UTF-8?q?=E6=8D=B7=E6=97=A5=E6=9C=9F=E8=8C=83=E5=9B=B4=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iot/home/modules/message-trend-card.vue   | 34 ++++++++-----------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue b/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
index 28ea84a4a..3a4cbeb91 100644
--- a/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Dayjs } from 'dayjs';
 import type { IotStatisticsApi } from '#/api/iot/statistics';
 
 import { computed, nextTick, onMounted, reactive, ref } from 'vue';
@@ -7,17 +8,16 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-import { Card, DatePicker, Empty, Select } from 'ant-design-vue';
+import { Card, Empty, Select } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
+import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
 import { getDeviceMessageSummaryByDate } from '#/api/iot/statistics';
 
 import { getMessageTrendChartOptions } from '../chart-options';
 
 defineOptions({ name: 'MessageTrendCard' });
 
-const { RangePicker } = DatePicker;
-
 const messageChartRef = ref();
 const { renderEcharts } = useEcharts(messageChartRef);
 
@@ -68,12 +68,15 @@ function handleQuery() {
 }
 
 /** 处理时间范围变化 */
-function handleDateRangeChange() {
-  if (dateRange.value && dateRange.value.length === 2) {
-    // 将选择的日期转换为带时分秒的格式（开始日期 00:00:00，结束日期 23:59:59）
-    queryParams.times = formatDateRangeWithTime(dateRange.value);
-    handleQuery();
-  }
+function handleDateRangeChange(times?: [Dayjs, Dayjs]) {
+  if (!times || times.length !== 2) return;
+  dateRange.value = [
+    dayjs(times[0]).format('YYYY-MM-DD'),
+    dayjs(times[1]).format('YYYY-MM-DD'),
+  ];
+  // 将选择的日期转换为带时分秒的格式（开始日期 00:00:00，结束日期 23:59:59）
+  queryParams.times = formatDateRangeWithTime(dateRange.value);
+  handleQuery();
 }
 
 /** 处理时间间隔变化 */
@@ -134,16 +137,9 @@ onMounted(() => {
       <div class="flex flex-wrap items-center justify-between gap-4">
         <span class="text-base font-medium text-gray-600">消息量统计</span>
         <div class="flex flex-wrap items-center gap-4">
-          <div class="flex items-center gap-2">
-            <span class="text-sm text-gray-500">时间范围</span>
-            <RangePicker
-              v-model:value="dateRange"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              :placeholder="['开始日期', '结束日期']"
-              class="!w-240px"
-              @change="handleDateRangeChange"
-            />
+          <div class="flex items-center gap-3">
+            <span class="text-sm text-gray-500 whitespace-nowrap">时间范围</span>
+            <ShortcutDateRangePicker @change="handleDateRangeChange" />
           </div>
           <div class="flex items-center gap-2">
             <span class="text-sm text-gray-500">时间间隔</span>