Jtopo读取Json生成树状拓扑图

共5个文件

js：2个

html：1个

jpg：1个

Jtopo

4星 · 超过85%的资源需积分: 43 110 浏览量 2018-03-05 15:34:27 上传评论 5 收藏 198KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

Jtopo读取Json生成树状拓扑图.rar （5个子文件）

bg.jpg 56KB

aaa.html 5KB

222.png 95KB

jtopo-min.js 77KB

jquery-3.2.1.min.js 85KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jTopo</title> <script src="../library/jquery/jquery-3.2.1.min.js"></script>  <script src="../library/jTopo/jtopo-min.js"></script> </head> <body> <canvas width="1920" height="1080" id="canvas"></canvas> <script type="text/javascript"> $(document).ready(function(){ // id 节点唯一标识 // name 节点名字 // type 节点类型 // pid 父节点标识 // error “0”无异常 “1”有异常 // errorMessage 异常内容 var jsonData = [{ "id": "root", "name": "Root根目录", "type": "1", "pid": "" }, { "id": "0001", "name": "主机001", "type": "1", "error": "1", "errorMessage": "二级告警!", "pid": "root" }, { "id": "000101", "name": "host01", "type": "1", "pid": "0001" }, { "id": "000102", "name": "host02失踪了", "error": "0", "type": "2", "pid": "0001" }, { "id": "000201", "name": "host03", "type": "2", "pid": "0002" }, { "id": "000202", "name": "host04", "type": "1", "pid": "0002" },{ "id": "0002021", "name": "host04", "type": "2", "pid": "000202" },{ "id": "0002022", "name": "host04", "type": "1", "pid": "000202" },{ "id": "0002023", "name": "host04", "type": "3", "pid": "000202" },{ "id": "000203", "name": "host05", "type": "1", "pid": "0002" }, { "id": "324234", "name": "host213123", "type": "3", "pid": "000203" },{ "id": "3242341", "name": "host2131231", "type": "1", "pid": "000203" },{ "id": "32423412", "name": "host2131231他", "type": "4", "pid": "3242341" },{ "id": "32423413", "name": "host2131231俄", "type": "1", "pid": "3242341" },{ "id": "32423414", "name": "host2131231啊", "type": "4", "pid": "3242341" },{ "id": "3242342", "name": "host2131232", "type": "2", "pid": "000203" },{ "id": "32423567", "name": "host哈哈哈", "type": "4", "pid": "3242342" },{ "id": "324235671", "name": "host哈哈哈1", "type": "4", "pid": "3242342" },{ "id": "324235672", "name": "host哈哈哈2", "type": "2", "pid": "3242342" },{ "id": "324235673", "name": "host哈哈哈3", "type": "3", "pid": "3242342" },{ "id": "324235674", "name": "host哈哈哈4", "type": "4", "pid": "3242342" },{ "id": "3242356741", "name": "host哈哈哈41", "type": "4", "pid": "324235674" },{ "id": "3242356742", "name": "host哈哈哈42", "type": "4", "pid": "324235674" },{ "id": "32423567421", "name": "host哈哈哈421", "type": "4", "pid": "3242356742" },{ "id": "32423567422", "name": "host哈哈哈421", "type": "4", "pid": "3242356742" },{ "id": "0002", "name": "主机002", "type": "1", "pid": "root" }]; var height = window.innerHeight; var width = window.innerWidth; document.getElementById("canvas").width = width; document.getElementById("canvas").height = height; var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); stage.eagleEye.visible = true; var scene = new JTopo.Scene(); stage.wheelZoom = 0.85; stage.add(scene); scene.background = '../image/bg.jpg'; for (var x = 0; x < jsonData.length; x++) { creatNode(jsonData[x]); } // 画线 for (var x = 0; x < jsonData.length; x++) { creatLink(jsonData[x]); } scene.findElements(function(e){ if(e.error == "1"){ setInterval(function(){ if(e.alarm == e.errorMessage){ e.alarm = null; }else{ e.alarm = e.errorMessage; } }, 600); } }); scene.doLayout(JTopo.layout.TreeLayout('down', 111, 222)); function creatNode(param){ var node = new JTopo.Node(param.name); if(param.id == "0002" || param.id == "000102"){ node.alarm = '这是一个服务器！！！'; node.alarmColor = '0,255,0'; node.alarmAlpha = 0.9; } node.flagId = param.id; node.error = param.error; node.errorMessage = param.errorMessage; node.setSize(88, 88); node.shadow = "true"; node.font = "17px Consolas"; node.textPosition = "Bottom_Center"; node.fontColor = "255,255,0"; if(param.type == 1){ node.setImage('../image/222.png'); //node.setSize(50, 35); }else if(param.type == 2){ node.setImage('../image/222.png'); //node.setSize(35, 30); }else if(param.type == 3){ node.setImage('../image/222.png'); //node.setSize(35, 30); }else{ node.setImage('../image/222.png'); //node.setSize(35, 30); } scene.add(node); } function creatLink(param){ if(param.id != "root"){ var nodeZi = ""; var nodeFu = ""; scene.findElements(function(e){ if(e.flagId == param.id){ nodeZi = e; } }); scene.findElements(function(e){ if(e.flagId == param.pid){ nodeFu = e; } }); var link = new JTopo.Link(nodeFu, nodeZi); //link.dashedPattern = 3; link.arrowsRadius = 10; link.lineWidth = 2; // 线宽 link.bundleOffset = 60; // 折线拐角处的长度 link.bundleGap = 20; // 线条之间的间隔 link.textOffsetY = 3; // 文本偏移量（向下3个像素） link.strokeColor = '0, 255, 255'; scene.add(link); } } }); </script> </body> </html>

评论收藏

内容反馈