文档章节

基于HTML5的网络拓扑图

yidongkaifa
 yidongkaifa
发布于 2014/10/31 17:24
字数 659
阅读 1219
收藏 0

电信网管系统中,设备状态信息的实时展示非常重要,通常会挂载一堆图标来展示状态或告警信息,图标的信息量有限,有时需要更详细的面板,甚至以图表的形式展现,本文将结合最近客户提到的需求,使用 Qunee1.6 beta版本,实现拓扑图中设备信息的实时显示。 

Qunee 中ui 的定制非常灵活,每个图元节点都可以挂载多个 ui 控件,支持9X9=81种相对位置,单节点上能挂载多个 ui 元素,并进行排列和布局,另外每个 ui 元素可以绑定图元属性,属性变化,ui 元素会及时更新界面。 

网络设备数据流信息展示

需求分析
网络设备拓扑图,默认设备为普通节点,双击时展开,显示CPU,内存,流量等信息,使用柱状图和不同颜色的文字来展示,再双击变回普通节点 这里需要定制节点,普通模式下,节点包含图标和文字,展开模式下,节点主体变成一个圆角矩阵的面板,上面分布多个组件:图标,文字,柱状图等,其中柱状图可以参照之前 监控图例子中的BarUI,其他都有现成的组件可用,面板使用内置的Shape图形,图标依旧使用ImageUI,文字使用 LabelUI,位置分布则借助position和 anchorPosition 属性进行设置
CPU 柱状图的实现
此外,还需要将 CPU 的数值与柱状图绑定,这里用到Q.Element#addUI(ui, bindingProperties)函数,在第二个参数中设定数据绑定,如果有多个属性需要绑定可以使用数组,下面的例子将cpuBar的 data 属性与 node 的cpu属性进行了绑定,绑定后就可以通过node.set("cpu", 0.45)这样的方式对 ui 进行属性设置了

以 CPU 柱状图为例,左边是文字,右边是柱状图,文字向右对齐,柱状图左对齐

 ui位置布局

原文来自http://www.twaver.com.cn/xinwen/581
此外,还需要将 CPU 的数值与柱状图绑定,这里用到Q.Element#addUI(ui, bindingProperties)函数,在第二个参数中设定数据绑定,如果有多个属性需要绑定可以使用数组,下面的例子将cpuBar的 data 属性与 node 的cpu属性进行了绑定,绑定后就可以通过node.set("cpu", 0.45)这样的方式对 ui 进行属性设置了


© 著作权归作者所有

共有 人打赏支持
yidongkaifa
粉丝 4
博文 104
码字总数 78796
作品 0
东城
基于HT for Web的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和...

xhload3d
2015/03/18
0
2
基于HTML5的网络拓扑图(1)

什么是网络拓扑 网络拓扑,指构成网络的成员间特定的排列方式。分为物理的,即真实的、或者逻辑的,即虚拟的两种。如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内...

nosand
2014/03/25
0
0
基于HTML5实现的Heatmap热图3D应用

Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 已有众多文章分享了生成Heatm...

xhload3d
2014/09/12
0
35
HTML5高性能拓扑图 - 十万图元渲染

本文的话题是:性能,HTML5、JS、Qunee组件的性能和效率问题 历史回顾 以往提到Javascript,联想到的是缓慢的、容易出错的小东西,一种脚本语言,现在浏览器的发展,js引擎的优化,js已经今非...

nosand
2014/06/13
0
3
HTML5拓扑图编辑器项目 - Graph.Editor

拓扑图编辑器介绍 项目地址:https://github.com/samsha/graph.editor 在线演示:http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是...

nosand
2015/01/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows下Git BASH安装

1.从git官网下载一个git安装包,官网下载地址https://www.git-scm.com/downloads 2.双击安装程序,进入欢迎界面点击【Next >】...》finish 3.空白处点击鼠标右键选择Git Bash Here或点击开始...

15834278076
29分钟前
2
0
strpos

一、前方有坑 php某些自带函数,如果使用不当,也会坑得你人仰马翻。比如:strpos() 先了解一下strpos()函数是干啥的。 strpos — 查找字符串首次出现的位置 用法: int strpos ( string $hay...

dragon_tech
32分钟前
1
0
Spark DAG概述

一、 DAG定义 DAG每个节点代表啥?代表的一个RDD 这里再次复习RDD的5大特性 一组分片(Partition),即数据集的基本组成单位。对于RDD来说,每个分片都会被一个计算任务处理,并决定并行计算...

张泽立
32分钟前
0
0
防抖和节流

浏览器的一些事件,如:resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用。会加重浏览器的负担,导致用户体验...

tianyawhl
42分钟前
1
0
mysql出现Waiting for table metadata lock的解决方法

查询某一个表时,一直没有显示数据,于是就show processlist; 发现有表已经被锁了,关掉了之前的查询语句可以看到 这时候需要查看未提交的事务 select trx_state, trx_started, trx_mysql_t...

bobway
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部