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

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

**3区（区域占比4.5）**
3区固定显示实时监控视图，不再切换，分为左、右两个内容区：
- 实时监控
主要为用户提供实验室实时监控查看功能，分为左、右两个内容区：
**左侧**：
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模拟），右侧显示异常信息详情，参考科幻电影中系统报警样式。

# 设计规范
- 设计分辨率：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
- 不要简单的框线图
