59 lines
3.1 KiB
Markdown
59 lines
3.1 KiB
Markdown
# 告警数据看板设计方案
|
||
|
||
## 概述
|
||
|
||
替换现有「摄像头告警汇总」页面（`/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 方法
|