中国安全生产科学研究院实验室安全智慧化管控中心 — 数据可视化大屏开发 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，无路由）：

实验室情况（默认页面）
视频监控

通用导航栏（两个页面共享）

位置	内容
左侧	项目标题「中国安全生产科学研究院实验室安全智慧化管控中心」，渐变文字（白→科技蓝）
中间	两个页面切换按钮：「实验室情况」（默认选中）、「视频监控」
右侧	天气信息 + 星期 + 实时时钟（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

输出要求

输出单个完整的 HTML 文件，所有 CSS 写在 <style> 标签内，所有 JS 写在 <script> 标签内
外部依赖通过本地相对路径引用（libs/reset.css、libs/echarts.min.js）
使用 Demo 模拟数据填充所有模块，确保页面打开即有完整展示效果
所有动效通过 CSS @keyframes 实现，不使用第三方动画库
预警弹窗在页面加载 15 秒后自动触发一次（Demo 演示用）
代码结构清晰，使用注释分隔各模块（CSS 区块 / HTML 区块 / JS 区块）
中文界面，所有标签和文案使用简体中文

prompt_rewritebyCC.md 12 KB Постійне посилання Історія Запис