实验室安全智能监测与管控中心 - 大屏测试点

一、顶部导航栏模块测试点

正常场景

页面加载后，顶部导航栏左侧实时时钟（时:分:秒）正确显示且每秒刷新
顶部导航栏左侧日期与星期显示正确，与系统时间一致
顶部导航栏中间居中显示LOGO图标、单位名称"中国安全生产科学研究院"、竖向分隔线及大标题"实验室安全智能监测与管控中心"，布局无错位
顶部导航栏右侧天气信息正常显示城市/天气状况、温度、AQI数据
导航栏整体border-beam动态路径流动效果正常渲染

异常场景

网络断开时，天气信息区域是否有兜底展示（如"--"或"暂无数据"），不应出现空白或报错
系统时间异常（如时区错误）时，时钟与日期是否仍正确显示本地时间

边界场景

跨日00:00时刻，日期与星期是否同步切换，不出现跨日延迟
跨年元旦零点，日期年份是否正确切换

二、实验室基本情况统计模块测试点

正常场景

模块上部按左右4:6比例正确布局，SVG圆弧仪表图形居中显示实验室总数（128间），分级比例色条（I~IV级对应红橙黄蓝）显示正确
右侧环形图（donut chart）正确展示各分级占比及数量，图表外侧标注各级名称、数量（间）、百分比，圆心显示总数
右侧彩色左边框明细行（I~IV级）颜色与图例一致
模块下部横向三栏状态徽章，"使用""异常""空闲"三种状态实时数量正确显示，单位为"间"
使用+异常+空闲数量之和等于实验室总数

异常场景

某分级数量为0时，环形图对应扇区不显示或显示为灰色，标注不出现"0间/0%"数据错误
数据接口返回异常时，图表区域显示"暂无数据"占位，不出现渲染报错

边界场景

实验室总数为1时，仪表图和环形图是否正常渲染
所有实验室均为同一分级时，环形图是否正确显示为完整圆形

三、实验室安全分级统计模块测试点

正常场景

堆叠柱状图图例（I~IV级，颜色红橙黄蓝）正确显示且与图形颜色一致
一屏正确显示6个柱子，X轴显示二级单位名称，名称下方显示该单位实验室总数
Y轴刻度为实验室数量，数值正确
当X轴数据超出6个时，图表自动从右往左滚动，滚动间隔为5秒，每次滚动1个X轴单位
滚动循环后重新从第一个数据开始展示

异常场景

二级单位名称字符过长时，X轴标签是否自动换行或省略显示，不出现遮挡
某二级单位实验室总数为0时，柱子不渲染或显示为空，不出现负值

边界场景

X轴数据恰好为6个时，是否不触发滚动效果
X轴数据为1个时，是否正常显示单个柱子且不触发滚动

四、实验室进入人数统计及走势模块测试点

正常场景

数字翻牌器正确展示"今日总进入人数"和"当前正在实验人数"，两个翻牌器在同一行
数据更新时，翻牌器触发翻牌动效，动画流畅
下方折线图按0-24点9个时段正确展示进入人数与当前实验人数两条折线
折线图两条折线颜色区分明确，图例显示正确

异常场景

今日进入人数为0时，翻牌器显示"0"而非空白
当前实验人数超过今日进入总人数时，数据逻辑异常是否有告警或标红

边界场景

在当天23:59时，折线图最后一个时段数据是否正确填充
人数骤增至历史最大值时，翻牌器位数自动扩展，不出现数字截断

五、实验室设备分类及使用统计模块测试点

正常场景

上部环形图正确展示设备分类及分布，右侧图例含圆形色块、分类名称、数量（台）、占比，与图形一致
下部上方3网格正确显示设备总数、使用总时长、设备使用率，数值格式正确
设备使用率（当月）= 使用数 ÷（使用数+空闲数），计算结果与展示数值一致
下部左侧饼图标题"设备状态统计"居中显示，标题为青色发光字体，字间距3px，底部有细分隔线
左侧饼图按（正常、维修、报废）三类展示，数据标注（名称+数量+占比）显示在扇区外侧引线处，无侧边图例
下部右侧饼图标题"使用状态统计"样式与左侧一致
右侧饼图按（使用、空闲）两类展示，数据标注正确，无侧边图例
正常+维修+报废 = 设备总数，逻辑验证一致
使用数+空闲数 = 正常状态数，逻辑验证一致

异常场景

某分类设备数量为0时，环形图和饼图对应扇区正确处理，不出现NaN或渲染异常
设备使用率为100%时，右侧饼图"空闲"扇区为0，不出现显示错误

边界场景

只有1种设备分类时，环形图是否正常渲染为完整圆形
设备总数为0时，三网格数值均显示"0"，饼图显示"暂无数据"

六、化学品库存动态统计模块测试点

正常场景

饼图正确展示管控化学品与非管控化学品的库存量及占比，数据标注（分类名称+数量(L)+占比）显示在扇区外侧引线处
右侧统计区正确展示：存量化学品总量（L）、管控类化学品总量及占比、非管控类化学品总量及占比、存量化学品总类目数
管控类使用红色系配色，非管控类使用青色系，总类目数使用金色系，各项含SVG圆弧进度环
SVG圆弧进度环进度与对应占比数值一致
管控类+非管控类数量之和 = 存量化学品总量，逻辑验证一致
所有化学品数量单位统一为L

异常场景

管控类化学品数量为0时，饼图该扇区不显示或显示为灰色，SVG进度环进度为0
数据接口返回异常时，各统计项显示"--"占位，不出现报错

边界场景

存量化学品总量极大（如超过999999L）时，数值格式自动换算（如万L），不出现溢出截断

七、智能环境感知应用设备统计模块测试点

正常场景

顶部正确显示各类智能物联应用设备图标及在线、离线数量
下部左侧速度仪表盘样式图表正确展示设备在线率百分比，仪表盘指针位置与数值一致
下部右侧按3+2布局（上3下2，居中对齐）展示：电子信息铭牌、化学品智能终端、传感器、智慧摄像头、其他智能设备总数
在线率 = 在线数 ÷（在线数+离线数），计算结果与展示数值一致

异常场景

所有设备均离线时，在线率显示"0%"，仪表盘指针指向最低位，不出现NaN
某类设备数量为0时，对应图标数量显示"0"，不出现空白

边界场景

在线率恰好为50%时，仪表盘指针是否正确指向中间位置
设备总数为1且在线时，在线率显示"100%"，仪表盘满格

八、实时监控模块测试点

正常场景

左侧搜索框可输入楼栋楼层关键词，搜索结果实时过滤建筑树状图
左侧二级单位下拉筛选项展开显示所有单位，选择后树状图对应过滤
建筑树状图按根节点（院区→楼栋→楼层→房间）层级正确展示，支持展开/折叠操作
选择树状图某节点后，右侧面包屑"院区 > 楼栋名称 > 楼层名称"自动更新
右侧9宫格以16:9比例正确展示9个实验室实时监控画面（Canvas模拟）
第一个摄像头画面标注危险行为检测框，检测框随模拟数据更新位置
右侧翻页按钮点击后，监控画面切换至下一组（每组9个），面包屑同步更新
border-beam动态流动边框效果及四角装饰线正常显示

异常场景

搜索关键词无匹配结果时，树状图显示"无匹配结果"，不出现空白区域
摄像头Canvas模拟加载失败时，对应格子显示"信号丢失"或占位图，不影响其他格子
当前楼层无摄像头时，9宫格全部显示"暂无信号"占位

边界场景

建筑树状图仅有1个根节点时，折叠按钮不显示或置灰
监控摄像头数量恰好为9个时，翻页按钮置灰不可点击
监控摄像头总数为10个时，翻页后第二页仅显示1个画面，其余8个格子显示占位

九、实验环境安全智能感知模块测试点

正常场景

区域内实验室条目由下而上自动滚动，滚动流畅无卡顿
每个实验室条目正确显示：实验室名称（房号）-二级单位、传感器图标、实时状态数值（温度、湿度、TVOC、CO₂、O₂等）
数据正常时，条目背景与字体颜色正常，无红色高亮效果
当传感器数据超出阈值时，对应条目触发红色渐变高亮效果，显示报警图标及异常数值
异常条目触发后，全屏预警弹窗自动弹出

异常场景

某实验室传感器全部离线时，该条目传感器数值显示"--"，不触发误报警
数据刷新延迟超时时，页面不卡死，数值保持最后一次有效数据，并显示更新时间戳

边界场景

实验室数量极多（如超过100间）时，滚动性能不出现明显卡顿
传感器数值恰好等于阈值临界点时，是否触发预警（边界值验证）

十、实验室实时风险预警模块测试点

正常场景

预警区域按时间倒序滚动展示本月预警通知，最新通知显示在最上面
应急风险预警通知含🚨标识，字体颜色为琥珀/橙色调高亮，每条包括：实验室信息（名称（房号）-二级单位）、异常传感器及对应值、预警时间（日期-时-分-秒）
危化品违规带离预警含☣️标识，每条包括：实验室信息、实验人员违规带离描述、预警时间（日期-时-分-秒）
面板标题栏右侧应急次数、违规带离次数计数器数值正确，与历史通知数量一致
计数器以大字号数值突出展示，样式符合设计规范

异常场景

本月无任何预警通知时，预警列表显示"暂无预警记录"，计数器均显示"0"
预警通知数量极多时，滚动加载或分页不出现性能卡顿

边界场景

同一实验室同一分钟内触发两条不同类型预警时，两条通知均独立显示，不合并
月底最后一条通知与次月第一条通知的时间排序是否正确

十一、全屏预警弹窗测试点

正常场景

传感器数据超出阈值时，全屏预警弹窗自动弹出，弹窗样式为红色科幻报警风格
弹窗左侧正确显示对应实验室监控画面（Canvas模拟，尺寸900×700px）
弹窗右侧正确显示异常信息详情（实验室名称、异常传感器名称、当前值、阈值）
弹窗底部显示三个按钮："稍后处理"、"确认处理"、"🚪 应急疏散"（琥珀色）
点击"确认处理"按钮，弹窗关闭，预警状态标记为已处理
点击"稍后处理"按钮，弹窗关闭，预警状态保持未处理
点击"🚪 应急疏散"按钮，弹出应急疏散独立全屏弹窗

异常场景

多个实验室同时触发预警时，弹窗逐一弹出或合并显示，不出现弹窗堆叠错乱
弹窗显示期间监控画面Canvas加载失败时，左侧显示占位图，右侧详情正常显示

边界场景

弹窗弹出后，传感器数据快速恢复正常时，弹窗是否仍显示直到用户手动操作
同一实验室短时间内反复触发同一预警时，是否避免重复弹窗

十二、应急疏散弹窗测试点

正常场景

点击"🚪 应急疏散"按钮后，应急疏散独立全屏弹窗弹出，z-index高于预警弹窗
弹窗标题栏显示"应急疏散"，右上角关闭按钮可关闭该弹窗，不关闭底层预警弹窗
左侧SVG平面图（深蓝科幻风）正确显示楼层房间布局（A101–A109）
告警房间以红色边框高亮显示
疏散路线关键房间以蓝色边框标注
走道区域含集合点圆形标记，蓝色虚线箭头指向两侧紧急出口
右上方展示"应急疏散路线图"图例，图例与SVG图形颜色一致
右侧纵向排列3路实时视频监控占位区，含"楼道 2层"楼层分区标签
底部左侧告警指标明细正确显示指标名称、当前值/阈值
底部中部语音广播区：播放设备选择按钮、喊话内容输入框、发送按钮功能正常
点击发送按钮后，喊话内容成功提交，输入框清空
底部右侧"稍后处理"关闭应急弹窗返回预警弹窗，"执行疏散"触发疏散指令并记录

异常场景

喊话内容输入框为空时点击发送，是否提示"请输入喊话内容"，不提交空内容
播放设备无可选项时，设备选择按钮置灰，不可操作
楼层平面图SVG加载失败时，左侧区域显示占位提示，不影响右侧和底部功能

边界场景

喊话内容输入超过最大字符限制时，输入框是否限制输入或提示超长
点击"关闭"按钮时，底层预警弹窗是否仍保持正确状态（未被误关闭）

十三、页面整体与通用功能测试点

正常场景

整体布局采用CSS Grid（grid-template-columns:2fr 1.5fr 4.5fr 2fr），1区、2区、3区、4区比例正确
页面分辨率设计为9600×2800px，按固定像素显示，不使用transform:scale缩放
初次进入页面时默认触发全屏显示（Fullscreen API）
整体框架、导航栏及所有模块边框均有border-beam动态路径流动效果
每个模块四角配有科幻装饰线框，样式符合深蓝科幻风规范
主色调（--bg-deep:#030e1f、--blue:#1e90ff、--cyan:#00d8ff、--gold:#ffd740）渲染正确
面板圆角15px，边框颜色rgba(30,144,255,0.22)，全局样式统一
页面无构建工具依赖，直接以HTML文件运行正常

异常场景

浏览器不支持Fullscreen API时，页面正常显示，不出现白屏或报错
ECharts 5.4.3资源加载失败时，图表区域显示"图表加载失败"占位，不影响其他模块
大量动效同时运行时，页面帧率是否保持流畅，不出现明显卡顿

边界场景

在9600×2800px分辨率的设备上，各模块排版无错位、溢出或遮挡
在低于9600×2800px分辨率的设备上，页面不使用缩放，滚动条是否正常出现
页面长时间运行（如8小时以上）时，是否存在内存泄漏导致性能下降