重构 jtopo

src/main/webapp/app/jtopo/jtopo.component.html

+
+<div class="layui-layout layui-layout-admin">
+  <div class="layui-header header-bar">
+    <span (click)="addDevice()">添加设备</span>
+    <span (click)="addCheck()">添加监测点</span>
+    <span (click)="showAddImg()">添加图片</span>
+    <span onClick="editor.utils.deleteSelectedNodes()">移除</span>
+
+    <!-- 顶部工具栏 -->
+    <div class="layui-nav layui-layout-right" style="color: #6097b7" >
+            <span aria-hidden="true" title="全屏查看"
+                  onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">全屏查看</span>
+      <span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
+      <span aria-hidden="true" title="保存" (click)="update()">保存</span>
+      <span aria-hidden="true" title="清空" onClick="editor.utils.clearTopology()">清空</span>
+      <span aria-hidden="true" title="放大" onClick="editor.utils.scalingBig()">放大</span>
+      <span caria-hidden="true" title="缩小" onClick="editor.utils.scalingSmall()">缩小</span>
+    </div>
+  </div>
+  <div class="container">
+    <div class="layui-row">
+      <div class="layui-col-md12">
+        <div #topologyBody id="topology-body"  class="topology-context">
+          <!-- 鼠标悬浮显示节点信息 -->
+          <div class="node-infobox" style="display: none;">
+            <span>节点名称：<label name="node_name"></label></span>
+            <span>当前时间：<label name="current_time"></label></span>
+          </div>
+          <canvas class="topology-context" id="topology-canvas" #topologyCanvas
+                  style="height: 580px;">
+            您的浏览器不支持HTML5!
+          </canvas>
+          <div class="checkList">
+            <p *ngFor="let item of checkJson;let i = index;">
+              <span [style.fontSize]="item.fontSize +'px'">{{item.name}}</span><i (click)="deleteCheck(i)" class="minus anticon anticon-minus-circle-o"></i>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!--添加图片-->
+<nz-modal [(nzVisible)]="isDevice" nzTitle="添加图片" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+  <form  nz-form>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图片</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+       <input nz-input type="text">
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>
+
+
+<!--添加拓扑图-->
+<smart-topology #smartTopology (done)="getList()"></smart-topology>
+
+<!--添加监测点-->
+<smart-check #smartCheck (done)="setCheckList($event)"></smart-check>
+
+<!--选择资源-->
+<smart-select-group #smartSelectGroup (done)="setImg($event)"></smart-select-group>
\ No newline at end of file