vue实现可配置流程图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现可配置流程图相关的知识,希望对你有一定的参考价值。

参考技术A 最近项目中有一个需求,实现可配置的流程图。做之前也是调研了很多现成的插件,比如:go.js,G6,JSPlumb等,但是都不是太符合业务场景,都需要看文档,进行二次开发。最后决定还是自行开发吧,现在还没有开发完,这篇文章也当做是一个记录吧

先上图,看一下现在的效果。

因为传视频要冲会员,所以没有上传视频(太穷了。。。。)
根据后端返回的数据展示流程图,并且点击加号可以新增串行或并行的构建节点,同样,可以删除对应的节点及子任务

接下来,我会说一下我实现这个效果的思路
1.我们的数据格式是JenkinsFile,可以自行百度一下

以上图为例:红色区域内为前端写死的,中间的数据是由后端返回的数据渲染出来的。所以我们要找出同样的内容作为一个div,并将它进行循环,上图中我把蓝色区域作为一个div,其中的
1.箭头和椭圆形的节点分别是icon和一个div组成的
2.利用伪类元素:before,:after写出前后面的两根线
3.通过判断下标,决定是否两个元素中间需要连线,途中黑色区域的线是通过svg来实现

以上就是当前效果的一个实现思路,后续会不断更新。

vue项目中使用bpmn-流程图预览篇

前情提要

  上文已经实现了节点操作的前进、后退、导入。导出等操作,今日来实现“流程图预览”,以及视图的放大缩小

  前提:项目安装过bpmn,安装可见上篇文章

实现要点

  bpmn提供了两个神器:Modeler 和 Viewer,Modeler带有左侧节点栏和右侧属性栏,点击节点可进行相应操作,Viewer是“查看”,不能更改节点,两者相互独立,可按实际需求按需引入

  绘制流程图:import BpmnModeler from ‘bpmn-js/lib/Modeler‘;

  预览流程图:import BpmnViewer from ‘bpmn-js/lib/Viewer‘;

  直接上代码:
技术图片
<template>
    <div class="container">
        <el-button type="primary" @click="previewTemp">预览</el-button>
        <el-button type="success" @click="handleZoom(1)">放大</el-button>
        <el-button type="warning" @click="handleZoom(-1)">缩小</el-button>
        <div class="chart-preview">
            <div style="clear: both;"></div>
            <div class="view-canvas">
                <div id="container"
                     v-bind:style="{width: 100 * scale + ‘%‘,height: 100 * scale + ‘%‘}"
                ></div>
            </div>
        </div>
    </div>
</template>
<script>
  import jquery from ‘jquery‘;
  import BpmnViewer from ‘bpmn-js/lib/Viewer‘;


  export default {
    data() {
      return {
        containerEl: null,
        bpmnModeler: null,
        scale: 1,
       // 此变量为预览的xml文件数据,由于行数过多,附在了附件中,使用时,将附件整个复值到currentCanvasXml即可
        currentCanvasXml: ‘‘
      };
    },
    methods: {
      handleZoom(flag) {
        if (flag < 0 && this.scale <= 1) {
          return;
        }
        this.scale += flag;
        this.$nextTick(() => {
          this.bpmnModeler.get(‘canvas‘).zoom(‘fit-viewport‘);
        });
      },
      previewTemp() {
        this.containerEl = document.getElementById(‘container‘);
        // 避免缓存,每次清一下
        this.bpmnModeler && this.bpmnModeler.destroy();
        this.scale = 1;
        this.bpmnModeler = new BpmnViewer({container: this.containerEl});
        const viewer = this.bpmnModeler;
        this.bpmnModeler.importXML(this.currentCanvasXml, (err) => {
          if (err) {
            console.error(err);
          } else {
            // 只实现预览,核心代码以下两句足够 
            const canvas = viewer.get(‘canvas‘);
            canvas.zoom(‘fit-viewport‘);
            // 以下代码为:为节点注册鼠标悬浮事件
            const eventBus = this.bpmnModeler.get(‘eventBus‘);
            const overlays = this.bpmnModeler.get(‘overlays‘);
            eventBus.on(‘element.hover‘, (e) => {
              const $overlayHtml = jquery(` <div class="tipBox">
                    你好,我是悬浮框里的内容
                    </div>`);
              overlays.add(e.element.id, {
                position: {top: e.element.height, left: 0},
                html: $overlayHtml
              });
            });
            eventBus.on(‘element.out‘, () => {
              overlays.clear();
            });
          //  注册悬浮事件结束
          }
        });
      }
    }
  };
</script>
<style lang="scss">
    .container {
        .tipBox {
            width: 200px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #ebeef5;
            padding: 12px;
        }
    }
</style>
View Code

tips

  currentCanvasXml 为预览的xml文件数据,由于行数过多,附在了附件中(点我!点我!),使用时,将整个赋值到currentCanvasXml,代码才可以运行,否则报错!!

以上是关于vue实现可配置流程图的主要内容,如果未能解决你的问题,请参考以下文章

svg图标不显示配置问题vue

前端开发vue+dagre-d3前端流程图开发demo

Vue.js 显示流程图

vue流程编辑器框架Vue-Flowchart-Editor

GitHub 近两万 Star,无需编码,可一键生成前后端代码,开源项目

vue中sass的配置安装流程