b-topology.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>
        业务监管
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        业务拓扑图
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
  <div nz-col nzSpan="8" class="text-right">
    <button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
    <smart-full-screen></smart-full-screen>
  </div>
</div>

<div nz-row class="search-form">
  <div nz-col nzSpan="12">
    <nz-select style="width: 200px;" nzPlaceHolder="选择业务" [(ngModel)]="topoId" (ngModelChange)="getDetail()">
      <ng-container *ngFor="let item of rootList">
        <nz-option [nzLabel]="item.name" [nzValue]="item.serviceid"></nz-option>
      </ng-container>
    </nz-select>
  </div>
  <div nz-col nzSpan="12" class="text-right">
    <button nz-button (click)="changeType()" nzType="default"><i class="anticon anticon-plus-circle-o"></i>添加物理线</button>
    <button nz-button (click)="saveTopo()" nzType="default"><i class="anticon anticon-close-circle-o"></i>保存布局</button>
  </div>
</div>

<div nz-row class="layui-layout layui-layout-admin header-bar">
  <div nz-col nzSpan="12" class="layui-header ">
    <ng-container *ngIf="editType == '只读模式'">
      <nz-select style="width: 200px;" nzPlaceHolder="选择背景色" [(ngModel)]="backgroundColor" (ngModelChange)="changeColor()">
        <nz-option nzLabel="深蓝" nzValue="#3d76ab"></nz-option>
        <nz-option nzLabel="白色" nzValue="#ffffff"></nz-option>
        <nz-option nzLabel="淡绿" nzValue="#cadf91"></nz-option>
        <nz-option nzLabel="棕色" nzValue="#cbb492"></nz-option>
        <nz-option nzLabel="浅灰" nzValue="#c3c7c9"></nz-option>
      </nz-select>
    </ng-container>
    <ng-container *ngIf="editType == '编辑模式'">
      <span onClick="editor.utils.deleteSelectedNodes()">移除</span>
      <nz-select style="width: 200px;" nzPlaceHolder="选择线条" (ngModelChange)="changeLine($event)">
        <nz-option nzLabel="直线" nzValue="1"></nz-option>
        <nz-option nzLabel="折线(横向)" nzValue="2"></nz-option>
        <nz-option nzLabel="折线(纵向)" nzValue="3"></nz-option>
        <nz-option nzLabel="二次折线(横向)" nzValue="4"></nz-option>
        <nz-option nzLabel="二次折线(纵向)" nzValue="5"></nz-option>
      </nz-select>
    </ng-container>
  </div>
</div>
<div class="topo-container">
  <div class="layui-row">
    <div class="layui-col-md12">
      <div #topologyBody id="topology-body" class="topology-context">
        <canvas class="topology-context" id="topology-canvas" width="1190" height="520" #topologyCanvas>
          您的浏览器不支持HTML5!
        </canvas>
        <div class="lineList">
          {{editType}}
        </div>
        <div class="loading">
          <nz-spin nzTip='获取拓扑图...' [nzSpinning]="isLoading">
          </nz-spin>
        </div>
      </div>
    </div>
  </div>
</div>