Newer
Older
<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>
</div>
<div nz-col nzSpan="8" class="text-right">
<button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<nz-select style="width: 200px;" nzPlaceHolder="选择拓扑图" [(ngModel)]="topoId" (ngModelChange)="getDetail($event)">
<ng-container *ngFor="let item of dataSet">
<nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
</ng-container>
</nz-select>
</div>
<div nz-col nzSpan="12" class="text-right">
<button nz-button (click)="addTopo()" nzType="default"><i class="anticon anticon-plus-circle-o"></i>添加</button>
<button nz-button (click)="editTopo()" nzType="default"><i class="anticon anticon-form"></i>编辑</button>
<button nz-button (click)="deleteTopo()" nzType="default"><i class="anticon anticon-close-circle-o"></i>删除</button>
<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="编辑" onClick="editor.utils.editTopology()">编辑</span>
<span aria-hidden="true" title="只读" onClick="editor.utils.normalTopology()">只读</span>
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<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="lineList">
<p onclick="editor.lineType='line'">连线</p>
<p onclick="editor.lineType='foldLine';editor.config.linkDirection='horizontal';">折线(横向)</p>
<p onclick="editor.lineType='foldLine';editor.config.linkDirection='Vertical';">折线(纵向)</p>
<p onclick="editor.lineType='flexLine';editor.config.linkDirection='horizontal';">二次折线(横向)</p>
<p onclick="editor.lineType='flexLine';editor.config.linkDirection='Vertical';">二次折线(纵向)</p>
</div>
<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-line #smartLine></smart-line>
<!--设备配置-->
<smart-node #smartNode></smart-node>
<!--添加拓扑图-->
<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>