jcl
/
haoliang-net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
feat/windows-service-status-auto
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd8f59250d7'
${ noResults }
haoliang-net/docs/02-功能清单/管理后台/08-告警中心/08-01-告警中心页面.md

8.4 KiB
Raw Blame History Unescape Escape

告警中心页面

最后更新：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：

{ "code": 0, "data": { "unresolved": 15, "collectFail": 5, "deviceOffline": 6, "productionAnomaly": 2, "unknownDevice": 2, "serviceError": 0 }}

告警列表（§3.8 #2）：

Response：

{ "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：

{ "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 查询条件