TWaver - 专注UI技术

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

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

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

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

all view

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

1function createPie(box, x,y,z, arc, color, text){
2var innerNode=createPieNode(box, 22, 95, 360, 'white','../images/transparent_blue.png');
3var outerNode=createPieNode(box, 25, 100, 1, 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(0, 0, -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, 200, 20, 360, 'white','../images/transparent_blue.png');
3            var outerNode=createPieNode(box, 1+Math.random()*199, 21, 360, 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(0, 220, 0);          
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, 20, 5, 100,'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直接提供了

只有注册用户登录后才能发表评论。
网站导航: