重构 jtopo

src/main/webapp/app/modal/select-group/select-group.component.html

@@ -23,7 +23,6 @@
           </nz-tree>
         </div>
       </nz-form-control>
-
     </nz-form-item>
   </div>
 </nz-modal>

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

+<!--进出口流量-->
+<nz-modal [nzWidth]="780" [(nzVisible)]="isLine" nzTitle="流量配置" (nzOnCancel)="handleLineCancel()" (nzOnOk)="handleLineOk()">
+  <form  nz-form>
+    <nz-tabset>
+      <nz-tab nzTitle="进流量">
+        <nz-table #basicTable1 [nzData]="inList"
+                  [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="inPageNum" [nzPageSize]="inPageCount"
+                  (nzCurrentPageDataChange)="incurrentPageDataChange($event)"
+                  (nzPageIndexChange)="changePageIn($event)">
+          <thead>
+          <tr>
+            <th></th>
+            <th>名称</th>
+            <th>键值</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr *ngFor="let data of basicTable1.data">
+            <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="inselectItem(data,$event)"></td>
+            <td>{{data.name}}</td>
+            <td>{{data.key}}</td>
+          </tr>
+          </tbody>
+        </nz-table>
+      </nz-tab>
+      <nz-tab nzTitle="出流量">
+        <nz-table #basicTable2 [nzData]="outList"
+                  [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="outPageNum" [nzPageSize]="outPageCount"
+                  (nzCurrentPageDataChange)="outcurrentPageDataChange($event)"
+                  (nzPageIndexChange)="changePageOut($event)">
+          <thead>
+          <tr>
+            <th></th>
+            <th>名称</th>
+            <th>键值</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr *ngFor="let data of basicTable2.data">
+            <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="outselectItem(data,$event)"></td>
+            <td>{{data.name}}</td>
+            <td>{{data.key}}</td>
+          </tr>
+          </tbody>
+        </nz-table>
+      </nz-tab>
+    </nz-tabset>
+  </form>
+</nz-modal>
\ No newline at end of file

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

+import {Component, OnInit} from '@angular/core';
+import {TopologyService} from '../../topology.service';
+import {LocalStorageService} from 'ngx-webstorage';
+import {NzMessageService} from 'ng-zorro-antd';
+
+declare let editor: any;
+@Component({
+    selector: 'smart-line',
+    templateUrl: './line.component.html',
+    styles: []
+})
+export class LineComponent implements OnInit {
+
+    isLine = false;
+    hostIds = [];
+
+    inPageNum = 1;
+    outPageNum = 1;
+    inPageCount = 10;
+    outPageCount = 10;
+
+    totalNum;
+
+    inList;
+    inSelect = [];
+
+    outList;
+    outSelect = [];
+
+    constructor(private topologySer: TopologyService, private message: NzMessageService, private localStorage: LocalStorageService,) {
+    }
+
+    //in
+    incurrentPageDataChange($event: Array<{ key1: string; key2: number; key3: string; key4: string; checked: boolean }>): void {
+        this.inList = $event;
+    }
+
+    inselectItem(item,e){
+        if(e){
+            this.inSelect = item;
+        }else{
+            this.inSelect = null;
+        }
+    }
+
+    indeleteSelect(index){
+        this.inSelect = null;
+    }
+
+    changePageIn(e){
+
+    }
+
+    //out
+
+    outcurrentPageDataChange($event: Array<{ key1: string; key2: number; key3: string; key4: string; checked: boolean }>): void {
+        this.inList = $event;
+    }
+
+    outselectItem(item,e){
+        if(e){
+            this.outSelect = item;
+        }else{
+            this.outSelect = null;
+        }
+    }
+
+    outdeleteSelect(index){
+        this.outSelect = null;
+    }
+
+    changePageOut(e){
+
+    }
+
+    ngOnInit() {
+
+    }
+
+    showModal(hostIds) {
+        this.hostIds = hostIds;
+        this.isLine = true;
+        this.getOutList();
+        this.getInList();
+    }
+
+    getInList(){
+        const data = {
+            hostIds:[this.hostIds],
+            search:"",
+            type:"in",
+            pageNum:this.inPageNum,
+            pageCount:this.inPageCount
+        }
+        this.topologySer.findFlowItemByHost(data).subscribe(
+            (res)=>{
+                this.totalNum = res.data.totalNum;
+                this.inList = res.data.data;
+            }
+        )
+
+    }
+
+    getOutList(){
+        const data = {
+            hostIds:[this.hostIds],
+            search:"",
+            type:"out",
+            pageNum:this.outPageNum,
+            pageCount:this.outPageCount
+        }
+        this.topologySer.findFlowItemByHost(data).subscribe(
+            (res)=>{
+                this.totalNum = res.data.totalNum;
+                this.outList = res.data.data;
+            }
+        )
+
+    }
+
+    //进出口流量
+    handleLineCancel() {
+        this.inList = [];
+        this.outList = [];
+        this.isLine = false;
+        localStorage.setItem("line",'false');
+    }
+
+    handleLineOk() {
+        this.inList = [];
+        this.outList = [];
+        this.isLine = false;
+        console.log(this.inSelect);
+        console.log(this.outSelect);
+        editor.utils.setLink(this.inSelect,this.outSelect);
+        localStorage.setItem("line",'false');
+    }
+
+}

src/main/webapp/app/netTopology/model/node/node.component.html

+<!--节点-->
+<nz-modal [(nzVisible)]="isNode" nzTitle="节点" (nzOnCancel)="handleNodeCancel()" (nzOnOk)="handleNodeOk()">
+  <div nz-form class="ant-advanced-search-form form-select">
+    <nz-form-item>
+      <nz-form-label [nzSpan]="7"  nzFor="group" >设备名称</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <input nz-input type="text" [(ngModel)]="name">
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="7" nzFor="host1">选择设备</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <div class="tree-div" style="height: 300px">
+          <nz-tree #nzTree
+                   [(ngModel)]="nodes"
+                   [nzAsyncData]="true"
+                   [nzCheckStrictly]="true"
+                   (nzClick)="mouseAction('expand',$event)"
+                   (nzExpandChange)="mouseAction('expand',$event)" >
+            <ng-template #nzTreeTemplate let-node>
+                <span class="custom-node" draggable="true" aria-grabbed="true" [class.active]="node.isSelected">
+                    <label *ngIf="node.level == 0"> {{node.title}}</label>
+                    <label [(ngModel)]="node.isChecked" [nzDisabled]="node.origin.disabled" (click)="selectItem($event,node)" *ngIf="node.level == 1" nz-checkbox> {{node.title}}</label>
+                </span>
+            </ng-template>
+
+          </nz-tree>
+        </div>
+      </nz-form-control>
+    </nz-form-item>
+  </div>
+</nz-modal>
\ No newline at end of file

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

+import {Component, OnInit} from '@angular/core';
+import {TopologyService} from '../../topology.service';
+import {LocalStorageService} from 'ngx-webstorage';
+import {NzFormatEmitEvent, NzMessageService, NzTreeNode} from 'ng-zorro-antd';
+
+declare let editor: any;
+@Component({
+    selector: 'smart-node',
+    templateUrl: './node.component.html',
+    styles: []
+})
+export class NodeComponent implements OnInit {
+
+    isNode = false;
+    name;
+
+    nodes;
+    nodeList;
+    selectList = [];
+
+    constructor(private topologySer: TopologyService, private message: NzMessageService, private localStorage: LocalStorageService,) {
+    }
+
+    ngOnInit() {}
+
+    showModal() {
+        this.isNode = true;
+        this.findTree();
+    }
+
+    //查询树--- 分组
+    findTree() {
+        const data = {
+            id: '',
+            type: 'group'
+        };
+        this.topologySer.findTree(data).subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    let option = res.data;
+                    option.forEach(res => {
+                        res.title = res.name;
+                        res.key = res.id;
+                    });
+                    this.nodeList = option;
+                    this.toNode(option);
+                } else {
+                    this.message.info(res.errMsg);
+                }
+            }
+        );
+    }
+
+    toNode(data) {
+        this.nodes = data.map(res => {
+            return new NzTreeNode(res);
+        });
+    }
+
+    //获取下级
+    mouseAction(name: string, event: NzFormatEmitEvent) {
+        if (event.node.children.length > 0) {
+            return false;
+        }
+        let type;
+        if (event.node.level == 0) {
+            type = 'host';   //主机
+        }
+        if(event.node.level == 1){
+            return false;
+        }
+        const index = <any>event.node.key - 1;
+        const data = {
+            'id': event.node.origin.id,
+            'type': type
+        };
+        this.topologySer.findTree(data).subscribe(
+            (res) => {
+                if (res.data) {
+                    const dataSet = res.data;
+                    dataSet.forEach(res => {
+                        res.title = res.name;
+                        res.key = res.id;
+                        res.isLeaf = true;
+                    });
+                    event.node.addChildren(dataSet);
+                } else {
+                    event.node.addChildren([]);
+                    this.message.warning('该下级为空');
+                }
+
+            }
+        );
+    }
+
+    //选择树节点
+    selectItem(event, node) {
+        if (node.isChecked) {
+            this.selectList.push(node.origin.id);   //主机
+
+        } else {
+            const index = this.selectList.indexOf(node.origin.id);
+            this.selectList.splice(index, 1);
+        }
+    }
+
+    //节点
+    handleNodeCancel() {
+        this.isNode = false;
+        this.selectList = [];
+        localStorage.setItem("node",'false');
+    }
+
+    handleNodeOk() {
+        const data = {
+            hostIds:this.selectList
+        }
+        this.topologySer.findByHostIdOrWeb(data).subscribe(
+            (res)=>{
+                this.selectList = [];
+                const item = {
+                    name:this.name,
+                    img:res.data[0].url
+                };
+                this.isNode = false;
+                editor.utils.setNode(item);
+                localStorage.setItem("node",'false');
+            }
+        )
+
+    }
+
+}

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

@@ -33,7 +33,6 @@
     </div>
 </div>
 
-
 <div class="layui-layout layui-layout-admin">
     <div class="layui-header header-bar">
         <span (click)="addDevice()">添加设备</span>

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

-import {AfterViewChecked, AfterViewInit, Component, ElementRef, KeyValueDiffer, OnInit, ViewChild, KeyValueDiffers, DoCheck} from '@angular/core';
+import {AfterViewChecked, AfterViewInit, Component, ElementRef, KeyValueDiffer, OnInit, ViewChild, KeyValueDiffers, DoCheck, OnDestroy} from '@angular/core';
 import {TopologyService} from '../topology.service';
 import {NzMessageService, NzModalService, UploadFile} from 'ng-zorro-antd';
 import {DomSanitizer} from '@angular/platform-browser';
@@ -75,7 +75,7 @@ declare var layui: any;
         `
     ]
 })
-export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit {
+export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDestroy {
     @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
     @ViewChild('smartTopology') smartTopology: TopologyComponent;
     @ViewChild('smartCheck') smartCheck: CheckComponent;
@@ -96,20 +96,27 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit {
     fileList: UploadFile[] = [];
     isDevice;
 
-    private customerDiffer: KeyValueDiffer<string, any>;
-    local = {
-        node:'',
-        link:''
+    private customerDifferLink: KeyValueDiffer<string, any>;
+    private customerDifferNode: KeyValueDiffer<string, any>;
+    node = {
+        value:''
+    };
+    line = {
+        value:''
     };
 
     constructor(private topologySer: TopologyService, private message: NzMessageService, private localStorage:LocalStorageService,private differs: KeyValueDiffers,
                 private sanitizer: DomSanitizer, private modalSer: NzModalService) {
+
     }
 
     ngOnInit() {
+
+        this.customerDifferLink = this.differs.find(this.line).create();
+        this.customerDifferNode = this.differs.find(this.node).create();
+
         this.getList();
         this.getTypeList();
-        this.customerDiffer = this.differs.find(this.local).create();
     }
 
     ngAfterViewInit() {
@@ -117,16 +124,25 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit {
     }
 
     ngDoCheck(){
-        this.local.node =  localStorage.getItem("node");
-        this.local.link =  localStorage.getItem("link");
-        if (this.local.node == 'true') {
-           this.smartNode.showModal();
+        this.node.value =  localStorage.getItem('node');
+        this.line.value =  localStorage.getItem('line');
+        const changesLine = this.customerDifferLink.diff(this.line);
+        const changesNode = this.customerDifferNode.diff(this.node);
+        if (changesLine && changesLine['_appendAfter'].currentValue == "true") {
+            const arr = localStorage.getItem('linkHostIds');
+            console.log(arr);
+           this.smartLine.showModal(arr);
         }
-        if (this.local.link == 'true') {
-            this.smartLine.showModal(null);
+        if (changesNode && changesNode['_appendAfter'].currentValue == "true") {
+            this.smartNode.showModal();
         }
     }
 
+    ngOnDestroy(){
+        localStorage.setItem("line",'false');
+        localStorage.setItem("node",'false');
+    }
+
     //一级分类
     getTypeList(){
         this.topologySer.findTreeWithWeb().subscribe(

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

@@ -143,6 +143,7 @@
                         if ("node" == d) {
                             c = new JTopo.Node;
                             c.alpha = editor.config.nodeAlpha;
+                            c.hostId = editor.config.hostId;
                             c.strokeColor = editor.config.nodeStrokeColor;
                             c.fillColor = editor.config.nodeFillColor;
                             c.shadow = editor.config.nodeShadow;
@@ -317,6 +318,7 @@
                         if ("node" == d) {
                             c = new JTopo.Node;
                             c.alpha = editor.config.nodeAlpha;
+                            c.hostId = editor.config.hostId;
                             c.strokeColor = editor.config.nodeStrokeColor;
                             c.fillColor = editor.config.nodeFillColor;
                             c.shadow = editor.config.nodeShadow;
@@ -622,7 +624,7 @@
 
         function toJson(a) {
             var b = "backgroundColor,visible,mode,rotate,alpha,scaleX,scaleY,shadow,translateX,translateY,areaSelect,paintAll".split(","),
-                c = "text,elementType,x,y,width,height,visible,alpha,rotate,scaleX,scaleY,fillColor,shadow,transformAble,zIndex,dragable,selected,showSelected,font,fontColor,textPosition,textOffsetX,textOffsetY".split(","),
+                c = "text,hostId,elementType,x,y,width,height,visible,alpha,rotate,scaleX,scaleY,fillColor,shadow,transformAble,zIndex,dragable,selected,showSelected,font,fontColor,textPosition,textOffsetX,textOffsetY".split(","),
                 d = "{";
             d += "frames:" + a.frames, d += ", scenes:[";
             for (var e = 0; e < a.childs.length; e++) {
@@ -957,7 +959,7 @@
 
             // Stage对象初始化方法，初始化画布，画图对象和初始状态
             this.initialize = function (c) {
-                initJtopoEvent(c), this.canvas = c, this.id = "", this.graphics = c.getContext("2d"), this.childs = [], this.frames = 24, this.messageBus = new JTopo.util.MessageBus, this.eagleEye = eagleEye(this), this.wheelZoom = null, this.mouseDownX = 0, this.mouseDownY = 0, this.mouseDown = !1, this.mouseOver = !1, this.needRepaint = !0, this.serializedProperties = ["wheelZoom", "width", "height", "id"]
+                initJtopoEvent(c), this.canvas = c, this.id = "", this.graphics = c.getContext("2d"), this.childs = [], this.frames = 24, this.messageBus = new JTopo.util.MessageBus, this.eagleEye = eagleEye(this), this.wheelZoom = null, this.mouseDownX = 0, this.mouseDownY = 0, this.mouseDown = !1, this.mouseOver = !1, this.needRepaint = !0, this.serializedProperties = ["wheelZoom", "width","height", "id"]
             }, null != c && this.initialize(c);
 
             var o = !0,
@@ -1715,7 +1717,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,nodeImage,text,textPosition,layout".split(",");
+                var d = "nodeId,nodeType,nodeParams,hostId,nodeImage,text,textPosition,layout".split(",");
                 this.serializedProperties = this.serializedProperties.concat(d);
                 this.maxHistoryStep = 20;
                 this.currStep = 0;

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

@@ -29,6 +29,7 @@ TopologyPanel.prototype.saveTopology = function (url) {
     }
     // 获取json
     var topologyJSON = editor.stage.toJson();
+    console.log(topologyJSON);
     return topologyJSON;
     // 保存拓扑图数据
 }
@@ -615,11 +616,13 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
 
         // 只处理双击节点事件
         if (event.target instanceof JTopo.Node && editor.stageMode === 'edit') {
-            console.log(event.target)
             localStorage.setItem("node",'true');
         } else if (event.target instanceof JTopo.Link && editor.stageMode === 'edit') {
-            console.log(event.target);
-            localStorage.setItem("link",'true');
+            var arr = [];
+            arr.push(event.target.nodeA.hostId);
+            arr.push(event.target.nodeZ.hostId);
+            localStorage.setItem("line",'true');
+            localStorage.setItem("linkHostIds",arr);
         }
     });
 
@@ -1132,6 +1135,27 @@ editor.utils = {
             }
         }
     },
+    //设置线的属性
+    setLink: function (inItem,outItem) {
+        if (editor.stageMode !== 'edit') {
+            return false
+        };
+        var self = this;
+        var link = editor.scene.selectedElements;
+        link[0].text = "进口流量："+inItem.name+"   出口流量："+outItem.name;
+    },
+    //设置节点属性
+    setNode: function (item) {
+        if (editor.stageMode !== 'edit') {
+            return false
+        };
+        var self = this;
+        var node = editor.scene.selectedElements;
+        node[0].text = item.name;
+        node[0].setImage(topoImgPath + item.img);
+        node[0].nodeImage = item.img;
+        editor.stage.paint();
+    },
     // 放大
     scalingBig: function () {
         if (editor.currentNode instanceof JTopo.Node) {