# 中国安全生产科学研究院实验室安全智慧化管控中心 数据可视化大屏测试点 --- # 导航栏模块测试点 ## 正常场景 - 打开 index.html，导航栏左侧标题显示「中国安全生产科学研究院实验室安全智慧化管控中心」，文字呈现白色→科技蓝渐变效果 - 打开 index.html，导航栏中间区域同时显示「实验室情况」和「视频监控」两个切换按钮，且「实验室情况」默认处于选中高亮状态 - 打开 index.html，导航栏右侧显示天气信息、当前星期和实时时钟，时钟格式为 HH:MM:SS - 观察时钟运行，时钟每秒递增更新，显示值与系统时间一致 - 量取或视觉检验导航栏，整体高度固定为 72px，两个页面切换时导航栏高度不变 - 观察导航栏底部边缘，存在渐变分割线，并有流光动画持续运行（navFlow，4s 周期） ## 交互场景 - 点击「视频监控」按钮，视频监控页面内容展示，「实验室情况」取消高亮，「视频监控」变为选中高亮状态 - 在视频监控页点击「实验室情况」按钮，实验室情况页面内容展示，按钮高亮状态正确切换 - 切回「实验室情况」页面约 100ms 后，页面内所有 ECharts 图表重新渲染完成，无空白或残留 - 快速连续点击两个 Tab 按钮，页面最终稳定显示最后点击的页面，无卡顿或显示错乱 ## 动效场景 - 观察导航栏标题，文字存在 drop-shadow 脉冲动画（titleGlow），3s 为一个循环周期 - 观察时钟文字，存在 text-shadow 脉冲发光动画（clockPulse），2s 为一个循环周期 - 观察选中状态的 Tab 按钮，存在发光呼吸动画（tabGlow），2.5s 为一个循环周期 ## 边界场景 - 等待至时钟显示 23:59:59，下一秒是否自动归零显示 00:00:00，日期同步跳转到次日 - 导航栏标题文字在浏览器最小化后重新打开，动画恢复正常运行，无静止卡死 --- # 页面一：实验室情况 — 整体布局测试点 ## 正常场景 - 打开实验室情况页面，整体内容区呈现左（440px）、中（自适应宽）、右（440px）三栏布局 - 三栏之间的间距为 14px，各栏内模块从上到下依次排列，无遮挡重叠 ## 边界场景 - 将浏览器窗口宽度缩小至 1280px，三栏布局通过整体缩放等比适应，不出现列折叠或内容溢出 - 将浏览器窗口拉宽至 2560px，三栏布局通过整体缩放等比放大，不出现模块间距异常 --- # 1.1 实验室基本情况统计模块测试点 ## 正常场景 - 打开页面，模块整体高度固定为 260px，内容在该高度内完整展示，无超出裁剪 - 查看环形图，中心区域正确显示实验室总数数字及「实验室总数」文字标注 - 查看环形图，扇区显示四个安全分级（I级红/#ff4d4f、II级橙/#ff8c00、III级黄/#ffcc00、IV级蓝/#3a7bff），各扇区颜色与分级对应准确 - 查看环形图，ring 内外径比例对应 radius ['45%','70%']，呈现标准环形而非实心饼图 - 查看环形图右侧，图例纵向排列，四个分级名称与颜色图标一一对应 - 查看模块下方状态卡片区，并排显示「使用 XX 间」「异常 XX 间」「空闲 XX 间」三个卡片，「使用」数值为科技蓝色，「异常」为红色，「空闲」为绿色 ## 动效场景 - 观察三个状态卡片，均存在呼吸发光动画（cardBreathe，4s 周期），且三张卡片动画起始时间依次错开 1.3s（stagger） ## 异常场景 - 将某分级实验室数量设置为 0，环形图不渲染该分级扇区，或以零比例扇区展示，不出现渲染报错 ## 边界场景 - 将实验室总数设置为 0，环形图中心显示 0，图例正常展示，不出现 NaN 或除零报错 - 将某一分级数量设置为所有实验室总数（其余分级均为 0），环形图正确显示单色完整圆环 --- # 1.2 实验室安全分级统计模块测试点 ## 正常场景 - 打开页面，模块高度随左栏剩余空间自适应（flex:1），内容填满可用高度无空白 - 查看堆叠柱状图，X 轴显示各二级单位名称（支持换行），名称下方显示该单位实验室总数 - 查看堆叠柱状图，Y 轴标注实验室数量刻度，各柱按 I/II/III/IV 级对应颜色堆叠显示 - 查看图表顶部，图例区域完整展示 I/II/III/IV 级四组数据标识 ## 交互场景 - 等待 5s，dataZoom 自动向右滑动一个单位，X 轴显示内容相应右移 - 初始状态，X 轴可见区域内展示前 6 个二级单位，超出部分不可见 - 当滚动到最后一个单位后，再等待 5s，dataZoom 循环回初始位置从第一个单位重新展示 - 悬停柱体，tooltip 弹出，背景色为 rgba(6,22,56,0.9)，边框为蓝色，数据内容准确 ## 边界场景 - 将二级单位数量设置为恰好 6 个，图表初始显示全部单位，不发生无意义滚动 - 将二级单位数量设置为 1 个，图表正常展示该单位柱体，不报错也不出现空白 - 某二级单位仅有 I 级实验室，堆叠柱只显示 I 级红色单段，其余段不渲染或不可见 --- # 1.3 实验室进入人数统计及走势模块测试点 ## 正常场景 - 打开页面，模块固定高度为 280px，内容完整展示无超出 - 查看翻牌器，左侧「今日总进入人数」显示 5 个独立数字方块，右侧「当前实验人数」显示 4 个独立数字方块 - 量取单个数字方块，宽高约为 32×42px，方块带有渐变背景和边框发光效果 - 查看折线图，渲染双折线：进入人数使用科技蓝（#48d7ff），实验人数使用深蓝（#3a7bff） - 查看折线图 X 轴，展示 0:00 ~ 24:00 共 9 个时段刻度，分布均匀 - 查看折线图，折线为平滑曲线（smooth），并带有面积填充渐变效果 ## 动效场景 - 观察翻牌器每个数字方块，存在边框发光动画（digitGlow），2s 为一个循环周期 ## 边界场景 - 将今日总进入人数设置为 0，翻牌器显示 00000，不出现空白或异常占位 - 将今日总进入人数设置为 99999（5 位最大值），翻牌器正常显示，不出现数字超出方块或溢出 - 将当前实验人数设置为 0000，翻牌器显示 0000，不出现错误 - 某时段进入人数为 0，折线图在该时段对应点标注为 0，连线正常不断折 --- # 1.4 实验环境安全智能感知模块测试点 ## 正常场景 - 打开页面，列表自动向上滚动展示各实验室数据，速度约 40s 完成一轮循环 - 查看每条数据，包含实验室名称（房号）、所属二级单位，及温度、湿度、TVOC、CO₂、O₂ 五个传感器数值 - 所有传感器数值均在正常范围内时，数值文字正常颜色展示，无高亮和报警图标 ## 异常场景 - 将某条数据温度值设置为 30.1°C（> 30°C），该温度值红色高亮显示，出现 ⚠ 报警图标，并带有脉冲 box-shadow 动画 - 将某条数据温度值设置为 30°C（恰好等于阈值），该温度值不触发异常高亮，正常颜色展示 - 将某条数据 TVOC 值设置为 1.6 mg/m³（> 1.5），该值红色高亮显示，出现 ⚠ 报警图标，带脉冲动画 - 将某条数据 TVOC 值设置为 1.5 mg/m³（恰好等于阈值），该值不触发异常高亮 - 将某条数据 CO₂ 值设置为 901 ppm（> 900），该值红色高亮显示，出现 ⚠ 报警图标，带脉冲动画 - 将某条数据 CO₂ 值设置为 900 ppm（恰好等于阈值），该值不触发异常高亮 - 将某条数据 O₂ 值设置为 19.4%（< 19.5%），该值红色高亮显示，出现 ⚠ 报警图标，带脉冲动画 - 将某条数据 O₂ 值设置为 19.5%（恰好等于阈值），该值不触发异常高亮 - 同一条目中温度、TVOC、CO₂ 同时超阈值，三个异常值均独立红色高亮，各自出现 ⚠ 图标 ## 动效场景 - 观察列表条目入场，每条数据有淡入动画（sensorFadeIn，0.5s） - 观察报警图标，存在摇晃动画（alarmIconShake，0.5s 周期），持续循环 - 列表滚动到末尾后无缝衔接从头继续（CSS translateY(-50%) + 数据翻倍），无跳动或闪烁 ## 边界场景 - 所有实验室传感器数据均正常，列表无任何红色高亮和报警图标 - 列表数据只有 1 条，无缝滚动仍正常运行，不出现空白或跳帧 --- # 1.5 实验室实时风险预警模块测试点 ## 正常场景 - 打开页面，模块固定高度为 320px，内容完整展示无超出裁剪 - 查看模块顶部，本月预警响应总数以大字数字突出展示 - 查看预警滚动列表，数据自动向上无缝循环滚动，速度约 30s 一轮 - 查看每条预警数据，包含「实验室名称 - 二级单位」、异常传感器名称及数值（橙色高亮）、预警时间（YYYY-MM-DD HH:mm:ss 格式） - 每条预警条目左侧有 3px 宽橙色竖条装饰 ## 动效场景 - 观察本月预警总数数字，存在发光文字动画（warnCountGlow），2s 为一个循环周期 - 观察每条预警条目左侧橙色竖条，存在脉冲动画（warnBorderPulse），3s 为一个循环周期 - 预警列表滚动到末尾后无缝衔接，无跳动 ## 边界场景 - 将本月预警总数设置为 0，模块正常显示数字 0，无报错或 NaN - 预警列表数据为空，滚动区域不报错，不出现 undefined 或异常占位 --- # 1.6 智能环境感知应用设备统计模块测试点 ## 正常场景 - 打开页面，模块顶部并排显示「在线设备数量」（科技蓝色数字）和「离线设备数量」（灰色数字）两个统计卡片 - 查看模块下部左侧，仪表盘（ECharts gauge）正确渲染，指针指向对应在线率百分比位置 - 量程范围覆盖 210°（最低）到 -30°（最高），三段渐变颜色：0~70% 暗蓝、70~90% 中蓝、90~100% 亮蓝 - 查看模块下部右侧，纵向排列 4 项设备类型：电子信息铭牌、化学品智能终端、传感器、智能设备，各自显示对应数量 ## 边界场景 - 将设备在线率设置为 0%，仪表盘指针指向量程最低端（210° 方向），不出现渲染错误 - 将设备在线率设置为 100%，仪表盘指针指向量程最高端（-30° 方向），不出现渲染错误 - 将离线设备数量设置为 0，对应卡片正确显示 0，不出现空白或 NaN --- # 1.7 实验室设备分类及使用统计模块测试点 ## 正常场景 - 打开页面，饼图（ECharts pie）正确渲染，内外径对应 radius ['30%','60%'] 呈现环形 - 饼图展示 7 类设备分类：分析仪器、安全防护、化学试剂设备、电气设备、力学测试、环境监测、通用设备，各扇区颜色各异 - 查看饼图右侧图例，纵向排列 7 类设备名称与颜色图标，与扇区一一对应 - 查看模块中部，并排显示「设备总数」「使用总时长(h)」「设备使用率(%)」三个统计卡片，数值正确展示 - 查看模块底部，并排显示「使用」（蓝）、「空闲」（绿）、「正常」（橙）、「维修」（红）四个状态卡片，颜色标识正确 ## 交互场景 - 悬停底部状态卡片，卡片上浮并出现发光效果 - 悬停饼图扇区，tooltip 弹出，背景色为 rgba(6,22,56,0.9)，边框为蓝色，显示设备分类名称和数量 ## 边界场景 - 将某类设备数量设置为 0，饼图不渲染该扇区（或扇区比例为零），不报错 - 将设备使用率设置为 0% 和 100%，对应卡片数值正确显示，不出现异常字符 --- # 页面二：视频监控 — 左侧建筑结构导航测试点 ## 正常场景 - 切换到视频监控页，左侧导航栏宽度为 300px，应用面板样式（毛玻璃背景、边框、圆角） - 查看导航栏顶部，标题显示「建筑结构导航」 - 查看搜索框，可正常点击聚焦并输入文字 - 查看筛选下拉，展开后显示「安全技术研究所」「职业安全研究所」「化学品安全研究所」「矿山安全研究所」四个选项 - 查看树状结构，默认展示院区节点，层级结构为：院区 → 楼栋 → 楼层 → 房间 ## 交互场景 - 点击有子节点的树节点，子节点列表展开显示，再次点击子节点列表折叠 - 展开子节点时，子节点以淡入动画进场（treeExpand，0.35s） - 点击树节点，该节点背景变为科技蓝并出现左侧竖线高亮，其他节点取消高亮 - 悬停树节点，出现光扫效果（light sweep）从左到右扫过节点背景 - 展开节点时，展开箭头变色并发光 - 搜索框输入「3号楼」，树状结构过滤仅展示包含「3号楼」的节点，其余节点隐藏 - 清空搜索框，树状结构恢复完整展示所有节点 - 筛选下拉选择「化学品安全研究所」，树状结构仅展示该单位相关楼栋/楼层节点 ## 动效场景 - 观察侧边栏，存在垂直扫描线动画（sidebarScan，5s 周期） - 观察侧边栏左边缘，存在发光呼吸动画（sidebarEdgeGlow，3s 周期） - 点击聚焦搜索框，边框出现发光效果；搜索框空闲时有周期性脉冲动画 - 已选中的树节点持续有蓝光脉冲动画（treeSelectedGlow，2.5s 周期） ## 异常场景 - 搜索框输入不存在的楼栋名称（如「99号楼」），树状结构无匹配项展示，不报错、不崩溃 - 筛选下拉切换不同单位，树状结构正确更新，不出现数据残留 ## 边界场景 - 树状结构展开全部节点，滚动条正常出现并可滚动，侧边栏宽度保持 300px 不变 --- # 页面二：视频监控 — 右侧视频区域测试点 ## 正常场景 - 切换到视频监控页，右侧视频区域填满剩余宽度（flex:1） - 查看面包屑区域，显示当前路径：院区 → 楼栋名称 → 楼层名称，文字清晰可读 - 查看视频网格，以 3×3 九宫格排列展示 9 个摄像头格子，格子等宽等高均匀分布 - 查看每个摄像头格子，外层渐变背景（科技蓝半透明）+ 内外双层边框装饰存在 - 查看每个格子四角，存在 L 形发光装饰（cam-corner） - 查看每个格子左上角，显示绿色圆点（在线状态）和摄像头编号文字 - 查看每个格子内部，存在扫描线纹理（repeating-linear-gradient）背景 - 查看分页控件，显示「上一页」「第 X / Y 页」「下一页」 ## AI 智能摄像头场景 - 查看每页第一个格子（AI 摄像头），边框和主题色为橙金色，替代普通格子的蓝色主题 - 查看 AI 格子右上角，存在「AI 智能」徽章，背景为渐变色 - 查看 AI 格子内扫描线颜色，为橙色（而非普通格子的蓝色） ## 交互场景 - 点击「下一页」按钮，九宫格内容切换为下一页摄像头，「第 X / Y 页」中 X 数值加一 - 点击「上一页」按钮，九宫格内容切换为上一页摄像头，「第 X / Y 页」中 X 数值减一 - 悬停任意摄像头格子，格子轻微放大（scale 增大），边框发光增强 - 在左侧树状结构中选中某楼层节点，面包屑路径同步更新为对应院区/楼栋/楼层 ## 动效场景 - 页面切换到视频监控时，右侧视频区域有淡入上浮入场动画（videoPageFadeIn，0.6s） - 观察面包屑底部，存在流光动画（breadcrumbFlow，5s 周期），文字有微光呼吸效果 - 观察视频网格背景，存在网格线纹理和水平扫描线动画（gridScanLine，8s 周期） - 观察视频网格外框，存在边框呼吸发光动画（videoGridBreathe，5s 周期） - 九宫格 9 个格子入场时，有 stagger 动画（每格依次延迟 0.05s 进入） - 观察每个格子四角 L 形装饰，有呼吸发光动画（camCornerGlow，2.5s 周期，stagger 0.6s） - 观察每个格子框体，有整体呼吸发光动画（camFrameBreathe，4s 周期） - 观察格子内部，有移动扫描线动画（camInnerScan，6s 周期）从上到下循环扫过 - 观察左上角在线状态圆点，有闪烁动画（dotBlink，2s 周期） - 观察 AI 徽章，有脉冲动画（aiBadgePulse，1.5s 周期） - 观察 AI 格子框体，有橙色呼吸动画（aiFrameBreathe，3s 周期） - 观察翻页按钮，空闲时有边框呼吸动画（pageBtnPulse，4s 周期）；悬停时有光扫效果 - 观察右侧区域背景，存在漂浮微粒子动画（videoParticlesDrift，12s 周期） ## 边界场景 - 当前为第 1 页，点击「上一页」按钮，操作无效（按钮灰化或不响应），页码不变 - 当前为最后一页，点击「下一页」按钮，操作无效（按钮灰化或不响应），页码不变 - 总摄像头数量非 9 的整数倍（如 10 个），最后一页部分格子以空占位或特殊样式处理，不出现布局错乱 --- # 全屏预警弹窗测试点 ## 正常场景 - 页面加载后等待约 15s，预警弹窗自动弹出（Demo 演示触发） - 弹窗展示时，全屏覆盖层呈现半透明红色，并有呼吸闪烁效果 - 弹窗四周边框存在红色闪烁效果（0.8s 周期） - 弹窗内容区宽度为 900px，水平居中展示 - 查看弹窗左侧信息区，完整显示：实验室（房号）、楼栋楼层、所属单位、异常参数（红色高亮）、当前数值（红色高亮）、实验室负责人、联系电话、预警时间 - 预警时间格式为 YYYY-MM-DD HH:mm:ss，与触发时系统时间一致 - 查看弹窗右侧（320px 宽），标题显示「实时监控画面」并有红色闪烁圆点 - 右侧监控画面区域背景为暗红色，叠加扫描线纹理 - 右侧监控画面左上角显示 REC 标识和摄像头名称 - 查看弹窗底部，存在红色渐变背景的确认按钮 ## 交互场景 - 点击确认按钮，弹窗关闭，页面背景红色覆盖层消失，大屏恢复正常展示 - 悬停确认按钮，按钮出现发光效果 - 调用 `showAlert(lab, building, unit, param, value, person, phone)` 函数，弹窗展示的各字段内容与传入参数一一对应 ## 动效场景 - 弹窗激活时，全屏覆盖层有呼吸闪烁动画 - 四周红色光晕（inset box-shadow）以 1s 周期进行快速明暗交替 - 异常参数和当前数值字段以红色高亮显示，且持续可见 ## 边界场景 - `showAlert()` 传入的 param 参数包含多个异常传感器名称（用逗号分隔），弹窗正确展示所有异常参数 - `showAlert()` 传入的 phone 参数为空字符串，联系电话字段显示为空或占位符，不出现 undefined --- # 自适应缩放功能测试点 ## 正常场景 - 在 1920×1080 分辨率显示器下打开页面，内容以 1:1 比例填满屏幕，无缩放变形 - 调整浏览器窗口至 1280×720，页面按 `Math.min(1280/1920, 720/1080)` 计算缩放比例，内容等比缩小并水平居中 ## 交互场景 - 拖动浏览器窗口边缘持续改变尺寸，页面缩放比例实时跟随更新（resize 事件监听），无延迟卡顿 ## 边界场景 - 将浏览器窗口缩小至 400×300（极小尺寸），页面缩放比按公式计算到极小值，内容等比缩小，不出现 JS 报错 - 在宽屏显示器（3840×2160）下打开页面，页面等比放大，内容清晰，无模糊或错位 - 浏览器窗口宽高比与 16:9 差异较大（如 4:3 的 1024×768），按短边约束缩放，页面内容不出现裁剪 --- # 自动全屏功能测试点 ## 正常场景 - 首次点击页面任意位置，浏览器进入全屏模式，地址栏和标签栏隐藏，内容铺满屏幕 ## 边界场景 - 进入全屏后按 ESC 键退出全屏，再次点击页面任意位置，不再重新触发全屏（`{ once: true }` 限制只触发一次） - 浏览器不支持 `requestFullscreen` API（如某些内嵌 WebView），点击页面不报错，页面功能正常使用 --- # 页面切换功能测试点 ## 正常场景 - 调用 `switchPage('lab')`，实验室情况页面以 display 显示，视频监控页面以 display 隐藏，Tab 高亮正确切换 - 调用 `switchPage('video')`，视频监控页面显示，实验室情况页面隐藏，Tab 高亮正确切换 - 从视频监控页切回实验室情况页，约 100ms 后 ECharts 图表（环形图、堆叠柱状图、折线图、仪表盘、饼图）全部重新渲染正常 ## 边界场景 - 在当前已是「实验室情况」页时再次点击「实验室情况」Tab，页面无异常刷新，ECharts 图表不出现重复初始化导致的错乱 --- # ECharts 图表通用测试点 ## 正常场景 - 页面完成加载约 200ms 后，所有图表完成初始化，无空白容器或 loading 残留 - 所有图表（环形图、堆叠柱状图、折线图、仪表盘、饼图）hover tooltip 背景色均为 rgba(6,22,56,0.9)，边框为蓝色 ## 交互场景 - 调整浏览器窗口大小后，所有图表调用 `.resize()` 自适应填满各自容器，不出现图表溢出或空白区域 ## 异常场景 - 将 `libs/echarts.min.js` 路径改为不存在的文件，页面打开时图表容器为空白，控制台报加载错误，但页面其他 HTML 内容和动效不崩溃 --- # 通用面板样式测试点 ## 正常场景 - 查看各功能模块面板，圆角为 6px，内边距为 14px（上下）16px（左右） - 查看各面板顶部边缘，存在 2px 渐变高亮线（accent 色） - 查看各面板四角，存在 L 形角装饰元素（corner-deco） - 查看各面板标题左侧，存在 3px 宽竖线高亮条 - 查看各面板，box-shadow 呈现外发光效果 ## 动效场景 - 观察面板 box-shadow，存在呼吸发光动画（panelGlow，4s 周期） - 观察面板顶部扫描线，存在水平扫描线动画（panelScan，6s 周期），各面板 stagger 延迟不同 - 观察面板四角装饰，存在呼吸缩放动画（cornerBreathe，3s 周期） - 观察面板标题竖条，存在发光脉冲动画（titleBarGlow，2.5s 周期） --- # 全局背景与动效测试点 ## 正常场景 - 查看页面背景，整体为 #020c1b → #061630 → #0a2550 深蓝渐变，无纯白或浅色区域 - 查看页面背景，叠加有半透明技术网格覆盖层（水平和垂直网格线） - 观察页面背景，存在浮动粒子效果（particleDrift，20s 周期）持续漂浮运动 ## 动效场景 - 所有 CSS `@keyframes` 动画均通过原生 CSS 实现，不依赖第三方动画库（jQuery Animate、GSAP 等） - 多个动画同时运行时（面板、图表、列表、背景粒子），页面运行流畅，无明显掉帧 --- # 设计规范测试点 ## 色彩规范 - 面板背景色为 rgba(6, 22, 56, 0.82)，`backdrop-filter: blur(8px)` 毛玻璃效果正常渲染 - 面板边框颜色为 rgba(72, 180, 255, 0.28)，半透明蓝色细边框可见 - 主要正文文字颜色为 #d8f4ff（浅蓝白），辅助说明文字颜色为 #7eacc8（中蓝灰） - 安全/空闲状态使用 #36d399（绿色），警告/预警状态使用 #ffb020（橙黄），危险/异常状态使用 #ff4d4f（红色） - 实验室安全等级颜色：I级 #ff4d4f（红）、II级 #ff8c00（橙）、III级 #ffcc00（黄）、IV级 #3a7bff（蓝） ## 字体规范 - 页面字体按优先级加载：DIN Alternate > Alibaba PuHuiTi > PingFang SC > Microsoft YaHei > sans-serif，在当前操作系统可用字体中正确匹配 ## 语言规范 - 页面所有标签、按钮、图例、提示文字均为简体中文，无英文（技术缩写如 TVOC、CO₂、O₂ 除外） ## 兼容性 - 在不支持 `backdrop-filter` 的浏览器中，面板有兜底背景色，不显示为完全透明 --- # 外部依赖与代码结构测试点 ## 正常场景 - 在 `libs/reset.css` 路径下存在 Ant Design Reset CSS 文件时，页面基础样式（margin/padding/box-sizing 等）被正确重置 - 在 `libs/echarts.min.js` 路径下存在 ECharts 5.5.0 文件时，所有图表正常初始化渲染 - 查看 index.html 源码，所有样式代码在 `