vue项目中使用bpmn-为节点添加颜色

<template>
    <div class="containerBox">
        <div id="container"></div>
        <div style="margin-left: 200px">看我！我是点击的节点名称啊~
            <span style="color: #eaae00">{{nodeName}}</span>
        </div>
    </div>
</template>
<script>
    import BpmnModeler from 'bpmn-js/lib/Modeler';
    import camundaExtension from './resources/camunda';
    import {tempDetail, saveCanvas} from '@api/processConfig';
    import $ from 'jquery';

    export default {
        name: 'index',
        data() {
            return {
                containerEl: null,
                bpmnModeler: null,
                nodeName: '',
                nodeList: [],
                // chart变量流程图xml文件数据，由于行数过多，附在了附件中，使用时，将附件整个赋值给chart即可
                chart: ''
            };
        },
        mounted() {
            this.containerEl = document.getElementById('container');
            this.bpmnModeler = new BpmnModeler({
                container: this.containerEl,
                moddleExtensions: {camunda: camundaExtension}
            });
            this.showChart();
        },
        methods: {
            // 流程图回显
            showChart() {
                this.bpmnModeler.importXML(this.chart, (err) => {
                    if (!err) {
                        this.addEventBusListener();
                        this.setNodeColor();
                    }
                });
            },
            setNodeColor() {
                // 目的：为第一个节点添加绿色，为第二个节点添加黄色
                // 实现步骤：1、找到页面里所有节点
                const elementRegistry = this.bpmnModeler.get('elementRegistry');
                this.nodeList = elementRegistry.filter (
                    (item) => item.type === 'bpmn:UserTask' || item.type === 'bpmn:ServiceTask'
                );
                // 此时得到的userTaskList 便是流程图中所有的节点的集合
                console.log(this.nodeList);
                // 步骤2 ：为节点添加颜色
                // 方式1 ：modeling.setColor(参数1：节点，可以是单个元素实例，也可是多个节点组成的数组，参数2：class类);
                let modeling = this.bpmnModeler.get('modeling');
                modeling.setColor(this.nodeList[0], {
                    stroke: 'green',
                    fill: 'yellow'
                });
                // 方式2 ：添加蒙板
                const overlays = this.bpmnModeler.get('overlays');
                const shape = elementRegistry.get(this.nodeList[1].id);
                if (shape) {
                    const $overlayHtml = $('<div class="highlight-overlay">').css({
                        width: shape.width,
                        height: shape.height
                    });
                    overlays.add(this.nodeList[1].id, {
                        position: {top: 0, left: 0},
                        html: $overlayHtml
                    });
                }
                // 此方法为了解决方式2造成的节点点击事件失效问题，如果采用方式1，可忽略此方法
                this.overlayClick();
            },
            overlayClick() {
                $(".djs-container").on("click", ".djs-overlays", (e) => {
                    const parentEle = e.target.parentElement.parentElement;
                    const shapeId = parentEle.getAttribute('data-container-id');
                    const temp = this.nodeList.filter(
                        (item) => item.id === shapeId
                    )[0];
                    this.nodeName = temp ? temp.businessObject.name : '';
                });
            },
            addEventBusListener() {
                const eventBus = this.bpmnModeler.get('eventBus');
                // 为节点注册点击事件，点击节点，下方显示点击的节点名称
                eventBus.on('element.click', (e) => {
                    const {element} = e;
                    if (!element.parent) return;
                    if (!e || element.type === 'bpmn:Process') {
                        return false;
                    } else {
                        this.nodeName = element.businessObject.name;
                    }
                });
            }
        }
    };
</script>
<style lang="scss">
    .containerBox {
        height: calc(100vh - 220px);
        position: relative;

        #container {
            height: calc(100% - 50px);
        }
        .highlight-overlay {
            background-color: green;
            opacity: 0.4;
            border-radius: 10px;
        }
    }
</style>