b-topology.component.ts

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {BusinessService} from '../business.service';
import {NzMessageService} from 'ng-zorro-antd';
import {ActivatedRoute, Router} from '@angular/router';

declare let editor: any;

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

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

            .layui-header span {
                margin-right: 15px;
                cursor: pointer;
            }

            .header-bar {
                line-height: 60px;
                color: #6097b7;
                padding: 0 20px;
                background-color: #ddd;
            }

            .layui-layout-right {
                text-align: right;
                color: #6097b7
            }

            .layui-layout-right span {
                margin-right: 5px;
                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;
            }

            .lineList {
                position: absolute;
                top: 5px;
                right: 20px;
                color: red;
                cursor: pointer;
            }

            .layui-form-label {
                width: 110px;
            }

            .loading {
                position: absolute;
                top: 30%;
                left: 49%;
            }

            .minus {
                vertical-align: middle;
                color: red;
                font-size: 15px;
                margin-left: 12px;
                cursor: pointer;
            }
        `
    ]
})
export class BTopologyComponent implements OnInit, AfterViewInit {
    @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
    @ViewChild('topologyBody') topologyBody: ElementRef;

    topoId;
    name;
    isLoading = false;
    rootList;

    backgroundColor;
    editType = '只读模式';

    constructor(private busineSer: BusinessService, private message: NzMessageService,
                private routerInfo: ActivatedRoute) {
        this.routerInfo.queryParams.subscribe(
            (res) => {
                if (res) {
                    this.topoId = res.topoId;
                    if(this.topoId) this.getDetail();
                }
            }
        );
    }

    ngOnInit() {
        this.getList();
        this.topologyCanvas.nativeElement.style.background = '#fff';
    }

    ngAfterViewInit() {
        const canvasWidth = this.topologyBody.nativeElement.clientWidth;
        const canvasHeight = this.topologyBody.nativeElement.clientHeight;
        let myCanvas = this.topologyCanvas.nativeElement;
        let context = myCanvas.getContext('2d');
        let ratio = this.getPixelRatio(context);
        myCanvas.style.width = canvasWidth + 'px';
        myCanvas.style.height = canvasHeight + 'px';

        myCanvas.width = myCanvas.width * ratio;
        myCanvas.height = myCanvas.height * ratio;
        context.scale(ratio, ratio);
        // context.translate(-(canvasWidth/4),-(canvasHeight/4));
        editor.loadTopology('', '', 'img/backimg.png', canvasWidth, canvasHeight);
    }

    // 获取像素比
    getPixelRatio(context) {
        const backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    }

    //选择线条类型
    changeLine(e) {
        switch (e) {
            case'1': {   //直线
                editor.lineType = 'line';
                break;
            }
            case'2': {   //折线(横向)
                editor.lineType = 'foldLine';
                editor.config.linkDirection = 'horizontal';
                break;
            }
            case'3': {  //折线(纵向)
                editor.lineType = 'foldLine';
                editor.config.linkDirection = 'vertical';
                break;
            }
            case'4': {   //二次折线(横向)
                editor.lineType = 'flexLine';
                editor.config.linkDirection = 'horizontal';
                break;
            }
            case'5': {   //二次折线(纵向)
                editor.lineType = 'flexLine';
                editor.config.linkDirection = 'vertical';
                break;
            }
        }
    }

    //改变背景色
    changeColor() {
        this.topologyCanvas.nativeElement.style.background = this.backgroundColor;
    }

    changeType() {
        editor.utils.editTopology();
        this.editType = '编辑模式';
    }

    //业务列表
    getList() {
        this.busineSer.findRoot().subscribe(
            (res) => {
                this.rootList = res.data;
            }
        );
    }

    //查找拓扑图
    getDetail() {
        this.isLoading = true;
        this.busineSer.serviceTopologyFind(this.topoId).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    if (res.data.json.length > 0) {
                        let json = JSON.parse(res.data.json);
                        if (json.topology) {
                            const topologyJson = JSON.parse(json.topology);
                            editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
                        } else {
                            this.isLoading = false;
                            editor.utils.clearTopology();
                        }
                    } else {
                        this.isLoading = false;
                        editor.utils.clearTopology();
                    }
                    this.name = res.data.name;
                }
                this.isLoading = false;
            }
        );
    }

    //保存拓扑图
    saveTopo() {
        const json = {
            topology: editor.saveTopology(),
        };
        const data = {
            id: this.topoId,
            name: this.name,
            json: JSON.stringify(json),
        };
        this.busineSer.serviceTopologySave(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.message.success('保存成功');
                }
            }
        );
    }

}