基于vue-super-flow开发的流程图页面

效果如下

<template>
  <div>
    <div class="super-flow-demo1">
      <div class="node-container">
        <div class="node-Process">
          <div class="container-title">流程仓库</div>
          <span
                  class="node-item"
                  v-for="item in processItemList"
                  @mousedown="evt => nodeItemMouseDown(evt, item.value)">
            {
   {
   item.label}}
          </span>
        </div>

        <div class="node-models">
          <div class="container-title">人员仓库</div>
          <span
                  class="node-item"
                  v-for="item in peopleItemList"
                  @mousedown="evt => nodeItemMouseDown(evt, item.value)">
            {
   {
   item.label}}
          </span>
        </div>


        <div class="node-models">
          <div class="container-title">模型仓库</div>
          <span
                  class="node-item"
                  v-for="item in nodeItemList"
                  @mousedown="evt => nodeItemMouseDown(evt, item.value)">
            {
   {
   item.label}}
          </span>
        </div>

      </div>
      <div class="flow-container" ref="flowContainer">
        <super-flow
                ref="superFlow"
                :graph-menu="graphMenu"
                :node-menu="nodeMenu"
                @toJSON="toJSON"
                :link-menu="linkMenu"
                :link-base-style="linkBaseStyle"
                :link-style="linkStyle"
                :link-desc="linkDesc">
          <template v-slot:node="{meta}">
            <div
                    @mouseup="nodeMouseUp"
                    @click="nodeClick"
                    :class="meta.type? `flow-node-${meta.type}`: ''"
                    class="flow-node ellipsis">
              <div class="node-content">{
   {
   meta.name}}</div>
            </div>
          </template>
        </super-flow>
        <el-button class="action-button"
                type="primary" @click="actionClick" round>点击开始执行</el-button>
      </div>
    </div>

    <el-dialog
            :title="drawerConf.title"
            :visible.sync="drawerConf.visible"
            :close-on-click-modal="false"
            width="500px">
      <el-form
              @keyup.native.enter="settingSubmit"
              @submit.native.prevent
              v-show="drawerConf.type === drawerType.node"
              ref="nodeSetting"
              label-width="90px"
              :model="nodeSetting">
        <el-form-item
                label="节点名称"
                prop="name">
          <el-input
                  v-model="nodeSetting.name"
                  placeholder="请输入节点名称"
                  :disabled="nodeSetting.type === 'model'? true: false"
                  maxlength="30">
          </el-input>
        </el-form-item>
        <el-form-item
                v-if="nodeSetting.cameraId !== null"
                label="选择摄像头"
                prop="cameraId">
          <el-select v-model="nodeSetting.cameraId" @change="cameraChange" filterable placeholder="请选择摄像头">
            <el-option
                    v-for="(item, index) in cameraList"
                    :key="index"
                    :label="item.name"
                    :value="index">
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item-->
<!--                label="节点描述"-->
<!--                prop="desc">-->
<!--          <el-input-->
<!--                  v-model="nodeSetting.desc"-->
<!--                  placeholder="请输入节点描述"-->
<!--                  maxlength="30">-->
<!--          </el-input>-->
<!--        </el-form-item>-->
      </el-form>
      <el-form
              @keyup.native.enter="settingSubmit"
              @submit.native.prevent
              v-show="drawerConf.type === drawerType.link"
              ref="linkSetting"
              :model="linkSetting">
        <el-form-item
                label="连线描述"
                prop="desc">
          <el-input
                  v-model="linkSetting.desc"
                  placeholder="请输入连线描述">
          </el-input>
        </el-form-item>
      </el-form>
      <span
              slot="footer"
              class="dialog-footer">
        <el-button @click="drawerConf.cancel">
          取 消
        </el-button>
        <el-button type="primary" @click="settingSubmit">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  const drawerType = {
   
    node: 0,
    link: 1
  }

  export default {
   
    data () {
   
      return {
   
        drawerType,
        drawerConf: {
   
          title: '',
          visible: false,
          type: null,
          info: null,
          open