From 9bf042f8173ae060bc51d15b0cbcb5af97dee14f Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Thu, 26 Feb 2026 16:52:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20=E6=96=B0=E5=A2=9E=E5=AE=A2?=
 =?UTF-8?q?=E6=B5=81=E7=BB=9F=E8=AE=A1=E7=8B=AC=E7=AB=8B=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新建 /ops/traffic 路由和客流统计页面
- 新建客流 API 模块（全局/设备/区域维度的实时和趋势接口）
- 新建 AreaTree 组件（区域树选择、搜索过滤保留祖先节点、递归获取子孙ID）
- 支持全局总览和按区域查看客流数据
- 今日/昨日小时客流趋势对比曲线图、近7天客流趋势折线图
- 核心指标卡片 + 客流态势分析面板
- 更新旧 API 路径适配新后端接口

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/api/ops/order-center/index.ts         |   34 +-
 apps/web-antd/src/api/ops/traffic/index.ts    |  117 ++
 .../web-antd/src/router/routes/modules/ops.ts |   10 +
 .../src/views/ops/components/AreaTree.vue     |  159 +++
 apps/web-antd/src/views/ops/traffic/index.vue | 1231 +++++++++--------
 5 files changed, 969 insertions(+), 582 deletions(-)
 create mode 100644 apps/web-antd/src/api/ops/traffic/index.ts
 create mode 100644 apps/web-antd/src/views/ops/components/AreaTree.vue

diff --git a/apps/web-antd/src/api/ops/order-center/index.ts b/apps/web-antd/src/api/ops/order-center/index.ts
index 8fe3bc25c..125b1369a 100644
--- a/apps/web-antd/src/api/ops/order-center/index.ts
+++ b/apps/web-antd/src/api/ops/order-center/index.ts
@@ -188,22 +188,22 @@ export interface DashboardStatsResp {
   completedTodayCount: number;
   completedTotalCount: number;
   trendData: {
-    dates: string[];
-    createdData: number[];
     completedData: number[];
+    createdData: number[];
+    dates: string[];
   };
-  hourlyDistribution: { hours: string[]; data: number[] };
+  hourlyDistribution: { data: number[]; hours: string[] };
   timeTrendData: {
+    completionTimeData: number[];
     dates: string[];
     responseTimeData: number[];
-    completionTimeData: number[];
   };
   funnelData: Array<{ name: string; value: number }>;
-  heatmapData: { days: string[]; hours: string[]; data: number[][] };
+  heatmapData: { data: number[][]; days: string[]; hours: string[] };
   functionTypeRanking: Array<{
-    functionType: string;
-    count: number;
     completed: number;
+    count: number;
+    functionType: string;
     rate: number;
   }>;
 }
@@ -226,10 +226,10 @@ export interface TrafficRealtimeResp {
   areas: Array<{
     areaId: number;
     areaName: string;
-    todayIn: number;
-    todayOut: number;
     currentOccupancy: number;
     deviceCount: number;
+    todayIn: number;
+    todayOut: number;
   }>;
   hourlyTrend: { hours: string[]; inData: number[]; outData: number[] };
 }
@@ -244,15 +244,15 @@ export interface WorkspaceStatsResp {
   todayOrderCount: number;
   newOrderCount: number;
   urgentTasks: Array<{
+    assigneeName: string;
+    createTime: string;
     id: number;
-    title: string;
     location: string;
     priority: number;
     status: string;
-    createTime: string;
-    assigneeName: string;
+    title: string;
   }>;
-  workOrderTrend: { hours: string[]; data: number[] };
+  workOrderTrend: { data: number[]; hours: string[] };
 }
 
 /** 获取看板完整统计 */
@@ -265,9 +265,7 @@ export function getDashboardStats(params?: DashboardStatsQuery) {
 
 /** 获取实时客流数据 */
 export function getTrafficRealtime() {
-  return requestClient.get<TrafficRealtimeResp>(
-    '/ops/order-center/traffic-realtime',
-  );
+  return requestClient.get<TrafficRealtimeResp>('/ops/traffic/realtime');
 }
 
 /** 获取工作台统计数据 */
@@ -279,9 +277,7 @@ export function getWorkspaceStats() {
 
 /** 获取近7天客流趋势统计 */
 export function getTrafficTrend() {
-  return requestClient.get<TrafficTrendResp>(
-    '/ops/order-center/traffic-trend',
-  );
+  return requestClient.get<TrafficTrendResp>('/ops/traffic/trend');
 }
 
 // ==================== 工单操作接口 ====================
diff --git a/apps/web-antd/src/api/ops/traffic/index.ts b/apps/web-antd/src/api/ops/traffic/index.ts
new file mode 100644
index 000000000..06f8b2d0a
--- /dev/null
+++ b/apps/web-antd/src/api/ops/traffic/index.ts
@@ -0,0 +1,117 @@
+import { requestClient } from '#/api/request';
+
+// ==================== 类型定义 ====================
+
+/** 实时客流区域信息 */
+export interface TrafficAreaItem {
+  areaId: number;
+  areaName: string;
+  todayIn: number;
+  todayOut: number;
+  currentOccupancy: number;
+  deviceCount: number;
+}
+
+/** 全局实时客流响应 */
+export interface TrafficRealtimeResp {
+  totalIn: number;
+  totalOut: number;
+  currentOccupancy: number;
+  areas: TrafficAreaItem[];
+  hourlyTrend: {
+    hours: string[];
+    inData: number[];
+    outData: number[];
+  };
+  yesterdayHourlyTrend?: {
+    hours: string[];
+    inData: number[];
+    outData: number[];
+  };
+  message?: string; // 提示信息，如"该区域暂未配置客流设备"
+}
+
+/** 客流趋势响应（全局/设备/区域通用） */
+export interface TrafficTrendResp {
+  deviceId?: null | number;
+  areaId?: null | number;
+  dates: string[];
+  inData: number[];
+  outData: number[];
+  netData: number[];
+  totalIn: number;
+  totalOut: number;
+}
+
+/** 设备/区域实时客流响应（单条） */
+export interface DeviceTrafficRealtimeResp {
+  deviceId: number;
+  deviceName: null | string;
+  areaId: null | number;
+  areaName: null | string;
+  todayIn: number;
+  todayOut: number;
+  currentOccupancy: number;
+  hourlyTrend: {
+    hours: string[];
+    inData: number[];
+    outData: number[];
+  };
+  yesterdayHourlyTrend?: {
+    hours: string[];
+    inData: number[];
+    outData: number[];
+  };
+}
+
+/** 趋势查询参数 */
+export interface TrafficTrendQuery {
+  deviceId?: number;
+  areaId?: number;
+  areaIds?: string; // 逗号分隔的区域ID列表
+  startDate?: string; // yyyy-MM-dd
+  endDate?: string; // yyyy-MM-dd
+}
+
+// ==================== 迁移接口（路径变更） ====================
+
+/** 获取全局实时客流数据 */
+export function getTrafficRealtime() {
+  return requestClient.get<TrafficRealtimeResp>('/ops/traffic/realtime');
+}
+
+/** 获取全局近7天客流趋势 */
+export function getTrafficTrend() {
+  return requestClient.get<TrafficTrendResp>('/ops/traffic/trend');
+}
+
+// ==================== 新增接口 ====================
+
+/** 获取单设备实时客流 */
+export function getDeviceRealtime(deviceId: number) {
+  return requestClient.get<DeviceTrafficRealtimeResp>(
+    '/ops/traffic/device/realtime',
+    { params: { deviceId } },
+  );
+}
+
+/** 获取区域实时客流（汇总，返回与全局一致的结构） */
+export function getAreaRealtime(areaIds: number[]) {
+  return requestClient.get<TrafficRealtimeResp>('/ops/traffic/area/realtime', {
+    params: { areaIds: areaIds.join(',') },
+  });
+}
+
+/** 获取单设备客流趋势 */
+export function getDeviceTrend(params: TrafficTrendQuery) {
+  return requestClient.get<TrafficTrendResp>('/ops/traffic/device/trend', {
+    params,
+  });
+}
+
+/** 获取区域客流趋势（汇总） */
+export function getAreaTrend(params: TrafficTrendQuery) {
+  return requestClient.get<TrafficTrendResp>('/ops/traffic/area/trend', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/router/routes/modules/ops.ts b/apps/web-antd/src/router/routes/modules/ops.ts
index b724ae5d8..fb2ff4ab2 100644
--- a/apps/web-antd/src/router/routes/modules/ops.ts
+++ b/apps/web-antd/src/router/routes/modules/ops.ts
@@ -21,6 +21,16 @@ const routes: RouteRecordRaw[] = [
         },
         component: () => import('#/views/ops/area/index.vue'),
       },
+      // 客流统计
+      {
+        path: 'traffic',
+        name: 'OpsTraffic',
+        meta: {
+          title: '客流统计',
+          activePath: '/ops/traffic',
+        },
+        component: () => import('#/views/ops/traffic/index.vue'),
+      },
       // 保洁工单详情
       {
         path: 'cleaning/work-order/detail/:id',
diff --git a/apps/web-antd/src/views/ops/components/AreaTree.vue b/apps/web-antd/src/views/ops/components/AreaTree.vue
new file mode 100644
index 000000000..0e67733a9
--- /dev/null
+++ b/apps/web-antd/src/views/ops/components/AreaTree.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { OpsAreaApi } from '#/api/ops/area';
+
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { Input, Spin, Tree } from 'ant-design-vue';
+
+import { getAreaTree } from '#/api/ops/area';
+
+const props = withDefaults(
+  defineProps<{
+    /** 仅查询启用的区域 */
+    activeOnly?: boolean;
+  }>(),
+  { activeOnly: true },
+);
+
+const emit = defineEmits<{
+  /** 选中区域节点，传出完整节点对象；取消选中时传 null */
+  select: [area: null | OpsAreaApi.BusArea];
+}>();
+
+const areaList = ref<OpsAreaApi.BusArea[]>([]);
+const areaTree = ref<any[]>([]);
+const loading = ref(false);
+const searchValue = ref('');
+
+/** 搜索过滤：保留匹配节点及其祖先，维持树结构 */
+function handleSearch(e: any) {
+  const value = e.target.value;
+  searchValue.value = value;
+  if (!value) {
+    areaTree.value = handleTree(areaList.value, 'id', 'parentId', 'children');
+    return;
+  }
+  const lower = value.toLowerCase();
+  // 找到匹配的节点 ID
+  const matchedIds = new Set<number>();
+  for (const item of areaList.value) {
+    if (item.areaName.toLowerCase().includes(lower)) {
+      matchedIds.add(item.id!);
+    }
+  }
+  // 向上补全所有祖先节点
+  const idMap = new Map(areaList.value.map((a) => [a.id, a]));
+  const keepIds = new Set<number>(matchedIds);
+  for (const id of matchedIds) {
+    let current = idMap.get(id);
+    while (current?.parentId) {
+      keepIds.add(current.parentId);
+      current = idMap.get(current.parentId);
+    }
+  }
+  const filtered = areaList.value.filter((item) => keepIds.has(item.id!));
+  areaTree.value = handleTree(filtered, 'id', 'parentId', 'children');
+}
+
+/** 选中节点 */
+function handleSelect(selectedKeys: any[], info: any) {
+  if (selectedKeys.length === 0) {
+    emit('select', null);
+    return;
+  }
+  const node = info.node.dataRef || info.node;
+  emit('select', node);
+}
+
+/** 加载区域树 */
+async function loadTree() {
+  loading.value = true;
+  try {
+    const data = await getAreaTree(
+      props.activeOnly ? { isActive: true } : undefined,
+    );
+    areaList.value = data;
+    areaTree.value = handleTree(data, 'id', 'parentId', 'children');
+  } catch (error) {
+    console.error('获取区域树失败', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 根据 id 向上查找，拼接 "父级 / 子级" 路径 */
+function getAreaPath(id: number | undefined): string {
+  if (!id) return '';
+  const map = new Map(areaList.value.map((a) => [a.id, a]));
+  const parts: string[] = [];
+  let current = map.get(id);
+  while (current) {
+    parts.unshift(current.areaName);
+    current = current.parentId ? map.get(current.parentId) : undefined;
+  }
+  return parts.join(' / ');
+}
+
+/** 递归查找某区域及其所有子孙区域的 ID 列表 */
+function getDescendantIds(id: number): number[] {
+  const result: number[] = [id];
+  const visited = new Set<number>([id]);
+  function collect(parentId: number) {
+    for (const area of areaList.value) {
+      if (
+        area.parentId === parentId &&
+        area.id !== null &&
+        area.id !== undefined &&
+        !visited.has(area.id)
+      ) {
+        visited.add(area.id);
+        result.push(area.id);
+        collect(area.id);
+      }
+    }
+  }
+  collect(id);
+  return result;
+}
+
+/** 暴露刷新方法和路径查询供父组件调用 */
+defineExpose({ refresh: loadTree, getAreaPath, getDescendantIds });
+
+onMounted(loadTree);
+</script>
+
+<template>
+  <div>
+    <Input
+      v-model:value="searchValue"
+      placeholder="搜索区域"
+      allow-clear
+      class="w-full"
+      @change="handleSearch"
+    >
+      <template #prefix>
+        <IconifyIcon icon="lucide:search" class="size-4" />
+      </template>
+    </Input>
+    <Spin :spinning="loading" wrapper-class-name="w-full">
+      <Tree
+        v-if="areaTree.length > 0"
+        class="pt-2"
+        :tree-data="areaTree"
+        :default-expand-all="true"
+        :field-names="{
+          title: 'areaName',
+          key: 'id',
+          children: 'children',
+        }"
+        @select="handleSelect"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无区域数据
+      </div>
+    </Spin>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/ops/traffic/index.vue b/apps/web-antd/src/views/ops/traffic/index.vue
index f0cd5a28f..395614e2b 100644
--- a/apps/web-antd/src/views/ops/traffic/index.vue
+++ b/apps/web-antd/src/views/ops/traffic/index.vue
@@ -1,66 +1,79 @@
 <script setup lang="ts">
 import type { ECOption } from '@vben/plugins/echarts';
 
-import type {
-  DeviceTrafficRealtimeResp,
-  TrafficRealtimeResp,
-  TrafficTrendResp,
-} from '#/api/ops/traffic';
+import type { OpsAreaApi } from '#/api/ops/area';
+import type { TrafficRealtimeResp, TrafficTrendResp } from '#/api/ops/traffic';
 
 import {
+  computed,
   nextTick,
   onActivated,
   onDeactivated,
   onMounted,
   onUnmounted,
   ref,
-  watch,
 } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import {
+  Alert,
   Card,
   Col,
   Row,
-  Select,
   Spin,
   Statistic,
-  Table,
   Tooltip,
 } from 'ant-design-vue';
 
 import {
   getAreaRealtime,
   getAreaTrend,
-  getDeviceRealtime,
-  getDeviceTrend,
   getTrafficRealtime,
   getTrafficTrend,
 } from '#/api/ops/traffic';
 
+import AreaTree from '../components/AreaTree.vue';
+
 defineOptions({ name: 'OpsTraffic' });
 
+// ========== 区域选中状态 ==========
+const areaTreeRef = ref<InstanceType<typeof AreaTree>>();
+const selectedAreaId = ref<number | undefined>();
+const selectedAreaIds = ref<number[]>([]);
+const selectedAreaName = ref('全局总览');
+const areaMessage = ref<string>('');
+
+function handleAreaSelect(area: null | OpsAreaApi.BusArea) {
+  if (area && area.id !== null && area.id !== undefined) {
+    selectedAreaId.value = area.id;
+    selectedAreaIds.value = areaTreeRef.value?.getDescendantIds(area.id) || [
+      area.id,
+    ];
+    selectedAreaName.value =
+      areaTreeRef.value?.getAreaPath(area.id) || area.areaName;
+  } else {
+    selectedAreaId.value = undefined;
+    selectedAreaIds.value = [];
+    selectedAreaName.value = '全局总览';
+  }
+  loadData();
+}
+
 // ========== 响应式数据 ==========
 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: [] },
+  yesterdayHourlyTrend: { hours: [], inData: [], outData: [] },
 });
 
-// 趋势数据
 const trendData = ref<TrafficTrendResp>({
   dates: [],
   inData: [],
@@ -70,72 +83,106 @@ const trendData = ref<TrafficTrendResp>({
   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;
+  const hourly = realtimeData.value.hourlyTrend;
 
-  if (!hourly) {
-    return {};
+  if (!hourly || hourly.hours.length === 0) return {};
+
+  // 昨日数据
+  const yesterdayHourly = realtimeData.value.yesterdayHourlyTrend;
+
+  const series: any[] = [
+    {
+      name: '今日进入',
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 5,
+      data: hourly.inData,
+      lineStyle: { width: 2.5, color: '#36cfc9' },
+      itemStyle: { color: '#36cfc9' },
+      areaStyle: {
+        opacity: 0.12,
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
+            { offset: 1, color: 'rgba(54, 207, 201, 0.02)' },
+          ],
+        },
+      },
+    },
+    {
+      name: '今日离开',
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 5,
+      data: hourly.outData,
+      lineStyle: { width: 2.5, color: '#597ef7' },
+      itemStyle: { color: '#597ef7' },
+      areaStyle: {
+        opacity: 0.12,
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(89, 126, 247, 0.3)' },
+            { offset: 1, color: 'rgba(89, 126, 247, 0.02)' },
+          ],
+        },
+      },
+    },
+  ];
+
+  const legendData = ['今日进入', '今日离开'];
+
+  // 昨日对比线
+  if (yesterdayHourly && yesterdayHourly.hours.length > 0) {
+    legendData.push('昨日进入', '昨日离开');
+    series.push(
+      {
+        name: '昨日进入',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        data: yesterdayHourly.inData,
+        lineStyle: { width: 1.5, color: '#b5f5ec', type: 'dashed' },
+        itemStyle: { color: '#b5f5ec' },
+      },
+      {
+        name: '昨日离开',
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        data: yesterdayHourly.outData,
+        lineStyle: { width: 1.5, color: '#adc6ff', type: 'dashed' },
+        itemStyle: { color: '#adc6ff' },
+      },
+    );
   }
 
   return {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'shadow' },
-    },
+    tooltip: { trigger: 'axis' },
     legend: {
-      data: ['进入', '离开'],
+      data: legendData,
       top: '5%',
-      textStyle: { color: '#595959' },
+      textStyle: { color: '#595959', fontSize: 11 },
     },
     grid: {
       left: '3%',
@@ -146,6 +193,7 @@ function getHourlyChartOptions(): ECOption {
     },
     xAxis: {
       type: 'category',
+      boundaryGap: false,
       data: hourly.hours,
       axisLine: { lineStyle: { color: '#d9d9d9' } },
       axisLabel: { color: '#8c8c8c', fontSize: 11 },
@@ -158,64 +206,19 @@ function getHourlyChartOptions(): ECOption {
       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],
-        },
-      },
-    ],
+    series,
   };
 }
 
-/** 近7天趋势折线图 */
 function getTrendChartOptions(): ECOption {
   const data = trendData.value;
   return {
     tooltip: {
       trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: { backgroundColor: '#6a7985' },
-      },
+      axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
     },
     legend: {
-      data: ['进入', '离开', '净流量'],
+      data: ['进入', '离开'],
       top: '5%',
       textStyle: { color: '#595959' },
     },
@@ -257,13 +260,14 @@ function getTrendChartOptions(): ECOption {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(82, 196, 26, 0.4)' },
-              { offset: 1, color: 'rgba(82, 196, 26, 0.05)' },
+              { offset: 0, color: 'rgba(54, 207, 201, 0.35)' },
+              { offset: 1, color: 'rgba(54, 207, 201, 0.03)' },
             ],
           },
         },
         data: data.inData,
-        itemStyle: { color: '#52c41a' },
+        lineStyle: { width: 2.5, color: '#36cfc9' },
+        itemStyle: { color: '#36cfc9' },
       },
       {
         name: '离开',
@@ -280,48 +284,21 @@ function getTrendChartOptions(): ECOption {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(255, 77, 79, 0.4)' },
-              { offset: 1, color: 'rgba(255, 77, 79, 0.05)' },
+              { offset: 0, color: 'rgba(89, 126, 247, 0.35)' },
+              { offset: 1, color: 'rgba(89, 126, 247, 0.03)' },
             ],
           },
         },
         data: data.outData,
-        itemStyle: { color: '#ff4d4f' },
-      },
-      {
-        name: '净流量',
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 6,
-        lineStyle: { type: 'dashed' },
-        data: data.netData,
-        itemStyle: { color: '#1677ff' },
+        lineStyle: { width: 2.5, color: '#597ef7' },
+        itemStyle: { color: '#597ef7' },
       },
     ],
   };
 }
 
-/** 合并区域下多个设备的小时趋势 */
-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 {
@@ -331,134 +308,118 @@ async function loadGlobalData() {
     ]);
     realtimeData.value = realtime;
     trendData.value = trend;
-
-    // 更新区域选项
-    areaOptions.value = (realtime.areas || []).map((a) => ({
-      label: a.areaName,
-      value: a.areaId,
-    }));
-
+    areaMessage.value = '';
     chartLoading.value = false;
     await nextTick();
     renderHourlyChart(getHourlyChartOptions());
     renderTrendChart(getTrendChartOptions());
   } catch {
-    // 保持现有数据
+    chartLoading.value = false;
   } finally {
     loading.value = false;
   }
 }
 
-/** 加载设备维度数据 */
-async function loadDeviceData(deviceId: number) {
+async function loadAreaData(areaIds: number[]) {
   loading.value = true;
   try {
     const [realtime, trend] = await Promise.all([
-      getDeviceRealtime(deviceId),
-      getDeviceTrend({ deviceId }),
+      getAreaRealtime(areaIds),
+      getAreaTrend({ areaIds: areaIds.join(',') }),
     ]);
-    deviceRealtimeData.value = realtime;
+    realtimeData.value = realtime;
     trendData.value = trend;
-
+    areaMessage.value = realtime.message || '';
     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();
-  }
+  await (selectedAreaId.value && selectedAreaIds.value.length > 0
+    ? loadAreaData(selectedAreaIds.value)
+    : 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 getStatYesterdayIn(): number {
+  const t = trendData.value;
+  if (!t.inData || t.inData.length < 2) return 0;
+  return Number(t.inData[t.inData.length - 2]) || 0;
 }
 
-function getStatAreaCount(): number {
-  return realtimeData.value.areas?.length || 0;
+function getStatYesterdayOut(): number {
+  const t = trendData.value;
+  if (!t.outData || t.outData.length < 2) return 0;
+  return Number(t.outData[t.outData.length - 2]) || 0;
 }
 
-// ========== 维度切换监听 ==========
-watch(dimension, () => {
-  selectedDeviceId.value = undefined;
-  selectedAreaId.value = undefined;
-  // 切回全局时自动加载
-  if (dimension.value === 'global') {
-    loadData();
-  }
+// ========== 态势分析（右侧面板） ==========
+
+/** 客流高峰：从小时数据提取峰值时段（仅统计进入人次） */
+const statPeak = computed(() => {
+  const hourly = realtimeData.value.hourlyTrend;
+  if (!hourly || hourly.hours.length === 0) return { hour: '--', count: 0 };
+  let maxIdx = 0;
+  let maxVal = 0;
+  hourly.inData.forEach((v, i) => {
+    const val = Number(v) || 0;
+    if (val > maxVal) {
+      maxVal = val;
+      maxIdx = i;
+    }
+  });
+  return { hour: hourly.hours[maxIdx] || '--', count: maxVal };
 });
 
-watch(selectedDeviceId, (val) => {
-  if (val) loadData();
+/** 较昨日变化百分比 */
+const statDayChange = computed(() => {
+  const t = trendData.value;
+  if (!t.inData || t.inData.length < 2) return { percent: 0, hasData: false };
+  const todayIdx = t.inData.length - 1;
+  const yesterdayIdx = todayIdx - 1;
+  const todayTotal =
+    (Number(t.inData[todayIdx]) || 0) + (Number(t.outData[todayIdx]) || 0);
+  const yesterdayTotal =
+    (Number(t.inData[yesterdayIdx]) || 0) +
+    (Number(t.outData[yesterdayIdx]) || 0);
+  if (yesterdayTotal === 0) return { percent: 0, hasData: false };
+  const percent = ((todayTotal - yesterdayTotal) / yesterdayTotal) * 100;
+  return { percent: Math.round(percent), hasData: true };
 });
 
-watch(selectedAreaId, (val) => {
-  if (val) loadData();
+/** 进出比（进入占总量比例） */
+const statInRatio = computed(() => {
+  const totalIn = getStatTotalIn();
+  const totalOut = getStatTotalOut();
+  const total = totalIn + totalOut;
+  if (total === 0) return 0;
+  return Math.round((totalIn / total) * 100);
+});
+
+/** 7天日均客流 */
+const statDailyAvg = computed(() => {
+  const t = trendData.value;
+  if (!t.inData || t.inData.length === 0) return 0;
+  const totalAll =
+    t.inData.reduce((s, v) => s + (Number(v) || 0), 0) +
+    t.outData.reduce((s, v) => s + (Number(v) || 0), 0);
+  return Math.round(totalAll / t.inData.length);
 });
 
 // ========== 生命周期 ==========
@@ -467,7 +428,7 @@ let refreshTimer: null | ReturnType<typeof setInterval> = null;
 function startPolling() {
   stopPolling();
   loadData();
-  refreshTimer = setInterval(loadData, 30_000);
+  refreshTimer = setInterval(loadData, 3_600_000);
 }
 
 function stopPolling() {
@@ -479,9 +440,7 @@ function stopPolling() {
 
 onMounted(startPolling);
 onActivated(() => {
-  if (!refreshTimer) {
-    startPolling();
-  }
+  if (!refreshTimer) startPolling();
 });
 onDeactivated(stopPolling);
 onUnmounted(stopPolling);
@@ -489,263 +448,296 @@ onUnmounted(stopPolling);
 
 <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"
-            />
+    <Row :gutter="12" class="layout-row">
+      <!-- 左侧：区域树卡片 -->
+      <Col :xs="24" :sm="24" :md="6" :lg="5" :xl="4" class="tree-col">
+        <Card class="tree-card" title="业务区域">
+          <AreaTree ref="areaTreeRef" @select="handleAreaSelect" />
+        </Card>
+      </Col>
+
+      <!-- 右侧：数据内容 -->
+      <Col :xs="24" :sm="24" :md="18" :lg="19" :xl="20">
+        <Spin :spinning="loading">
+          <!-- 当前选中提示 -->
+          <div class="content-header mb-3">
+            <span class="content-title">{{ selectedAreaName }}</span>
+            <span class="content-subtitle">
+              {{ selectedAreaId ? '区域客流数据' : '所有区域汇总数据' }}
+            </span>
           </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>
+          <!-- 后端提示信息 -->
+          <Alert
+            v-if="areaMessage"
+            :message="areaMessage"
+            type="warning"
+            show-icon
+            closable
+            class="mb-3"
+          />
 
-        <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>
+          <!-- 核心指标卡片 -->
+          <Row :gutter="[12, 12]" class="mb-3">
+            <Col :xs="12" :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="12" :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="12" :sm="12" :lg="6">
+              <Card class="metric-card metric-card--yin">
+                <div class="metric-content">
+                  <div class="metric-icon">
+                    <IconifyIcon icon="mdi:arrow-right" />
+                  </div>
+                  <div class="metric-info">
+                    <div class="metric-label">昨日进入</div>
+                    <Statistic
+                      :value="getStatYesterdayIn()"
+                      :value-style="{
+                        fontSize: '24px',
+                        fontWeight: 600,
+                        color: '#1677ff',
+                      }"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </Col>
+            <Col :xs="12" :sm="12" :lg="6">
+              <Card class="metric-card metric-card--yout">
+                <div class="metric-content">
+                  <div class="metric-icon">
+                    <IconifyIcon icon="mdi:arrow-left" />
+                  </div>
+                  <div class="metric-info">
+                    <div class="metric-label">昨日离开</div>
+                    <Statistic
+                      :value="getStatYesterdayOut()"
+                      :value-style="{
+                        fontSize: '24px',
+                        fontWeight: 600,
+                        color: '#fa8c16',
+                      }"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </Col>
+          </Row>
 
-        <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}` }}
+          <!-- 小时趋势 + 态势分析 -->
+          <Row :gutter="[12, 12]" class="chart-row mb-3">
+            <Col :xs="24" :lg="16">
+              <Card class="chart-card chart-card--full" title="小时客流趋势">
+                <template #extra>
+                  <Tooltip
+                    title="展示今日与昨日24小时各时段的进入和离开人次对比"
+                  >
+                    <IconifyIcon
+                      icon="solar:info-circle-bold-duotone"
+                      class="info-icon"
+                    />
+                  </Tooltip>
                 </template>
-              </template>
-            </Table>
-          </Card>
+                <Spin :spinning="chartLoading">
+                  <EchartsUI ref="hourlyChartRef" class="chart-container" />
+                </Spin>
+              </Card>
+            </Col>
+            <Col :xs="24" :lg="8">
+              <Card
+                class="chart-card chart-card--full analysis-card"
+                title="客流态势"
+              >
+                <div class="analysis-list">
+                  <!-- 客流高峰 -->
+                  <div class="analysis-item">
+                    <div class="analysis-item__header">
+                      <IconifyIcon
+                        icon="mdi:chart-timeline-variant"
+                        class="analysis-item__icon analysis-item__icon--orange"
+                      />
+                      <span class="analysis-item__title">今日高峰</span>
+                    </div>
+                    <div class="analysis-item__body">
+                      <span class="analysis-item__value">{{
+                        statPeak.hour
+                      }}</span>
+                      <!-- prettier-ignore -->
+                      <span class="analysis-item__desc">峰值 {{ statPeak.count }} 人次</span>
+                    </div>
+                  </div>
 
-          <!-- 设备模式：设备信息卡 -->
-          <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>
+                  <!-- 较昨日同比 -->
+                  <div class="analysis-item">
+                    <div class="analysis-item__header">
+                      <IconifyIcon
+                        :icon="
+                          statDayChange.percent >= 0
+                            ? 'mdi:trending-up'
+                            : 'mdi:trending-down'
+                        "
+                        class="analysis-item__icon"
+                        :class="
+                          statDayChange.percent >= 0
+                            ? 'analysis-item__icon--red'
+                            : 'analysis-item__icon--green'
+                        "
+                      />
+                      <span class="analysis-item__title">较昨日</span>
+                    </div>
+                    <div class="analysis-item__body">
+                      <template v-if="statDayChange.hasData">
+                        <span
+                          class="analysis-item__value"
+                          :style="{
+                            color:
+                              statDayChange.percent >= 0
+                                ? '#ff4d4f'
+                                : '#52c41a',
+                          }"
+                        >
+                          {{ statDayChange.percent >= 0 ? '+' : ''
+                          }}{{ statDayChange.percent }}%
+                        </span>
+                        <span class="analysis-item__desc">
+                          客流量{{
+                            statDayChange.percent >= 0 ? '上升' : '下降'
+                          }}
+                        </span>
+                      </template>
+                      <!-- prettier-ignore -->
+                      <span v-else class="analysis-item__value analysis-item__value--muted">暂无数据</span>
+                    </div>
+                  </div>
 
-      <!-- 第三行：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 class="analysis-item">
+                    <div class="analysis-item__header">
+                      <IconifyIcon
+                        icon="mdi:swap-horizontal-bold"
+                        class="analysis-item__icon analysis-item__icon--blue"
+                      />
+                      <span class="analysis-item__title">进出比</span>
+                    </div>
+                    <div class="analysis-item__body">
+                      <!-- prettier-ignore -->
+                      <span class="analysis-item__value">{{ statInRatio }}%</span>
+                      <div class="analysis-item__bar">
+                        <div
+                          class="analysis-item__bar-fill"
+                          :style="{ width: `${statInRatio}%` }"
+                        ></div>
+                      </div>
+                      <span class="analysis-item__desc">
+                        进入占比 {{ statInRatio }}%，离开占比
+                        {{ 100 - statInRatio }}%
+                      </span>
+                    </div>
+                  </div>
+
+                  <!-- 7天日均 -->
+                  <div class="analysis-item">
+                    <div class="analysis-item__header">
+                      <IconifyIcon
+                        icon="mdi:calendar-clock"
+                        class="analysis-item__icon analysis-item__icon--purple"
+                      />
+                      <span class="analysis-item__title">7天日均</span>
+                    </div>
+                    <div class="analysis-item__body">
+                      <span class="analysis-item__value">{{
+                        statDailyAvg
+                      }}</span>
+                      <span class="analysis-item__desc">近7天日均客流人次</span>
+                    </div>
+                  </div>
+                </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>
+      </Col>
+    </Row>
   </div>
 </template>
 
 <style scoped lang="scss">
+// 响应式
 @media (max-width: 768px) {
   .traffic-dashboard {
     padding: 8px;
   }
 
+  .layout-row {
+    flex-direction: column;
+  }
+
+  .tree-col {
+    margin-bottom: 12px;
+  }
+
+  .tree-card {
+    :deep(.ant-card-body) {
+      max-height: 200px;
+    }
+  }
+
   .chart-container {
     height: 220px !important;
   }
@@ -755,38 +747,66 @@ onUnmounted(stopPolling);
   padding: 16px;
 }
 
-// 筛选栏
-.filter-card {
+// 布局行：左右等高
+.layout-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tree-col {
+  display: flex;
+}
+
+// 区域树卡片
+.tree-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 8px;
+
+  :deep(.ant-card-head) {
+    min-height: 44px;
+    padding: 0 16px;
+
+    .ant-card-head-title {
+      padding: 12px 0;
+      font-size: 14px;
+      font-weight: 600;
+    }
+  }
+
   :deep(.ant-card-body) {
+    flex: 1;
     padding: 12px 16px;
+    overflow-y: auto;
+  }
+
+  :deep(.ant-tree) {
+    background: transparent;
   }
 }
 
-.filter-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: center;
-}
-
-.filter-item {
+// 标题区
+.content-header {
   display: flex;
   gap: 8px;
-  align-items: center;
+  align-items: baseline;
 }
 
-.filter-label {
+.content-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.content-subtitle {
   font-size: 13px;
-  color: #595959;
-  white-space: nowrap;
+  color: #8c8c8c;
 }
 
-// 核心指标卡片
+// 指标卡片
 .metric-card {
-  position: relative;
   overflow: hidden;
-  background: #fff;
-  border: 1px solid #f0f0f0;
   border-radius: 8px;
   transition: all 0.3s ease;
 
@@ -836,24 +856,43 @@ onUnmounted(stopPolling);
     background: #fff1f0;
   }
 
-  &--occupancy .metric-icon {
+  &--yin .metric-icon {
     color: #1677ff;
     background: #e6f4ff;
   }
 
-  &--area .metric-icon {
-    color: #722ed1;
-    background: #f9f0ff;
+  &--yout .metric-icon {
+    color: #fa8c16;
+    background: #fff7e6;
+  }
+}
+
+// 图表+表格行：等高
+.chart-row {
+  display: flex;
+  flex-wrap: wrap;
+
+  > :deep(.ant-col) {
+    display: flex;
   }
 }
 
 // 图表卡片
 .chart-card {
-  background: #fff;
-  border: 1px solid #f0f0f0;
   border-radius: 8px;
   transition: all 0.3s ease;
 
+  // 等高撑满
+  &--full {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    :deep(.ant-card-body) {
+      flex: 1;
+    }
+  }
+
   &:hover {
     box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
   }
@@ -861,13 +900,11 @@ onUnmounted(stopPolling);
   :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;
     }
   }
 
@@ -890,84 +927,152 @@ onUnmounted(stopPolling);
   }
 }
 
-// 设备详情
-.device-info {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+// 态势分析面板
+.analysis-card {
+  :deep(.ant-card-body) {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
 }
 
-.device-info-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0;
-  border-bottom: 1px solid #f5f5f5;
+.analysis-list {
+  display: grid;
+  flex: 1;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
 }
 
-.device-info-label {
-  font-size: 13px;
-  color: #8c8c8c;
-}
-
-.device-info-value {
-  font-size: 14px;
-  font-weight: 600;
-  color: #262626;
-}
-
-// 空状态
-.empty-state {
+.analysis-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 200px;
+  padding: 12px 8px;
+  text-align: center;
+  border-right: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:nth-child(2n) {
+    border-right: none;
+  }
+
+  &:nth-child(n + 3) {
+    border-bottom: none;
+  }
+
+  &__header {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  &__icon {
+    font-size: 14px;
+
+    &--orange {
+      color: #fa8c16;
+    }
+
+    &--red {
+      color: #ff4d4f;
+    }
+
+    &--green {
+      color: #52c41a;
+    }
+
+    &--blue {
+      color: #1677ff;
+    }
+
+    &--purple {
+      color: #722ed1;
+    }
+  }
+
+  &__title {
+    font-size: 12px;
+    font-weight: 500;
+    color: #8c8c8c;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    align-items: center;
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: #262626;
+
+    &--muted {
+      font-size: 13px;
+      font-weight: 400;
+      color: #bfbfbf;
+    }
+  }
+
+  &__desc {
+    font-size: 11px;
+    color: #8c8c8c;
+  }
+
+  &__bar {
+    width: 80%;
+    height: 4px;
+    margin: 4px 0 2px;
+    overflow: hidden;
+    background: #f5f5f5;
+    border-radius: 2px;
+  }
+
+  &__bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #52c41a, #95de64);
+    border-radius: 2px;
+    transition: width 0.6s ease;
+  }
 }
 
 // 暗色模式
 html.dark {
-  .metric-card {
-    background: #1f1f1f;
-    border-color: #303030;
-
-    .metric-label {
-      color: rgb(255 255 255 / 65%);
-    }
+  .content-title {
+    color: rgb(255 255 255 / 85%);
   }
 
-  .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 {
+  .content-subtitle {
     color: rgb(255 255 255 / 45%);
   }
 
-  .device-info-value {
+  .metric-card .metric-label {
+    color: rgb(255 255 255 / 65%);
+  }
+
+  .analysis-item {
+    border-color: rgb(255 255 255 / 8%);
+  }
+
+  .analysis-item__title {
+    color: rgb(255 255 255 / 45%);
+  }
+
+  .analysis-item__value {
     color: rgb(255 255 255 / 85%);
   }
+
+  .analysis-item__desc {
+    color: rgb(255 255 255 / 35%);
+  }
+
+  .analysis-item__bar {
+    background: rgb(255 255 255 / 8%);
+  }
 }
 </style>