90.relation-graph拓扑图手工设定坐标、更换节点图片、点击弹出菜单并设置连线变粗添加文字

1.首先引入RelationGraph组件并在template内使用

import RelationGraph from 'relation-graph';
components: {
   RelationGraph
},

<div ref="myPage" style="height:99%" @click="isShowNodeMenuPanel = false">
            <RelationGraph ref="seeksRelationGraph" class="tuopuZeros" :options="graphOptions">
                <div slot="node" slot-scope="{node}">
                    <div style="height:56px;line-height: 56px;border-radius: 50%;cursor: pointer;" class="newDiv"
                        @click="showNodeMenus(node, $event)" @contextmenu.prevent.stop="showNodeMenus(node, $event)">
                        <img v-if="node.data.type=='service'" src="../../assets/img/tuopu/服务.png" alt="">
                        <img v-else-if="node.data.type=='external'" src="../../assets/img/tuopu/云.png" alt="">
                        <img v-else-if="node.data.type=='db'" src="../../assets/img/tuopu/db.png" alt="">
                        <img v-else-if="node.data.type=='messaging'" src="../../assets/img/tuopu/messaging.png" alt="">
                    </div>
                    <div class="newBottomName">
                        {{ node.text }}
                    </div>
                </div>
            </RelationGraph>
        </div>

<div v-show="isShowNodeMenuPanel" :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }" class="checkBox">
            <div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">对此节点进行操作：</div>
            <div class="c-node-menu-item" @click.stop="doAction('连线高亮')">连线高亮</div>
            <div v-show="isShowGailan" class="c-node-menu-item" @click.stop="doAction('跳转首页')">跳转首页</div>
        </div>

2.在data内初始化所用到的数据

data(){
    return{
        isShowNodeMenuPanel: false,
        nodeMenuPanelPosition: { x: 0, y: 0 },
        currentNode:{},
        isShowGailan:false,
        graphOptions: { 
                debug: true, 
                'allowShowMiniToolBar':false,
                'allowSwitchLineShape': true,
                'allowSwitchJunctionPoint': true,
                'moveToCenterWhenRefresh':true,
                'zoomToFitWhenRefresh':true,
                'layouts': [ 
                    { 
                        'label': '手工', 
                        'layoutName': 'fixed', 
                        'layoutClassName': 'seeks-layout-fixed',
                        'defaultJunctionPoint': 'border', 
                        'defaultNodeShape': 0, 
                        'defaultLineShape': 1, 
                        // 'distance_coefficient':1,
                    } 
                ], 
                'defaultNodeShape': 1, 
                // 'defaultNodeWidth': '60', 
                'defaultLineShape': 2, 
                'defaultNodeBorderWidth': 0, 
                'defaultLineColor': '#CDCDCD', 
                'defaultNodeColor': 'rgba(255, 255, 255, 1)',
       },
        
    }
}

3.根据后端接口返回数据遍历初始化拓扑图（根据类型设定坐标）

// 初始化拓扑图
showSeeksGraph(newData) { 
    if(JSON.stringify(newData) !== "{}"){
        this.$refs.seeksRelationGraph.graphSetting.defaultLineShape = 1;
        // 手工设置节点的坐标
        const _center = {
            x: 0,
            y: 0
        };
        let arr1 = []
        let arr2 = []
        newData.nodes.forEach((item, index) => {
            if(item.data.type == 'service'){
                arr1.push(item)
            }else if(item.data.type == 'db'){
                arr2.push(item)
            }
        })
        newData.nodes = []
        arr1.map((item1,index1) =>{
            item1.x = _center.x + 300
            item1.y = _center.y + index1 * 80 + 30
            newData.nodes.push(item1)
        })
        arr2.map((item2,index2) =>{
            item2.x = _center.x + 900
            item2.y = _center.y + index2 * 100  + 50
            newData.nodes.push(item2)
        })
        newData.lines.forEach((item, index) => {
            item.useTextPath = true
            if(this.theme1){
                item.color = "#3F3F56"
            }else{
                item.color = "rgba(220,220,220, 1)"
            }
        })
        var graphData = {
            rootId: newData.rootId,
            nodes: newData.nodes,
            lines: newData.lines
        };
        this.$refs.seeksRelationGraph.setJsonData(graphData, (seeksRGGraph) => { 
            // 这些写上当图谱初始化完成后需要执行的代码 
        }) 
    }
},

4.点击或右击节点出现操作菜单

// 点击或右击出现操作菜单
showNodeMenus(nodeObject, $event) {
    this.currentNode = nodeObject;
    const _base_position = this.$refs.myPage.getBoundingClientRect();
    this.nodeMenuPanelPosition.x = $event.clientX + 50 - _base_position.x;
    this.nodeMenuPanelPosition.y = $event.clientY + 150 - _base_position.y;
    if(nodeObject.data.type == 'service'){
        this.isShowGailan = true
    }else{
        this.isShowGailan = false
    }
    this.isShowNodeMenuPanel = true;
},

5.点击菜单中的连线高亮或跳转首页进行相应操作

// 点击高亮分析或概览详情
doAction(actionName) {
    let that = this
    if(actionName == '连线高亮'){
        this.$nextTick(() =>{
            const allLinks = that.$refs.seeksRelationGraph.getLines();
            allLinks.forEach((link,index) => { // 还原所有样式
                link.relations.forEach(line => {
                    if (line.data.orignColor) {
                        line.color = line.data.orignColor;
                    }
                    if (line.data.orignFontColor) {
                        line.fontColor = line.data.orignColor;
                    }
                    if (line.data.orignLineWidth) {
                        line.lineWidth = line.data.orignLineWidth;
                    }
                    line.text = ''
                    line.reverseText = index
                });
            });
            let newLine = document.getElementsByClassName('c-rg-link-text')
            Array.from(newLine).map(item =>{
                item.outerHTML = "<text x='-100' y='0' class='c-rg-link-text' style='fill: rgb(77, 77, 77);'> </text>"
            })
            // 让与{that.currentNode}相关的所有连线高亮、添加文字
            allLinks.filter(link => (link.fromNode === that.currentNode || link.toNode === that.currentNode)).forEach(link=> {
                link.relations.forEach(line => {
                    line.data.orignColor = line.color;
                    line.data.orignFontColor = line.fontColor || line.color;
                    line.data.orignLineWidth = line.lineWidth || 1;
                    line.fontColor = '#4D4D4D';
                    line.lineWidth = 3;
                    line.text = '平均耗时：' + line.data.avg_res + 'MS; ' + '吞吐量：' + line.data.throught + '; ' + '错误数：' + line.data.error_count
                    if(this.theme1){
                        newLine[line.reverseText].outerHTML = "<text x='-100' y='0' class='c-rg-link-text' style='fill: #fff;'>" + line.text + "</text>"
                    }else{
                        newLine[line.reverseText].outerHTML = "<text x='-100' y='0' class='c-rg-link-text' style='fill: rgb(77, 77, 77);'>" + line.text + "</text>"
                    }
                });
                // this.handleClickNode(that.currentNode)
            });
        })
    }else{
        setCookie('listTimeStart',that.newstime.start_time,1)
        setCookie('listTimeEnd',that.newstime.end_time,1)
        setCookie('listServerName',that.currentNode.text,1)
        this.$router.push({name:'server_list_request',params:{}})
    }
    this.isShowNodeMenuPanel = false;
},

6.总结：

根据官网示例以及项目需求，调整本拓扑图所需样式、数据。记录一下，防止下次忘记。