lc_garage/docs/superpowers/specs/2026-07-20-monitor-dashboard-design.md

监控仪表盘 — 设计文档

日期：2026-07-20 | 优先级：P2

1. 目标

升级现有仪表盘为停车监控大屏。登录后首页展示车位余量、在场车辆、今日收入、今日进出等关键指标，以及通道设备在线状态。

2. 页面布局

┌─────────────────────────────────────────────────────┐
│  智慧停车监控                      2026-07-20 10:30  │
├──────────┬──────────┬──────────┬────────────────────┤
│ 车位余量  │ 在场车辆  │ 今日收入  │ 今日进出           │
│   48/50  │    15    │ ¥1,250  │  进32 出28         │
├──────────┴──────────┴──────────┴────────────────────┤
│  设备状态                                           │
│  ┌─────────────────────────────────────────────────┐│
│  │ ● 入口通道 1  设备1 [在线]  │ ● 出口通道 1  ... ││
│  └─────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────┘

• 顶部标题 + 当前时间
• 四个统计卡片（el-row + el-col）
• 底部设备状态条（横向排列所有通道及其绑定设备）

3. API 设计

GET /dashboard/monitor

{
  "total_spaces": 50,
  "used_spaces": 15,
  "in_park": 12,
  "today_income": 1250.00,
  "today_entry": 32,
  "today_exit": 28,
  "devices": [
    {
      "channel_name": "入口通道1",
      "direction": "in",
      "device_name": "入口设备1",
      "device_status": "online"
    }
  ]
}

数据来源： | 字段 | SQL | |------|-----| | total_spaces | SUM(parking_lot.capacity) | | used_spaces | total - COUNT(record WHERE exit_time IS NULL) | | in_park | COUNT(vehicle_record WHERE exit_time IS NULL) | | today_income | SUM(payment_record.amount WHERE today) | | today_entry | COUNT(vehicle_record WHERE entry_time >= today) | | today_exit | COUNT(vehicle_record WHERE exit_time >= today) | | devices | channel LEFT JOIN uhf_reader |

4. 前端实现

文件变更

文件	操作	说明
frontend/src/view/dashboard/index.vue	修改	替换现有仪表盘内容
frontend/src/api/dashboard.js	修改/新增	加 getMonitor API

刷新策略

• setInterval 10 秒轮询 GET /dashboard/monitor
• 组件 onUnmounted 清除定时器

复用

• 使用 Element Plus el-statistic 组件（已在收费记录页用过，项目已有此组件）

5. 后端实现

文件变更

文件	操作	说明
internal/api/v1/system/sys_dashboard.go	新增/修改	GetMonitor handler
internal/service/system/sys_dashboard.go	新增/修改	MonitorData service
internal/router/system/sys_dashboard.go	修改	注册路由

放在 system 模块下（与现有仪表盘接口同位置）。

6. 菜单

不新增菜单，直接替换现有仪表盘页面（view/dashboard/index.vue）。原路由 /dashboard 不变。

7. 边界情况

场景	处理
无车辆在场	used_spaces 和 in_park 显示 0
设备全部离线	设备卡片标红，数字卡片正常显示
无停车场数据	total_spaces = 0，显示"未配置"
API 异常	保留上次数据，不刷新；卡片显示 "--"