From 2a18c8ce04ed43fb320cfe4f557bc20710fa1279 Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Mon, 9 Mar 2026 12:16:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(@vben/web-antd):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=AF=A6=E6=83=85=E5=AE=A2=E6=B5=81=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E4=B8=8D=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用 watch 监听 trafficData 变化后再渲染 ECharts 图表，
解决 v-if 切换 DOM 后 chartRef 未就绪导致图表不渲染的时序问题。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../modules/device-detail-drawer.vue          | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/web-antd/src/views/ops/area-device/modules/device-detail-drawer.vue b/apps/web-antd/src/views/ops/area-device/modules/device-detail-drawer.vue
index c6e660875..1626061f7 100644
--- a/apps/web-antd/src/views/ops/area-device/modules/device-detail-drawer.vue
+++ b/apps/web-antd/src/views/ops/area-device/modules/device-detail-drawer.vue
@@ -5,7 +5,7 @@ import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { OpsAreaApi } from '#/api/ops/area';
 import type { DeviceTrafficRealtimeResp } from '#/api/ops/traffic';
 
-import { computed, nextTick, ref } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
@@ -59,6 +59,14 @@ const trafficData = ref<DeviceTrafficRealtimeResp | null>(null);
 const hourlyChartRef = ref();
 const { renderEcharts: renderHourlyChart } = useEcharts(hourlyChartRef);
 
+// Watch trafficData: render chart after DOM is ready (v-if toggle needs extra tick)
+watch(trafficData, async (val) => {
+  if (val) {
+    await nextTick();
+    renderHourlyChart(getHourlyChartOptions());
+  }
+});
+
 function getHourlyChartOptions(): ECOption {
   const data = trafficData.value;
   if (!data?.hourlyTrend?.hours?.length) return {};
@@ -237,10 +245,10 @@ async function loadDeviceDetail(deviceId: number, relationType: string) {
     let realtimePromise: Promise<void>;
     if (relationType === 'TRAFFIC_COUNTER') {
       realtimePromise = getDeviceRealtime(deviceId)
-        .then(async (data) => {
-          trafficData.value = data;
-          await nextTick();
-          renderHourlyChart(getHourlyChartOptions());
+        .then((data) => {
+          if (data && data.hourlyTrend) {
+            trafficData.value = data;
+          }
         })
         .catch(() => {});
     } else if (relationType === 'BADGE') {
@@ -280,9 +288,10 @@ async function handleRefreshRealtime() {
   const { deviceId, relationType } = relation.value;
   try {
     if (relationType === 'TRAFFIC_COUNTER') {
-      trafficData.value = await getDeviceRealtime(deviceId);
-      await nextTick();
-      renderHourlyChart(getHourlyChartOptions());
+      const data = await getDeviceRealtime(deviceId);
+      if (data && data.hourlyTrend) {
+        trafficData.value = data;
+      }
     } else if (relationType === 'BADGE') {
       const data = await getLatestDeviceProperties({ deviceId });
       const propMap: Record<string, BadgePropItem> = {};