anKeYuan-largeScreen-9600/test_case/test_case_new.md

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

依据：prompt/超大屏prompt.md 功能设计文档 + img/design-preview-half.png 视觉设计稿

---

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

正常场景

• 页面加载后，左侧实时时钟以"HH:MM:SS"格式正确显示（设计图示例 17:19:36），每秒刷新且无闪烁
• 左侧日期与星期显示正确，与系统本地时间保持一致
• 中间 LOGO 图标、单位名称"中国安全生产科学研究院"、竖向分隔线、大标题"实验室安全智能监测与管控中心"水平居中对齐，无错位
• 右侧天气信息正常显示城市/天气状况、温度、AQI，三项数据同行排列
• 导航栏边框 border-beam 动态路径流动效果正常渲染，路径沿边框连续流动
• 导航栏无任何切换按钮，仅含展示信息

异常场景

• 网络断开时，右侧天气区域显示"--"或"暂无数据"兜底，不出现空白区域或 JS 报错
• 系统时区配置错误时，时钟仍读取本地时间，不出现 UTC 偏移显示

边界场景

• 跨日 00:00:00 时刻，日期与星期同步切换，不出现跨日延迟（如 00:00:01 还显示昨天）
• 跨年元旦零点，年份正确切换
• 标题字符串极长时（含副标题），中间区域不溢出至左右两侧

---

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

正常场景

• 模块上部左侧（占40%）SVG 圆弧仪表图形正确渲染，图形中心数字显示"128间"，与接口数据一致
• 仪表图下方分级比例色条按 I~IV 级顺序显示红、橙、黄、蓝四色，色块宽度与各级数量占比一致
• 模块上部右侧（占60%）环形图（donut chart）各扇区颜色与分级色规一致，外侧引线标注各级名称、数量（间）、百分比，三项缺一不可
• 环形图圆心显示实验室总数（128），与左侧仪表图数字保持一致
• 右侧彩色左边框明细行 I~IV 级颜色分别为红、橙、黄、蓝，与图例完全对应
• 模块下部（占20%）横向三栏状态徽章"使用""异常""空闲"数量正确显示，单位为"间"
• 使用数 + 异常数 + 空闲数 = 实验室总数（128），逻辑自洽

异常场景

• 某分级数量为 0 时，环形图对应扇区不渲染，外侧引线标注不出现"0间 / 0%"孤立标签
• 数据接口超时或报错时，图表区域显示"暂无数据"占位块，不触发 JS 异常

边界场景

• 所有实验室均属同一分级时，环形图渲染为完整圆形，无多余间隔
• 实验室总数为 1 时，SVG 仪表图与环形图均正常渲染，不出现布局塌陷

---

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

正常场景

• 堆叠柱状图图例显示 I~IV 级，颜色红、橙、黄、蓝与图形颜色一一对应（设计图可见橙/黄/蓝堆叠柱效果）
• 默认一屏展示 6 个柱子，X 轴每个柱子下方同时显示二级单位名称及该单位实验室总数
• Y 轴刻度以实验室数量为单位，最大刻度自动适配数据范围
• 当 X 轴数据超过 6 个时，图表每隔 5 秒自动向左滚动 1 个 X 轴单位，滚动动画流畅
• 滚动到最后一个数据后，自动循环从第一个数据重新开始

异常场景

• 某二级单位名称字符过长时，X 轴标签自动截断并显示省略号（...），悬停可见完整名称，不遮挡相邻柱子
• 某二级单位实验室总数为 0 时，对应柱子不渲染（或显示高度为 0 的空柱），X 轴总数显示"0"

边界场景

• X 轴数据恰好为 6 个时，不触发自动滚动，图表静态展示
• X 轴数据为 1 个时，单柱居中显示，滚动不触发
• X 轴数据为 7 个时，滚动仅滚动 1 步即循环

---

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

正常场景

• 数字翻牌器"今日总进入人数"与"当前正在实验人数"在同一行显示，字号突出
• 数据更新时，翻牌器触发滚动翻牌动效，动画从旧数值逐位滚动至新数值
• 下方折线图正确展示 0~24 点 9 个分隔时段的两条折线：进入人数与当前实验人数
• 两条折线颜色区分明确（设计图中可见蓝色与青色区分），图例标注正确
• 折线图 X 轴时间节点等间距排列，Y 轴数值动态适配最大值

异常场景

• 今日进入人数为 0 时，翻牌器显示"0"，不出现空白或 NaN
• 当前实验人数逻辑上不超过今日总进入人数，若出现此异常数据应在对应数值旁标红警示

边界场景

• 当天 23:59 时刻，折线图最后时段数据正确填入，不出现数据断档
• 人数值位数增加（如从 3 位变 4 位）时，翻牌器自动扩展位数，不出现数字截断

---

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

正常场景

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

异常场景

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

边界场景

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

---

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

正常场景

• 上部（占40%）环形图正确展示各设备分类分布，右侧图例含圆形色块、分类名称、数量（台）、占比，四项完整显示
• 下部上方三网格（统计卡片）正确展示：设备总数、使用总时长、设备使用率，数值格式正确（使用率含 % 单位）
• 设备使用率（当月）= 使用数 ÷（使用数 + 空闲数），展示值与计算值一致
• 左侧饼图标题"设备状态统计"居中，样式为青色发光字体（color:var(--cyan)），字间距 3px，标题底部有细分隔线，视觉紧贴饼图顶部
• 左侧饼图按正常、维修、报废三类分布，扇区外侧引线标注名称 + 数量 + 占比，无侧边图例
• 右侧饼图标题"使用状态统计"样式与左侧一致
• 右侧饼图按使用、空闲两类分布，扇区外侧引线标注正确，无侧边图例
• 正常 + 维修 + 报废 = 设备总数，逻辑自洽
• 使用数 + 空闲数 = 正常状态数，逻辑自洽

异常场景

• 某分类设备数量为 0 时，环形图和饼图对应扇区不渲染，不出现 NaN 或零值引线标注漂移
• 设备使用率为 100% 时，右侧饼图"空闲"扇区为 0，不出现渲染错误

边界场景

• 只有 1 种设备分类时，环形图渲染为完整圆形
• 设备总数为 0 时，三个统计卡片均显示"0"，两个饼图区域显示"暂无数据"

---

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

正常场景

• 饼图正确展示管控化学品与非管控化学品两类，扇区外侧引线标注分类名称 + 数量(L) + 占比（设计图可见约 1,229L 的大数字）
• 饼图无侧边图例，数据标注完全依赖外侧引线
• 右侧统计区正确展示：存量化学品总量（L）、管控类总量及占比、非管控类总量及占比、存量化学品总类目数
• 管控类统计使用红色系配色，SVG 圆弧进度环进度与占比一致
• 非管控类统计使用青色系配色，SVG 圆弧进度环正确渲染
• 总类目数使用金色系配色（--gold:#ffd740）
• 管控类数量 + 非管控类数量 = 存量化学品总量，逻辑自洽
• 所有化学品数量单位统一显示为"L"

异常场景

• 管控类化学品数量为 0 时，饼图该扇区不渲染，对应 SVG 进度环进度为 0，占比显示"0%"
• 数据接口异常时，右侧各统计项显示"--"占位，SVG 进度环归零

边界场景

• 存量总量数值极大（如超过 999,999L）时，右侧统计区自动换算为万L或保留合理精度，不出现溢出截断
• 两类化学品占比恰好各为 50% 时，饼图平分且两侧引线不重叠

---

八、实时监控模块测试点

正常场景

• 左侧搜索框可输入楼栋/楼层关键词，输入后树状图实时过滤展示匹配节点
• 左侧二级单位下拉筛选框展开显示全部单位，选择后树状图对应单位节点高亮展开
• 建筑树状图按院区 → 楼栋 → 楼层 → 房间四级层级正确展示，每级可独立展开/折叠
• 点击树状图某楼层节点后，右侧面包屑自动更新为"院区 > 楼栋名称 > 楼层名称"
• 右侧展示 9 宫格（3×3）16:9 比例实验室实时监控画面（Canvas 模拟），画面边框与间距均匀（设计图可见 9 个深色格子）
• 第一个摄像头画面（左上角）显示智能摄像头标识，含危险行为检测框（矩形框标注），检测框随模拟数据更新位置
• 右上角翻页按钮（上一页/下一页）点击后切换至对应组（每组9个），面包屑与摄像头信息同步更新
• 各模块 border-beam 流动边框效果及四角科幻装饰线正常渲染

异常场景

• 搜索关键词无匹配时，树状图显示"无匹配结果"提示，不出现空白区域
• 某摄像头 Canvas 加载失败时，对应格子显示"信号丢失"占位，不影响其他 8 个格子正常显示
• 当前选中楼层无摄像头时，9 宫格全部显示"暂无信号"占位格
• 搜索框清空后，树状图恢复完整展示

边界场景

• 树状图仅有 1 个根节点时，折叠/展开按钮不显示或置灰
• 摄像头总数恰好为 9 时，翻页按钮（下一页）置灰不可点击
• 摄像头总数为 10 时，翻至第 2 页仅显示 1 个画面，其余 8 个格子显示占位
• 摄像头总数为 0 时，9 宫格全部显示占位，翻页按钮均置灰

---

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

正常场景

• 模块内实验室条目列表由下向上自动滚动，滚动流畅无卡顿（设计图右侧可见多行条目列表）
• 每个实验室条目正确显示：实验室名称（房号）- 二级单位、传感器图标组、实时数值（温度、湿度、TVOC、CO₂、O₂等）
• 数据正常时，条目背景与字体颜色为正常深蓝色调，无红色高亮
• 某传感器数据超出阈值时，该条目整体触发红色渐变高亮效果，并在对应数值旁显示报警图标
• 异常条目触发后，全屏预警弹窗自动弹出

异常场景

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

边界场景

• 实验室条目数量超过 100 条时，滚动性能不出现明显卡顿（FPS 不低于 30）
• 传感器数值恰好等于阈值临界值时，明确触发或不触发报警（验证临界值判断逻辑为 ≥ 还是 >）
• 滚动至最后一条后，列表循环从第一条重新开始，不出现空白帧

---

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

正常场景

• 预警列表按时间倒序轮播展示本月预警通知，最新一条始终在最顶部
• 应急风险预警每条含 🚨 标识，字体颜色为琥珀/橙色高亮，内容包括：实验室名称（房号）- 二级单位、异常传感器名称及对应值、预警时间（日期-时-分-秒）
• 危化品违规带离预警每条含 ☣️ 标识，字体颜色与应急预警一致，内容包括：实验室名称（房号）- 二级单位、违规带离描述（实验人员未正常使用，触发报警时开启柜门的人员）、预警时间
• 面板标题栏右侧大字号计数器分别显示：应急风险预警累计次数、危化品违规带离累计次数
• 两类计数器数值与列表中对应类型的历史通知条数一致

异常场景

• 本月无任何预警记录时，列表显示"暂无预警记录"占位文字，两类计数器均显示"0"
• 预警通知数量极多（如超 1000 条）时，滚动不出现性能卡顿，不影响其他模块正常渲染

边界场景

• 同一实验室同一秒内触发两条不同类型预警时，两条通知独立显示，时间戳一致但均正确计入各自计数器
• 月底最后一秒与次月第一秒的通知排序正确，跨月数据不混入当月计数

---

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

正常场景

• 传感器数据超出阈值时，全屏预警弹窗自动弹出，弹窗覆盖整个视口，z-index 高于所有大屏内容层
• 弹窗整体风格为科幻红色报警样式（红色渐变、闪烁光效），与深蓝大屏形成强对比
• 弹窗左侧实验室监控画面 Canvas 模拟区域尺寸为 900×700px，画面内容对应触发预警的实验室
• 弹窗右侧异常信息详情正确显示：实验室名称、异常传感器名称、当前值、超限阈值
• 弹窗底部三按钮完整显示："稍后处理"（灰色）、"确认处理"（蓝色）、"🚪 应急疏散"（琥珀色）
• 点击"确认处理"后，弹窗关闭，对应预警条目状态标记为已处理，不再触发同一条预警弹窗
• 点击"稍后处理"后，弹窗关闭，预警条目状态保持未处理，可二次触发
• 点击"🚪 应急疏散"后，应急疏散全屏弹窗弹出（z-index 更高），当前预警弹窗保留在底层

异常场景

• 多个实验室同时触发预警时，弹窗按优先级或时间顺序逐一弹出，不出现多窗口叠加错乱
• 弹窗显示期间左侧 Canvas 监控加载失败时，左侧区域显示"摄像头信号丢失"占位，右侧详情不受影响

边界场景

• 弹窗展示期间传感器数据快速恢复正常时，弹窗不自动关闭，需用户手动操作
• 同一实验室在弹窗未处理状态下再次触发相同预警时，不重复弹出新弹窗（防抖机制）

---

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

正常场景

弹窗层级与整体显示

• 点击预警弹窗"🚪 应急疏散"按钮后，应急疏散弹窗全屏弹出，z-index 高于预警弹窗，两层弹窗同时可见且互不遮挡
• 应急疏散弹窗弹出时有进场动画效果，动画流畅无卡顿，深蓝科幻风格与大屏整体主题一致
• 标题栏显示"应急疏散"文字，字体样式、颜色与设计规范一致
• 右上角关闭按钮点击后仅关闭应急疏散弹窗，底层全屏预警弹窗保持完整可见
• 弹窗内各区域（左侧SVG、右侧监控、底部操作栏）布局清晰，无错位、无遮挡

SVG 平面图

• 左侧 SVG 平面图以深蓝科幻风格正确渲染，楼层房间布局（A101–A109）各房间位置、尺寸与设计稿一致
• 触发预警的告警房间以红色边框高亮标注，高亮房间编号与预警弹窗中的实验室信息完全一致
• 同时存在多个告警房间时，所有告警房间均以红色边框高亮显示，无遗漏
• 疏散路线关键途经房间以蓝色边框标注，蓝色边框与红色告警边框视觉区分明确
• 走道区域集合点以圆形标记显示，标记位置合理且不遮挡房间标签
• 蓝色虚线箭头同时指向走道两端紧急出口（双向疏散路线），箭头方向清晰无歧义
• SVG 右上方"应急疏散路线图"图例完整显示，红色=告警房间、蓝色=疏散路线的颜色语义与图形一致
• 走道区域颜色与房间区域颜色有明显视觉区分，整体层次清晰

右侧视频监控区

• 右侧纵向排列 3 路视频监控占位区，每路高宽比为 16:9，各路等宽等高排列整齐
• 每路监控占位区上方含"楼道 2层"楼层分区标签，标签位置与对应监控区左对齐
• 3 路监控均以 Canvas 模拟画面形式展示，画面内有动态模拟内容，不显示纯黑色空白

底部告警指标明细

• 底部左侧告警指标明细区按"指标名称 | 当前值 | 阈值"格式逐行展示所有超限指标
• 告警指标明细中的数值与预警弹窗中显示的异常信息完全一致，数据来源统一

底部语音广播区

• 播放设备选择按钮点击后展开设备列表，列表中显示所有可用播放设备名称
• 选择某播放设备后，按钮文字更新为已选设备名称，并高亮显示选中状态
• 喊话内容输入框支持文字输入，字符实时显示，输入响应无延迟
• 点击"发送"按钮后，喊话内容成功提交，输入框内容自动清空，发送按钮短暂禁用（约 2 秒）防重复提交
• 发送成功后输入框恢复可用状态，可继续输入并再次发送

底部操作按钮

• 底部右侧"稍后处理"按钮点击后，应急疏散弹窗关闭，焦点返回至底层全屏预警弹窗
• 底部右侧"执行疏散"按钮点击后，疏散指令成功下达，按钮立即变为禁用状态（置灰），界面显示"疏散指令已下达"反馈提示
• "执行疏散"触发后，疏散操作记录（含操作时间、触发人员信息）正确写入系统日志

异常场景

语音广播异常

• 喊话内容为空时点击"发送"，按钮不可点击或点击后显示"请输入喊话内容"提示，不提交空请求
• 播放设备列表为空时，设备选择按钮置灰并显示"无可用设备"，"发送"按钮同步禁用，不可点击
• 喊话内容发送网络请求失败时，按钮恢复可点击状态，页面显示"发送失败，请重试"提示，输入内容不丢失
• 播放设备下发指令失败时，界面给出明确错误提示，不显示发送成功反馈

SVG 平面图异常

• 左侧 SVG 平面图资源加载失败时，左侧区域显示"平面图加载失败"占位提示，右侧监控区及底部操作栏功能不受影响
• SVG 渲染过程中某房间节点数据缺失时，该房间显示为灰色占位，不影响其他房间和路线渲染

视频监控异常

• 右侧 3 路监控中某路 Canvas 加载失败时，该路显示"信号丢失"占位，其余两路正常显示
• 3 路监控全部加载失败时，右侧区域各路均显示"信号丢失"占位，布局不塌陷

疏散指令异常

• 点击"执行疏散"后网络请求失败时，按钮恢复可点击状态，界面显示"指令下达失败，请重试"，不记录无效疏散日志
• 告警指标明细数据接口返回异常时，该区域显示"数据获取失败"占位，不影响语音广播和操作按钮功能

边界场景

喊话字符限制

• 喊话内容输入恰好达到最大字符上限时，输入框停止接受新字符，输入框边框标红并在下方显示"已达字符上限（XX/XX）"提示
• 喊话内容输入仅 1 个字符时，点击"发送"应正常提交，不因字数过少被拦截
• 喊话内容输入包含特殊字符（如 & < > " '）时，提交后不出现 XSS 注入或显示异常

多告警与疏散状态

• 同时有多个房间触发告警时，SVG 平面图多个告警房间同时红色高亮，疏散路线覆盖所有告警位置
• 疏散路线途经多个节点房间时，所有关键节点房间均以蓝色边框标注，路线连续无断点
• 连续多次点击"执行疏散"按钮（快速双击），系统仅记录一次疏散操作，不重复下达指令（防抖机制）

弹窗状态重置

• 关闭应急疏散弹窗后再次点击"🚪 应急疏散"，弹窗重新正常打开，喊话输入框已清空、设备选择恢复默认状态
• 执行疏散后关闭弹窗，再次打开时"执行疏散"按钮恢复可点击状态，不保留上次禁用状态

设备数量边界

• 播放设备列表仅有 1 台设备时，设备选择按钮自动选中该设备，无需手动选择
• 播放设备列表有 10 台以上设备时，设备选择下拉列表支持滚动查看，不出现列表溢出遮挡

分辨率适配

• 在 9600×2800px 分辨率下，应急疏散弹窗各区域（SVG、监控、底部栏）布局比例与设计稿一致，无溢出
• 在低于 9600×2800px 的显示器上，弹窗内容可正常访问，必要时出现内部滚动条，不遮挡操作按钮

---

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

正常场景

• 整体布局采用 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)
• ECharts 版本为 5.4.3，所有图表基于该版本 API 渲染，无控制台版本兼容警告
• 页面为单一 HTML 文件，内联 CSS + JavaScript，无构建工具依赖，双击 HTML 可直接在浏览器中运行

异常场景

• 浏览器不支持 Fullscreen API 时，页面正常显示，不出现白屏、黑屏或 JS 报错，且提示用户手动全屏
• ECharts 资源加载失败时，对应图表区域显示"图表加载失败"占位块，不影响其他模块渲染
• 多个动效（border-beam、图表动画、滚动列表）同时运行时，页面帧率保持流畅，无明显卡顿

边界场景

• 在 9600×2800px 分辨率设备上，各模块排版无错位、内容无溢出、文字无截断
• 在低于 9600×2800px 分辨率的普通显示器上，页面不强制缩放，滚动条正常出现，可浏览全部内容
• 页面持续运行 8 小时以上，各实时刷新模块（时钟、传感器数据、预警通知）不出现因内存泄漏导致的性能退化
• 快速切换至其他标签页再切回时，所有实时动效与数据刷新自动恢复，不出现动画卡死