From cc98ba4d0bbe28e7aae055b5c09bf2ccdf0f7c1d Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Sun, 5 Apr 2026 15:37:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/web-antd):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E9=A1=B5=E9=9D=A2=E5=AD=90=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

trajectory-gantt-area:
- 数字孪生甘特图，纵轴加载完整区域树，仅显示有数据区域
- 区域树缓存提取到 area-tree-cache.ts，单例 Promise 防并发重复请求
- 支持时段预设（自适应/全天/上午/下午/工作时段）和 1x-16x 缩放
- tooltip 类型安全：record 改为 null | TrajectoryRecord

badge-status-card:
- 新增实时轨迹时间线（最近15条，倒序展示）
- 排序改用 toSorted + dayjs valueOf

area-stay-chart:
- 显示 fullAreaName 全路径，标签内置于条形，统一高度 260px

trend-chart:
- 进入改蓝色，离开改橙色
- 修复 height 缺少 px 单位导致图表不渲染

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/views/ops/trajectory/index.vue        |   5 +-
 .../trajectory/modules/area-stay-chart.vue    |  98 +--
 .../ops/trajectory/modules/area-tree-cache.ts |  34 +
 .../trajectory/modules/badge-status-card.vue  | 213 ++++-
 .../ops/trajectory/modules/stats-cards.vue    |  57 +-
 .../modules/trajectory-gantt-area.vue         | 832 ++++++++++++++++++
 .../ops/trajectory/modules/trend-chart.vue    |  65 +-
 7 files changed, 1122 insertions(+), 182 deletions(-)
 create mode 100644 apps/web-antd/src/views/ops/trajectory/modules/area-tree-cache.ts
 create mode 100644 apps/web-antd/src/views/ops/trajectory/modules/trajectory-gantt-area.vue

diff --git a/apps/web-antd/src/views/ops/trajectory/index.vue b/apps/web-antd/src/views/ops/trajectory/index.vue
index 986677a5e..c32d7ab8f 100644
--- a/apps/web-antd/src/views/ops/trajectory/index.vue
+++ b/apps/web-antd/src/views/ops/trajectory/index.vue
@@ -29,11 +29,10 @@ import {
   LEAVE_REASON_TEXT,
 } from './data';
 import AreaStayChart from './modules/area-stay-chart.vue';
+import { ensureAreaTree } from './modules/area-tree-cache';
 import BadgeStatusCard from './modules/badge-status-card.vue';
 import StatsCards from './modules/stats-cards.vue';
-import TrajectoryGanttArea, {
-  ensureAreaTree,
-} from './modules/trajectory-gantt-area.vue';
+import TrajectoryGanttArea from './modules/trajectory-gantt-area.vue';
 import TrendChart from './modules/trend-chart.vue';
 
 defineOptions({ name: 'OpsTrajectory' });
diff --git a/apps/web-antd/src/views/ops/trajectory/modules/area-stay-chart.vue b/apps/web-antd/src/views/ops/trajectory/modules/area-stay-chart.vue
index 530a6ad20..416f6a12b 100644
--- a/apps/web-antd/src/views/ops/trajectory/modules/area-stay-chart.vue
+++ b/apps/web-antd/src/views/ops/trajectory/modules/area-stay-chart.vue
@@ -10,45 +10,23 @@ import { Empty } from 'ant-design-vue';
 import { formatDuration } from '../data';
 
 const props = defineProps<{
-  records: OpsTrajectoryApi.TrajectoryRecord[];
+  data: OpsTrajectoryApi.AreaStayStats[];
 }>();
 
 const chartRef = ref();
 const { renderEcharts } = useEcharts(chartRef);
 
-/** 按区域聚合停留时长 */
-const areaStayData = computed(() => {
-  const map = new Map<
-    string,
-    { areaName: string; totalStay: number; visitCount: number }
-  >();
-
-  for (const record of props.records) {
-    const existing = map.get(record.areaName);
-    if (existing) {
-      existing.totalStay += record.durationSeconds ?? 0;
-      existing.visitCount += 1;
-    } else {
-      map.set(record.areaName, {
-        areaName: record.areaName,
-        totalStay: record.durationSeconds ?? 0,
-        visitCount: 1,
-      });
-    }
-  }
-
-  return [...map.values()]
-    .toSorted((a, b) => b.totalStay - a.totalStay)
-    .slice(0, 10);
-});
+const hasData = computed(() => props.data.length > 0);
 
 function getChartOptions(): any {
-  const data = areaStayData.value;
+  const data = props.data;
   if (data.length === 0) return {};
 
-  const areaNames = data.map((d) => d.areaName).toReversed();
-  const stayMinutes = data
-    .map((d) => Math.round(d.totalStay / 60))
+  // 后端已按 totalStaySeconds 降序排列，取前10
+  const top10 = data.slice(0, 10);
+  const fullNames = top10.map((d) => d.fullAreaName || d.areaName).toReversed();
+  const stayMinutes = top10
+    .map((d) => Math.round(d.totalStaySeconds / 60))
     .toReversed();
 
   return {
@@ -57,43 +35,35 @@ function getChartOptions(): any {
       axisPointer: { type: 'shadow' },
       formatter(params: any) {
         const item = params[0];
-        const idx = data.length - 1 - item.dataIndex;
-        const d = data[idx];
+        const idx = top10.length - 1 - item.dataIndex;
+        const d = top10[idx];
         if (!d) return '';
-        return `${d.areaName}<br/>停留: ${formatDuration(d.totalStay)}<br/>进出: ${d.visitCount} 次`;
+        const name = d.fullAreaName || d.areaName;
+        return `${name}<br/>停留: ${formatDuration(d.totalStaySeconds)}<br/>进出: ${d.visitCount} 次`;
       },
     },
     grid: {
-      left: '3%',
-      right: '10%',
+      left: '8px',
+      right: '8px',
       bottom: '3%',
       top: '8%',
-      containLabel: true,
+      containLabel: false,
     },
     xAxis: {
       type: 'value',
-      name: '分钟',
-      nameTextStyle: { color: '#8c8c8c', fontSize: 11 },
-      axisLabel: { color: '#8c8c8c' },
-      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
+      show: false,
     },
     yAxis: {
       type: 'category',
-      data: areaNames,
-      axisLabel: {
-        color: '#595959',
-        fontSize: 11,
-        width: 100,
-        overflow: 'truncate',
-      },
-      axisLine: { show: false },
-      axisTick: { show: false },
+      data: fullNames,
+      show: false,
     },
     series: [
       {
         type: 'bar',
         data: stayMinutes,
-        barMaxWidth: 20,
+        barMaxWidth: 24,
+        barMinWidth: 18,
         itemStyle: {
           borderRadius: [0, 4, 4, 0],
           color: {
@@ -110,10 +80,14 @@ function getChartOptions(): any {
         },
         label: {
           show: true,
-          position: 'right',
-          color: '#8c8c8c',
+          position: 'insideLeft',
+          color: '#fff',
           fontSize: 11,
-          formatter: '{c}m',
+          textShadowColor: 'rgba(0,0,0,0.3)',
+          textShadowBlur: 2,
+          formatter(p: any) {
+            return `${fullNames[p.dataIndex]}  ${p.value}m`;
+          },
         },
       },
     ],
@@ -121,9 +95,9 @@ function getChartOptions(): any {
 }
 
 watch(
-  () => props.records,
+  () => props.data,
   () => {
-    if (areaStayData.value.length > 0) {
+    if (hasData.value) {
       renderEcharts(getChartOptions());
     }
   },
@@ -132,26 +106,18 @@ watch(
 </script>
 
 <template>
-  <div class="area-stay-chart">
+  <div class="area-stay-chart bg-card">
     <div class="chart-title">区域停留分布</div>
-    <div v-if="areaStayData.length === 0" class="chart-empty">
+    <div v-if="!hasData" class="chart-empty">
       <Empty description="暂无数据" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
     </div>
-    <EchartsUI
-      v-show="areaStayData.length > 0"
-      ref="chartRef"
-      :height="`${Math.max(200, areaStayData.length * 36 + 40)}`"
-      width="100%"
-    />
+    <EchartsUI v-show="hasData" ref="chartRef" height="260px" width="100%" />
   </div>
 </template>
 
 <style scoped>
 .area-stay-chart {
   padding: 16px;
-  background: #fff;
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
 }
 
 .chart-title {
diff --git a/apps/web-antd/src/views/ops/trajectory/modules/area-tree-cache.ts b/apps/web-antd/src/views/ops/trajectory/modules/area-tree-cache.ts
new file mode 100644
index 000000000..9161cdf56
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/modules/area-tree-cache.ts
@@ -0,0 +1,34 @@
+import type { OpsAreaApi } from '#/api/ops/area';
+
+import { ref } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { getAreaTree } from '#/api/ops/area';
+
+// 模块级缓存：所有组件实例共享，只请求一次
+let _treePromise: null | Promise<void> = null;
+export const cachedAreaTree = ref<OpsAreaApi.BusArea[]>([]);
+export const areaTreeLoaded = ref(false);
+
+/** 确保区域树已加载（并发安全：同一个 Promise 不会重复请求） */
+export function ensureAreaTree(): Promise<void> {
+  if (_treePromise) return _treePromise;
+  _treePromise = getAreaTree({ isActive: true })
+    .then((data) => {
+      const list = Array.isArray(data) ? data : ((data as any)?.list ?? []);
+      cachedAreaTree.value = handleTree(
+        list,
+        'id',
+        'parentId',
+      ) as OpsAreaApi.BusArea[];
+    })
+    .catch(() => {
+      cachedAreaTree.value = [];
+      _treePromise = null; // 失败时重置，下次可重试
+    })
+    .finally(() => {
+      areaTreeLoaded.value = true;
+    });
+  return _treePromise;
+}
diff --git a/apps/web-antd/src/views/ops/trajectory/modules/badge-status-card.vue b/apps/web-antd/src/views/ops/trajectory/modules/badge-status-card.vue
index d4ca0362f..30b9b1313 100644
--- a/apps/web-antd/src/views/ops/trajectory/modules/badge-status-card.vue
+++ b/apps/web-antd/src/views/ops/trajectory/modules/badge-status-card.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { OpsCleaningApi } from '#/api/ops/cleaning';
+import type { OpsTrajectoryApi } from '#/api/ops/trajectory';
 
 import { computed } from 'vue';
 
@@ -9,13 +10,14 @@ import { Progress, Tag, Tooltip } from 'ant-design-vue';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
-import { BADGE_STATUS_MAP, getBatteryLevel, getRssiLevel } from '../data';
+import { BADGE_STATUS_MAP, formatDuration, getBatteryLevel } from '../data';
 
 import 'dayjs/locale/zh-cn';
 
 const props = defineProps<{
   data: null | OpsCleaningApi.BadgeRealtimeStatus;
   loading?: boolean;
+  recentRecords?: OpsTrajectoryApi.TrajectoryRecord[];
 }>();
 dayjs.extend(relativeTime);
 dayjs.locale('zh-cn');
@@ -26,22 +28,31 @@ const statusInfo = computed(() => {
 });
 
 const batteryInfo = computed(() => getBatteryLevel(props.data?.batteryLevel));
-const rssiInfo = computed(() => getRssiLevel(props.data?.rssi));
 
-const relativeHeartbeat = computed(() => {
-  if (!props.data?.lastHeartbeatTime) return '未知';
-  return dayjs(props.data.lastHeartbeatTime).fromNow();
+const relativeOnlineTime = computed(() => {
+  if (!props.data?.onlineTime) return '未知';
+  return dayjs(props.data.onlineTime).fromNow();
+});
+
+// 近期轨迹（按时间倒序，最近15条）
+const recentTimeline = computed(() => {
+  if (!props.recentRecords || props.recentRecords.length === 0) return [];
+  return [...props.recentRecords]
+    .toSorted(
+      (a, b) => dayjs(b.enterTime).valueOf() - dayjs(a.enterTime).valueOf(),
+    )
+    .slice(0, 15);
 });
 </script>
 
 <template>
-  <div class="badge-status-card">
+  <div class="badge-status-card bg-card">
     <div class="card-header">
       <IconifyIcon
         icon="solar:user-id-bold-duotone"
         :style="{ color: '#fa8c16', fontSize: '20px' }"
       />
-      <span class="card-title">工牌状态</span>
+      <span class="card-title">工牌状态（实时）</span>
     </div>
 
     <!-- 空状态 -->
@@ -88,22 +99,6 @@ const relativeHeartbeat = computed(() => {
         </div>
       </div>
 
-      <!-- 信号强度 -->
-      <div class="status-row">
-        <span class="label">
-          <IconifyIcon
-            :icon="rssiInfo.icon"
-            :style="{ color: rssiInfo.color }"
-          />
-          信号
-        </span>
-        <Tooltip :title="data.rssi != null ? `${data.rssi} dBm` : '无信号'">
-          <span :style="{ color: rssiInfo.color, fontWeight: 500 }">
-            {{ rssiInfo.label }}
-          </span>
-        </Tooltip>
-      </div>
-
       <!-- 当前区域 -->
       <div class="status-row">
         <span class="label">当前区域</span>
@@ -112,23 +107,68 @@ const relativeHeartbeat = computed(() => {
         </span>
       </div>
 
-      <!-- 最后心跳 -->
+      <!-- 上线时间 -->
       <div class="status-row">
-        <span class="label">最后心跳</span>
-        <Tooltip :title="data.lastHeartbeatTime">
-          <span class="value muted">{{ relativeHeartbeat }}</span>
+        <span class="label">上线时间</span>
+        <Tooltip :title="data.onlineTime">
+          <span class="value muted">{{ relativeOnlineTime }}</span>
         </Tooltip>
       </div>
+
+      <!-- 近期轨迹 -->
+      <div class="recent-timeline">
+        <div class="timeline-header">
+          <span class="timeline-title">实时轨迹</span>
+          <span class="timeline-count">{{ recentTimeline.length }} 条</span>
+        </div>
+        <div v-if="recentTimeline.length > 0" class="timeline-list">
+          <div
+            v-for="item in recentTimeline"
+            :key="item.id"
+            class="timeline-item"
+          >
+            <div class="timeline-dot-wrap">
+              <span
+                class="timeline-dot"
+                :class="{ 'timeline-dot--active': !item.leaveTime }"
+              ></span>
+              <span class="timeline-line"></span>
+            </div>
+            <div class="timeline-content">
+              <div class="timeline-area">
+                {{ item.fullAreaName || item.areaName }}
+              </div>
+              <div class="timeline-meta">
+                <span>{{ dayjs(item.enterTime).format('HH:mm') }}</span>
+                <template v-if="item.leaveTime"><span>→ {{ dayjs(item.leaveTime).format('HH:mm') }}</span></template>
+                <span v-else class="staying-tag">停留中</span>
+                <span v-if="item.durationSeconds" class="timeline-duration">
+                  {{ formatDuration(item.durationSeconds) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="timeline-empty">暂无实时轨迹</div>
+      </div>
     </template>
   </div>
 </template>
 
 <style scoped>
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
 .badge-status-card {
   padding: 16px;
-  background: #fff;
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
 }
 
 .card-header {
@@ -193,15 +233,112 @@ const relativeHeartbeat = computed(() => {
   animation: pulse 2s infinite;
 }
 
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
+/* 近期轨迹 */
+.recent-timeline {
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid #f5f5f5;
+}
 
-  50% {
-    opacity: 0.4;
-  }
+.timeline-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.timeline-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.timeline-count {
+  font-size: 11px;
+  color: #bfbfbf;
+}
+
+.timeline-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.timeline-item {
+  display: flex;
+  gap: 8px;
+  min-height: 48px;
+}
+
+.timeline-dot-wrap {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  align-items: center;
+  width: 12px;
+  padding-top: 5px;
+}
+
+.timeline-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  background: #d9d9d9;
+  border-radius: 50%;
+}
+
+.timeline-dot--active {
+  background: #52c41a;
+  box-shadow: 0 0 0 3px rgb(82 196 26 / 15%);
+}
+
+.timeline-line {
+  flex: 1;
+  width: 1px;
+  min-height: 20px;
+  background: #f0f0f0;
+}
+
+.timeline-item:last-child .timeline-line {
+  display: none;
+}
+
+.timeline-content {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 10px;
+}
+
+.timeline-area {
+  font-size: 12px;
+  line-height: 1.4;
+  color: #262626;
+  word-break: break-all;
+}
+
+.timeline-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  margin-top: 2px;
+  font-size: 11px;
+  color: #8c8c8c;
+}
+
+.staying-tag {
+  font-weight: 500;
+  color: #52c41a;
+}
+
+.timeline-duration {
+  color: #1677ff;
+}
+
+.timeline-empty {
+  padding: 16px 0;
+  font-size: 12px;
+  color: #bfbfbf;
+  text-align: center;
 }
 
 .empty-state {
diff --git a/apps/web-antd/src/views/ops/trajectory/modules/stats-cards.vue b/apps/web-antd/src/views/ops/trajectory/modules/stats-cards.vue
index 6d464eb93..4190f6953 100644
--- a/apps/web-antd/src/views/ops/trajectory/modules/stats-cards.vue
+++ b/apps/web-antd/src/views/ops/trajectory/modules/stats-cards.vue
@@ -10,43 +10,40 @@ import { Skeleton } from 'ant-design-vue';
 import { formatDuration } from '../data';
 
 const props = defineProps<{
-  currentLocation?: null | OpsTrajectoryApi.CurrentLocation;
+  data: null | OpsTrajectoryApi.TrajectorySummary;
   loading?: boolean;
-  summary: null | OpsTrajectoryApi.TrajectorySummary;
 }>();
 
 const cards = computed(() => [
   {
-    title: '今日出入次数',
-    value: props.summary?.totalEvents ?? 0,
-    suffix: '次',
-    icon: 'solar:transfer-horizontal-bold-duotone',
-    color: '#1677ff',
-    bgColor: '#e6f4ff',
-  },
-  {
-    title: '到访区域数',
-    value: props.summary?.uniqueAreaCount ?? 0,
-    suffix: '个',
-    icon: 'solar:map-point-bold-duotone',
-    color: '#52c41a',
-    bgColor: '#f6ffed',
-  },
-  {
-    title: '在线时长',
-    value: formatDuration(props.summary?.onlineDurationSeconds),
+    title: '作业时长',
+    value: formatDuration(props.data?.workDurationSeconds),
     suffix: '',
     icon: 'solar:clock-circle-bold-duotone',
     color: '#722ed1',
     bgColor: '#f9f0ff',
   },
   {
-    title: '当前所在区域',
-    value: props.currentLocation?.inArea
-      ? props.currentLocation.areaName || '未知区域'
-      : '已离开',
+    title: '覆盖区域数',
+    value: props.data?.coveredAreaCount ?? 0,
+    suffix: '个',
+    icon: 'solar:map-point-bold-duotone',
+    color: '#52c41a',
+    bgColor: '#f6ffed',
+  },
+  {
+    title: '出入次数',
+    value: props.data?.totalEvents ?? 0,
+    suffix: '次',
+    icon: 'solar:transfer-horizontal-bold-duotone',
+    color: '#1677ff',
+    bgColor: '#e6f4ff',
+  },
+  {
+    title: '平均停留时长',
+    value: formatDuration(props.data?.avgStaySeconds),
     suffix: '',
-    icon: 'solar:buildings-bold-duotone',
+    icon: 'solar:stopwatch-bold-duotone',
     color: '#fa8c16',
     bgColor: '#fff7e6',
   },
@@ -55,7 +52,7 @@ const cards = computed(() => [
 
 <template>
   <div class="stats-cards">
-    <div v-for="(card, index) in cards" :key="index" class="stat-card">
+    <div v-for="(card, index) in cards" :key="index" class="stat-card bg-card">
       <Skeleton :loading="loading" active :paragraph="{ rows: 1 }">
         <div class="stat-card-inner">
           <div class="stat-icon" :style="{ backgroundColor: card.bgColor }">
@@ -88,14 +85,6 @@ const cards = computed(() => [
 
 .stat-card {
   padding: 16px;
-  background: #fff;
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
-  transition: box-shadow 0.2s;
-}
-
-.stat-card:hover {
-  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
 }
 
 .stat-card-inner {
diff --git a/apps/web-antd/src/views/ops/trajectory/modules/trajectory-gantt-area.vue b/apps/web-antd/src/views/ops/trajectory/modules/trajectory-gantt-area.vue
new file mode 100644
index 000000000..d9b5a567b
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/modules/trajectory-gantt-area.vue
@@ -0,0 +1,832 @@
+<script setup lang="ts">
+import type { OpsTrajectoryApi } from '#/api/ops/trajectory';
+
+import { computed, onMounted, ref } from 'vue';
+
+import dayjs from 'dayjs';
+
+import { formatDuration, getPersonColor } from '../data';
+import {
+  areaTreeLoaded,
+  cachedAreaTree,
+  ensureAreaTree,
+} from './area-tree-cache';
+
+// 使用模块级缓存的区域树
+const areaTree = cachedAreaTree;
+const treeLoaded = areaTreeLoaded;
+
+onMounted(() => {
+  ensureAreaTree();
+});
+
+// ========== 时间轴范围（可调整） ==========
+const timeRangeMode = ref<'auto' | 'custom' | 'full'>('auto');
+const customStart = ref(6);
+const customEnd = ref(24);
+
+/** 根据轨迹数据自动计算时间范围（向下/上取整到小时） */
+const autoRange = computed<[number, number]>(() => {
+  if (props.records.length === 0) return [6, 24];
+  let minH = 24;
+  let maxH = 0;
+  for (const r of props.records) {
+    const enter = dayjs(r.enterTime);
+    const leave = r.leaveTime ? dayjs(r.leaveTime) : dayjs();
+    minH = Math.min(minH, enter.hour());
+    const leaveH = leave.minute() > 0 ? leave.hour() + 1 : leave.hour();
+    maxH = Math.max(maxH, leaveH);
+  }
+  // 前后各留1小时余量，至少跨4小时
+  const start = Math.max(0, minH - 1);
+  const end = Math.min(24, Math.max(maxH + 1, start + 4));
+  return [start, end];
+});
+
+const hourStart = computed(() => {
+  if (timeRangeMode.value === 'full') return 0;
+  if (timeRangeMode.value === 'custom') return customStart.value;
+  return autoRange.value[0];
+});
+
+const hourEnd = computed(() => {
+  if (timeRangeMode.value === 'full') return 24;
+  if (timeRangeMode.value === 'custom') return customEnd.value;
+  return autoRange.value[1];
+});
+
+const totalHours = computed(() => hourEnd.value - hourStart.value);
+const hours = computed(() =>
+  Array.from({ length: totalHours.value }, (_, i) => hourStart.value + i),
+);
+
+// 预设时间跨度选项
+const timePresets = [
+  { label: '自适应', value: 'auto' as const },
+  { label: '全天', value: 'full' as const },
+  { label: '上午', start: 6, end: 12 },
+  { label: '下午', start: 12, end: 18 },
+  { label: '工作时段', start: 8, end: 18 },
+] as const;
+
+function setTimeRange(preset: (typeof timePresets)[number]) {
+  if ('value' in preset) {
+    timeRangeMode.value = preset.value;
+  } else {
+    timeRangeMode.value = 'custom';
+    customStart.value = preset.start;
+    customEnd.value = preset.end;
+  }
+}
+
+/** 获取当前激活的预设标识 */
+function isPresetActive(preset: (typeof timePresets)[number]): boolean {
+  if ('value' in preset) return timeRangeMode.value === preset.value;
+  return (
+    timeRangeMode.value === 'custom' &&
+    customStart.value === preset.start &&
+    customEnd.value === preset.end
+  );
+}
+
+// ========== 横向缩放 ==========
+const ZOOM_LEVELS = [1, 2, 4, 8, 16];
+const zoomIndex = ref(0);
+const zoom = computed(() => ZOOM_LEVELS[zoomIndex.value]!);
+
+function zoomIn() {
+  if (zoomIndex.value < ZOOM_LEVELS.length - 1) zoomIndex.value++;
+}
+
+function zoomOut() {
+  if (zoomIndex.value > 0) zoomIndex.value--;
+}
+
+/** 时间轴内容宽度百分比（zoom=1 时为 100%） */
+const timelineWidthPct = computed(() => `${zoom.value * 100}%`);
+
+// ========== 按 areaId 索引轨迹记录 ==========
+const recordsByAreaId = computed(() => {
+  const map = new Map<number, OpsTrajectoryApi.TrajectoryRecord[]>();
+  for (const r of props.records) {
+    if (!map.has(r.areaId)) map.set(r.areaId, []);
+    map.get(r.areaId)!.push(r);
+  }
+  // 每个区域内按进入时间排序
+  for (const recs of map.values()) {
+    recs.sort((a, b) => a.enterTime.localeCompare(b.enterTime));
+  }
+  return map;
+});
+
+// 有轨迹数据的 areaId 集合（含祖先节点）
+const activeAreaIds = computed(() => {
+  const ids = new Set<number>();
+  // 收集所有有记录的 areaId
+  for (const areaId of recordsByAreaId.value.keys()) {
+    ids.add(areaId);
+  }
+  return ids;
+});
+
+// ========== 展开/折叠 ==========
+const collapsedNodes = ref(new Set<number>());
+
+function toggleNode(id: number) {
+  const s = collapsedNodes.value;
+  if (s.has(id)) s.delete(id);
+  else s.add(id);
+}
+
+// ========== 扁平化树为可见行 ==========
+type RowType = 'BUILDING' | 'FLOOR' | 'FUNCTION' | 'PARK';
+
+interface FlatRow {
+  areaId: number;
+  depth: number;
+  hasChildren: boolean;
+  hasData: boolean;
+  key: string;
+  label: string;
+  records: OpsTrajectoryApi.TrajectoryRecord[];
+  type: RowType;
+}
+
+/** 检测某个节点（或其子孙）是否包含轨迹数据 */
+function hasDataInSubtree(node: OpsAreaApi.BusArea): boolean {
+  if (
+    node.id !== null &&
+    node.id !== undefined &&
+    activeAreaIds.value.has(node.id)
+  )
+    return true;
+  if (node.children) {
+    return node.children.some((c) => hasDataInSubtree(c));
+  }
+  return false;
+}
+
+const flatRows = computed<FlatRow[]>(() => {
+  const rows: FlatRow[] = [];
+
+  function walk(nodes: OpsAreaApi.BusArea[], depth: number) {
+    for (const node of nodes) {
+      const id = node.id!;
+      const hasData = hasDataInSubtree(node);
+      // 跳过无数据的节点
+      if (!hasData) continue;
+
+      const type = (node.areaType || 'FUNCTION') as RowType;
+      const hasChildren = !!(node.children && node.children.length > 0);
+      const records =
+        type === 'FUNCTION' ? recordsByAreaId.value.get(id) || [] : [];
+
+      const label = node.areaName;
+
+      rows.push({
+        key: `node_${id}`,
+        areaId: id,
+        type,
+        label,
+        depth,
+        hasChildren,
+        hasData,
+        records,
+      });
+
+      if (hasChildren && !collapsedNodes.value.has(id)) {
+        walk(node.children!, depth + 1);
+      }
+    }
+  }
+
+  walk(areaTree.value, 0);
+  return rows;
+});
+
+// ========== 时间→位置百分比 ==========
+function timeToPercent(timeStr: string): number {
+  const d = dayjs(timeStr);
+  const minutesSinceStart = d.hour() * 60 + d.minute() - hourStart.value * 60;
+  return Math.max(
+    0,
+    Math.min(100, (minutesSinceStart / (totalHours.value * 60)) * 100),
+  );
+}
+
+function barStyle(record: OpsTrajectoryApi.TrajectoryRecord) {
+  const left = timeToPercent(record.enterTime);
+  const endTime = record.leaveTime || dayjs().format('YYYY-MM-DD HH:mm:ss');
+  const right = timeToPercent(endTime);
+  const naturalWidth = right - left;
+  // 最小宽度：缩放后保证至少 6px 可见（换算为百分比）
+  const minWidthPct = 0.8 / zoom.value;
+  const width = Math.max(naturalWidth, minWidthPct);
+  const personName = record.nickname || record.deviceName;
+  return {
+    left: `${left}%`,
+    width: `${width}%`,
+    backgroundColor: getPersonColor(personName),
+  };
+}
+
+// ========== 当前时间线 ==========
+const nowPercent = computed(() => {
+  const now = dayjs();
+  if (now.format('YYYY-MM-DD') !== props.date) return -1;
+  const mins = now.hour() * 60 + now.minute() - hourStart.value * 60;
+  const pct = (mins / (totalHours.value * 60)) * 100;
+  return pct >= 0 && pct <= 100 ? pct : -1;
+});
+
+// ========== Tooltip ==========
+const tooltip = ref<{
+  record: null | OpsTrajectoryApi.TrajectoryRecord;
+  visible: boolean;
+  x: number;
+  y: number;
+}>({ visible: false, x: 0, y: 0, record: null });
+
+function showTooltip(e: MouseEvent, record: OpsTrajectoryApi.TrajectoryRecord) {
+  tooltip.value = { visible: true, x: e.clientX, y: e.clientY, record };
+}
+
+function hideTooltip() {
+  tooltip.value.visible = false;
+}
+
+function handleBarClick(record: OpsTrajectoryApi.TrajectoryRecord) {
+  emit('select', record);
+}
+
+// ========== 左右纵向滚动同步 ==========
+function handleScroll(e: Event) {
+  const rightEl = e.target as HTMLElement;
+  const leftBody = rightEl
+    .closest('.gantt-main')
+    ?.querySelector('.gantt-left-body') as HTMLElement | null;
+  if (leftBody) {
+    leftBody.scrollTop = rightEl.scrollTop;
+  }
+}
+
+// ========== 人员图例 ==========
+const personLegend = computed(() => {
+  const nameSet = new Set<string>();
+  for (const r of props.records) {
+    nameSet.add(r.nickname || r.deviceName);
+  }
+  return [...nameSet].map((name) => ({ name, color: getPersonColor(name) }));
+});
+</script>
+
+<template>
+  <div class="gantt-area-wrapper">
+    <div v-if="!treeLoaded" class="gantt-empty">
+      <span style="color: #8c8c8c">加载区域结构...</span>
+    </div>
+
+    <div v-else-if="flatRows.length === 0" class="gantt-empty">
+      <span style="color: #8c8c8c">暂无区域数据</span>
+    </div>
+
+    <div v-else class="gantt-container">
+      <!-- 工具栏 -->
+      <div class="gantt-toolbar">
+        <span class="toolbar-label">时段</span>
+        <div class="time-presets">
+          <button
+            v-for="preset in timePresets"
+            :key="preset.label"
+            class="preset-btn"
+            :class="{ active: isPresetActive(preset) }"
+            @click="setTimeRange(preset)"
+          >
+            {{ preset.label }}
+          </button>
+        </div>
+        <div class="toolbar-zoom">
+          <button
+            class="zoom-btn"
+            :disabled="zoomIndex <= 0"
+            title="缩小"
+            @click="zoomOut"
+          >
+            −
+          </button>
+          <span class="zoom-label">{{ zoom }}x</span>
+          <button
+            class="zoom-btn"
+            :disabled="zoomIndex >= ZOOM_LEVELS.length - 1"
+            title="放大"
+            @click="zoomIn"
+          >
+            +
+          </button>
+        </div>
+      </div>
+
+      <!-- 头部 + 数据行，左右两栏布局 -->
+      <div class="gantt-main">
+        <!-- 固定左侧标签列 -->
+        <div class="gantt-left">
+          <div class="gantt-label-col gantt-header-label">区域</div>
+          <div class="gantt-left-body">
+            <div
+              v-for="row in flatRows"
+              :key="row.key"
+              class="gantt-row-label"
+              :class="[
+                `gantt-row--${row.type.toLowerCase()}`,
+                { 'gantt-row--inactive': !row.hasData },
+              ]"
+            >
+              <div
+                class="gantt-label-inner"
+                :style="{ paddingLeft: `${row.depth * 16 + 8}px` }"
+              >
+                <span
+                  v-if="row.hasChildren"
+                  class="gantt-toggle"
+                  @click="toggleNode(row.areaId)"
+                >
+                  {{ collapsedNodes.has(row.areaId) ? '▶' : '▼' }}
+                </span>
+                <span v-else class="gantt-toggle-placeholder"></span>
+                <span class="gantt-label-text">{{ row.label }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 可滚动右侧时间线 -->
+        <div class="gantt-right" @scroll="handleScroll">
+          <!-- 时间刻度头 -->
+          <div
+            class="gantt-timeline-header"
+            :style="{ width: timelineWidthPct }"
+          >
+            <div
+              v-for="h in hours"
+              :key="h"
+              class="gantt-hour-cell"
+              :style="{ width: `${100 / totalHours}%` }"
+            >
+              {{ String(h).padStart(2, '0') }}:00
+            </div>
+          </div>
+          <!-- 时间线数据行 -->
+          <div class="gantt-right-body">
+            <div
+              v-for="row in flatRows"
+              :key="row.key"
+              class="gantt-row-timeline"
+              :style="{ width: timelineWidthPct }"
+              :class="[
+                `gantt-row--${row.type.toLowerCase()}`,
+                { 'gantt-row--inactive': !row.hasData },
+              ]"
+            >
+              <!-- 小时网格线 -->
+              <div
+                v-for="h in hours"
+                :key="h"
+                class="gantt-grid-line"
+                :style="{ left: `${((h - hourStart) / totalHours) * 100}%` }"
+              ></div>
+              <!-- 当前时间线 -->
+              <div
+                v-if="nowPercent >= 0"
+                class="gantt-now-line"
+                :style="{ left: `${nowPercent}%` }"
+              ></div>
+              <!-- 轨迹条形 -->
+              <template
+                v-if="row.type === 'FUNCTION' && row.records.length > 0"
+              >
+                <div
+                  v-for="rec in row.records"
+                  :key="rec.id"
+                  class="gantt-bar"
+                  :style="barStyle(rec)"
+                  @click="handleBarClick(rec)"
+                  @mouseenter="showTooltip($event, rec)"
+                  @mouseleave="hideTooltip"
+                ></div>
+              </template>
+              <!-- 无数据虚线 -->
+              <div
+                v-else-if="row.type === 'FUNCTION' && row.records.length === 0"
+                class="gantt-no-data-line"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 人员图例 -->
+    <div v-if="personLegend.length > 0" class="gantt-legend">
+      <span class="legend-title">人员:</span>
+      <span v-for="item in personLegend" :key="item.name" class="legend-item">
+        <span
+          class="legend-dot"
+          :style="{ backgroundColor: item.color }"
+        ></span>
+        {{ item.name }}
+      </span>
+    </div>
+
+    <!-- Tooltip -->
+    <Teleport to="body">
+      <div
+        v-if="tooltip.visible && tooltip.record"
+        class="gantt-tooltip"
+        :style="{ left: `${tooltip.x + 12}px`, top: `${tooltip.y - 10}px` }"
+      >
+        <div class="gantt-tooltip-title">
+          {{ tooltip.record.nickname || tooltip.record.deviceName }}
+        </div>
+        <div class="gantt-tooltip-sub">{{ tooltip.record.areaName }}</div>
+        <div class="gantt-tooltip-sub">
+          {{ dayjs(tooltip.record.enterTime).format('HH:mm:ss') }}
+          →
+          {{
+            tooltip.record.leaveTime
+              ? dayjs(tooltip.record.leaveTime).format('HH:mm:ss')
+              : '至今'
+          }}
+        </div>
+        <div class="gantt-tooltip-sub">
+          停留
+          {{
+            tooltip.record.durationSeconds
+              ? formatDuration(tooltip.record.durationSeconds)
+              : '进行中'
+          }}
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.gantt-area-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.gantt-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 160px;
+}
+
+.gantt-container {
+  overflow: hidden;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+}
+
+/* ===== 工具栏 ===== */
+.gantt-toolbar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 12px;
+  background: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.toolbar-label {
+  font-size: 12px;
+  color: #8c8c8c;
+  white-space: nowrap;
+}
+
+.time-presets {
+  display: flex;
+  gap: 4px;
+}
+
+.preset-btn {
+  padding: 2px 10px;
+  font-size: 12px;
+  color: #595959;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.preset-btn:hover {
+  color: #1677ff;
+  border-color: #1677ff;
+}
+
+.preset-btn.active {
+  color: #fff;
+  background: #1677ff;
+  border-color: #1677ff;
+}
+
+.toolbar-zoom {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.zoom-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #595959;
+  cursor: pointer;
+  outline: none;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.zoom-btn:hover:not(:disabled) {
+  color: #1677ff;
+  border-color: #1677ff;
+}
+
+.zoom-btn:disabled {
+  color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+.zoom-label {
+  min-width: 28px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  color: #8c8c8c;
+  text-align: center;
+}
+
+/* ===== 主体：左固定 + 右可滚动 ===== */
+.gantt-main {
+  display: flex;
+  max-height: 520px;
+}
+
+/* 左侧标签列（固定） */
+.gantt-left {
+  flex-shrink: 0;
+  width: 200px;
+  border-right: 1px solid #f0f0f0;
+}
+
+.gantt-header-label {
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 36px;
+  color: #595959;
+  background: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.gantt-left-body {
+  max-height: 484px;
+  overflow-y: auto;
+
+  /* 隐藏左侧滚动条，由右侧驱动 */
+  scrollbar-width: none;
+}
+
+.gantt-left-body::-webkit-scrollbar {
+  display: none;
+}
+
+.gantt-row-label {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.gantt-label-inner {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 右侧时间线（横向 + 纵向可滚动） */
+.gantt-right {
+  flex: 1;
+  max-height: 520px;
+  overflow: auto;
+}
+
+.gantt-timeline-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  min-width: 100%;
+  background: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.gantt-hour-cell {
+  flex-shrink: 0;
+  font-size: 11px;
+  line-height: 36px;
+  color: #8c8c8c;
+  text-align: center;
+  border-left: 1px solid #f0f0f0;
+}
+
+.gantt-row-timeline {
+  position: relative;
+  min-width: 100%;
+  height: 36px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+/* ===== 行类型样式 ===== */
+.gantt-row--park {
+  font-size: 13px;
+  font-weight: 600;
+  color: #262626;
+  background: #f5f5f5;
+}
+
+.gantt-row--building {
+  font-size: 13px;
+  font-weight: 500;
+  color: #262626;
+  background: #fafafa;
+}
+
+.gantt-row--floor {
+  font-size: 12px;
+  color: #595959;
+  background: #fdfdfd;
+}
+
+.gantt-row--function {
+  font-size: 12px;
+  color: #262626;
+}
+
+.gantt-row--inactive {
+  opacity: 0.45;
+}
+
+.gantt-row--inactive .gantt-label-text {
+  color: #bfbfbf;
+}
+
+/* ===== 交互元素 ===== */
+.gantt-toggle {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  font-size: 10px;
+  color: #8c8c8c;
+  cursor: pointer;
+  user-select: none;
+}
+
+.gantt-toggle-placeholder {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 16px;
+}
+
+.gantt-label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+/* ===== 时间线元素 ===== */
+.gantt-grid-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  pointer-events: none;
+  background: #f5f5f5;
+}
+
+.gantt-now-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 2px;
+  pointer-events: none;
+  background: #ff4d4f;
+}
+
+.gantt-now-line::before {
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: 8px;
+  height: 8px;
+  content: '';
+  background: #ff4d4f;
+  border-radius: 50%;
+}
+
+.gantt-no-data-line {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  left: 8px;
+  height: 1px;
+  pointer-events: none;
+  border-top: 1px dashed #e8e8e8;
+}
+
+/* ===== 条形 ===== */
+.gantt-bar {
+  position: absolute;
+  top: 4px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  min-width: 6px;
+  height: 28px;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: opacity 0.15s;
+}
+
+.gantt-bar:hover {
+  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
+  opacity: 0.85;
+}
+
+/* ===== Tooltip ===== */
+.gantt-tooltip {
+  position: fixed;
+  z-index: 9999;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #fff;
+  white-space: nowrap;
+  pointer-events: none;
+  background: rgb(0 0 0 / 80%);
+  border-radius: 6px;
+}
+
+.gantt-tooltip-title {
+  font-weight: 500;
+}
+
+.gantt-tooltip-sub {
+  color: rgb(255 255 255 / 80%);
+}
+
+/* 图例 */
+.gantt-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 0 0;
+}
+
+.legend-title {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.legend-item {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  font-size: 12px;
+  color: #595959;
+}
+
+.legend-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/trajectory/modules/trend-chart.vue b/apps/web-antd/src/views/ops/trajectory/modules/trend-chart.vue
index ac1940132..b4e1e4344 100644
--- a/apps/web-antd/src/views/ops/trajectory/modules/trend-chart.vue
+++ b/apps/web-antd/src/views/ops/trajectory/modules/trend-chart.vue
@@ -8,46 +8,32 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { Empty } from 'ant-design-vue';
 
 const props = defineProps<{
-  records: OpsTrajectoryApi.TrajectoryRecord[];
+  data: OpsTrajectoryApi.HourlyTrend[];
 }>();
 
 const chartRef = ref();
 const { renderEcharts } = useEcharts(chartRef);
 
-/** 按小时聚合进出次数 */
-const hourlyData = computed(() => {
+const hasData = computed(() => props.data.length > 0);
+
+function getChartOptions(): any {
+  // 补全 0-23 小时
   const hours: string[] = [];
   const enterCounts: number[] = [];
   const leaveCounts: number[] = [];
 
-  // 生成 0-23 小时
+  const dataMap = new Map<number, OpsTrajectoryApi.HourlyTrend>();
+  for (const item of props.data) {
+    dataMap.set(item.hour, item);
+  }
+
   for (let i = 0; i < 24; i++) {
     hours.push(`${String(i).padStart(2, '0')}:00`);
-    enterCounts.push(0);
-    leaveCounts.push(0);
+    const item = dataMap.get(i);
+    enterCounts.push(item?.enterCount ?? 0);
+    leaveCounts.push(item?.leaveCount ?? 0);
   }
 
-  for (const record of props.records) {
-    // 统计进入
-    if (record.enterTime) {
-      const h = new Date(record.enterTime).getHours();
-      enterCounts[h]!++;
-    }
-    // 统计离开
-    if (record.leaveTime) {
-      const h = new Date(record.leaveTime).getHours();
-      leaveCounts[h]!++;
-    }
-  }
-
-  return { hours, enterCounts, leaveCounts };
-});
-
-const hasData = computed(() => props.records.length > 0);
-
-function getChartOptions(): any {
-  const { hours, enterCounts, leaveCounts } = hourlyData.value;
-
   return {
     tooltip: { trigger: 'axis' },
     legend: {
@@ -90,8 +76,8 @@ function getChartOptions(): any {
         symbol: 'circle',
         symbolSize: 5,
         data: enterCounts,
-        lineStyle: { width: 2.5, color: '#52c41a' },
-        itemStyle: { color: '#52c41a' },
+        lineStyle: { width: 2.5, color: '#1677ff' },
+        itemStyle: { color: '#1677ff' },
         areaStyle: {
           opacity: 0.12,
           color: {
@@ -101,8 +87,8 @@ function getChartOptions(): any {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
-              { offset: 1, color: 'rgba(82, 196, 26, 0.02)' },
+              { offset: 0, color: 'rgba(22, 119, 255, 0.3)' },
+              { offset: 1, color: 'rgba(22, 119, 255, 0.02)' },
             ],
           },
         },
@@ -114,8 +100,8 @@ function getChartOptions(): any {
         symbol: 'circle',
         symbolSize: 5,
         data: leaveCounts,
-        lineStyle: { width: 2.5, color: '#ff4d4f' },
-        itemStyle: { color: '#ff4d4f' },
+        lineStyle: { width: 2.5, color: '#fa8c16' },
+        itemStyle: { color: '#fa8c16' },
         areaStyle: {
           opacity: 0.12,
           color: {
@@ -125,8 +111,8 @@ function getChartOptions(): any {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(255, 77, 79, 0.3)' },
-              { offset: 1, color: 'rgba(255, 77, 79, 0.02)' },
+              { offset: 0, color: 'rgba(250, 140, 22, 0.3)' },
+              { offset: 1, color: 'rgba(250, 140, 22, 0.02)' },
             ],
           },
         },
@@ -136,7 +122,7 @@ function getChartOptions(): any {
 }
 
 watch(
-  () => props.records,
+  () => props.data,
   () => {
     if (hasData.value) {
       renderEcharts(getChartOptions());
@@ -147,21 +133,18 @@ watch(
 </script>
 
 <template>
-  <div class="trend-chart">
+  <div class="trend-chart bg-card">
     <div class="chart-title">时段出入趋势</div>
     <div v-if="!hasData" class="chart-empty">
       <Empty description="暂无数据" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
     </div>
-    <EchartsUI v-show="hasData" ref="chartRef" height="260" width="100%" />
+    <EchartsUI v-show="hasData" ref="chartRef" height="260px" width="100%" />
   </div>
 </template>
 
 <style scoped>
 .trend-chart {
   padding: 16px;
-  background: #fff;
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
 }
 
 .chart-title {