文档:告警数据看板设计方案

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-18 17:01:09 +08:00
parent b1dd75e7c8
commit 3b64db7029

View 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 方法