主要代码如下
var tab = Ext.create('Ext.form.Panel',{ title:title+"网络拓扑", id:tabId, scene : '', stage : '', closable: true, items:[{ html :'<canvas width="950"height="800" id="'+id+'" style=" background-color:#EEEEEE; border:1px solid #444;">' }], listeners: { 'afterrender': function (th) { createNetworkTopoData(th,id); }, 'activate':function(th){ console.log("active"); }, 'deactivate' :function(){ console.log("deactivate"); }, 'close':function(){ } } });function createNetworkTopoData(th,id){ Ext.Ajax.request({ url : url, params : { id: id }, success : function(resp){ var info = JSON.parse(resp.responseText); var canvas = document.getElementById(id); var stage = new JTopo.Stage(canvas); var scene = new JTopo.Scene(); th.scene = scene; th.stage = stage; scene.background = './resources/img/bg.jpg'; function node(x, y, img){ var node = new JTopo.Node(); node.setImage('./resources/img/pstn/' + img, true); node.setLocation(x, y); scene.add(node); return node; } function linkNode(nodeA, nodeZ, f){ var link; if(f){ var link = new JTopo.FoldLink(nodeA, nodeZ); }else{ link = new JTopo.Link(nodeA, nodeZ); } link.direction = 'vertical'; scene.add(link); return link; } var router = node(270, 359, 'router.png'); router.text = "交换机"; router.elementType = "router"; var nms = node(360, 430, 'host.png'); nms.text = "服务器"; nms.elementType = "nms"; linkNode(nms, router, true); for(var i = 0; i < lcLen; i++){ var lcnode = node(250-i*90, 440, 'linecard.png'); lcnode.id = info.id; lcnode.text = info.name; lcnode.elementType = info.type; lcnode.alarm = "告警"; lcnode.addEventListener("dbclick",function(event){ clearTopoAlarmFunction(id,event.scene.currentElement.id); }); linkNode(lcnode, router, true); } var r1= node(350, 305, 'modem.png'); r1.text = "路由器"; r1.elementType = "router"; linkNode(router, r1); var sat1 = node(400, 200, 'satellite_antenna.png'); sat1.id = "1" ; linkNode(mainLcard, sat1); sat1.addEventListener("dbclick",function(event){ deleteTopoNodeFunction(id,1); }); var cloud = node(450, 50, 'antenna.png'); linkNode(sat1, cloud); var sat2 = node(500, 200, 'satellite_antenna.png'); linkNode(cloud, sat2); sat2.addEventListener("dbclick",function(event){ console.log(th); }); function hostLink(nodeA, nodeZ){ var link = new JTopo.FoldLink(nodeA, nodeZ); link.shadow = false; link.offsetGap = 0; scene.add(link); return link; } var remoteImage = "router2.png"; renode.id = info.id; renode.text = info.name; hostLink(sat2, renode); renode.addEventListener("dbclick",function(event){ var nodeId = event.scene.currentElement.id; showTopoAlarmFunction(id,nodeId,"二级告警"); }); stage.add(scene); } });/** * 重绘topo图 **/ function redrawTopoFunction(tabId){ var TopoPanel = Ext.getCmp(tabId); if(TopoPanel != null){ createNetworkTopoData(TopoPanel,tabId); TopoPanel.stage.frames = 0;//JTopo手动重绘 } }, /** *显示告警信息 **/ function showTopoAlarmFunction(tabId,nodeId,alarmMsg){ var TopoPanel = Ext.getCmp(tabId); var scene = TopoPanel.scene; scene.findElements(function(e){//遍历所有节点对象 if(e.id == nodeId){ e.alarm = alarmMsg; } }); // timeTicket = setInterval(function(){ // var scene = TopoPanel.scene; // console.log("timeTicket:"+timeTicket); // scene.findElements(function(e){ // if(e.id == nodeId){ // if(e.alarm == alarmMsg){ // e.alarm = null; // }else{ // e.alarm = alarmMsg; // } // } // }); // }, 600); }, /** *消除告警信息 **/ function clearTopoAlarmFunction(tabId,nodeId){ var TopoPanel = Ext.getCmp(tabId); var scene = TopoPanel.scene; scene.findElements(function(e){ if(e.id == nodeId){ e.alarm = null; } }); }, /** *删除topo节点 **/ funciton deleteTopoNodeFunction(tabId,nodeId){ var TopoPanel = Ext.getCmp(tabId); var scene = TopoPanel.scene; scene.findElements(function(e){ if(e.id == nodeId){ scene.remove(scene.currentElement); } }); },