eta_front/src/views/chartFrame_manage/components/frameContainer.vue

<template>
    <!-- 沙盘图区域 -->
    <div class="frame-container-wrap">
        <!-- 工具栏 -->
        <FrameToolBar v-if="$route.path==='/editframe'&&graph"
            :is-select-edge="isSelectEdge"
            :is-select-node="isSelectNode"
            :canUndo="canUndo"
            :canRedo="canRedo"
            :graph="graph"
            :current-cell="currentCell||baseNode"
        ></FrameToolBar>
        <div class="frame-container" id="frameContainer"></div>
        <!-- 缩略图 -->
        <div class="minimap" id="frameMinimap"></div>
        <!-- 右键菜单 -->
        <div id="context-menu-wrapper" @mouseleave="hideContextMenu">
            <el-dropdown-menu size="medium">
                <el-dropdown-item v-for="menu in contextMenu" :key="menu.key" @click.native="handleContext(menu.key)">
                    <i :class="menu.icon" v-if="menu.icon"/> 
                    {{menu.label}}
                </el-dropdown-item>
            </el-dropdown-menu>
        </div>
    </div>
</template>

<script>
import { ElDropdownMenu } from 'element-ui';
import { myGraph } from '../common/graph';
import { baseNode } from '../common/config';
import FrameToolBar from './frameToolBar.vue';
export default {
    components:{ElDropdownMenu,FrameToolBar},
    data() {
        this.baseNode = baseNode
        return {
            graph:null,
            contextMenu:[{
                label: '编辑',
                key: 'edit',
                icon: 'el-icon-edit'
            },
            {
                label: '删除',
                key: 'del',
                icon: 'el-icon-delete'
            }],//右键菜单
            isSelectEdge:false,
            isSelectNode:false,
            currentCell:null,
            canRedo:false,
            canUndo:false
        };
    },
    watch:{
        cleanSelect(newVal){
            if(newVal){
                this.currentCell = null
            }
        }
    },
    methods: {
        init(){
            //如果需要在内部调用vue实例,则初始化时就将this传入
            this.graph = new myGraph('frameContainer',this);
            //mock
            this.graph.addNode({
                ...baseNode,
                ...{
                    data:{id:653,userId:218},
                    label:'text'
                }})
            this.graph.addNode({
                ...baseNode,
                ...{
                    x:200,
                    y:200,
                    data:{id:652,userId:218},
                    label:'text2'
            }})
            this.graph.addNode({
                ...baseNode,
                ...{
                    x:400,
                    y:200,
                    data:{id:370,userId:204},
                    label:'别人的框架测试'
            }})
            //如果有内容
            this.graph.scrollToContent({ animation: { duration: 600 }})
            //如果是非编辑页,加载完成画布内容后冻结画布
            !window.location.pathname.startsWith('/editframe')&&this.graph.freeze()
            //如果是编辑页，加载完成后清楚历史数据
            window.location.pathname.startsWith('/editframe')&&this.graph.cleanHistory()
        },
        editNode(node){
            //获取视口范围
            const position = this.graph.getContentArea()
            const nodes = this.graph.getNodes()
            const currentNode = nodes.find(item=>item.id===node.nodeId)
            if(currentNode){
                currentNode.data.id=node.nodeLink
                currentNode.label=node.nodeName
            }else{
                //在视口范围内添加节点
                this.graph.addNode({
                    ...baseNode,
                    ...{
                    x:position.x+position.width/2,
                    y:position.y+position.height/2,
                    width:120,
                    height:50,
                    data:{
                        id:node.nodeLink.id,//存储节点对应的myETA分类id
                        userId:node.nodeLink.userId
                    },
                    label:node.nodeName||''
                }})
            }
        },
        handleContext(key){
            const select_cell = this.graph.getSelectedCells()
            if(!select_cell.length) return 

            if(key==='edit'){
                const {id} = select_cell[0]
                const node = this.graph.getNodes().find(item=>item.id===id)
                this.$emit('editNode',{
                        nodeId:node.id,
                        nodeName:node.label,
                        nodeLink:{id:node.data.id,userId:node.data.userId}
                    })
            }
            if(key==='del'){
                this.graph.removeCells(select_cell)
                this.hideContextMenu()
            }
            //清除选区
            this.graph.cleanSelection()
        },
        deleteNode(){},
        hideContextMenu(){
            const dom = $('#context-menu-wrapper')[0];
            dom.style.left = '-9999px';
            dom.style.top = '-9999px';
        },
    },
    mounted(){
        this.init()
    }
};
</script>

<style lang="scss">
.frame-container-wrap {
    width:100%;
    height:100%;
    display: flex;
    overflow: hidden;
    position: relative;
    padding-top: 24px;
    .minimap {
        position: absolute;
        right: 6px;
        bottom: 6px;
        box-sizing: border-box;

        .x6-widget-minimap-viewport {
            border-color: red;

            .x6-widget-minimap-viewport-zoom {
                border-color: red;
            }
        }

        .x6-widget-minimap {
            width: auto !important;
            height: auto !important;
        }
    }
    #context-menu-wrapper{
        position: fixed;
        z-index: 99;
        top: -9999px;
        left: -9999px;
        background: #fff;
        padding: 10px 0;
        box-shadow: 0 1px 4px #999;

    }
    #frameContainer{
        flex: 1;
    }
    .x6-graph-scroller {
        flex: 1;
    }

    .x6-port-body {
        display: none;
    }
}
</style>
<style scoped lang="scss">

</style>