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>
                <a>网络拓扑</a>
            </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($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>
</div>


<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 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>

<!-- 设备编辑 -->
<div id="node-dialog" style="display: none;padding-top: 20px">
    <form id="node-form" class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">设备名称</label>
                <div class="layui-input-block">
                    <input type="text" name="deviceName" required  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!--<div class="layui-form-item">-->
            <!--<div class="layui-inline">-->
                <!--<label class="layui-form-label">类型</label>-->
                <!--<div class="layui-input-block">-->
                    <!--<select name="city">-->
                        <!--<option value=""></option>-->
                        <!--<option *ngFor="let item of options" value="{{item.id}}">{{item.name}}</option>-->
                    <!--</select>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </form>
</div>
<!--连线编辑-->
<div id="link-dialog" style="display: none;padding-top: 20px;">
    <form id="link-form" class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="lineName" required  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">线条颜色</label>
                <div class="layui-input-block">
                    <input style="width: 100px;" type="color" name="lineColor" required  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </form>
</div>

<!--添加图片-->
<nz-modal [(nzVisible)]="isVisible" 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">
                <nz-upload
                        [nzBeforeUpload]="beforeUpload"
                        [(nzFileList)]="fileList">
                    <button nz-button>
                        <i class="anticon anticon-upload"></i><span>上传</span>
                    </button>
                </nz-upload>
            </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>