# 告警中心页面

> 最后更新：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 | left |
| 机床 | - | - | - | - | tooltip | center |
| 详情 | - | - | - | - | tooltip | left |
| 处理状态 | - | - | - | - | - | 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 | 查询条件 |