update

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

-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {AlarmService} from '../alarm.service';
 import {pageSize} from '../../app.constants';
 import {WarnListComponent} from '../../modal/warn-list/warn-list.component';
@@ -10,10 +10,11 @@ import {DatePipe} from '@angular/common';
     selector: 'smart-alarm-list',
     templateUrl: './alarm-list.component.html',
     styles: [`
-        .tag-warn{
+        .tag-warn {
             padding: 5px;
         }
-        .tag-warn span{
+
+        .tag-warn span {
             border: 1px solid #ccc;
             margin-right: 10px;
             display: inline-block;
@@ -21,12 +22,13 @@ import {DatePipe} from '@angular/common';
             padding: 2px 4px;
             border-radius: 4px;
         }
-        :host ::ng-deep .tag-warn .ant-tag{
+
+        :host ::ng-deep .tag-warn .ant-tag {
             margin-right: 0px;
         }
     `]
 })
-export class AlarmListComponent implements OnInit {
+export class AlarmListComponent implements OnInit, AfterViewInit {
     @ViewChild('warnList') warnList: WarnListComponent;
     eventList = [];
     warnCountList = [];
@@ -37,89 +39,92 @@ export class AlarmListComponent implements OnInit {
     //条件
     timeType = '1';
     obj = {
-        priorityName:null,
-        groupid:null,
-        equipmentType:null,
-        startTime:'',
-        endTime:'',
-        name:''
+        priorityName: null,
+        groupid: null,
+        equipmentType: null,
+        startTime: '',
+        endTime: '',
+        name: ''
     };
 
-    constructor(public alarmSer: AlarmService,public overAllSer:OverAllService,public message:NzMessageService,
-                public datePipe:DatePipe) {
+    constructor(public alarmSer: AlarmService, public overAllSer: OverAllService, public message: NzMessageService,
+                public datePipe: DatePipe) {
     }
 
     ngOnInit() {
         this.getType();
         this.getWarnGroup();
         this.changeType();
+    }
+
+    ngAfterViewInit(){
         this.searchValue();
     }
 
     //获取分组
-    getWarnGroup(){
+    getWarnGroup() {
         this.overAllSer.findGroup().subscribe(
-            (res)=>{
-                if(res.errCode == 10000){
+            (res) => {
+                if (res.errCode == 10000) {
                     this.groupList = res.data;
                 }
             }
-        )
+        );
     }
 
     //获取资源类型
-    getType(){
+    getType() {
         this.overAllSer.findType().subscribe(
-            (res)=>{
-                if(res.errCode == 10000){
+            (res) => {
+                if (res.errCode == 10000) {
                     this.warnCountList = res.data;
-                }else{
+                } else {
                     this.message.info(res.errMsg);
                 }
             }
-        )
+        );
     }
 
     //时间改变
-    changeType(){
+    changeType() {
         const nowDate = new Date().getTime();
-        let day1,day2;
-        switch (this.timeType){
-            case'1':{
-                this.obj.startTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 00:00:00';
-                this.obj.endTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 23:59:59';
-               break;
+        let day1, day2;
+        switch (this.timeType) {
+            case'1': {
+                this.obj.startTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 00:00:00';
+                this.obj.endTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 23:59:59';
+                break;
             }
-            case'2':{
-                day1 = nowDate - 1*24*60*60*1000;
-                this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
-                this.obj.endTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 23:59:59';
+            case'2': {
+                day1 = nowDate - 1 * 24 * 60 * 60 * 1000;
+                this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
+                this.obj.endTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 23:59:59';
                 break;
             }
-            case'3':{
-                day1 = nowDate - 3*24*60*60*1000;
-                day2 = nowDate - 1*24*60*60*1000;
-                this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
-                this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
+            case'3': {
+                day1 = nowDate - 3 * 24 * 60 * 60 * 1000;
+                day2 = nowDate - 1 * 24 * 60 * 60 * 1000;
+                this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
+                this.obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
                 break;
             }
-            case'4':{
-                day1 = nowDate - 7*24*60*60*1000;
-                day2 = nowDate - 1*24*60*60*1000;
-                this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
-                this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
+            case'4': {
+                day1 = nowDate - 7 * 24 * 60 * 60 * 1000;
+                day2 = nowDate - 1 * 24 * 60 * 60 * 1000;
+                this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
+                this.obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
                 break;
             }
-            case'5':{
+            case'5': {
                 break;
             }
         }
     }
 
     //查询
-    searchValue(){
-        this.obj.startTime = this.datePipe.transform(Number(this.obj.startTime),'yyyy-MM-dd HH:mm:ss');
-        this.obj.endTime = this.datePipe.transform(Number(this.obj.endTime),'yyyy-MM-dd HH:mm:ss');
+    searchValue() {
+        this.obj.startTime = this.datePipe.transform(Number(this.obj.startTime), 'yyyy-MM-dd HH:mm:ss');
+        this.obj.endTime = this.datePipe.transform(Number(this.obj.endTime), 'yyyy-MM-dd HH:mm:ss');
         this.warnList.getList(this.obj);
     }
 }

src/main/webapp/app/app.constants.ts

@@ -13,4 +13,6 @@ export const color = {
     red:'#f44e4e',
     gray:'#bfbfbf',
     black:'#6064'
-};
+};
\ No newline at end of file
+//图片地址
+export const imgUrl = "http://10.10.38.99:8282/file/icon/";

src/main/webapp/app/app.route.ts

@@ -22,6 +22,7 @@ import {NetworkDetailComponent} from './overAll/network-check/network-detail/net
 import {TopologyImgComponent} from './netTopology/topology-img/topology-img.component';
 
 export const route: Routes = [
+    {path: '', component: JhiMainComponent,canActivate:[LoginGuard]},
     {
         path: 'app', component: AppComponent,
         children: [

src/main/webapp/app/modal/warn-list/warn-list.component.html

@@ -16,7 +16,7 @@
   <tbody>
   <tr *ngFor="let data of warnList">
     <td class="table-timeline">
-      <nz-timeline-item>{{data.clock | date:'yyyy-MM-dd HH:MM:ss'}}</nz-timeline-item>
+      <nz-timeline-item>{{data.clock}}</nz-timeline-item>
     </td>
     <td class="round-tag tag-form">
       <nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="'#fc0d1b'"></nz-tag>

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

 <nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-  <form [formGroup]="validateForm" nz-form>
+  <form [formGroup]="validateForm"  nz-form>
     <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图片</nz-form-label>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图标</nz-form-label>
       <nz-form-control [nzSpan]="12">
         <nz-upload
-                nzSize = "300"
-                nzFileType="image/png,image/jpeg,image/gif,image/bmp"
-                [nzData] ="data"
-                nzLimit="1"
-        >
+                [nzBeforeUpload]="beforeUpload"
+                [(nzFileList)]="fileList">
           <button nz-button>
-            <i class="anticon anticon-upload"></i><span>Click to Upload</span>
+            <i class="anticon anticon-upload"></i><span>上传</span>
           </button>
         </nz-upload>
-        <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="firstTypeId">选择一级类型</nz-form-label>
       <nz-form-control [nzSpan]="12">
-       <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择类型">
-         <nz-option></nz-option>
-       </nz-select>
-        <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入显示名称</nz-form-explain>
+        <nz-select  name="firstTypeId" nzPlaceHolder="请选择一级类型" nzAllowClear formControlName="firstTypeId" (ngModelChange)="onChanges($event)">
+          <nz-option *ngFor="let item of options" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
+        </nz-select>
+        <nz-form-explain *ngIf="validateForm.get('firstTypeId').dirty && validateForm.get('firstTypeId').errors">请选择一级类型</nz-form-explain>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item *ngIf="validateForm.value.firstTypeId">
+      <nz-form-label [nzSpan]="7" nzFor="secondTypeId">选择二级类型</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <nz-select  name="secondTypeId" nzAllowClear formControlName="secondTypeId" nzPlaceHolder="请选择二级类型">
+          <nz-option *ngFor="let item of childrenList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
+        </nz-select>
       </nz-form-control>
     </nz-form-item>
   </form>

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

-import { Component, OnInit } from '@angular/core';
-import {UploadFile} from 'ng-zorro-antd';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {NzMessageService, UploadFile} from 'ng-zorro-antd';
 import {TopologyService} from '../../topology.service';
-import {FormGroup} from '@angular/forms';
+import {FormBuilder, FormGroup, Validator, Validators} from '@angular/forms';
+import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'smart-icon',
@@ -9,47 +10,104 @@ import {FormGroup} from '@angular/forms';
   styles: []
 })
 export class IconComponent implements OnInit {
+    @Output() done = new EventEmitter<any>();
 
     isVisible = false;
     fileList: UploadFile[] = [];
     validateForm:FormGroup;
     title = "添加图标";
-    data = {
-        iconType:"",
-        defaultIcon:"0",
-        firstTypeId:"",
-        secondTypeId:"",
-        name:"",
-    }
-  constructor(private topologySer:TopologyService) { }
+    options:any;
+    childrenList = [];
+  constructor(private topologySer:TopologyService,private message:NzMessageService,
+              private fb:FormBuilder) { }
+
+    values;
 
-  ngOnInit() {
+    ngOnInit() {
+        this.initForm();
         this.getList();
   }
 
+  initForm(){
+        this.validateForm = this.fb.group({
+            firstTypeId:[null,[Validators.required]] ,
+            secondTypeId:[null],
+            iconType:['0'],
+            defaultIcon:["0"],
+            name:[""],
+        });
+      this.fileList = [];
+  }
+
     getList(){
         this.topologySer.findTreeWithWeb().subscribe(
             (res)=>{
-
+                if(res.errCode == 10000){
+                    this.options = res.data;
+                    console.log(this.options);
+                }else{
+                    this.message.error(res.errMSg);
+                }
             }
         )
     }
 
-    handleUpload(): void {
+    beforeUpload = (file: UploadFile): boolean => {
+        const isLt2M = file.size / 1024  < 300;
+        if (!isLt2M) {
+            this.message.error('图标必须小于300kb!');
+        }else{
+            this.fileList.push(file);
+        }
+        return false;
+    };
+
+    showModal(){
+        this.isVisible = true;
+    }
+
+    handleOk(){
+        if(this.fileList.length == 0){
+            this.message.error("请选择图标");
+            return false;
+        }
+        for(let i in this.validateForm.controls){
+            this.validateForm.controls[i].markAsDirty();
+            this.validateForm.controls[i].updateValueAndValidity();
+        }
+        if(this.validateForm.invalid){
+            return false;
+        }
         const formData = new FormData();
-        // tslint:disable-next-line:no-any
         this.fileList.forEach((file: any) => {
-            formData.append('files[]', file);
+            formData.append('file', file);
         });
-        console.log(formData);
-        // You can use any AJAX library you like
-        // const req = new HttpRequest('POST', 'https://jsonplaceholder.typicode.com/posts/', formData, {
-        //     // reportProgress: true
-        // });
+        formData.append('iconType',this.validateForm.value.iconType);
+        formData.append('defaultIcon',this.validateForm.value.defaultIcon);
+        formData.append('firstTypeId',this.validateForm.value.firstTypeId);
+        formData.append('secondTypeId',this.validateForm.value.secondTypeId);
+        formData.append('name',this.validateForm.value.name);
+        console.log(this.validateForm.value)
+        this.topologySer.iconUpload(formData).subscribe(
+            (res)=>{
+                if(res.errCode == 10000){
+                    this.message.success("添加成功");
+                    this.isVisible = false;
+                    this.done.emit();
+                }else{
+                    this.message.error(res.errMsg);
+                }
+            }
+        )
     }
 
-    handleOk(){
-        this.isVisible = false;
+    onChanges(e){
+        this.childrenList = [];
+        this.options.forEach(res=>{
+            if(res.id == e){
+                this.childrenList = res.childs;
+            }
+        })
     }
 
     handleCancel(){

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

@@ -28,7 +28,7 @@
     </nz-select>
   </div>
   <div nz-col nzSpan="12" class="text-right">
-    <button nz-button nzType="default"><i class="anticon anticon-plus"></i>添加图标</button>
+    <button nz-button (click)="addIcon()" nzType="default"><i class="anticon anticon-plus"></i>添加图标</button>
   </div>
 </div>
 <nz-table #nzTable [nzData]="iconList">
@@ -37,13 +37,23 @@
     <th>一级类型</th>
     <th>默认图标</th>
     <th>所有图标</th>
+    <th>操作</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let data of iconList">
     <td>{{data.firstTypeName}}</td>
     <td>{{data.defaultIcon}}</td>
-    <td>{{data.url}}</td>
+    <td>
+      <img style="width: 40px;" [src]="imgUrl + data.url">
+    </td>
+    <td class="handle">
+      <span (click)="deleteIcon(data)">删除</span>
+      <ng-container *ngIf="data.defaultIcon == 0">
+        <span (click)="setDefault()">设为默认</span>
+      </ng-container>
+    </td>
   </tr>
   </tbody>
 </nz-table>
+<smart-icon #smartIcon (done)="getList()"></smart-icon>

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

-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {TopologyService} from '../topology.service';
-import {NzMessageService} from 'ng-zorro-antd';
+import {NzMessageService, NzModalService, NzMode} from 'ng-zorro-antd';
+import {IconComponent} from '../model/icon/icon.component';
+import {imgUrl} from '../../app.constants';
 
 @Component({
     selector: 'smart-topology-img',
@@ -8,9 +10,12 @@ import {NzMessageService} from 'ng-zorro-antd';
     styles: []
 })
 export class TopologyImgComponent implements OnInit {
+    @ViewChild('smartIcon') smartIcon:IconComponent;
 
+    imgUrl = imgUrl;
     iconList;
-    constructor(private topologySer: TopologyService,private message:NzMessageService) {
+    constructor(private topologySer: TopologyService,private message:NzMessageService,
+                private modalSer:NzModalService) {
     }
 
     ngOnInit() {
@@ -29,4 +34,62 @@ export class TopologyImgComponent implements OnInit {
             }
         );
     }
+
+    addIcon(){
+        this.smartIcon.showModal();
+    }
+
+    //删除图片
+    deleteIcon(item){
+        this.modalSer.confirm({
+                nzTitle: '删除',
+                nzContent: '<b style="color: red;">确认删除该图标吗？</b>',
+                nzOkText: '确定',
+                nzOkType: 'danger',
+                nzOnOk: () => {
+                    const arr = {
+                        ids: []
+                    };
+                    arr.ids.push(item.id);
+                    this.topologySer.iconDelete(arr).subscribe(
+                        (res) => {
+                            if (res.errCode == 10000) {
+                                this.message.success('删除成功');
+                                this.getList();
+                            } else {
+                                this.message.error(res.errMsg);
+                            }
+                        }
+                    );
+                },
+                nzCancelText: '取消',
+                nzOnCancel: () => console.log('Cancel')
+            }
+        );
+    }
+
+    //设为默认
+    setDefault(item){
+        this.modalSer.confirm({
+                nzTitle: '删除',
+                nzContent: '<b style="color: red;">确认将该图标设为默认图标吗？</b>',
+                nzOkText: '确定',
+                nzOkType: 'danger',
+                nzOnOk: () => {
+                    this.topologySer.iconDefault(item.id).subscribe(
+                        (res) => {
+                            if (res.errCode == 10000) {
+                                this.message.success('默认成功');
+                                this.getList();
+                            } else {
+                                this.message.error(res.errMsg);
+                            }
+                        }
+                    );
+                },
+                nzCancelText: '取消',
+                nzOnCancel: () => console.log('Cancel')
+            }
+        );
+    }
 }

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

@@ -50,7 +50,7 @@ export class TopologyService {
     }
 
     //设置默认图标
-    default(params): Observable<any> {
+    iconDefault(params): Observable<any> {
         return this.http.get(SERVER_API_URL + '/default/' + params);
     }