文档:告警数据看板设计方案
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
58
docs/plans/2026-03-18-alarm-dashboard-design.md
Normal file
58
docs/plans/2026-03-18-alarm-dashboard-design.md
Normal file
@@ -0,0 +1,58 @@
|
||||
# 告警数据看板设计方案
|
||||
|
||||
## 概述
|
||||
|
||||
替换现有「摄像头告警汇总」页面(`/aiot/alarm/summary`),改为运营监控型数据看板,展示告警趋势、类型分布、设备排行等多维度分析图表。
|
||||
|
||||
## 布局
|
||||
|
||||
```
|
||||
┌─────────┬─────────┬─────────┬─────────┬─────────┐
|
||||
│ 今日告警 │ 待处理 │ 已处理 │ 平均响应 │ 在线设备 │
|
||||
│ 128 ▲ │ 23 │ 95 │ 12min │ 8/10 │
|
||||
│ 较昨+15% │ │ │ │ │
|
||||
└─────────┴─────────┴─────────┴─────────┴─────────┘
|
||||
┌──────────────────────────┬──────────────────────┐
|
||||
│ 告警趋势(面积折线图) │ 告警类型分布(环形图) │
|
||||
│ 近7天/30天 切换 │ 离岗/入侵/违停/拥堵 │
|
||||
│ 按类型堆叠 │ 中心显示总数 │
|
||||
├──────────────────────────┼──────────────────────┤
|
||||
│ 设备告警 Top10(横向条形) │ 告警级别分布(柱状图) │
|
||||
│ 摄像头名称 + 数量 │ 紧急/重要/普通/轻微 │
|
||||
│ │ + 处理状态堆叠 │
|
||||
├──────────────────────────┼──────────────────────┤
|
||||
│ 24h 时段分布(柱状图) │ 最近告警(滚动列表) │
|
||||
│ 每小时告警数量 │ 最新 10 条告警 │
|
||||
│ 高亮高峰时段 │ 类型+设备+时间+状态 │
|
||||
└──────────────────────────┴──────────────────────┘
|
||||
```
|
||||
|
||||
## 后端接口
|
||||
|
||||
### 新增接口
|
||||
|
||||
| 接口 | 方法 | 路径 | 参数 | 返回 |
|
||||
|------|------|------|------|------|
|
||||
| 告警趋势 | GET | `/admin-api/aiot/alarm/alert/trend` | `days=7\|30` | `{code,data:[{date,total,leave_post,intrusion,illegal_parking,vehicle_congestion}]}` |
|
||||
| 设备 Top | GET | `/admin-api/aiot/alarm/alert/device-top` | `limit=10,days=7` | `{code,data:[{deviceId,deviceName,count}]}` |
|
||||
| 时段分布 | GET | `/admin-api/aiot/alarm/alert/hour-distribution` | `days=7` | `{code,data:[{hour:0-23,count}]}` |
|
||||
|
||||
### 扩展现有接口
|
||||
|
||||
`GET /admin-api/aiot/alarm/alert/statistics` 增加字段:
|
||||
- `yesterdayCount`: 昨日告警数(计算同比)
|
||||
- `avgResponseMinutes`: 平均响应时间(分钟)
|
||||
|
||||
## 前端技术
|
||||
|
||||
- 图表:ECharts 6.0 + useEcharts composable
|
||||
- 布局:Ant Design Vue Row/Col
|
||||
- KPI 卡片:自定义 StatCard 组件
|
||||
- 最近告警:Ant Design List
|
||||
- 自动刷新:60 秒轮询
|
||||
|
||||
## 前端文件
|
||||
|
||||
- `views/aiot/alarm/summary/index.vue` — 主页面(替换原有)
|
||||
- `views/aiot/alarm/summary/chart-options.ts` — ECharts 配置
|
||||
- `api/aiot/alarm/index.ts` — 新增 API 方法
|
||||
Reference in New Issue
Block a user