geg-gas-web/src/views/workflow/task/components/flow/ProcessInformation.vue

<template>
  <!--  流程信息 -->
  <div class="flow-record-box">
    <div id="bpmnCanvas" class="canvas" ref="bpmnCanvas"></div>
    <div class="flow-record-mark"></div>
  </div>

  <div class="fixed-bottom">
    <ZoomInOrOut @in="zoomViewport(false)" @out="zoomViewport(true)" />
  </div>
</template>
<script lang="ts" setup>
  import CustomModeler from '/@bpmn/modeler';
  import { ZoomInOrOut } from '/@/components/ModalPanel';
  import { getFinishedTask } from '/@/api/workflow/task';
  import { ref, reactive, onMounted } from 'vue';

  const props = withDefaults(
    defineProps<{
      xml: string;
      processId: string;
    }>(),
    {
      xml: '',
      processId: '',
    },
  );
  const bpmnCanvas = ref();
  let data: {
    bpmnViewer: any;
    zoom: number;
    xmlString: string;
  } = reactive({
    bpmnViewer: null,
    zoom: 1,
    xmlString: '',
  });
  onMounted(() => {
    data.xmlString = props.xml;
    if (data.xmlString) initBpmnModeler();
  });

  async function initBpmnModeler() {
    data.bpmnViewer = await new CustomModeler({
      container: bpmnCanvas.value,
      additionalModules: [
        {
          labelEditingProvider: ['value', ''], //禁用节点编辑
          paletteProvider: ['value', ''], //禁用/清空左侧工具栏
          contextPadProvider: ['value', ''], //禁用图形菜单
          bendpoints: ['value', {}], //禁用连线拖动
          zoomScroll: ['value', ''], //禁用滚动
          moveCanvas: ['value', ''], //禁用拖动整个流程图
          move: ['value', ''], //禁用单个图形拖动
        },
      ],
    });
    await redrawing();
    if (props.processId) {
      let res = await getFinishedTask(props.processId);
      setColors(
        res.finishedNodes ? res.finishedNodes : [],
        res.currentNodes ? res.currentNodes : [],
      );
    }
  }
  async function redrawing() {
    try {
      await data.bpmnViewer.importXML(data.xmlString);
      let canvas = data.bpmnViewer.get('canvas');
      canvas.zoom('fit-viewport', 'auto');
    } catch (err) {
      console.log('err: ', err);
    }
  }
  function setColors(finishedIds: Array<string>, currentIds: Array<string>) {
    // finishedIds 完成的节点id
    // currentIds 进行中节点id
    let modeling = data.bpmnViewer.get('modeling');
    const elementRegistry = data.bpmnViewer.get('elementRegistry');
    if (finishedIds.length > 0) {
      finishedIds.forEach((it) => {
        let Event = elementRegistry.get(it);

        modeling.setColor(Event, {
          stroke: 'green',
          fill: 'white',
        });
      });
    }
    if (currentIds.length > 0) {
      currentIds.forEach((it) => {
        let Event = elementRegistry.get(it);
        modeling.setColor(Event, {
          stroke: '#409eff',
          fill: 'white',
        });
      });
    }
  }
  function zoomViewport(zoomIn = true) {
    data.zoom = data.bpmnViewer.get('canvas').zoom();
    data.zoom += zoomIn ? 0.1 : -0.1;
    data.bpmnViewer.get('canvas').zoom(data.zoom);
  }
</script>
<style lang="less">
  @import '/@/assets/style/bpmn-js/diagram-js.css';
  @import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn.css';
  @import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-codes.css';
  @import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-embedded.css';

  .bjs-powered-by {
    display: none !important;
  }

  .flow-record-box {
    width: 100%;
    height: 80vh;
    position: relative;
    margin-top: 50px;
  }

  .flow-record-mark {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  /* 画布 */
  .canvas {
    width: 100%;
    height: 100%;
  }

  /* 按钮（放大 缩小 清除） */
  .fixed-bottom {
    position: absolute;
    top: 110px;
    font-size: 30px;
    left: 40%;
    display: flex;
  }
</style>