update

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

+<p>
+  device works!
+</p>

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'smart-device',
+  templateUrl: './device.component.html',
+  styles: []
+})
+export class DeviceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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>
+    <nz-form-item>
+      <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"
+        >
+          <button nz-button>
+            <i class="anticon anticon-upload"></i><span>Click to Upload</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-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-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>

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

+import { Component, OnInit } from '@angular/core';
+import {UploadFile} from 'ng-zorro-antd';
+import {TopologyService} from '../../topology.service';
+
+@Component({
+  selector: 'smart-icon',
+  templateUrl: './icon.component.html',
+  styles: []
+})
+export class IconComponent implements OnInit {
+
+    fileList: UploadFile[] = [];
+    title = "添加图标";
+    data = {
+        iconType:"",
+        defaultIcon:"0",
+        firstTypeId:"",
+        secondTypeId:"",
+        name:"",
+    }
+  constructor(private topologySer:TopologyService) { }
+
+  ngOnInit() {
+        this.getList();
+  }
+
+    getList(){
+        this.topologySer.findTreeWithWeb().subscribe(
+            (res)=>{
+
+            }
+        )
+    }
+
+    handleUpload(): void {
+        const formData = new FormData();
+        // tslint:disable-next-line:no-any
+        this.fileList.forEach((file: any) => {
+            formData.append('files[]', 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
+        // });
+    }
+
+}

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

+<div nz-row class="breadcrumbs">
+  <div nz-col nzSpan="16">
+    <nz-breadcrumb class="padding-8-0">
+      <nz-breadcrumb-item>
+        首页
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        <a>网络拓扑</a>
+      </nz-breadcrumb-item>
+      <nz-breadcrumb-item>
+        拓扑图标管理
+      </nz-breadcrumb-item>
+    </nz-breadcrumb>
+  </div>
+  <div nz-col nzSpan="8" class="text-right">
+    <button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
+    <button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
+    <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
+  </div>
+</div>
+
+<div nz-row class="search-form">
+  <div nz-col nzSpan="12">
+    <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择类型" (ngModelChange)="getList()">
+      <!--<ng-container *ngFor="let item of groupList;let i = index;">-->
+        <!--<nz-option nzLabel="选择类型"></nz-option>-->
+      <!--</ng-container>-->
+    </nz-select>
+  </div>
+  <div nz-col nzSpan="12" class="text-right">
+    <button nz-button nzType="default" (click)="showGroupModal()"><i class="anticon anticon-plus"></i>添加图标</button>
+  </div>
+</div>
+<nz-table #nzTable [nzData]="iconList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)">
+  <thead>
+  <tr>
+    <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>
+  </tr>
+  </tbody>
+</nz-table>

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

+import {Component, OnInit} from '@angular/core';
+import {TopologyService} from '../topology.service';
+import {NzMessageService} from 'ng-zorro-antd';
+
+@Component({
+    selector: 'smart-topology-img',
+    templateUrl: './topology-img.component.html',
+    styles: []
+})
+export class TopologyImgComponent implements OnInit {
+
+    iconList;
+    constructor(private topologySer: TopologyService,private message:NzMessageService) {
+    }
+
+    ngOnInit() {
+        this.getList();
+    }
+
+    getList() {
+        const data = {};
+        this.topologySer.iconFindAll(data).subscribe(
+            (res) => {
+                if(res.errCode == 10000){
+                    this.iconList = res.data;
+                }else{
+                    this.message.create('error',`${res.errMsg}`);
+                }
+            }
+        );
+    }
+}