xls

src/main/webapp/app/app.main.module.ts

@@ -99,6 +99,7 @@ import {ItemListComponent} from './overAll/template/list/item-list/item-list.com
 import {TriModalComponent} from './overAll/template/list/tri-modal/tri-modal.component';
 import {ToRepeatPipe} from './shared/common/to-repeat.pipe';
 import {JtopoComponent} from './modal/jtopo/jtopo.component';
+import {SelectRadioGroupComponent} from './modal/select-radio-group/select-radio-group.component';
 
 @NgModule({
     imports: [
@@ -201,6 +202,7 @@ import {JtopoComponent} from './modal/jtopo/jtopo.component';
         ItemListComponent,
         TriModalComponent,
         JtopoComponent,
+        SelectRadioGroupComponent
     ],
     providers:[
         OverAllService,

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

+<!--添加资源-->
+<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" 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]="true" [nzDisabled]="node.origin.disabled" (click)="selectTreeItem($event,node)" *ngIf="node.level == 1 && selectItem == node.origin.id" nz-radio> {{node.title}}</label>
+                    <label [ngModel]="false" [nzDisabled]="node.origin.disabled" (click)="selectTreeItem($event,node)" *ngIf="node.level == 1 && selectItem != node.origin.id" nz-radio> {{node.title}}</label>
+                </span>
+            </ng-template>
+
+          </nz-tree>
+        </div>
+      </nz-form-control>
+    </nz-form-item>
+  </div>
+</nz-modal>

src/main/webapp/app/modal/select-radio-group/select-radio-group.component.ts

+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {NzFormatEmitEvent, NzMessageService, NzTreeNode} from 'ng-zorro-antd';
+import {TopologyService} from '../../netTopology/topology.service';
+
+@Component({
+    selector: 'smart-select-radio-group',
+    templateUrl: './select-radio-group.component.html',
+    styles: []
+})
+export class SelectRadioGroupComponent implements OnInit {
+
+    @Output() done = new EventEmitter<any>();
+
+    isValiaible;
+    title;
+
+    nodes;
+    nodeList;
+    selectItem;
+
+    constructor(private topologySer: TopologyService,
+                private message: NzMessageService) {
+    }
+
+    ngOnInit() {
+        this.initForm();
+    }
+
+    showAddModal(title) {
+        this.title = title;
+        this.isValiaible = true;
+        this.initForm();
+        this.findTree();
+    }
+
+    initForm() {
+        this.nodes = null;
+        this.nodeList = [];
+        this.selectItem = null;
+    }
+
+    //查询树--- 分组
+    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();
+                } else {
+                    this.message.info(res.errMsg);
+                }
+            }
+        );
+    }
+
+    toNode() {
+        this.nodes = this.nodeList.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) {
+            type = 'item';  //监控项
+        }
+        if (this.title == '选择资源' && event.node.level == 1) {
+            return false;
+        }
+
+        if (this.title == '添加设备' && 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;
+                        if (res.inventoryExtends > 0 && this.title == '关联资产') {
+                            res.disabled = true;
+                        } else {
+                            res.disabled = false;
+                        }
+                    });
+                    event.node.addChildren(dataSet);
+                } else {
+                    event.node.addChildren([]);
+                    this.message.warning('该下级为空');
+                }
+
+            }
+        );
+    }
+
+    //选择树节点
+    selectTreeItem(event, node) {
+        this.selectItem = (node.origin.id);   //主机
+    }
+
+    handEditleOk() {
+        this.select();
+    }
+
+    select() {
+        if (!this.selectItem) {
+            this.message.warning('请选择资源');
+            return false;
+        }
+        this.done.emit(this.selectItem);
+        this.isValiaible = false;
+        this.initForm();
+    }
+
+    handleEditCancel() {
+        this.initForm();
+        this.isValiaible = false;
+    }
+
+}

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

@@ -123,4 +123,4 @@
 <smart-check #smartCheck (done)="setCheckList($event)"></smart-check>
 
 <!--选择资源-->
-<smart-select-group #smartSelectGroup (done)="setImg($event)"></smart-select-group>
\ No newline at end of file
+<smart-select-radio-group #smartSelectRadioGroup (done)="setImg($event)"></smart-select-radio-group>
\ No newline at end of file

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

@@ -10,6 +10,7 @@ import {LocalStorageService} from 'ngx-webstorage';
 import {numberOfBytes} from 'ng-jhipster/src/directive/number-of-bytes';
 import {LineComponent} from '../model/line/line.component';
 import {NodeComponent} from '../model/node/node.component';
+import {SelectRadioGroupComponent} from '../../modal/select-radio-group/select-radio-group.component';
 
 declare let editor: any;
 declare var layui: any;
@@ -92,7 +93,7 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
     @ViewChild('topologyBody') topologyBody: ElementRef;
     @ViewChild('smartTopology') smartTopology: TopologyComponent;
     @ViewChild('smartCheck') smartCheck: CheckComponent;
-    @ViewChild('smartSelectGroup') smartSelectGroup: SelectGroupComponent;
+    @ViewChild('smartSelectRadioGroup') smartSelectRadioGroup: SelectRadioGroupComponent;
     @ViewChild('smartLine') smartLine: LineComponent;
     @ViewChild('smartNode') smartNode: NodeComponent;
 
@@ -244,13 +245,13 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
             this.message.warning('请选择需要编辑的拓扑图');
             return false;
         }
-        this.smartSelectGroup.showAddModal('添加设备');
+        this.smartSelectRadioGroup.showAddModal('添加设备');
     }
 
     //获取设备图片
     setImg(e) {
         const data = {
-            hostIds:e
+            hostIds:[e]
         }
         this.topologySer.findByHostIdOrWeb(data).subscribe(
             (res)=>{