|
@@ -0,0 +1,104 @@
|
|
|
|
|
+# 监控仪表盘 — 设计文档
|
|
|
|
|
+
|
|
|
|
|
+> 日期：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 异常 | 保留上次数据，不刷新；卡片显示 "--" |
|
