# 中国安全生产科学研究院实验室安全智慧化管控中心 — 数据可视化大屏开发 Prompt ## 角色定义 你是一名资深前端开发工程师，擅长数据可视化大屏开发，精通 HTML/CSS/JavaScript、ECharts 图表库、CSS 动效设计。你需要根据以下完整的产品设计文档，生成一个**单文件 HTML 数据可视化大屏**项目。 --- ## 项目基本信息 | 项目 | 说明 | |------|------| | **项目名称** | 中国安全生产科学研究院实验室安全智慧化管控中心 | | **项目类型** | 数据可视化大屏（单文件 HTML） | | **设计分辨率** | 1920 × 1080px | | **主题风格** | 科技蓝 + 科幻风 | | **目标用户** | 中国国内科研院所实验室安全管理人员 | | **技术栈** | 原生 HTML/CSS/JS + ECharts 5.5.0 + Ant Design Reset CSS | | **外部依赖** | 本地引用 `libs/reset.css`（Ant Design Reset）、`libs/echarts.min.js`（ECharts 5.5.0） | --- ## 设计规范 ### 色彩体系 ``` 主背景色: #020c1b → #061630 → #0a2550 (深蓝渐变) 面板背景: rgba(6, 22, 56, 0.82)（毛玻璃效果, backdrop-filter: blur(8px)） 面板边框: rgba(72, 180, 255, 0.28) 主文字色: #d8f4ff 辅助文字色: #7eacc8 强调色: #48d7ff（科技蓝） 强调色2: #3a7bff（深蓝） 安全色: #36d399（绿色，空闲/正常） 警告色: #ffb020（橙黄，预警） 危险色: #ff4d4f（红色，异常/报警） 实验室安全等级配色（教育部标准）: I级(红): #ff4d4f II级(橙): #ff8c00 III级(黄): #ffcc00 IV级(蓝): #3a7bff ``` ### 字体 ``` font-family: "DIN Alternate", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif; ``` ### 通用面板样式 - 圆角 6px，内边距 14px 16px - 顶部 2px 渐变高亮线（accent 色） - 四角装饰元素（corner-deco），带呼吸动画 - 面板标题左侧 3px 竖线高亮条 - 面板 box-shadow 呼吸发光效果 --- ## 页面结构 项目包含 **两个页面**，通过顶部导航栏按钮切换（JS 控制 `display`，无路由）： 1. **实验室情况**（默认页面） 2. **视频监控** ### 通用导航栏（两个页面共享） | 位置 | 内容 | |------|------| | **左侧** | 项目标题「中国安全生产科学研究院实验室安全智慧化管控中心」，渐变文字（白→科技蓝） | | **中间** | 两个页面切换按钮：「实验室情况」（默认选中）、「视频监控」 | | **右侧** | 天气信息 + 星期 + 实时时钟（HH:MM:SS，每秒更新） | 导航栏高度 72px，底部有渐变分割线 + 流光动画。 --- ## 页面一：实验室情况（三栏布局） 整体布局为左（440px）、中（自适应）、右（440px）三栏，间距 14px。 ### 左栏模块（由上到下） #### 1.1 实验室基本情况统计（固定高度 260px） **环形图**（ECharts pie, radius ['45%','70%']）： - 展示实验室总数（中心标注数字 + "实验室总数"） - 四个分级占比：I级(红)、II级(橙)、III级(黄)、IV级(蓝) - 右侧纵向图例 **状态卡片**（3个并排）： - 使用 XX 间（科技蓝色） - 异常 XX 间（红色） - 空闲 XX 间（绿色） - 卡片带呼吸发光动画，stagger 间隔 1.3s #### 1.2 实验室安全分级统计（flex:1 自适应高度） **堆叠柱状图**（ECharts bar, stack）： - X 轴：各二级单位名称（换行显示），名称下方显示该单位实验室总数 - Y 轴：实验室数量 - 四组堆叠数据：I级、II级、III级、IV级 - 图例显示在顶部 - **自动滚动**：使用 `dataZoom` 实现，每 5 秒向右滚动一个单位，初始显示 6 个单位，超出后循环 #### 1.3 实验室进入人数统计及走势（固定高度 280px） **数字翻牌器**（两组并排）： - 今日总进入人数（5位数字） - 当前实验人数（4位数字） - 每个数字为独立方块（32×42px），渐变背景 + 边框发光 **折线图**（ECharts line, smooth）： - 双折线：进入人数（科技蓝）、实验人数（深蓝） - X 轴：0:00 ~ 24:00 共 9 个时段 - 面积填充渐变 ### 中栏模块（由上到下） #### 1.4 实验环境安全智能感知（flex:1 自适应高度） **自动滚动列表**： - 使用 CSS `translateY(-50%)` + 数据翻倍实现无缝滚动，速度 40s 一轮 - 每条数据包含： - 实验室名称（房号）+ 所属二级单位 - 5 个传感器值：温度、湿度、TVOC、CO₂、O₂ - 异常值判定规则： - 温度 > 30°C - TVOC > 1.5 mg/m³ - CO₂ > 900 ppm - O₂ < 19.5% - 异常时：高亮红色 + ⚠ 报警图标 + 脉冲 box-shadow 动画 #### 1.5 实验室实时风险预警（固定高度 320px） **预警统计**：本月预警响应总数（大字数字 + 发光文字动画） **滚动预警列表**： - 无缝循环滚动（30s 一轮） - 每条数据： - 实验室名称 - 二级单位 - 异常传感器及数值（橙色高亮） - 预警时间（YYYY-MM-DD HH:mm:ss） - 左侧 3px 橙色竖条 + 脉冲动画 ### 右栏模块（由上到下） #### 1.6 智能环境感知应用设备统计（flex:1） **顶部统计卡片**（2个并排）： - 在线设备数量（科技蓝） - 离线设备数量（灰色） **下部左侧**：仪表盘（ECharts gauge） - 展示设备在线率百分比 - 210° ~ -30° 范围，三段颜色（70% 暗蓝, 90% 中蓝, 100% 亮蓝） **下部右侧**：设备类型列表（4项纵排） - 电子信息铭牌、化学品智能终端、传感器、智能设备 - 各自对应数量 #### 1.7 实验室设备分类及使用统计（flex:1） **饼图**（ECharts pie, radius ['30%','60%']）： - 7 类设备分类：分析仪器、安全防护、化学试剂设备、电气设备、力学测试、环境监测、通用设备 - 右侧纵向图例 **中部统计**（3个并排卡片）： - 设备总数、使用总时长(h)、设备使用率(%) **底部状态统计**（4个并排卡片）： - 使用(蓝)、空闲(绿)、正常(橙)、维修(红) --- ## 页面二：视频监控（两栏布局） ### 左侧导航栏（300px，panel 样式） | 组件 | 说明 | |------|------| | **标题** | "建筑结构导航" | | **搜索框** | 可搜索楼栋/楼层，聚焦时边框发光 | | **筛选下拉** | 按二级单位筛选（安全技术研究所、职业安全研究所、化学品安全研究所、矿山安全研究所） | | **树状结构** | 可展开/折叠，层级为：院区 → 楼栋 → 楼层 → 房间 | 树节点交互： - 点击展开/折叠子节点 - 选中节点高亮（科技蓝背景 + 左侧竖线） - 悬停光扫效果（light sweep） - 子节点展开时有淡入动画 - 箭头展开时变色发光 ### 右侧视频区域（flex:1） | 组件 | 说明 | |------|------| | **面包屑** | 显示当前路径：院区 → 楼栋名称 → 楼层名称 | | **视频网格** | 3×3 九宫格，每个格子为一个摄像头 | | **分页** | 上一页 / 第 X / Y 页 / 下一页 | **摄像头格子（cam-frame）科幻风边框设计**： - 外层渐变背景（科技蓝半透明）+ 内外双层边框 - 四角 L 形发光装饰（cam-corner），带呼吸动画（stagger 间隔 0.6s） - 内部扫描线纹理（repeating-linear-gradient） - 摄像头内移动扫描线动画（6s 周期） - 左上角显示在线状态圆点（绿色闪烁）+ 摄像头编号 - 框体整体呼吸发光动画（4s 周期） - 悬停时轻微放大 + 增强发光 - 九宫格 stagger 入场动画（每格延迟 0.05s） **AI 智能摄像头**（每页第一个）： - 橙金色主题替代蓝色 - 右上角 "AI 智能" 徽章（渐变背景 + 脉冲动画） - 内部扫描线改为橙色 --- ## 全屏预警弹窗 当传感器数据超出阈值时触发，参考科幻电影系统报警风格。 ### 弹窗结构（900px 宽） **覆盖层效果**： - 全屏半透明红色覆盖 + 呼吸闪烁 - 四周大面积红色光晕（inset box-shadow），1s 周期快速明暗交替 - 四边红色光边框闪烁（0.8s 周期） **弹窗内容（左右布局）**： 左侧信息区（flex:1）： | 字段 | 说明 | |------|------| | 实验室 | 实验室名称（房号） | | 楼栋楼层 | 楼栋-楼层 | | 所属单位 | 二级单位名称 | | 异常参数 | 异常传感器名称（红色高亮） | | 当前数值 | 异常数值（红色高亮） | | 实验室负责人 | 负责人姓名 | | 联系电话 | 负责人电话 | | 预警时间 | YYYY-MM-DD HH:mm:ss | 右侧视频区（320px）： - 标题 "实时监控画面" + 红色闪烁圆点 - 实时监控画面区域（暗红色背景 + 扫描线纹理） - 左上角 REC 标识 + 摄像头名称 **底部**：确认按钮（红色渐变，悬停发光） ### 触发方式 JS 函数：`showAlert(lab, building, unit, param, value, person, phone)` --- ## 动效与光效规范 ### 面板动效 - 面板 box-shadow 呼吸发光（`panelGlow`, 4s 周期） - 面板顶部水平扫描线（`panelScan`, 6s 周期，各面板 stagger 延迟） - 面板四角装饰呼吸动画（`cornerBreathe`, 3s 周期） - 面板标题左侧竖条发光脉冲（`titleBarGlow`, 2.5s） ### 导航栏动效 - 底部边缘流光（`navFlow`, 4s） - 标题文字 drop-shadow 脉冲（`titleGlow`, 3s） - 时钟 text-shadow 脉冲（`clockPulse`, 2s） - 选中 Tab 发光呼吸（`tabGlow`, 2.5s） ### 数据卡片动效 - 状态卡片呼吸（`cardBreathe`, 4s, stagger 1.3s） - 翻牌器数字发光（`digitGlow`, 2s） - 设备类型项悬停位移 + 边框发光 - 各统计卡片悬停上浮 + 发光 ### 列表动效 - 传感器条目入场淡入（`sensorFadeIn`, 0.5s） - 预警条目左边框脉冲（`warnBorderPulse`, 3s） - 预警总数数字发光（`warnCountGlow`, 2s） - 报警图标摇晃（`alarmIconShake`, 0.5s） ### 视频监控页动效 - 页面入场淡入上浮（`videoPageFadeIn`, 0.6s） - 侧边栏垂直扫描线（`sidebarScan`, 5s） - 侧边栏左边缘发光呼吸（`sidebarEdgeGlow`, 3s） - 搜索框/筛选框聚焦发光 + 空闲脉冲 - 树节点悬停光扫 + 选中节点蓝光脉冲（`treeSelectedGlow`, 2.5s） - 树节点展开淡入（`treeExpand`, 0.35s） - 面包屑底部流光（`breadcrumbFlow`, 5s）+ 文字微光呼吸 - 视频网格边框呼吸（`videoGridBreathe`, 5s）+ 技术网格背景 - 视频网格水平扫描线（`gridScanLine`, 8s） - 摄像头格子 stagger 入场（`camCellEntrance`, 0.5s） - 摄像头角标发光呼吸（`camCornerGlow`, 2.5s, stagger 0.6s） - 摄像头框体呼吸（`camFrameBreathe`, 4s） - 摄像头内扫描线（`camInnerScan`, 6s） - 在线圆点闪烁（`dotBlink`, 2s） - AI 徽章脉冲（`aiBadgePulse`, 1.5s） - AI 框体特殊橙色呼吸（`aiFrameBreathe`, 3s） - 翻页按钮悬停光扫 + 空闲边框呼吸（`pageBtnPulse`, 4s） - 右侧背景漂浮微粒子（`videoParticlesDrift`, 12s） ### 全局背景 - 技术网格覆盖层（半透明网格线） - 浮动粒子效果（`particleDrift`, 20s） --- ## 通用功能要求 ### 自适应缩放 - 设计稿固定 1920×1080px - 通过 JS 计算 `Math.min(vw/1920, vh/1080)` 缩放比 - 使用 CSS `transform: scale()` 居中缩放 - 监听 `resize` 事件实时更新 ### 自动全屏 - 首次点击页面时调用 `requestFullscreen()` - 使用 `{ once: true }` 确保只触发一次 ### 页面切换 - JS 函数 `switchPage('lab' | 'video')` - 切换时更新 Tab 选中状态 + 页面显示 - 切回实验室页面时重新初始化 ECharts（延迟 100ms） ### ECharts 图表 - 统一 tooltip 样式：深色背景 `rgba(6,22,56,0.9)` + 蓝色边框 - resize 时所有图表调用 `.resize()` - 图表初始化延迟 200ms（等待 DOM 渲染） --- ## 文件结构 ``` project/ ├── index.html # 主文件（单文件，包含全部 CSS + JS） └── libs/ ├── reset.css # Ant Design 5.28.0 Reset CSS └── echarts.min.js # ECharts 5.5.0 ``` --- ## 输出要求 1. 输出**单个完整的 HTML 文件**，所有 CSS 写在 `