gojs 绘制UML连线图

<template>
  <div :id='boxId' class="er-box" v-loading="loadingChange" element-loading-text="拼命加载中">
    <div style="z-index: 1;" v-if="fullShow">
      <el-row :gutter="20">
        <el-col :span="10">
            <template>
              <el-select v-model="keyword"
                         filterable
                         clearable
                         :reserve-keyword="true"
                         placeholder="请选择表名"
                         style="width:100%">
                <el-option v-for="item in searchList" :key="item.enTbName" :label="item.enTbName"
                           :value="item.enTbName">
                </el-option>
              </el-select>
            </template>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" @click="getData()">搜索</el-button>
        </el-col>
        <el-col :span="12">
          <div class="header-right-box" style="float: right; margin-right: 16px;">
            <img class="full-img" src="../../../../../assets/er-images/fullscreen.png" @click="enterFullScreen"
                 v-if="fullShow">
            <!--<el-button type="primary" @click="enterFullScreen" v-if="fullShow">全屏</el-button>-->
            <!--<el-button type="primary" @click="exitFullScreen" v-if="!fullShow">退出全屏</el-button>-->
            <el-button style="margin-right: -6px" icon="el-icon-minus" @click="changeScale('reduce')"></el-button>
            <el-select v-model="myDiagramScale" placeholder="请选择" style="width: 100px"
                       @change="changeScale('change')">
              <el-option
                v-for="item in scales"
                :key="item.lable"
                :label="item.lable"
                :value="item.val">
              </el-option>
            </el-select>
            <el-button style="margin-left: -6px ;font-size: 14px" icon="el-icon-plus" @click="changeScale('add')"></el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="full-btn-box" v-if="!fullShow">
      <img src="../../../../../assets/er-images/ic_er_renew.png" @click="exitFullScreen" v-if="!fullShow"
           class="exitFullScreenBtn">
    </div>
    <div class="er-div" :id='title' style='width:100%;height:calc(100vh - 300px)!important; ' @contextmenu.prevent="showRight"></div>
    <el-dialog title="关联关系"
               :visible.sync="editRelationsDialog"
               v-if="editRelationsDialog"
               width="850px"
               :close-on-click-modal="false">
      <edit-relation :relationsData="editRelationsData" @close="closeDialog()"></edit-relation>
    </el-dialog>
    <!--点击画板右击弹出框-->
    <div :id="rightId" class="er-right-box" v-show="erRight">
      <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" v-if="erRight"
               style="z-index:99999;">
        <el-submenu index="1">
          <template slot="title">
            <div class="submenu-item">
              视图
            </div>
          </template>
          <el-menu-item index="1-1">
            <el-checkbox v-model="showItem.isType" label="显示数据类型" name="type" @change="changeData"></el-checkbox>
          </el-menu-item>
          <el-menu-item index="1-2">
            <el-checkbox v-model="showItem.isNull" label="显示为空" name="type" @change="changeData"></el-checkbox>
          </el-menu-item>
          <el-menu-item index="1-3">
            <el-checkbox v-model="showItem.isCnName" label="显示注释" name="type" @change="changeData"></el-checkbox>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <div class="submenu-item">
              属性
            </div>
          </template>
          <el-menu-item index="2-1">
            <el-checkbox v-model="showItem.isAll" label="所有" name="type" @change="changeData"></