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

10001
6

方菁 小试身手Lv3

发表于2018-8-17 14:32

楼主
一、页面分析
1、整体简介
主题表:DM_ENTERPRISE_AREA,rand()函数产生随机数
页面结构:宽百分比,高固定826px
页面一览:
IT行业.gif

2、模块详解
1) 整体健康状态
左侧显示了系统运行状态是否健康(绿色健康,黄色预警,红色危险),以及系统稳定运行时长。右侧是环饼图,四个指标分别展示了系统四个方面的运行状态。
左上方使用图片和文本组成,左下方是表格。右边是由饼图和gif动图构成。

2) 计算存储状况
左边3个指标展示了机房的静态指标:机柜数量,服务器数量,存储台数。右边3个指标展示了机房的动态指标:容量使用率,VM分配率,CPU分配率。
右边的指标均为百分比,因此使用了环饼图表达了占比情况。

3) 健康状态分布
用渲染地图展现了各地区健康指数的分布情况:蓝色为健康指数大于80的地区,蓝绿色地区的健康指数为60~80,低于60的为黄色区域。
此地图运用的是html5渲染图。

4) 存储利用率
此区域展示了两种方式的存储利用率及总存储量,已分配率,已使用率。
上面两个是圈饼图加gif动图,和第一部分的健康指数做法相同。下面是表格加迷你图。

二、脚本说明
脚本1:更改滚动条样式
脚本中引用了js脚本文件,文件的存储在资源管理器中(路径为:vfs/root/demojs/slimscrollbody.js)。
  1. //更改滚动条样式
  2. addStyleSheet("#BODYAREA{overflow:hidden !important}");
  3. addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
  4. addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#091531 !important;}");

  5. include("vfs/root/demojs/slimscrollbody.js");
复制代码

三、配色信息
背景:图片
大标题:#FFFFFF 18px
小标题:#FFFFFF 16px
边框:# 163D75
文字:#D4D6DD
整体健康状态/计算存储状况/健康状态分布
         黄色:# EFC417
         绿色:# 4ECC5B
         浅蓝:# 00DEFF
         深蓝:# 2B7BE8
         地图边框:#2366C9
存储利用率
         总存储:# 4D8BE2
         已分配:# 08A9CF
         已使用:# 3F9E5F
         未完成:# 1B3468

四、资源文件
1、 报表资源
    备份IT.png
    说明:.rptttpl后缀文件新建空报表后如下图所示上传
   

2、 图片资源
    直接上传到资源管理器,默认的路径:
    /root/products/ebi/sys/picture/pcdemo/领导驾驶舱/IT行业
    注意:可以压缩为zip文件后上传。路径不要轻易修改,报表中在引用时使用了文件路径。

3、 脚本资源
    slimscrollbody.js
    直接上传到资源管理器,默认的路径:/root/demojs
    注意:路径不要轻易修改,报表中在引用时使用了文件路径

4、 资源文件
IT行业备份.rar (185.1 KB, 下载次数: )

最近看过此主题的会员

980

wulili

张名

哇咔咔01

灰龙

ddb

阿铭啊

hee

18830298917

小林子在这呢lfy

wuq

kudo23

6个回答

只看楼主

desire 初学数据Lv2

发表于2018-8-17 14:40

只看该作者

取消 关注该作者的回复

沙发

动效不错

韦韬然 数据老手Lv5

发表于2018-8-17 14:41

只看该作者

取消 关注该作者的回复

板凳

yangqh 数据老手Lv5

发表于2018-8-17 14:47

只看该作者

取消 关注该作者的回复

地板

棒棒哒~期待更多

zfl785763663 初学数据Lv2

发表于2018-8-21 15:38

只看该作者

取消 关注该作者的回复

5#

guojin 数据小白Lv1

发表于2018-8-22 09:32

只看该作者

取消 关注该作者的回复

6#

棒棒哒~期待更多~~~~~~

lzg19861022 初学数据Lv2

发表于2019-1-14 18:27

只看该作者

取消 关注该作者的回复

7#

棒棒哒~期待更多

登录后可回答问题,请登录注册

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流