From f1284142ac3ee7c2091b79b7dbe9fcdefc796469 Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Thu, 26 Feb 2026 13:24:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(ops):=20=E4=BF=AE=E5=A4=8D=20setInterval=20?=
 =?UTF-8?q?=E5=9C=A8=20keepAlive=20=E4=B8=8B=E6=9C=AA=E6=B8=85=E9=99=A4?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E5=86=85=E5=AD=98=E6=B3=84=E6=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

页面使用 keepAlive 缓存后 onUnmounted 不触发，setInterval 持续运行，
长时间放置导致 OOM 崩溃。统一使用 onActivated/onDeactivated 管理轮询生命周期。

涉及页面：工单统计栏、工单看板、工单详情、客流统计、工作台、全局布局通知轮询

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web-antd/src/layouts/basic.vue           |  13 +-
 .../src/views/dashboard/workspace/index.vue   |  26 +-
 .../cleaning/work-order/dashboard/index.vue   |  27 +-
 .../ops/cleaning/work-order/detail/index.vue  |  38 +-
 .../cleaning/work-order/modules/stats-bar.vue |  30 +-
 apps/web-antd/src/views/ops/traffic/index.vue | 973 ++++++++++++++++++
 6 files changed, 1080 insertions(+), 27 deletions(-)
 create mode 100644 apps/web-antd/src/views/ops/traffic/index.vue

diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index 525c2fe3d..d6a52c63e 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -3,7 +3,7 @@ import type { NotificationItem } from '@vben/layouts';
 
 import type { SystemTenantApi } from '#/api/system/tenant';
 
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui';
@@ -185,13 +185,15 @@ async function handleTenantChange(tenant: SystemTenantApi.Tenant) {
 }
 
 // ========== 初始化 ==========
+let notifyTimer: null | ReturnType<typeof setInterval> = null;
+
 onMounted(() => {
   // 首次加载未读数量
   handleNotificationGetUnreadCount();
   // 获取租户列表
   handleGetTenantList();
   // 轮询刷新未读数量
-  setInterval(
+  notifyTimer = setInterval(
     () => {
       if (userStore.userInfo) {
         handleNotificationGetUnreadCount();
@@ -201,6 +203,13 @@ onMounted(() => {
   );
 });
 
+onUnmounted(() => {
+  if (notifyTimer) {
+    clearInterval(notifyTimer);
+    notifyTimer = null;
+  }
+});
+
 watch(
   () => ({
     enable: preferences.app.watermark,
diff --git a/apps/web-antd/src/views/dashboard/workspace/index.vue b/apps/web-antd/src/views/dashboard/workspace/index.vue
index 280058bf1..08dbe79ee 100644
--- a/apps/web-antd/src/views/dashboard/workspace/index.vue
+++ b/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -1,5 +1,12 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue';
 
 import { GlassCard } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
@@ -285,16 +292,27 @@ function getColorClass(color: string, type: 'bg' | 'text') {
 // --- 生命周期 ---
 let refreshTimer: null | ReturnType<typeof setInterval> = null;
 
-onMounted(() => {
+function startPolling() {
+  stopPolling();
   loadData();
   refreshTimer = setInterval(loadData, 30_000);
-});
+}
 
-onUnmounted(() => {
+function stopPolling() {
   if (refreshTimer) {
     clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+}
+
+onMounted(startPolling);
+onActivated(() => {
+  if (!refreshTimer) {
+    startPolling();
   }
 });
+onDeactivated(stopPolling);
+onUnmounted(stopPolling);
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue b/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue
index 1890226ab..f23a53ec9 100644
--- a/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/dashboard/index.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import type { ECOption } from '@vben/plugins/echarts';
 
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import {
+  nextTick,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
@@ -772,17 +779,27 @@ async function loadStats() {
 // ========== 生命周期 ==========
 let refreshTimer: null | ReturnType<typeof setInterval> = null;
 
-onMounted(() => {
+function startPolling() {
+  stopPolling();
   loadStats();
-  // 每30秒刷新一次数据
   refreshTimer = setInterval(loadStats, 30_000);
-});
+}
 
-onUnmounted(() => {
+function stopPolling() {
   if (refreshTimer) {
     clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+}
+
+onMounted(startPolling);
+onActivated(() => {
+  if (!refreshTimer) {
+    startPolling();
   }
 });
+onDeactivated(stopPolling);
+onUnmounted(stopPolling);
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue b/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
index 057d40f8b..0789c4c19 100644
--- a/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/detail/index.vue
@@ -2,7 +2,14 @@
 import type { OpsCleaningApi } from '#/api/ops/cleaning';
 import type { OpsOrderCenterApi } from '#/api/ops/order-center';
 
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -562,6 +569,21 @@ function isBusyStatus(status: string) {
   return status?.toUpperCase() === 'BUSY';
 }
 
+function startPolling() {
+  stopPolling();
+  refreshTimer.value = window.setInterval(() => {
+    if (order.value.status === 'ARRIVED' && order.value.assigneeId)
+      loadBadgeStatus();
+  }, 30_000);
+}
+
+function stopPolling() {
+  if (refreshTimer.value) {
+    clearInterval(refreshTimer.value);
+    refreshTimer.value = null;
+  }
+}
+
 onMounted(async () => {
   if (!id && !USE_MOCK_DATA) {
     message.warning('参数错误');
@@ -569,15 +591,17 @@ onMounted(async () => {
     return;
   }
   await loadOrderDetail();
-  refreshTimer.value = window.setInterval(() => {
-    if (order.value.status === 'ARRIVED' && order.value.assigneeId)
-      loadBadgeStatus();
-  }, 30_000);
+  startPolling();
 });
 
-onUnmounted(() => {
-  if (refreshTimer.value) clearInterval(refreshTimer.value);
+onActivated(async () => {
+  if (!refreshTimer.value) {
+    await loadOrderDetail();
+    startPolling();
+  }
 });
+onDeactivated(stopPolling);
+onUnmounted(stopPolling);
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/stats-bar.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/stats-bar.vue
index 72350d447..ee8580ca2 100644
--- a/apps/web-antd/src/views/ops/cleaning/work-order/modules/stats-bar.vue
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/stats-bar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { OpsOrderCenterApi } from '#/api/ops/order-center';
 
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
@@ -67,6 +67,19 @@ const MOCK_STATS: DashboardStats = {
 
 let refreshTimer: null | ReturnType<typeof setInterval> = null;
 
+function startPolling() {
+  stopPolling();
+  loadStats();
+  refreshTimer = setInterval(loadStats, 30_000);
+}
+
+function stopPolling() {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+}
+
 /** 加载统计数据 */
 async function loadStats() {
   loading.value = true;
@@ -112,16 +125,15 @@ function handleStatClick(statKey: string) {
   emit('statClick', statKey);
 }
 
-onMounted(() => {
-  loadStats();
-  refreshTimer = setInterval(loadStats, 30_000);
-});
-
-onUnmounted(() => {
-  if (refreshTimer) {
-    clearInterval(refreshTimer);
+onMounted(startPolling);
+onActivated(() => {
+  // 首次 mount 时 onActivated 也会触发，此时 refreshTimer 已存在，跳过
+  if (!refreshTimer) {
+    startPolling();
   }
 });
+onDeactivated(stopPolling);
+onUnmounted(stopPolling);
 
 defineExpose({ refresh: loadStats });
 </script>
diff --git a/apps/web-antd/src/views/ops/traffic/index.vue b/apps/web-antd/src/views/ops/traffic/index.vue
new file mode 100644
index 000000000..f0cd5a28f
--- /dev/null
+++ b/apps/web-antd/src/views/ops/traffic/index.vue
@@ -0,0 +1,973 @@
+<script setup lang="ts">
+import type { ECOption } from '@vben/plugins/echarts';
+
+import type {
+  DeviceTrafficRealtimeResp,
+  TrafficRealtimeResp,
+  TrafficTrendResp,
+} from '#/api/ops/traffic';
+
+import {
+  nextTick,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import {
+  Card,
+  Col,
+  Row,
+  Select,
+  Spin,
+  Statistic,
+  Table,
+  Tooltip,
+} from 'ant-design-vue';
+
+import {
+  getAreaRealtime,
+  getAreaTrend,
+  getDeviceRealtime,
+  getDeviceTrend,
+  getTrafficRealtime,
+  getTrafficTrend,
+} from '#/api/ops/traffic';
+
+defineOptions({ name: 'OpsTraffic' });
+
+// ========== 响应式数据 ==========
+const loading = ref(true);
+const chartLoading = ref(true);
+
+// 维度筛选
+const dimension = ref<'area' | 'device' | 'global'>('global');
+const selectedDeviceId = ref<number | undefined>();
+const selectedAreaId = ref<number | undefined>();
+
+// 全局实时数据
+const realtimeData = ref<TrafficRealtimeResp>({
+  totalIn: 0,
+  totalOut: 0,
+  currentOccupancy: 0,
+  areas: [],
+  hourlyTrend: { hours: [], inData: [], outData: [] },
+});
+
+// 趋势数据
+const trendData = ref<TrafficTrendResp>({
+  dates: [],
+  inData: [],
+  outData: [],
+  netData: [],
+  totalIn: 0,
+  totalOut: 0,
+});
+
+// 设备/区域实时数据
+const deviceRealtimeData = ref<DeviceTrafficRealtimeResp | null>(null);
+const areaDeviceList = ref<DeviceTrafficRealtimeResp[]>([]);
+
+// 图表引用
+const hourlyChartRef = ref();
+const trendChartRef = ref();
+const { renderEcharts: renderHourlyChart } = useEcharts(hourlyChartRef);
+const { renderEcharts: renderTrendChart } = useEcharts(trendChartRef);
+
+// ========== 区域列表（从实时数据提取） ==========
+const areaOptions = ref<Array<{ label: string; value: number }>>([]);
+
+// ========== 区域表格列定义 ==========
+const areaColumns = [
+  { title: '区域', dataIndex: 'areaName', key: 'areaName' },
+  { title: '今日进入', dataIndex: 'todayIn', key: 'todayIn', align: 'right' as const },
+  { title: '今日离开', dataIndex: 'todayOut', key: 'todayOut', align: 'right' as const },
+  {
+    title: '当前在场',
+    dataIndex: 'currentOccupancy',
+    key: 'currentOccupancy',
+    align: 'right' as const,
+  },
+  { title: '设备数', dataIndex: 'deviceCount', key: 'deviceCount', align: 'right' as const },
+];
+
+// 区域明细设备表格列定义
+const deviceColumns = [
+  { title: '设备', dataIndex: 'deviceName', key: 'deviceName' },
+  { title: '今日进入', dataIndex: 'todayIn', key: 'todayIn', align: 'right' as const },
+  { title: '今日离开', dataIndex: 'todayOut', key: 'todayOut', align: 'right' as const },
+  {
+    title: '当前在场',
+    dataIndex: 'currentOccupancy',
+    key: 'currentOccupancy',
+    align: 'right' as const,
+  },
+];
+
+// ========== 图表配置 ==========
+
+/** 小时客流柱状图 */
+function getHourlyChartOptions(): ECOption {
+  const hourly =
+    dimension.value === 'global'
+      ? realtimeData.value.hourlyTrend
+      : dimension.value === 'device'
+        ? deviceRealtimeData.value?.hourlyTrend
+        : areaDeviceList.value.length > 0
+          ? mergeHourlyTrends(areaDeviceList.value)
+          : null;
+
+  if (!hourly) {
+    return {};
+  }
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+    },
+    legend: {
+      data: ['进入', '离开'],
+      top: '5%',
+      textStyle: { color: '#595959' },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: hourly.hours,
+      axisLine: { lineStyle: { color: '#d9d9d9' } },
+      axisLabel: { color: '#8c8c8c', fontSize: 11 },
+    },
+    yAxis: {
+      type: 'value',
+      name: '人次',
+      nameTextStyle: { color: '#8c8c8c', fontSize: 12 },
+      axisLine: { show: false },
+      axisLabel: { color: '#8c8c8c' },
+      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
+    },
+    series: [
+      {
+        name: '进入',
+        type: 'bar',
+        barWidth: '35%',
+        data: hourly.inData,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#52c41a' },
+              { offset: 1, color: '#95de64' },
+            ],
+          },
+          borderRadius: [4, 4, 0, 0],
+        },
+      },
+      {
+        name: '离开',
+        type: 'bar',
+        barWidth: '35%',
+        data: hourly.outData,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#ff4d4f' },
+              { offset: 1, color: '#ff7875' },
+            ],
+          },
+          borderRadius: [4, 4, 0, 0],
+        },
+      },
+    ],
+  };
+}
+
+/** 近7天趋势折线图 */
+function getTrendChartOptions(): ECOption {
+  const data = trendData.value;
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: { backgroundColor: '#6a7985' },
+      },
+    },
+    legend: {
+      data: ['进入', '离开', '净流量'],
+      top: '5%',
+      textStyle: { color: '#595959' },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: data.dates,
+      axisLine: { lineStyle: { color: '#d9d9d9' } },
+      axisLabel: { color: '#8c8c8c' },
+    },
+    yAxis: {
+      type: 'value',
+      name: '人次',
+      nameTextStyle: { color: '#8c8c8c' },
+      axisLine: { show: false },
+      axisLabel: { color: '#8c8c8c' },
+      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
+    },
+    series: [
+      {
+        name: '进入',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        areaStyle: {
+          opacity: 0.15,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(82, 196, 26, 0.4)' },
+              { offset: 1, color: 'rgba(82, 196, 26, 0.05)' },
+            ],
+          },
+        },
+        data: data.inData,
+        itemStyle: { color: '#52c41a' },
+      },
+      {
+        name: '离开',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        areaStyle: {
+          opacity: 0.15,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(255, 77, 79, 0.4)' },
+              { offset: 1, color: 'rgba(255, 77, 79, 0.05)' },
+            ],
+          },
+        },
+        data: data.outData,
+        itemStyle: { color: '#ff4d4f' },
+      },
+      {
+        name: '净流量',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: { type: 'dashed' },
+        data: data.netData,
+        itemStyle: { color: '#1677ff' },
+      },
+    ],
+  };
+}
+
+/** 合并区域下多个设备的小时趋势 */
+function mergeHourlyTrends(devices: DeviceTrafficRealtimeResp[]) {
+  if (devices.length === 0) return { hours: [], inData: [], outData: [] };
+  const hours = devices[0]!.hourlyTrend.hours;
+  const inData = new Array(hours.length).fill(0);
+  const outData = new Array(hours.length).fill(0);
+  for (const device of devices) {
+    device.hourlyTrend.inData.forEach((v, i) => {
+      inData[i] += Number(v) || 0;
+    });
+    device.hourlyTrend.outData.forEach((v, i) => {
+      outData[i] += Number(v) || 0;
+    });
+  }
+  return { hours, inData, outData };
+}
+
+// ========== 数据加载 ==========
+
+/** 加载全局数据 */
+async function loadGlobalData() {
+  loading.value = true;
+  try {
+    const [realtime, trend] = await Promise.all([
+      getTrafficRealtime(),
+      getTrafficTrend(),
+    ]);
+    realtimeData.value = realtime;
+    trendData.value = trend;
+
+    // 更新区域选项
+    areaOptions.value = (realtime.areas || []).map((a) => ({
+      label: a.areaName,
+      value: a.areaId,
+    }));
+
+    chartLoading.value = false;
+    await nextTick();
+    renderHourlyChart(getHourlyChartOptions());
+    renderTrendChart(getTrendChartOptions());
+  } catch {
+    // 保持现有数据
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 加载设备维度数据 */
+async function loadDeviceData(deviceId: number) {
+  loading.value = true;
+  try {
+    const [realtime, trend] = await Promise.all([
+      getDeviceRealtime(deviceId),
+      getDeviceTrend({ deviceId }),
+    ]);
+    deviceRealtimeData.value = realtime;
+    trendData.value = trend;
+
+    chartLoading.value = false;
+    await nextTick();
+    renderHourlyChart(getHourlyChartOptions());
+    renderTrendChart(getTrendChartOptions());
+  } catch {
+    // 保持现有数据
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 加载区域维度数据 */
+async function loadAreaData(areaId: number) {
+  loading.value = true;
+  try {
+    const [devices, trend] = await Promise.all([
+      getAreaRealtime(areaId),
+      getAreaTrend({ areaId }),
+    ]);
+    areaDeviceList.value = devices;
+    trendData.value = trend;
+
+    chartLoading.value = false;
+    await nextTick();
+    renderHourlyChart(getHourlyChartOptions());
+    renderTrendChart(getTrendChartOptions());
+  } catch {
+    // 保持现有数据
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 根据维度加载数据 */
+async function loadData() {
+  if (dimension.value === 'device' && selectedDeviceId.value) {
+    await loadDeviceData(selectedDeviceId.value);
+  } else if (dimension.value === 'area' && selectedAreaId.value) {
+    await loadAreaData(selectedAreaId.value);
+  } else {
+    await loadGlobalData();
+  }
+}
+
+// ========== 统计指标（根据维度计算） ==========
+
+function getStatTotalIn(): number {
+  if (dimension.value === 'device' && deviceRealtimeData.value) {
+    return deviceRealtimeData.value.todayIn;
+  }
+  if (dimension.value === 'area' && areaDeviceList.value.length > 0) {
+    return areaDeviceList.value.reduce((sum, d) => sum + d.todayIn, 0);
+  }
+  return realtimeData.value.totalIn;
+}
+
+function getStatTotalOut(): number {
+  if (dimension.value === 'device' && deviceRealtimeData.value) {
+    return deviceRealtimeData.value.todayOut;
+  }
+  if (dimension.value === 'area' && areaDeviceList.value.length > 0) {
+    return areaDeviceList.value.reduce((sum, d) => sum + d.todayOut, 0);
+  }
+  return realtimeData.value.totalOut;
+}
+
+function getStatOccupancy(): number {
+  if (dimension.value === 'device' && deviceRealtimeData.value) {
+    return deviceRealtimeData.value.currentOccupancy;
+  }
+  if (dimension.value === 'area' && areaDeviceList.value.length > 0) {
+    return areaDeviceList.value.reduce(
+      (sum, d) => sum + d.currentOccupancy,
+      0,
+    );
+  }
+  return realtimeData.value.currentOccupancy;
+}
+
+function getStatAreaCount(): number {
+  return realtimeData.value.areas?.length || 0;
+}
+
+// ========== 维度切换监听 ==========
+watch(dimension, () => {
+  selectedDeviceId.value = undefined;
+  selectedAreaId.value = undefined;
+  // 切回全局时自动加载
+  if (dimension.value === 'global') {
+    loadData();
+  }
+});
+
+watch(selectedDeviceId, (val) => {
+  if (val) loadData();
+});
+
+watch(selectedAreaId, (val) => {
+  if (val) loadData();
+});
+
+// ========== 生命周期 ==========
+let refreshTimer: null | ReturnType<typeof setInterval> = null;
+
+function startPolling() {
+  stopPolling();
+  loadData();
+  refreshTimer = setInterval(loadData, 30_000);
+}
+
+function stopPolling() {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+}
+
+onMounted(startPolling);
+onActivated(() => {
+  if (!refreshTimer) {
+    startPolling();
+  }
+});
+onDeactivated(stopPolling);
+onUnmounted(stopPolling);
+</script>
+
+<template>
+  <div class="traffic-dashboard">
+    <Spin :spinning="loading">
+      <!-- 筛选栏 -->
+      <Card class="filter-card mb-3">
+        <div class="filter-bar">
+          <div class="filter-item">
+            <span class="filter-label">查询维度</span>
+            <Select
+              v-model:value="dimension"
+              :options="[
+                { label: '全局总览', value: 'global' },
+                { label: '按设备', value: 'device' },
+                { label: '按区域', value: 'area' },
+              ]"
+              style="width: 140px"
+            />
+          </div>
+          <div v-if="dimension === 'device'" class="filter-item">
+            <span class="filter-label">设备ID</span>
+            <Select
+              v-model:value="selectedDeviceId"
+              placeholder="请输入设备ID"
+              style="width: 200px"
+              show-search
+              :filter-option="false"
+              allow-clear
+            />
+          </div>
+          <div v-if="dimension === 'area'" class="filter-item">
+            <span class="filter-label">选择区域</span>
+            <Select
+              v-model:value="selectedAreaId"
+              placeholder="请选择区域"
+              :options="areaOptions"
+              style="width: 200px"
+              show-search
+              :filter-option="
+                (input: string, option: any) =>
+                  option.label.toLowerCase().includes(input.toLowerCase())
+              "
+              allow-clear
+            />
+          </div>
+        </div>
+      </Card>
+
+      <!-- 核心指标卡片 -->
+      <Row :gutter="[12, 12]" class="mb-3">
+        <Col :xs="24" :sm="12" :lg="6">
+          <Card class="metric-card metric-card--in">
+            <div class="metric-content">
+              <div class="metric-icon">
+                <IconifyIcon icon="mdi:arrow-right-bold" />
+              </div>
+              <div class="metric-info">
+                <div class="metric-label">今日进入</div>
+                <Statistic
+                  :value="getStatTotalIn()"
+                  :value-style="{
+                    fontSize: '24px',
+                    fontWeight: 600,
+                    color: '#52c41a',
+                  }"
+                />
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :sm="12" :lg="6">
+          <Card class="metric-card metric-card--out">
+            <div class="metric-content">
+              <div class="metric-icon">
+                <IconifyIcon icon="mdi:arrow-left-bold" />
+              </div>
+              <div class="metric-info">
+                <div class="metric-label">今日离开</div>
+                <Statistic
+                  :value="getStatTotalOut()"
+                  :value-style="{
+                    fontSize: '24px',
+                    fontWeight: 600,
+                    color: '#ff4d4f',
+                  }"
+                />
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :sm="12" :lg="6">
+          <Card class="metric-card metric-card--occupancy">
+            <div class="metric-content">
+              <div class="metric-icon">
+                <IconifyIcon icon="mdi:account-group" />
+              </div>
+              <div class="metric-info">
+                <div class="metric-label">当前在场</div>
+                <Statistic
+                  :value="getStatOccupancy()"
+                  :value-style="{
+                    fontSize: '24px',
+                    fontWeight: 600,
+                    color: '#1677ff',
+                  }"
+                />
+              </div>
+            </div>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :sm="12" :lg="6">
+          <Card class="metric-card metric-card--area">
+            <div class="metric-content">
+              <div class="metric-icon">
+                <IconifyIcon icon="mdi:map-marker-multiple" />
+              </div>
+              <div class="metric-info">
+                <div class="metric-label">监控区域</div>
+                <Statistic
+                  :value="getStatAreaCount()"
+                  :value-style="{
+                    fontSize: '24px',
+                    fontWeight: 600,
+                    color: '#722ed1',
+                  }"
+                />
+              </div>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      <!-- 第二行：小时趋势 + 区域/设备表格 -->
+      <Row :gutter="[12, 12]" class="mb-3">
+        <Col :xs="24" :lg="16">
+          <Card class="chart-card" title="今日小时客流趋势">
+            <template #extra>
+              <Tooltip title="展示今日24小时各时段的进入和离开人次">
+                <IconifyIcon
+                  icon="solar:info-circle-bold-duotone"
+                  class="info-icon"
+                />
+              </Tooltip>
+            </template>
+            <Spin :spinning="chartLoading">
+              <EchartsUI ref="hourlyChartRef" class="chart-container" />
+            </Spin>
+          </Card>
+        </Col>
+
+        <Col :xs="24" :lg="8">
+          <!-- 全局模式：区域汇总表 -->
+          <Card
+            v-if="dimension === 'global'"
+            class="chart-card"
+            title="区域实时客流"
+          >
+            <Table
+              :columns="areaColumns"
+              :data-source="realtimeData.areas"
+              :pagination="false"
+              size="small"
+              row-key="areaId"
+              :scroll="{ y: 220 }"
+            />
+          </Card>
+
+          <!-- 区域模式：设备明细表 -->
+          <Card
+            v-else-if="dimension === 'area'"
+            class="chart-card"
+            title="区域设备明细"
+          >
+            <Table
+              :columns="deviceColumns"
+              :data-source="areaDeviceList"
+              :pagination="false"
+              size="small"
+              row-key="deviceId"
+              :scroll="{ y: 220 }"
+            >
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'deviceName'">
+                  {{ record.deviceName || `设备 ${record.deviceId}` }}
+                </template>
+              </template>
+            </Table>
+          </Card>
+
+          <!-- 设备模式：设备信息卡 -->
+          <Card
+            v-else
+            class="chart-card"
+            title="设备详情"
+          >
+            <div v-if="deviceRealtimeData" class="device-info">
+              <div class="device-info-item">
+                <span class="device-info-label">设备ID</span>
+                <span class="device-info-value">{{ deviceRealtimeData.deviceId }}</span>
+              </div>
+              <div class="device-info-item">
+                <span class="device-info-label">设备名称</span>
+                <span class="device-info-value">{{ deviceRealtimeData.deviceName || '-' }}</span>
+              </div>
+              <div class="device-info-item">
+                <span class="device-info-label">所属区域</span>
+                <span class="device-info-value">{{ deviceRealtimeData.areaName || '-' }}</span>
+              </div>
+              <div class="device-info-item">
+                <span class="device-info-label">今日进入</span>
+                <span class="device-info-value" style="color: #52c41a">{{ deviceRealtimeData.todayIn }}</span>
+              </div>
+              <div class="device-info-item">
+                <span class="device-info-label">今日离开</span>
+                <span class="device-info-value" style="color: #ff4d4f">{{ deviceRealtimeData.todayOut }}</span>
+              </div>
+              <div class="device-info-item">
+                <span class="device-info-label">当前在场</span>
+                <span class="device-info-value" style="color: #1677ff">{{ deviceRealtimeData.currentOccupancy }}</span>
+              </div>
+            </div>
+            <div v-else class="empty-state">
+              <IconifyIcon icon="mdi:information-outline" class="text-2xl text-gray-400" />
+              <p class="mt-2 text-gray-400">请输入设备ID查询</p>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      <!-- 第三行：7天趋势 -->
+      <Row :gutter="[12, 12]">
+        <Col :span="24">
+          <Card class="chart-card" title="客流趋势（近7天）">
+            <template #extra>
+              <Tooltip title="展示最近7天的客流进入、离开和净流量趋势">
+                <IconifyIcon
+                  icon="solar:info-circle-bold-duotone"
+                  class="info-icon"
+                />
+              </Tooltip>
+            </template>
+            <Spin :spinning="chartLoading">
+              <EchartsUI ref="trendChartRef" class="chart-container" />
+            </Spin>
+          </Card>
+        </Col>
+      </Row>
+    </Spin>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@media (max-width: 768px) {
+  .traffic-dashboard {
+    padding: 8px;
+  }
+
+  .chart-container {
+    height: 220px !important;
+  }
+}
+
+.traffic-dashboard {
+  padding: 16px;
+}
+
+// 筛选栏
+.filter-card {
+  :deep(.ant-card-body) {
+    padding: 12px 16px;
+  }
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+
+.filter-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.filter-label {
+  font-size: 13px;
+  color: #595959;
+  white-space: nowrap;
+}
+
+// 核心指标卡片
+.metric-card {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 16px rgb(0 0 0 / 6%);
+    transform: translateY(-2px);
+  }
+
+  :deep(.ant-card-body) {
+    padding: 16px;
+  }
+
+  .metric-content {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .metric-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    font-size: 22px;
+    border-radius: 10px;
+  }
+
+  .metric-info {
+    flex: 1;
+  }
+
+  .metric-label {
+    margin-bottom: 2px;
+    font-size: 13px;
+    color: #262626;
+  }
+
+  &--in .metric-icon {
+    color: #52c41a;
+    background: #f6ffed;
+  }
+
+  &--out .metric-icon {
+    color: #ff4d4f;
+    background: #fff1f0;
+  }
+
+  &--occupancy .metric-icon {
+    color: #1677ff;
+    background: #e6f4ff;
+  }
+
+  &--area .metric-icon {
+    color: #722ed1;
+    background: #f9f0ff;
+  }
+}
+
+// 图表卡片
+.chart-card {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
+  }
+
+  :deep(.ant-card-head) {
+    min-height: 44px;
+    padding: 0 16px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .ant-card-head-title {
+      padding: 12px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  :deep(.ant-card-body) {
+    padding: 12px 16px 16px;
+  }
+
+  .info-icon {
+    font-size: 14px;
+    color: #8c8c8c;
+    cursor: help;
+
+    &:hover {
+      color: #1677ff;
+    }
+  }
+
+  .chart-container {
+    height: 280px;
+  }
+}
+
+// 设备详情
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.device-info-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.device-info-label {
+  font-size: 13px;
+  color: #8c8c8c;
+}
+
+.device-info-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+// 空状态
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+// 暗色模式
+html.dark {
+  .metric-card {
+    background: #1f1f1f;
+    border-color: #303030;
+
+    .metric-label {
+      color: rgb(255 255 255 / 65%);
+    }
+  }
+
+  .chart-card {
+    background: #1f1f1f;
+    border-color: #303030;
+
+    :deep(.ant-card-head) {
+      border-bottom-color: #303030;
+
+      .ant-card-head-title {
+        color: rgb(255 255 255 / 85%);
+      }
+    }
+  }
+
+  .filter-card {
+    background: #1f1f1f;
+    border-color: #303030;
+  }
+
+  .filter-label {
+    color: rgb(255 255 255 / 65%);
+  }
+
+  .device-info-item {
+    border-bottom-color: #303030;
+  }
+
+  .device-info-label {
+    color: rgb(255 255 255 / 45%);
+  }
+
+  .device-info-value {
+    color: rgb(255 255 255 / 85%);
+  }
+}
+</style>