# 中国安全生产科学研究院实验室安全智慧化管控中心 数据可视化大屏测试用例 --- # 一、通用导航栏模块测试点 ## 正常场景 - 打开页面，导航栏左侧是否正确显示项目标题「中国安全生产科学研究院实验室安全智慧化管控中心」 - 导航栏标题文字是否呈现白色到科技蓝的渐变效果 - 导航栏中间是否显示「实验室情况」和「视频监控」两个切换按钮 - 默认加载时「实验室情况」按钮是否处于选中高亮状态 - 导航栏右侧是否正确展示天气信息、星期、实时时钟 - 实时时钟是否按 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 是否在 `