DEMO解析第八期：领导驾驶舱之IT行业

复制链接 | 收藏本帖

10666

楼主

一、页面分析
1、整体简介

主题表：DM_ENTERPRISE_AREA，rand()函数产生随机数

页面结构：宽百分比，高固定826px

页面一览：

2、模块详解
1) 整体健康状态

左侧显示了系统运行状态是否健康（绿色健康，黄色预警，红色危险），以及系统稳定运行时长。右侧是环饼图，四个指标分别展示了系统四个方面的运行状态。

左上方使用图片和文本组成，左下方是表格。右边是由饼图和gif动图构成。

2) 计算存储状况

左边3个指标展示了机房的静态指标：机柜数量，服务器数量，存储台数。右边3个指标展示了机房的动态指标：容量使用率，VM分配率，CPU分配率。

右边的指标均为百分比，因此使用了环饼图表达了占比情况。

3) 健康状态分布

用渲染地图展现了各地区健康指数的分布情况：蓝色为健康指数大于80的地区，蓝绿色地区的健康指数为60~80，低于60的为黄色区域。

此地图运用的是html5渲染图。

4) 存储利用率

此区域展示了两种方式的存储利用率及总存储量，已分配率，已使用率。

上面两个是圈饼图加gif动图，和第一部分的健康指数做法相同。下面是表格加迷你图。

二、脚本说明
脚本1：更改滚动条样式
脚本中引用了js脚本文件，文件的存储在资源管理器中(路径为：vfs/root/demojs/slimscrollbody.js)。

//更改滚动条样式
addStyleSheet("#BODYAREA{overflow:hidden !important}");
addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#091531 !important;}");
include("vfs/root/demojs/slimscrollbody.js");

复制代码

三、配色信息

背景：图片

大标题：#FFFFFF 18px

小标题：#FFFFFF 16px

边框：# 163D75

文字：#D4D6DD

整体健康状态/计算存储状况/健康状态分布

黄色：# EFC417

绿色：# 4ECC5B

浅蓝：# 00DEFF

深蓝：# 2B7BE8