重构 jtopo

src/main/webapp/app/modal/basic-edit/basic-edit.component.html

@@ -96,8 +96,8 @@
                                                (ngModelChange)="changePort(i)">
                                         <nz-option nzValue="1" nzLabel="agent代理程序接口"></nz-option>
                                         <nz-option nzValue="2" nzLabel="SNMP接口"></nz-option>
-                                        <nz-option nzValue="3" nzLabel="JMX接口"></nz-option>
-                                        <nz-option nzValue="4" nzLabel="IPMI接口"></nz-option>
+                                        <nz-option nzValue="3" nzLabel="IPMI接口"></nz-option>
+                                        <nz-option nzValue="4" nzLabel="JMX接口"></nz-option>
                                     </nz-select>
                                 </nz-form-control>
                                 <nz-form-control nz-col [nzSpan]="2">

src/main/webapp/app/modal/basic-edit/basic-edit.component.ts

@@ -339,7 +339,7 @@ export class BasicEditComponent implements OnInit {
         this.interfaceslist.splice(index, 1);
     }
 
-    // agent:161  SNMP:161  JMX:12345   IPMI:623
+    // 1 agent:161 2 SNMP:161   3 IPMI:12345  4 JMX:6999
     changePort(index) {
         switch (this.interfaceslist[index].type) {
             case '1': {
@@ -356,7 +356,7 @@ export class BasicEditComponent implements OnInit {
                 break;
             }
             case '4': {
-                this.interfaceslist[index].port = '623';
+                this.interfaceslist[index].port = '6999';
                 break;
             }
 

src/main/webapp/app/netTopology/model/line/line.component.ts

@@ -54,7 +54,7 @@ export class LineComponent implements OnInit {
     //out
 
     outcurrentPageDataChange($event: Array<{ key1: string; key2: number; key3: string; key4: string; checked: boolean }>): void {
-        this.inList = $event;
+        this.outList = $event;
     }
 
     outselectItem(item,e){

src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts

@@ -251,7 +251,7 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
                     if (res.data.json.length > 0) {
                         let json = JSON.parse(res.data.json);
                         if(json.topology){
-                            editor.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
+                            this.viewTopology(JSON.parse(json.topology));
                             // this.smartJtopo.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
                             this.checkJson = json.check;
                         }else{
@@ -272,6 +272,39 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
         );
     }
 
+    //回显拓扑图
+    viewTopology(topologyJson){
+        console.log(topologyJson);
+        const arr = topologyJson.childs[0].childs;
+        const list = [];
+        arr.forEach(e=>{
+            if(e.elementType == 'link'){
+                const data = {
+                    itemIdIn:e.itemId.split(',')[0],
+                    itemIdOut:e.itemId.split(',')[1],
+                    linkId:e.id
+                };
+                list.push(data);
+            }
+        });
+        const data = {
+            "list" : list
+        }
+        this.topologySer.findFlow(data).subscribe(
+            (res)=>{
+                const response = res.data;
+                response.forEach(e1=>{
+                    arr.forEach(e2=>{
+                        if(e1.linkId == e2.id){
+                            e2.text = "进口流量："+e1.valueIn+e1.units+" 出口流量："+e1.valueOut+e1.units;
+                        }
+                    })
+                });
+                editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
+            }
+        )
+    }
+
     //查询监控点状态
     findItemStatus() {
         const data = {

src/main/webapp/content/javascript/jtopo/js/jtopo-0.4.8-dev.js

@@ -144,6 +144,7 @@
                             c = new JTopo.Node;
                             c.alpha = editor.config.nodeAlpha;
                             c.hostId = editor.config.hostId;
+                            c.itemId = editor.config.itemId;
                             c.strokeColor = editor.config.nodeStrokeColor;
                             c.fillColor = editor.config.nodeFillColor;
                             c.shadow = editor.config.nodeShadow;
@@ -224,6 +225,7 @@
                                     c = new JTopo.CurveLink(nodeA, nodeZ);
                                 }
                                 c.alpha = editor.config.linkAlpha;
+                                c.itemId = editor.config.itemId;
                                 c.strokeColor = editor.config.linkStrokeColor;
                                 c.fillColor = editor.config.linkFillColor;
                                 c.shadow = editor.config.linkShadow;
@@ -241,6 +243,7 @@
                                 if (temp && temp.length > 0) {
                                     c = new JTopo.Container();
                                     c.alpha = editor.config.containerAlpha;
+                                    c.itemId = editor.config.itemId;
                                     c.strokeColor = editor.config.containerStrokeColor;
                                     c.fillColor = editor.config.containerFillColor;
                                     c.shadow = editor.config.containerShadow;
@@ -319,6 +322,7 @@
                             c = new JTopo.Node;
                             c.alpha = editor.config.nodeAlpha;
                             c.hostId = editor.config.hostId;
+                            c.itemId = editor.config.itemId;
                             c.strokeColor = editor.config.nodeStrokeColor;
                             c.fillColor = editor.config.nodeFillColor;
                             c.shadow = editor.config.nodeShadow;
@@ -398,6 +402,7 @@
                                     c = new JTopo.CurveLink(nodeA, nodeZ);
                                 }
                                 c.alpha = editor.config.linkAlpha;
+                                c.itemId = editor.config.itemId;
                                 c.strokeColor = editor.config.linkStrokeColor;
                                 c.fillColor = editor.config.linkFillColor;
                                 c.shadow = editor.config.linkShadow;
@@ -415,6 +420,7 @@
                                 if (temp && temp.length > 0) {
                                     c = new JTopo.Container();
                                     c.alpha = editor.config.containerAlpha;
+                                    c.itemId = editor.config.itemId;
                                     c.strokeColor = editor.config.containerStrokeColor;
                                     c.fillColor = editor.config.containerFillColor;
                                     c.shadow = editor.config.containerShadow;
@@ -1717,7 +1723,7 @@
         function b(c) {
             this.initialize = function (c) {
                 b.prototype.initialize.apply(this, arguments), this.elementType = "node", this.zIndex = a.zIndex_Node, this.text = c, this.font = "12px Consolas", this.fontColor = "255,255,255", this.borderWidth = 0, this.borderColor = "255,255,255", this.borderRadius = null, this.dragable = !0, this.textPosition = "Bottom_Center", this.textOffsetX = 0, this.textOffsetY = 0, this.transformAble = !0, this.inLinks = [], this.outLinks = [];
-                var d = "nodeId,nodeType,nodeParams,hostId,nodeImage,text,textPosition,layout".split(",");
+                var d = "nodeId,nodeType,nodeParams,hostId,itemId,nodeImage,text,textPosition,layout".split(",");
                 this.serializedProperties = this.serializedProperties.concat(d);
                 this.maxHistoryStep = 20;
                 this.currStep = 0;
@@ -1967,7 +1973,7 @@
             this.initialize = function (b, c, d) {
                 if (f.prototype.initialize.apply(this, arguments), this.elementType = "link", this.zIndex = a.zIndex_Link, 0 != arguments.length) {
                     this.text = d, this.nodeA = b, this.nodeZ = c, this.nodeA && null == this.nodeA.outLinks && (this.nodeA.outLinks = []), this.nodeA && null == this.nodeA.inLinks && (this.nodeA.inLinks = []), this.nodeZ && null == this.nodeZ.inLinks && (this.nodeZ.inLinks = []), this.nodeZ && null == this.nodeZ.outLinks && (this.nodeZ.outLinks = []), null != this.nodeA && this.nodeA.outLinks.push(this), null != this.nodeZ && this.nodeZ.inLinks.push(this), this.caculateIndex(), this.font = "12px Consolas", this.fontColor = "255,255,255", this.lineWidth = 2, this.lineJoin = "miter", this.transformAble = !1, this.bundleOffset = 20, this.bundleGap = 12, this.textOffsetX = 0, this.textOffsetY = 0, this.arrowsRadius = null, this.arrowsOffset = 0, this.dashedPattern = null, this.path = [];
-                    var e = "nodeSrc,nodeDst,lineType,text,linkParams".split(",");
+                    var e = "nodeSrc,nodeDst,lineType,text,linkParams,itemId".split(",");
                     this.serializedProperties = this.serializedProperties.concat(e)
                 }
             }, this.caculateIndex = function () {

src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js

@@ -86,7 +86,6 @@ TopologyPanel.prototype.loadTopologyByJson = function (topologyJson, backImg) {
         JTopo.replaceStageWithJson(topologyJson)
         if (editor.stage && editor.scene && editor.scene.childs && editor.scene.childs.length > 0) {
             editor.stage.centerAndZoom()
-            editor.utils.getAllNodes()[0].alarm = "告警";
             console.log(editor.utils.getAllNodes()[0]);
         }
     } catch (e) {
@@ -178,6 +177,8 @@ function TopologyEditor() {
 
         //主机属性
         hostId:null,
+        //监控项属性
+        itemId:[]
     };
     // 布局参数
     this.layout = {}
@@ -789,6 +790,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
                     if (self.lineType !== 'curveLine') {
                         link.arrowsRadius = self.config.arrowsRadius
                     }
+                    link.id = generateUUID();
                     link.strokeColor = self.config.linkStrokeColor
                     link.lineWidth = self.config.linkDefaultWidth
                     this.add(link)
@@ -1143,6 +1145,7 @@ editor.utils = {
         var self = this;
         var link = editor.scene.selectedElements;
         link[0].text = "进口流量："+inItem.name+"   出口流量："+outItem.name;
+        link[0].itemId = (inItem.itemId) +"," +(outItem.itemId);
     },
     //设置节点属性
     setNode: function (item) {