test_case.md 16 KB
中国安全生产科学研究院实验室安全智慧化管控中心 数据可视化大屏测试用例
一、通用导航栏模块测试点
正常场景
- 打开页面，导航栏左侧是否正确显示项目标题「中国安全生产科学研究院实验室安全智慧化管控中心」
- 导航栏标题文字是否呈现白色到科技蓝的渐变效果
- 导航栏中间是否显示「实验室情况」和「视频监控」两个切换按钮
- 默认加载时「实验室情况」按钮是否处于选中高亮状态
- 导航栏右侧是否正确展示天气信息、星期、实时时钟
- 实时时钟是否按 HH:MM:SS 格式显示并每秒更新
- 导航栏整体高度是否为 72px
交互场景
- 点击「视频监控」按钮，页面是否切换到视频监控页，按钮高亮状态是否更新
- 点击「实验室情况」按钮，页面是否切回实验室情况页，按钮高亮状态是否更新
- 页面切回「实验室情况」时，ECharts 图表是否在约 100ms 延迟后重新初始化并正常渲染
动效场景
- 导航栏底部渐变分割线是否存在流光动画（navFlow，4s 周期）
- 标题文字是否有 drop-shadow 脉冲动画（titleGlow，3s 周期）
- 时钟文字是否有 text-shadow 脉冲动画（clockPulse，2s 周期）
- 选中的 Tab 按钮是否有发光呼吸动画（tabGlow，2.5s 周期）
边界场景
- 时钟从 23:59:59 跨零点后，是否正确跳转到 00:00:00
- 天气信息内容较长时，是否不影响导航栏布局
二、页面一：实验室情况 — 整体布局测试点
正常场景
- 页面是否呈现左（440px）、中（自适应）、右（440px）三栏布局
- 三栏之间间距是否为 14px
- 各栏内模块是否按上下排列且无遮挡重叠
边界场景
- 浏览器窗口缩小时，自适应缩放后三栏布局是否维持比例
- 浏览器窗口放大时，三栏布局是否不出现多余空白或错位
三、1.1 实验室基本情况统计模块测试点
正常场景
- 模块固定高度是否为 260px
- 环形图是否正确渲染，中心是否显示实验室总数字 + "实验室总数"文字
- 环形图是否展示四个分级（I级红、II级橙、III级黄、IV级蓝）的占比扇区
- 右侧图例是否纵向排列，并与四个分级颜色对应
- 状态卡片区域是否并排显示「使用 XX 间」「异常 XX 间」「空闲 XX 间」三个卡片
- 「使用 XX 间」数字是否为科技蓝色，「异常 XX 间」是否为红色，「空闲 XX 间」是否为绿色
动效场景
- 三个状态卡片是否有呼吸发光动画（cardBreathe，4s 周期）
- 三个卡片动画是否存在 stagger 间隔（1.3s 依次错开）
边界场景
- 实验室总数为 0 时，环形图中心是否正确显示 0 且不报错
- 某一等级实验室数量为 0 时，环形图是否不渲染该扇区或正确处理
四、1.2 实验室安全分级统计模块测试点
正常场景
- 模块是否采用 flex:1 自适应高度
- 堆叠柱状图是否正确渲染，X 轴显示各二级单位名称
- 单位名称是否支持换行显示，且名称下方显示该单位实验室总数
- Y 轴是否正确显示实验室数量刻度
- 四组堆叠数据（I级、II级、III级、IV级）是否按对应颜色堆叠显示
- 图例是否显示在图表顶部
交互场景
- 自动滚动是否每 5 秒向右滚动一个单位
- 初始是否显示前 6 个单位
- 数据超出 6 个单位后，滚动是否循环回初始位置
边界场景
- 二级单位数量恰好为 6 时，是否不出现无意义的滚动
- 二级单位数量少于 6 时，是否正常展示所有数据而不出现空白滚动
- 某单位仅有单一等级实验室时，堆叠柱是否仅显示单色
五、1.3 实验室进入人数统计及走势模块测试点
正常场景
- 模块固定高度是否为 280px
- 数字翻牌器是否正确渲染今日总进入人数（5 位数字）和当前实验人数（4 位数字）
- 每个数字是否为独立方块（32×42px）
- 数字方块是否有渐变背景 + 边框发光效果
- 折线图是否渲染双折线（进入人数-科技蓝；实验人数-深蓝）
- X 轴是否展示 0:00 ~ 24:00 共 9 个时段
- 折线是否有面积填充渐变效果
- 折线是否为平滑曲线（smooth）
动效场景
- 数字翻牌器方块是否有发光动画（digitGlow，2s 周期）
边界场景
- 今日总进入人数为 0 时，翻牌器是否正确显示 00000
- 今日总进入人数达到最大 5 位数（99999）时，是否正常显示不溢出
- 某时段无人进入时，折线图对应点是否正确显示为 0
六、1.4 实验环境安全智能感知模块测试点
正常场景
- 列表是否正确展示每条数据的实验室名称（房号）和所属二级单位
- 每条数据是否显示 5 个传感器值：温度、湿度、TVOC、CO₂、O₂
- 列表是否持续自动向上滚动（约 40s 一轮）
异常场景
- 温度值 > 30°C 时，该值是否红色高亮 + ⚠ 报警图标 + 脉冲 box-shadow 动画
- TVOC 值 > 1.5 mg/m³ 时，该值是否红色高亮 + ⚠ 报警图标 + 脉冲 box-shadow 动画
- CO₂ 值 > 900 ppm 时，该值是否红色高亮 + ⚠ 报警图标 + 脉冲 box-shadow 动画
- O₂ 值 < 19.5% 时，该值是否红色高亮 + ⚠ 报警图标 + 脉冲 box-shadow 动画
- 同一条目多个传感器同时异常时，所有异常值是否均高亮显示
动效场景
- 传感器条目入场是否有淡入动画（sensorFadeIn，0.5s）
- 报警图标是否有摇晃动画（alarmIconShake，0.5s）
- 列表是否通过 CSS translateY(-50%) + 数据翻倍实现无缝滚动（无跳动感）
边界场景
- 温度恰好等于 30°C 时，是否不触发异常高亮
- O₂ 恰好等于 19.5% 时，是否不触发异常高亮
- 列表数据只有 1 条时，无缝滚动是否仍能正常运行
- 所有实验室数据均正常时，列表是否无任何高亮警告展示
七、1.5 实验室实时风险预警模块测试点
正常场景
- 模块固定高度是否为 320px
- 本月预警响应总数是否以大字数字展示
- 预警列表是否持续循环滚动（约 30s 一轮）
- 每条预警数据是否显示：实验室名称-二级单位、异常传感器及数值（橙色高亮）、预警时间（YYYY-MM-DD HH:mm:ss）
- 每条预警条目左侧是否有 3px 橙色竖条
动效场景
- 预警总数数字是否有发光文字动画（warnCountGlow，2s 周期）
- 预警条目左边框是否有脉冲动画（warnBorderPulse，3s 周期）
- 滚动是否为无缝循环（无跳动感）
边界场景
- 本月预警总数为 0 时，是否正确显示 0 且不出现报错
- 预警列表为空时，滚动区域是否不报错、不显示异常
八、1.6 智能环境感知应用设备统计模块测试点
正常场景
- 顶部是否并排显示「在线设备数量」（科技蓝）和「离线设备数量」（灰色）两个统计卡片
- 仪表盘是否正确渲染设备在线率百分比
- 仪表盘量程是否为 210° ~ -30°，三段颜色分布正确（70%暗蓝、90%中蓝、100%亮蓝）
- 右侧设备类型列表是否纵向显示 4 项：电子信息铭牌、化学品智能终端、传感器、智能设备，各自对应数量
边界场景
- 在线率为 0% 时，仪表盘指针是否指向最低端不报错
- 在线率为 100% 时，仪表盘指针是否指向最高端不报错
- 离线设备数量为 0 时，灰色数值卡片是否正确显示 0
九、1.7 实验室设备分类及使用统计模块测试点
正常场景
- 饼图是否正确渲染 7 类设备分类扇区，颜色各异
- 饼图 radius 是否为 ['30%','60%']（环形）
- 右侧图例是否纵向排列并与 7 类设备对应
- 中部是否并排显示「设备总数」「使用总时长(h)」「设备使用率(%)」3 个统计卡片
- 底部是否并排显示「使用(蓝)」「空闲(绿)」「正常(橙)」「维修(红)」4 个状态卡片
边界场景
- 某类设备数量为 0 时，饼图是否不渲染该扇区或正确处理
- 设备使用率为 0% 和 100% 时，相关卡片是否正确显示不报错
十、页面二：视频监控 — 左侧导航栏测试点
正常场景
- 左侧导航栏宽度是否为 300px，并应用面板样式
- 顶部标题是否显示「建筑结构导航」
- 搜索框是否存在并可输入楼栋/楼层关键词
- 搜索框聚焦时边框是否发光
- 下拉筛选框是否可按二级单位筛选（安全技术研究所、职业安全研究所、化学品安全研究所、矿山安全研究所）
- 树状结构是否展示院区 → 楼栋 → 楼层 → 房间的层级
交互场景
- 点击树节点，是否可正确展开/折叠对应子节点
- 展开子节点时，是否有淡入动画（treeExpand，0.35s）
- 点击选中树节点，是否高亮（科技蓝背景 + 左侧竖线）
- 悬停树节点，是否出现光扫效果（light sweep）
- 箭头展开时，是否变色发光
- 使用搜索框输入关键词，是否过滤只展示匹配的楼栋/楼层
边界场景
- 搜索框输入不存在的楼栋/楼层名，是否无匹配结果，不报错
- 搜索框清空后，树状结构是否恢复完整展示
- 筛选下拉选择某单位，是否仅显示该单位相关节点
十一、页面二：视频监控 — 右侧视频区域测试点
正常场景
- 面包屑是否正确显示当前路径（院区 → 楼栋名称 → 楼层名称）
- 视频网格是否为 3×3 九宫格，共展示 9 个摄像头格子
- 每个摄像头格子是否显示科幻风边框（外层渐变背景 + 内外双层边框）
- 每个格子四角是否有 L 形发光装饰（cam-corner），带呼吸动画（stagger 间隔 0.6s）
- 每个格子内是否有扫描线纹理（repeating-linear-gradient）
- 摄像头内是否有移动扫描线动画（6s 周期）
- 左上角是否显示在线状态绿色闪烁圆点 + 摄像头编号
- 分页控件是否显示「上一页 / 第 X / Y 页 / 下一页」
交互场景
- 点击「下一页」按钮，是否切换到下一页摄像头，页码正确更新
- 点击「上一页」按钮，是否切换到上一页摄像头，页码正确更新
- 悬停摄像头格子，是否轻微放大并增强发光效果
- 每页第一个格子是否应用 AI 智能摄像头样式（橙金色主题）
- AI 格子右上角是否显示「AI 智能」徽章，并有脉冲动画（aiBadgePulse，1.5s）
- AI 格子内扫描线是否为橙色
- 九宫格格子入场是否有 stagger 动画（每格延迟 0.05s）
边界场景
- 当前为第 1 页时，点击「上一页」按钮，是否不响应或给出提示
- 当前为最后一页时，点击「下一页」按钮，是否不响应或给出提示
- 总摄像头数量不足 9 个时，剩余格子是否正确处理（不报错）
十二、全屏预警弹窗测试点
正常场景
- 页面加载 15 秒后，是否自动弹出预警弹窗（Demo 演示）
- 弹窗宽度是否为 900px
- 覆盖层是否呈全屏半透明红色，并有呼吸闪烁效果
- 四周是否有大面积红色光晕（inset box-shadow），1s 周期明暗交替
- 四边是否有红色光边框闪烁（0.8s 周期）
- 弹窗左侧信息区是否显示以下字段：实验室（房号）、楼栋楼层、所属单位、异常参数（红色高亮）、当前数值（红色高亮）、实验室负责人、联系电话、预警时间（YYYY-MM-DD HH:mm:ss）
- 弹窗右侧是否有 320px 宽的监控画面区域，含标题「实时监控画面」+ 红色闪烁圆点
- 监控画面区域背景是否为暗红色 + 扫描线纹理
- 左上角是否有 REC 标识 + 摄像头名称
- 弹窗底部是否显示确认按钮（红色渐变）
交互场景
- 点击确认按钮，弹窗是否关闭，页面恢复正常
- 悬停确认按钮，是否有发光效果
showAlert()函数被调用时，弹窗是否正确接收并展示传入的实验室、楼栋、单位、参数、数值、负责人、电话参数
边界场景
- 弹窗中异常参数字段为多个异常项时，是否均红色高亮展示
- 负责人电话字段为空时，是否不报错，字段留空或显示默认提示
十三、通用功能 — 自适应缩放测试点
正常场景
- 页面在 1920×1080 分辨率下，是否完整显示不缩放
- 浏览器窗口缩小（宽度小于 1920 或高度小于 1080），页面是否按
Math.min(vw/1920, vh/1080)比例等比缩放 - 缩放后内容是否居中展示
交互场景
- 调整浏览器窗口大小时，页面缩放比例是否实时更新（监听 resize 事件）
边界场景
- 浏览器窗口极小（如 800×600）时，页面是否缩放后仍可辨识，不出现布局错乱
- 浏览器窗口极大（如 3840×2160）时，页面是否在 1920×1080 基础上适度放大，不出现模糊或错位
十四、通用功能 — 自动全屏测试点
正常场景
- 首次点击页面时，是否调用
requestFullscreen()进入全屏 - 全屏后内容是否铺满屏幕，无黑边（或仅等比缩放留边）
边界场景
- 用户手动退出全屏后再次点击页面，是否不再重复触发全屏（
{ once: true }保证只触发一次） - 浏览器不支持
requestFullscreen时，是否不报错，页面正常工作
十五、通用功能 — ECharts 图表通用测试点
正常场景
- 所有 ECharts 图表（环形图、堆叠柱状图、折线图、仪表盘、饼图）是否在页面加载约 200ms 后初始化并正常渲染
- 所有图表 tooltip 是否使用统一样式（深色背景 rgba(6,22,56,0.9) + 蓝色边框）
- 调整浏览器窗口大小时，所有图表是否调用
.resize()自适应更新
边界场景
- ECharts JS 文件加载失败时，图表区域是否不白屏崩溃，页面其他内容仍可展示
十六、外部依赖与文件结构测试点
正常场景
libs/reset.css是否正确引用并生效（Ant Design Reset CSS）libs/echarts.min.js是否正确引用并生效（ECharts 5.5.0）- 所有 CSS 是否在
<style>标签内，所有 JS 是否在<script>标签内
异常场景
- 删除或移动
libs/reset.css后刷新页面，是否仅影响基础样式重置，不导致 JS 报错 - 删除或移动
libs/echarts.min.js后刷新页面，是否不崩溃，并给出可识别的错误信息
十七、全局动效与光效测试点
正常场景
- 页面背景是否显示技术网格覆盖层（半透明网格线）
- 页面是否有浮动粒子效果（particleDrift，20s 周期）
- 所有面板是否有 box-shadow 呼吸发光动画（panelGlow，4s 周期）
- 面板顶部是否有水平扫描线（panelScan，6s 周期，各面板 stagger 延迟）
- 面板四角装饰是否有呼吸动画（cornerBreathe，3s 周期）
- 面板标题左侧竖条是否有发光脉冲（titleBarGlow，2.5s 周期）
- 视频监控页进入时，是否有入场淡入上浮动画（videoPageFadeIn，0.6s）
边界场景
- 所有 CSS
@keyframes动画是否在不使用第三方动画库的情况下正常运行 - 多个动画同时运行时，是否不出现卡顿或渲染异常
十八、界面与设计规范测试点
正常场景
- 主背景色是否为深蓝渐变（#020c1b → #061630 → #0a2550）
- 面板背景是否为 rgba(6, 22, 56, 0.82) 毛玻璃效果，backdrop-filter: blur(8px)
- 面板边框颜色是否为 rgba(72, 180, 255, 0.28)
- 主文字色是否为 #d8f4ff，辅助文字色是否为 #7eacc8
- 强调色是否正确使用 #48d7ff（科技蓝）和 #3a7bff（深蓝）
- 安全色（#36d399）、警告色（#ffb020）、危险色（#ff4d4f）是否应用于对应场景
- 实验室安全等级配色是否符合教育部标准（I级红/II级橙/III级黄/IV级蓝）
- 字体是否按顺序 fallback："DIN Alternate" → "Alibaba PuHuiTi" → "PingFang SC" → "Microsoft YaHei" → sans-serif
- 面板圆角是否为 6px，内边距是否为 14px 16px
- 面板顶部是否有 2px 渐变高亮线
- 所有界面文案是否为简体中文
边界场景
- 在不支持
backdrop-filter的浏览器中，面板是否有兜底背景色，不显示为透明