将后台返回的xml转成流程图显示

1-安装依赖
https://www.npmjs.com/package/@dreamof2080/flow-view/v/1.1.7

npm install --save-dev @dreamof2080/flow-view

2-在项目中引入import {initFlowGraph, renderFlowGraph} from ‘@dreamof2080/flow-view’

// 子组件 flowchart.vue
<!-- 流程图 -->
<template>
<div id='flowchart'>
  // 流程图
  <div id="container" ref="container" class="container"></div>
  <!-- 这是点击节点时，显示的节点信息 -->
  <div class="node-info padding-xs" ref="nodeInfo">
    <div class="text-white">未查看: {{ unViewText }}</div>
    <div class="text-white margin-top-sm">未提交: {{ unSubmitText }}</div>
    <div class="text-white margin-top-sm">已提交: {{ submitText }}</div>
  </div>
  // 全屏框
  <div class="thumbnail" id="thumbnail" ref="thumbnail"></div>
</div>
</template>

2-1-script 一共三个方法，两个接口

<script>
import { flowchart, getNode } from '@/request/travelexpense'   // 引入接口
import { initFlowGraph, renderFlowGraph } from "@dreamof2080/flow-view";  // 转流程图必须引的
export default {
  data () {
    return {
      graph: undefined,
      unViewText:'',//未查看
      unSubmitText:'',  //未提交
      submitText:'',  //已提交
    };
  },
  props: {
    // 父组件传过来的dataId，用来做调接口的传参
    dataId: {
      type: String,
      default: ''
    }
  },
  components: {},
  computed: {},
  mounted() {
	this.getFlowchart()
  },
  methods: {
    // 获取流程图
    getFlowchart() {
      this.$nextTick(() => {
        flowchart(this.dataId).then(res => {
          if(res.errorCode === 200) {
            if (this.graph === undefined) {
              // 初始化流程图
              const container = this.$refs.container;
              const nodeInfo = this.$refs.nodeInfo;
              const thumbnail = this.$refs.thumbnail;
              this.graph = initFlowGraph({
                container,
                shadowColor: "#050505",
                flowedEdgeColor: "#525050",
                onClick: (id, left, top) => {   // id是当前点击的节点的节点id
                  this.getOperator(id);
                  // 用来显示or隐藏节点信息那个框框的，并且控制他的展示位置
                  nodeInfo.style.display = id ? "block" : "none";
                  nodeInfo.style.left = left + 0 + "px";
                  nodeInfo.style.top = top + 60 + "px";
                },
                thumbnail,
              });
            }
            this.version = res.data.versionNo;
            // 渲染流程图
            renderFlowGraph({
              graph: this.graph,
              data: res.data.graphXml,   // 流程图数据，后台返回xml
              currentIds: res.data.currentIds,   // currentIds和flowedEdgeIds这两是啥我忘了，反正都是后台反的，都是数组类型
              flowedEdgeIds: res.data.flowedEdgeIds,
            });
          }
        })
      })
    },
    //获取节点操作者
    getOperator(nodeId,left,top) {
	  if(this.isEmpty(nodeId)){
		return
	  }
      var params = {
        nodeId: nodeId,
        dataId:this.dataId
      };
      // 获取节点操作信息的接口
	  getNode(params).then(res=>{
	  	if(res.success){
	      let unView = ""
		  let unSubmit = ""
		  let submit = ""
	      res.data.unView.forEach((item) => {
            unView += item.name + ",";
          });
          res.data.unSubmit.forEach((item) => {
            unSubmit += item.name + ",";
          });
          res.data.submit.forEach((item) => {
            submit += item.name + ",";
          });
       	  this.unViewText = unView.length > 0 ? unView.substring(0, unView.length - 1) : unView;
          this.unSubmitText = unSubmit.length > 0 ? unSubmit.substring(0, unSubmit.length - 1) : unSubmit;
          this.submitText =  submit.length > 0 ? submit.substring(0, submit.length - 1) : submit;
		}
	  })
    },
    //判空
    isEmpty(obj) {
      return obj === undefined || obj === null || obj === "";
    },
  }
}
</script>

2-2-流程图样式

<style lang='less' scoped>
#flowchart {
  position: relative;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  background-color: #88888a;
  opacity: 0.8;
  overflow: hidden;
}
.node-info {
  position: absolute;
  min-width: 300px;
  // min-height: 200px;
  background-color: rgba(0, 0, 0, .2);
  opacity: 0.8;
  top: 0;
  left: 0;
  display: none;
  border-radius: 5px;
  font-size: 12px;
  padding: 10px;
  box-sizing: border-box;
}
// 全屏
.thumbnail {
  position: absolute;
  overflow: hidden;
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: #e8e9ec;
  opacity: 0.8;
}
</style>