html 绘制网络拓扑图,jTopo生成网络拓扑图

$(document).ready(function(){functionnode(x, y, img){varnode= newJTopo.Node();

node.setImage(‘./img/‘ +img,true);

node.setLocation(x, y);

scene.add(node);returnnode;

}functionnode2(img){varnode= newJTopo.Node();

node.setImage(‘./img/‘ +img,true);//node.setLocation(x, y);

scene.add(node);returnnode;

}functionlinkNode(nodeA, nodeZ, f){varlink;if(f){

link= newJTopo.FoldLink(nodeA, nodeZ);

}else{

link= newJTopo.Link(nodeA, nodeZ);

}

link.direction= ‘vertical‘;

scene.add(link);returnlink;

}varcanvas=document.getElementById(‘canvas‘);varstage= newJTopo.Stage(canvas);varscene= newJTopo.Scene(stage);//设置背景

scene.background= ‘./img/bg.jpg‘;varr1=node(500,100,‘router.png‘);//使用树形拓扑时，根节点要做如下赋值

r1.layout={type:‘tree‘, width:100, height:100};//var s1 = node(400, 100, ‘server.png‘);

vars1=node2(‘server.png‘);

s1.text= ‘192.168.1.1‘;//文字

s1.fontColor= ‘0,0,0‘;//var s2 = node(400, 200, ‘server.png‘);

vars2=node2(‘server.png‘);

s2.text= ‘192.168.1.2‘;

s2.fontColor= ‘0,0,0‘;//s2.layout = {type: ‘tree‘, width:50, height: 100};

varc1=node(100,100,‘client.png‘);

c1.text= ‘127.0.0.1‘;

c1.fontColor= ‘0,0,0‘;varcloud=node(200,80,‘cloud.png‘);

cloud.text=‘公网‘;

cloud.textPosition= ‘Middle_Center‘;//文字居中

cloud.fontColor= ‘0,0,0‘;varweb_server=node(300,100,‘server_database.png‘);

web_server.text=‘web服务器‘;

web_server.fontColor= ‘0,0,0‘;varr2=node(400,100,‘router.png‘);

linkNode(c1,cloud);

linkNode(cloud,web_server);

linkNode(web_server,r2);

linkNode(r2,r1);//画树形拓扑时要把父节点放置于第一个参数，比如此函数中的r1

linkNode(r1, s1);

linkNode(r1, s2);

s2.alarm="ping不通";

setInterval(function(){if(s2.alarm== ‘ping不通‘){

s2.alarm= null;

}else{

s2.alarm= ‘ping不通‘}

},600);//linkNode(h1, r1);

JTopo.layout.layoutNode(scene, r1,true);

}

);