溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue項(xiàng)目中如何使用bpmn為節(jié)點(diǎn)添加顏色

發(fā)布時(shí)間：2020-07-29 10:59:40 來(lái)源：億速云 閱讀：629 作者：小豬 欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了vue項(xiàng)目中如何使用bpmn為節(jié)點(diǎn)添加顏色，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

內(nèi)容概述

bpmn是比較方便的繪制流程圖的插件

本文主要包括vue項(xiàng)目中bpmn使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下。

前情提要

上文我們已經(jīng)實(shí)現(xiàn)了在外部更改節(jié)點(diǎn)名。此時(shí)又有新玩法：在流程圖中，根據(jù)節(jié)點(diǎn)狀態(tài)為其標(biāo)記不同顏色。例如：已完成：黃色，正在進(jìn)行：綠色，本次我們通過(guò)兩種方式來(lái)實(shí)現(xiàn)該需求。效果：

vue項(xiàng)目中如何使用bpmn為節(jié)點(diǎn)添加顏色

方式1：modeling.setColor

modeling.setColor接受兩個(gè)參數(shù)：參數(shù)1：節(jié)點(diǎn)實(shí)例，可以是單個(gè)元素，也可是多個(gè)節(jié)點(diǎn)組成的數(shù)組，參數(shù)2：class類

let modeling = this.bpmnModeler.get('modeling');
modeling.setColor(節(jié)點(diǎn)實(shí)例, {
 stroke: 'green',
 fill: 'yellow'
});

方式2：Overlay

個(gè)人理解，overlay是通過(guò)定位方式在元素正上方添加一層帶顏色的蒙板

const $overlayHtml = $('<div class="highlight-overlay">').css({
 width: shape.width,
 height: shape.height
});
overlays.add(節(jié)點(diǎn)id, {
 position: {top: 0, left: 0},
 html: $overlayHtml
});

highlight-overlay：css中聲明好的class類名

overlays.add將創(chuàng)建好的蒙板定位到指定節(jié)點(diǎn)位置，此時(shí)節(jié)點(diǎn)id就是目標(biāo)節(jié)點(diǎn)的唯一身份！

注意事項(xiàng)

上述兩種方式均能實(shí)現(xiàn)為節(jié)點(diǎn)添加顏色。但方式2有一點(diǎn)副作用，如果此時(shí)你為節(jié)點(diǎn)注冊(cè)了點(diǎn)擊事件，在節(jié)點(diǎn)被點(diǎn)擊的時(shí)候要做某些處理。此時(shí)方式2會(huì)使節(jié)點(diǎn)點(diǎn)擊事件失效。

原因：方式2中，此時(shí)節(jié)點(diǎn)上方有一層蒙板，并且和節(jié)點(diǎn)等寬等高，相當(dāng)于節(jié)點(diǎn)被蒙板完全覆蓋。所以點(diǎn)擊節(jié)點(diǎn)的時(shí)候，點(diǎn)擊的是蒙版，不是節(jié)點(diǎn)。

不要慌，有解決辦法！此時(shí)為蒙板注冊(cè)了點(diǎn)擊事件，將點(diǎn)擊節(jié)點(diǎn)要做的操作給蒙板也來(lái)一份，哈哈

import $ from 'jquery'; // 引入jquery
$(".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];
 // 此時(shí)temp就是蒙板下方的節(jié)點(diǎn)，要點(diǎn)擊節(jié)點(diǎn)做什么，此刻盡管拿去用
 ........
});

后續(xù)

上文代碼都是片段，特此附上完整代碼：老規(guī)矩：data中的chart變量流程圖xml文件數(shù)據(jù)，由于行數(shù)過(guò)多，附在了附件中（點(diǎn)我！點(diǎn)我），使用時(shí)，將附件內(nèi)容復(fù)制過(guò)來(lái)，賦值給chart即可運(yùn)行！

<template>
 <div class="containerBox">
 <div id="container"></div>
 <div >看我！我是點(diǎn)擊的節(jié)點(diǎn)名稱啊~
  <span >{{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文件數(shù)據(jù)，由于行數(shù)過(guò)多，附在了附件中，使用時(shí)，將附件整個(gè)賦值給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() {
  // 目的：為第一個(gè)節(jié)點(diǎn)添加綠色，為第二個(gè)節(jié)點(diǎn)添加黃色
  // 實(shí)現(xiàn)步驟：1、找到頁(yè)面里所有節(jié)點(diǎn)
  const elementRegistry = this.bpmnModeler.get('elementRegistry');
  this.nodeList = elementRegistry.filter (
   (item) => item.type === 'bpmn:UserTask' || item.type === 'bpmn:ServiceTask'
  );
  // 此時(shí)得到的userTaskList 便是流程圖中所有的節(jié)點(diǎn)的集合
  console.log(this.nodeList);
  // 步驟2 ：為節(jié)點(diǎn)添加顏色
  // 方式1 ：modeling.setColor(參數(shù)1：節(jié)點(diǎn)，可以是單個(gè)元素實(shí)例，也可是多個(gè)節(jié)點(diǎn)組成的數(shù)組，參數(shù)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造成的節(jié)點(diǎn)點(diǎn)擊事件失效問(wèn)題，如果采用方式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 &#63; temp.businessObject.name : '';
  });
  },
  addEventBusListener() {
  const eventBus = this.bpmnModeler.get('eventBus');
  // 為節(jié)點(diǎn)注冊(cè)點(diǎn)擊事件，點(diǎn)擊節(jié)點(diǎn)，下方顯示點(diǎn)擊的節(jié)點(diǎn)名稱
  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>

以上就是關(guān)于vue項(xiàng)目中如何使用bpmn為節(jié)點(diǎn)添加顏色的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手