|
|
# 告警中心页面
|
|
|
|
|
|
> 最后更新：2026-04-26
|
|
|
> 状态：已设计
|
|
|
|
|
|
---
|
|
|
|
|
|
### 1. 基本信息
|
|
|
|
|
|
| 项 | 值 |
|
|
|
|----|-----|
|
|
|
| 路由 | /alert |
|
|
|
| 权限 | admin |
|
|
|
| 入口 | 侧边栏告警中心 |
|
|
|
| 面包屑 | 首页 / 告警中心 |
|
|
|
|
|
|
### 2. 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 首页 / 告警中心 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [查询条件区] │
|
|
|
│ 告警类型[▼全部] 处理状态[▼未处理] 时间范围[__________] │
|
|
|
│ 机床[▼全部] 关键字[___________] [查询] [重置] │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [统计区] │
|
|
|
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
│ │未处理 │ │采集失败│ │设备离线│ │产量异常│ │未知设备│ │
|
|
|
│ │ 15 │ │ 5 │ │ 6 │ │ 2 │ │ 2 │ │
|
|
|
│ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [操作栏] [批量标记已处理] │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [列表区] │
|
|
|
│ [x] | 时间 | 类型 | 标题 | 机床 | 详情 | 状态 | 操作 │
|
|
|
│ [x] | 2026-04-25 17:30 | 采集失败 | 采集请求失败 | 西-1.8 | HTTP超时(30s) | 未处理 | [标记已处理] │
|
|
|
│ [x] | 2026-04-25 17:00 | 设备离线 | 设备离线 | 东-2.5 | 连续3次Ping失败 | 未处理 | [标记已处理] │
|
|
|
│ [x] | 2026-04-25 16:00 | 产量异常 | 产量骤降 | 南-3.1 | 产量下降>50% | 已处理 | [查看] │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [分页] 共320条 每页[20▼] < 1 2 3 ... 16 > │
|
|
|
└──────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
### 3. 查询条件
|
|
|
|
|
|
| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|
|
|
|------|------|------|--------|------|------|
|
|
|
| 告警类型 | el-select(采集失败/设备离线/产量异常/未知设备/服务错误/全部) | 否 | 全部 | - | 无 |
|
|
|
| 处理状态 | el-select(未处理/已处理/全部) | 否 | 未处理 | - | 无 |
|
|
|
| 时间范围 | el-date-picker type=daterange | 否 | 空 | - | 无 |
|
|
|
| 机床 | el-select filterable | 否 | 全部 | - | 无 |
|
|
|
| 关键字 | el-input placeholder=标题/详情 | 否 | 空 | - | 无 |
|
|
|
|
|
|
### 4. 列表字段
|
|
|
|
|
|
| 字段名 | 列宽 | 排序 | 筛选 | 固定 | 超长处理 | 对齐 |
|
|
|
|--------|------|------|------|------|---------|------|
|
|
|
| 选择框 | 50 | - | - | left | - | center |
|
|
|
| 告警时间 | - | y | - | - | - | center |
|
|
|
| 告警类型 | - | - | - | - | - | center |
|
|
|
| 标题 | - | - | - | - | tooltip | center |
|
|
|
| 机床 | - | - | - | - | tooltip | center |
|
|
|
| 详情 | - | - | - | - | tooltip | center |
|
|
|
| 处理状态 | - | - | - | - | - | center |
|
|
|
| 操作 | 120 | - | - | right | - | center |
|
|
|
|
|
|
> 列宽规则见 `02-前端全局规范.md` el-table列宽均分规则：选择框固定50，数据列不设width自动均分，操作列固定120。
|
|
|
|
|
|
### 5. 操作按钮
|
|
|
|
|
|
| 名称 | 权限编码 | 位置 | 显示条件 | 点击行为 |
|
|
|
|------|---------|------|---------|---------|
|
|
|
| 批量标记已处理 | alert:resolve | 页头 | 已选含未处理项 | 确认->批量标记 |
|
|
|
| 标记已处理 | alert:resolve | 行操作 | is_resolved=0 | 确认->标记已处理 |
|
|
|
| 查看 | - | 行操作 | is_resolved=1 | 弹窗展示详情(只读) |
|
|
|
|
|
|
### 6. 弹窗规格
|
|
|
|
|
|
**告警详情弹窗（只读）：**
|
|
|
- 宽度600px，标题=告警详情
|
|
|
|
|
|
| 展示字段 | 说明 |
|
|
|
|---------|------|
|
|
|
| 告警时间 | created_at |
|
|
|
| 告警类型 | alert_type |
|
|
|
| 标题 | title |
|
|
|
| 机床 | 关联机床名 |
|
|
|
| 采集地址 | 关联采集地址名 |
|
|
|
| 详情 | detail（完整文本） |
|
|
|
| 处理状态 | is_resolved |
|
|
|
| 处理时间 | resolved_at |
|
|
|
|
|
|
### 7. 状态机
|
|
|
|
|
|
告警类型(alert_type)：
|
|
|
- collect_fail(采集失败): el-tag warning
|
|
|
- device_offline(设备离线): el-tag danger
|
|
|
- production_anomaly(产量异常): el-tag warning
|
|
|
- unknown_device(未知设备): el-tag info
|
|
|
- service_error(服务错误): el-tag danger
|
|
|
|
|
|
处理状态(is_resolved)：
|
|
|
- 0(未处理): el-tag danger -> 可标记已处理
|
|
|
- 1(已处理): el-tag success -> 只读查看
|
|
|
|
|
|
### 8. 交互流程
|
|
|
|
|
|
- 加载：默认查未处理告警->请求列表API+统计API->渲染
|
|
|
- 查询：选条件->查询->重置page=1->请求列表+统计
|
|
|
- 重置：清空条件(恢复默认"未处理")->请求
|
|
|
- 标记已处理：确认"确定标记为已处理？ "->调API->刷新列表+统计
|
|
|
- 批量标记：勾选未处理告警->点批量标记->确认"确定对选中的{N}项标记为已处理？ "->调API->刷新
|
|
|
- 查看详情：弹窗(只读)->关闭
|
|
|
|
|
|
### 9. 空状态
|
|
|
|
|
|
列表无数据：el-empty 暂无告警数据
|
|
|
统计区：各类型计数为0时显示0
|
|
|
|
|
|
### 10. 接口引用与数据结构
|
|
|
|
|
|
> Mock/正式API的URL、HTTP方法均定义在 `03-API接口设计.md` §3.8 端点清单，本节仅引用编号并定义返回数据结构。
|
|
|
|
|
|
#### 接口引用
|
|
|
|
|
|
| 接口名称 | 端点编号 | 界面用途 |
|
|
|
|---------|---------|---------|
|
|
|
| 告警统计 | §3.8 #1 | 顶部按类型统计卡片 |
|
|
|
| 告警列表 | §3.8 #2 | 表格数据，分页渲染 |
|
|
|
| 处理单条告警 | §3.8 #3 | 行操作"处理"按钮 |
|
|
|
| 批量处理告警 | §3.8 #4 | 批量处理按钮 |
|
|
|
| 机床下拉 | §3.13 #3 | 查询条件下拉 |
|
|
|
|
|
|
#### 数据结构
|
|
|
|
|
|
**告警统计（§3.8 #1）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "unresolved": 15, "collectFail": 5, "deviceOffline": 6, "productionAnomaly": 2, "unknownDevice": 2, "serviceError": 0 }}
|
|
|
```
|
|
|
|
|
|
**告警列表（§3.8 #2）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "id": 1, "createdAt": "2026-04-25T17:30:00", "alertType": "collect_fail", "title": "采集请求失败", "machineName": "西-1.8", "detail": "HTTP超时(30s)，连续失败3次", "isResolved": 0, "resolvedAt": null },
|
|
|
{ "id": 2, "createdAt": "2026-04-25T17:00:00", "alertType": "device_offline", "title": "设备离线", "machineName": "东-2.5", "detail": "连续3次Ping失败，IP:10.1.2.5", "isResolved": 0, "resolvedAt": null },
|
|
|
{ "id": 3, "createdAt": "2026-04-25T16:00:00", "alertType": "production_anomaly", "title": "产量骤降", "machineName": "南-3.1", "detail": "近1小时产量较前1小时下降>50%", "isResolved": 1, "resolvedAt": "2026-04-25T16:30:00" },
|
|
|
{ "id": 4, "createdAt": "2026-04-25T15:00:00", "alertType": "unknown_device", "title": "未知设备接入", "machineName": null, "detail": "采集地址FANUC-A栋返回未注册设备: fanake_9.9", "isResolved": 0, "resolvedAt": null }
|
|
|
], "total": 320, "page": 1, "pageSize": 20 }}
|
|
|
```
|
|
|
|
|
|
**处理单条告警（§3.8 #3）/ 批量处理告警（§3.8 #4）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "message": "success", "data": null }
|
|
|
```
|
|
|
|
|
|
### 11. 数据需求
|
|
|
|
|
|
> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。
|
|
|
|
|
|
| 数据需求 | 草案对应 | 说明 |
|
|
|
|---------|---------|------|
|
|
|
| 告警列表(含分页) | cnc_alert | 主表，需JOIN机床名 |
|
|
|
| 告警统计(按类型) | cnc_alert | GROUP BY alert_type, is_resolved |
|
|
|
| 标记已处理 | cnc_alert.is_resolved/resolved_at | 批量更新 |
|
|
|
| 机床下拉 | cnc_machine | 查询条件 |
|