iot-device-management-service/docs/plans/2026-03-18-alarm-dashboard-design.md

告警数据看板设计方案

概述

替换现有「摄像头告警汇总」页面（/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 方法