anKeYuan-largeScreen-9600/prompt/9600prompt.md

你是一名经验丰富的UI设计专家，精通高等院校实验室安全智能监测与管控中心系统的整体设计。 目前你来负责建设数据可视化大屏项目【实验室安全智能监测与管控中心】的UI设计。 请根据以下功能描述，生成完整的UI设计稿，设计组件采用ant design，图表采用echarts。

总体要求

IDEA：实验室安全智能监测与管控中心 LOGO：图标，中国安全生产科学研究院 THEME：深蓝科幻风，边框流动效果，内容布局的每个模块设计动效图标（数据可视化大屏） CONTENT： 整体项目为一个页面。

首页功能说明

0.整体布局

整体数据可视化大屏分为顶部导航栏、内容区域（1区、2区、3区、4区布局从左到右按照2:1.5:4.5:2划分），每个区域由上到下分别显示不同内容区块，具体排版内容如下： 顶部导航栏：

• 顶部导航栏（左侧显示实时时钟、星期，中间居中显示LOGO及单位名称、大标题，右侧显示天气信息） 1区（由上到下）：
• 实验室基本情况统计
• 实验室安全分级统计
• 实验室进入人数统计及走势 2区（由上到下）：
• 智能环境感知应用设备统计
• 实验室设备分类及使用统计 3区（由上到下）：
• 实时监控 4区（由上到下）：
• 实验环境安全智能感知
• 实验室实时风险预警

1.顶部导航栏

导航栏在整个页面最上面，分为三栏：

• 左侧：显示实时时钟（时:分:秒）及日期星期
• 中间居中：LOGO图标 + 单位名称（中国安全生产科学研究院）+ 竖向分隔线 + 大标题"实验室安全智能监测与管控中心"
• 右侧：显示天气信息（城市/天气状况、温度、AQI）
• 导航栏不含切换按钮

2.内容区域

1区（区域占比2）

• 实验室基本情况统计 整体划分为上下两部分，上部占80%，下部占20%： 上部按左右4:6划分： 左侧（4）：实验室总数统计，使用SVG圆弧仪表图形展示，图形中心显示总数128间，下方配分级比例色条（I~IV级对应红橙黄蓝） 右侧（6）：分级统计，使用环形图（donut chart）展示各分级占比及数量，图表外侧标注各级名称、数量（间）、百分比，图表圆心显示总数，右侧配彩色左边框明细行（I~IV级） 下部（20%）：横向三栏状态徽章，显示使用、异常、空闲三种实验室状态的实时数量，单位为间

• 实验室安全分级统计 用于统计安科院各二级单位的实验室总数及分级数据，采用堆叠柱状图： 1.显示图例（I~IV级，颜色红橙黄蓝） 2.图形采用堆叠柱状图，一屏显示6个柱子 3.x轴为二级单位名称，在单位名称下显示该二级单位实验室总数 4.Y轴为实验室数量 5.整体图表自动滚动，当X轴值超出显示范围时，自动从右往左滚动，滚动间隔5s，每次滚动1个X轴数据

• 实验室进入人数统计及走势 数字翻牌器形式展示今日总进入人数及当前正在实验人数（两个数字翻牌器在一行），并在下方以折线图表形式统计与展示当天0-24点9个分隔时段的实验室进入人数及当前实验人数走势。

2区（区域占比1.5）

• 实验室设备分类及使用统计 分为上、下两部分区域布局按4:6展示： 上部使用环形图统计展示所有实验室设备分类及分布情况，环形图右侧显示各设备分类的颜色标识（圆形色块）及对应分类名称与数量（台）、占比。 下部从上到下排列展示，上方3网格统计展示实验室设备总数、使用总时长、设备使用率。 下方左右两个饼图：左侧饼图标题"设备状态统计"、右侧饼图标题"使用状态统计"，标题居中显示在饼图上方，样式采用青色发光字体（color:var(--cyan)）、字间距3px、底部细分隔线，视觉上紧贴饼图顶部。两个饼图均不显示侧边图例，数据标注（名称+数量+占比）直接显示在饼图扇区外侧引线处。左侧按设备状态（正常、维修、报废）统计展示；右侧按使用状态（使用、空闲）两类统计展示。 标注 设备状态统计：正常+维修+报废=设备总数 使用状态统计：使用数+空闲数=正常状态数 设备使用率（当月）=使用数➗（使用数+空闲数）

• 化学品库存动态统计 仅用一个饼图统计管控化学品与非管控化学品的库存量及占比，数据标注（分类名称+数量(L)+占比）直接显示在饼图扇区外侧引线处，不设Tab切换。 右侧统计区展示存量化学品总量（单位L）、管控类化学品总量及占比、非管控类化学品总量及占比、存量化学品总类目数，管控类使用红色系、非管控类使用青色系、总类目数使用金色系配色，各含SVG圆弧进度环。 所有化学品数量单位统一为L。

• 智能环境感知应用设备统计 顶部统计显示布设的智能物联应用设备图标及在线、离线数量。 下部左侧显示速度仪表盘样式的使用图表，展示设备在线率百分比。 下部右侧以3+2布局（上3下2，居中对齐）展示电子信息铭牌、化学品智能终端、传感器、智慧摄像头、其他智能设备总数。

3区（区域占比4.5） 主要为用户提供实验室实时监控查看功能，固定实验室9宫格和全部实验室监控切换展示，首个摄像头均为 AI 智能摄像头，可识别标注危险行为。 标题栏右侧提供两个标签切换按钮：”默认”和”全部”。

• 固定实验室9宫格（默认视图） 页面加载后默认展示后台配置的固定9宫格实验室实时监控画面，充满整个3区，无侧边栏，”默认”标签高亮激活。
• 全部实验室监控 点击”全部”标签可查看所有实验室监控，支持分页浏览。点击”默认”标签回到固定9宫格页。分为左、右两个内容区： 左侧： 1.搜索框，可搜索楼栋楼层。 2.二级单位下拉筛选项。 3.建筑结构树状图，可展开折叠和选择，根节点为院区、楼栋、楼层、房间。 右侧： 1.标题居左显示院区 > 楼栋名称 > 楼层名称，右侧显示翻页按钮 2.显示9宫格16:9的实验室实时监控摄像头实时视频（Canvas模拟），其中第一个摄像头为智能摄像头，标注危险行为检测框

4区（区域占比2） 内容区域上下比例为7:3：

• 实验环境安全智能感知（占7） 显示每间实验室硬件和传感器的实时监测情况，若有异常需标红并触发预警弹窗。 区域内由下而上滚动展示所有实验室条目。 每个实验室条目包括：实验室名称（房号）-二级单位、传感器图标、实时状态数值（温度、湿度、TVOC、CO₂、O₂等），发生异常时高亮红色渐变效果显示报警图标及数值。

• 实验室实时风险预警（占3） 滚动轮播本月实验室发生异常预警通知，包括应急风险预警（🚨 应急标识）、危化品违规带离（☣️ 危化品标识）两种类型，预警区域字体颜色使用琥珀/橙色调高亮，最新通知在最上面。 面板标题栏右侧显示两类预警的累计计数器（应急次数、违规带离次数），以大字号数值突出展示。

  • 应急风险预警通知：每条数据包括实验室信息（实验室名称（房号）-二级单位）、异常传感器及对应值、预警时间（日期-时-分-秒）。
  • 危化品违规带离预警：每条数据包括实验室信息（实验室名称（房号）-二级单位）、实验人员未正常使用违规带离、预警时间（日期-时-分-秒）。 标注 危化品违规带离人员判定：触发报警时，开启柜门的人员。

通用功能

• 整体分辨率：设计稿要求9600×2800px，按固定像素显示，不使用transform:scale缩放。
• 自动全屏：初次进入页面时默认全屏显示。
• 整体框架、导航栏及每个模块等所有边框增强设计感，需要有动态的路径流动效果（border-beam动画）。
• 四角装饰线：每个模块四角配科幻装饰线框。
• 全屏预警弹窗：当传感器监测数据超出阈值，需全屏弹窗红色预警，左侧显示该实验室监控画面（900×700，Canvas模拟），右侧显示异常信息详情，参考科幻电影中系统报警样式。弹窗底部除"稍后处理"和"确认处理"外，新增琥珀色"🚪 应急疏散"按钮。
• 应急疏散弹窗：点击"应急疏散"按钮后，弹出独立全屏弹窗（z-index更高），包含：
  • 标题栏"应急疏散" + 关闭按钮
  • 左侧SVG平面图（深蓝科幻风）：显示楼层房间布局（A101–A109），告警房间红色边框高亮，疏散路线关键房间蓝色边框，走道区域含集合点圆形标记，蓝色虚线箭头指向两侧紧急出口，右上方展示"应急疏散路线图"图例
  • 右侧纵向排列3路实时视频监控占位区，含"楼道 2层"楼层分区标签
  • 底部：左侧告警指标明细（指标名称+当前值/阈值）、中部语音广播区（播放设备选择按钮+喊话内容输入框+发送）、右侧"稍后处理"与"执行疏散"操作按钮

设计规范

• 设计分辨率：9600×2800px（UI元素尺寸均按此分辨率设计，约为1920×1080的2.5倍）
• 主色调：深蓝科幻风（--bg-deep:#030e1f，--blue:#1e90ff，--cyan:#00d8ff，--gold:#ffd740）
• 字体：PingFang SC / Microsoft YaHei / Noto Sans SC
• 图表库：ECharts 5.4.3
• 布局：CSS Grid（grid-template-columns:2fr 1.5fr 4.5fr 2fr）
• 面板圆角：15px，边框：rgba(30,144,255,0.22)

输出要求

• 输出完整HTML文件，内联CSS+JavaScript，无需构建工具
• 项目针对对象为中国国内科研院所
• 大师级专业设计风格，动效流动丝滑，布局排版有呼吸感，配色专业高级，有科技含量的舒适UI
• 不要简单的框线图