bpmn.js + vue + vuex的业务实现-根据状态而呈现节点不同的颜色或图片

bpmn.js在Vue中实现状态驱动的节点颜色与图片

最新推荐文章于 2025-10-16 16:08:27 发布

原创

最新推荐文章于 2025-10-16 16:08:27 发布 · 977 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍如何在bpmn.js、Vue和Vuex集成项目中，根据业务状态改变流程图节点的颜色和图片。通过与后端交互获取节点状态，利用customRenderer.js进行自定义渲染，实现节点视觉效果的差异化。

前言

上一章节我们介绍了关于bpmn.js如何与后端交互，实现特定的线用特定的颜色, 要是不了解的小伙请移步 bpmn.js + vue + vuex的业务实现-与后端交互

这一章节主要讲解的是关于bpmn.js如何根据状态而呈现节点不同的颜色或图片

根据状态而呈现不同的颜色或图片

在上一章节中已经与后端交互，实现了赋予不同节点不同的class，我们可以用同样的方法添加不同的图片和颜色

设置颜色

//.customRenderer.less
.djs-visual.running {
    path {
      display: none !important;
    }
    rect {
      fill: #1890ff !important;
      stroke: #1890ff !important;
    }
    .djs-label {
      font-weight: bold !important;
      fill: #fff !important;
    }
  }

//.customRenderer.less

// 给节点添加class以更改样式
  let className = this.runningActivitiesIds.includes(element.id)
    ? 'djs-visual running'
    : this.highLightedActivitiesIds.includes(element.id)
    ? 'djs-visual Activities'
    : 'djs-visual unActivities';
  svgAttr(parentNode, 'class', className);

设置图片

//customRenderer.js

// 计数器，当匹配到就加1，匹配不到为0就默认图片
      let count = 0;
      customConfig.map(item => {
        if (element.businessObject.name.includes(item.labelKey)) {
          count++;
          const customIcon = svgCreate('image', {
            ...attr,
            href: isFinish ? item.url : item.unUrl,
          });
          svgAppend(parentNode, customIcon);
          return customIcon;
        }
        if (!count) {
          const customIcon = svgCreate('image', {
            ...a