ne-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 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>
</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="#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 (click)="addDevice()">添加设备</span>
            <!--<span (click)="addCheck()">添加监测点</span>-->
            <!--<span (click)="showAddImg()">添加图片</span>-->
            <span onClick="editor.utils.deleteSelectedNodes()">移除</span>
            <nz-select style="width: 200px;" nzPlaceHolder="选择线条" [(ngModel)]="lineType" (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 nz-col nzSpan="12" class="layui-nav layui-layout-right">
        <ng-container *ngIf="editType == '编辑模式'">
            <span aria-hidden="true" title="保存" (click)="update()">保存</span>
            <span aria-hidden="true" title="清空" onClick="editor.utils.clearTopology()">清空</span>
        </ng-container>
        <span aria-hidden="true" title="放大" onClick="editor.utils.scalingBig()">放大</span>
        <span aria-hidden="true" title="缩小" onClick="editor.utils.scalingSmall()">缩小</span>
        <span aria-hidden="true" title="全屏查看" onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">全屏查看</span>
        <span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
        <ng-container *ngIf="editType == '只读模式'">
            <span aria-hidden="true" title="编辑" (click)="changeEdit('编辑模式')">切换编辑模式</span>
        </ng-container>
        <ng-container *ngIf="editType == '编辑模式'">
            <span aria-hidden="true" title="只读" (click)="changeEdit('只读模式')">切换只读模式</span>
        </ng-container>
    </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" width="1190" height="520" #topologyCanvas>
                    您的浏览器不支持HTML5!
                </canvas>
                <div class="lineList">
                    {{editType}}
                </div>
                <div class="loading">
                    <nz-spin nzTip='获取拓扑图...' [nzSpinning]="isLoading">
                    </nz-spin>
                </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>


<!--添加图片-->
<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-radio-group #smartSelectRadioGroup (done)="setImg($event)"></smart-select-radio-group>