# 监控仪表盘 — 设计文档

> 日期：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`

```json
{
  "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 异常 | 保留上次数据，不刷新；卡片显示 "--" |