TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

服务器各项指标的图形化显示

Posted on 2014-09-11 11:32 TWaver 阅读(3571) 评论(4)  编辑  收藏

在机房的监控时,经常需要去查看某个机柜中的某一台服务器的各项指标,比如该台服务器的CPU的使用情况、该台服务器的硬盘的使用情况、以及网络的流量等等,以下我们将用TWaver 3D来实现一下该例子:

all view

创建服务器上面显示的“磁盘空间”,“CPU占用率”,“内存空间”的函数:

1function createPie(box, x,y,z, arc, color, text){
2var innerNode=createPieNode(box, 2295360'white','../images/transparent_blue.png');
3var outerNode=createPieNode(box, 251001, color,'../images/plastic01.png');
4outerNode.setClient('value', arc);
5outerNode.setClient('type','pie');
6innerNode.setParent(outerNode);
7outerNode.setPosition(x,y,z);
8outerNode.setRotationX(Math.PI/2);
9 
10var persent = "("+parseInt(parseFloat((arc/360)*10000))/100+"%)";
11 
12var label = createLabelBillboard(text+persent);
13label.setPosition(00, -120);
14label.setParent(outerNode);
15label.setSelectable(false);
16box.add(label);
17 
18return outerNode;
19}

创建流量的柱状图的函数:

1function createBar(box, x,y,z, value, color, text){
2            var innerNode=createPieNode(box, 20020360'white','../images/transparent_blue.png');
3            var outerNode=createPieNode(box, 1+Math.random()*19921360, color, '../images/plastic01.png');  
4            outerNode.setClient('value', value);
5            outerNode.setClient('type','bar');
6            innerNode.setParent(outerNode);
7            outerNode.setPosition(x,y,z);
8 
9            var label = createLabelBillboard(text);
10            label.setPosition(02200);          
11            label.setParent(outerNode);
12            label.setSelectable(false);
13            box.add(label);
14 
15            return outerNode;          
16        }

创建PathNode的函数:

1function  createLineChart(box, values){
2            var path=new mono.Path();
3            for(var i=0;i<values.length;i++){
4                var value=values[i]*2;
5                var x=-200-i*130;
6                if(i==0){
7                    path.moveTo(400,value,x);
8                }else{
9                    path.lineTo(400,value,x);
10                }
11            }
12            path=mono.PathNode.prototype.adjustPath(path,10,10);
13             
14            var node=new mono.PathNode(path, 205100,'plain''plain');
15            node.s({
16                'm.repeat'new mono.Vec2(20,1),
17                'm.texture.image''../images/red.png',
18                'm.type''phong',
19                'm.specularStrength':10,
20            });
21            node.setSelectable(false);
22            node.setClient('value'100);
23            node.setClient('type','line');
24 
25            box.add(node);
26            return node;
27        }

以下全方位的展示该效果图:
正面展示效果:
正面显示

斜侧面一展示效果:
斜侧面一

斜侧面二展示效果:
斜侧面二

其实也可以完全和机柜结合起来,当进入到具体的机柜后,点击某一服务器时,我们就显示出相关的参数,当点击另一个服务器时又显示另一堆参数。


评论

# re: 服务器各项指标的图形化显示  回复  更多评论   

2014-09-11 13:14 by smartweb
有必要用这么复杂的图形化吗?

# re: 服务器各项指标的图形化显示  回复  更多评论   

2014-09-11 13:15 by corplib
不错的js代码,nodejs?

# 谢谢!  回复  更多评论   

2014-09-13 16:57 by Kizi 2
谢谢!
你已分享很不错的资料,我很喜欢你的文章

# re: 服务器各项指标的图形化显示  回复  更多评论   

2014-09-23 20:41 by 名皮网
我们的服务器idc直接提供了

只有注册用户登录后才能发表评论。


网站导航: