【vue+GoJs】项目中绘制、保存和回显流程图

栀妹儿

已于 2022-04-13 10:48:39 修改

阅读量3.2k

点赞数 1

文章标签： vue.js javascript gojs 流程图

于 2022-04-13 10:48:02 首次发布

本文链接：https://blog.csdn.net/weixin_38990605/article/details/124124661

版权

附上相关资料：
gojs官网
 gojs在线🌰
完成图：
在这里插入图片描述

引入

1、安装依赖

npm install gojs --save

我的项目太大了
安装了好久还总报错
but如果你在package.json查看一下版本号
只要有版本号就是安装上了！
在这里插入图片描述

2、main.js引入

import gojs from 'gojs'
Vue.prototype.go = gojs

使用

查到很多文章说需要在使用的页面中的< script >区域引入（但我不能，会报错
import go from "gojs";
const $ = go.GraphObject.make;
所以我直接把go.GraphObject.make写上了（所以以下我用的都是全称来的

我实现的是：点击按钮，弹出绘制流程图的弹窗，绘制完保存

1、父页面中将写成了组件的流程图引入：

<el-dialog title="绘制流程图" :visible.sync="drawDialog" width="80%">
  <flowDrawing @getFlowModel="getFlowModel" :chartFlowsheet="chartFlowsheet" />
</el-dialog>

import flowDrawing from 'xxx';
export default {
   
  components: {
   
    flowDrawing
  },
  data() {
   
    return {
   
    	drawDialog:false,
     	chartFlowsheet:'',
    }
  }
}

 getFlowModel(jsonModel){
   
 		//这里写得到后的操作
      console.log('this is 你转换过来的json字符串:',jsonModel);
      this.drawDialog = false;
   },

2、组件代码

<template>
  <div id="diagram-contanier">
    <div id="diagram-tool">
      <slot>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="load">加载</el-button>
      </slot>
    </div>
    <div id="diagram-wrap">
      <div id="diagram-palette" ref="palette" />
      <div id="diagram" ref="diagram" />
    </div>
  </div>
</template>

data

 diagram: null,
 palette: null,
 textStyle: {
   
   font: "bold 9pt Lato, Helvetica, Arial, sans-serif",
   stroke: "#F8F8F8",
 },
 // 默认加载的数据长这样
 chart: {
   
   class: "GraphLinksModel",
   linkFromPortIdProperty: "fromPort",
   linkToPortIdProperty: "toPort",
   nodeDataArray: [
     {
   
       category: "Start",
       text: "开始",
       key: -1,
       loc: "-107.94070280440474 -309.08209495195183",
     },
     {
    text: "流程", key: -2, loc: "-107.68839591351332 -189.421875" },
     {
   
       category: "Conditional",
       text: "逻辑判断",
       key: -3,
       loc: "-107.84415803147851 -72.68596298078074",
     },
     {
   
       category: "End",
       text: "结束",
       key: -4,
       loc: "-109.21840230579596 76.632035837822",
     },
   ],
   linkDataArray: [
     {
   
       from: -2,
       to: -3,
       fromPort: "B",
       toPort: "T",
       points: [-107.68839591351332,-169.421875,-107.68839591351332,-159.421875,-107.68839591351332,-131.05391899039037,-107.84415803147851,-131.05391899039037,-107.84415803147851,-102.68596298078074,-107.84415803147851,-92.68596298078074,],
     },
     {
   
       from: -1,
       to: -2,
       fromPort: "B",
       toPort: "T",
       points: [-107.94070280440474,-289.08209495195183,-107.94070280440474,-279.08209495195183,-107.94070280440474,-249.25198497597592,-107.68839591351332,-249.25198497597592,-107.68839591351332,-219.421875,-107.68839591351332,-209.421875,],
     },
     {
   
       from: -3,
       to: -4,
       fromPort: "B",
       toPort: "T",
       visible: true,
       points: [-107.84415803147851,-52.685962980780744