update

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

 <nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-  <form [formGroup]="validateForm" nz-form>
+  <form nz-form>
     <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择监测点</nz-form-label>
+      <nz-form-label [nzSpan]="7" nzRequired>选择监测点</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input name="group" formControlName="group" placeholder="名称" >
-        <nz-form-explain *ngIf="validateForm.get('group').dirty && validateForm.get('group').errors">请选择监测点</nz-form-explain>
-
+        <div class="tree-div">
+          <nz-tree #nzTree
+                   name="nodes"
+                   [(ngModel)]="nodes"
+                   [nzCheckable]="true"
+                   [nzAsyncData]="true"
+                   [nzCheckStrictly]="true"
+                   (nzCheckBoxChange)="selectCheckTree($event)"
+                   (nzClick)="mouseAction('expand',$event)"
+                   (nzExpandChange)="mouseAction('expand',$event)" >
+          </nz-tree>
+        </div>
       </nz-form-control>
     </nz-form-item>
-    <nz-form-item>
+  </form>
+  <form [formGroup]="validateForm" nz-form>
+  <nz-form-item>
       <nz-form-label [nzSpan]="7" nzRequired nzFor="name">显示名称</nz-form-label>
       <nz-form-control [nzSpan]="12">
         <input type="text" nz-input name="name" formControlName="name" placeholder="名称" >
         <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入显示名称</nz-form-explain>
-
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
       <nz-form-label [nzSpan]="7" nzRequired nzFor="fontSize">字体大小</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input name="fontSize" formControlName="fontSize" placeholder="名称" >
+        <nz-select nzPlaceHolder="请选择字体大小" formControlName="fontSize">
+          <nz-option nzLabel="8" nzValue="8"></nz-option>
+        </nz-select>
         <nz-form-explain *ngIf="validateForm.get('fontSize').dirty && validateForm.get('fontSize').errors">请输入分组名称</nz-form-explain>
       </nz-form-control>
     </nz-form-item>

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

-import {Component, OnInit} from '@angular/core';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {NzFormatEmitEvent, NzMessageService, NzTreeNode} from 'ng-zorro-antd';
+import {TopologyService} from '../../topology.service';
+import {type} from 'os';
 
 @Component({
     selector: 'smart-check',
@@ -7,27 +10,33 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
     styles: []
 })
 export class CheckComponent implements OnInit {
+    @Output() done = new EventEmitter<any>();
 
     isVisible = false;
     title: string;
     validateForm:FormGroup;
 
-    constructor(private fb:FormBuilder) {
+    nodes;
+    nodeList;
+    selectId;
+
+    constructor(private fb:FormBuilder,private topologySer:TopologyService,
+                private message:NzMessageService) {
     }
 
     ngOnInit() {
         this.initForm();
+        this.findTree();
     }
 
     initForm(){
         this.validateForm = this.fb.group({
             name:['',[Validators.required]],
             fontSize:['',[Validators.required]],
-            group:['']
         })
     }
 
-    showAddMOodal() {
+    showAddModal() {
         this.isVisible = true;
         this.title = '添加监测点';
     }
@@ -37,6 +46,80 @@ export class CheckComponent implements OnInit {
         this.isVisible = true;
     }
 
+    //查询树
+    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;
+                        res.disabled = true;
+                    });
+                    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) {
+        let type;
+        if(event.node.level == 0){
+            type = "host";   //主机
+        }
+        if(event.node.level == 1){
+            type = "web";  //网站监测
+        }
+        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;
+                        if(type == "host"){
+                            res.disabled = true;
+                        }
+                    });
+                    event.node.addChildren(dataSet);
+                    this.nodeList[index].children = dataSet;
+                    this.nodeList[index].expanded = true;
+                } else {
+                    event.node.addChildren([]);
+                    this.message.warning('该下级为空');
+                }
+
+            }
+        );
+        setTimeout(_ => {
+        }, 1000);
+    }
+
+    //选择树节点
+    selectCheckTree(event: NzFormatEmitEvent) {
+            this.selectId = event.node.origin.id;
+    }
+
     handleOk(){
         for(let i  in this.validateForm.controls){
             this.validateForm.controls[i].markAsDirty();
@@ -53,7 +136,13 @@ export class CheckComponent implements OnInit {
         }
     }
 
-    create(){}
+    create(){
+        this.validateForm.addControl('id',new FormControl(this.selectId));
+        const str = JSON.stringify(this.validateForm.value);
+        this.isVisible = false;
+        this.initForm();
+        this.done.emit(str);
+    }
 
     update(){}
 

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

-<p>
-  device works!
-</p>
+<!--添加资源-->
+<nz-modal [nzWidth]="780" [(nzVisible)]="isValiaible" [nzTitle]="title"
+          (nzOnCancel)="handleEditCancel()" (nzOnOk)="handEditleOk()">
+      <div nz-form class="ant-advanced-search-form form-select">
+
+        <nz-form-item>
+          <nz-form-label [nzSpan]="4" nzRequired nzFor="host1">选择设备</nz-form-label>
+          <nz-form-control [nzSpan]="14">
+            <div class="tree-div">
+              <nz-tree #nzTree
+                       [(ngModel)]="nodes"
+                       [nzCheckable]="true"
+                       [nzAsyncData]="true"
+                       [nzCheckStrictly]="true"
+                       (nzCheckBoxChange)="selectCheckTree($event)"
+                       (nzClick)="mouseAction('expand',$event)"
+                       (nzExpandChange)="mouseAction('expand',$event)" >
+              </nz-tree>
+            </div>
+          </nz-form-control>
+        </nz-form-item>
+      </div>
+</nz-modal>

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

-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {TopologyService} from '../../topology.service';
+import {NzFormatEmitEvent, NzMessageService, NzTreeNode} from 'ng-zorro-antd';
 
 @Component({
-  selector: 'smart-device',
-  templateUrl: './device.component.html',
-  styles: []
+    selector: 'smart-device',
+    templateUrl: './device.component.html',
+    styles: [
+        ``
+    ]
 })
 export class DeviceComponent implements OnInit {
+    @Output() done = new EventEmitter<any>();
 
-  constructor() { }
+    isValiaible;
+    title = '添加设备';
 
-  ngOnInit() {
-  }
+    nodes;
+    nodeList;
+    selectTreeList = {
+        hostIds:<any>[],
+        httpIds:<any>[]
+    };
+
+    constructor(private topologySer: TopologyService,
+                private message: NzMessageService) {
+    }
+
+    ngOnInit() {
+        this.initForm();
+    }
+
+    showAddModal() {
+        this.isValiaible = true;
+        this.initForm();
+        this.findTree();
+    }
+
+    initForm(){
+        this.nodes = null;
+        this.nodeList = [];
+        this.selectTreeList = {
+            hostIds:<any>[],
+            httpIds:<any>[]
+        };
+    }
+
+    //查询树
+    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;
+                        res.disabled = true;
+                    });
+                    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) {
+        console.log(event);
+        let type;
+        if(event.node.level == 0){
+            type = "host";   //主机
+        }
+        if(event.node.level == 1){
+            type = "item";  //监控项
+        }
+        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) {
+                    console.log(res.data);
+                    const dataSet = res.data;
+                    dataSet.forEach(res => {
+                        res.title = res.name;
+                        res.key = res.id;
+                    });
+                    event.node.addChildren(dataSet);
+                    this.nodeList[index].children = dataSet;
+                    this.nodeList[index].expanded = true;
+                } else {
+                    event.node.addChildren([]);
+                    this.message.warning('该下级为空');
+                }
+
+            }
+        );
+        setTimeout(_ => {
+        }, 1000);
+    }
+
+    //选择树节点
+    selectCheckTree(event: NzFormatEmitEvent) {
+        console.log(event);
+        if (event.node.isChecked) {
+            if(event.node.level == 1){
+                this.selectTreeList.hostIds.push(event.node.origin.id);   //主机
+            }
+            if(event.node.level == 2){
+                this.selectTreeList.httpIds.push(event.node.origin.id)  //监控项
+            }
+        } else {
+            if(event.node.level == 1){
+                const index = this.selectTreeList.hostIds.indexOf(event.node.origin.id);
+                this.selectTreeList.hostIds.splice(index, 1);
+            }
+            if(event.node.level == 2){
+                const index = this.selectTreeList.httpIds.indexOf(event.node.origin.id);
+                this.selectTreeList.httpIds.splice(index, 1);
+            }
+
+        }
+    }
+
+    handEditleOk(){
+        this.topologySer.findDefaultIcon(this.selectTreeList).subscribe(
+            (res)=>{
+                    if(res.data.length > 0){
+                        this.done.emit(res.data);
+                        this.isValiaible = false;
+                    }else{
+                        this.message.warning("该项无默认图标")
+                    }
+            }
+        )
+    }
+
+    handleEditCancel(){
+        this.initForm();
+        this.isValiaible = false;
+    }
 
 }

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

@@ -4,6 +4,8 @@ import {NzMessageService, NzModalService} from 'ng-zorro-antd';
 import {DomSanitizer} from '@angular/platform-browser';
 import * as $ from 'jquery';
 import {TopologyComponent} from '../model/topology/topology.component';
+import {CheckComponent} from '../model/check/check.component';
+import {DeviceComponent} from '../model/device/device.component';
 
 declare let editor: any;
 declare var layui: any;
@@ -32,13 +34,21 @@ declare var layui: any;
                 color: #ca0814;
                 font-size: 20px;
             }
+            .checkList{
+                position: absolute;
+                top: 10px;
+                right: 20px;
+                color: #666666;
+                font-size: 20px;
+            }
         `
     ]
 })
 export class NeTopologyComponent implements OnInit, AfterViewInit {
     @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
     @ViewChild('smartTopology') smartTopology:TopologyComponent;
-    @ViewChild('smartCheck') smartCheck:TopologyComponent;
+    @ViewChild('smartCheck') smartCheck:CheckComponent;
+    @ViewChild('smartDevice') smartDevice:DeviceComponent;
 
     dataSet;
     isVisible = false;
@@ -47,13 +57,13 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
     name;
     topoType = '只读模式';
 
+    checkJson = [];
+
     constructor(private topologySer: TopologyService, private message: NzMessageService,
                 private sanitizer: DomSanitizer, private modalSer: NzModalService) {
-
     }
 
     ngOnInit() {
-
         this.loadCanvas();
         this.getList();
     }
@@ -87,7 +97,18 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
 
     //添加监测点
     addCheck(){
-        this.smartCheck.showAddMOodal();
+        this.smartCheck.showAddModal();
+    }
+
+    //添加设备
+    addDevice(){
+        this.smartDevice.showAddModal();
+    }
+
+    //获取设备图片
+    setImg(e){
+        console.log(e);
+        editor.utils.addNode(e[0].icon,'text');
     }
 
     //获取列表
@@ -103,6 +124,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         );
     }
 
+    //保存
     save() {
         if (this.topoType == '添加模式') {
             this.create();
@@ -137,14 +159,14 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
 
     //编辑
     update() {
-        if (!this.name) {
-            this.message.info('请输入拓扑图名称');
-            return false;
+        const json = {
+            topology:editor.saveTopology(),
+            check:this.checkJson
         }
         let data = {
             id: this.topoId,
             name: this.name,
-            json: editor.saveTopology()
+            json: JSON.stringify(json),
         };
         this.topologySer.update(data).subscribe(
             (res) => {
@@ -166,7 +188,9 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
                 if (res.errCode == 10000) {
                     if(res.data.json.length > 0){
                         let json = JSON.parse(res.data.json);
-                        editor.loadTopologyByJson(json, 'img/backimg.png');
+                        console.log(json);
+                        editor.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
+                        this.checkJson = json.check;
                     }
                     this.name = res.data.name;
                     this.topoId = res.data.id;
@@ -207,6 +231,12 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
         );
     }
 
+    //设置监测点
+    setCheckList(event){
+        console.log(event);
+        this.checkJson.push(JSON.parse(event));
+    }
+
     //load
     loadCanvas() {
         // 选择连线方式后的css样式
@@ -259,7 +289,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
             $('#link-flexline-v').css('background-color', 'white');
         });
 
-
         // 节点树中每个节点的拖放动作定义给拓扑图编辑器
         let nodes = $('[topo-div-type=\'topo-node\']');
         let nodeLength = nodes.length;

src/main/webapp/app/netTopology/topology.service.ts

@@ -58,4 +58,14 @@ export class TopologyService {
     findTreeWithWeb(): Observable<any> {
         return this.http.get(SERVER_API_URL + '/hostType/findTreeWithWeb');
     }
-}
+
\ No newline at end of file
+    //查找主机组, 主机, 监控项, 网站
+    findTree(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/sysmapJson/findTree',data);
+    }
+
+    //查找图标
+    findDefaultIcon(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/icon/findDefaultIcon',data);
+    }
+}

src/main/webapp/content/css/global.css

@@ -301,3 +301,9 @@ ui bootstrap tweaks
     width: 50%;
     margin: 0 auto;
 }
+
+.tree-div {
+    border: 1px solid #999;
+    max-height: 200px;
+    overflow: auto
+}

src/main/webapp/content/javascript/jtopo/js/util.js

@@ -17,8 +17,11 @@ var SysUtil = {
   }
 }
 // url根路径
-var rootPath = SysUtil.getRootPath()
-var topoImgPath = 'javascript/jtopo/img/';
+var rootPath = SysUtil.getRootPath();
+console.log("rootPath");
+console.log(rootPath);
+// var topoImgPath = 'javascript/jtopo/img/';
+var topoImgPath = 'http://10.10.38.99:8282/file/icon/';
 
 /*
  * 生成uuid算法,碰撞率低于1/2^^122
@@ -30,7 +33,7 @@ function generateUUID () {
     var r = (d + Math.random() * 16) % 16 | 0
     d = Math.floor(d / 16)
     return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
-  })
+  });
   return uuid
 }