# 告警记录详情弹窗 - 快速测试指南

## 🚀 快速测试步骤

### 第一步：进入页面
1. 登录系统
2. 点击顶部导航栏的"智慧灌溉"
3. 在左侧菜单选择"实时监测与预警"
4. 点击"阈值预警与告警"标签页

---

### 第二步：查看待处理告警详情

#### 操作步骤
1. 在"实时告警记录"区域找到状态为"待处理"的告警
2. 点击该告警卡片右侧的"👁️ 查看"按钮
3. 弹出告警详情对话框

#### 预期效果
```
✓ 弹窗标题："🔔 告警记录详情"
✓ 显示告警级别徽章（蓝色/橙色/红色）
✓ 显示"待处理"状态徽章（黄色）
✓ 显示规则名称
✓ 显示告警消息（完整内容）
✓ 显示触发时间（带时钟图标）
✓ 显示推送渠道（短信/邮件/站内信）
✓ 显示黄色提示卡片："该告警尚未处理"
✓ 显示蓝色处理建议卡片
✓ 底部按钮：[关闭] [开始处理]
```

#### 测试数据示例
- **告警ID**: alert-3
- **规则名称**: 电池电压低预警
- **级别**: 提示（蓝色）
- **状态**: 待处理（黄色）
- **消息**: V-04阀门电池电压10.5V，已接近下限，请及时充电或更换电池
- **触发时间**: 2024-10-15 17:10:00
- **推送渠道**: 站内信

---

### 第三步：开始处理告警

#### 操作步骤
1. 在告警详情弹窗中，点击"开始处理"按钮

#### 预期效果
```
✓ 弹窗自动关闭
✓ 显示成功提示："告警状态已更新为：处理中"
✓ 告警记录列表中，该告警状态变为"处理中"（蓝色）
✓ 处理人显示为"当前用户"
```

---

### 第四步：查看处理中告警详情

#### 操作步骤
1. 找到状态为"处理中"的告警
2. 点击"👁️ 查看"按钮

#### 预期效果
```
✓ 显示"处理中"状态徽章（蓝色）
✓ 显示绿色"处理信息"卡片
✓ 处理人：👤 李四（或当前用户）
✓ 底部按钮：[关闭] [标记已处理]
```

#### 测试数据示例
- **告警ID**: alert-2
- **规则名称**: EC值异常预警
- **级别**: 严重（红色）
- **状态**: 处理中（蓝色）
- **处理人**: 李四

---

### 第五步：完成告警处理

#### 操作步骤
1. 在处理中的告警详情弹窗中，点击"标记已处理"按钮

#### 预期效果
```
✓ 弹窗自动关闭
✓ 显示成功提示："告警状态已更新为：已处理"
✓ 告警记录列表中，该告警状态变为"已处理"（绿色）
✓ 处理时间自动记录
```

---

### 第六步：查看已处理告警详情

#### 操作步骤
1. 找到状态为"已处理"的告警
2. 点击"👁️ 查看"按钮

#### 预期效果
```
✓ 显示"已处理"状态徽章（绿色）
✓ 显示绿色"处理信息"卡片
✓ 处理人：👤 张三
✓ 处理时间：🕐 2024-10-15 14:35:00
✓ 底部仅显示：[关闭] 按钮
```

#### 测试数据示例
- **告警ID**: alert-1
- **规则名称**: 土壤湿度持续低位预警
- **级别**: 警告（橙色）
- **状态**: 已处理（绿色）
- **处理人**: 张三
- **处理时间**: 2024-10-15 14:35:00

---

## 🎯 重点测试项

### 1. 告警级别颜色测试

| 级别 | 颜色 | 测试告警 | 状态 |
|------|------|----------|------|
| 提示 | 🔵 蓝色 | 电池电压低预警 | ✓ |
| 警告 | 🟠 橙色 | 土壤湿度持续低位预警 | ✓ |
| 严重 | 🔴 红色 | EC值异常预警 | ✓ |

---

### 2. 处理状态颜色测试

| 状态 | 颜色 | 操作按钮 | 状态 |
|------|------|----------|------|
| 待处理 | 🟡 黄色 | [关闭] [开始处理] | ✓ |
| 处理中 | 🔵 蓝色 | [关闭] [标记已处理] | ✓ |
| 已处理 | 🟢 绿色 | [关闭] | ✓ |

---

### 3. 信息完整性测试

- [ ] 告警消息完整显示
- [ ] 触发时间格式正确
- [ ] 推送渠道标签正确
- [ ] 处理人信息显示（处理中/已处理）
- [ ] 处理时间显示（已处理）
- [ ] 处理建议卡片显示
- [ ] 待处理提示卡片显示（待处理状态）

---

### 4. 状态流转测试

```
待处理 → [开始处理] → 处理中 → [标记已处理] → 已处理
   ✓                    ✓                      ✓
```

**测试步骤：**
1. 打开待处理告警详情 → 点击"开始处理"
2. 打开处理中告警详情 → 点击"标记已处理"
3. 打开已处理告警详情 → 只能查看，无法修改

---

### 5. 弹窗交互测试

- [ ] 点击查看按钮弹出弹窗
- [ ] 点击关闭按钮关闭弹窗
- [ ] 点击遮罩层可关闭弹窗
- [ ] 点击X按钮可关闭弹窗
- [ ] 点击操作按钮后弹窗自动关闭

---

## ✅ 验收标准

### 界面要求
- ✅ 弹窗宽度适中（max-w-2xl）
- ✅ 颜色分级清晰明确
- ✅ 信息卡片样式美观
- ✅ 图标显示正确
- ✅ 响应式布局正常

### 功能要求
- ✅ 告警信息完整展示
- ✅ 状态更新准确无误
- ✅ 操作按钮逻辑正确
- ✅ 处理人自动记录
- ✅ 时间信息准确显示

### 交互要求
- ✅ 点击响应快速
- ✅ 状态更新提示明确
- ✅ 弹窗打开/关闭流畅
- ✅ 无异常错误提示

---

## 🐛 已知问题检查

- [ ] 弹窗是否正常打开
- [ ] 告警信息是否完整
- [ ] 按钮是否正常显示
- [ ] 状态更新是否生效
- [ ] 提示消息是否正确
- [ ] 是否有控制台错误

---

## 📸 测试截图记录

### 待处理告警详情
```
[截图位置]
- 告警级别：提示（蓝色）
- 状态：待处理（黄色）
- 黄色提示卡片
- 按钮：[关闭] [开始处理]
```

### 处理中告警详情
```
[截图位置]
- 告警级别：严重（红色）
- 状态：处理中（蓝色）
- 绿色处理信息卡片
- 按钮：[关闭] [标记已处理]
```

### 已处理告警详情
```
[截图位置]
- 告警级别：警告（橙色）
- 状态：已处理（绿色）
- 完整处理信息
- 按钮：[关闭]
```

---

## 💡 测试技巧

### 1. 快速定位测试数据
```typescript
// 在浏览器控制台查看当前告警数据
alertRecords.forEach(alert => {
  console.log(`${alert.id}: ${alert.ruleName} - ${alert.status}`);
});
```

### 2. 测试不同级别告警
- 提示级别：alert-3（电池电压低预警）
- 警告级别：alert-1 或 alert-4（土壤湿度/水压异常）
- 严重级别：alert-2（EC值异常预警）

### 3. 测试状态流转
1. 使用alert-3（待处理）测试开始处理
2. 使用alert-2（处理中）测试标记已处理
3. 使用alert-1（已处理）测试查看功能

---

## 🎯 测试完成检查表

### 基本功能
- [ ] 查看按钮正常工作
- [ ] 弹窗正常打开和关闭
- [ ] 告警信息完整显示
- [ ] 操作按钮显示正确

### 状态管理
- [ ] 待处理 → 处理中 正常
- [ ] 处理中 → 已处理 正常
- [ ] 状态更新提示正确
- [ ] 处理人自动记录

### 界面显示
- [ ] 告警级别颜色正确
- [ ] 处理状态颜色正确
- [ ] 信息卡片样式正确
- [ ] 图标显示正确

### 交互体验
- [ ] 点击响应流畅
- [ ] 无异常错误
- [ ] 提示消息清晰
- [ ] 用户体验良好

---

## 📝 测试报告模板

```
测试时间：________
测试人员：________

【功能测试】
✓ 查看待处理告警详情
✓ 开始处理告警
✓ 查看处理中告警详情
✓ 标记已处理告警
✓ 查看已处理告警详情

【界面测试】
✓ 告警级别颜色正确
✓ 处理状态颜色正确
✓ 弹窗样式美观
✓ 信息卡片清晰

【问题记录】
□ 无问题
□ 发现问题：_____________

【测试结论】
□ 通过
□ 不通过

【备注】
_____________________
```

---

## ✅ 测试通过标准

所有以下项目均需通过：

1. ✅ 弹窗正常打开和关闭
2. ✅ 告警信息完整准确
3. ✅ 颜色分级清晰明确
4. ✅ 操作按钮逻辑正确
5. ✅ 状态更新准确无误
6. ✅ 处理人自动记录
7. ✅ 提示消息正确显示
8. ✅ 无控制台错误
9. ✅ 用户体验流畅

---

祝测试顺利！如有问题请及时反馈。🎉