From 16434a0d8819369f07e243833c7b4b2ef6271112 Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Tue, 31 Mar 2026 22:54:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/web-antd):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=B7=A5=E7=89=8C=E5=87=BA=E5=85=A5=E8=BD=A8=E8=BF=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/ops/trajectory/index.ts | 112 +++
 .../web-antd/src/router/routes/modules/ops.ts |  10 +
 .../web-antd/src/views/ops/trajectory/data.ts | 165 +++++
 .../src/views/ops/trajectory/index.vue        | 697 ++++++++++++++++++
 .../trajectory/modules/area-stay-chart.vue    | 170 +++++
 .../trajectory/modules/badge-status-card.vue  | 218 ++++++
 .../ops/trajectory/modules/stats-cards.vue    | 154 ++++
 .../modules/trajectory-timeline.vue           | 272 +++++++
 .../ops/trajectory/modules/trend-chart.vue    | 180 +++++
 9 files changed, 1978 insertions(+)
 create mode 100644 apps/web-antd/src/api/ops/trajectory/index.ts
 create mode 100644 apps/web-antd/src/views/ops/trajectory/data.ts
 create mode 100644 apps/web-antd/src/views/ops/trajectory/index.vue
 create mode 100644 apps/web-antd/src/views/ops/trajectory/modules/area-stay-chart.vue
 create mode 100644 apps/web-antd/src/views/ops/trajectory/modules/badge-status-card.vue
 create mode 100644 apps/web-antd/src/views/ops/trajectory/modules/stats-cards.vue
 create mode 100644 apps/web-antd/src/views/ops/trajectory/modules/trajectory-timeline.vue
 create mode 100644 apps/web-antd/src/views/ops/trajectory/modules/trend-chart.vue

diff --git a/apps/web-antd/src/api/ops/trajectory/index.ts b/apps/web-antd/src/api/ops/trajectory/index.ts
new file mode 100644
index 000000000..44d10aff3
--- /dev/null
+++ b/apps/web-antd/src/api/ops/trajectory/index.ts
@@ -0,0 +1,112 @@
+import { requestClient } from '#/api/request';
+
+// ==================== 类型定义 ====================
+
+export namespace OpsTrajectoryApi {
+  /** 出入事件离开原因 */
+  export type LeaveReason = 'AREA_SWITCH' | 'DEVICE_OFFLINE' | 'SIGNAL_LOSS';
+
+  /** 工牌设备下拉项 */
+  export interface BadgeOption {
+    deviceId: number;
+    deviceKey: string;
+    nickname: string;
+    personName?: string;
+  }
+
+  /** 轨迹分页查询参数 */
+  export interface TrajectoryPageQuery {
+    deviceId?: number;
+    areaId?: number;
+    enterTime?: string[]; // [startTime, endTime]
+    pageNo?: number;
+    pageSize?: number;
+  }
+
+  /** 轨迹记录 */
+  export interface TrajectoryRecord {
+    id: number;
+    deviceId: number;
+    deviceName: string;
+    nickname: string;
+    areaId: number;
+    areaName: string;
+    buildingName?: string;
+    floorNo?: number;
+    beaconMac?: string;
+    enterTime: string;
+    leaveTime?: string;
+    durationSeconds?: number;
+    leaveReason?: LeaveReason;
+    enterRssi?: number;
+  }
+
+  /** 时间线查询参数 */
+  export interface TimelineQuery {
+    deviceId: number;
+    date: string; // yyyy-MM-dd
+  }
+
+  /** 设备当前位置 */
+  export interface CurrentLocation {
+    deviceId: number;
+    areaId?: number;
+    areaName?: string;
+    enterTime?: number; // 毫秒时间戳
+    beaconMac?: string;
+    inArea: boolean;
+  }
+
+  /** 轨迹统计摘要 */
+  export interface TrajectorySummary {
+    totalEvents: number;
+    uniqueAreaCount: number;
+    onlineDurationSeconds: number;
+    firstOnlineTime?: string;
+    lastOnlineTime?: string;
+  }
+}
+
+// ==================== API 接口 ====================
+
+/** 获取工牌设备下拉列表 */
+export function getBadgeList(keyword?: string) {
+  return requestClient.get<OpsTrajectoryApi.BadgeOption[]>(
+    '/ops/trajectory/badge-list',
+    { params: keyword ? { keyword } : undefined },
+  );
+}
+
+/** 分页查询轨迹记录 */
+export function getTrajectoryPage(
+  params: OpsTrajectoryApi.TrajectoryPageQuery,
+) {
+  return requestClient.get<{
+    list: OpsTrajectoryApi.TrajectoryRecord[];
+    total: number;
+  }>('/ops/trajectory/page', { params });
+}
+
+/** 获取某设备某天的时间线 */
+export function getTrajectoryTimeline(params: OpsTrajectoryApi.TimelineQuery) {
+  return requestClient.get<OpsTrajectoryApi.TrajectoryRecord[]>(
+    '/ops/trajectory/timeline',
+    { params },
+  );
+}
+
+/** 获取设备实时位置 */
+export function getCurrentLocation(deviceId: number) {
+  return requestClient.get<OpsTrajectoryApi.CurrentLocation>(
+    '/ops/trajectory/current-location',
+    { params: { deviceId } },
+  );
+}
+
+/** 获取轨迹统计摘要 */
+export function getTrajectorySummary(deviceId: number, date: string) {
+  return requestClient.get<OpsTrajectoryApi.TrajectorySummary>(
+    '/ops/trajectory/summary',
+    { params: { deviceId, date } },
+  );
+}
diff --git a/apps/web-antd/src/router/routes/modules/ops.ts b/apps/web-antd/src/router/routes/modules/ops.ts
index b8923ffb6..7ef108667 100644
--- a/apps/web-antd/src/router/routes/modules/ops.ts
+++ b/apps/web-antd/src/router/routes/modules/ops.ts
@@ -71,6 +71,16 @@ const routes: RouteRecordRaw[] = [
         },
         component: () => import('#/views/ops/work-order/dashboard/index.vue'),
       },
+      // 工牌出入轨迹
+      {
+        path: 'trajectory',
+        name: 'OpsTrajectory',
+        meta: {
+          title: '工牌出入轨迹',
+          activePath: '/ops/trajectory',
+        },
+        component: () => import('#/views/ops/trajectory/index.vue'),
+      },
       // 巡检记录
       {
         path: 'inspection-record',
diff --git a/apps/web-antd/src/views/ops/trajectory/data.ts b/apps/web-antd/src/views/ops/trajectory/data.ts
new file mode 100644
index 000000000..ef354d734
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/data.ts
@@ -0,0 +1,165 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 事件类型：进入/离开 */
+export type EventType = 'ENTER' | 'LEAVE';
+
+/** 离开原因文本映射 */
+export const LEAVE_REASON_TEXT: Record<string, string> = {
+  SIGNAL_LOSS: '信号丢失',
+  AREA_SWITCH: '区域切换',
+  DEVICE_OFFLINE: '设备离线',
+};
+
+/** 离开原因颜色映射 */
+export const LEAVE_REASON_COLOR: Record<string, { bg: string; text: string }> =
+  {
+    SIGNAL_LOSS: { bg: '#FFF7E6', text: '#D46B08' },
+    AREA_SWITCH: { bg: '#E6F4FF', text: '#1677FF' },
+    DEVICE_OFFLINE: { bg: '#FFF1F0', text: '#CF1322' },
+  };
+
+/** 工牌状态颜色映射 */
+export const BADGE_STATUS_MAP: Record<
+  string,
+  { color: string; label: string }
+> = {
+  BUSY: { color: '#52c41a', label: '作业中' },
+  IDLE: { color: '#1677ff', label: '空闲' },
+  OFFLINE: { color: '#bfbfbf', label: '离线' },
+  PAUSED: { color: '#fa8c16', label: '暂停' },
+};
+
+/** RSSI 信号强度等级 */
+export function getRssiLevel(rssi: null | number | undefined): {
+  color: string;
+  icon: string;
+  label: string;
+} {
+  if (rssi === null || rssi === undefined)
+    return {
+      label: '无信号',
+      icon: 'solar:wifi-router-minimalistic-bold-duotone',
+      color: '#bfbfbf',
+    };
+  if (rssi >= -60)
+    return {
+      label: '强',
+      icon: 'solar:wifi-router-minimalistic-bold-duotone',
+      color: '#52c41a',
+    };
+  if (rssi >= -75)
+    return {
+      label: '良',
+      icon: 'solar:wifi-router-minimalistic-bold-duotone',
+      color: '#1677ff',
+    };
+  if (rssi >= -85)
+    return {
+      label: '弱',
+      icon: 'solar:wifi-router-minimalistic-bold-duotone',
+      color: '#faad14',
+    };
+  return {
+    label: '极弱',
+    icon: 'solar:wifi-router-minimalistic-bold-duotone',
+    color: '#ff4d4f',
+  };
+}
+
+/** 电量等级 */
+export function getBatteryLevel(level: null | number | undefined): {
+  color: string;
+  icon: string;
+} {
+  if (level === null || level === undefined)
+    return {
+      icon: 'solar:battery-charge-minimalistic-bold-duotone',
+      color: '#bfbfbf',
+    };
+  if (level >= 60)
+    return {
+      icon: 'solar:battery-full-minimalistic-bold-duotone',
+      color: '#52c41a',
+    };
+  if (level >= 20)
+    return {
+      icon: 'solar:battery-low-minimalistic-bold-duotone',
+      color: '#faad14',
+    };
+  return {
+    icon: 'solar:battery-low-minimalistic-bold-duotone',
+    color: '#ff4d4f',
+  };
+}
+
+/** 格式化停留时长（秒 → 可读文本） */
+export function formatDuration(seconds: null | number | undefined): string {
+  if (seconds === null || seconds === undefined || seconds <= 0) return '-';
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  if (h > 0) return `${h}h ${m}m`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+
+/** 明细表列定义 */
+export function useTrajectoryColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'seq', width: 60, title: '序号' },
+    {
+      field: 'areaName',
+      title: '区域名称',
+      minWidth: 160,
+      showOverflow: true,
+    },
+    {
+      field: 'buildingName',
+      title: '楼栋',
+      width: 100,
+      showOverflow: true,
+    },
+    {
+      field: 'floorNo',
+      title: '楼层',
+      width: 70,
+      align: 'center',
+      formatter({ cellValue }: { cellValue: null | number }) {
+        return cellValue === null ? '-' : `${cellValue}F`;
+      },
+    },
+    {
+      field: 'enterTime',
+      title: '进入时间',
+      width: 160,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'leaveTime',
+      title: '离开时间',
+      width: 160,
+      slots: { default: 'leaveTime' },
+    },
+    {
+      field: 'durationSeconds',
+      title: '停留时长',
+      width: 100,
+      align: 'center',
+      slots: { default: 'duration' },
+    },
+    {
+      field: 'leaveReason',
+      title: '离开原因',
+      width: 100,
+      align: 'center',
+      slots: { default: 'leaveReason' },
+    },
+    {
+      field: 'enterRssi',
+      title: '进入信号',
+      width: 90,
+      align: 'center',
+      slots: { default: 'rssi' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/ops/trajectory/index.vue b/apps/web-antd/src/views/ops/trajectory/index.vue
new file mode 100644
index 000000000..30db5eabe
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/index.vue
@@ -0,0 +1,697 @@
+<script setup lang="ts">
+import type { OpsCleaningApi } from '#/api/ops/cleaning';
+import type { OpsTrajectoryApi } from '#/api/ops/trajectory';
+
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  DatePicker,
+  Empty,
+  Row,
+  Select,
+  Spin,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { getBadgeRealtimeStatus } from '#/api/ops/cleaning';
+import {
+  getBadgeList,
+  getCurrentLocation,
+  getTrajectoryPage,
+  getTrajectorySummary,
+  getTrajectoryTimeline,
+} from '#/api/ops/trajectory';
+
+import {
+  formatDuration,
+  getRssiLevel,
+  LEAVE_REASON_COLOR,
+  LEAVE_REASON_TEXT,
+} from './data';
+import AreaStayChart from './modules/area-stay-chart.vue';
+import BadgeStatusCard from './modules/badge-status-card.vue';
+import StatsCards from './modules/stats-cards.vue';
+import TrajectoryTimeline from './modules/trajectory-timeline.vue';
+import TrendChart from './modules/trend-chart.vue';
+
+defineOptions({ name: 'OpsTrajectory' });
+
+const route = useRoute();
+
+// ========== 筛选条件 ==========
+const selectedDeviceId = ref<number | undefined>(undefined);
+const selectedDate = ref<dayjs.Dayjs>(dayjs());
+const badgeOptions = ref<OpsTrajectoryApi.BadgeOption[]>([]);
+const badgeSearchLoading = ref(false);
+
+// ========== 数据状态 ==========
+const loading = ref(false);
+const badgeStatus = ref<null | OpsCleaningApi.BadgeRealtimeStatus>(null);
+const currentLocation = ref<null | OpsTrajectoryApi.CurrentLocation>(null);
+const summary = ref<null | OpsTrajectoryApi.TrajectorySummary>(null);
+const timelineRecords = ref<OpsTrajectoryApi.TrajectoryRecord[]>([]);
+
+// 明细表分页数据
+const tableLoading = ref(false);
+const tableData = ref<OpsTrajectoryApi.TrajectoryRecord[]>([]);
+const tableTotal = ref(0);
+const pageNo = ref(1);
+const pageSize = ref(20);
+
+// 轮询定时器
+const pollTimer = ref<number>();
+const POLL_INTERVAL = 30_000;
+
+// ========== 计算属性 ==========
+const dateStr = computed(() => selectedDate.value.format('YYYY-MM-DD'));
+const hasDevice = computed(() => selectedDeviceId.value !== undefined);
+const isOffline = computed(
+  () =>
+    badgeStatus.value && badgeStatus.value.status?.toUpperCase() === 'OFFLINE',
+);
+
+// ========== 工牌下拉搜索 ==========
+async function handleBadgeSearch(keyword: string) {
+  badgeSearchLoading.value = true;
+  try {
+    badgeOptions.value = await getBadgeList(keyword || undefined);
+  } catch {
+    badgeOptions.value = [];
+  } finally {
+    badgeSearchLoading.value = false;
+  }
+}
+
+// ========== 数据加载 ==========
+async function loadAllData() {
+  loading.value = true;
+  try {
+    const tasks: Promise<void>[] = [loadTableData()];
+    if (hasDevice.value) {
+      tasks.push(
+        loadBadgeStatus(),
+        loadCurrentLocation(),
+        loadSummary(),
+        loadTimeline(),
+      );
+    } else {
+      // 未选设备时清空设备相关数据
+      badgeStatus.value = null;
+      currentLocation.value = null;
+      summary.value = null;
+      timelineRecords.value = [];
+    }
+    await Promise.all(tasks);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadBadgeStatus() {
+  if (!selectedDeviceId.value) return;
+  try {
+    badgeStatus.value = await getBadgeRealtimeStatus(selectedDeviceId.value);
+  } catch {
+    badgeStatus.value = null;
+  }
+}
+
+async function loadCurrentLocation() {
+  if (!selectedDeviceId.value) return;
+  try {
+    currentLocation.value = await getCurrentLocation(selectedDeviceId.value);
+  } catch {
+    currentLocation.value = null;
+  }
+}
+
+async function loadSummary() {
+  if (!selectedDeviceId.value) return;
+  try {
+    summary.value = await getTrajectorySummary(
+      selectedDeviceId.value,
+      dateStr.value,
+    );
+  } catch {
+    summary.value = null;
+  }
+}
+
+async function loadTimeline() {
+  if (!selectedDeviceId.value) return;
+  try {
+    timelineRecords.value = await getTrajectoryTimeline({
+      deviceId: selectedDeviceId.value,
+      date: dateStr.value,
+    });
+  } catch {
+    timelineRecords.value = [];
+  }
+}
+
+async function loadTableData() {
+  tableLoading.value = true;
+  try {
+    const startTime = selectedDate.value
+      .startOf('day')
+      .format('YYYY-MM-DD HH:mm:ss');
+    const endTime = selectedDate.value
+      .endOf('day')
+      .format('YYYY-MM-DD HH:mm:ss');
+    const result = await getTrajectoryPage({
+      deviceId: selectedDeviceId.value,
+      enterTime: [startTime, endTime],
+      pageNo: pageNo.value,
+      pageSize: pageSize.value,
+    });
+    tableData.value = result.list;
+    tableTotal.value = result.total;
+  } catch {
+    tableData.value = [];
+    tableTotal.value = 0;
+  } finally {
+    tableLoading.value = false;
+  }
+}
+
+// ========== 查询按钮 ==========
+function handleQuery() {
+  pageNo.value = 1;
+  loadAllData();
+  startPolling();
+}
+
+function handleReset() {
+  selectedDeviceId.value = undefined;
+  selectedDate.value = dayjs();
+  stopPolling();
+  handleQuery();
+}
+
+// ========== 分页 ==========
+function handlePageChange(page: number, size: number) {
+  pageNo.value = page;
+  pageSize.value = size;
+  loadTableData();
+}
+
+// ========== 时间线点击联动 ==========
+const highlightId = ref<number | undefined>();
+
+function handleTimelineSelect(record: OpsTrajectoryApi.TrajectoryRecord) {
+  highlightId.value = record.id;
+  // 3秒后取消高亮
+  setTimeout(() => {
+    highlightId.value = undefined;
+  }, 3000);
+}
+
+// ========== 轮询（仅选中设备时） ==========
+function startPolling() {
+  stopPolling();
+  if (!selectedDeviceId.value) return;
+  pollTimer.value = window.setInterval(() => {
+    loadBadgeStatus();
+    loadCurrentLocation();
+  }, POLL_INTERVAL);
+}
+
+function stopPolling() {
+  if (pollTimer.value) {
+    clearInterval(pollTimer.value);
+    pollTimer.value = undefined;
+  }
+}
+
+// ========== 限制日期选择 ==========
+function disabledDate(current: dayjs.Dayjs) {
+  return current && current > dayjs().endOf('day');
+}
+
+// ========== 生命周期 ==========
+onMounted(async () => {
+  // 加载工牌列表
+  await handleBadgeSearch('');
+
+  // 如果 URL 带参数，自动填充
+  const queryDeviceId = route.query.deviceId;
+  const queryDate = route.query.date;
+  if (queryDeviceId) {
+    selectedDeviceId.value = Number(queryDeviceId);
+  }
+  if (queryDate && typeof queryDate === 'string') {
+    selectedDate.value = dayjs(queryDate);
+  }
+
+  // 始终加载数据（未选设备时展示全量表格）
+  handleQuery();
+});
+
+onActivated(() => {
+  if (selectedDeviceId.value) {
+    startPolling();
+  }
+});
+
+onDeactivated(() => {
+  stopPolling();
+});
+
+onUnmounted(() => {
+  stopPolling();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="trajectory-page">
+      <!-- 离线警告横幅 -->
+      <Alert
+        v-if="hasDevice && isOffline"
+        banner
+        class="offline-alert"
+        message="该设备当前已离线"
+        :description="`最后心跳时间: ${badgeStatus?.lastHeartbeatTime ? formatDateTime(badgeStatus.lastHeartbeatTime) : '未知'}`"
+        type="warning"
+        show-icon
+      />
+
+      <!-- 顶部筛选栏 -->
+      <Card class="filter-card" size="small">
+        <div class="filter-bar">
+          <div class="filter-item">
+            <span class="filter-label">工牌设备</span>
+            <Select
+              v-model:value="selectedDeviceId"
+              allow-clear
+              :filter-option="false"
+              :loading="badgeSearchLoading"
+              option-filter-prop="label"
+              placeholder="请选择或搜索工牌设备"
+              show-search
+              style="width: 260px"
+              @search="handleBadgeSearch"
+            >
+              <Select.Option
+                v-for="badge in badgeOptions"
+                :key="badge.deviceId"
+                :label="`${badge.nickname || badge.deviceKey} ${badge.personName || ''}`"
+                :value="badge.deviceId"
+              >
+                <div class="badge-option">
+                  <span class="badge-option-name">
+                    {{ badge.nickname || badge.deviceKey }}
+                  </span>
+                  <span v-if="badge.personName" class="badge-option-person">
+                    {{ badge.personName }}
+                  </span>
+                </div>
+              </Select.Option>
+            </Select>
+          </div>
+
+          <div class="filter-item">
+            <span class="filter-label">日期</span>
+            <DatePicker
+              v-model:value="selectedDate"
+              :disabled-date="disabledDate"
+              format="YYYY-MM-DD"
+              placeholder="选择日期"
+              style="width: 160px"
+            />
+          </div>
+
+          <div class="filter-actions">
+            <Button type="primary" @click="handleQuery">
+              <IconifyIcon icon="solar:magnifer-bold" />
+              查询
+            </Button>
+            <Button @click="handleReset">重置</Button>
+          </div>
+        </div>
+      </Card>
+
+      <!-- 数据区域 -->
+      <Spin :spinning="loading">
+        <Row :gutter="16" class="content-area">
+          <!-- 左侧面板（仅选中设备时显示） -->
+          <Col v-if="hasDevice" :span="6" class="left-panel">
+            <BadgeStatusCard :data="badgeStatus" :loading="loading" />
+            <TrajectoryTimeline
+              :current-location="currentLocation"
+              :records="timelineRecords"
+              @select="handleTimelineSelect"
+            />
+          </Col>
+
+          <!-- 右侧内容（未选设备时全宽） -->
+          <Col :span="hasDevice ? 18 : 24">
+            <!-- KPI 统计卡片（仅选中设备时显示） -->
+            <StatsCards
+              v-if="hasDevice"
+              :current-location="currentLocation"
+              :loading="loading"
+              :summary="summary"
+            />
+
+            <!-- 图表区（仅选中设备时显示） -->
+            <Row v-if="hasDevice" :gutter="16" class="charts-row">
+              <Col :span="12">
+                <AreaStayChart :records="timelineRecords" />
+              </Col>
+              <Col :span="12">
+                <TrendChart :records="timelineRecords" />
+              </Col>
+            </Row>
+
+            <!-- 明细表 -->
+            <Card
+              class="table-card"
+              :class="{ 'table-card--no-top': !hasDevice }"
+              size="small"
+              title="出入记录明细"
+            >
+              <template #extra>
+                <span class="table-total">共 {{ tableTotal }} 条</span>
+              </template>
+
+              <Spin :spinning="tableLoading">
+                <div class="table-wrapper">
+                  <table class="trajectory-table">
+                    <thead>
+                      <tr>
+                        <th style="width: 60px">序号</th>
+                        <!-- 未选设备时显示设备列 -->
+                        <th v-if="!hasDevice" style="width: 140px">设备名称</th>
+                        <th style="min-width: 140px">区域名称</th>
+                        <th style="width: 100px">楼栋</th>
+                        <th style="width: 70px">楼层</th>
+                        <th style="width: 160px">进入时间</th>
+                        <th style="width: 160px">离开时间</th>
+                        <th style="width: 100px">停留时长</th>
+                        <th style="width: 100px">离开原因</th>
+                        <th style="width: 90px">进入信号</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-if="tableData.length === 0">
+                        <td :colspan="hasDevice ? 9 : 10" class="table-empty">
+                          <Empty
+                            description="暂无记录"
+                            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+                          />
+                        </td>
+                      </tr>
+                      <tr
+                        v-for="(row, index) in tableData"
+                        :key="row.id"
+                        :class="{
+                          'row-highlight': highlightId === row.id,
+                        }"
+                      >
+                        <td class="cell-center">
+                          {{ (pageNo - 1) * pageSize + index + 1 }}
+                        </td>
+                        <td v-if="!hasDevice">
+                          {{ row.nickname || row.deviceName || '-' }}
+                        </td>
+                        <td>{{ row.areaName }}</td>
+                        <td>{{ row.buildingName || '-' }}</td>
+                        <td class="cell-center">
+                          {{ row.floorNo != null ? `${row.floorNo}F` : '-' }}
+                        </td>
+                        <td>{{ formatDateTime(row.enterTime) }}</td>
+                        <td>
+                          <template v-if="row.leaveTime">
+                            {{ formatDateTime(row.leaveTime) }}
+                          </template>
+                          <Tag v-else color="blue" size="small"> 停留中 </Tag>
+                        </td>
+                        <td class="cell-center">
+                          <span
+                            v-if="row.durationSeconds"
+                            :class="{
+                              'duration-warn':
+                                (row.durationSeconds ?? 0) > 3600,
+                            }"
+                          >
+                            {{ formatDuration(row.durationSeconds) }}
+                          </span>
+                          <span v-else>-</span>
+                        </td>
+                        <td class="cell-center">
+                          <Tag
+                            v-if="row.leaveReason"
+                            :color="LEAVE_REASON_COLOR[row.leaveReason]?.bg"
+                            :style="{
+                              color: LEAVE_REASON_COLOR[row.leaveReason]?.text,
+                              border: 'none',
+                            }"
+                          >
+                            {{
+                              LEAVE_REASON_TEXT[row.leaveReason] ||
+                              row.leaveReason
+                            }}
+                          </Tag>
+                          <span v-else>-</span>
+                        </td>
+                        <td class="cell-center">
+                          <Tooltip
+                            v-if="row.enterRssi != null"
+                            :title="`${row.enterRssi} dBm`"
+                          >
+                            <span
+                              :style="{
+                                color: getRssiLevel(row.enterRssi).color,
+                                fontWeight: 500,
+                              }"
+                            >
+                              {{ getRssiLevel(row.enterRssi).label }}
+                            </span>
+                          </Tooltip>
+                          <span v-else>-</span>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <!-- 分页 -->
+                <div v-if="tableTotal > 0" class="table-pagination">
+                  <span class="pagination-info">
+                    第 {{ (pageNo - 1) * pageSize + 1 }}-{{
+                      Math.min(pageNo * pageSize, tableTotal)
+                    }}
+                    条 / 共 {{ tableTotal }} 条
+                  </span>
+                  <div class="pagination-buttons">
+                    <Button
+                      :disabled="pageNo <= 1"
+                      size="small"
+                      @click="handlePageChange(pageNo - 1, pageSize)"
+                    >
+                      上一页
+                    </Button>
+                    <span class="page-num">{{ pageNo }}</span>
+                    <Button
+                      :disabled="pageNo * pageSize >= tableTotal"
+                      size="small"
+                      @click="handlePageChange(pageNo + 1, pageSize)"
+                    >
+                      下一页
+                    </Button>
+                  </div>
+                </div>
+              </Spin>
+            </Card>
+          </Col>
+        </Row>
+      </Spin>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.trajectory-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.offline-alert {
+  border-radius: 8px;
+}
+
+/* 筛选栏 */
+.filter-card {
+  border-radius: 8px;
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+}
+
+.filter-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.filter-label {
+  font-size: 13px;
+  color: #595959;
+  white-space: nowrap;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+/* 工牌下拉选项 */
+.badge-option {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.badge-option-name {
+  font-size: 13px;
+  color: #262626;
+}
+
+.badge-option-person {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+/* 内容区域 */
+.content-area {
+  margin-top: 0;
+}
+
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* 图表行 */
+.charts-row {
+  margin-top: 16px;
+}
+
+/* 明细表 */
+.table-card {
+  margin-top: 16px;
+  border-radius: 8px;
+}
+
+.table-card--no-top {
+  margin-top: 0;
+}
+
+.table-total {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.trajectory-table {
+  width: 100%;
+  font-size: 13px;
+  border-collapse: collapse;
+}
+
+.trajectory-table th {
+  padding: 10px 12px;
+  font-weight: 500;
+  color: #595959;
+  text-align: left;
+  white-space: nowrap;
+  background: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.trajectory-table td {
+  padding: 10px 12px;
+  color: #262626;
+  border-bottom: 1px solid #f5f5f5;
+  transition: background-color 0.3s;
+}
+
+.trajectory-table tr:hover td {
+  background-color: #fafafa;
+}
+
+.cell-center {
+  text-align: center;
+}
+
+.table-empty {
+  padding: 32px !important;
+  text-align: center;
+}
+
+.row-highlight td {
+  background-color: #e6f4ff !important;
+  transition: background-color 0.3s;
+}
+
+.duration-warn {
+  font-weight: 500;
+  color: #fa8c16;
+}
+
+/* 分页 */
+.table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0 4px;
+}
+
+.pagination-info {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.pagination-buttons {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.page-num {
+  min-width: 24px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #262626;
+  text-align: center;
+}
+</style>
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
new file mode 100644
index 000000000..530a6ad20
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/modules/area-stay-chart.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { OpsTrajectoryApi } from '#/api/ops/trajectory';
+
+import { computed, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Empty } from 'ant-design-vue';
+
+import { formatDuration } from '../data';
+
+const props = defineProps<{
+  records: OpsTrajectoryApi.TrajectoryRecord[];
+}>();
+
+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);
+});
+
+function getChartOptions(): any {
+  const data = areaStayData.value;
+  if (data.length === 0) return {};
+
+  const areaNames = data.map((d) => d.areaName).toReversed();
+  const stayMinutes = data
+    .map((d) => Math.round(d.totalStay / 60))
+    .toReversed();
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter(params: any) {
+        const item = params[0];
+        const idx = data.length - 1 - item.dataIndex;
+        const d = data[idx];
+        if (!d) return '';
+        return `${d.areaName}<br/>停留: ${formatDuration(d.totalStay)}<br/>进出: ${d.visitCount} 次`;
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '10%',
+      bottom: '3%',
+      top: '8%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      name: '分钟',
+      nameTextStyle: { color: '#8c8c8c', fontSize: 11 },
+      axisLabel: { color: '#8c8c8c' },
+      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
+    },
+    yAxis: {
+      type: 'category',
+      data: areaNames,
+      axisLabel: {
+        color: '#595959',
+        fontSize: 11,
+        width: 100,
+        overflow: 'truncate',
+      },
+      axisLine: { show: false },
+      axisTick: { show: false },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: stayMinutes,
+        barMaxWidth: 20,
+        itemStyle: {
+          borderRadius: [0, 4, 4, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: '#597ef7' },
+              { offset: 1, color: '#85a5ff' },
+            ],
+          },
+        },
+        label: {
+          show: true,
+          position: 'right',
+          color: '#8c8c8c',
+          fontSize: 11,
+          formatter: '{c}m',
+        },
+      },
+    ],
+  };
+}
+
+watch(
+  () => props.records,
+  () => {
+    if (areaStayData.value.length > 0) {
+      renderEcharts(getChartOptions());
+    }
+  },
+  { immediate: true, deep: true },
+);
+</script>
+
+<template>
+  <div class="area-stay-chart">
+    <div class="chart-title">区域停留分布</div>
+    <div v-if="areaStayData.length === 0" 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%"
+    />
+  </div>
+</template>
+
+<style scoped>
+.area-stay-chart {
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.chart-title {
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+</style>
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
new file mode 100644
index 000000000..d4ca0362f
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/modules/badge-status-card.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import type { OpsCleaningApi } from '#/api/ops/cleaning';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+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 'dayjs/locale/zh-cn';
+
+const props = defineProps<{
+  data: null | OpsCleaningApi.BadgeRealtimeStatus;
+  loading?: boolean;
+}>();
+dayjs.extend(relativeTime);
+dayjs.locale('zh-cn');
+
+const statusInfo = computed(() => {
+  const s = props.data?.status?.toUpperCase() ?? 'OFFLINE';
+  return BADGE_STATUS_MAP[s] ?? BADGE_STATUS_MAP.OFFLINE;
+});
+
+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();
+});
+</script>
+
+<template>
+  <div class="badge-status-card">
+    <div class="card-header">
+      <IconifyIcon
+        icon="solar:user-id-bold-duotone"
+        :style="{ color: '#fa8c16', fontSize: '20px' }"
+      />
+      <span class="card-title">工牌状态</span>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-if="!data" class="empty-state">
+      <span class="empty-text">请选择工牌设备</span>
+    </div>
+
+    <template v-else>
+      <!-- 在线状态 -->
+      <div class="status-row">
+        <span class="label">设备状态</span>
+        <Tag :color="statusInfo?.color">
+          <span
+            class="status-dot"
+            :class="{ 'status-dot--pulse': statusInfo?.label === '作业中' }"
+            :style="{ backgroundColor: statusInfo?.color }"
+          ></span>
+          {{ statusInfo?.label }}
+        </Tag>
+      </div>
+
+      <!-- 设备编码 -->
+      <div class="status-row">
+        <span class="label">设备编码</span>
+        <span class="value mono">{{ data.deviceKey || '-' }}</span>
+      </div>
+
+      <!-- 电量 -->
+      <div class="status-row">
+        <span class="label">
+          <IconifyIcon
+            :icon="batteryInfo.icon"
+            :style="{ color: batteryInfo.color }"
+          />
+          电量
+        </span>
+        <div class="battery-bar">
+          <Progress
+            :percent="data.batteryLevel ?? 0"
+            :show-info="true"
+            size="small"
+            :stroke-color="batteryInfo.color"
+          />
+        </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>
+        <span class="value">
+          {{ data.isInArea ? data.areaName || '未知区域' : '区域外' }}
+        </span>
+      </div>
+
+      <!-- 最后心跳 -->
+      <div class="status-row">
+        <span class="label">最后心跳</span>
+        <Tooltip :title="data.lastHeartbeatTime">
+          <span class="value muted">{{ relativeHeartbeat }}</span>
+        </Tooltip>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.badge-status-card {
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.card-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+}
+
+.label {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  font-size: 13px;
+  color: #8c8c8c;
+}
+
+.value {
+  font-size: 13px;
+  color: #262626;
+}
+
+.value.mono {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  color: #595959;
+}
+
+.value.muted {
+  color: #8c8c8c;
+}
+
+.battery-bar {
+  flex: 0 0 120px;
+}
+
+.status-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 4px;
+  vertical-align: middle;
+  border-radius: 50%;
+}
+
+.status-dot--pulse {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+}
+
+.empty-text {
+  font-size: 13px;
+  color: #bfbfbf;
+}
+</style>
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
new file mode 100644
index 000000000..6d464eb93
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/modules/stats-cards.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { OpsTrajectoryApi } from '#/api/ops/trajectory';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Skeleton } from 'ant-design-vue';
+
+import { formatDuration } from '../data';
+
+const props = defineProps<{
+  currentLocation?: null | OpsTrajectoryApi.CurrentLocation;
+  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),
+    suffix: '',
+    icon: 'solar:clock-circle-bold-duotone',
+    color: '#722ed1',
+    bgColor: '#f9f0ff',
+  },
+  {
+    title: '当前所在区域',
+    value: props.currentLocation?.inArea
+      ? props.currentLocation.areaName || '未知区域'
+      : '已离开',
+    suffix: '',
+    icon: 'solar:buildings-bold-duotone',
+    color: '#fa8c16',
+    bgColor: '#fff7e6',
+  },
+]);
+</script>
+
+<template>
+  <div class="stats-cards">
+    <div v-for="(card, index) in cards" :key="index" class="stat-card">
+      <Skeleton :loading="loading" active :paragraph="{ rows: 1 }">
+        <div class="stat-card-inner">
+          <div class="stat-icon" :style="{ backgroundColor: card.bgColor }">
+            <IconifyIcon
+              :icon="card.icon"
+              :style="{ color: card.color, fontSize: '22px' }"
+            />
+          </div>
+          <div class="stat-content">
+            <div class="stat-title">{{ card.title }}</div>
+            <div class="stat-value" :style="{ color: card.color }">
+              {{ card.value }}
+              <span v-if="card.suffix" class="stat-suffix">{{
+                card.suffix
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </Skeleton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+.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 {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.stat-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+}
+
+.stat-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.stat-title {
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.stat-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.stat-suffix {
+  margin-left: 2px;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+@media (max-width: 1200px) {
+  .stats-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-cards {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/trajectory/modules/trajectory-timeline.vue b/apps/web-antd/src/views/ops/trajectory/modules/trajectory-timeline.vue
new file mode 100644
index 000000000..1e8c43bd3
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/modules/trajectory-timeline.vue
@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import type { OpsTrajectoryApi } from '#/api/ops/trajectory';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import { Empty, Timeline, Tooltip } from 'ant-design-vue';
+
+import { formatDuration } from '../data';
+
+const props = defineProps<{
+  currentLocation?: null | OpsTrajectoryApi.CurrentLocation;
+  records: OpsTrajectoryApi.TrajectoryRecord[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', record: OpsTrajectoryApi.TrajectoryRecord): void;
+}>();
+
+/** 构建时间线节点列表 */
+const timelineItems = computed(() => {
+  const items: Array<{
+    areaName: string;
+    color: string;
+    enterTime: string;
+    isCurrent: boolean;
+    leaveTime?: string;
+    record: OpsTrajectoryApi.TrajectoryRecord;
+    stayDuration?: number;
+    type: 'enter' | 'stay';
+  }> = [];
+
+  for (const record of props.records) {
+    items.push({
+      type: 'enter',
+      color: record.leaveTime ? '#52c41a' : '#1677ff',
+      areaName: record.areaName,
+      enterTime: record.enterTime,
+      leaveTime: record.leaveTime,
+      stayDuration: record.durationSeconds,
+      isCurrent: !record.leaveTime,
+      record,
+    });
+  }
+
+  return items;
+});
+</script>
+
+<template>
+  <div class="trajectory-timeline">
+    <div class="card-header">
+      <IconifyIcon
+        icon="solar:route-bold-duotone"
+        :style="{ color: '#1677ff', fontSize: '20px' }"
+      />
+      <span class="card-title">今日足迹</span>
+      <span class="record-count">{{ records.length }} 条</span>
+    </div>
+
+    <div v-if="records.length === 0" class="empty-wrap">
+      <Empty description="暂无出入记录" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+    </div>
+
+    <div v-else class="timeline-scroll">
+      <Timeline>
+        <Timeline.Item
+          v-for="(item, index) in timelineItems"
+          :key="index"
+          :color="item.color"
+        >
+          <!-- 当前位置脉冲点 -->
+          <template v-if="item.isCurrent" #dot>
+            <span class="current-dot"></span>
+          </template>
+
+          <div
+            class="timeline-node"
+            :class="{ 'timeline-node--current': item.isCurrent }"
+            @click="emit('select', item.record)"
+          >
+            <!-- 区域名称 -->
+            <div class="node-area">
+              <span class="area-name">{{ item.areaName }}</span>
+              <span v-if="item.isCurrent" class="current-tag">当前</span>
+            </div>
+
+            <!-- 时间信息 -->
+            <div class="node-time">
+              <Tooltip :title="formatDateTime(item.enterTime)">
+                <span class="time-text">
+                  {{ formatDateTime(item.enterTime)?.slice(11, 16) }}
+                  进入
+                </span>
+              </Tooltip>
+              <template v-if="item.leaveTime">
+                <span class="time-sep">→</span>
+                <Tooltip :title="formatDateTime(item.leaveTime)">
+                  <span class="time-text">
+                    {{ formatDateTime(item.leaveTime)?.slice(11, 16) }}
+                    离开
+                  </span>
+                </Tooltip>
+              </template>
+            </div>
+
+            <!-- 停留时长 -->
+            <div v-if="item.stayDuration" class="node-duration">
+              <IconifyIcon
+                icon="solar:clock-circle-line-duotone"
+                :style="{ fontSize: '12px', color: '#8c8c8c' }"
+              />
+              <span
+                class="duration-text"
+                :class="{
+                  'duration-text--warn': (item.stayDuration ?? 0) > 3600,
+                }"
+              >
+                停留 {{ formatDuration(item.stayDuration) }}
+              </span>
+            </div>
+            <div v-else-if="item.isCurrent" class="node-duration">
+              <span class="duration-text" style="color: #1677ff">
+                停留中...
+              </span>
+            </div>
+          </div>
+        </Timeline.Item>
+      </Timeline>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.trajectory-timeline {
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.card-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.card-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.record-count {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.timeline-scroll {
+  max-height: 480px;
+  padding-right: 4px;
+  overflow-y: auto;
+}
+
+.timeline-node {
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.2s;
+}
+
+.timeline-node:hover {
+  background-color: #f5f5f5;
+}
+
+.timeline-node--current {
+  background-color: #e6f4ff;
+}
+
+.timeline-node--current:hover {
+  background-color: #bae0ff;
+}
+
+.node-area {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 2px;
+}
+
+.area-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.current-tag {
+  padding: 0 4px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #fff;
+  background: #1677ff;
+  border-radius: 3px;
+}
+
+.node-time {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.time-text {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.time-sep {
+  font-size: 11px;
+  color: #d9d9d9;
+}
+
+.node-duration {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.duration-text {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.duration-text--warn {
+  font-weight: 500;
+  color: #fa8c16;
+}
+
+.current-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background-color: #1677ff;
+  border-radius: 50%;
+  animation: pulse-dot 2s infinite;
+}
+
+@keyframes pulse-dot {
+  0% {
+    box-shadow: 0 0 0 0 rgb(22 119 255 / 40%);
+  }
+
+  70% {
+    box-shadow: 0 0 0 8px rgb(22 119 255 / 0%);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgb(22 119 255 / 0%);
+  }
+}
+
+.empty-wrap {
+  padding: 24px 0;
+}
+</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
new file mode 100644
index 000000000..ac1940132
--- /dev/null
+++ b/apps/web-antd/src/views/ops/trajectory/modules/trend-chart.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import type { OpsTrajectoryApi } from '#/api/ops/trajectory';
+
+import { computed, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Empty } from 'ant-design-vue';
+
+const props = defineProps<{
+  records: OpsTrajectoryApi.TrajectoryRecord[];
+}>();
+
+const chartRef = ref();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 按小时聚合进出次数 */
+const hourlyData = computed(() => {
+  const hours: string[] = [];
+  const enterCounts: number[] = [];
+  const leaveCounts: number[] = [];
+
+  // 生成 0-23 小时
+  for (let i = 0; i < 24; i++) {
+    hours.push(`${String(i).padStart(2, '0')}:00`);
+    enterCounts.push(0);
+    leaveCounts.push(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: {
+      data: ['进入', '离开'],
+      top: '5%',
+      textStyle: { color: '#595959', fontSize: 11 },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '18%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: hours,
+      axisLine: { lineStyle: { color: '#d9d9d9' } },
+      axisLabel: {
+        color: '#8c8c8c',
+        fontSize: 11,
+        interval: 1,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: '次数',
+      minInterval: 1,
+      nameTextStyle: { color: '#8c8c8c', fontSize: 12 },
+      axisLine: { show: false },
+      axisLabel: { color: '#8c8c8c' },
+      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
+    },
+    series: [
+      {
+        name: '进入',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        data: enterCounts,
+        lineStyle: { width: 2.5, color: '#52c41a' },
+        itemStyle: { color: '#52c41a' },
+        areaStyle: {
+          opacity: 0.12,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
+              { offset: 1, color: 'rgba(82, 196, 26, 0.02)' },
+            ],
+          },
+        },
+      },
+      {
+        name: '离开',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        data: leaveCounts,
+        lineStyle: { width: 2.5, color: '#ff4d4f' },
+        itemStyle: { color: '#ff4d4f' },
+        areaStyle: {
+          opacity: 0.12,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(255, 77, 79, 0.3)' },
+              { offset: 1, color: 'rgba(255, 77, 79, 0.02)' },
+            ],
+          },
+        },
+      },
+    ],
+  };
+}
+
+watch(
+  () => props.records,
+  () => {
+    if (hasData.value) {
+      renderEcharts(getChartOptions());
+    }
+  },
+  { immediate: true, deep: true },
+);
+</script>
+
+<template>
+  <div class="trend-chart">
+    <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%" />
+  </div>
+</template>
+
+<style scoped>
+.trend-chart {
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+}
+
+.chart-title {
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+</style>