1. 概述

流程图作为流程的图形化展示的重要部分，需要在设计器外的地方显示出来，这时有两种方式的显示办法：

1. 在服务端通过流程定义XML生成流程图
2. 在前端加载流程定义XML展示

本方案我们采用第二种方式，通过使用跟设计器一样的bpmn-js的组件进行流程图的显示。

引入bpmn-js 显示组件并封装

在Jpaas-vue项目中通过安装以下组件：

npm install bpmn-js

在Vue页面中定义如下：

<template>
  <div style="width:100%;height:100%" class="flowImg">
    <div style="padding: 10px">温馨提示：按住鼠标左键可拖动查看</div>
    <div class="containers" ref="content">
      <div class="canvas" ref="canvas" style="width: 100%;height: 100%">
      </div>
    </div>
  </div>
</template>
<script>
  import BpmnViewer from 'bpmn-js/lib/NavigatedViewer'
  import {getBpmnXmlFromParam} from '@/api/bpm/core/bpmImage'
  export default {
    name: "BpmImageView",
    props:{
      instId: String,
      taskId:String,
      defId:String
    },
    created() {
      let self=this;
      this.$nextTick().then(() => {
        this.canvas = this.$refs.canvas;
        if(!this.viewer) {
          this.viewer = new BpmnViewer({
            container: this.canvas,
            keyboard: {
              bindTo: window
            },
          });
        }
        //从后台xml中获取
        getBpmnXmlFromParam({defId:self.defId,instId:self.instId,taskId:self.taskId,showHis:true}).then(result=>{
          if(!result) {
            return;
          }
          this.viewer.importXML(result.bpmnXml, function(err) {
            if (err) {
              console.log('error rendering', err);
            } else {
              console.log('rendered');
            }
            self.shows();
            // 加上节点的高亮显示
            let canvas = self.viewer.get('canvas');
            if(canvas && result.histories!=null){
              for(let i = 0 ; i < result.histories.length;i++){
                canvas.addMarker(result.histories[i].nodeId, 'highlight_' + result.histories[i].checkStatus);
              }
            }
          });
        });
      });
    },
    methods:{
      shows () {
      }
    }
  }
</script>
<style scoped>
  .containers{
    height:calc( 100% - 44px );
    width: 100%;
  }
  .containers>>> .bjs-powered-by{
    display: none;
  }
  .example {
    display: inline;
    height:32px;
    width:30px;
    padding:2px;
    border: solid 1px #c09853;
    margin:2px;
  }
  .flowImg >>> .highlight_AGREE:not(.djs-connection) .djs-visual > rect{
    fill:green !important;
  }
  .flowImg >>> .highlight_BACK:not(.djs-connection) .djs-visual > rect{
    fill: #ff174c !important;
  }
  .flowImg >>> .highlight_UNHANDLE:not(.djs-connection) .djs-visual > rect{
    fill: #ff1005 !important;
  }
  .flowImg >>> .highlight_HANDLE:not(.djs-connection) .djs-visual > rect{
    fill: #ff680a !important;
  }
  .djs-container > svg{
    overflow: auto!important;
  }
</style>

展示效果

可定义不同的节点的不同的审批状态显示不同的颜色风格。