├── img
    ├── 100.png
    ├── 115.png
    ├── 116.png
    ├── 117.png
    ├── 118.png
    ├── 119.png
    ├── 2948.png
    ├── 30.png
    ├── 50.png
    ├── 5200.png
    ├── 53.png
    ├── 59.png
    ├── 60.png
    ├── 69.png
    ├── 77.png
    ├── bg.jpeg
    ├── bg.jpg
    ├── bg.png
    ├── bg.webp
    ├── cd.png
    ├── cloud.png
    ├── equip1.png
    ├── equip2.png
    ├── firework.png
    ├── fk.png
    ├── me.png
    ├── middle.png
    ├── monitor.png
    ├── mr.png
    ├── room.gif
    ├── router.png
    ├── router1.png
    ├── rr.png
    ├── rr1.png
    ├── sO.png
    ├── se1.png
    ├── se2.png
    ├── se3.png
    ├── serv.png
    ├── serve1.png
    ├── serve2.png
    ├── serve3.png
    ├── sh.png
    ├── skulls.png
    ├── ss.png
    ├── storageServer.png
    ├── sv.png
    ├── switch.png
    ├── switchOptical.png
    ├── terminal.png
    ├── tl.png
    ├── 万兆.jpg
    ├── 千兆.jpg
    └── 快速.jpg
├── index.html
├── js
    ├── jquery.js
    ├── jquery.min.js
    ├── jsonst.json
    ├── jsonstr.json
    └── jtopo-0.4.8-min.js
├── readme.md
├── topo-1.html
├── topo-2.html
├── topo-3.html
├── topo-4.html
├── topo-5.html
└── topo-6.html


/img/100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/100.png


--------------------------------------------------------------------------------
/img/115.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/115.png


--------------------------------------------------------------------------------
/img/116.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/116.png


--------------------------------------------------------------------------------
/img/117.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/117.png


--------------------------------------------------------------------------------
/img/118.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/118.png


--------------------------------------------------------------------------------
/img/119.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/119.png


--------------------------------------------------------------------------------
/img/2948.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/2948.png


--------------------------------------------------------------------------------
/img/30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/30.png


--------------------------------------------------------------------------------
/img/50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/50.png


--------------------------------------------------------------------------------
/img/5200.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/5200.png


--------------------------------------------------------------------------------
/img/53.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/53.png


--------------------------------------------------------------------------------
/img/59.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/59.png


--------------------------------------------------------------------------------
/img/60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/60.png


--------------------------------------------------------------------------------
/img/69.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/69.png


--------------------------------------------------------------------------------
/img/77.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/77.png


--------------------------------------------------------------------------------
/img/bg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/bg.jpeg


--------------------------------------------------------------------------------
/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/bg.jpg


--------------------------------------------------------------------------------
/img/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/bg.png


--------------------------------------------------------------------------------
/img/bg.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/bg.webp


--------------------------------------------------------------------------------
/img/cd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/cd.png


--------------------------------------------------------------------------------
/img/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/cloud.png


--------------------------------------------------------------------------------
/img/equip1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/equip1.png


--------------------------------------------------------------------------------
/img/equip2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/equip2.png


--------------------------------------------------------------------------------
/img/firework.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/firework.png


--------------------------------------------------------------------------------
/img/fk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/fk.png


--------------------------------------------------------------------------------
/img/me.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/me.png


--------------------------------------------------------------------------------
/img/middle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/middle.png


--------------------------------------------------------------------------------
/img/monitor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/monitor.png


--------------------------------------------------------------------------------
/img/mr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/mr.png


--------------------------------------------------------------------------------
/img/room.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/room.gif


--------------------------------------------------------------------------------
/img/router.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/router.png


--------------------------------------------------------------------------------
/img/router1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/router1.png


--------------------------------------------------------------------------------
/img/rr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/rr.png


--------------------------------------------------------------------------------
/img/rr1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/rr1.png


--------------------------------------------------------------------------------
/img/sO.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/sO.png


--------------------------------------------------------------------------------
/img/se1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/se1.png


--------------------------------------------------------------------------------
/img/se2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/se2.png


--------------------------------------------------------------------------------
/img/se3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/se3.png


--------------------------------------------------------------------------------
/img/serv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/serv.png


--------------------------------------------------------------------------------
/img/serve1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/serve1.png


--------------------------------------------------------------------------------
/img/serve2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/serve2.png


--------------------------------------------------------------------------------
/img/serve3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/serve3.png


--------------------------------------------------------------------------------
/img/sh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/sh.png


--------------------------------------------------------------------------------
/img/skulls.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/skulls.png


--------------------------------------------------------------------------------
/img/ss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/ss.png


--------------------------------------------------------------------------------
/img/storageServer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/storageServer.png


--------------------------------------------------------------------------------
/img/sv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/sv.png


--------------------------------------------------------------------------------
/img/switch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/switch.png


--------------------------------------------------------------------------------
/img/switchOptical.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/switchOptical.png


--------------------------------------------------------------------------------
/img/terminal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/terminal.png


--------------------------------------------------------------------------------
/img/tl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/tl.png


--------------------------------------------------------------------------------
/img/万兆.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/万兆.jpg


--------------------------------------------------------------------------------
/img/千兆.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/千兆.jpg


--------------------------------------------------------------------------------
/img/快速.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/billyhoomm/jTopo-gplot/6c9063e269d31ee37e30bd06c28343a0f1949c02/img/快速.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
  2 | 
  3 | <head>
  4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 |     <title> 网络拓朴图</title>
  6 |     <style type="text/css">
  7 |         html,body{
  8 |             overflow:hidden;
  9 |             height:100%;
 10 |             margin:0;
 11 |             padding:0;
 12 |             /*font:14px/1.8 Georgia, Arial, Simsun;*/
 13 |             font:14px/1.8 Arial,Microsoft YaHei,黑体,宋体,sans-serif;
 14 |         }
 15 |         html{
 16 |             _padding:110px 0;
 17 |         }
 18 |         #bd{
 19 |             position:absolute;
 20 |             top:0;
 21 |             right:0;
 22 |             left:0;
 23 |             bottom:0;
 24 |             overflow:hidden;
 25 |             width:100%;
 26 |             _height:100%;
 27 |         }
 28 |         #side{
 29 |             position:absolute;
 30 |             top:0;
 31 |             left:0;
 32 |             bottom:0;
 33 |             overflow:hidden;
 34 |             width:10%;
 35 |             _height:100%;
 36 |             background:#666;
 37 |             box-shadow: 0 0 1px;
 38 |         }
 39 |         #main{
 40 |             position:absolute;
 41 |             _position:static;
 42 |             top:0;
 43 |             right:0;
 44 |             bottom:0;
 45 |             left:10.05%;
 46 |             overflow:hidden;
 47 |             _overflow:hidden;
 48 |             _height:100%;
 49 |             _margin-left:210px;
 50 |             background:#666;
 51 |         }
 52 |         /*#side1, #side2, #side3{
 53 |             display:none;
 54 |         }*/
 55 |         .topo{
 56 |             display:block;
 57 |             width:100%;
 58 |             font-size: 20px;
 59 |             font-weight: 500;
 60 |             text-align:center;
 61 |             color:#040404;
 62 |             margin:0;
 63 |             border-bottom: 2px solid #3E3D3D;
 64 |             cursor: pointer;
 65 |             background: #E4E0E0;
 66 |             border-radius: 0px 0px 7px 7px;
 67 |         }
 68 |         /*.topo:hover{
 69 |             color:;
 70 |         }*/
 71 |         .list{
 72 |             padding-left: 0px;
 73 |             margin-top: 0px;
 74 |         }
 75 |         .list li{
 76 |             text-align:center;
 77 |             list-style: none;
 78 |             border-radius:5px;
 79 |             background-color: #B4B1B1;
 80 |             margin-bottom:5px;
 81 |             width:100%;
 82 |             cursor: pointer;
 83 |         }
 84 |         .list li:hover{
 85 |             background: #D5D0D0;
 86 |         }
 87 |         .list li.focus{
 88 |             background-color: #D5D0D0;
 89 |             box-shadow: 0px 0px 3px inset;
 90 |         }
 91 |         /* 与布局无关，一些说明性内容样式 */
 92 |         .tit-layout{margin:0.1% 0 0;font-size:15px;text-align:center;}
 93 |         .copyright{font-weight:bold;text-align:center;}
 94 |         #feature{width:200%;line-height:4;}
 95 |         #feature .hd{padding:20px 15px;}
 96 |         #feature .hd h2{margin:0;font-size:16px;}
 97 |         #feature .bd ol{margin-top:0;}
 98 |         #feature .bd h3{margin:0;padding:0 15px;font-size:14px;}
 99 |         #feature .ft{padding:10px 15px 30px;}
100 |     </style>
101 | 
102 | </head>
103 | <body>
104 | <div id="bd">
105 |     <div id="side">
106 |     <div>
107 |     <span id = "topo1" class = "topo">等级划分</span>
108 |     <ul id = "side1" class = "list">
109 |         <li id = "topo-1.html">一级行政</li>
110 |         <li id = "topo-2.html">二级区域</li>
111 |         <li id = "topo-3.html">三级资产</li>
112 |         <li id = "topo-4.html">四级路由</li>
113 |         <li id = "topo-5.html">五级交换机</li>
114 |         <li id = "topo-6.html">六级交换机</li>
115 |     </ul>
116 |     </div>
117 |     <!--<div>
118 |     <span id = "topo2" class = "topo">区域拓朴</span>
119 |     <ul id = "side2" class = "list">
120 |         <li id = "topo-1.html">一级路由</li>
121 |         <li id = "topo-2.html">二级路由</li>
122 |         <li id = "topo-3.html">三级路由</li>
123 |         <li id = "topo-4.html">四级路由</li>
124 |         <li id = "topo-5.html">五级交换机</li>
125 |         <li id = "topo-6.html">六级交换机</li>
126 |     </ul>
127 |     </div>
128 |     <div>
129 |     <span id = "topo3" class = "topo">资产拓朴</span>
130 |     <ul id = "side3" class = "list">
131 |         <li id = "topo-1.html">一级路由</li>
132 |         <li id = "topo-2.html">二级路由</li>
133 |         <li id = "topo-3.html">三级路由</li>
134 |         <li id = "topo-4.html">四级路由</li>
135 |         <li id = "topo-5.html">五级交换机</li>
136 |         <li id = "topo-6.html">六级交换机</li>
137 |     </ul>
138 |     </div>-->
139 |     
140 |     </div>
141 | 
142 |     <div id="main">
143 |         <iframe src = 'topo-6.html' id = "iframes" frameborder="no" marginleft="0" height = 100% width = 100%></iframe>
144 |     </div>
145 | </div>
146 | 
147 | <script type="text/javascript" src="./js/jquery.min.js"></script>
148 | <script type="text/javascript" src="js/jtopo-0.4.8-min.js"></script>
149 | <script type="text/javascript">
150 |     $(function(){
151 |        /*$("#topo1").click(function(){
152 |         $("#side1").toggle();
153 |         $("#main iframe").attr("src", "topo-6.html");
154 |        });
155 |        $("#topo2").click(function(){
156 |         $("#side2").toggle();
157 |        });
158 |        $("#topo3").click(function(){
159 |         $("#side3").toggle();
160 |        });*/
161 |        $("#side").on("click", "li", function(e){
162 |         srcc = e.target.id;
163 |         $("#main iframe").attr("src", srcc);
164 |         $(this).addClass('focus').siblings().removeClass();
165 |        });
166 |     });
167 | </script>
168 | </body>
169 | </html>


--------------------------------------------------------------------------------
/js/jsonst.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "elementType": "container",
  4 |     "type": "A",
  5 |     "serialNumber": "0",
  6 |     "x": 183,
  7 |     "y": 183,
  8 |     "text": "腾讯云",
  9 |     "font": "12px Consolas"
 10 |   },
 11 |   {
 12 |     "serialNum": "0",
 13 |     "relate": "undefined",
 14 |     "type": "undefined",
 15 |     "elementType": "node",
 16 |     "x": 183,
 17 |     "y": 183,
 18 |     "id": 33489,
 19 |     "Image": "undefined",
 20 |     "text": "undefined",
 21 |     "textPosition": "Bottom_Center"
 22 |   },
 23 |   {
 24 |     "serialNum": "0",
 25 |     "relate": "undefined",
 26 |     "type": "undefined",
 27 |     "elementType": "TextNode",
 28 |     "x": 358,
 29 |     "y": 563,
 30 |     "id": 201554,
 31 |     "Image": "undefined",
 32 |     "text": "腾讯云",
 33 |     "textPosition": "Bottom_Center"
 34 |   },
 35 |   {
 36 |     "serialNum": "0",
 37 |     "relate": "0",
 38 |     "type": "D",
 39 |     "elementType": "node",
 40 |     "x": 289,
 41 |     "y": 204,
 42 |     "id": 58956,
 43 |     "Image": "terminal.png",
 44 |     "text": "终端",
 45 |     "textPosition": "Bottom_Center"
 46 |   },
 47 |   {
 48 |     "serialNum": "0",
 49 |     "relate": "1",
 50 |     "type": "D",
 51 |     "elementType": "node",
 52 |     "x": 192,
 53 |     "y": 204,
 54 |     "id": 39168,
 55 |     "Image": "terminal.png",
 56 |     "text": "终端",
 57 |     "textPosition": "Bottom_Center"
 58 |   },
 59 |   {
 60 |     "elementType": "container",
 61 |     "relate": "0",
 62 |     "type": "B",
 63 |     "serialNumber": "11",
 64 |     "x": 662,
 65 |     "y": 188,
 66 |     "text": "机柜"
 67 |   },
 68 |   {
 69 |     "elementType": "container",
 70 |     "relate": "1",
 71 |     "type": "B",
 72 |     "serialNumber": "12",
 73 |     "x": 677,
 74 |     "y": 188,
 75 |     "text": "机柜"
 76 |   },
 77 |   {
 78 |     "serialNum": "11",
 79 |     "type": "C",
 80 |     "elementType": "node",
 81 |     "Image": "equip1.png",
 82 |     "text": "终端",
 83 |     "textPosition": "Middle_Left"
 84 |   },
 85 |   {
 86 |     "serialNum": "11",
 87 |     "type": "C",
 88 |     "elementType": "node",
 89 |     "Image": "equip2.png",
 90 |     "text": "终端",
 91 |     "textPosition": "Middle_Left"
 92 |   },
 93 |   {
 94 |     "serialNum": "11",
 95 |     "type": "C",
 96 |     "elementType": "node",
 97 |     "Image": "equip1.png",
 98 |     "text": "终端",
 99 |     "textPosition": "Middle_Left"
100 |   },
101 |   {
102 |     "serialNum": "11",
103 |     "type": "C",
104 |     "elementType": "node",
105 |     "Image": "equip2.png",
106 |     "text": "终端",
107 |     "textPosition": "Middle_Left"
108 |   },
109 |   {
110 |     "serialNum": "11",
111 |     "type": "C",
112 |     "elementType": "node",
113 |     "Image": "equip1.png",
114 |     "text": "终端",
115 |     "textPosition": "Middle_Left"
116 |   },
117 |   {
118 |     "serialNum": "12",
119 |     "type": "C",
120 |     "elementType": "node",
121 |     "Image": "equip1.png",
122 |     "text": "终端",
123 |     "textPosition": "Middle_Left"
124 |   },
125 |   {
126 |     "serialNum": "12",
127 |     "type": "C",
128 |     "elementType": "node",
129 |     "Image": "equip1.png",
130 |     "text": "终端",
131 |     "textPosition": "Middle_Left"
132 |   },
133 |   {
134 |     "elementType": "link",
135 |     "nodeAid": 58956,
136 |     "nodeZid": 39168,
137 |     "text": "",
138 |     "fontColor": "0, 200, 255"
139 |   }
140 | ]


--------------------------------------------------------------------------------
/js/jsonstr.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "elementType": "node",
  4 |     "x": 48.08812949640287,
  5 |     "y": 27.014388489208628,
  6 |     "id": 1299.0714119351996,
  7 |     "Image": "cloud.png",
  8 |     "text": "CERNET",
  9 |     "textPosition": "Middle_Center",
 10 |     "larm": "undefined",
 11 |     "level": 1
 12 |   },
 13 |   {
 14 |     "elementType": "node",
 15 |     "x": 287.5413669064748,
 16 |     "y": 24.848920863309345,
 17 |     "id": 7145.09267118679,
 18 |     "Image": "cloud.png",
 19 |     "text": "chinaet",
 20 |     "textPosition": "Middle_Center",
 21 |     "larm": "undefined",
 22 |     "level": 6
 23 |   },
 24 |   {
 25 |     "elementType": "node",
 26 |     "x": 305.9406474820144,
 27 |     "y": 257.22841726618697,
 28 |     "id": 78696.62852919102,
 29 |     "Image": "5200.png",
 30 |     "text": "HUAWEI5200A",
 31 |     "textPosition": "Bottom_Center",
 32 |     "larm": "undefined",
 33 |     "level": 4
 34 |   },
 35 |   {
 36 |     "elementType": "node",
 37 |     "x": 1759.3758992805756,
 38 |     "y": 305.48920863309354,
 39 |     "id": 537470.3511593604,
 40 |     "Image": "2948.png",
 41 |     "text": "VH2402仙林网络中心",
 42 |     "textPosition": "Bottom_Center",
 43 |     "larm": "undefined",
 44 |     "level": 4
 45 |   },
 46 |   {
 47 |     "elementType": "node",
 48 |     "x": 111.77102634439211,
 49 |     "y": 363.6554828079982,
 50 |     "id": 40646.1465492154,
 51 |     "Image": "2948.png",
 52 |     "text": "VH4802",
 53 |     "textPosition": "Bottom_Center",
 54 |     "larm": "undefined",
 55 |     "level": 5
 56 |   },
 57 |   {
 58 |     "elementType": "node",
 59 |     "x": 275.1798561151079,
 60 |     "y": 522.7104316546763,
 61 |     "id": 143839.38137259978,
 62 |     "Image": "cloud.png",
 63 |     "text": "学生宿舍",
 64 |     "textPosition": "Middle_Center",
 65 |     "larm": "undefined",
 66 |     "level": 5
 67 |   },
 68 |   {
 69 |     "elementType": "node",
 70 |     "x": 372.7823741007194,
 71 |     "y": 397.115107913669,
 72 |     "id": 148037.51271932092,
 73 |     "Image": "2948.png",
 74 |     "text": "CISCO2948",
 75 |     "textPosition": "Bottom_Center",
 76 |     "larm": "undefined",
 77 |     "level": 5
 78 |   },
 79 |   {
 80 |     "elementType": "node",
 81 |     "x": 448.6924460431653,
 82 |     "y": 398.2428057553957,
 83 |     "id": 178688.53863348166,
 84 |     "Image": "2948.png",
 85 |     "text": "教学主楼CISCO2960",
 86 |     "textPosition": "Bottom_Center",
 87 |     "larm": "undefined",
 88 |     "level": 5
 89 |   },
 90 |   {
 91 |     "elementType": "node",
 92 |     "x": 526.4370503597122,
 93 |     "y": 398.70143884892093,
 94 |     "id": 209891.2094417991,
 95 |     "Image": "2948.png",
 96 |     "text": "无线楼VH2402",
 97 |     "textPosition": "Bottom_Center",
 98 |     "larm": "undefined",
 99 |     "level": 5
100 |   },
101 |   {
102 |     "elementType": "node",
103 |     "x": 603.181654676259,
104 |     "y": 395.6187050359714,
105 |     "id": 238629.94512447607,
106 |     "Image": "2948.png",
107 |     "text": "有线楼CISCO3542",
108 |     "textPosition": "Bottom_Center",
109 |     "larm": "undefined",
110 |     "level": 5
111 |   },
112 |   {
113 |     "elementType": "node",
114 |     "x": 673.3021582733815,
115 |     "y": 394.6187050359713,
116 |     "id": 265697.62579576636,
117 |     "Image": "2948.png",
118 |     "text": "图书馆CISCO2948",
119 |     "textPosition": "Bottom_Center",
120 |     "larm": "undefined",
121 |     "level": 5
122 |   },
123 |   {
124 |     "elementType": "node",
125 |     "x": 750.046762589928,
126 |     "y": 395.53597122302165,
127 |     "id": 296670.4747036903,
128 |     "Image": "2948.png",
129 |     "text": "IBM8260",
130 |     "textPosition": "Bottom_Center",
131 |     "larm": "undefined",
132 |     "level": 5
133 |   },
134 |   {
135 |     "elementType": "node",
136 |     "x": 823.0395683453237,
137 |     "y": 397.4532374100719,
138 |     "id": 327119.740955437,
139 |     "Image": "2948.png",
140 |     "text": "办公北楼IBM8271",
141 |     "textPosition": "Bottom_Center",
142 |     "larm": "undefined",
143 |     "level": 5
144 |   },
145 |   {
146 |     "elementType": "node",
147 |     "x": 895.656474820144,
148 |     "y": 398.16007194244605,
149 |     "id": 356614.6464501062,
150 |     "Image": "2948.png",
151 |     "text": "办公南楼IBM8271",
152 |     "textPosition": "Bottom_Center",
153 |     "larm": "undefined",
154 |     "level": 5
155 |   },
156 |   {
157 |     "elementType": "node",
158 |     "x": 976.7122302158273,
159 |     "y": 400.4064748201439,
160 |     "id": 391081.9010144402,
161 |     "Image": "2948.png",
162 |     "text": "VH2402",
163 |     "textPosition": "Bottom_Center",
164 |     "larm": "undefined",
165 |     "level": 5
166 |   },
167 |   {
168 |     "elementType": "node",
169 |     "x": 1046.0593525179856,
170 |     "y": 399.4064748201439,
171 |     "id": 417802.8784418509,
172 |     "Image": "2948.png",
173 |     "text": "VH2402",
174 |     "textPosition": "Bottom_Center",
175 |     "larm": "undefined",
176 |     "level": 5
177 |   },
178 |   {
179 |     "elementType": "node",
180 |     "x": 1118.9244604316548,
181 |     "y": 399.9478417266187,
182 |     "id": 447511.4230047617,
183 |     "Image": "2948.png",
184 |     "text": "VH2402",
185 |     "textPosition": "Bottom_Center",
186 |     "larm": "undefined",
187 |     "level": 5
188 |   },
189 |   {
190 |     "elementType": "node",
191 |     "x": 1191.3758992805754,
192 |     "y": 400.8651079136691,
193 |     "id": 477581.0284308524,
194 |     "Image": "2948.png",
195 |     "text": "VH2402",
196 |     "textPosition": "Bottom_Center",
197 |     "larm": "undefined",
198 |     "level": 5
199 |   },
200 |   {
201 |     "elementType": "node",
202 |     "x": 1268.955035971223,
203 |     "y": 401.6996402877698,
204 |     "id": 509738.78149099427,
205 |     "Image": "2948.png",
206 |     "text": "VH2402",
207 |     "textPosition": "Bottom_Center",
208 |     "larm": "undefined",
209 |     "level": 5
210 |   },
211 |   {
212 |     "elementType": "node",
213 |     "x": 1342.2410071942447,
214 |     "y": 402.2410071942446,
215 |     "id": 539904.3746312304,
216 |     "Image": "2948.png",
217 |     "text": "VH2402",
218 |     "textPosition": "Bottom_Center",
219 |     "larm": "undefined",
220 |     "level": 5
221 |   },
222 |   {
223 |     "elementType": "node",
224 |     "x": 1420.6546762589928,
225 |     "y": 405.158273381295,
226 |     "id": 575589.9957041561,
227 |     "Image": "2948.png",
228 |     "text": "VH2402",
229 |     "textPosition": "Bottom_Center",
230 |     "larm": "undefined",
231 |     "level": 5
232 |   },
233 |   {
234 |     "elementType": "node",
235 |     "x": 1495.6097122302158,
236 |     "y": 407.6996402877698,
237 |     "id": 609759.5416871539,
238 |     "Image": "2948.png",
239 |     "text": "VH2402",
240 |     "textPosition": "Bottom_Center",
241 |     "larm": "undefined",
242 |     "level": 5
243 |   },
244 |   {
245 |     "elementType": "node",
246 |     "x": 1579.1061151079136,
247 |     "y": 407.6996402877698,
248 |     "id": 643800.995105714,
249 |     "Image": "2948.png",
250 |     "text": "VH2402",
251 |     "textPosition": "Bottom_Center",
252 |     "larm": "undefined",
253 |     "level": 5
254 |   },
255 |   {
256 |     "elementType": "node",
257 |     "x": 1655.6025179856115,
258 |     "y": 405.6996402877698,
259 |     "id": 671677.3460062885,
260 |     "Image": "2948.png",
261 |     "text": "VH2402",
262 |     "textPosition": "Bottom_Center",
263 |     "larm": "undefined",
264 |     "level": 5
265 |   },
266 |   {
267 |     "elementType": "node",
268 |     "x": 1733.1726618705034,
269 |     "y": 542.1672661870504,
270 |     "id": 939669.4839164638,
271 |     "Image": "cloud.png",
272 |     "text": "学生宿舍",
273 |     "textPosition": "Middle_Center",
274 |     "larm": "undefined",
275 |     "level": 5
276 |   },
277 |   {
278 |     "elementType": "node",
279 |     "x": 1838.134892086331,
280 |     "y": 416.4064748201439,
281 |     "id": 765411.2706575748,
282 |     "Image": "2948.png",
283 |     "text": "VH2402",
284 |     "textPosition": "Bottom_Center",
285 |     "larm": "undefined",
286 |     "level": 5
287 |   },
288 |   {
289 |     "elementType": "node",
290 |     "x": 1958.8723021582732,
291 |     "y": 413.48920863309354,
292 |     "id": 809972.5580327105,
293 |     "Image": "2948.png",
294 |     "text": "VH2402",
295 |     "textPosition": "Bottom_Center",
296 |     "larm": "undefined",
297 |     "level": 5
298 |   },
299 |   {
300 |     "elementType": "node",
301 |     "x": 436.865107913669,
302 |     "y": 507.8974820143885,
303 |     "id": 221882.6882892966,
304 |     "Image": "serv.png",
305 |     "text": "VH2402",
306 |     "textPosition": "Bottom_Center",
307 |     "larm": "undefined",
308 |     "level": 6
309 |   },
310 |   {
311 |     "elementType": "node",
312 |     "x": 127.8201438848921,
313 |     "y": 480.6474820143885,
314 |     "id": 61436.43030899023,
315 |     "Image": "serv.png",
316 |     "text": "VH2402",
317 |     "textPosition": "Bottom_Center",
318 |     "larm": "undefined",
319 |     "level": 6
320 |   },
321 |   {
322 |     "elementType": "node",
323 |     "x": 653.3093525179856,
324 |     "y": 546.3561151079136,
325 |     "id": 356939.5598053931,
326 |     "Image": "2948.png",
327 |     "text": "有线楼CISCO2948",
328 |     "textPosition": "Bottom_Center",
329 |     "larm": "2W",
330 |     "level": 6
331 |   },
332 |   {
333 |     "elementType": "node",
334 |     "x": 754.0845323741007,
335 |     "y": 547.8974820143885,
336 |     "id": 413161.0165137674,
337 |     "Image": "2948.png",
338 |     "text": "图书馆IBM8271",
339 |     "textPosition": "Bottom_Center",
340 |     "larm": "2W",
341 |     "level": 6
342 |   },
343 |   {
344 |     "elementType": "link",
345 |     "nodeAid": 78696.62852919102,
346 |     "nodeZid": 143839.38137259978,
347 |     "text": "",
348 |     "fontColor": "0, 200, 255"
349 |   },
350 |   {
351 |     "elementType": "link",
352 |     "nodeAid": 537470.3511593604,
353 |     "nodeZid": 939669.4839164638,
354 |     "text": "",
355 |     "fontColor": "0, 200, 255"
356 |   },
357 |   {
358 |     "elementType": "link",
359 |     "nodeAid": 148037.51271932092,
360 |     "nodeZid": 221882.6882892966,
361 |     "text": "",
362 |     "fontColor": "0, 200, 255"
363 |   },
364 |   {
365 |     "elementType": "link",
366 |     "nodeAid": 40646.1465492154,
367 |     "nodeZid": 61436.43030899023,
368 |     "text": "",
369 |     "fontColor": "0, 200, 255"
370 |   },
371 |   {
372 |     "elementType": "link",
373 |     "nodeAid": 238629.94512447607,
374 |     "nodeZid": 356939.5598053931,
375 |     "text": "",
376 |     "fontColor": "0, 200, 255"
377 |   },
378 |   {
379 |     "elementType": "link",
380 |     "nodeAid": 296670.4747036903,
381 |     "nodeZid": 413161.0165137674,
382 |     "text": "",
383 |     "fontColor": "0, 200, 255"
384 |   },
385 |   {
386 |     "elementType": "node",
387 |     "x": 176,
388 |     "y": 109,
389 |     "id": 19184,
390 |     "Image": "router1.png",
391 |     "text": "路由器",
392 |     "textPosition": "Bottom_Center",
393 |     "larm": "undefined",
394 |     "level": 6
395 |   },
396 |   {
397 |     "elementType": "node",
398 |     "x": 304,
399 |     "y": 153,
400 |     "id": 46512,
401 |     "Image": "router.png",
402 |     "text": "路由器",
403 |     "textPosition": "Bottom_Center",
404 |     "larm": "undefined",
405 |     "level": 6
406 |   },
407 |   {
408 |     "elementType": "link",
409 |     "nodeAid": 1299.0714119351996,
410 |     "nodeZid": 19184,
411 |     "text": "",
412 |     "fontColor": "0, 200, 255"
413 |   },
414 |   {
415 |     "elementType": "link",
416 |     "nodeAid": 7145.09267118679,
417 |     "nodeZid": 19184,
418 |     "text": "",
419 |     "fontColor": "0, 200, 255"
420 |   },
421 |   {
422 |     "elementType": "link",
423 |     "nodeAid": 19184,
424 |     "nodeZid": 46512,
425 |     "text": "",
426 |     "fontColor": "0, 200, 255"
427 |   },
428 |   {
429 |     "elementType": "link",
430 |     "nodeAid": 46512,
431 |     "nodeZid": 78696.62852919102,
432 |     "text": "",
433 |     "fontColor": "0, 200, 255"
434 |   },
435 |   {
436 |     "elementType": "node",
437 |     "x": -6,
438 |     "y": 358,
439 |     "id": -2148,
440 |     "Image": "terminal.png",
441 |     "text": "终端",
442 |     "textPosition": "Bottom_Center",
443 |     "larm": "undefined",
444 |     "level": 6
445 |   },
446 |   {
447 |     "elementType": "node",
448 |     "x": 100,
449 |     "y": 242,
450 |     "id": 24200,
451 |     "Image": "storageServer.png",
452 |     "text": "存储服务器",
453 |     "textPosition": "Bottom_Center",
454 |     "larm": "undefined",
455 |     "level": 6
456 |   },
457 |   {
458 |     "elementType": "link",
459 |     "nodeAid": 19184,
460 |     "nodeZid": 24200,
461 |     "text": "",
462 |     "fontColor": "0, 200, 255"
463 |   },
464 |   {
465 |     "elementType": "link",
466 |     "nodeAid": 24200,
467 |     "nodeZid": -2148,
468 |     "text": "",
469 |     "fontColor": "0, 200, 255"
470 |   },
471 |   {
472 |     "elementType": "link",
473 |     "nodeAid": 24200,
474 |     "nodeZid": 40646.1465492154,
475 |     "text": "",
476 |     "fontColor": "0, 200, 255"
477 |   },
478 |   {
479 |     "elementType": "node",
480 |     "x": 606,
481 |     "y": 223,
482 |     "id": 135138,
483 |     "Image": "serve3.png",
484 |     "text": "服务器",
485 |     "textPosition": "Bottom_Center",
486 |     "larm": "undefined",
487 |     "level": 6
488 |   },
489 |   {
490 |     "elementType": "link",
491 |     "nodeAid": 46512,
492 |     "nodeZid": 135138,
493 |     "text": "",
494 |     "fontColor": "0, 200, 255"
495 |   },
496 |   {
497 |     "elementType": "link",
498 |     "nodeAid": 135138,
499 |     "nodeZid": 148037.51271932092,
500 |     "text": "",
501 |     "fontColor": "0, 200, 255"
502 |   },
503 |   {
504 |     "elementType": "node",
505 |     "x": 1020,
506 |     "y": 243,
507 |     "id": 247860,
508 |     "Image": "serve3.png",
509 |     "text": "服务器",
510 |     "textPosition": "Bottom_Center",
511 |     "larm": "undefined",
512 |     "level": 6
513 |   },
514 |   {
515 |     "elementType": "link",
516 |     "nodeAid": 135138,
517 |     "nodeZid": 178688.53863348166,
518 |     "text": "",
519 |     "fontColor": "0, 200, 255"
520 |   },
521 |   {
522 |     "elementType": "link",
523 |     "nodeAid": 135138,
524 |     "nodeZid": 209891.2094417991,
525 |     "text": "",
526 |     "fontColor": "0, 200, 255"
527 |   },
528 |   {
529 |     "elementType": "link",
530 |     "nodeAid": 135138,
531 |     "nodeZid": 238629.94512447607,
532 |     "text": "",
533 |     "fontColor": "0, 200, 255"
534 |   },
535 |   {
536 |     "elementType": "link",
537 |     "nodeAid": 135138,
538 |     "nodeZid": 265697.62579576636,
539 |     "text": "",
540 |     "fontColor": "0, 200, 255"
541 |   },
542 |   {
543 |     "elementType": "link",
544 |     "nodeAid": 135138,
545 |     "nodeZid": 296670.4747036903,
546 |     "text": "",
547 |     "fontColor": "0, 200, 255"
548 |   },
549 |   {
550 |     "elementType": "link",
551 |     "nodeAid": 135138,
552 |     "nodeZid": 327119.740955437,
553 |     "text": "",
554 |     "fontColor": "0, 200, 255"
555 |   },
556 |   {
557 |     "elementType": "link",
558 |     "nodeAid": 135138,
559 |     "nodeZid": 356614.6464501062,
560 |     "text": "",
561 |     "fontColor": "0, 200, 255"
562 |   },
563 |   {
564 |     "elementType": "link",
565 |     "nodeAid": 247860,
566 |     "nodeZid": 391081.9010144402,
567 |     "text": "",
568 |     "fontColor": "0, 200, 255"
569 |   },
570 |   {
571 |     "elementType": "link",
572 |     "nodeAid": 247860,
573 |     "nodeZid": 417802.8784418509,
574 |     "text": "",
575 |     "fontColor": "0, 200, 255"
576 |   },
577 |   {
578 |     "elementType": "node",
579 |     "x": 1180,
580 |     "y": 249,
581 |     "id": 293820,
582 |     "Image": "serve3.png",
583 |     "text": "服务器",
584 |     "textPosition": "Bottom_Center",
585 |     "larm": "undefined",
586 |     "level": 6
587 |   },
588 |   {
589 |     "elementType": "node",
590 |     "x": 1327,
591 |     "y": 261,
592 |     "id": 346347,
593 |     "Image": "serve3.png",
594 |     "text": "服务器",
595 |     "textPosition": "Bottom_Center",
596 |     "larm": "undefined",
597 |     "level": 6
598 |   },
599 |   {
600 |     "elementType": "node",
601 |     "x": 1498,
602 |     "y": 265,
603 |     "id": 396970,
604 |     "Image": "serve3.png",
605 |     "text": "服务器",
606 |     "textPosition": "Bottom_Center",
607 |     "larm": "undefined",
608 |     "level": 6
609 |   },
610 |   {
611 |     "elementType": "link",
612 |     "nodeAid": 293820,
613 |     "nodeZid": 447511.4230047617,
614 |     "text": "",
615 |     "fontColor": "0, 200, 255"
616 |   },
617 |   {
618 |     "elementType": "link",
619 |     "nodeAid": 293820,
620 |     "nodeZid": 477581.0284308524,
621 |     "text": "",
622 |     "fontColor": "0, 200, 255"
623 |   },
624 |   {
625 |     "elementType": "link",
626 |     "nodeAid": 346347,
627 |     "nodeZid": 509738.78149099427,
628 |     "text": "",
629 |     "fontColor": "0, 200, 255"
630 |   },
631 |   {
632 |     "elementType": "link",
633 |     "nodeAid": 346347,
634 |     "nodeZid": 539904.3746312304,
635 |     "text": "",
636 |     "fontColor": "0, 200, 255"
637 |   },
638 |   {
639 |     "elementType": "link",
640 |     "nodeAid": 396970,
641 |     "nodeZid": 575589.9957041561,
642 |     "text": "",
643 |     "fontColor": "0, 200, 255"
644 |   },
645 |   {
646 |     "elementType": "link",
647 |     "nodeAid": 396970,
648 |     "nodeZid": 609759.5416871539,
649 |     "text": "",
650 |     "fontColor": "0, 200, 255"
651 |   },
652 |   {
653 |     "elementType": "link",
654 |     "nodeAid": 396970,
655 |     "nodeZid": 643800.995105714,
656 |     "text": "",
657 |     "fontColor": "0, 200, 255"
658 |   },
659 |   {
660 |     "elementType": "link",
661 |     "nodeAid": 396970,
662 |     "nodeZid": 671677.3460062885,
663 |     "text": "",
664 |     "fontColor": "0, 200, 255"
665 |   },
666 |   {
667 |     "elementType": "node",
668 |     "x": 1267,
669 |     "y": 104,
670 |     "id": 131768,
671 |     "Image": "serve1.png",
672 |     "text": "服务器",
673 |     "textPosition": "Bottom_Center",
674 |     "larm": "undefined",
675 |     "level": 6
676 |   },
677 |   {
678 |     "elementType": "link",
679 |     "nodeAid": 19184,
680 |     "nodeZid": 131768,
681 |     "text": "",
682 |     "fontColor": "0, 200, 255"
683 |   },
684 |   {
685 |     "elementType": "link",
686 |     "nodeAid": 131768,
687 |     "nodeZid": 247860,
688 |     "text": "",
689 |     "fontColor": "0, 200, 255"
690 |   },
691 |   {
692 |     "elementType": "link",
693 |     "nodeAid": 131768,
694 |     "nodeZid": 293820,
695 |     "text": "",
696 |     "fontColor": "0, 200, 255"
697 |   },
698 |   {
699 |     "elementType": "link",
700 |     "nodeAid": 131768,
701 |     "nodeZid": 346347,
702 |     "text": "",
703 |     "fontColor": "0, 200, 255"
704 |   },
705 |   {
706 |     "elementType": "link",
707 |     "nodeAid": 131768,
708 |     "nodeZid": 396970,
709 |     "text": "",
710 |     "fontColor": "0, 200, 255"
711 |   },
712 |   {
713 |     "elementType": "link",
714 |     "nodeAid": 131768,
715 |     "nodeZid": 537470.3511593604,
716 |     "text": "",
717 |     "fontColor": "0, 200, 255"
718 |   },
719 |   {
720 |     "elementType": "node",
721 |     "x": 1903,
722 |     "y": 284,
723 |     "id": 540452,
724 |     "Image": "serve3.png",
725 |     "text": "服务器",
726 |     "textPosition": "Bottom_Center",
727 |     "larm": "undefined",
728 |     "level": "6"
729 |   },
730 |   {
731 |     "elementType": "link",
732 |     "nodeAid": 540452,
733 |     "nodeZid": 765411.2706575748,
734 |     "text": "",
735 |     "fontColor": "0, 200, 255"
736 |   },
737 |   {
738 |     "elementType": "link",
739 |     "nodeAid": 540452,
740 |     "nodeZid": 809972.5580327105,
741 |     "text": "",
742 |     "fontColor": "0, 200, 255"
743 |   }
744 | ]


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # 功能
 2 | 
 3 | + 左侧栏用于导航不同层级的路由，实现对右侧不同层级拓扑图界面的切换
 4 | + 随时从服务器载入需要的设备图片用作拓扑节点
 5 | + 即时保存现有编辑数据和视图，异步加载新界面，并可导出PNG图片
 6 | + 图片节点和连线节点均具有右键菜单，可随时添加连线和设备节点并设置节点的层级
 7 | + 双击节点可修改节点的文字描述
 8 | + 其他
 9 | - [演示地址](http://www.billyhu.com/jtopo)
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/topo-1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <meta charset="UTF-8">
  4 |     <title>the test for network topology</title>
  5 |     <style type="text/css">
  6 |         html, body{
  7 |             font:14px/1.8 Arial,Microsoft YaHei,黑体,宋体,sans-serif;
  8 |             height:100%;
  9 |         }
 10 |         /*菜单选项卡*/
 11 |         *{
 12 |             margin:0;
 13 |             padding:0;
 14 |         }
 15 |         #uploadmenu{
 16 |             list-style: none;
 17 |             position:absolute;
 18 |             left:0;
 19 |             top:29px;
 20 |         }
 21 |         #uploadmenu>li>a{
 22 |             display:block;
 23 |             text-decoration: none;
 24 |             width: 90px;
 25 |             height: 24px;
 26 |             margin-left: 10px;
 27 |             padding-top:4px;
 28 |             line-height:24px;
 29 |             text-align: center;
 30 |             color: #fff;
 31 |             border-top:1px solid #ABA8A8;
 32 |         }
 33 |         #uploadmenu>li>ul>li>a{
 34 |             display:inline-block;
 35 |             width:27px;
 36 |             height:28px;
 37 |             padding-left:9px;
 38 |             padding-right:9px;
 39 |             background: #D1D1D1;
 40 |             border-radius: 5px;
 41 |         }
 42 |         #uploadmenu>li>ul>li>a>img{
 43 |             vertical-align: middle;
 44 |         }
 45 |         span{
 46 |             display:inline-block;
 47 |             height:30px;
 48 |             line-height: 30px;
 49 |             text-align: center;
 50 |             width:70px;
 51 |             padding-left: 5px;
 52 |             padding-right:5px;
 53 |             border-bottom: 1px #ADABAB solid;
 54 |         }
 55 |         .lili li:hover{
 56 |             background: #E9E7E7;
 57 |             border-radius: 5px;
 58 |         }
 59 |         .lili li:active{
 60 |             background:#FFFFFF;
 61 |             border-radius: 0px;
 62 |         }
 63 |         .nob{
 64 |             border-bottom:none !important;
 65 |         }
 66 |         .lili li{
 67 |             height:30px;
 68 |             width:129px!important;
 69 |         }
 70 |         .lili{
 71 |             border-radius:5px;
 72 |             box-shadow: 0 0 5px #434343;
 73 |         }
 74 |         #uploadmenu .li1>a{
 75 |             border: none;
 76 |         }
 77 |         .li1, .li2, .li3{
 78 |             width: 110px;
 79 |             height: 36px;
 80 |             background: #666666;
 81 |             position:relative;
 82 |             cursor: pointer;
 83 |          }
 84 |         .li3{
 85 |             border-radius:0 0 5px 5px;
 86 |          }
 87 |         .nav1, .nav2, .nav3{
 88 |             list-style: none;
 89 |             position:absolute;
 90 |             left: 110px;
 91 |             top: 0px;
 92 |             display: none;
 93 |           }
 94 |         .li1:hover .nav1{
 95 |             display:block;
 96 |             background-color: #C5C5C5;
 97 |         }
 98 |         .li2:hover .nav2{
 99 |             display:block;
100 |             background-color: #C5C5C5;
101 |         }
102 |         .li3:hover .nav3{
103 |             display:block;
104 |             background-color:#C5C5C5;
105 |         }
106 |         .lili1 li{
107 |             height:30px;
108 |             width:100px!important;
109 |         }
110 |         .lili1 li:hover{
111 |             background: #E9E7E7;
112 |             border-radius: 5px;
113 |         }
114 |         .lili1 li:active{
115 |             background:#FFFFFF;
116 |             border-radius: 0px;
117 |         }
118 |         .lili1{
119 |             border-radius:5px;
120 |             box-shadow: 0 0 5px #434343;
121 |         }
122 |         .lili1 li span{
123 |             display:inline-block;
124 |             height:30px;
125 |             line-height: 30px;
126 |             text-align: center;
127 |             width:70px;
128 |             margin-left: 10px;
129 |             border-bottom: 1px #ADABAB solid;
130 |         }
131 |         .nav4, .nav5, .nav6{
132 |             list-style: none;
133 |             position:absolute;
134 |             left: 123px;
135 |             top: 0px;
136 |             display: none;
137 |             cursor:pointer;
138 |         }
139 |         #level:hover .nav4{
140 |             display:block;
141 |             background-color:#C5C5C5;
142 |         }
143 |         #text:hover .nav5{
144 |             display:block;
145 |             background-color:#C5C5C5;
146 |         }
147 |         #alarm:hover .nav6{
148 |             display:block;
149 |             background-color:#C5C5C5;
150 |         }
151 |         #contextmenu {
152 |             width:122px;
153 |             border: 1px solid #aaa;
154 |             border-radius:7px;
155 |             border-bottom: 0;
156 |             background: #eee;
157 |             position: absolute;
158 |             list-style: none;
159 |             margin: 0;
160 |             padding: 0;
161 |             display: none;
162 |             box-shadow: 0 0 5px #434343;
163 |         }
164 |         #contextmenu li{
165 |             width:122px;
166 |             position:relative;
167 |         }
168 | 
169 |         #contextmenu li a {
170 |             height:30px;
171 |             line-height: 30px;
172 |             width:100px;
173 |             margin-left: 11px;
174 |             text-align: center;
175 |             display: block;
176 |             border-bottom: 1px solid #aaa;
177 |             cursor: pointer;
178 | 
179 |         }
180 | 
181 |         #contextmenu>li:hover {
182 |             background: #fff;
183 |             border-radius:7px;
184 |         }
185 |         #linkmenu {
186 |             width:122px;
187 |             border: 1px solid #aaa;
188 |             border-radius:7px;
189 |             border-bottom: 0;
190 |             background: #eee;
191 |             position: absolute;
192 |             list-style: none;
193 |             margin: 0;
194 |             padding: 0;
195 |             display: none;
196 |             box-shadow: 0 0 5px #434343;
197 |         }
198 |         #linkmenu li {
199 |             width:122px;
200 |         }
201 |         #linkmenu li a {
202 |             width:100px;
203 |             height:30px;
204 |             line-height: 30px;
205 |             display: block;
206 |             border-bottom: 1px solid #aaa;
207 |             cursor: pointer;
208 |             margin-left: 11px;
209 |             text-align: center;
210 |         }
211 | 
212 |         #linkmenu li:hover {
213 |             background: #fff;
214 |             border-radius:7px;
215 |         }
216 |         /*button*/
217 |         .jtopo_toolbar{
218 |             height:30px;
219 |         }
220 |         input[type="button"]{
221 |             display: inline-block;
222 |             outline: none;
223 |             cursor: pointer;
224 |             text-align: center;
225 |             text-decoration: none;
226 |             font: 10px/100% Arial, Helvetica, sans-serif;
227 |             padding: .5em 1em .55em;
228 |             -webkit-border-radius: .3em; 
229 |             -moz-border-radius: .3em;
230 |             border-radius: .3em;
231 |             color: #2E2C2C;
232 |             border: solid 1px #D6D4D4;
233 |             background: #E4E0E0;
234 |         }
235 |         input[type="button"]:hover{
236 |             background: #CECDCD;
237 |             border: solid 1px #CECDCD;
238 |         }
239 |     </style>
240 | <body>
241 | 
242 | <textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;" onkeydown="if(event.keyCode==13)this.blur();"></textarea>
243 | 
244 | <div class="right">
245 |     <div id="content">
246 |         <canvas id="canvas">sorry,your browser do not support canvas label</canvas>
247 |     </div>
248 | </div>
249 | <ul id="uploadmenu" style="display:none;">
250 |     <li class = "li1"><a>网络设备</a>
251 |         <ul class = "nav1 lili">
252 |         <li id = "firework.png"><span>防火墙</span><a><img src="img/fk.png"></a></li>
253 |         <li id = "router.png"><span>路由器</span><a><img src="img/rr.png"></a></li>
254 |         <li id = "router1.png"><span>路由器</span><a><img src="img/rr1.png"></a></li>
255 |         <li id = "serve2.png"><span>服务器</span><a><img src="img/se2.png"></a></li>
256 |         <li id = "serve3.png"><span>服务器</span><a><img src="img/se3.png"></a></li>
257 |         <li id = "serve1.png"><span>服务器</span><a><img src="img/se1.png"></a></li>
258 |         <li id = "terminal.png"><span>终端</span><a><img src="img/tl.png"></a></li>
259 |         <li id = "switch.png"><span>交换机</span><a><img src="img/sh.png"></a></li>
260 |         <li id = "switchOptical.png"><span>光纤交换机</span><a><img src="img/sO.png"></a></li>
261 |         <li id = "monitor.png"><span>监测设备</span><a><img src="img/mr.png"></a></li>
262 |         <li id = "storageServer.png"><span>存储服务器</span><a><img src="img/ss.png"></a></li>
263 |         <li id = "cloud.png"><span class = "nob">internet</span><a><img src="img/cd.png"></a></li>
264 |         </ul>
265 |     </li>
266 |     <li class = "li2"><a>区域拓扑</a>
267 |         <ul class = "nav2 lili">
268 |         <li><span>7</span></li>
269 |         <li><span>7</span></li>
270 |         <li><span>7</span></li>
271 |         <li><span>7</span></li>
272 |         <li><span>7</span></li>
273 |         <li><span>7</span></li>
274 |         <li><span   class = "nob">7</span></li>
275 |         </ul>
276 |     </li>
277 |     <li class = "li3"><a>行政拓扑</a>
278 |         <ul class = "nav3 lili">
279 |         <li><span>7</span></li>
280 |         <li><span>7</span></li>
281 |         <li><span>7</span></li>
282 |         <li><span>7</span></li>
283 |         <li><span>7</span></li>
284 |         <li><span>7</span></li>
285 |         <li><span class = "nob">7</span></li>
286 |         </ul>
287 |     </li>
288 | </ul>
289 | 
290 | <ul id="contextmenu" style="display:none;">
291 |     <li><a>添加连线</a></li>
292 |     <li><a>添加节点</a></li>
293 |     <li id = "level"><a>设置等级</a>
294 |     <ul class = "lili1 nav4">
295 |         <li id = "1"><span>壹</span></li>
296 |         <li id = "2"><span>贰</span></li>
297 |         <li id = "3"><span>弎</span></li>
298 |         <li id = "4"><span>肆</span></li>
299 |         <li id = "5"><span>伍</span></li>
300 |         <li id = "6"><span class = "nob">陆</span></li>
301 |     </ul>
302 |     </li>
303 |     <li id = "text"><a>设置文字位置</a>
304 |     <ul class = "lili1 nav5">
305 |         <li id = "Top_Center"><span>上</span></li>
306 |         <li id = "Bottom_Center"><span>下</span></li>
307 |         <li id = "Middle_Left"><span>左</span></li>
308 |         <li id = "Middle_Right"><span>右</span></li>
309 |         <li id = "Middle_Center"><span class = "nob">中</span></li>
310 |     </ul>
311 |     </li>
312 |     <li id = "alarm"><a>警告</a>
313 |     <ul class = "lili1 nav6">
314 |         <li id = "11"><span>一级告警</span></li>
315 |         <li id = "22"><span>二级告警</span></li>
316 |         <li id = "33"><span>三级告警</span></li>
317 |         <li id = "44"><span class = "nob">取消告警</span></li>
318 |     </ul>
319 |     </li>
320 |     <li><a>顺时针旋转</a></li>
321 |     <li><a>逆时针旋转</a></li>
322 |     <li><a>放大</a></li>
323 |     <li><a>缩小</a></li>
324 |     <li><a>删除该节点</a></li>
325 |     <li><a>取消</a></li>
326 | </ul>
327 | <ul id="linkmenu" style="display:none;">
328 |     <li><a>修改颜色(随机)</a></li>
329 |     <li><a>改为红色</a></li>
330 |     <li><a>改为普通颜色</a></li>
331 |     <li><a>删除连线</a></li>
332 |     <li><a>取消</a></li>
333 | </ul>
334 | <script src="js/jquery.min.js" type="text/javascript"></script>
335 | <script src="js/jtopo-0.4.8-min.js" type="text/javascript"></script>
336 |  <script type="text/javascript">
337 |         $(document).ready(function() {
338 | 
339 |             var canvas = document.getElementById('canvas');
340 |             canvas.height = window.innerHeight - 30;
341 |             canvas.width = window.innerWidth;
342 | 
343 |             var scene = new JTopo.Scene();
344 |             scene.background = './img/bg.jpeg';
345 |             var stage = new JTopo.Stage(canvas);
346 |             showJTopoToobar(stage);
347 |             var currentNode = null;
348 |             var endNode = null;
349 |             var tmpx = null;
350 |             var tmpy = null;
351 |             var validation = null;
352 | 
353 |             //服务器载入绘制拓扑图
354 |             $.ajax({
355 |                 typt:"GET",
356 |                 url:"js/jsonstr.json",
357 |                 dataType:"json",
358 |                 success:function(data){
359 |                         data.forEach(function(a){
360 |                    //此处可以加入地域节点
361 |                     if(a.elementType == "node"){
362 |                         if(a.level <= 1) {
363 |                             AddNode(a.x, a.y, a.text, a.Image, a.textPosition, a.level, a.larm);
364 |                         }
365 |                     }
366 |                     });
367 | 
368 |                          data.forEach(function(a){
369 |                     if(a.elementType == "link"){
370 |                         var nodeA = scene.findElements(function(e){return e.id == a.nodeAid;});
371 |                         var nodeZ = scene.findElements(function(e){return e.id == a.nodeZid;});
372 |                         if(nodeA[0] && nodeZ[0]) {
373 |                             Addlink(nodeA[0], nodeZ[0], a.text, a.fontColor);
374 |                         }
375 |                     }
376 |                     });
377 |                 }
378 |                 });
379 | 
380 |             //画出拓扑图(函数)
381 |             function AddNode(x, y, str, img, textPosition,level,larm)
382 |             {
383 |                 var node = new JTopo.Node(str);
384 |                 node.serializedProperties.push('id');
385 |                 node.serializedProperties.push('level');
386 |                 node.setLocation(x ,y);
387 |                 node.Image = '';
388 |                 node.id = x*y;
389 |                 node.level = level;
390 |                 if(null != img) {
391 |                     node.setImage('./img/' + img, true);
392 |                     node.Image = img;
393 |                 }
394 |                 if(larm == "2W"){
395 |                     node.alarm = '2W';
396 |                 }
397 |                 node.textPosition = textPosition;
398 |                 node.fontColor = '0,0,0';
399 |                 node.addEventListener('mouseup',function(event){
400 |                     handler(event,node);//将当前事件的node赋给currentNode并显示右键菜单
401 |                 });
402 |                 node.addEventListener('click', function(event){
403 |                     endNode = node;
404 |                     if(null != currentNode && currentNode != endNode && validation === true){
405 |                         strr = "";
406 |                         Addlink(currentNode, endNode, strr);
407 |                         currentNode = null;
408 |                         validation = false;//验证是否在当前节点上右键点击了添加节点
409 |                     }
410 |                 });
411 | 
412 |                 scene.add(node);
413 |                 return node;
414 |             }
415 |             function Addlink(node1, node2, str, color)//-----增加折线------
416 |             {
417 |                 var link = new JTopo.Link(node1, node2, str);
418 |                 //node2.father = node1;
419 |                 link.lineWidth = 3;//线宽
420 |                 link.bundleOffset = 60;
421 |                 link.bundleGap = 20;
422 |                 link.textOffsetY = 3;
423 |                 link.fontColor = color || '0, 200, 255';
424 |                 link.strokeColor = color || '0, 200, 255';
425 |                 link.addEventListener('mouseup',function(event){
426 |                     currentLink = this;
427 |                     handlelink(event);
428 |                 });
429 |                 scene.add(link);
430 |             }
431 | 
432 |             function AddTextNode(x, y, str, scene)//加入单独的文字节点
433 |             {
434 |                 var node = new JTopo.Node(str);
435 |                 node.setLocation(x, y);
436 |                 node.serializedProperties.push('id');
437 |                 node.id = x+y;
438 |                 node.fillColor = '255,255,255';
439 |                 node.textPosition = 'Middle_Center';
440 |                 node.fontColor = '0,0,0';
441 |                 node.setSize(120,30);
442 |                 node.dragable = false;
443 |                 node.showSelected = false;
444 |                 node.selected = false;
445 |                 scene.add(node);
446 |             }
447 | 
448 |             function handler(event, obj) {//绑定右键菜单
449 |                 $("#linkmenu").hide();
450 |                 if (event.button == 2) {
451 |                     currentNode = obj;
452 |                     tmpx = event.pageX + 30;
453 |                     tmpy = event.pageY + 30;
454 |                     $("#contextmenu").css({
455 |                         top: event.pageY,
456 |                         left: event.pageX
457 |                     }).show();
458 |                     $("#contextmenu a").click(function(){
459 |                         var text = $(this).text();
460 |                           if (text == '添加连线'){
461 |                             validation = true;//验证是否在当前节点上右键点击了添加节点
462 |                  }
463 |                  });
464 |                 }
465 |             }
466 | 
467 |             function handlelink(event){
468 |                 $("#contextmenu").hide();
469 |                 if(event.button == 2){
470 |                     $("#linkmenu").css({
471 |                         top:event.pageY,
472 |                         left:event.pageX
473 |                     }).show();
474 |                 }
475 |             }
476 | 
477 |              stage.click(function (event) {
478 |                 if (event.button == 0) {// 右键
479 |                     // 关闭弹出菜单（div）
480 |                     $("#contextmenu").hide();
481 |                     $("#linkmenu").hide();
482 |                     $("#uploadmenu").hide();
483 |                 }
484 |             });
485 |     
486 |             //右键菜单处理
487 |             $("#contextmenu a").click(function(){
488 |                 var text = $(this).text();
489 |                 if("取消" == text){
490 |                     $("#contextmenu").hide();
491 |                 }if(text == '删除该节点'){
492 |                     scene.remove(currentNode);
493 |                     currentNode = null;
494 |                     $("#contextmenu").hide();
495 |                 }
496 |                     currentNode.save();
497 |                 
498 |                  if (text == '添加连线'){
499 | 
500 |                  } else if(text == '添加节点'){
501 |                     AddNode(tmpx, tmpy, currentNode.text, currentNode.Image,currentNode.level, 'Bottom_Center');
502 |                 }else if(text == '顺时针旋转'){
503 |                     currentNode.rotate += 0.5;
504 |                 }else if(text == '逆时针旋转'){
505 |                     currentNode.rotate -= 0.5;
506 |                 }else if(text == '放大'){
507 |                     currentNode.scaleX += 0.2;
508 |                     currentNode.scaleY += 0.2;
509 |                 }else if(text == '缩小'){
510 |                     currentNode.scaleX -= 0.2;
511 |                     currentNode.scaleY -= 0.2;
512 |                 }else if(text == '警告')
513 |                 {
514 |                     if(currentNode.alarm == null) {
515 |                         currentNode.alarm = '2W';
516 |                     }else
517 |                     {   
518 | 
519 |                         currentNode.alarm = null;
520 |                     }
521 | 
522 |                 }
523 |                 $("#contextmenu").hide();
524 |             });
525 |             $("#linkmenu a").click(function(){
526 |                 var text = $(this).text();
527 |                 if("取消" == text){
528 |                     $("#linkmenu").hide();
529 |                 }
530 |                 if(text == '修改颜色(随机)'){
531 |                     //currentLink.fillColor = JTopo.util.randomColor();
532 |                     currentLink.strokeColor = JTopo.util.randomColor();
533 |                 }else if(text == '改为红色')
534 |                 {
535 |                     currentLink.strokeColor = '255,0,0';//线路
536 |                     currentLink.text = "告警";
537 |                     currentLink.fontColor = '255,0,0';
538 |                 }else if(text == '改为普通颜色')
539 |                 {
540 |                     currentLink.strokeColor =  '0,200,255';
541 |                 }else if(text == '删除连线')
542 |                 {
543 |                     scene.remove(currentLink);
544 |                 }
545 |                 $("#linkmenu").hide();
546 |             });
547 | 
548 |             //修改文字
549 |             var textfield = $("#jtopo_textfield");
550 |             scene.dbclick(function(event){
551 |                 if(event.target == null) return;
552 |                 var e = event.target;
553 |                 textfield.css({
554 |                     top: event.pageY,
555 |                     left:event.pageX - e.width/2
556 |                 }).val(e.text).show().focus().select();
557 |                 console.log(textfield.val());
558 |                 e.text = "";
559 |                 textfield[0].JTopoNode = e;
560 |             });
561 |             $("#jtopo_textfield").blur(function(){
562 |                 textfield[0].JTopoNode.text = textfield.hide().val();
563 |             });
564 |             stage.add(scene);
565 | 
566 |             // 页面工具栏
567 |             function showJTopoToobar(stage){
568 |                 var toobarDiv = $('<div class="jtopo_toolbar">').html(''
569 |                     +'<input type="button" id="upLoadImage" value=" 载入设备 " />'
570 |                     +'<input type="radio" name="modeRadio" value="normal" checked id="r1"/>'
571 |                     +'<label for="r1"> 默认模式</label>'
572 |                     +'&nbsp;<input type="radio" name="modeRadio" value="edit" id="r4"/><label for="r4">图片编辑模式</label>'
573 |                     +'&nbsp;&nbsp;<input type="button" id="centerButton" value="居中显示"/>'
574 |                     +'<input type="button" id="zoomOutButton" value=" 放 大 " />'
575 |                     +'<input type="button" id="zoomInButton" value=" 缩 小 " />'
576 |                     +'&nbsp;&nbsp;<input type="checkbox" id="zoomCheckbox"/><label for="zoomCheckbox">鼠标缩放</label>'
577 |                     +'&nbsp;&nbsp;<input type = "button" id = "saveJsonStr" value = "保 存"/>'
578 |                     +'&nbsp;&nbsp;<input type="button" id="exportButton" value="导出PNG">');
579 |                     
580 |                 $('#content').prepend(toobarDiv);
581 | 
582 |                 // 工具栏按钮处理
583 |                 $("input[name='modeRadio']").click(function(){          
584 |                     stage.mode = $("input[name='modeRadio']:checked").val();
585 |                 });
586 |                 $('#centerButton').click(function(){
587 |                     stage.centerAndZoom(); //缩放并居中显示
588 |                 });
589 |                 $('#zoomOutButton').click(function(){//放大
590 |                     stage.zoomOut();
591 |                 });
592 |                 $('#zoomInButton').click(function(){//缩小
593 |                     stage.zoomIn();
594 |                 });
595 |                 $('#exportButton').click(function(){//保存PNG
596 |                     stage.saveImageInfo();
597 |                 });
598 |                 $('#zoomCheckbox').click(function(){
599 |                     if($('#zoomCheckbox').attr('checked')){
600 |                         stage.wheelZoom = 0.85; // 设置鼠标缩放比例
601 |                     }else{
602 |                         stage.wheelZoom = null; // 取消鼠标缩放比例
603 |                     }
604 |                 });
605 |                 $("#upLoadImage").click(function() {//载入节点
606 |                     $("#uploadmenu").toggle();
607 |                 });
608 |                 $("#uploadmenu ul").on("click", "li",function(e){
609 |                     var x = 10,y = 150;
610 |                     var str = $(this).text();
611 |                     var img = $(this).attr("id");
612 |                     var textPosition = "Bottom_Center";
613 |                     var level = 6;
614 |                     AddNode(x, y, str, img, textPosition,level);
615 |                 });
616 |                 $("#contextmenu .nav4").on("click", "li", function(){//设置level
617 |                     var lev = $(this).attr("id");
618 |                     currentNode.level = lev;
619 |                 });
620 |                 $("#contextmenu .nav5").on("click", "li", function(){//设置文字位置
621 |                     var tex = $(this).attr("id");
622 |                     currentNode.textPosition = tex;
623 |                 });
624 |                 $("#contextmenu .nav6").on("click", "li", function(){//设置告警等级,动画,颜色
625 |                     var ala = $(this).text();
626 |                     var curr = currentNode;
627 |                     var color = $(this).attr("id");
628 |                     curr.alarm = ala;
629 |                     /*var anima = setInterval(function(){
630 |                         if(curr.alarm == ala){
631 |                         curr.alarm = null;
632 |                         }else{
633 |                         curr.alarm = ala;
634 |                         }
635 |                     }, 600);*/
636 |                     if(color == 11){
637 |                         curr.alarmColor = '252, 233, 58';
638 |                     }else if(color == 22){
639 |                         curr.alarmColor = '255, 97, 0';
640 |                     }else if(color == 33){
641 |                         curr.alarmColor = '255, 0, 0';
642 |                     }
643 |                     console.log(curr.alarmColor);
644 |                 });
645 |                 $("#saveJsonStr").click(function(){//保存----大小，角度------非必须
646 |                     var a = scene;
647 |                     var d="[";
648 |                             //d+='"scene":]';
649 |                             for(var e=0;e< a.childs.length;e++){
650 |                                 var f= a.childs[e];
651 |                                 d+="{";
652 |                                 if(f.elementType == 'node')
653 |                                 {   
654 |                                     f.id = f.x * f.y;
655 |                                     d += "\"elementType\":"+ '"'+f.elementType+'"';
656 |                                     d += ",\"x\":"+ f.x;
657 |                                     d += ",\"y\":"+ f.y;
658 |                                     d += ",\"id\":"+ f.id;
659 |                                     d += ",\"Image\":"+ '"'+ f.Image+ '"';
660 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
661 |                                     d +=",\"textPosition\":"+ '"'+ f.textPosition+ '"';
662 |                                     d +=",\"larm\":"+ '"'+ f.alarm+ '"';
663 |                                     d +=",\"level\":"+ f.level;
664 |                                 }else if(f.elementType == 'link'){
665 |                                     d += "\"elementType\":"+ '"'+ f.elementType+ '"';
666 |                                     d += ",\"nodeAid\":"+ f.nodeA.id;
667 |                                     d += ",\"nodeZid\":"+ f.nodeZ.id;
668 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
669 |                                     d +=",\"fontColor\":"+ '"'+ f.fontColor+ '"';
670 |                                 }
671 |                                 d+="},";
672 |                             }
673 |                             d= d.substring(0, d.length-1);
674 |                             d+="]";
675 |                             d = d.replace("\r\n", "\\r\\n");
676 |                             console.log(d);
677 |                             alert("保存成功");
678 |                 });
679 |                 
680 |             }
681 | 
682 |             var runPrefixMethod = function(element, method) {
683 |                 var usablePrefixMethod;
684 |                 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
685 |                     if (usablePrefixMethod) return;
686 |                     if (prefix === "") {
687 |                         // 无前缀，方法首字母小写
688 |                         method = method.slice(0,1).toLowerCase() + method.slice(1);
689 |                     }
690 |                     var typePrefixMethod = typeof element[prefix + method];
691 |                     if (typePrefixMethod + "" !== "undefined") {
692 |                         if (typePrefixMethod === "function") {
693 |                             usablePrefixMethod = element[prefix + method]();
694 |                         } else {
695 |                             usablePrefixMethod = element[prefix + method];
696 |                         }
697 |                     }
698 |                 }
699 |             );
700 | 
701 |             return usablePrefixMethod;
702 |             };
703 |         });
704 |     </script>
705 | </body>
706 | </html>


--------------------------------------------------------------------------------
/topo-2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <meta charset="UTF-8">
  4 |     <title>the test for network topology</title>
  5 |     <style type="text/css">
  6 |         html, body{
  7 |             font:14px/1.8 Arial,Microsoft YaHei,黑体,宋体,sans-serif;
  8 |             height:100%;
  9 |         }
 10 |         /*菜单选项卡*/
 11 |         *{
 12 |             margin:0;
 13 |             padding:0;
 14 |         }
 15 |         #uploadmenu{
 16 |             list-style: none;
 17 |             position:absolute;
 18 |             left:0;
 19 |             top:29px;
 20 |         }
 21 |         #uploadmenu>li>a{
 22 |             display:block;
 23 |             text-decoration: none;
 24 |             width: 90px;
 25 |             height: 24px;
 26 |             margin-left: 10px;
 27 |             padding-top:4px;
 28 |             line-height:24px;
 29 |             text-align: center;
 30 |             color: #fff;
 31 |             border-top:1px solid #ABA8A8;
 32 |         }
 33 |         #uploadmenu>li>ul>li>a{
 34 |             display:inline-block;
 35 |             width:27px;
 36 |             height:28px;
 37 |             padding-left:9px;
 38 |             padding-right:9px;
 39 |             background: #D1D1D1;
 40 |             border-radius: 5px;
 41 |         }
 42 |         #uploadmenu>li>ul>li>a>img{
 43 |             vertical-align: middle;
 44 |         }
 45 |         span{
 46 |             display:inline-block;
 47 |             height:30px;
 48 |             line-height: 30px;
 49 |             text-align: center;
 50 |             width:70px;
 51 |             padding-left: 5px;
 52 |             padding-right:5px;
 53 |             border-bottom: 1px #ADABAB solid;
 54 |         }
 55 |         .lili li:hover{
 56 |             background: #E9E7E7;
 57 |             border-radius: 5px;
 58 |         }
 59 |         .lili li:active{
 60 |             background:#FFFFFF;
 61 |             border-radius: 0px;
 62 |         }
 63 |         .nob{
 64 |             border-bottom:none !important;
 65 |         }
 66 |         .lili li{
 67 |             height:30px;
 68 |             width:129px!important;
 69 |         }
 70 |         .lili{
 71 |             border-radius:5px;
 72 |             box-shadow: 0 0 5px #434343;
 73 |         }
 74 |         #uploadmenu .li1>a{
 75 |             border: none;
 76 |         }
 77 |         .li1, .li2, .li3{
 78 |             width: 110px;
 79 |             height: 36px;
 80 |             background: #666666;
 81 |             position:relative;
 82 |             cursor: pointer;
 83 |          }
 84 |         .li3{
 85 |             border-radius:0 0 5px 5px;
 86 |          }
 87 |         .nav1, .nav2, .nav3{
 88 |             list-style: none;
 89 |             position:absolute;
 90 |             left: 110px;
 91 |             top: 0px;
 92 |             display: none;
 93 |           }
 94 |         .li1:hover .nav1{
 95 |             display:block;
 96 |             background-color: #C5C5C5;
 97 |         }
 98 |         .li2:hover .nav2{
 99 |             display:block;
100 |             background-color: #C5C5C5;
101 |         }
102 |         .li3:hover .nav3{
103 |             display:block;
104 |             background-color:#C5C5C5;
105 |         }
106 |         .lili1 li{
107 |             height:30px;
108 |             width:100px!important;
109 |         }
110 |         .lili1 li:hover{
111 |             background: #E9E7E7;
112 |             border-radius: 5px;
113 |         }
114 |         .lili1 li:active{
115 |             background:#FFFFFF;
116 |             border-radius: 0px;
117 |         }
118 |         .lili1{
119 |             border-radius:5px;
120 |             box-shadow: 0 0 5px #434343;
121 |         }
122 |         .lili1 li span{
123 |             display:inline-block;
124 |             height:30px;
125 |             line-height: 30px;
126 |             text-align: center;
127 |             width:70px;
128 |             margin-left: 10px;
129 |             border-bottom: 1px #ADABAB solid;
130 |         }
131 |         .nav4, .nav5, .nav6{
132 |             list-style: none;
133 |             position:absolute;
134 |             left: 123px;
135 |             top: 0px;
136 |             display: none;
137 |             cursor:pointer;
138 |         }
139 |         #level:hover .nav4{
140 |             display:block;
141 |             background-color:#C5C5C5;
142 |         }
143 |         #text:hover .nav5{
144 |             display:block;
145 |             background-color:#C5C5C5;
146 |         }
147 |         #alarm:hover .nav6{
148 |             display:block;
149 |             background-color:#C5C5C5;
150 |         }
151 |         #contextmenu {
152 |             width:122px;
153 |             border: 1px solid #aaa;
154 |             border-radius:7px;
155 |             border-bottom: 0;
156 |             background: #eee;
157 |             position: absolute;
158 |             list-style: none;
159 |             margin: 0;
160 |             padding: 0;
161 |             display: none;
162 |             box-shadow: 0 0 5px #434343;
163 |         }
164 |         #contextmenu li{
165 |             width:122px;
166 |             position:relative;
167 |         }
168 | 
169 |         #contextmenu li a {
170 |             height:30px;
171 |             line-height: 30px;
172 |             width:100px;
173 |             margin-left: 11px;
174 |             text-align: center;
175 |             display: block;
176 |             border-bottom: 1px solid #aaa;
177 |             cursor: pointer;
178 | 
179 |         }
180 | 
181 |         #contextmenu>li:hover {
182 |             background: #fff;
183 |             border-radius:7px;
184 |         }
185 |         #linkmenu {
186 |             width:122px;
187 |             border: 1px solid #aaa;
188 |             border-radius:7px;
189 |             border-bottom: 0;
190 |             background: #eee;
191 |             position: absolute;
192 |             list-style: none;
193 |             margin: 0;
194 |             padding: 0;
195 |             display: none;
196 |             box-shadow: 0 0 5px #434343;
197 |         }
198 |         #linkmenu li {
199 |             width:122px;
200 |         }
201 |         #linkmenu li a {
202 |             width:100px;
203 |             height:30px;
204 |             line-height: 30px;
205 |             display: block;
206 |             border-bottom: 1px solid #aaa;
207 |             cursor: pointer;
208 |             margin-left: 11px;
209 |             text-align: center;
210 |         }
211 | 
212 |         #linkmenu li:hover {
213 |             background: #fff;
214 |             border-radius:7px;
215 |         }
216 |         /*button*/
217 |         .jtopo_toolbar{
218 |             height:30px;
219 |         }
220 |         input[type="button"]{
221 |             display: inline-block;
222 |             outline: none;
223 |             cursor: pointer;
224 |             text-align: center;
225 |             text-decoration: none;
226 |             font: 10px/100% Arial, Helvetica, sans-serif;
227 |             padding: .5em 1em .55em;
228 |             -webkit-border-radius: .3em; 
229 |             -moz-border-radius: .3em;
230 |             border-radius: .3em;
231 |             color: #2E2C2C;
232 |             border: solid 1px #D6D4D4;
233 |             background: #E4E0E0;
234 |         }
235 |         input[type="button"]:hover{
236 |             background: #CECDCD;
237 |             border: solid 1px #CECDCD;
238 |         }
239 |     </style>
240 | <body>
241 | 
242 | <textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;" onkeydown="if(event.keyCode==13)this.blur();"></textarea>
243 | 
244 | <div class="right">
245 |     <div id="content">
246 |         <canvas id="canvas">sorry,your browser do not support canvas label</canvas>
247 |     </div>
248 | </div>
249 | <ul id="uploadmenu" style="display:none;">
250 |     <li class = "li1"><a>网络设备</a>
251 |         <ul class = "nav1 lili">
252 |         <li id = "firework.png"><span>防火墙</span><a><img src="img/fk.png"></a></li>
253 |         <li id = "router.png"><span>路由器</span><a><img src="img/rr.png"></a></li>
254 |         <li id = "router1.png"><span>路由器</span><a><img src="img/rr1.png"></a></li>
255 |         <li id = "serve2.png"><span>服务器</span><a><img src="img/se2.png"></a></li>
256 |         <li id = "serve3.png"><span>服务器</span><a><img src="img/se3.png"></a></li>
257 |         <li id = "serve1.png"><span>服务器</span><a><img src="img/se1.png"></a></li>
258 |         <li id = "terminal.png"><span>终端</span><a><img src="img/tl.png"></a></li>
259 |         <li id = "switch.png"><span>交换机</span><a><img src="img/sh.png"></a></li>
260 |         <li id = "switchOptical.png"><span>光纤交换机</span><a><img src="img/sO.png"></a></li>
261 |         <li id = "monitor.png"><span>监测设备</span><a><img src="img/mr.png"></a></li>
262 |         <li id = "storageServer.png"><span>存储服务器</span><a><img src="img/ss.png"></a></li>
263 |         <li id = "cloud.png"><span class = "nob">internet</span><a><img src="img/cd.png"></a></li>
264 |         </ul>
265 |     </li>
266 |     <li class = "li2"><a>区域拓扑</a>
267 |         <ul class = "nav2 lili">
268 |         <li><span>7</span></li>
269 |         <li><span>7</span></li>
270 |         <li><span>7</span></li>
271 |         <li><span>7</span></li>
272 |         <li><span>7</span></li>
273 |         <li><span>7</span></li>
274 |         <li><span   class = "nob">7</span></li>
275 |         </ul>
276 |     </li>
277 |     <li class = "li3"><a>行政拓扑</a>
278 |         <ul class = "nav3 lili">
279 |         <li><span>7</span></li>
280 |         <li><span>7</span></li>
281 |         <li><span>7</span></li>
282 |         <li><span>7</span></li>
283 |         <li><span>7</span></li>
284 |         <li><span>7</span></li>
285 |         <li><span class = "nob">7</span></li>
286 |         </ul>
287 |     </li>
288 | </ul>
289 | 
290 | <ul id="contextmenu" style="display:none;">
291 |     <li><a>添加连线</a></li>
292 |     <li><a>添加节点</a></li>
293 |     <li id = "level"><a>设置等级</a>
294 |     <ul class = "lili1 nav4">
295 |         <li id = "1"><span>壹</span></li>
296 |         <li id = "2"><span>贰</span></li>
297 |         <li id = "3"><span>弎</span></li>
298 |         <li id = "4"><span>肆</span></li>
299 |         <li id = "5"><span>伍</span></li>
300 |         <li id = "6"><span class = "nob">陆</span></li>
301 |     </ul>
302 |     </li>
303 |     <li id = "text"><a>设置文字位置</a>
304 |     <ul class = "lili1 nav5">
305 |         <li id = "Top_Center"><span>上</span></li>
306 |         <li id = "Bottom_Center"><span>下</span></li>
307 |         <li id = "Middle_Left"><span>左</span></li>
308 |         <li id = "Middle_Right"><span>右</span></li>
309 |         <li id = "Middle_Center"><span class = "nob">中</span></li>
310 |     </ul>
311 |     </li>
312 |     <li id = "alarm"><a>警告</a>
313 |     <ul class = "lili1 nav6">
314 |         <li id = "11"><span>一级告警</span></li>
315 |         <li id = "22"><span>二级告警</span></li>
316 |         <li id = "33"><span>三级告警</span></li>
317 |         <li id = "44"><span class = "nob">取消告警</span></li>
318 |     </ul>
319 |     </li>
320 |     <li><a>顺时针旋转</a></li>
321 |     <li><a>逆时针旋转</a></li>
322 |     <li><a>放大</a></li>
323 |     <li><a>缩小</a></li>
324 |     <li><a>删除该节点</a></li>
325 |     <li><a>取消</a></li>
326 | </ul>
327 | <ul id="linkmenu" style="display:none;">
328 |     <li><a>修改颜色(随机)</a></li>
329 |     <li><a>改为红色</a></li>
330 |     <li><a>改为普通颜色</a></li>
331 |     <li><a>删除连线</a></li>
332 |     <li><a>取消</a></li>
333 | </ul>
334 | <script src="js/jquery.min.js" type="text/javascript"></script>
335 | <script src="js/jtopo-0.4.8-min.js" type="text/javascript"></script>
336 |  <script type="text/javascript">
337 |         $(document).ready(function() {
338 | 
339 |             var canvas = document.getElementById('canvas');
340 |             canvas.height = window.innerHeight - 30;
341 |             canvas.width = window.innerWidth;
342 | 
343 |             var scene = new JTopo.Scene();
344 |             scene.background = './img/bg.jpeg';
345 |             var stage = new JTopo.Stage(canvas);
346 |             showJTopoToobar(stage);
347 |             var currentNode = null;
348 |             var endNode = null;
349 |             var tmpx = null;
350 |             var tmpy = null;
351 |             var validation = null;
352 | 
353 |             //服务器载入绘制拓扑图
354 |             $.ajax({
355 |                 typt:"GET",
356 |                 url:"js/jsonstr.json",
357 |                 dataType:"json",
358 |                 success:function(data){
359 |                         data.forEach(function(a){
360 |                    //此处可以加入地域节点
361 |                     if(a.elementType == "node"){
362 |                         if(a.level <= 2) {
363 |                             AddNode(a.x, a.y, a.text, a.Image, a.textPosition, a.level, a.larm);
364 |                         }
365 |                     }
366 |                     });
367 | 
368 |                          data.forEach(function(a){
369 |                     if(a.elementType == "link"){
370 |                         var nodeA = scene.findElements(function(e){return e.id == a.nodeAid;});
371 |                         var nodeZ = scene.findElements(function(e){return e.id == a.nodeZid;});
372 |                         if(nodeA[0] && nodeZ[0]) {
373 |                             Addlink(nodeA[0], nodeZ[0], a.text, a.fontColor);
374 |                         }
375 |                     }
376 |                     });
377 |                 }
378 |                 });
379 | 
380 |             //画出拓扑图(函数)
381 |             function AddNode(x, y, str, img, textPosition,level,larm)
382 |             {
383 |                 var node = new JTopo.Node(str);
384 |                 node.serializedProperties.push('id');
385 |                 node.serializedProperties.push('level');
386 |                 node.setLocation(x ,y);
387 |                 node.Image = '';
388 |                 node.id = x*y;
389 |                 node.level = level;
390 |                 if(null != img) {
391 |                     node.setImage('./img/' + img, true);
392 |                     node.Image = img;
393 |                 }
394 |                 if(larm == "2W"){
395 |                     node.alarm = '2W';
396 |                 }
397 |                 node.textPosition = textPosition;
398 |                 node.fontColor = '0,0,0';
399 |                 node.addEventListener('mouseup',function(event){
400 |                     handler(event,node);//将当前事件的node赋给currentNode并显示右键菜单
401 |                 });
402 |                 node.addEventListener('click', function(event){
403 |                     endNode = node;
404 |                     if(null != currentNode && currentNode != endNode && validation === true){
405 |                         strr = "";
406 |                         Addlink(currentNode, endNode, strr);
407 |                         currentNode = null;
408 |                         validation = false;//验证是否在当前节点上右键点击了添加节点
409 |                     }
410 |                 });
411 | 
412 |                 scene.add(node);
413 |                 return node;
414 |             }
415 |             function Addlink(node1, node2, str, color)//-----增加折线------
416 |             {
417 |                 var link = new JTopo.Link(node1, node2, str);
418 |                 //node2.father = node1;
419 |                 link.lineWidth = 3;//线宽
420 |                 link.bundleOffset = 60;
421 |                 link.bundleGap = 20;
422 |                 link.textOffsetY = 3;
423 |                 link.fontColor = color || '0, 200, 255';
424 |                 link.strokeColor = color || '0, 200, 255';
425 |                 link.addEventListener('mouseup',function(event){
426 |                     currentLink = this;
427 |                     handlelink(event);
428 |                 });
429 |                 scene.add(link);
430 |             }
431 | 
432 |             function AddTextNode(x, y, str, scene)//加入单独的文字节点
433 |             {
434 |                 var node = new JTopo.Node(str);
435 |                 node.setLocation(x, y);
436 |                 node.serializedProperties.push('id');
437 |                 node.id = x+y;
438 |                 node.fillColor = '255,255,255';
439 |                 node.textPosition = 'Middle_Center';
440 |                 node.fontColor = '0,0,0';
441 |                 node.setSize(120,30);
442 |                 node.dragable = false;
443 |                 node.showSelected = false;
444 |                 node.selected = false;
445 |                 scene.add(node);
446 |             }
447 | 
448 |             function handler(event, obj) {//绑定右键菜单
449 |                 $("#linkmenu").hide();
450 |                 if (event.button == 2) {
451 |                     currentNode = obj;
452 |                     tmpx = event.pageX + 30;
453 |                     tmpy = event.pageY + 30;
454 |                     $("#contextmenu").css({
455 |                         top: event.pageY,
456 |                         left: event.pageX
457 |                     }).show();
458 |                     $("#contextmenu a").click(function(){
459 |                         var text = $(this).text();
460 |                           if (text == '添加连线'){
461 |                             validation = true;//验证是否在当前节点上右键点击了添加节点
462 |                  }
463 |                  });
464 |                 }
465 |             }
466 | 
467 |             function handlelink(event){
468 |                 $("#contextmenu").hide();
469 |                 if(event.button == 2){
470 |                     $("#linkmenu").css({
471 |                         top:event.pageY,
472 |                         left:event.pageX
473 |                     }).show();
474 |                 }
475 |             }
476 | 
477 |              stage.click(function (event) {
478 |                 if (event.button == 0) {// 右键
479 |                     // 关闭弹出菜单（div）
480 |                     $("#contextmenu").hide();
481 |                     $("#linkmenu").hide();
482 |                     $("#uploadmenu").hide();
483 |                 }
484 |             });
485 |     
486 |             //右键菜单处理
487 |             $("#contextmenu a").click(function(){
488 |                 var text = $(this).text();
489 |                 if("取消" == text){
490 |                     $("#contextmenu").hide();
491 |                 }if(text == '删除该节点'){
492 |                     scene.remove(currentNode);
493 |                     currentNode = null;
494 |                     $("#contextmenu").hide();
495 |                 }
496 |                     currentNode.save();
497 |                 
498 |                  if (text == '添加连线'){
499 | 
500 |                  } else if(text == '添加节点'){
501 |                     AddNode(tmpx, tmpy, currentNode.text, currentNode.Image,currentNode.level, 'Bottom_Center');
502 |                 }else if(text == '顺时针旋转'){
503 |                     currentNode.rotate += 0.5;
504 |                 }else if(text == '逆时针旋转'){
505 |                     currentNode.rotate -= 0.5;
506 |                 }else if(text == '放大'){
507 |                     currentNode.scaleX += 0.2;
508 |                     currentNode.scaleY += 0.2;
509 |                 }else if(text == '缩小'){
510 |                     currentNode.scaleX -= 0.2;
511 |                     currentNode.scaleY -= 0.2;
512 |                 }else if(text == '警告')
513 |                 {
514 |                     if(currentNode.alarm == null) {
515 |                         currentNode.alarm = '2W';
516 |                     }else
517 |                     {   
518 | 
519 |                         currentNode.alarm = null;
520 |                     }
521 | 
522 |                 }
523 |                 $("#contextmenu").hide();
524 |             });
525 |             $("#linkmenu a").click(function(){
526 |                 var text = $(this).text();
527 |                 if("取消" == text){
528 |                     $("#linkmenu").hide();
529 |                 }
530 |                 if(text == '修改颜色(随机)'){
531 |                     //currentLink.fillColor = JTopo.util.randomColor();
532 |                     currentLink.strokeColor = JTopo.util.randomColor();
533 |                 }else if(text == '改为红色')
534 |                 {
535 |                     currentLink.strokeColor = '255,0,0';//线路
536 |                     currentLink.text = "告警";
537 |                     currentLink.fontColor = '255,0,0';
538 |                 }else if(text == '改为普通颜色')
539 |                 {
540 |                     currentLink.strokeColor =  '0,200,255';
541 |                 }else if(text == '删除连线')
542 |                 {
543 |                     scene.remove(currentLink);
544 |                 }
545 |                 $("#linkmenu").hide();
546 |             });
547 | 
548 |             //修改文字
549 |             var textfield = $("#jtopo_textfield");
550 |             scene.dbclick(function(event){
551 |                 if(event.target == null) return;
552 |                 var e = event.target;
553 |                 textfield.css({
554 |                     top: event.pageY,
555 |                     left:event.pageX - e.width/2
556 |                 }).val(e.text).show().focus().select();
557 |                 console.log(textfield.val());
558 |                 e.text = "";
559 |                 textfield[0].JTopoNode = e;
560 |             });
561 |             $("#jtopo_textfield").blur(function(){
562 |                 textfield[0].JTopoNode.text = textfield.hide().val();
563 |             });
564 |             stage.add(scene);
565 | 
566 |             // 页面工具栏
567 |             function showJTopoToobar(stage){
568 |                 var toobarDiv = $('<div class="jtopo_toolbar">').html(''
569 |                     +'<input type="button" id="upLoadImage" value=" 载入设备 " />'
570 |                     +'<input type="radio" name="modeRadio" value="normal" checked id="r1"/>'
571 |                     +'<label for="r1"> 默认模式</label>'
572 |                     +'&nbsp;<input type="radio" name="modeRadio" value="edit" id="r4"/><label for="r4">图片编辑模式</label>'
573 |                     +'&nbsp;&nbsp;<input type="button" id="centerButton" value="居中显示"/>'
574 |                     +'<input type="button" id="zoomOutButton" value=" 放 大 " />'
575 |                     +'<input type="button" id="zoomInButton" value=" 缩 小 " />'
576 |                     +'&nbsp;&nbsp;<input type="checkbox" id="zoomCheckbox"/><label for="zoomCheckbox">鼠标缩放</label>'
577 |                     +'&nbsp;&nbsp;<input type = "button" id = "saveJsonStr" value = "保 存"/>'
578 |                     +'&nbsp;&nbsp;<input type="button" id="exportButton" value="导出PNG">');
579 |                     
580 |                 $('#content').prepend(toobarDiv);
581 | 
582 |                 // 工具栏按钮处理
583 |                 $("input[name='modeRadio']").click(function(){          
584 |                     stage.mode = $("input[name='modeRadio']:checked").val();
585 |                 });
586 |                 $('#centerButton').click(function(){
587 |                     stage.centerAndZoom(); //缩放并居中显示
588 |                 });
589 |                 $('#zoomOutButton').click(function(){//放大
590 |                     stage.zoomOut();
591 |                 });
592 |                 $('#zoomInButton').click(function(){//缩小
593 |                     stage.zoomIn();
594 |                 });
595 |                 $('#exportButton').click(function(){//保存PNG
596 |                     stage.saveImageInfo();
597 |                 });
598 |                 $('#zoomCheckbox').click(function(){
599 |                     if($('#zoomCheckbox').attr('checked')){
600 |                         stage.wheelZoom = 0.85; // 设置鼠标缩放比例
601 |                     }else{
602 |                         stage.wheelZoom = null; // 取消鼠标缩放比例
603 |                     }
604 |                 });
605 |                 $("#upLoadImage").click(function() {//载入节点
606 |                     $("#uploadmenu").toggle();
607 |                 });
608 |                 $("#uploadmenu ul").on("click", "li",function(e){
609 |                     var x = 10,y = 150;
610 |                     var str = $(this).text();
611 |                     var img = $(this).attr("id");
612 |                     var textPosition = "Bottom_Center";
613 |                     var level = 6;
614 |                     AddNode(x, y, str, img, textPosition,level);
615 |                 });
616 |                 $("#contextmenu .nav4").on("click", "li", function(){//设置level
617 |                     var lev = $(this).attr("id");
618 |                     currentNode.level = lev;
619 |                 });
620 |                 $("#contextmenu .nav5").on("click", "li", function(){//设置文字位置
621 |                     var tex = $(this).attr("id");
622 |                     currentNode.textPosition = tex;
623 |                 });
624 |                 $("#contextmenu .nav6").on("click", "li", function(){//设置告警等级,动画,颜色
625 |                     var ala = $(this).text();
626 |                     var curr = currentNode;
627 |                     var color = $(this).attr("id");
628 |                     curr.alarm = ala;
629 |                     /*var anima = setInterval(function(){
630 |                         if(curr.alarm == ala){
631 |                         curr.alarm = null;
632 |                         }else{
633 |                         curr.alarm = ala;
634 |                         }
635 |                     }, 600);*/
636 |                     if(color == 11){
637 |                         curr.alarmColor = '252, 233, 58';
638 |                     }else if(color == 22){
639 |                         curr.alarmColor = '255, 97, 0';
640 |                     }else if(color == 33){
641 |                         curr.alarmColor = '255, 0, 0';
642 |                     }
643 |                     console.log(curr.alarmColor);
644 |                 });
645 |                 $("#saveJsonStr").click(function(){//保存----大小，角度------非必须
646 |                     var a = scene;
647 |                     var d="[";
648 |                             //d+='"scene":]';
649 |                             for(var e=0;e< a.childs.length;e++){
650 |                                 var f= a.childs[e];
651 |                                 d+="{";
652 |                                 if(f.elementType == 'node')
653 |                                 {   
654 |                                     f.id = f.x * f.y;
655 |                                     d += "\"elementType\":"+ '"'+f.elementType+'"';
656 |                                     d += ",\"x\":"+ f.x;
657 |                                     d += ",\"y\":"+ f.y;
658 |                                     d += ",\"id\":"+ f.id;
659 |                                     d += ",\"Image\":"+ '"'+ f.Image+ '"';
660 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
661 |                                     d +=",\"textPosition\":"+ '"'+ f.textPosition+ '"';
662 |                                     d +=",\"larm\":"+ '"'+ f.alarm+ '"';
663 |                                     d +=",\"level\":"+ f.level;
664 |                                 }else if(f.elementType == 'link'){
665 |                                     d += "\"elementType\":"+ '"'+ f.elementType+ '"';
666 |                                     d += ",\"nodeAid\":"+ f.nodeA.id;
667 |                                     d += ",\"nodeZid\":"+ f.nodeZ.id;
668 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
669 |                                     d +=",\"fontColor\":"+ '"'+ f.fontColor+ '"';
670 |                                 }
671 |                                 d+="},";
672 |                             }
673 |                             d= d.substring(0, d.length-1);
674 |                             d+="]";
675 |                             d = d.replace("\r\n", "\\r\\n");
676 |                             console.log(d);
677 |                             alert("保存成功");
678 |                 });
679 |                 
680 |             }
681 | 
682 |             var runPrefixMethod = function(element, method) {
683 |                 var usablePrefixMethod;
684 |                 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
685 |                     if (usablePrefixMethod) return;
686 |                     if (prefix === "") {
687 |                         // 无前缀，方法首字母小写
688 |                         method = method.slice(0,1).toLowerCase() + method.slice(1);
689 |                     }
690 |                     var typePrefixMethod = typeof element[prefix + method];
691 |                     if (typePrefixMethod + "" !== "undefined") {
692 |                         if (typePrefixMethod === "function") {
693 |                             usablePrefixMethod = element[prefix + method]();
694 |                         } else {
695 |                             usablePrefixMethod = element[prefix + method];
696 |                         }
697 |                     }
698 |                 }
699 |             );
700 | 
701 |             return usablePrefixMethod;
702 |             };
703 |         });
704 |     </script>
705 | </body>
706 | </html>


--------------------------------------------------------------------------------
/topo-3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <meta charset="UTF-8">
  4 |     <title>the test for network topology</title>
  5 |     <style type="text/css">
  6 |         html, body{
  7 |             font:14px/1.8 Arial,Microsoft YaHei,黑体,宋体,sans-serif;
  8 |             height:100%;
  9 |         }
 10 |         /*菜单选项卡*/
 11 |         *{
 12 |             margin:0;
 13 |             padding:0;
 14 |         }
 15 |         #uploadmenu{
 16 |             list-style: none;
 17 |             position:absolute;
 18 |             left:0;
 19 |             top:29px;
 20 |         }
 21 |         #uploadmenu>li>a{
 22 |             display:block;
 23 |             text-decoration: none;
 24 |             width: 90px;
 25 |             height: 24px;
 26 |             margin-left: 10px;
 27 |             padding-top:4px;
 28 |             line-height:24px;
 29 |             text-align: center;
 30 |             color: #fff;
 31 |             border-top:1px solid #ABA8A8;
 32 |         }
 33 |         #uploadmenu>li>ul>li>a{
 34 |             display:inline-block;
 35 |             width:27px;
 36 |             height:28px;
 37 |             padding-left:9px;
 38 |             padding-right:9px;
 39 |             background: #D1D1D1;
 40 |             border-radius: 5px;
 41 |         }
 42 |         #uploadmenu>li>ul>li>a>img{
 43 |             vertical-align: middle;
 44 |         }
 45 |         span{
 46 |             display:inline-block;
 47 |             height:30px;
 48 |             line-height: 30px;
 49 |             text-align: center;
 50 |             width:70px;
 51 |             padding-left: 5px;
 52 |             padding-right:5px;
 53 |             border-bottom: 1px #ADABAB solid;
 54 |         }
 55 |         .lili li:hover{
 56 |             background: #E9E7E7;
 57 |             border-radius: 5px;
 58 |         }
 59 |         .lili li:active{
 60 |             background:#FFFFFF;
 61 |             border-radius: 0px;
 62 |         }
 63 |         .nob{
 64 |             border-bottom:none !important;
 65 |         }
 66 |         .lili li{
 67 |             height:30px;
 68 |             width:129px!important;
 69 |         }
 70 |         .lili{
 71 |             border-radius:5px;
 72 |             box-shadow: 0 0 5px #434343;
 73 |         }
 74 |         #uploadmenu .li1>a{
 75 |             border: none;
 76 |         }
 77 |         .li1, .li2, .li3{
 78 |             width: 110px;
 79 |             height: 36px;
 80 |             background: #666666;
 81 |             position:relative;
 82 |             cursor: pointer;
 83 |          }
 84 |         .li3{
 85 |             border-radius:0 0 5px 5px;
 86 |          }
 87 |         .nav1, .nav2, .nav3{
 88 |             list-style: none;
 89 |             position:absolute;
 90 |             left: 110px;
 91 |             top: 0px;
 92 |             display: none;
 93 |           }
 94 |         .li1:hover .nav1{
 95 |             display:block;
 96 |             background-color: #C5C5C5;
 97 |         }
 98 |         .li2:hover .nav2{
 99 |             display:block;
100 |             background-color: #C5C5C5;
101 |         }
102 |         .li3:hover .nav3{
103 |             display:block;
104 |             background-color:#C5C5C5;
105 |         }
106 |         .lili1 li{
107 |             height:30px;
108 |             width:100px!important;
109 |         }
110 |         .lili1 li:hover{
111 |             background: #E9E7E7;
112 |             border-radius: 5px;
113 |         }
114 |         .lili1 li:active{
115 |             background:#FFFFFF;
116 |             border-radius: 0px;
117 |         }
118 |         .lili1{
119 |             border-radius:5px;
120 |             box-shadow: 0 0 5px #434343;
121 |         }
122 |         .lili1 li span{
123 |             display:inline-block;
124 |             height:30px;
125 |             line-height: 30px;
126 |             text-align: center;
127 |             width:70px;
128 |             margin-left: 10px;
129 |             border-bottom: 1px #ADABAB solid;
130 |         }
131 |         .nav4, .nav5, .nav6{
132 |             list-style: none;
133 |             position:absolute;
134 |             left: 123px;
135 |             top: 0px;
136 |             display: none;
137 |             cursor:pointer;
138 |         }
139 |         #level:hover .nav4{
140 |             display:block;
141 |             background-color:#C5C5C5;
142 |         }
143 |         #text:hover .nav5{
144 |             display:block;
145 |             background-color:#C5C5C5;
146 |         }
147 |         #alarm:hover .nav6{
148 |             display:block;
149 |             background-color:#C5C5C5;
150 |         }
151 |         #contextmenu {
152 |             width:122px;
153 |             border: 1px solid #aaa;
154 |             border-radius:7px;
155 |             border-bottom: 0;
156 |             background: #eee;
157 |             position: absolute;
158 |             list-style: none;
159 |             margin: 0;
160 |             padding: 0;
161 |             display: none;
162 |             box-shadow: 0 0 5px #434343;
163 |         }
164 |         #contextmenu li{
165 |             width:122px;
166 |             position:relative;
167 |         }
168 | 
169 |         #contextmenu li a {
170 |             height:30px;
171 |             line-height: 30px;
172 |             width:100px;
173 |             margin-left: 11px;
174 |             text-align: center;
175 |             display: block;
176 |             border-bottom: 1px solid #aaa;
177 |             cursor: pointer;
178 | 
179 |         }
180 | 
181 |         #contextmenu>li:hover {
182 |             background: #fff;
183 |             border-radius:7px;
184 |         }
185 |         #linkmenu {
186 |             width:122px;
187 |             border: 1px solid #aaa;
188 |             border-radius:7px;
189 |             border-bottom: 0;
190 |             background: #eee;
191 |             position: absolute;
192 |             list-style: none;
193 |             margin: 0;
194 |             padding: 0;
195 |             display: none;
196 |             box-shadow: 0 0 5px #434343;
197 |         }
198 |         #linkmenu li {
199 |             width:122px;
200 |         }
201 |         #linkmenu li a {
202 |             width:100px;
203 |             height:30px;
204 |             line-height: 30px;
205 |             display: block;
206 |             border-bottom: 1px solid #aaa;
207 |             cursor: pointer;
208 |             margin-left: 11px;
209 |             text-align: center;
210 |         }
211 | 
212 |         #linkmenu li:hover {
213 |             background: #fff;
214 |             border-radius:7px;
215 |         }
216 |         /*button*/
217 |         .jtopo_toolbar{
218 |             height:30px;
219 |         }
220 |         input[type="button"]{
221 |             display: inline-block;
222 |             outline: none;
223 |             cursor: pointer;
224 |             text-align: center;
225 |             text-decoration: none;
226 |             font: 10px/100% Arial, Helvetica, sans-serif;
227 |             padding: .5em 1em .55em;
228 |             -webkit-border-radius: .3em; 
229 |             -moz-border-radius: .3em;
230 |             border-radius: .3em;
231 |             color: #2E2C2C;
232 |             border: solid 1px #D6D4D4;
233 |             background: #E4E0E0;
234 |         }
235 |         input[type="button"]:hover{
236 |             background: #CECDCD;
237 |             border: solid 1px #CECDCD;
238 |         }
239 |     </style>
240 | <body>
241 | 
242 | <textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;" onkeydown="if(event.keyCode==13)this.blur();"></textarea>
243 | 
244 | <div class="right">
245 |     <div id="content">
246 |         <canvas id="canvas">sorry,your browser do not support canvas label</canvas>
247 |     </div>
248 | </div>
249 | <ul id="uploadmenu" style="display:none;">
250 |     <li class = "li1"><a>网络设备</a>
251 |         <ul class = "nav1 lili">
252 |         <li id = "firework.png"><span>防火墙</span><a><img src="img/fk.png"></a></li>
253 |         <li id = "router.png"><span>路由器</span><a><img src="img/rr.png"></a></li>
254 |         <li id = "router1.png"><span>路由器</span><a><img src="img/rr1.png"></a></li>
255 |         <li id = "serve2.png"><span>服务器</span><a><img src="img/se2.png"></a></li>
256 |         <li id = "serve3.png"><span>服务器</span><a><img src="img/se3.png"></a></li>
257 |         <li id = "serve1.png"><span>服务器</span><a><img src="img/se1.png"></a></li>
258 |         <li id = "terminal.png"><span>终端</span><a><img src="img/tl.png"></a></li>
259 |         <li id = "switch.png"><span>交换机</span><a><img src="img/sh.png"></a></li>
260 |         <li id = "switchOptical.png"><span>光纤交换机</span><a><img src="img/sO.png"></a></li>
261 |         <li id = "monitor.png"><span>监测设备</span><a><img src="img/mr.png"></a></li>
262 |         <li id = "storageServer.png"><span>存储服务器</span><a><img src="img/ss.png"></a></li>
263 |         <li id = "cloud.png"><span class = "nob">internet</span><a><img src="img/cd.png"></a></li>
264 |         </ul>
265 |     </li>
266 |     <li class = "li2"><a>区域拓扑</a>
267 |         <ul class = "nav2 lili">
268 |         <li><span>7</span></li>
269 |         <li><span>7</span></li>
270 |         <li><span>7</span></li>
271 |         <li><span>7</span></li>
272 |         <li><span>7</span></li>
273 |         <li><span>7</span></li>
274 |         <li><span   class = "nob">7</span></li>
275 |         </ul>
276 |     </li>
277 |     <li class = "li3"><a>行政拓扑</a>
278 |         <ul class = "nav3 lili">
279 |         <li><span>7</span></li>
280 |         <li><span>7</span></li>
281 |         <li><span>7</span></li>
282 |         <li><span>7</span></li>
283 |         <li><span>7</span></li>
284 |         <li><span>7</span></li>
285 |         <li><span class = "nob">7</span></li>
286 |         </ul>
287 |     </li>
288 | </ul>
289 | 
290 | <ul id="contextmenu" style="display:none;">
291 |     <li><a>添加连线</a></li>
292 |     <li><a>添加节点</a></li>
293 |     <li id = "level"><a>设置等级</a>
294 |     <ul class = "lili1 nav4">
295 |         <li id = "1"><span>壹</span></li>
296 |         <li id = "2"><span>贰</span></li>
297 |         <li id = "3"><span>弎</span></li>
298 |         <li id = "4"><span>肆</span></li>
299 |         <li id = "5"><span>伍</span></li>
300 |         <li id = "6"><span class = "nob">陆</span></li>
301 |     </ul>
302 |     </li>
303 |     <li id = "text"><a>设置文字位置</a>
304 |     <ul class = "lili1 nav5">
305 |         <li id = "Top_Center"><span>上</span></li>
306 |         <li id = "Bottom_Center"><span>下</span></li>
307 |         <li id = "Middle_Left"><span>左</span></li>
308 |         <li id = "Middle_Right"><span>右</span></li>
309 |         <li id = "Middle_Center"><span class = "nob">中</span></li>
310 |     </ul>
311 |     </li>
312 |     <li id = "alarm"><a>警告</a>
313 |     <ul class = "lili1 nav6">
314 |         <li id = "11"><span>一级告警</span></li>
315 |         <li id = "22"><span>二级告警</span></li>
316 |         <li id = "33"><span>三级告警</span></li>
317 |         <li id = "44"><span class = "nob">取消告警</span></li>
318 |     </ul>
319 |     </li>
320 |     <li><a>顺时针旋转</a></li>
321 |     <li><a>逆时针旋转</a></li>
322 |     <li><a>放大</a></li>
323 |     <li><a>缩小</a></li>
324 |     <li><a>删除该节点</a></li>
325 |     <li><a>取消</a></li>
326 | </ul>
327 | <ul id="linkmenu" style="display:none;">
328 |     <li><a>修改颜色(随机)</a></li>
329 |     <li><a>改为红色</a></li>
330 |     <li><a>改为普通颜色</a></li>
331 |     <li><a>删除连线</a></li>
332 |     <li><a>取消</a></li>
333 | </ul>
334 | <script src="js/jquery.min.js" type="text/javascript"></script>
335 | <script src="js/jtopo-0.4.8-min.js" type="text/javascript"></script>
336 |  <script type="text/javascript">
337 |         $(document).ready(function() {
338 | 
339 |             var canvas = document.getElementById('canvas');
340 |             canvas.height = window.innerHeight - 30;
341 |             canvas.width = window.innerWidth;
342 | 
343 |             var scene = new JTopo.Scene();
344 |             scene.background = './img/bg.jpeg';
345 |             var stage = new JTopo.Stage(canvas);
346 |             showJTopoToobar(stage);
347 |             var currentNode = null;
348 |             var endNode = null;
349 |             var tmpx = null;
350 |             var tmpy = null;
351 |             var validation = null;
352 | 
353 |             //服务器载入绘制拓扑图
354 |             $.ajax({
355 |                 typt:"GET",
356 |                 url:"js/jsonstr.json",
357 |                 dataType:"json",
358 |                 success:function(data){
359 |                         data.forEach(function(a){
360 |                    //此处可以加入地域节点
361 |                     if(a.elementType == "node"){
362 |                         if(a.level <= 3) {
363 |                             AddNode(a.x, a.y, a.text, a.Image, a.textPosition, a.level, a.larm);
364 |                         }
365 |                     }
366 |                     });
367 | 
368 |                          data.forEach(function(a){
369 |                     if(a.elementType == "link"){
370 |                         var nodeA = scene.findElements(function(e){return e.id == a.nodeAid;});
371 |                         var nodeZ = scene.findElements(function(e){return e.id == a.nodeZid;});
372 |                         if(nodeA[0] && nodeZ[0]) {
373 |                             Addlink(nodeA[0], nodeZ[0], a.text, a.fontColor);
374 |                         }
375 |                     }
376 |                     });
377 |                 }
378 |                 });
379 | 
380 |             //画出拓扑图(函数)
381 |             function AddNode(x, y, str, img, textPosition,level,larm)
382 |             {
383 |                 var node = new JTopo.Node(str);
384 |                 node.serializedProperties.push('id');
385 |                 node.serializedProperties.push('level');
386 |                 node.setLocation(x ,y);
387 |                 node.Image = '';
388 |                 node.id = x*y;
389 |                 node.level = level;
390 |                 if(null != img) {
391 |                     node.setImage('./img/' + img, true);
392 |                     node.Image = img;
393 |                 }
394 |                 if(larm == "2W"){
395 |                     node.alarm = '2W';
396 |                 }
397 |                 node.textPosition = textPosition;
398 |                 node.fontColor = '0,0,0';
399 |                 node.addEventListener('mouseup',function(event){
400 |                     handler(event,node);//将当前事件的node赋给currentNode并显示右键菜单
401 |                 });
402 |                 node.addEventListener('click', function(event){
403 |                     endNode = node;
404 |                     if(null != currentNode && currentNode != endNode && validation === true){
405 |                         strr = "";
406 |                         Addlink(currentNode, endNode, strr);
407 |                         currentNode = null;
408 |                         validation = false;//验证是否在当前节点上右键点击了添加节点
409 |                     }
410 |                 });
411 | 
412 |                 scene.add(node);
413 |                 return node;
414 |             }
415 |             function Addlink(node1, node2, str, color)//-----增加折线------
416 |             {
417 |                 var link = new JTopo.Link(node1, node2, str);
418 |                 //node2.father = node1;
419 |                 link.lineWidth = 3;//线宽
420 |                 link.bundleOffset = 60;
421 |                 link.bundleGap = 20;
422 |                 link.textOffsetY = 3;
423 |                 link.fontColor = color || '0, 200, 255';
424 |                 link.strokeColor = color || '0, 200, 255';
425 |                 link.addEventListener('mouseup',function(event){
426 |                     currentLink = this;
427 |                     handlelink(event);
428 |                 });
429 |                 scene.add(link);
430 |             }
431 | 
432 |             function AddTextNode(x, y, str, scene)//加入单独的文字节点
433 |             {
434 |                 var node = new JTopo.Node(str);
435 |                 node.setLocation(x, y);
436 |                 node.serializedProperties.push('id');
437 |                 node.id = x+y;
438 |                 node.fillColor = '255,255,255';
439 |                 node.textPosition = 'Middle_Center';
440 |                 node.fontColor = '0,0,0';
441 |                 node.setSize(120,30);
442 |                 node.dragable = false;
443 |                 node.showSelected = false;
444 |                 node.selected = false;
445 |                 scene.add(node);
446 |             }
447 | 
448 |             function handler(event, obj) {//绑定右键菜单
449 |                 $("#linkmenu").hide();
450 |                 if (event.button == 2) {
451 |                     currentNode = obj;
452 |                     tmpx = event.pageX + 30;
453 |                     tmpy = event.pageY + 30;
454 |                     $("#contextmenu").css({
455 |                         top: event.pageY,
456 |                         left: event.pageX
457 |                     }).show();
458 |                     $("#contextmenu a").click(function(){
459 |                         var text = $(this).text();
460 |                           if (text == '添加连线'){
461 |                             validation = true;//验证是否在当前节点上右键点击了添加节点
462 |                  }
463 |                  });
464 |                 }
465 |             }
466 | 
467 |             function handlelink(event){
468 |                 $("#contextmenu").hide();
469 |                 if(event.button == 2){
470 |                     $("#linkmenu").css({
471 |                         top:event.pageY,
472 |                         left:event.pageX
473 |                     }).show();
474 |                 }
475 |             }
476 | 
477 |              stage.click(function (event) {
478 |                 if (event.button == 0) {// 右键
479 |                     // 关闭弹出菜单（div）
480 |                     $("#contextmenu").hide();
481 |                     $("#linkmenu").hide();
482 |                     $("#uploadmenu").hide();
483 |                 }
484 |             });
485 |     
486 |             //右键菜单处理
487 |             $("#contextmenu a").click(function(){
488 |                 var text = $(this).text();
489 |                 if("取消" == text){
490 |                     $("#contextmenu").hide();
491 |                 }if(text == '删除该节点'){
492 |                     scene.remove(currentNode);
493 |                     currentNode = null;
494 |                     $("#contextmenu").hide();
495 |                 }
496 |                     currentNode.save();
497 |                 
498 |                  if (text == '添加连线'){
499 | 
500 |                  } else if(text == '添加节点'){
501 |                     AddNode(tmpx, tmpy, currentNode.text, currentNode.Image,currentNode.level, 'Bottom_Center');
502 |                 }else if(text == '顺时针旋转'){
503 |                     currentNode.rotate += 0.5;
504 |                 }else if(text == '逆时针旋转'){
505 |                     currentNode.rotate -= 0.5;
506 |                 }else if(text == '放大'){
507 |                     currentNode.scaleX += 0.2;
508 |                     currentNode.scaleY += 0.2;
509 |                 }else if(text == '缩小'){
510 |                     currentNode.scaleX -= 0.2;
511 |                     currentNode.scaleY -= 0.2;
512 |                 }else if(text == '警告')
513 |                 {
514 |                     if(currentNode.alarm == null) {
515 |                         currentNode.alarm = '2W';
516 |                     }else
517 |                     {   
518 | 
519 |                         currentNode.alarm = null;
520 |                     }
521 | 
522 |                 }
523 |                 $("#contextmenu").hide();
524 |             });
525 |             $("#linkmenu a").click(function(){
526 |                 var text = $(this).text();
527 |                 if("取消" == text){
528 |                     $("#linkmenu").hide();
529 |                 }
530 |                 if(text == '修改颜色(随机)'){
531 |                     //currentLink.fillColor = JTopo.util.randomColor();
532 |                     currentLink.strokeColor = JTopo.util.randomColor();
533 |                 }else if(text == '改为红色')
534 |                 {
535 |                     currentLink.strokeColor = '255,0,0';//线路
536 |                     currentLink.text = "告警";
537 |                     currentLink.fontColor = '255,0,0';
538 |                 }else if(text == '改为普通颜色')
539 |                 {
540 |                     currentLink.strokeColor =  '0,200,255';
541 |                 }else if(text == '删除连线')
542 |                 {
543 |                     scene.remove(currentLink);
544 |                 }
545 |                 $("#linkmenu").hide();
546 |             });
547 | 
548 |             //修改文字
549 |             var textfield = $("#jtopo_textfield");
550 |             scene.dbclick(function(event){
551 |                 if(event.target == null) return;
552 |                 var e = event.target;
553 |                 textfield.css({
554 |                     top: event.pageY,
555 |                     left:event.pageX - e.width/2
556 |                 }).val(e.text).show().focus().select();
557 |                 console.log(textfield.val());
558 |                 e.text = "";
559 |                 textfield[0].JTopoNode = e;
560 |             });
561 |             $("#jtopo_textfield").blur(function(){
562 |                 textfield[0].JTopoNode.text = textfield.hide().val();
563 |             });
564 |             stage.add(scene);
565 | 
566 |             // 页面工具栏
567 |             function showJTopoToobar(stage){
568 |                 var toobarDiv = $('<div class="jtopo_toolbar">').html(''
569 |                     +'<input type="button" id="upLoadImage" value=" 载入设备 " />'
570 |                     +'<input type="radio" name="modeRadio" value="normal" checked id="r1"/>'
571 |                     +'<label for="r1"> 默认模式</label>'
572 |                     +'&nbsp;<input type="radio" name="modeRadio" value="edit" id="r4"/><label for="r4">图片编辑模式</label>'
573 |                     +'&nbsp;&nbsp;<input type="button" id="centerButton" value="居中显示"/>'
574 |                     +'<input type="button" id="zoomOutButton" value=" 放 大 " />'
575 |                     +'<input type="button" id="zoomInButton" value=" 缩 小 " />'
576 |                     +'&nbsp;&nbsp;<input type="checkbox" id="zoomCheckbox"/><label for="zoomCheckbox">鼠标缩放</label>'
577 |                     +'&nbsp;&nbsp;<input type = "button" id = "saveJsonStr" value = "保 存"/>'
578 |                     +'&nbsp;&nbsp;<input type="button" id="exportButton" value="导出PNG">');
579 |                     
580 |                 $('#content').prepend(toobarDiv);
581 | 
582 |                 // 工具栏按钮处理
583 |                 $("input[name='modeRadio']").click(function(){          
584 |                     stage.mode = $("input[name='modeRadio']:checked").val();
585 |                 });
586 |                 $('#centerButton').click(function(){
587 |                     stage.centerAndZoom(); //缩放并居中显示
588 |                 });
589 |                 $('#zoomOutButton').click(function(){//放大
590 |                     stage.zoomOut();
591 |                 });
592 |                 $('#zoomInButton').click(function(){//缩小
593 |                     stage.zoomIn();
594 |                 });
595 |                 $('#exportButton').click(function(){//保存PNG
596 |                     stage.saveImageInfo();
597 |                 });
598 |                 $('#zoomCheckbox').click(function(){
599 |                     if($('#zoomCheckbox').attr('checked')){
600 |                         stage.wheelZoom = 0.85; // 设置鼠标缩放比例
601 |                     }else{
602 |                         stage.wheelZoom = null; // 取消鼠标缩放比例
603 |                     }
604 |                 });
605 |                 $("#upLoadImage").click(function() {//载入节点
606 |                     $("#uploadmenu").toggle();
607 |                 });
608 |                 $("#uploadmenu ul").on("click", "li",function(e){
609 |                     var x = 10,y = 150;
610 |                     var str = $(this).text();
611 |                     var img = $(this).attr("id");
612 |                     var textPosition = "Bottom_Center";
613 |                     var level = 6;
614 |                     AddNode(x, y, str, img, textPosition,level);
615 |                 });
616 |                 $("#contextmenu .nav4").on("click", "li", function(){//设置level
617 |                     var lev = $(this).attr("id");
618 |                     currentNode.level = lev;
619 |                 });
620 |                 $("#contextmenu .nav5").on("click", "li", function(){//设置文字位置
621 |                     var tex = $(this).attr("id");
622 |                     currentNode.textPosition = tex;
623 |                 });
624 |                 $("#contextmenu .nav6").on("click", "li", function(){//设置告警等级,动画,颜色
625 |                     var ala = $(this).text();
626 |                     var curr = currentNode;
627 |                     var color = $(this).attr("id");
628 |                     curr.alarm = ala;
629 |                     /*var anima = setInterval(function(){
630 |                         if(curr.alarm == ala){
631 |                         curr.alarm = null;
632 |                         }else{
633 |                         curr.alarm = ala;
634 |                         }
635 |                     }, 600);*/
636 |                     if(color == 11){
637 |                         curr.alarmColor = '252, 233, 58';
638 |                     }else if(color == 22){
639 |                         curr.alarmColor = '255, 97, 0';
640 |                     }else if(color == 33){
641 |                         curr.alarmColor = '255, 0, 0';
642 |                     }
643 |                     console.log(curr.alarmColor);
644 |                 });
645 |                 $("#saveJsonStr").click(function(){//保存----大小，角度------非必须
646 |                     var a = scene;
647 |                     var d="[";
648 |                             //d+='"scene":]';
649 |                             for(var e=0;e< a.childs.length;e++){
650 |                                 var f= a.childs[e];
651 |                                 d+="{";
652 |                                 if(f.elementType == 'node')
653 |                                 {   
654 |                                     f.id = f.x * f.y;
655 |                                     d += "\"elementType\":"+ '"'+f.elementType+'"';
656 |                                     d += ",\"x\":"+ f.x;
657 |                                     d += ",\"y\":"+ f.y;
658 |                                     d += ",\"id\":"+ f.id;
659 |                                     d += ",\"Image\":"+ '"'+ f.Image+ '"';
660 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
661 |                                     d +=",\"textPosition\":"+ '"'+ f.textPosition+ '"';
662 |                                     d +=",\"larm\":"+ '"'+ f.alarm+ '"';
663 |                                     d +=",\"level\":"+ f.level;
664 |                                 }else if(f.elementType == 'link'){
665 |                                     d += "\"elementType\":"+ '"'+ f.elementType+ '"';
666 |                                     d += ",\"nodeAid\":"+ f.nodeA.id;
667 |                                     d += ",\"nodeZid\":"+ f.nodeZ.id;
668 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
669 |                                     d +=",\"fontColor\":"+ '"'+ f.fontColor+ '"';
670 |                                 }
671 |                                 d+="},";
672 |                             }
673 |                             d= d.substring(0, d.length-1);
674 |                             d+="]";
675 |                             d = d.replace("\r\n", "\\r\\n");
676 |                             console.log(d);
677 |                             alert("保存成功");
678 |                 });
679 |                 
680 |             }
681 | 
682 |             var runPrefixMethod = function(element, method) {
683 |                 var usablePrefixMethod;
684 |                 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
685 |                     if (usablePrefixMethod) return;
686 |                     if (prefix === "") {
687 |                         // 无前缀，方法首字母小写
688 |                         method = method.slice(0,1).toLowerCase() + method.slice(1);
689 |                     }
690 |                     var typePrefixMethod = typeof element[prefix + method];
691 |                     if (typePrefixMethod + "" !== "undefined") {
692 |                         if (typePrefixMethod === "function") {
693 |                             usablePrefixMethod = element[prefix + method]();
694 |                         } else {
695 |                             usablePrefixMethod = element[prefix + method];
696 |                         }
697 |                     }
698 |                 }
699 |             );
700 | 
701 |             return usablePrefixMethod;
702 |             };
703 |         });
704 |     </script>
705 | </body>
706 | </html>


--------------------------------------------------------------------------------
/topo-4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <meta charset="UTF-8">
  4 |     <title>the test for network topology</title>
  5 |     <style type="text/css">
  6 |         html, body{
  7 |             font:14px/1.8 Arial,Microsoft YaHei,黑体,宋体,sans-serif;
  8 |             height:100%;
  9 |         }
 10 |         /*菜单选项卡*/
 11 |         *{
 12 |             margin:0;
 13 |             padding:0;
 14 |         }
 15 |         #uploadmenu{
 16 |             list-style: none;
 17 |             position:absolute;
 18 |             left:0;
 19 |             top:29px;
 20 |         }
 21 |         #uploadmenu>li>a{
 22 |             display:block;
 23 |             text-decoration: none;
 24 |             width: 90px;
 25 |             height: 24px;
 26 |             margin-left: 10px;
 27 |             padding-top:4px;
 28 |             line-height:24px;
 29 |             text-align: center;
 30 |             color: #fff;
 31 |             border-top:1px solid #ABA8A8;
 32 |         }
 33 |         #uploadmenu>li>ul>li>a{
 34 |             display:inline-block;
 35 |             width:27px;
 36 |             height:28px;
 37 |             padding-left:9px;
 38 |             padding-right:9px;
 39 |             background: #D1D1D1;
 40 |             border-radius: 5px;
 41 |         }
 42 |         #uploadmenu>li>ul>li>a>img{
 43 |             vertical-align: middle;
 44 |         }
 45 |         span{
 46 |             display:inline-block;
 47 |             height:30px;
 48 |             line-height: 30px;
 49 |             text-align: center;
 50 |             width:70px;
 51 |             padding-left: 5px;
 52 |             padding-right:5px;
 53 |             border-bottom: 1px #ADABAB solid;
 54 |         }
 55 |         .lili li:hover{
 56 |             background: #E9E7E7;
 57 |             border-radius: 5px;
 58 |         }
 59 |         .lili li:active{
 60 |             background:#FFFFFF;
 61 |             border-radius: 0px;
 62 |         }
 63 |         .nob{
 64 |             border-bottom:none !important;
 65 |         }
 66 |         .lili li{
 67 |             height:30px;
 68 |             width:129px!important;
 69 |         }
 70 |         .lili{
 71 |             border-radius:5px;
 72 |             box-shadow: 0 0 5px #434343;
 73 |         }
 74 |         #uploadmenu .li1>a{
 75 |             border: none;
 76 |         }
 77 |         .li1, .li2, .li3{
 78 |             width: 110px;
 79 |             height: 36px;
 80 |             background: #666666;
 81 |             position:relative;
 82 |             cursor: pointer;
 83 |          }
 84 |         .li3{
 85 |             border-radius:0 0 5px 5px;
 86 |          }
 87 |         .nav1, .nav2, .nav3{
 88 |             list-style: none;
 89 |             position:absolute;
 90 |             left: 110px;
 91 |             top: 0px;
 92 |             display: none;
 93 |           }
 94 |         .li1:hover .nav1{
 95 |             display:block;
 96 |             background-color: #C5C5C5;
 97 |         }
 98 |         .li2:hover .nav2{
 99 |             display:block;
100 |             background-color: #C5C5C5;
101 |         }
102 |         .li3:hover .nav3{
103 |             display:block;
104 |             background-color:#C5C5C5;
105 |         }
106 |         .lili1 li{
107 |             height:30px;
108 |             width:100px!important;
109 |         }
110 |         .lili1 li:hover{
111 |             background: #E9E7E7;
112 |             border-radius: 5px;
113 |         }
114 |         .lili1 li:active{
115 |             background:#FFFFFF;
116 |             border-radius: 0px;
117 |         }
118 |         .lili1{
119 |             border-radius:5px;
120 |             box-shadow: 0 0 5px #434343;
121 |         }
122 |         .lili1 li span{
123 |             display:inline-block;
124 |             height:30px;
125 |             line-height: 30px;
126 |             text-align: center;
127 |             width:70px;
128 |             margin-left: 10px;
129 |             border-bottom: 1px #ADABAB solid;
130 |         }
131 |         .nav4, .nav5, .nav6{
132 |             list-style: none;
133 |             position:absolute;
134 |             left: 123px;
135 |             top: 0px;
136 |             display: none;
137 |             cursor:pointer;
138 |         }
139 |         #level:hover .nav4{
140 |             display:block;
141 |             background-color:#C5C5C5;
142 |         }
143 |         #text:hover .nav5{
144 |             display:block;
145 |             background-color:#C5C5C5;
146 |         }
147 |         #alarm:hover .nav6{
148 |             display:block;
149 |             background-color:#C5C5C5;
150 |         }
151 |         #contextmenu {
152 |             width:122px;
153 |             border: 1px solid #aaa;
154 |             border-radius:7px;
155 |             border-bottom: 0;
156 |             background: #eee;
157 |             position: absolute;
158 |             list-style: none;
159 |             margin: 0;
160 |             padding: 0;
161 |             display: none;
162 |             box-shadow: 0 0 5px #434343;
163 |         }
164 |         #contextmenu li{
165 |             width:122px;
166 |             position:relative;
167 |         }
168 | 
169 |         #contextmenu li a {
170 |             height:30px;
171 |             line-height: 30px;
172 |             width:100px;
173 |             margin-left: 11px;
174 |             text-align: center;
175 |             display: block;
176 |             border-bottom: 1px solid #aaa;
177 |             cursor: pointer;
178 | 
179 |         }
180 | 
181 |         #contextmenu>li:hover {
182 |             background: #fff;
183 |             border-radius:7px;
184 |         }
185 |         #linkmenu {
186 |             width:122px;
187 |             border: 1px solid #aaa;
188 |             border-radius:7px;
189 |             border-bottom: 0;
190 |             background: #eee;
191 |             position: absolute;
192 |             list-style: none;
193 |             margin: 0;
194 |             padding: 0;
195 |             display: none;
196 |             box-shadow: 0 0 5px #434343;
197 |         }
198 |         #linkmenu li {
199 |             width:122px;
200 |         }
201 |         #linkmenu li a {
202 |             width:100px;
203 |             height:30px;
204 |             line-height: 30px;
205 |             display: block;
206 |             border-bottom: 1px solid #aaa;
207 |             cursor: pointer;
208 |             margin-left: 11px;
209 |             text-align: center;
210 |         }
211 | 
212 |         #linkmenu li:hover {
213 |             background: #fff;
214 |             border-radius:7px;
215 |         }
216 |         /*button*/
217 |         .jtopo_toolbar{
218 |             height:30px;
219 |         }
220 |         input[type="button"]{
221 |             display: inline-block;
222 |             outline: none;
223 |             cursor: pointer;
224 |             text-align: center;
225 |             text-decoration: none;
226 |             font: 10px/100% Arial, Helvetica, sans-serif;
227 |             padding: .5em 1em .55em;
228 |             -webkit-border-radius: .3em; 
229 |             -moz-border-radius: .3em;
230 |             border-radius: .3em;
231 |             color: #2E2C2C;
232 |             border: solid 1px #D6D4D4;
233 |             background: #E4E0E0;
234 |         }
235 |         input[type="button"]:hover{
236 |             background: #CECDCD;
237 |             border: solid 1px #CECDCD;
238 |         }
239 |     </style>
240 | <body>
241 | 
242 | <textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;" onkeydown="if(event.keyCode==13)this.blur();"></textarea>
243 | 
244 | <div class="right">
245 |     <div id="content">
246 |         <canvas id="canvas">sorry,your browser do not support canvas label</canvas>
247 |     </div>
248 | </div>
249 | <ul id="uploadmenu" style="display:none;">
250 |     <li class = "li1"><a>网络设备</a>
251 |         <ul class = "nav1 lili">
252 |         <li id = "firework.png"><span>防火墙</span><a><img src="img/fk.png"></a></li>
253 |         <li id = "router.png"><span>路由器</span><a><img src="img/rr.png"></a></li>
254 |         <li id = "router1.png"><span>路由器</span><a><img src="img/rr1.png"></a></li>
255 |         <li id = "serve2.png"><span>服务器</span><a><img src="img/se2.png"></a></li>
256 |         <li id = "serve3.png"><span>服务器</span><a><img src="img/se3.png"></a></li>
257 |         <li id = "serve1.png"><span>服务器</span><a><img src="img/se1.png"></a></li>
258 |         <li id = "terminal.png"><span>终端</span><a><img src="img/tl.png"></a></li>
259 |         <li id = "switch.png"><span>交换机</span><a><img src="img/sh.png"></a></li>
260 |         <li id = "switchOptical.png"><span>光纤交换机</span><a><img src="img/sO.png"></a></li>
261 |         <li id = "monitor.png"><span>监测设备</span><a><img src="img/mr.png"></a></li>
262 |         <li id = "storageServer.png"><span>存储服务器</span><a><img src="img/ss.png"></a></li>
263 |         <li id = "cloud.png"><span class = "nob">internet</span><a><img src="img/cd.png"></a></li>
264 |         </ul>
265 |     </li>
266 |     <li class = "li2"><a>区域拓扑</a>
267 |         <ul class = "nav2 lili">
268 |         <li><span>7</span></li>
269 |         <li><span>7</span></li>
270 |         <li><span>7</span></li>
271 |         <li><span>7</span></li>
272 |         <li><span>7</span></li>
273 |         <li><span>7</span></li>
274 |         <li><span   class = "nob">7</span></li>
275 |         </ul>
276 |     </li>
277 |     <li class = "li3"><a>行政拓扑</a>
278 |         <ul class = "nav3 lili">
279 |         <li><span>7</span></li>
280 |         <li><span>7</span></li>
281 |         <li><span>7</span></li>
282 |         <li><span>7</span></li>
283 |         <li><span>7</span></li>
284 |         <li><span>7</span></li>
285 |         <li><span class = "nob">7</span></li>
286 |         </ul>
287 |     </li>
288 | </ul>
289 | 
290 | <ul id="contextmenu" style="display:none;">
291 |     <li><a>添加连线</a></li>
292 |     <li><a>添加节点</a></li>
293 |     <li id = "level"><a>设置等级</a>
294 |     <ul class = "lili1 nav4">
295 |         <li id = "1"><span>壹</span></li>
296 |         <li id = "2"><span>贰</span></li>
297 |         <li id = "3"><span>弎</span></li>
298 |         <li id = "4"><span>肆</span></li>
299 |         <li id = "5"><span>伍</span></li>
300 |         <li id = "6"><span class = "nob">陆</span></li>
301 |     </ul>
302 |     </li>
303 |     <li id = "text"><a>设置文字位置</a>
304 |     <ul class = "lili1 nav5">
305 |         <li id = "Top_Center"><span>上</span></li>
306 |         <li id = "Bottom_Center"><span>下</span></li>
307 |         <li id = "Middle_Left"><span>左</span></li>
308 |         <li id = "Middle_Right"><span>右</span></li>
309 |         <li id = "Middle_Center"><span class = "nob">中</span></li>
310 |     </ul>
311 |     </li>
312 |     <li id = "alarm"><a>警告</a>
313 |     <ul class = "lili1 nav6">
314 |         <li id = "11"><span>一级告警</span></li>
315 |         <li id = "22"><span>二级告警</span></li>
316 |         <li id = "33"><span>三级告警</span></li>
317 |         <li id = "44"><span class = "nob">取消告警</span></li>
318 |     </ul>
319 |     </li>
320 |     <li><a>顺时针旋转</a></li>
321 |     <li><a>逆时针旋转</a></li>
322 |     <li><a>放大</a></li>
323 |     <li><a>缩小</a></li>
324 |     <li><a>删除该节点</a></li>
325 |     <li><a>取消</a></li>
326 | </ul>
327 | <ul id="linkmenu" style="display:none;">
328 |     <li><a>修改颜色(随机)</a></li>
329 |     <li><a>改为红色</a></li>
330 |     <li><a>改为普通颜色</a></li>
331 |     <li><a>删除连线</a></li>
332 |     <li><a>取消</a></li>
333 | </ul>
334 | <script src="js/jquery.min.js" type="text/javascript"></script>
335 | <script src="js/jtopo-0.4.8-min.js" type="text/javascript"></script>
336 |  <script type="text/javascript">
337 |         $(document).ready(function() {
338 | 
339 |             var canvas = document.getElementById('canvas');
340 |             canvas.height = window.innerHeight - 30;
341 |             canvas.width = window.innerWidth;
342 | 
343 |             var scene = new JTopo.Scene();
344 |             scene.background = './img/bg.jpeg';
345 |             var stage = new JTopo.Stage(canvas);
346 |             showJTopoToobar(stage);
347 |             var currentNode = null;
348 |             var endNode = null;
349 |             var tmpx = null;
350 |             var tmpy = null;
351 |             var validation = null;
352 | 
353 |             //服务器载入绘制拓扑图
354 |             $.ajax({
355 |                 typt:"GET",
356 |                 url:"js/jsonstr.json",
357 |                 dataType:"json",
358 |                 success:function(data){
359 |                         data.forEach(function(a){
360 |                    //此处可以加入地域节点
361 |                     if(a.elementType == "node"){
362 |                         if(a.level <= 4) {
363 |                             AddNode(a.x, a.y, a.text, a.Image, a.textPosition, a.level, a.larm);
364 |                         }
365 |                     }
366 |                     });
367 | 
368 |                          data.forEach(function(a){
369 |                     if(a.elementType == "link"){
370 |                         var nodeA = scene.findElements(function(e){return e.id == a.nodeAid;});
371 |                         var nodeZ = scene.findElements(function(e){return e.id == a.nodeZid;});
372 |                         if(nodeA[0] && nodeZ[0]) {
373 |                             Addlink(nodeA[0], nodeZ[0], a.text, a.fontColor);
374 |                         }
375 |                     }
376 |                     });
377 |                 }
378 |                 });
379 | 
380 |             //画出拓扑图(函数)
381 |             function AddNode(x, y, str, img, textPosition,level,larm)
382 |             {
383 |                 var node = new JTopo.Node(str);
384 |                 node.serializedProperties.push('id');
385 |                 node.serializedProperties.push('level');
386 |                 node.setLocation(x ,y);
387 |                 node.Image = '';
388 |                 node.id = x*y;
389 |                 node.level = level;
390 |                 if(null != img) {
391 |                     node.setImage('./img/' + img, true);
392 |                     node.Image = img;
393 |                 }
394 |                 if(larm == "2W"){
395 |                     node.alarm = '2W';
396 |                 }
397 |                 node.textPosition = textPosition;
398 |                 node.fontColor = '0,0,0';
399 |                 node.addEventListener('mouseup',function(event){
400 |                     handler(event,node);//将当前事件的node赋给currentNode并显示右键菜单
401 |                 });
402 |                 node.addEventListener('click', function(event){
403 |                     endNode = node;
404 |                     if(null != currentNode && currentNode != endNode && validation === true){
405 |                         strr = "";
406 |                         Addlink(currentNode, endNode, strr);
407 |                         currentNode = null;
408 |                         validation = false;//验证是否在当前节点上右键点击了添加节点
409 |                     }
410 |                 });
411 | 
412 |                 scene.add(node);
413 |                 return node;
414 |             }
415 |             function Addlink(node1, node2, str, color)//-----增加折线------
416 |             {
417 |                 var link = new JTopo.Link(node1, node2, str);
418 |                 //node2.father = node1;
419 |                 link.lineWidth = 3;//线宽
420 |                 link.bundleOffset = 60;
421 |                 link.bundleGap = 20;
422 |                 link.textOffsetY = 3;
423 |                 link.fontColor = color || '0, 200, 255';
424 |                 link.strokeColor = color || '0, 200, 255';
425 |                 link.addEventListener('mouseup',function(event){
426 |                     currentLink = this;
427 |                     handlelink(event);
428 |                 });
429 |                 scene.add(link);
430 |             }
431 | 
432 |             function AddTextNode(x, y, str, scene)//加入单独的文字节点
433 |             {
434 |                 var node = new JTopo.Node(str);
435 |                 node.setLocation(x, y);
436 |                 node.serializedProperties.push('id');
437 |                 node.id = x+y;
438 |                 node.fillColor = '255,255,255';
439 |                 node.textPosition = 'Middle_Center';
440 |                 node.fontColor = '0,0,0';
441 |                 node.setSize(120,30);
442 |                 node.dragable = false;
443 |                 node.showSelected = false;
444 |                 node.selected = false;
445 |                 scene.add(node);
446 |             }
447 | 
448 |             function handler(event, obj) {//绑定右键菜单
449 |                 $("#linkmenu").hide();
450 |                 if (event.button == 2) {
451 |                     currentNode = obj;
452 |                     tmpx = event.pageX + 30;
453 |                     tmpy = event.pageY + 30;
454 |                     $("#contextmenu").css({
455 |                         top: event.pageY,
456 |                         left: event.pageX
457 |                     }).show();
458 |                     $("#contextmenu a").click(function(){
459 |                         var text = $(this).text();
460 |                           if (text == '添加连线'){
461 |                             validation = true;//验证是否在当前节点上右键点击了添加节点
462 |                  }
463 |                  });
464 |                 }
465 |             }
466 | 
467 |             function handlelink(event){
468 |                 $("#contextmenu").hide();
469 |                 if(event.button == 2){
470 |                     $("#linkmenu").css({
471 |                         top:event.pageY,
472 |                         left:event.pageX
473 |                     }).show();
474 |                 }
475 |             }
476 | 
477 |              stage.click(function (event) {
478 |                 if (event.button == 0) {// 右键
479 |                     // 关闭弹出菜单（div）
480 |                     $("#contextmenu").hide();
481 |                     $("#linkmenu").hide();
482 |                     $("#uploadmenu").hide();
483 |                 }
484 |             });
485 |     
486 |             //右键菜单处理
487 |             $("#contextmenu a").click(function(){
488 |                 var text = $(this).text();
489 |                 if("取消" == text){
490 |                     $("#contextmenu").hide();
491 |                 }if(text == '删除该节点'){
492 |                     scene.remove(currentNode);
493 |                     currentNode = null;
494 |                     $("#contextmenu").hide();
495 |                 }
496 |                     currentNode.save();
497 |                 
498 |                  if (text == '添加连线'){
499 | 
500 |                  } else if(text == '添加节点'){
501 |                     AddNode(tmpx, tmpy, currentNode.text, currentNode.Image,currentNode.level, 'Bottom_Center');
502 |                 }else if(text == '顺时针旋转'){
503 |                     currentNode.rotate += 0.5;
504 |                 }else if(text == '逆时针旋转'){
505 |                     currentNode.rotate -= 0.5;
506 |                 }else if(text == '放大'){
507 |                     currentNode.scaleX += 0.2;
508 |                     currentNode.scaleY += 0.2;
509 |                 }else if(text == '缩小'){
510 |                     currentNode.scaleX -= 0.2;
511 |                     currentNode.scaleY -= 0.2;
512 |                 }else if(text == '警告')
513 |                 {
514 |                     if(currentNode.alarm == null) {
515 |                         currentNode.alarm = '2W';
516 |                     }else
517 |                     {   
518 | 
519 |                         currentNode.alarm = null;
520 |                     }
521 | 
522 |                 }
523 |                 $("#contextmenu").hide();
524 |             });
525 |             $("#linkmenu a").click(function(){
526 |                 var text = $(this).text();
527 |                 if("取消" == text){
528 |                     $("#linkmenu").hide();
529 |                 }
530 |                 if(text == '修改颜色(随机)'){
531 |                     //currentLink.fillColor = JTopo.util.randomColor();
532 |                     currentLink.strokeColor = JTopo.util.randomColor();
533 |                 }else if(text == '改为红色')
534 |                 {
535 |                     currentLink.strokeColor = '255,0,0';//线路
536 |                     currentLink.text = "告警";
537 |                     currentLink.fontColor = '255,0,0';
538 |                 }else if(text == '改为普通颜色')
539 |                 {
540 |                     currentLink.strokeColor =  '0,200,255';
541 |                 }else if(text == '删除连线')
542 |                 {
543 |                     scene.remove(currentLink);
544 |                 }
545 |                 $("#linkmenu").hide();
546 |             });
547 | 
548 |             //修改文字
549 |             var textfield = $("#jtopo_textfield");
550 |             scene.dbclick(function(event){
551 |                 if(event.target == null) return;
552 |                 var e = event.target;
553 |                 textfield.css({
554 |                     top: event.pageY,
555 |                     left:event.pageX - e.width/2
556 |                 }).val(e.text).show().focus().select();
557 |                 console.log(textfield.val());
558 |                 e.text = "";
559 |                 textfield[0].JTopoNode = e;
560 |             });
561 |             $("#jtopo_textfield").blur(function(){
562 |                 textfield[0].JTopoNode.text = textfield.hide().val();
563 |             });
564 |             stage.add(scene);
565 | 
566 |             // 页面工具栏
567 |             function showJTopoToobar(stage){
568 |                 var toobarDiv = $('<div class="jtopo_toolbar">').html(''
569 |                     +'<input type="button" id="upLoadImage" value=" 载入设备 " />'
570 |                     +'<input type="radio" name="modeRadio" value="normal" checked id="r1"/>'
571 |                     +'<label for="r1"> 默认模式</label>'
572 |                     +'&nbsp;<input type="radio" name="modeRadio" value="edit" id="r4"/><label for="r4">图片编辑模式</label>'
573 |                     +'&nbsp;&nbsp;<input type="button" id="centerButton" value="居中显示"/>'
574 |                     +'<input type="button" id="zoomOutButton" value=" 放 大 " />'
575 |                     +'<input type="button" id="zoomInButton" value=" 缩 小 " />'
576 |                     +'&nbsp;&nbsp;<input type="checkbox" id="zoomCheckbox"/><label for="zoomCheckbox">鼠标缩放</label>'
577 |                     +'&nbsp;&nbsp;<input type = "button" id = "saveJsonStr" value = "保 存"/>'
578 |                     +'&nbsp;&nbsp;<input type="button" id="exportButton" value="导出PNG">');
579 |                     
580 |                 $('#content').prepend(toobarDiv);
581 | 
582 |                 // 工具栏按钮处理
583 |                 $("input[name='modeRadio']").click(function(){          
584 |                     stage.mode = $("input[name='modeRadio']:checked").val();
585 |                 });
586 |                 $('#centerButton').click(function(){
587 |                     stage.centerAndZoom(); //缩放并居中显示
588 |                 });
589 |                 $('#zoomOutButton').click(function(){//放大
590 |                     stage.zoomOut();
591 |                 });
592 |                 $('#zoomInButton').click(function(){//缩小
593 |                     stage.zoomIn();
594 |                 });
595 |                 $('#exportButton').click(function(){//保存PNG
596 |                     stage.saveImageInfo();
597 |                 });
598 |                 $('#zoomCheckbox').click(function(){
599 |                     if($('#zoomCheckbox').attr('checked')){
600 |                         stage.wheelZoom = 0.85; // 设置鼠标缩放比例
601 |                     }else{
602 |                         stage.wheelZoom = null; // 取消鼠标缩放比例
603 |                     }
604 |                 });
605 |                 $("#upLoadImage").click(function() {//载入节点
606 |                     $("#uploadmenu").toggle();
607 |                 });
608 |                 $("#uploadmenu ul").on("click", "li",function(e){
609 |                     var x = 10,y = 150;
610 |                     var str = $(this).text();
611 |                     var img = $(this).attr("id");
612 |                     var textPosition = "Bottom_Center";
613 |                     var level = 6;
614 |                     AddNode(x, y, str, img, textPosition,level);
615 |                 });
616 |                 $("#contextmenu .nav4").on("click", "li", function(){//设置level
617 |                     var lev = $(this).attr("id");
618 |                     currentNode.level = lev;
619 |                 });
620 |                 $("#contextmenu .nav5").on("click", "li", function(){//设置文字位置
621 |                     var tex = $(this).attr("id");
622 |                     currentNode.textPosition = tex;
623 |                 });
624 |                 $("#contextmenu .nav6").on("click", "li", function(){//设置告警等级,动画,颜色
625 |                     var ala = $(this).text();
626 |                     var curr = currentNode;
627 |                     var color = $(this).attr("id");
628 |                     curr.alarm = ala;
629 |                     /*var anima = setInterval(function(){
630 |                         if(curr.alarm == ala){
631 |                         curr.alarm = null;
632 |                         }else{
633 |                         curr.alarm = ala;
634 |                         }
635 |                     }, 600);*/
636 |                     if(color == 11){
637 |                         curr.alarmColor = '252, 233, 58';
638 |                     }else if(color == 22){
639 |                         curr.alarmColor = '255, 97, 0';
640 |                     }else if(color == 33){
641 |                         curr.alarmColor = '255, 0, 0';
642 |                     }
643 |                     console.log(curr.alarmColor);
644 |                 });
645 |                 $("#saveJsonStr").click(function(){//保存----大小，角度------非必须
646 |                     var a = scene;
647 |                     var d="[";
648 |                             //d+='"scene":]';
649 |                             for(var e=0;e< a.childs.length;e++){
650 |                                 var f= a.childs[e];
651 |                                 d+="{";
652 |                                 if(f.elementType == 'node')
653 |                                 {   
654 |                                     f.id = f.x * f.y;
655 |                                     d += "\"elementType\":"+ '"'+f.elementType+'"';
656 |                                     d += ",\"x\":"+ f.x;
657 |                                     d += ",\"y\":"+ f.y;
658 |                                     d += ",\"id\":"+ f.id;
659 |                                     d += ",\"Image\":"+ '"'+ f.Image+ '"';
660 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
661 |                                     d +=",\"textPosition\":"+ '"'+ f.textPosition+ '"';
662 |                                     d +=",\"larm\":"+ '"'+ f.alarm+ '"';
663 |                                     d +=",\"level\":"+ f.level;
664 |                                 }else if(f.elementType == 'link'){
665 |                                     d += "\"elementType\":"+ '"'+ f.elementType+ '"';
666 |                                     d += ",\"nodeAid\":"+ f.nodeA.id;
667 |                                     d += ",\"nodeZid\":"+ f.nodeZ.id;
668 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
669 |                                     d +=",\"fontColor\":"+ '"'+ f.fontColor+ '"';
670 |                                 }
671 |                                 d+="},";
672 |                             }
673 |                             d= d.substring(0, d.length-1);
674 |                             d+="]";
675 |                             d = d.replace("\r\n", "\\r\\n");
676 |                             console.log(d);
677 |                             alert("保存成功");
678 |                 });
679 |                 
680 |             }
681 | 
682 |             var runPrefixMethod = function(element, method) {
683 |                 var usablePrefixMethod;
684 |                 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
685 |                     if (usablePrefixMethod) return;
686 |                     if (prefix === "") {
687 |                         // 无前缀，方法首字母小写
688 |                         method = method.slice(0,1).toLowerCase() + method.slice(1);
689 |                     }
690 |                     var typePrefixMethod = typeof element[prefix + method];
691 |                     if (typePrefixMethod + "" !== "undefined") {
692 |                         if (typePrefixMethod === "function") {
693 |                             usablePrefixMethod = element[prefix + method]();
694 |                         } else {
695 |                             usablePrefixMethod = element[prefix + method];
696 |                         }
697 |                     }
698 |                 }
699 |             );
700 | 
701 |             return usablePrefixMethod;
702 |             };
703 |         });
704 |     </script>
705 | </body>
706 | </html>


--------------------------------------------------------------------------------
/topo-5.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <meta charset="UTF-8">
  4 |     <title>the test for network topology</title>
  5 |     <style type="text/css">
  6 |         html, body{
  7 |             font:14px/1.8 Arial,Microsoft YaHei,黑体,宋体,sans-serif;
  8 |             height:100%;
  9 |         }
 10 |         /*菜单选项卡*/
 11 |         *{
 12 |             margin:0;
 13 |             padding:0;
 14 |         }
 15 |         #uploadmenu{
 16 |             list-style: none;
 17 |             position:absolute;
 18 |             left:0;
 19 |             top:29px;
 20 |         }
 21 |         #uploadmenu>li>a{
 22 |             display:block;
 23 |             text-decoration: none;
 24 |             width: 90px;
 25 |             height: 24px;
 26 |             margin-left: 10px;
 27 |             padding-top:4px;
 28 |             line-height:24px;
 29 |             text-align: center;
 30 |             color: #fff;
 31 |             border-top:1px solid #ABA8A8;
 32 |         }
 33 |         #uploadmenu>li>ul>li>a{
 34 |             display:inline-block;
 35 |             width:27px;
 36 |             height:28px;
 37 |             padding-left:9px;
 38 |             padding-right:9px;
 39 |             background: #D1D1D1;
 40 |             border-radius: 5px;
 41 |         }
 42 |         #uploadmenu>li>ul>li>a>img{
 43 |             vertical-align: middle;
 44 |         }
 45 |         span{
 46 |             display:inline-block;
 47 |             height:30px;
 48 |             line-height: 30px;
 49 |             text-align: center;
 50 |             width:70px;
 51 |             padding-left: 5px;
 52 |             padding-right:5px;
 53 |             border-bottom: 1px #ADABAB solid;
 54 |         }
 55 |         .lili li:hover{
 56 |             background: #E9E7E7;
 57 |             border-radius: 5px;
 58 |         }
 59 |         .lili li:active{
 60 |             background:#FFFFFF;
 61 |             border-radius: 0px;
 62 |         }
 63 |         .nob{
 64 |             border-bottom:none !important;
 65 |         }
 66 |         .lili li{
 67 |             height:30px;
 68 |             width:129px!important;
 69 |         }
 70 |         .lili{
 71 |             border-radius:5px;
 72 |             box-shadow: 0 0 5px #434343;
 73 |         }
 74 |         #uploadmenu .li1>a{
 75 |             border: none;
 76 |         }
 77 |         .li1, .li2, .li3{
 78 |             width: 110px;
 79 |             height: 36px;
 80 |             background: #666666;
 81 |             position:relative;
 82 |             cursor: pointer;
 83 |          }
 84 |         .li3{
 85 |             border-radius:0 0 5px 5px;
 86 |          }
 87 |         .nav1, .nav2, .nav3{
 88 |             list-style: none;
 89 |             position:absolute;
 90 |             left: 110px;
 91 |             top: 0px;
 92 |             display: none;
 93 |           }
 94 |         .li1:hover .nav1{
 95 |             display:block;
 96 |             background-color: #C5C5C5;
 97 |         }
 98 |         .li2:hover .nav2{
 99 |             display:block;
100 |             background-color: #C5C5C5;
101 |         }
102 |         .li3:hover .nav3{
103 |             display:block;
104 |             background-color:#C5C5C5;
105 |         }
106 |         .lili1 li{
107 |             height:30px;
108 |             width:100px!important;
109 |         }
110 |         .lili1 li:hover{
111 |             background: #E9E7E7;
112 |             border-radius: 5px;
113 |         }
114 |         .lili1 li:active{
115 |             background:#FFFFFF;
116 |             border-radius: 0px;
117 |         }
118 |         .lili1{
119 |             border-radius:5px;
120 |             box-shadow: 0 0 5px #434343;
121 |         }
122 |         .lili1 li span{
123 |             display:inline-block;
124 |             height:30px;
125 |             line-height: 30px;
126 |             text-align: center;
127 |             width:70px;
128 |             margin-left: 10px;
129 |             border-bottom: 1px #ADABAB solid;
130 |         }
131 |         .nav4, .nav5, .nav6{
132 |             list-style: none;
133 |             position:absolute;
134 |             left: 123px;
135 |             top: 0px;
136 |             display: none;
137 |             cursor:pointer;
138 |         }
139 |         #level:hover .nav4{
140 |             display:block;
141 |             background-color:#C5C5C5;
142 |         }
143 |         #text:hover .nav5{
144 |             display:block;
145 |             background-color:#C5C5C5;
146 |         }
147 |         #alarm:hover .nav6{
148 |             display:block;
149 |             background-color:#C5C5C5;
150 |         }
151 |         #contextmenu {
152 |             width:122px;
153 |             border: 1px solid #aaa;
154 |             border-radius:7px;
155 |             border-bottom: 0;
156 |             background: #eee;
157 |             position: absolute;
158 |             list-style: none;
159 |             margin: 0;
160 |             padding: 0;
161 |             display: none;
162 |             box-shadow: 0 0 5px #434343;
163 |         }
164 |         #contextmenu li{
165 |             width:122px;
166 |             position:relative;
167 |         }
168 | 
169 |         #contextmenu li a {
170 |             height:30px;
171 |             line-height: 30px;
172 |             width:100px;
173 |             margin-left: 11px;
174 |             text-align: center;
175 |             display: block;
176 |             border-bottom: 1px solid #aaa;
177 |             cursor: pointer;
178 | 
179 |         }
180 | 
181 |         #contextmenu>li:hover {
182 |             background: #fff;
183 |             border-radius:7px;
184 |         }
185 |         #linkmenu {
186 |             width:122px;
187 |             border: 1px solid #aaa;
188 |             border-radius:7px;
189 |             border-bottom: 0;
190 |             background: #eee;
191 |             position: absolute;
192 |             list-style: none;
193 |             margin: 0;
194 |             padding: 0;
195 |             display: none;
196 |             box-shadow: 0 0 5px #434343;
197 |         }
198 |         #linkmenu li {
199 |             width:122px;
200 |         }
201 |         #linkmenu li a {
202 |             width:100px;
203 |             height:30px;
204 |             line-height: 30px;
205 |             display: block;
206 |             border-bottom: 1px solid #aaa;
207 |             cursor: pointer;
208 |             margin-left: 11px;
209 |             text-align: center;
210 |         }
211 | 
212 |         #linkmenu li:hover {
213 |             background: #fff;
214 |             border-radius:7px;
215 |         }
216 |         /*button*/
217 |         .jtopo_toolbar{
218 |             height:30px;
219 |         }
220 |         input[type="button"]{
221 |             display: inline-block;
222 |             outline: none;
223 |             cursor: pointer;
224 |             text-align: center;
225 |             text-decoration: none;
226 |             font: 10px/100% Arial, Helvetica, sans-serif;
227 |             padding: .5em 1em .55em;
228 |             -webkit-border-radius: .3em; 
229 |             -moz-border-radius: .3em;
230 |             border-radius: .3em;
231 |             color: #2E2C2C;
232 |             border: solid 1px #D6D4D4;
233 |             background: #E4E0E0;
234 |         }
235 |         input[type="button"]:hover{
236 |             background: #CECDCD;
237 |             border: solid 1px #CECDCD;
238 |         }
239 |     </style>
240 | <body>
241 | 
242 | <textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;" onkeydown="if(event.keyCode==13)this.blur();"></textarea>
243 | 
244 | <div class="right">
245 |     <div id="content">
246 |         <canvas id="canvas">sorry,your browser do not support canvas label</canvas>
247 |     </div>
248 | </div>
249 | <ul id="uploadmenu" style="display:none;">
250 |     <li class = "li1"><a>网络设备</a>
251 |         <ul class = "nav1 lili">
252 |         <li id = "firework.png"><span>防火墙</span><a><img src="img/fk.png"></a></li>
253 |         <li id = "router.png"><span>路由器</span><a><img src="img/rr.png"></a></li>
254 |         <li id = "router1.png"><span>路由器</span><a><img src="img/rr1.png"></a></li>
255 |         <li id = "serve2.png"><span>服务器</span><a><img src="img/se2.png"></a></li>
256 |         <li id = "serve3.png"><span>服务器</span><a><img src="img/se3.png"></a></li>
257 |         <li id = "serve1.png"><span>服务器</span><a><img src="img/se1.png"></a></li>
258 |         <li id = "terminal.png"><span>终端</span><a><img src="img/tl.png"></a></li>
259 |         <li id = "switch.png"><span>交换机</span><a><img src="img/sh.png"></a></li>
260 |         <li id = "switchOptical.png"><span>光纤交换机</span><a><img src="img/sO.png"></a></li>
261 |         <li id = "monitor.png"><span>监测设备</span><a><img src="img/mr.png"></a></li>
262 |         <li id = "storageServer.png"><span>存储服务器</span><a><img src="img/ss.png"></a></li>
263 |         <li id = "cloud.png"><span class = "nob">internet</span><a><img src="img/cd.png"></a></li>
264 |         </ul>
265 |     </li>
266 |     <li class = "li2"><a>区域拓扑</a>
267 |         <ul class = "nav2 lili">
268 |         <li><span>7</span></li>
269 |         <li><span>7</span></li>
270 |         <li><span>7</span></li>
271 |         <li><span>7</span></li>
272 |         <li><span>7</span></li>
273 |         <li><span>7</span></li>
274 |         <li><span   class = "nob">7</span></li>
275 |         </ul>
276 |     </li>
277 |     <li class = "li3"><a>行政拓扑</a>
278 |         <ul class = "nav3 lili">
279 |         <li><span>7</span></li>
280 |         <li><span>7</span></li>
281 |         <li><span>7</span></li>
282 |         <li><span>7</span></li>
283 |         <li><span>7</span></li>
284 |         <li><span>7</span></li>
285 |         <li><span class = "nob">7</span></li>
286 |         </ul>
287 |     </li>
288 | </ul>
289 | 
290 | <ul id="contextmenu" style="display:none;">
291 |     <li><a>添加连线</a></li>
292 |     <li><a>添加节点</a></li>
293 |     <li id = "level"><a>设置等级</a>
294 |     <ul class = "lili1 nav4">
295 |         <li id = "1"><span>壹</span></li>
296 |         <li id = "2"><span>贰</span></li>
297 |         <li id = "3"><span>弎</span></li>
298 |         <li id = "4"><span>肆</span></li>
299 |         <li id = "5"><span>伍</span></li>
300 |         <li id = "6"><span class = "nob">陆</span></li>
301 |     </ul>
302 |     </li>
303 |     <li id = "text"><a>设置文字位置</a>
304 |     <ul class = "lili1 nav5">
305 |         <li id = "Top_Center"><span>上</span></li>
306 |         <li id = "Bottom_Center"><span>下</span></li>
307 |         <li id = "Middle_Left"><span>左</span></li>
308 |         <li id = "Middle_Right"><span>右</span></li>
309 |         <li id = "Middle_Center"><span class = "nob">中</span></li>
310 |     </ul>
311 |     </li>
312 |     <li id = "alarm"><a>警告</a>
313 |     <ul class = "lili1 nav6">
314 |         <li id = "11"><span>一级告警</span></li>
315 |         <li id = "22"><span>二级告警</span></li>
316 |         <li id = "33"><span>三级告警</span></li>
317 |         <li id = "44"><span class = "nob">取消告警</span></li>
318 |     </ul>
319 |     </li>
320 |     <li><a>顺时针旋转</a></li>
321 |     <li><a>逆时针旋转</a></li>
322 |     <li><a>放大</a></li>
323 |     <li><a>缩小</a></li>
324 |     <li><a>删除该节点</a></li>
325 |     <li><a>取消</a></li>
326 | </ul>
327 | <ul id="linkmenu" style="display:none;">
328 |     <li><a>修改颜色(随机)</a></li>
329 |     <li><a>改为红色</a></li>
330 |     <li><a>改为普通颜色</a></li>
331 |     <li><a>删除连线</a></li>
332 |     <li><a>取消</a></li>
333 | </ul>
334 | <script src="js/jquery.min.js" type="text/javascript"></script>
335 | <script src="js/jtopo-0.4.8-min.js" type="text/javascript"></script>
336 |  <script type="text/javascript">
337 |         $(document).ready(function() {
338 | 
339 |             var canvas = document.getElementById('canvas');
340 |             canvas.height = window.innerHeight - 30;
341 |             canvas.width = window.innerWidth;
342 | 
343 |             var scene = new JTopo.Scene();
344 |             scene.background = './img/bg.jpeg';
345 |             var stage = new JTopo.Stage(canvas);
346 |             showJTopoToobar(stage);
347 |             var currentNode = null;
348 |             var endNode = null;
349 |             var tmpx = null;
350 |             var tmpy = null;
351 |             var validation = null;
352 | 
353 |             //服务器载入绘制拓扑图
354 |             $.ajax({
355 |                 typt:"GET",
356 |                 url:"js/jsonstr.json",
357 |                 dataType:"json",
358 |                 success:function(data){
359 |                         data.forEach(function(a){
360 |                    //此处可以加入地域节点
361 |                     if(a.elementType == "node"){
362 |                         if(a.level <= 5) {
363 |                             AddNode(a.x, a.y, a.text, a.Image, a.textPosition, a.level, a.larm);
364 |                         }
365 |                     }
366 |                     });
367 | 
368 |                          data.forEach(function(a){
369 |                     if(a.elementType == "link"){
370 |                         var nodeA = scene.findElements(function(e){return e.id == a.nodeAid;});
371 |                         var nodeZ = scene.findElements(function(e){return e.id == a.nodeZid;});
372 |                         if(nodeA[0] && nodeZ[0]) {
373 |                             Addlink(nodeA[0], nodeZ[0], a.text, a.fontColor);
374 |                         }
375 |                     }
376 |                     });
377 |                 }
378 |                 });
379 | 
380 |             //画出拓扑图(函数)
381 |             function AddNode(x, y, str, img, textPosition,level,larm)
382 |             {
383 |                 var node = new JTopo.Node(str);
384 |                 node.serializedProperties.push('id');
385 |                 node.serializedProperties.push('level');
386 |                 node.setLocation(x ,y);
387 |                 node.Image = '';
388 |                 node.id = x*y;
389 |                 node.level = level;
390 |                 if(null != img) {
391 |                     node.setImage('./img/' + img, true);
392 |                     node.Image = img;
393 |                 }
394 |                 if(larm == "2W"){
395 |                     node.alarm = '2W';
396 |                 }
397 |                 node.textPosition = textPosition;
398 |                 node.fontColor = '0,0,0';
399 |                 node.addEventListener('mouseup',function(event){
400 |                     handler(event,node);//将当前事件的node赋给currentNode并显示右键菜单
401 |                 });
402 |                 node.addEventListener('click', function(event){
403 |                     endNode = node;
404 |                     if(null != currentNode && currentNode != endNode && validation === true){
405 |                         strr = "";
406 |                         Addlink(currentNode, endNode, strr);
407 |                         currentNode = null;
408 |                         validation = false;//验证是否在当前节点上右键点击了添加节点
409 |                     }
410 |                 });
411 | 
412 |                 scene.add(node);
413 |                 return node;
414 |             }
415 |             function Addlink(node1, node2, str, color)//-----增加折线------
416 |             {
417 |                 var link = new JTopo.Link(node1, node2, str);
418 |                 //node2.father = node1;
419 |                 link.lineWidth = 3;//线宽
420 |                 link.bundleOffset = 60;
421 |                 link.bundleGap = 20;
422 |                 link.textOffsetY = 3;
423 |                 link.fontColor = color || '0, 200, 255';
424 |                 link.strokeColor = color || '0, 200, 255';
425 |                 link.addEventListener('mouseup',function(event){
426 |                     currentLink = this;
427 |                     handlelink(event);
428 |                 });
429 |                 scene.add(link);
430 |             }
431 | 
432 |             function AddTextNode(x, y, str, scene)//加入单独的文字节点
433 |             {
434 |                 var node = new JTopo.Node(str);
435 |                 node.setLocation(x, y);
436 |                 node.serializedProperties.push('id');
437 |                 node.id = x+y;
438 |                 node.fillColor = '255,255,255';
439 |                 node.textPosition = 'Middle_Center';
440 |                 node.fontColor = '0,0,0';
441 |                 node.setSize(120,30);
442 |                 node.dragable = false;
443 |                 node.showSelected = false;
444 |                 node.selected = false;
445 |                 scene.add(node);
446 |             }
447 | 
448 |             function handler(event, obj) {//绑定右键菜单
449 |                 $("#linkmenu").hide();
450 |                 if (event.button == 2) {
451 |                     currentNode = obj;
452 |                     tmpx = event.pageX + 30;
453 |                     tmpy = event.pageY + 30;
454 |                     $("#contextmenu").css({
455 |                         top: event.pageY,
456 |                         left: event.pageX
457 |                     }).show();
458 |                     $("#contextmenu a").click(function(){
459 |                         var text = $(this).text();
460 |                           if (text == '添加连线'){
461 |                             validation = true;//验证是否在当前节点上右键点击了添加节点
462 |                  }
463 |                  });
464 |                 }
465 |             }
466 | 
467 |             function handlelink(event){
468 |                 $("#contextmenu").hide();
469 |                 if(event.button == 2){
470 |                     $("#linkmenu").css({
471 |                         top:event.pageY,
472 |                         left:event.pageX
473 |                     }).show();
474 |                 }
475 |             }
476 | 
477 |              stage.click(function (event) {
478 |                 if (event.button == 0) {// 右键
479 |                     // 关闭弹出菜单（div）
480 |                     $("#contextmenu").hide();
481 |                     $("#linkmenu").hide();
482 |                     $("#uploadmenu").hide();
483 |                 }
484 |             });
485 |     
486 |             //右键菜单处理
487 |             $("#contextmenu a").click(function(){
488 |                 var text = $(this).text();
489 |                 if("取消" == text){
490 |                     $("#contextmenu").hide();
491 |                 }if(text == '删除该节点'){
492 |                     scene.remove(currentNode);
493 |                     currentNode = null;
494 |                     $("#contextmenu").hide();
495 |                 }
496 |                     currentNode.save();
497 |                 
498 |                  if (text == '添加连线'){
499 | 
500 |                  } else if(text == '添加节点'){
501 |                     AddNode(tmpx, tmpy, currentNode.text, currentNode.Image,currentNode.level, 'Bottom_Center');
502 |                 }else if(text == '顺时针旋转'){
503 |                     currentNode.rotate += 0.5;
504 |                 }else if(text == '逆时针旋转'){
505 |                     currentNode.rotate -= 0.5;
506 |                 }else if(text == '放大'){
507 |                     currentNode.scaleX += 0.2;
508 |                     currentNode.scaleY += 0.2;
509 |                 }else if(text == '缩小'){
510 |                     currentNode.scaleX -= 0.2;
511 |                     currentNode.scaleY -= 0.2;
512 |                 }else if(text == '警告')
513 |                 {
514 |                     if(currentNode.alarm == null) {
515 |                         currentNode.alarm = '2W';
516 |                     }else
517 |                     {   
518 | 
519 |                         currentNode.alarm = null;
520 |                     }
521 | 
522 |                 }
523 |                 $("#contextmenu").hide();
524 |             });
525 |             $("#linkmenu a").click(function(){
526 |                 var text = $(this).text();
527 |                 if("取消" == text){
528 |                     $("#linkmenu").hide();
529 |                 }
530 |                 if(text == '修改颜色(随机)'){
531 |                     //currentLink.fillColor = JTopo.util.randomColor();
532 |                     currentLink.strokeColor = JTopo.util.randomColor();
533 |                 }else if(text == '改为红色')
534 |                 {
535 |                     currentLink.strokeColor = '255,0,0';//线路
536 |                     currentLink.text = "告警";
537 |                     currentLink.fontColor = '255,0,0';
538 |                 }else if(text == '改为普通颜色')
539 |                 {
540 |                     currentLink.strokeColor =  '0,200,255';
541 |                 }else if(text == '删除连线')
542 |                 {
543 |                     scene.remove(currentLink);
544 |                 }
545 |                 $("#linkmenu").hide();
546 |             });
547 | 
548 |             //修改文字
549 |             var textfield = $("#jtopo_textfield");
550 |             scene.dbclick(function(event){
551 |                 if(event.target == null) return;
552 |                 var e = event.target;
553 |                 textfield.css({
554 |                     top: event.pageY,
555 |                     left:event.pageX - e.width/2
556 |                 }).val(e.text).show().focus().select();
557 |                 console.log(textfield.val());
558 |                 e.text = "";
559 |                 textfield[0].JTopoNode = e;
560 |             });
561 |             $("#jtopo_textfield").blur(function(){
562 |                 textfield[0].JTopoNode.text = textfield.hide().val();
563 |             });
564 |             stage.add(scene);
565 | 
566 |             // 页面工具栏
567 |             function showJTopoToobar(stage){
568 |                 var toobarDiv = $('<div class="jtopo_toolbar">').html(''
569 |                     +'<input type="button" id="upLoadImage" value=" 载入设备 " />'
570 |                     +'<input type="radio" name="modeRadio" value="normal" checked id="r1"/>'
571 |                     +'<label for="r1"> 默认模式</label>'
572 |                     +'&nbsp;<input type="radio" name="modeRadio" value="edit" id="r4"/><label for="r4">图片编辑模式</label>'
573 |                     +'&nbsp;&nbsp;<input type="button" id="centerButton" value="居中显示"/>'
574 |                     +'<input type="button" id="zoomOutButton" value=" 放 大 " />'
575 |                     +'<input type="button" id="zoomInButton" value=" 缩 小 " />'
576 |                     +'&nbsp;&nbsp;<input type="checkbox" id="zoomCheckbox"/><label for="zoomCheckbox">鼠标缩放</label>'
577 |                     +'&nbsp;&nbsp;<input type = "button" id = "saveJsonStr" value = "保 存"/>'
578 |                     +'&nbsp;&nbsp;<input type="button" id="exportButton" value="导出PNG">');
579 |                     
580 |                 $('#content').prepend(toobarDiv);
581 | 
582 |                 // 工具栏按钮处理
583 |                 $("input[name='modeRadio']").click(function(){          
584 |                     stage.mode = $("input[name='modeRadio']:checked").val();
585 |                 });
586 |                 $('#centerButton').click(function(){
587 |                     stage.centerAndZoom(); //缩放并居中显示
588 |                 });
589 |                 $('#zoomOutButton').click(function(){//放大
590 |                     stage.zoomOut();
591 |                 });
592 |                 $('#zoomInButton').click(function(){//缩小
593 |                     stage.zoomIn();
594 |                 });
595 |                 $('#exportButton').click(function(){//保存PNG
596 |                     stage.saveImageInfo();
597 |                 });
598 |                 $('#zoomCheckbox').click(function(){
599 |                     if($('#zoomCheckbox').attr('checked')){
600 |                         stage.wheelZoom = 0.85; // 设置鼠标缩放比例
601 |                     }else{
602 |                         stage.wheelZoom = null; // 取消鼠标缩放比例
603 |                     }
604 |                 });
605 |                 $("#upLoadImage").click(function() {//载入节点
606 |                     $("#uploadmenu").toggle();
607 |                 });
608 |                 $("#uploadmenu ul").on("click", "li",function(e){
609 |                     var x = 10,y = 150;
610 |                     var str = $(this).text();
611 |                     var img = $(this).attr("id");
612 |                     var textPosition = "Bottom_Center";
613 |                     var level = 6;
614 |                     AddNode(x, y, str, img, textPosition,level);
615 |                 });
616 |                 $("#contextmenu .nav4").on("click", "li", function(){//设置level
617 |                     var lev = $(this).attr("id");
618 |                     currentNode.level = lev;
619 |                 });
620 |                 $("#contextmenu .nav5").on("click", "li", function(){//设置文字位置
621 |                     var tex = $(this).attr("id");
622 |                     currentNode.textPosition = tex;
623 |                 });
624 |                 $("#contextmenu .nav6").on("click", "li", function(){//设置告警等级,动画,颜色
625 |                     var ala = $(this).text();
626 |                     var curr = currentNode;
627 |                     var color = $(this).attr("id");
628 |                     curr.alarm = ala;
629 |                     /*var anima = setInterval(function(){
630 |                         if(curr.alarm == ala){
631 |                         curr.alarm = null;
632 |                         }else{
633 |                         curr.alarm = ala;
634 |                         }
635 |                     }, 600);*/
636 |                     if(color == 11){
637 |                         curr.alarmColor = '252, 233, 58';
638 |                     }else if(color == 22){
639 |                         curr.alarmColor = '255, 97, 0';
640 |                     }else if(color == 33){
641 |                         curr.alarmColor = '255, 0, 0';
642 |                     }
643 |                     console.log(curr.alarmColor);
644 |                 });
645 |                 $("#saveJsonStr").click(function(){//保存----大小，角度------非必须
646 |                     var a = scene;
647 |                     var d="[";
648 |                             //d+='"scene":]';
649 |                             for(var e=0;e< a.childs.length;e++){
650 |                                 var f= a.childs[e];
651 |                                 d+="{";
652 |                                 if(f.elementType == 'node')
653 |                                 {   
654 |                                     f.id = f.x * f.y;
655 |                                     d += "\"elementType\":"+ '"'+f.elementType+'"';
656 |                                     d += ",\"x\":"+ f.x;
657 |                                     d += ",\"y\":"+ f.y;
658 |                                     d += ",\"id\":"+ f.id;
659 |                                     d += ",\"Image\":"+ '"'+ f.Image+ '"';
660 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
661 |                                     d +=",\"textPosition\":"+ '"'+ f.textPosition+ '"';
662 |                                     d +=",\"larm\":"+ '"'+ f.alarm+ '"';
663 |                                     d +=",\"level\":"+ f.level;
664 |                                 }else if(f.elementType == 'link'){
665 |                                     d += "\"elementType\":"+ '"'+ f.elementType+ '"';
666 |                                     d += ",\"nodeAid\":"+ f.nodeA.id;
667 |                                     d += ",\"nodeZid\":"+ f.nodeZ.id;
668 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
669 |                                     d +=",\"fontColor\":"+ '"'+ f.fontColor+ '"';
670 |                                 }
671 |                                 d+="},";
672 |                             }
673 |                             d= d.substring(0, d.length-1);
674 |                             d+="]";
675 |                             d = d.replace("\r\n", "\\r\\n");
676 |                             console.log(d);
677 |                             alert("保存成功");
678 |                 });
679 |                 
680 |             }
681 | 
682 |             var runPrefixMethod = function(element, method) {
683 |                 var usablePrefixMethod;
684 |                 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
685 |                     if (usablePrefixMethod) return;
686 |                     if (prefix === "") {
687 |                         // 无前缀，方法首字母小写
688 |                         method = method.slice(0,1).toLowerCase() + method.slice(1);
689 |                     }
690 |                     var typePrefixMethod = typeof element[prefix + method];
691 |                     if (typePrefixMethod + "" !== "undefined") {
692 |                         if (typePrefixMethod === "function") {
693 |                             usablePrefixMethod = element[prefix + method]();
694 |                         } else {
695 |                             usablePrefixMethod = element[prefix + method];
696 |                         }
697 |                     }
698 |                 }
699 |             );
700 | 
701 |             return usablePrefixMethod;
702 |             };
703 |         });
704 |     </script>
705 | </body>
706 | </html>


--------------------------------------------------------------------------------
/topo-6.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <meta charset="UTF-8">
  4 |     <title>the test for network topology</title>
  5 |     <style type="text/css">
  6 |         html, body{
  7 |             font:14px/1.8 Arial,Microsoft YaHei,黑体,宋体,sans-serif;
  8 |             height:100%;
  9 |         }
 10 |         /*菜单选项卡*/
 11 |         *{
 12 |             margin:0;
 13 |             padding:0;
 14 |         }
 15 |         #uploadmenu{
 16 |             list-style: none;
 17 |             position:absolute;
 18 |             left:0;
 19 |             top:29px;
 20 |         }
 21 |         #uploadmenu>li>a{
 22 |             display:block;
 23 |             text-decoration: none;
 24 |             width: 90px;
 25 |             height: 24px;
 26 |             margin-left: 10px;
 27 |             padding-top:4px;
 28 |             line-height:24px;
 29 |             text-align: center;
 30 |             color: #fff;
 31 |             border-top:1px solid #ABA8A8;
 32 |         }
 33 |         #uploadmenu>li>ul>li>a{
 34 |             display:inline-block;
 35 |             width:27px;
 36 |             height:28px;
 37 |             padding-left:9px;
 38 |             padding-right:9px;
 39 |             background: #D1D1D1;
 40 |             border-radius: 5px;
 41 |         }
 42 |         #uploadmenu>li>ul>li>a>img{
 43 |             vertical-align: middle;
 44 |         }
 45 |         span{
 46 |             display:inline-block;
 47 |             height:30px;
 48 |             line-height: 30px;
 49 |             text-align: center;
 50 |             width:70px;
 51 |             padding-left: 5px;
 52 |             padding-right:5px;
 53 |             border-bottom: 1px #ADABAB solid;
 54 |         }
 55 |         .lili li:hover{
 56 |             background: #E9E7E7;
 57 |             border-radius: 5px;
 58 |         }
 59 |         .lili li:active{
 60 |             background:#FFFFFF;
 61 |             border-radius: 0px;
 62 |         }
 63 |         .nob{
 64 |             border-bottom:none !important;
 65 |         }
 66 |         .lili li{
 67 |             height:30px;
 68 |             width:129px!important;
 69 |         }
 70 |         .lili{
 71 |             border-radius:5px;
 72 |             box-shadow: 0 0 5px #434343;
 73 |         }
 74 |         #uploadmenu .li1>a{
 75 |             border: none;
 76 |         }
 77 |         .li1, .li2, .li3{
 78 |             width: 110px;
 79 |             height: 36px;
 80 |             background: #666666;
 81 |             position:relative;
 82 |             cursor: pointer;
 83 |          }
 84 |         .li3{
 85 |             border-radius:0 0 5px 5px;
 86 |          }
 87 |         .nav1, .nav2, .nav3{
 88 |             list-style: none;
 89 |             position:absolute;
 90 |             left: 110px;
 91 |             top: 0px;
 92 |             display: none;
 93 |           }
 94 |         .li1:hover .nav1{
 95 |             display:block;
 96 |             background-color: #C5C5C5;
 97 |         }
 98 |         .li2:hover .nav2{
 99 |             display:block;
100 |             background-color: #C5C5C5;
101 |         }
102 |         .li3:hover .nav3{
103 |             display:block;
104 |             background-color:#C5C5C5;
105 |         }
106 |         .lili1 li{
107 |             height:30px;
108 |             width:100px!important;
109 |         }
110 |         .lili1 li:hover{
111 |             background: #E9E7E7;
112 |             border-radius: 5px;
113 |         }
114 |         .lili1 li:active{
115 |             background:#FFFFFF;
116 |             border-radius: 0px;
117 |         }
118 |         .lili1{
119 |             border-radius:5px;
120 |             box-shadow: 0 0 5px #434343;
121 |         }
122 |         .lili1 li span{
123 |             display:inline-block;
124 |             height:30px;
125 |             line-height: 30px;
126 |             text-align: center;
127 |             width:70px;
128 |             margin-left: 10px;
129 |             border-bottom: 1px #ADABAB solid;
130 |         }
131 |         .nav4, .nav5, .nav6{
132 |             list-style: none;
133 |             position:absolute;
134 |             left: 123px;
135 |             top: 0px;
136 |             display: none;
137 |             cursor:pointer;
138 |         }
139 |         #level:hover .nav4{
140 |             display:block;
141 |             background-color:#C5C5C5;
142 |         }
143 |         #text:hover .nav5{
144 |             display:block;
145 |             background-color:#C5C5C5;
146 |         }
147 |         #alarm:hover .nav6{
148 |             display:block;
149 |             background-color:#C5C5C5;
150 |         }
151 |         #contextmenu {
152 |             width:122px;
153 |             border: 1px solid #aaa;
154 |             border-radius:7px;
155 |             border-bottom: 0;
156 |             background: #eee;
157 |             position: absolute;
158 |             list-style: none;
159 |             margin: 0;
160 |             padding: 0;
161 |             display: none;
162 |             box-shadow: 0 0 5px #434343;
163 |         }
164 |         #contextmenu li{
165 |             width:122px;
166 |             position:relative;
167 |         }
168 | 
169 |         #contextmenu li a {
170 |             height:30px;
171 |             line-height: 30px;
172 |             width:100px;
173 |             margin-left: 11px;
174 |             text-align: center;
175 |             display: block;
176 |             border-bottom: 1px solid #aaa;
177 |             cursor: pointer;
178 | 
179 |         }
180 | 
181 |         #contextmenu>li:hover {
182 |             background: #fff;
183 |             border-radius:7px;
184 |         }
185 |         #linkmenu {
186 |             width:122px;
187 |             border: 1px solid #aaa;
188 |             border-radius:7px;
189 |             border-bottom: 0;
190 |             background: #eee;
191 |             position: absolute;
192 |             list-style: none;
193 |             margin: 0;
194 |             padding: 0;
195 |             display: none;
196 |             box-shadow: 0 0 5px #434343;
197 |         }
198 |         #linkmenu li {
199 |             width:122px;
200 |         }
201 |         #linkmenu li a {
202 |             width:100px;
203 |             height:30px;
204 |             line-height: 30px;
205 |             display: block;
206 |             border-bottom: 1px solid #aaa;
207 |             cursor: pointer;
208 |             margin-left: 11px;
209 |             text-align: center;
210 |         }
211 | 
212 |         #linkmenu li:hover {
213 |             background: #fff;
214 |             border-radius:7px;
215 |         }
216 |         /*button*/
217 |         .jtopo_toolbar{
218 |             height:30px;
219 |         }
220 |         input[type="button"]{
221 |             display: inline-block;
222 |             outline: none;
223 |             cursor: pointer;
224 |             text-align: center;
225 |             text-decoration: none;
226 |             font: 10px/100% Arial, Helvetica, sans-serif;
227 |             padding: .5em 1em .55em;
228 |             -webkit-border-radius: .3em; 
229 |             -moz-border-radius: .3em;
230 |             border-radius: .3em;
231 |             color: #2E2C2C;
232 |             border: solid 1px #D6D4D4;
233 |             background: #E4E0E0;
234 |         }
235 |         input[type="button"]:hover{
236 |             background: #CECDCD;
237 |             border: solid 1px #CECDCD;
238 |         }
239 |     </style>
240 | <body>
241 | 
242 | <textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;" onkeydown="if(event.keyCode==13)this.blur();"></textarea>
243 | 
244 | <div class="right">
245 |     <div id="content">
246 |         <canvas id="canvas">sorry,your browser do not support canvas label</canvas>
247 |     </div>
248 | </div>
249 | <ul id="uploadmenu" style="display:none;">
250 |     <li class = "li1"><a>网络设备</a>
251 |         <ul class = "nav1 lili">
252 |         <li id = "firework.png"><span>防火墙</span><a><img src="img/fk.png"></a></li>
253 |         <li id = "router.png"><span>路由器</span><a><img src="img/rr.png"></a></li>
254 |         <li id = "router1.png"><span>路由器</span><a><img src="img/rr1.png"></a></li>
255 |         <li id = "serve2.png"><span>服务器</span><a><img src="img/se2.png"></a></li>
256 |         <li id = "serve3.png"><span>服务器</span><a><img src="img/se3.png"></a></li>
257 |         <li id = "serve1.png"><span>服务器</span><a><img src="img/se1.png"></a></li>
258 |         <li id = "terminal.png"><span>终端</span><a><img src="img/tl.png"></a></li>
259 |         <li id = "switch.png"><span>交换机</span><a><img src="img/sh.png"></a></li>
260 |         <li id = "switchOptical.png"><span>光纤交换机</span><a><img src="img/sO.png"></a></li>
261 |         <li id = "monitor.png"><span>监测设备</span><a><img src="img/mr.png"></a></li>
262 |         <li id = "storageServer.png"><span>存储服务器</span><a><img src="img/ss.png"></a></li>
263 |         <li id = "cloud.png"><span class = "nob">internet</span><a><img src="img/cd.png"></a></li>
264 |         </ul>
265 |     </li>
266 |     <li class = "li2"><a>区域拓扑</a>
267 |         <ul class = "nav2 lili">
268 |         <li><span>7</span></li>
269 |         <li><span>7</span></li>
270 |         <li><span>7</span></li>
271 |         <li><span>7</span></li>
272 |         <li><span>7</span></li>
273 |         <li><span>7</span></li>
274 |         <li><span   class = "nob">7</span></li>
275 |         </ul>
276 |     </li>
277 |     <li class = "li3"><a>行政拓扑</a>
278 |         <ul class = "nav3 lili">
279 |         <li><span>7</span></li>
280 |         <li><span>7</span></li>
281 |         <li><span>7</span></li>
282 |         <li><span>7</span></li>
283 |         <li><span>7</span></li>
284 |         <li><span>7</span></li>
285 |         <li><span class = "nob">7</span></li>
286 |         </ul>
287 |     </li>
288 | </ul>
289 | 
290 | <ul id="contextmenu" style="display:none;">
291 |     <li><a>添加连线</a></li>
292 |     <li><a>添加节点</a></li>
293 |     <li id = "level"><a>设置等级</a>
294 |     <ul class = "lili1 nav4">
295 |         <li id = "1"><span>壹</span></li>
296 |         <li id = "2"><span>贰</span></li>
297 |         <li id = "3"><span>弎</span></li>
298 |         <li id = "4"><span>肆</span></li>
299 |         <li id = "5"><span>伍</span></li>
300 |         <li id = "6"><span class = "nob">陆</span></li>
301 |     </ul>
302 |     </li>
303 |     <li id = "text"><a>设置文字位置</a>
304 |     <ul class = "lili1 nav5">
305 |         <li id = "Top_Center"><span>上</span></li>
306 |         <li id = "Bottom_Center"><span>下</span></li>
307 |         <li id = "Middle_Left"><span>左</span></li>
308 |         <li id = "Middle_Right"><span>右</span></li>
309 |         <li id = "Middle_Center"><span class = "nob">中</span></li>
310 |     </ul>
311 |     </li>
312 |     <li id = "alarm"><a>警告</a>
313 |     <ul class = "lili1 nav6">
314 |         <li id = "11"><span>一级告警</span></li>
315 |         <li id = "22"><span>二级告警</span></li>
316 |         <li id = "33"><span>三级告警</span></li>
317 |         <li id = "44"><span class = "nob">取消告警</span></li>
318 |     </ul>
319 |     </li>
320 |     <li><a>顺时针旋转</a></li>
321 |     <li><a>逆时针旋转</a></li>
322 |     <li><a>放大</a></li>
323 |     <li><a>缩小</a></li>
324 |     <li><a>删除该节点</a></li>
325 |     <li><a>取消</a></li>
326 | </ul>
327 | <ul id="linkmenu" style="display:none;">
328 |     <li><a>修改颜色(随机)</a></li>
329 |     <li><a>改为红色</a></li>
330 |     <li><a>改为普通颜色</a></li>
331 |     <li><a>删除连线</a></li>
332 |     <li><a>取消</a></li>
333 | </ul>
334 | <script src="js/jquery.min.js" type="text/javascript"></script>
335 | <script src="js/jtopo-0.4.8-min.js" type="text/javascript"></script>
336 |  <script type="text/javascript">
337 |         $(document).ready(function() {
338 | 
339 |             var canvas = document.getElementById('canvas');
340 |             canvas.height = window.innerHeight - 30;
341 |             canvas.width = window.innerWidth;
342 | 
343 |             var scene = new JTopo.Scene();
344 |             scene.background = './img/bg.jpeg';
345 |             var stage = new JTopo.Stage(canvas);
346 |             showJTopoToobar(stage);
347 |             var currentNode = null;
348 |             var endNode = null;
349 |             var tmpx = null;
350 |             var tmpy = null;
351 |             var validation = null;
352 | 
353 |             //服务器载入绘制拓扑图
354 |             $.ajax({
355 |                 typt:"GET",
356 |                 url:"js/jsonstr.json",
357 |                 dataType:"json",
358 |                 success:function(data){
359 |                         data.forEach(function(a){
360 |                    //此处可以加入地域节点
361 |                     if(a.elementType == "node"){
362 |                         if(a.level <= 6) {
363 |                             AddNode(a.x, a.y, a.text, a.Image, a.textPosition, a.level, a.larm);
364 |                         }
365 |                     }
366 |                     });
367 | 
368 |                          data.forEach(function(a){
369 |                     if(a.elementType == "link"){
370 |                         var nodeA = scene.findElements(function(e){return e.id == a.nodeAid;});
371 |                         var nodeZ = scene.findElements(function(e){return e.id == a.nodeZid;});
372 |                         if(nodeA[0] && nodeZ[0]) {
373 |                             Addlink(nodeA[0], nodeZ[0], a.text, a.fontColor);
374 |                         }
375 |                     }
376 |                     });
377 |                 }
378 |                 });
379 | 
380 |             //画出拓扑图(函数)
381 |             function AddNode(x, y, str, img, textPosition,level,larm)
382 |             {
383 |                 var node = new JTopo.Node(str);
384 |                 node.serializedProperties.push('id');
385 |                 node.serializedProperties.push('level');
386 |                 node.setLocation(x ,y);
387 |                 node.Image = '';
388 |                 node.id = x*y;
389 |                 node.level = level;
390 |                 if(null != img) {
391 |                     node.setImage('./img/' + img, true);
392 |                     node.Image = img;
393 |                 }
394 |                 if(larm == "2W"){
395 |                     node.alarm = '2W';
396 |                 }
397 |                 node.textPosition = textPosition;
398 |                 node.fontColor = '0,0,0';
399 |                 node.addEventListener('mouseup',function(event){
400 |                     handler(event,node);//将当前事件的node赋给currentNode并显示右键菜单
401 |                 });
402 |                 node.addEventListener('click', function(event){
403 |                     endNode = node;
404 |                     if(null != currentNode && currentNode != endNode && validation === true){
405 |                         strr = "";
406 |                         Addlink(currentNode, endNode, strr);
407 |                         currentNode = null;
408 |                         validation = false;//验证是否在当前节点上右键点击了添加节点
409 |                     }
410 |                 });
411 | 
412 |                 scene.add(node);
413 |                 return node;
414 |             }
415 |             function Addlink(node1, node2, str, color)//-----增加折线------
416 |             {
417 |                 var link = new JTopo.Link(node1, node2, str);
418 |                 //node2.father = node1;
419 |                 link.lineWidth = 3;//线宽
420 |                 link.bundleOffset = 60;
421 |                 link.bundleGap = 20;
422 |                 link.textOffsetY = 3;
423 |                 link.fontColor = color || '0, 200, 255';
424 |                 link.strokeColor = color || '0, 200, 255';
425 |                 link.addEventListener('mouseup',function(event){
426 |                     currentLink = this;
427 |                     handlelink(event);
428 |                 });
429 |                 scene.add(link);
430 |             }
431 | 
432 |             function AddTextNode(x, y, str, scene)//加入单独的文字节点
433 |             {
434 |                 var node = new JTopo.Node(str);
435 |                 node.setLocation(x, y);
436 |                 node.serializedProperties.push('id');
437 |                 node.id = x+y;
438 |                 node.fillColor = '255,255,255';
439 |                 node.textPosition = 'Middle_Center';
440 |                 node.fontColor = '0,0,0';
441 |                 node.setSize(120,30);
442 |                 node.dragable = false;
443 |                 node.showSelected = false;
444 |                 node.selected = false;
445 |                 scene.add(node);
446 |             }
447 | 
448 |             function handler(event, obj) {//绑定右键菜单
449 |                 $("#linkmenu").hide();
450 |                 if (event.button == 2) {
451 |                     currentNode = obj;
452 |                     tmpx = event.pageX + 30;
453 |                     tmpy = event.pageY + 30;
454 |                     $("#contextmenu").css({
455 |                         top: event.pageY,
456 |                         left: event.pageX
457 |                     }).show();
458 |                     $("#contextmenu a").click(function(){
459 |                         var text = $(this).text();
460 |                           if (text == '添加连线'){
461 |                             validation = true;//验证是否在当前节点上右键点击了添加节点
462 |                  }
463 |                  });
464 |                 }
465 |             }
466 | 
467 |             function handlelink(event){
468 |                 $("#contextmenu").hide();
469 |                 if(event.button == 2){
470 |                     $("#linkmenu").css({
471 |                         top:event.pageY,
472 |                         left:event.pageX
473 |                     }).show();
474 |                 }
475 |             }
476 | 
477 |              stage.click(function (event) {
478 |                 if (event.button == 0) {// 右键
479 |                     // 关闭弹出菜单（div）
480 |                     $("#contextmenu").hide();
481 |                     $("#linkmenu").hide();
482 |                     $("#uploadmenu").hide();
483 |                 }
484 |             });
485 |     
486 |             //右键菜单处理
487 |             $("#contextmenu a").click(function(){
488 |                 var text = $(this).text();
489 |                 if("取消" == text){
490 |                     $("#contextmenu").hide();
491 |                 }if(text == '删除该节点'){
492 |                     scene.remove(currentNode);
493 |                     currentNode = null;
494 |                     $("#contextmenu").hide();
495 |                 }
496 |                     currentNode.save();
497 |                 
498 |                  if (text == '添加连线'){
499 | 
500 |                  } else if(text == '添加节点'){
501 |                     AddNode(tmpx, tmpy, currentNode.text, currentNode.Image,currentNode.level, 'Bottom_Center');
502 |                 }else if(text == '顺时针旋转'){
503 |                     currentNode.rotate += 0.5;
504 |                 }else if(text == '逆时针旋转'){
505 |                     currentNode.rotate -= 0.5;
506 |                 }else if(text == '放大'){
507 |                     currentNode.scaleX += 0.2;
508 |                     currentNode.scaleY += 0.2;
509 |                 }else if(text == '缩小'){
510 |                     currentNode.scaleX -= 0.2;
511 |                     currentNode.scaleY -= 0.2;
512 |                 }else if(text == '警告')
513 |                 {
514 |                     if(currentNode.alarm == null) {
515 |                         currentNode.alarm = '2W';
516 |                     }else
517 |                     {   
518 | 
519 |                         currentNode.alarm = null;
520 |                     }
521 | 
522 |                 }
523 |                 $("#contextmenu").hide();
524 |             });
525 |             $("#linkmenu a").click(function(){
526 |                 var text = $(this).text();
527 |                 if("取消" == text){
528 |                     $("#linkmenu").hide();
529 |                 }
530 |                 if(text == '修改颜色(随机)'){
531 |                     //currentLink.fillColor = JTopo.util.randomColor();
532 |                     currentLink.strokeColor = JTopo.util.randomColor();
533 |                 }else if(text == '改为红色')
534 |                 {
535 |                     currentLink.strokeColor = '255,0,0';//线路
536 |                     currentLink.text = "告警";
537 |                     currentLink.fontColor = '255,0,0';
538 |                 }else if(text == '改为普通颜色')
539 |                 {
540 |                     currentLink.strokeColor =  '0,200,255';
541 |                 }else if(text == '删除连线')
542 |                 {
543 |                     scene.remove(currentLink);
544 |                 }
545 |                 $("#linkmenu").hide();
546 |             });
547 | 
548 |             //修改文字
549 |             var textfield = $("#jtopo_textfield");
550 |             scene.dbclick(function(event){
551 |                 if(event.target == null) return;
552 |                 var e = event.target;
553 |                 textfield.css({
554 |                     top: event.pageY,
555 |                     left:event.pageX - e.width/2
556 |                 }).val(e.text).show().focus().select();
557 |                 console.log(textfield.val());
558 |                 e.text = "";
559 |                 textfield[0].JTopoNode = e;
560 |             });
561 |             $("#jtopo_textfield").blur(function(){
562 |                 textfield[0].JTopoNode.text = textfield.hide().val();
563 |             });
564 |             stage.add(scene);
565 | 
566 |             // 页面工具栏
567 |             function showJTopoToobar(stage){
568 |                 var toobarDiv = $('<div class="jtopo_toolbar">').html(''
569 |                     +'<input type="button" id="upLoadImage" value=" 载入设备 " />'
570 |                     +'<input type="radio" name="modeRadio" value="normal" checked id="r1"/>'
571 |                     +'<label for="r1"> 默认模式</label>'
572 |                     +'&nbsp;<input type="radio" name="modeRadio" value="edit" id="r4"/><label for="r4">图片编辑模式</label>'
573 |                     +'&nbsp;&nbsp;<input type="button" id="centerButton" value="居中显示"/>'
574 |                     +'<input type="button" id="zoomOutButton" value=" 放 大 " />'
575 |                     +'<input type="button" id="zoomInButton" value=" 缩 小 " />'
576 |                     +'&nbsp;&nbsp;<input type="checkbox" id="zoomCheckbox"/><label for="zoomCheckbox">鼠标缩放</label>'
577 |                     +'&nbsp;&nbsp;<input type = "button" id = "saveJsonStr" value = "保 存"/>'
578 |                     +'&nbsp;&nbsp;<input type="button" id="exportButton" value="导出PNG">');
579 |                     
580 |                 $('#content').prepend(toobarDiv);
581 | 
582 |                 // 工具栏按钮处理
583 |                 $("input[name='modeRadio']").click(function(){          
584 |                     stage.mode = $("input[name='modeRadio']:checked").val();
585 |                 });
586 |                 $('#centerButton').click(function(){
587 |                     stage.centerAndZoom(); //缩放并居中显示
588 |                 });
589 |                 $('#zoomOutButton').click(function(){//放大
590 |                     stage.zoomOut();
591 |                 });
592 |                 $('#zoomInButton').click(function(){//缩小
593 |                     stage.zoomIn();
594 |                 });
595 |                 $('#exportButton').click(function(){//保存PNG
596 |                     stage.saveImageInfo();
597 |                 });
598 |                 $('#zoomCheckbox').click(function(){
599 |                     if($('#zoomCheckbox').attr('checked')){
600 |                         stage.wheelZoom = 0.85; // 设置鼠标缩放比例
601 |                     }else{
602 |                         stage.wheelZoom = null; // 取消鼠标缩放比例
603 |                     }
604 |                 });
605 |                 $("#upLoadImage").click(function() {//载入节点
606 |                     $("#uploadmenu").toggle();
607 |                 });
608 |                 $("#uploadmenu ul").on("click", "li",function(e){
609 |                     var x = 10,y = 150;
610 |                     var str = $(this).text();
611 |                     var img = $(this).attr("id");
612 |                     var textPosition = "Bottom_Center";
613 |                     var level = 6;
614 |                     AddNode(x, y, str, img, textPosition,level);
615 |                 });
616 |                 $("#contextmenu .nav4").on("click", "li", function(){//设置level
617 |                     var lev = $(this).attr("id");
618 |                     currentNode.level = lev;
619 |                 });
620 |                 $("#contextmenu .nav5").on("click", "li", function(){//设置文字位置
621 |                     var tex = $(this).attr("id");
622 |                     currentNode.textPosition = tex;
623 |                 });
624 |                 $("#contextmenu .nav6").on("click", "li", function(){//设置告警等级,动画,颜色
625 |                     var ala = $(this).text();
626 |                     var curr = currentNode;
627 |                     var color = $(this).attr("id");
628 |                     curr.alarm = ala;
629 |                     /*var anima = setInterval(function(){
630 |                         if(curr.alarm == ala){
631 |                         curr.alarm = null;
632 |                         }else{
633 |                         curr.alarm = ala;
634 |                         }
635 |                     }, 600);*/
636 |                     if(color == 11){
637 |                         curr.alarmColor = '252, 233, 58';
638 |                     }else if(color == 22){
639 |                         curr.alarmColor = '255, 97, 0';
640 |                     }else if(color == 33){
641 |                         curr.alarmColor = '255, 0, 0';
642 |                     }
643 |                     console.log(curr.alarmColor);
644 |                 });
645 |                 $("#saveJsonStr").click(function(){//保存----大小，角度------非必须
646 |                     var a = scene;
647 |                     var d="[";
648 |                             //d+='"scene":]';
649 |                             for(var e=0;e< a.childs.length;e++){
650 |                                 var f= a.childs[e];
651 |                                 d+="{";
652 |                                 if(f.elementType == 'node')
653 |                                 {   
654 |                                     f.id = f.x * f.y;
655 |                                     d += "\"elementType\":"+ '"'+f.elementType+'"';
656 |                                     d += ",\"x\":"+ f.x;
657 |                                     d += ",\"y\":"+ f.y;
658 |                                     d += ",\"id\":"+ f.id;
659 |                                     d += ",\"Image\":"+ '"'+ f.Image+ '"';
660 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
661 |                                     d +=",\"textPosition\":"+ '"'+ f.textPosition+ '"';
662 |                                     d +=",\"larm\":"+ '"'+ f.alarm+ '"';
663 |                                     d +=",\"level\":"+ f.level;
664 |                                 }else if(f.elementType == 'link'){
665 |                                     d += "\"elementType\":"+ '"'+ f.elementType+ '"';
666 |                                     d += ",\"nodeAid\":"+ f.nodeA.id;
667 |                                     d += ",\"nodeZid\":"+ f.nodeZ.id;
668 |                                     d += ",\"text\":"+ '"'+ f.text+ '"';
669 |                                     d +=",\"fontColor\":"+ '"'+ f.fontColor+ '"';
670 |                                 }
671 |                                 d+="},";
672 |                             }
673 |                             d= d.substring(0, d.length-1);
674 |                             d+="]";
675 |                             d = d.replace("\r\n", "\\r\\n");
676 |                             console.log(d);
677 |                             alert("保存成功");
678 |                 });
679 |                 
680 |             }
681 | 
682 |             var runPrefixMethod = function(element, method) {
683 |                 var usablePrefixMethod;
684 |                 ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
685 |                     if (usablePrefixMethod) return;
686 |                     if (prefix === "") {
687 |                         // 无前缀，方法首字母小写
688 |                         method = method.slice(0,1).toLowerCase() + method.slice(1);
689 |                     }
690 |                     var typePrefixMethod = typeof element[prefix + method];
691 |                     if (typePrefixMethod + "" !== "undefined") {
692 |                         if (typePrefixMethod === "function") {
693 |                             usablePrefixMethod = element[prefix + method]();
694 |                         } else {
695 |                             usablePrefixMethod = element[prefix + method];
696 |                         }
697 |                     }
698 |                 }
699 |             );
700 | 
701 |             return usablePrefixMethod;
702 |             };
703 |         });
704 |     </script>
705 | </body>
706 | </html>


--------------------------------------------------------------------------------