7.8 KiB
7.8 KiB
告警记录详情弹窗 - 快速测试指南
🚀 快速测试步骤
第一步：进入页面
- 登录系统
- 点击顶部导航栏的"智慧灌溉"
- 在左侧菜单选择"实时监测与预警"
- 点击"阈值预警与告警"标签页
第二步：查看待处理告警详情
操作步骤
- 在"实时告警记录"区域找到状态为"待处理"的告警
- 点击该告警卡片右侧的"👁️ 查看"按钮
- 弹出告警详情对话框
预期效果
✓ 弹窗标题："🔔 告警记录详情"
✓ 显示告警级别徽章（蓝色/橙色/红色）
✓ 显示"待处理"状态徽章（黄色）
✓ 显示规则名称
✓ 显示告警消息（完整内容）
✓ 显示触发时间（带时钟图标）
✓ 显示推送渠道（短信/邮件/站内信）
✓ 显示黄色提示卡片："该告警尚未处理"
✓ 显示蓝色处理建议卡片
✓ 底部按钮：[关闭] [开始处理]
测试数据示例
- 告警ID: alert-3
- 规则名称: 电池电压低预警
- 级别: 提示（蓝色）
- 状态: 待处理（黄色）
- 消息: V-04阀门电池电压10.5V，已接近下限，请及时充电或更换电池
- 触发时间: 2024-10-15 17:10:00
- 推送渠道: 站内信
第三步：开始处理告警
操作步骤
- 在告警详情弹窗中，点击"开始处理"按钮
预期效果
✓ 弹窗自动关闭
✓ 显示成功提示："告警状态已更新为：处理中"
✓ 告警记录列表中，该告警状态变为"处理中"（蓝色）
✓ 处理人显示为"当前用户"
第四步：查看处理中告警详情
操作步骤
- 找到状态为"处理中"的告警
- 点击"👁️ 查看"按钮
预期效果
✓ 显示"处理中"状态徽章（蓝色）
✓ 显示绿色"处理信息"卡片
✓ 处理人：👤 李四（或当前用户）
✓ 底部按钮：[关闭] [标记已处理]
测试数据示例
- 告警ID: alert-2
- 规则名称: EC值异常预警
- 级别: 严重（红色）
- 状态: 处理中（蓝色）
- 处理人: 李四
第五步：完成告警处理
操作步骤
- 在处理中的告警详情弹窗中，点击"标记已处理"按钮
预期效果
✓ 弹窗自动关闭
✓ 显示成功提示："告警状态已更新为：已处理"
✓ 告警记录列表中，该告警状态变为"已处理"（绿色）
✓ 处理时间自动记录
第六步：查看已处理告警详情
操作步骤
- 找到状态为"已处理"的告警
- 点击"👁️ 查看"按钮
预期效果
✓ 显示"已处理"状态徽章（绿色）
✓ 显示绿色"处理信息"卡片
✓ 处理人：👤 张三
✓ 处理时间：🕐 2024-10-15 14:35:00
✓ 底部仅显示：[关闭] 按钮
测试数据示例
- 告警ID: alert-1
- 规则名称: 土壤湿度持续低位预警
- 级别: 警告（橙色）
- 状态: 已处理（绿色）
- 处理人: 张三
- 处理时间: 2024-10-15 14:35:00
🎯 重点测试项
1. 告警级别颜色测试
| 级别 | 颜色 | 测试告警 | 状态 |
|---|---|---|---|
| 提示 | 🔵 蓝色 | 电池电压低预警 | ✓ |
| 警告 | 🟠 橙色 | 土壤湿度持续低位预警 | ✓ |
| 严重 | 🔴 红色 | EC值异常预警 | ✓ |
2. 处理状态颜色测试
| 状态 | 颜色 | 操作按钮 | 状态 |
|---|---|---|---|
| 待处理 | 🟡 黄色 | [关闭] [开始处理] | ✓ |
| 处理中 | 🔵 蓝色 | [关闭] [标记已处理] | ✓ |
| 已处理 | 🟢 绿色 | [关闭] | ✓ |
3. 信息完整性测试
- 告警消息完整显示
- 触发时间格式正确
- 推送渠道标签正确
- 处理人信息显示（处理中/已处理）
- 处理时间显示（已处理）
- 处理建议卡片显示
- 待处理提示卡片显示（待处理状态）
4. 状态流转测试
待处理 → [开始处理] → 处理中 → [标记已处理] → 已处理
✓ ✓ ✓
测试步骤：
- 打开待处理告警详情 → 点击"开始处理"
- 打开处理中告警详情 → 点击"标记已处理"
- 打开已处理告警详情 → 只能查看，无法修改
5. 弹窗交互测试
- 点击查看按钮弹出弹窗
- 点击关闭按钮关闭弹窗
- 点击遮罩层可关闭弹窗
- 点击X按钮可关闭弹窗
- 点击操作按钮后弹窗自动关闭
✅ 验收标准
界面要求
- ✅ 弹窗宽度适中（max-w-2xl）
- ✅ 颜色分级清晰明确
- ✅ 信息卡片样式美观
- ✅ 图标显示正确
- ✅ 响应式布局正常
功能要求
- ✅ 告警信息完整展示
- ✅ 状态更新准确无误
- ✅ 操作按钮逻辑正确
- ✅ 处理人自动记录
- ✅ 时间信息准确显示
交互要求
- ✅ 点击响应快速
- ✅ 状态更新提示明确
- ✅ 弹窗打开/关闭流畅
- ✅ 无异常错误提示
🐛 已知问题检查
- 弹窗是否正常打开
- 告警信息是否完整
- 按钮是否正常显示
- 状态更新是否生效
- 提示消息是否正确
- 是否有控制台错误
📸 测试截图记录
待处理告警详情
[截图位置]
- 告警级别：提示（蓝色）
- 状态：待处理（黄色）
- 黄色提示卡片
- 按钮：[关闭] [开始处理]
处理中告警详情
[截图位置]
- 告警级别：严重（红色）
- 状态：处理中（蓝色）
- 绿色处理信息卡片
- 按钮：[关闭] [标记已处理]
已处理告警详情
[截图位置]
- 告警级别：警告（橙色）
- 状态：已处理（绿色）
- 完整处理信息
- 按钮：[关闭]
💡 测试技巧
1. 快速定位测试数据
// 在浏览器控制台查看当前告警数据
alertRecords.forEach(alert => {
console.log(`${alert.id}: ${alert.ruleName} - ${alert.status}`);
});
2. 测试不同级别告警
- 提示级别：alert-3（电池电压低预警）
- 警告级别：alert-1 或 alert-4（土壤湿度/水压异常）
- 严重级别：alert-2（EC值异常预警）
3. 测试状态流转
- 使用alert-3（待处理）测试开始处理
- 使用alert-2（处理中）测试标记已处理
- 使用alert-1（已处理）测试查看功能
🎯 测试完成检查表
基本功能
- 查看按钮正常工作
- 弹窗正常打开和关闭
- 告警信息完整显示
- 操作按钮显示正确
状态管理
- 待处理 → 处理中 正常
- 处理中 → 已处理 正常
- 状态更新提示正确
- 处理人自动记录
界面显示
- 告警级别颜色正确
- 处理状态颜色正确
- 信息卡片样式正确
- 图标显示正确
交互体验
- 点击响应流畅
- 无异常错误
- 提示消息清晰
- 用户体验良好
📝 测试报告模板
测试时间：________
测试人员：________
【功能测试】
✓ 查看待处理告警详情
✓ 开始处理告警
✓ 查看处理中告警详情
✓ 标记已处理告警
✓ 查看已处理告警详情
【界面测试】
✓ 告警级别颜色正确
✓ 处理状态颜色正确
✓ 弹窗样式美观
✓ 信息卡片清晰
【问题记录】
□ 无问题
□ 发现问题：_____________
【测试结论】
□ 通过
□ 不通过
【备注】
_____________________
✅ 测试通过标准
所有以下项目均需通过：
- ✅ 弹窗正常打开和关闭
- ✅ 告警信息完整准确
- ✅ 颜色分级清晰明确
- ✅ 操作按钮逻辑正确
- ✅ 状态更新准确无误
- ✅ 处理人自动记录
- ✅ 提示消息正确显示
- ✅ 无控制台错误
- ✅ 用户体验流畅
祝测试顺利！如有问题请及时反馈。🎉