update

src/main/webapp/app/alarm/now-alarm/now-alarm.component.html

@@ -28,7 +28,7 @@
         </span>
     </div>
 </div>
-<div class="tag-warn tag-form">
+<div class="tag-warn tag-form handle">
     <ng-container *ngFor="let item of warnCountList">
         <span (click)="search(item.hostid)">
             <nz-tag *ngIf="item.level == 4 || item.level == 5" [nzColor]="color.red"></nz-tag>

src/main/webapp/app/alarm/now-alarm/now-alarm.component.ts

@@ -54,6 +54,7 @@ export class NowAlarmComponent implements OnInit {
             isWaring:'yes',
             hostid:hostid,
         };
+        console.log(obj);
         this.warnList.getList(obj);
     }
 

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

@@ -4,8 +4,7 @@
             <nz-form-label [nzSpan]="7" nzRequired nzFor="name">组名称</nz-form-label>
             <nz-form-control [nzSpan]="12">
                 <input type="text" nz-input formControlName="name" placeholder="组名称">
-                <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入分组名称
-                </nz-form-explain>
+                <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入分组名称</nz-form-explain>
             </nz-form-control>
         </nz-form-item>
         <nz-form-item>

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

 <nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-  <form nz-form>
+  <form [formGroup]="validateForm" nz-form>
     <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzRequired nzFor="name">拓扑图名称</nz-form-label>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择监测点</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input name="name" [(ngModel)]="name" placeholder="名称" >
-        <nz-form-explain *ngIf="modalMsg">请输入内容</nz-form-explain>
+        <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>
+
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzRequired nzFor="name">刷新频率</nz-form-label>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="name">显示名称</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input name="name" [(ngModel)]="name" placeholder="名称" >
-        <nz-form-explain *ngIf="modalMsg">请输入内容</nz-form-explain>
+        <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="name">共享角色</nz-form-label>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="fontSize">字体大小</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input name="name" [(ngModel)]="name" placeholder="名称" >
-        <nz-form-explain *ngIf="modalMsg">请输入内容</nz-form-explain>
+        <input type="text" nz-input name="fontSize" formControlName="fontSize" placeholder="名称" >
+        <nz-form-explain *ngIf="validateForm.get('fontSize').dirty && validateForm.get('fontSize').errors">请输入分组名称</nz-form-explain>
       </nz-form-control>
     </nz-form-item>
   </form>

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

 import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
     selector: 'smart-check',
@@ -9,13 +10,22 @@ export class CheckComponent implements OnInit {
 
     isVisible = false;
     title: string;
+    validateForm:FormGroup;
 
-    constructor() {
+    constructor(private fb:FormBuilder) {
     }
 
     ngOnInit() {
+        this.initForm();
     }
 
+    initForm(){
+        this.validateForm = this.fb.group({
+            name:['',[Validators.required]],
+            fontSize:['',[Validators.required]],
+            group:['']
+        })
+    }
 
     showAddMOodal() {
         this.isVisible = true;
@@ -27,6 +37,26 @@ export class CheckComponent implements OnInit {
         this.isVisible = true;
     }
 
+    handleOk(){
+        for(const i  in this.validateForm.controls){
+            this.validateForm.controls[i].markAsDirty();
+            this.validateForm.controls[i].updateValueAndValidity();
+        }
+        if(this.validateForm.invalid){
+            return false;
+        }
+        if(this.title == "添加监测点"){
+            this.create();
+        }
+        if(this.title == "编辑监测点"){
+            this.update();
+        }
+    }
+
+    create(){}
+
+    update(){}
+
     handleCancel() {
         this.isVisible = false;
     }

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

 <nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-  <form nz-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" [(ngModel)]="name" placeholder="名称" >
-        <nz-form-explain *ngIf="modalMsg">请输入内容</nz-form-explain>
+        <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="name">刷新频率</nz-form-label>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="time">刷新频率</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input name="name" [(ngModel)]="name" placeholder="名称" >
-        <nz-form-explain *ngIf="modalMsg">请输入内容</nz-form-explain>
+        <input style="width: 100px;margin-right: 10px" type="text" nz-input name="time" [(ngModel)]="time" placeholder="名称" >分钟
+        <nz-form-explain *ngIf="validateForm.get('time').dirty && validateForm.get('time').errors">请输入刷新频率</nz-form-explain>
       </nz-form-control>
     </nz-form-item>
     <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzRequired nzFor="name">共享角色</nz-form-label>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="group">共享角色</nz-form-label>
       <nz-form-control [nzSpan]="12">
-        <input type="text" nz-input name="name" [(ngModel)]="name" placeholder="名称" >
-        <nz-form-explain *ngIf="modalMsg">请输入内容</nz-form-explain>
+        <input type="text" nz-input name="group" [(ngModel)]="group" placeholder="名称" >
+        <nz-form-explain *ngIf="validateForm.get('group').dirty && validateForm.get('group').errors">请输入分组名称</nz-form-explain>
       </nz-form-control>
     </nz-form-item>
   </form>

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

 import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
     selector: 'smart-topology',
@@ -9,11 +10,23 @@ export class TopologyComponent implements OnInit {
 
     isVisible = false;
     title: string;
+    validateForm:FormGroup;
 
-    constructor() {
+    constructor(private fb:FormBuilder) {
     }
 
     ngOnInit() {
+        this.initForm();
+    }
+
+    initForm(){
+        this.validateForm = this.fb.group(
+            {
+                name:['',[Validators.required]],
+                time:['',[Validators.required]],
+                group:['']
+            }
+        )
     }
 
     showAddMOodal() {
@@ -26,6 +39,26 @@ export class TopologyComponent implements OnInit {
         this.isVisible = true;
     }
 
+    handleOk(){
+        for(const i  in this.validateForm.controls){
+            this.validateForm.controls[i].markAsDirty();
+            this.validateForm.controls[i].updateValueAndValidity();
+        }
+        if(this.validateForm.invalid){
+            return false;
+        }
+        if(this.title == "添加拓扑图"){
+            this.create();
+        }
+        if(this.title == "编辑拓扑图"){
+            this.update();
+        }
+    }
+
+    create(){}
+
+    update(){}
+
     handleCancel() {
         this.isVisible = false;
     }

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

@@ -39,8 +39,9 @@
     <div class="layui-header layui-bg-gray" style="line-height: 60px">
         <input style="width: 200px;" type="text" [(ngModel)]="name" nz-input placeholder="请输入拓扑图名称">
 
-        图标：<span onclick="editor.utils.addNode()">添加</span>
+        设备：<span onclick="editor.utils.addNode()">添加</span>
         <span onclick="editor.utils.deleteSelectedNodes()">移除</span>
+        监测点：<span (click)="addCheck()">添加</span> <span>移除</span>
         <!-- 顶部工具栏 -->
         <div class="layui-nav layui-layout-right" >
             <span aria-hidden="true" title="全屏查看"
@@ -668,6 +669,5 @@
     </form>
 </div>
 
-<nz-modal >
-
-</nz-modal>
+<smart-topology #smartTopology></smart-topology>
+<smart-check #smartCheck></smart-check>
\ No newline at end of file
\ No newline at end of file

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

@@ -3,6 +3,7 @@ import {TopologyService} from '../topology.service';
 import {NzMessageService, NzModalService} from 'ng-zorro-antd';
 import {DomSanitizer} from '@angular/platform-browser';
 import * as $ from 'jquery';
+import {TopologyComponent} from '../model/topology/topology.component';
 
 declare let editor: any;
 declare var layui: any;
@@ -36,6 +37,8 @@ declare var layui: any;
 })
 export class NeTopologyComponent implements OnInit {
     @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
+    @ViewChild('smartTopology') smartTopology:TopologyComponent;
+    @ViewChild('smartCheck') smartCheck:TopologyComponent;
 
     element;
     dataSet;
@@ -60,9 +63,10 @@ export class NeTopologyComponent implements OnInit {
 
     //新增拓扑图
     addTopo() {
-        this.topoType = '添加模式';
-        this.message.info('添加模式');
-        editor.utils.editTopology();
+        // this.topoType = '添加模式';
+        // this.message.info('添加模式');
+        // editor.utils.editTopology();
+        this.smartTopology.showAddMOodal();
     }
 
     //编辑拓扑图
@@ -71,9 +75,15 @@ export class NeTopologyComponent implements OnInit {
             this.message.info("请选择需要编辑的拓扑图");
             return false;
         }
-        this.topoType = '编辑模式';
-        this.message.info('编辑模式');
-        editor.utils.editTopology();
+        // this.topoType = '编辑模式';
+        // this.message.info('编辑模式');
+        // editor.utils.editTopology();
+        this.smartTopology.showEditModal();
+    }
+
+    //添加监测点
+    addCheck(){
+        this.smartCheck.showAddMOodal();
     }
 
     //获取列表

src/main/webapp/content/javascript/layui-2.3.0/layui.all.js

 /** layui-v2.3.0 MIT License By https://www.layui.com */
 ;!function (e) {
     "use strict";
-    console.log("done");
     var t = document
         , n = {
         modules: {},
@@ -7555,7 +7554,6 @@ layui.define("jquery", function (t) {
         }
     };
     s.prototype.init = function (t, e) {
-     console.log("init");
         var l = function () {
             return e ? '[lay-filter="' + e + '"]' : ""
         }()
@@ -7659,17 +7657,13 @@ layui.define("jquery", function (t) {
             },
             collapse: function () {
                 var t = "layui-collapse";
-                console.log(t);
-                console.log($("." + t + l));
                 a("." + t + l).each(function () {
-                 console.log(a(this));
                     var t = a(this).find(".layui-colla-item");
                     t.each(function () {
                         var t = a(this)
                             , i = t.find(".layui-colla-title")
                             , e = t.find(".layui-colla-content")
                             , l = "none" === e.css("display");
-                        console.log(i);
                         i.find(".layui-colla-icon").remove(),
                             i.append('<i class="layui-icon layui-colla-icon">' + (l ? "&#xe602;" : "&#xe61a;") + "</i>"),
                             i.off("click", f.collapse).on("click", f.collapse)