效果展示;

1.package.json在引入bpm，并npm install

"bpmn": "^0.2.2",
 "bpmn-js": "^2.4.0",
  "bpmn-moddle": "^5.1.5",
  "camunda-bpmn-moddle": "^3.0.0",

2.创建实例文件test.vue

<template>
   <div>
      <div id="diagram"></div>

   </div>
</template>

<script>
  import BpmnViewer from 'bpmn-js';
  import $ from 'jquery'
  import commonFun from '@/filters/new_common'
  import commonApi from "@/api/common";
export default {
   name:'testBpm',
  
   data () {
      return {

      };
   },


   mounted() {
     this.getBpm();
   },

   methods: {
     getBpm(){
       let bpmnId = 'Process_transfer:1:cc245043-9e52-11ea-b06f-e41f13ecc62d';
       debugger;
         var bpmnxml= '';
         //调用自己的api接口获取xml信息
        commonApi.get_processdefine_xml(bpmnId).then(res =>{
           debugger;
            if(res.data.status === 0){
                 bpmnxml = res.data.data;
                  $("#diagram").html("");
               $("#diagram").fadeIn(100);
               
               commonFun.bpmnModule(bpmnxml,[],'','')
            }else{
              this.$message.error('查询失败');
            }
          }).catch(() => {
            this.$message.error('查询失败');
        })

        
     }
   }
}
</script>
<style lang='css' scoped>

</style>

3.编写公共js,bpmnModule方法

import BpmnViewer from 'bpmn-js';

//流程配置bpmn添加备注封装
  bpmnModule(diagramXML,taskId,completetaskId,beingtaskId,self){
    var viewer = new BpmnViewer({
      container: '#diagram'
    });

    viewer.importXML(diagramXML, function (err) {


      if (err) {

      } else {
        //访问各种图表服务 与Canvas图表进行交互以使图表适合当前可用的视口大小
        $(".bjs-powered-by").css("display","none");
        var overlays = viewer.get('overlays'),
          canvas = viewer.get('canvas'),
          elementRegistry = viewer.get('elementRegistry');
        // modeling = viewer.get('modeling');
        // Option 1: Color via Overlay
        //添加备注封装
        function remark(id) {


          var task_click = elementRegistry.get(id);


          var $overlayHtml_click = $("<div class='click' id=click"+ id +" style='cursor: pointer'></div>")
            .css({
              width: task_click.width,

              height: task_click.height
            });

          overlays.add(id, {
            position: {
              top: 0,
              left: 0

            },
            html: $overlayHtml_click

          });


          var content="<div class='content' id=content"+ id +"><img src='../img/setting.png' class='content_img'/></div>";


          $("#click"+id).append(content);
          $(".content").css({"position":"absolute","bottom":"0px","cursor":"pointer","padding": "10px","text-align": "left","line-height": "20px","font-size":"15px","color": "#fff","background":"#F0F0F0","border-radius":"10px","animation":"content 1s forwards","-ms-animation":"content 1s forwards","-moz-animation":"content 1s forwards","-webkit-animation":"content 1s forwards","-o-animation":"content 1s forwards","display":"none"});
          $(".content_img").attr("src",$(".setting_img").attr("src"));
          $(".content_img").css({"width":"30px"});
          //点击控制内容显示隐藏
          $("#content"+id).css("left",$("#click"+id).width());

          $("#click"+id).mouseover(function () {
            $("#content"+id).css('display','block');
          })
          $("#click"+id).mouseout(function () {
            $("#content"+id).css('display','none');
          })
          $("#content"+id).mouseover(function () {
            $("#content"+id).css('display','block');
          })
          $("#content"+id).mouseout(function () {
            $("#content"+id).css('display','none');
          })
          $("#content"+ id).click(function () {
            $(".form_submit").css("display","block");
            self.id = id;
            // 设置右侧设置界面显示
            setTimeout(() => $(".form_submit").css("right","0px"), 50);
            // 设置右侧设置界面显示高度
            var window_height = $(window).height();
            $(".form_submit").height(window_height - 50);
            // 设置bpmn图宽度
            $(".viewport").prop("id","bpmn_viewport")
            var outline = document.getElementById("bpmn_viewport").getBoundingClientRect()
            $("#diagram").css({"width": outline.width + $(".form_submit").width()+350 })

            // xmlId传值
            // setTimeout(function () {
              return id;
            // },100)

          })

        }
        for(var i=0;i<taskId.length;i++) {
          remark(taskId[i]);
        }
        function complete(completetaskId) {


          for(var i=0;i<$(".djs-shape").length;i++){
            if($(".djs-shape:eq("+i+")").attr("data-element-id")==completetaskId){
              $(".djs-shape:eq("+i+") .djs-visual rect").css("stroke","rgb(67, 160, 71)");
              $(".djs-shape:eq("+i+") .djs-visual text").css("fill","rgb(67, 160, 71)");
              $(".djs-shape:eq("+i+") .djs-visual rect").css("fill","#fff");
            }
          }
        }
        for(var i=0;i<completetaskId.length;i++){
          complete(completetaskId[i]);
        }




        function being(beingtaskId) {


          for(var i=0;i<$(".djs-shape").length;i++){
            if($(".djs-shape:eq("+i+")").attr("data-element-id")==beingtaskId){
              $(".djs-shape:eq("+i+") .djs-visual rect").css("stroke","#FF69B4");
              $(".djs-shape:eq("+i+") .djs-visual text").css("fill","#FF69B4");
              $(".djs-shape:eq("+i+") .djs-visual rect").css("fill","#fff");



            }
          }
        }
        for(var i=0;i<beingtaskId.length;i++){
          being(beingtaskId[i]);
        }
        // remark(taskId);
        // remark('Task_0h8n41f');
      }


    });
    // 元素加载延迟
    setTimeout(function () {
      $(".viewport").prop("id","bpmn_viewport")
      var outline = document.getElementById("bpmn_viewport").getBoundingClientRect()

      $("#diagram").css({"width": outline.width + 350 + "px"})
      $("#diagram").css({"height": outline.height + 200 + "px"})
    },10)
  }