promptByStoney.md 5.3 KB
你是一名经验丰富的UI设计专家，精通高等院校实验室安全智慧化管控系统的整体设计。 目前你来负责建设数据可视化大屏项目【中国安全生产科学研究院实验室安全智慧化管控中心】的UI设计。 请根据以下功能描述，生成完整的UI设计稿，设计组件采用ant design，图表采用echarts。
IDEA：中国安全生产科学研究院实验室安全智慧化管控中心 THEME：科技蓝，科幻风（数据可视化大屏） CONTENT： 整体项目分为两个页面，一个是实验室情况（默认），另一个页面为视频监控。
实验室情况页面功能说明
0.整体布局
整体数据可视化大屏分为通用导航栏、内容区（左、中、右），每个区域由上到下分别显示不同内容区块，具体排版内容如下： 通用导航栏：
- 顶部导航栏 左侧（由上到下）：
- 实验室基本情况统计
- 实验室安全分级统计
- 实验室进入人数统计及走势 中部（由上到下）：
- 实验环境安全智能感知
- 实验室实时风险预警 右侧（由上到下）：
- 智能环境感知应用设备统计
- 实验室设备分类及使用统计
1.各模块功能说明
顶部导航栏： 导航栏在整个页面最上面，左侧区域显示标题，中间区域显示两个页面切换按钮（实验室情况（进入页面时默认选中）、视频监控（点击切换至视频监控页面），右侧显示实时时钟、星期、天气信息。
实验室基本情况统计： 实验室基本情况统计分为两个部分： 1.环形图 以环形图展示实验室总数及各分级占比（I~IV级）及各分级对应的数量，颜色采用教育部规定的高校实验室安全等级划分的红橙黄蓝。 2.状态标识 显示当前实验室实时状态数据，分为使用、异常、空闲，单位为间，例如，使用20间。
实验室安全分级统计 实验室安全分级统计用于统计安科院各二级单位的实验室总数及分级数据，采用堆叠柱状图来统计。 1.需要显示图例（I~IV级） 2.图形采用堆叠柱状图 3.x轴为二级单位名称，在单位名称下显示该二级单位实验室总数 4.Y轴为实验室数量 5.整体图表需要自动滚动，当X轴值超出显示范围时，自动从右往左滚动，滚动间隔5s，每次滚动渲染一个X轴数据
实验室进入人数统计及走势 数字翻牌器形式展示今日总进入人数及当前正在实验人数（两个数字翻牌器在一行），并在下方以折线图表形式统计与展示当天0-24点9个分隔时段的实验室进入人数及当前实验人数走势。
实验环境安全智能感知 该区域显示每间实验室硬件和传感器的的实时监测情况，若有异常需标红并触发预警弹窗。 区域内由下而上滚动展示所有实验室条目。 每个实验室条目包括实验室信息（实验室名称（房号）-二级单位）及传感器实时状态：温度、湿度、TVOC、CO2、O2等气体传感器实时监测状态数值，发生异常时，高亮显示报警图标及数值。
实验室实时风险预警 统计展示本月预警响应总数，并实时滚动轮播实验室发生异常预警通知，最新的通知在最上面。 每条数据包括实验室信息（实验室名称（房号）-二级单位）、异常传感器及对应值，预警时间（日期-时-分-秒）
智能环境感知应用设备统计 顶部统计显示布设的智能物联应用设备在线、离线数量。 下部左侧使用图表（速度仪表盘类）展示设备在线率百分比。 下部右侧展示电子信息铭牌、化学品智能终端、传感器、智能设备总数。
实验室设备分类及使用统计 顶部使用饼图统计展示所有实验室设备分类的数量及分布情况。 中部统计展示实验室设备总数、使用总时长、设备使用率。 底部分别统计不同使用状态的设备数：使用、空闲、正常、维修。
视频监控页面功能说明
视频监控页主要为用户提供实验室实时监控查看功能，用户可通过展开左侧树状建筑结构查看对应的实时监控，分为通用导航栏、内容区（左、右），具体排版内容如下： 通用导航栏：
- 顶部导航栏（同实验室情况页） 左侧：
- 搜索框，可搜索楼栋楼层
- 二级单位筛选项，点击下拉筛选二级单位
- 建筑结构树状图，可展开折叠和选择，树从根节点为院区、楼栋、楼层、房间 右侧：
- 标题居左显示院区->楼栋名称->楼层名称
- 显示9宫格16:9的实验室实时监控carema实时视频，其中第一个摄像头为智能摄像头，需要标注危险行为。
- 显示翻页按钮
通用功能：
- 自适应缩放：设计稿默认要求1920*1080px，需支持自动适配屏幕
- 自动全屏：初次进入页面时默认全屏显示
- 全屏预警弹窗：当传感器监测数据超出阈值，需全屏弹窗红色预警，参考科幻电影中系统报警样式。
- 页面切换，默认选中实验室情况按钮，点击视频监控按钮可切换至视频监控页面，在视频监控页面点击实验室情况可切回页面
输出要求
- 输出完成的可直接导入figma的可编辑的UI设计稿
- 项目针对对象为中国国内科研院所
- 提供优雅、配色舒服的UI