ne-topology.component.ts

import {AfterViewChecked, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../topology.service';
import {NzMessageService, NzModalService, UploadFile} from 'ng-zorro-antd';
import {DomSanitizer} from '@angular/platform-browser';
import * as $ from 'jquery';
import {TopologyComponent} from '../model/topology/topology.component';
import {CheckComponent} from '../model/check/check.component';
import {DeviceComponent} from '../model/device/device.component';

declare let editor: any;
declare var layui: any;

@Component({
    selector: 'smart-ne-topology',
    templateUrl: './ne-topology.component.html',
    styles: [
            `
            .layui-side-scroll {
                width: initial;
            }

            .layui-layout-right {
                color: #666666;
            }

            .layui-header span {
                margin-right: 15px;
                cursor: pointer;
            }
            .tips{
                position: absolute;
                top: 10px;
                left: 20px;
                color: #ca0814;
                font-size: 20px;
            }
            .checkList{
                position: absolute;
                top: 10px;
                right: 20px;
                color: #666666;
                font-size: 20px;
            }
            .layui-form-label{
                width: 110px;
            }
            .minus{
                vertical-align: middle;
                color: red;
                font-size: 15px;
                margin-left: 12px;
                cursor: pointer;
            }
        `
    ]
})
export class NeTopologyComponent implements OnInit, AfterViewInit {
    @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
    @ViewChild('smartTopology') smartTopology:TopologyComponent;
    @ViewChild('smartCheck') smartCheck:CheckComponent;
    @ViewChild('smartDevice') smartDevice:DeviceComponent;

    dataSet;
    isVisible = false;
    image;

    topoId;
    name;
    refreshRete;

    checkJson = [];
    fileList: UploadFile[] = [];

    constructor(private topologySer: TopologyService, private message: NzMessageService,
                private sanitizer: DomSanitizer, private modalSer: NzModalService) {
    }

    ngOnInit() {
        this.getList();
    }

    ngAfterViewInit(){
        layui.use('element', () => {
            let element = layui.element;
            element.init();
        });
        this.loadCanvas();
    }

    //新增拓扑图
    addTopo() {
        this.smartTopology.showAddMOodal();
    }

    //编辑拓扑图
    editTopo() {
        if(!this.topoId){
            this.message.warning("请选择需要编辑的拓扑图");
            return false;
        }
        this.smartTopology.showEditModal(this.topoId);
    }

    //添加监测点
    addCheck(){
        if(!this.topoId){
            this.message.warning("请选择需要编辑的拓扑图");
            return false;
        }
        this.smartCheck.showAddModal();
    }

    //添加设备
    addDevice(){
        if(!this.topoId){
            this.message.warning("请选择需要编辑的拓扑图");
            return false;
        }
        this.smartDevice.showAddModal();
    }

    //获取设备图片
    setImg(e){
        editor.utils.addNode(e[0].icon,'图片');
    }

    //获取列表
    getList() {
        this.topologySer.findAll().subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.dataSet = res.data;
                } else {
                    this.message.create('error',res.errMsg);
                }
            }
        );
    }

    //编辑
    update() {
        const json = {
            topology:editor.saveTopology(),
            check:this.checkJson
        };
        let data = {
            id: this.topoId,
            json: JSON.stringify(json),
            refreshRete:this.refreshRete,
            name:this.name
        };
        this.topologySer.update(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.message.success('编辑成功');
                    editor.utils.editTopology();
                    this.getList();
                } else {
                    this.message.error(res.errMsg);
                }
            }
        );
    }

    //查询单个
    getDetail(id) {
        this.topologySer.findItem(id).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    if(res.data.json.length > 0){
                        let json = JSON.parse(res.data.json);
                        editor.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
                        this.checkJson = json.check;
                    }
                    this.name = res.data.name;
                    this.refreshRete = res.data.refreshRete;
                    this.topoId = res.data.id;
                    editor.utils.editTopology();
                    this.findItemStatus();
                }
            }
        );
    }

    //查询监控点状态
    findItemStatus(){
        const data = {
            httpTestIds:this.checkJson.map(e=>{
                return e.id;
            })
        };
        this.topologySer.findElementStatus(data).subscribe(
            (res)=>{

            }
        )
    }

    //删除拓扑图
    deleteTopo() {
        if(!this.topoId){
            this.message.info("请选择需要删除的拓扑图")
            return false;
        }
        this.modalSer.confirm({
                nzTitle: '删除',
                nzContent: '<b style="color: red;">确认删除该拓扑图吗？</b>',
                nzOkText: '确定',
                nzOkType: 'danger',
                nzOnOk: () => {
                    this.topologySer.delete(this.topoId).subscribe(
                        (res) => {
                            if (res.errCode == 10000) {
                                this.topoId = null;
                                this.message.success('删除成功');
                                this.getList();
                            } else {
                                this.message.error(res.errMsg);
                            }
                        }
                    );
                },
                nzCancelText: '取消',
                nzOnCancel: () => console.log('Cancel')
            }
        );
    }

    //设置监测点
    setCheckList(event){
        console.log(event);
        this.checkJson.push(JSON.parse(event));
    }

    //删除监测点
    deleteCheck(index){
        this.checkJson.splice(index,1);
    }

    //load
    loadCanvas() {
        // 节点树中每个节点的拖放动作定义给拓扑图编辑器
        let nodes = $('[topo-div-type=\'topo-node\']');
        let nodeLength = nodes.length;
        for (let i = 0; i < nodeLength; i++) {
            let text = $(nodes[i]).find('span').eq(0).text();
            editor.drag(nodes[i], document.getElementById('topology-canvas'), text);
        }
        editor.loadTopology('', 'img/backimg.png');
    }

    //添加图片-----start
    showAddImg(){
        if(!this.topoId){
            this.message.warning("请选择需要编辑的拓扑图");
            return false;
        }
        this.isVisible = true;
    }

    beforeUpload = (file: UploadFile): boolean => {
        const isLt2M = file.size / 1024  < 300;
        if (!isLt2M) {
            this.message.error('图标必须小于300kb!');
        }else{
            this.fileList.push(file);
        }
        return false;
    };

    handleCancel(){
        this.isVisible = false;
        this.fileList = [];
    }

    handleOk(){
        if(this.fileList.length == 0){
            this.message.warning("请选择图片");
            return false;
        }
        const formData = new FormData();
        this.fileList.forEach((file:any)=>{
            formData.append('file',file);
        })
        this.topologySer.addPic(formData).subscribe(
            (res)=>{
                if(res.errCode == 10000){
                    this.isVisible = false;
                    editor.utils.addNode(res.data,'text');
                    this.fileList = [];
                }else{
                    this.message.error("添加失败")
                }
            }
        )
    }
//    end

}