bpmn-js，Viewer设置节点颜色（vue）

素颜马尾好姑娘i 2022-10-17 05:28 1052阅读 0赞

2021-06-01

package.json依赖：

"dependencies": {
            "axios": "^0.19.0",
            "bpmn-js": "^8.2.0",
            "bpmn-js-properties-panel": "^0.38.1",
            "bpmn-moddle": "^7.0.4",
            "camunda-bpmn-moddle": "^4.0.1",
            "core-js": "^3.4.3",
            "vue": "^2.6.10"
        },

1、先添加CSS。

> 注意：style节点没有scoped。

2、然后修改节点颜色

var canvas = viewer.get('canvas');
    // Activity_0djl6l0为节点元素的ID
    canvas.addMarker('Activity_0djl6l0', 'highlight');

# 完整代码 #

<template>
        <div class="containers">
            <div class="canvas" ref="canvas"></div>
        </div>
    </template>
    
    
    <script>
    // 引入相关的依赖
    import BpmnViewer from "bpmn-js/lib/Viewer";
    import {xmlStr} from "../mock/xmlStr";
    
    export default {
        name: '',
        components: {},
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
        },
        // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
        async mounted() {
            this.initBpmnViewer();
            await this.createNewDiagram(xmlStr)
            // this.showDiagram()
        },
        data() {
            return {
                // bpmn建模器
                bpmnModeler: null,
                container: null,
                canvas: null
            }
        },
        // 方法集合
        methods: {
            initBpmnViewer() {
                const canvas = this.$refs.canvas
                // 初始时清除图层
                this.bpmnViewer && this.bpmnViewer.destroy();
                this.$refs.canvas.innerHTML = "";
                this.bpmnViewer = new BpmnViewer({
                    container: canvas
                })
    
            },
            async createNewDiagram(modelXml) {
                try {
                    const result = await this.bpmnViewer.importXML(modelXml)
                    console.log('result',result)
                    // this.$refs.canvas.zoom('fit-viewport', 'auto');
                    // 屏幕自适应
                    const canvas = this.bpmnViewer.get('canvas')
                    canvas.zoom('fit-viewport', 'auto')
                    // Activity_0c2cl2b为节点元素的ID
                    this.setNodeColor(['Activity_0c2cl2b'],'nodeSuccess',canvas)
                } catch (err) {
                    console.log(err.message, err.warnings)
                }
            },
            // 设置高亮颜色的class
            setNodeColor (nodeCodes, colorClass, canvas) {
                for (let i = 0; i < nodeCodes.length; i++) {
                    canvas.addMarker(nodeCodes[i], colorClass)
                }
            }
        },
        // 计算属性
        computed: {}
    }
    </script>
    
    <style>
    
    .containers {
        background-color: #ffffff;
        width: 100%;
        height: calc(100vh - 52px);
    }
    
    .canvas {
        width: 100%;
        height: 100%;
    }
    
    .nodeSuccess:not(.djs-connection) .djs-visual > :nth-child(1) {
        stroke: red !important;
        stroke-width: 3px;
        /* elements as success */
    }
    
    
    </style>