bpmn整合流程图高亮显示流程进度图

bpmn整合流程图高亮显示流程进度图
最终展示的效果是这样的

引入组件

 "bpmn-js": "^8.7.1","bpmn-js-properties-panel": "^0.44.0","bpmn-js-token-simulation": "^0.21.1","camunda-bpmn-moddle": "^5.1.2","xml-js": "^1.6.11""@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5","@babel/plugin-proposal-optional-chaining": "^7.14.5","@ant-design/icons-vue": "^6.0.1","ant-design-vue": "^1.7.8",

以下为具体代码

<template><div class="bpmn-viewer-container"><div style="width:100%;height:20px;position: absolute; left: 20px; top: 10px; color: #000000D9;font-size: 16px;font-weight: 500">{{title}}</div><div style="position: absolute; left: 10px; top: 40px;z-index: 999"><el-button-group key="scale-control"><el-tooltip effect="light" content="缩小视图"><el-button :size="headerButtonSize" :disabled="defaultZoom < 0.2" icon="el-icon-zoom-out" @click="processZoomOut()" /></el-tooltip><el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button><el-tooltip effect="light" content="放大视图"><el-button :size="headerButtonSize" :disabled="defaultZoom > 4" icon="el-icon-zoom-in" @click="processZoomIn()" /></el-tooltip><el-tooltip effect="light" content="重置视图并居中"><el-button :size="headerButtonSize" icon="el-icon-c-scale-to-original" @click="processReZoom()" /></el-tooltip></el-button-group></div><div id="bpmnCanvas" style="width:950px;height:500px;"></div>//这个标签是悬浮框查看各个节点的信息<Popover overlayClassName="flowMsgPopover" ref="flowMsgPopover" :visible="true" ><template #title><h1 class="popover-title">{{detailInfo.name}}</h1></template><template #content><p>审批人员：<Tag v-if="detailInfo.approver != null && detailInfo.approver !== '' && detailInfo.approver !== 'undefined'" color="processing" style="margin-right: 4px;margin-bottom: 4px;"v-for="item in detailInfo.approver.split(';')" :key="item">{{item}}</Tag></p><p>节点类型：{{detailInfo.nodeType||""}}</p><p>节点状态：{{detailInfo.status||""}}</p><p>开始时间：{{detailInfo.startDate||""}}</p><p>结束时间：{{detailInfo.endDate||""}}</p><p>审批耗时：{{detailInfo.duration||""}}</p></template></Popover></div>
</template><script>import {Spin , Tag, Popover, Button, Space, Affix} from "ant-design-vue";import { PlusCircleOutlined, MinusCircleOutlined, OneToOneOutlined } from '@ant-design/icons-vue';import BpmnViewer from 'bpmn-js';import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';import overlays from 'diagram-js/lib/features/overlays/Overlays.js'import {getOneActivityVoByProcessInstanceIdAndActivityId,getHighLightedNodeVoByProcessInstanceId} from './js/definition.js'import $ from 'jquery';let bpmnViewer = null;export default {props: {headerButtonSize: {type: String,default: "small",validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1},reviewObj:{type:Object}},name: 'reviewRuningFlow',components: {Tag, Spin, Popover, Button,Space, Affix,RadioButtonGroup: Button.RadioButtonGroup,PlusCircleOutlined, MinusCircleOutlined, OneToOneOutlined},data() {return {detailInfo: {approver:''},highlightNode:[],highlightLine: [],modelName:'',defaultZoom: 1,nodeDetail:{},scale: 1,title: "流程预览"}},mounted(){this.initPage();//this.getTitle();},methods:{/*getTitle(){this.title = "流程图-";},*/initPage(){bpmnViewer && bpmnViewer.destroy();bpmnViewer = new BpmnViewer({container: "#bpmnCanvas",width: '100%',additionalModules: [MoveCanvasModule // 移动整个画布]});debugger;this.modelName = 'xxxxxxxxx';getHighLightedNodeVoByProcessInstanceId({"procInstId":"1b6cc49f0bb211ecaf8f0862662f0797"}).then(res=>{//modelName.value = res.mldelName||'';if(res.resultCode === 200){this.title = "流程图-"+res.data.modelName;this.highlightLine = res.data.highLightedFlows;this.highlightNode = res.data.activeActivityIds;if(bpmnViewer) {this.importXml(res.data.modelXml);}} else {this.$message({message: res.resultMessage,type: 'error'});}});//以下注释代码是只展示流程图不需要高亮展示/*if(bpmnViewer){this.importXml(this.reviewObj.modelXml);} else {console.error('bpmnViewer is null or undefined!');}*/},getHtmlAttr(source, element, attr) {let result = [];let reg = "<" + element + "[^<>]*?\\s" + attr + "=['\"]?(.*?)['\"]?\\s.*?>";let matched = source.match(new RegExp(reg, "gi"));matched&&matched.forEach(item=>{item&&result.push(item);});return result;},importXml(modelXml){// 处理排他网关， 注：流程图预览时，排他网关需要在对应的<bpmndi:BPMNShape>节点上添加属性isMarkerVisible="true"let gatewayIds = this.getHtmlAttr(modelXml, 'exclusiveGateway', 'id');let modelXmlTemp = modelXml;if(gatewayIds && gatewayIds.length > 0){gatewayIds.forEach(item=>{const result = new RegExp('id="(.+?)"').exec(item)if(result && result[1]){modelXmlTemp = modelXmlTemp.replace('bpmnElement="'+result[1]+'"', 'bpmnElement="'+result[1]+'" isMarkerVisible="true"');}})}bpmnViewer.importXML(modelXmlTemp, (err) =>{if(err){console.error(err);}else{this.importXmlSuccess();}});},importXmlSuccess () {// 使流程图自适应屏幕let canvas = bpmnViewer.get('canvas');canvas.zoom("fit-viewport", "auto");//设置高亮线和高亮节点,需要配合style中的css样式一起使用，否则没有颜色this.setViewerStyle(canvas);//给任务节点加聚焦和离焦事件this.bindEvents();},setViewerStyle(canvas){let highlightNodes = this.highlightNode;if(highlightNodes && highlightNodes.length > 0){                   //节点高亮highlightNodes.forEach(item=>{canvas.addMarker(item, 'highlight');const ele = document.querySelector('.highlight').querySelector('.djs-visual rect');if(ele){ele.setAttribute('stroke-dasharray', '4,4');}});}let highlightLines = this.highlightLine;//顺序线高亮if(highlightLines && highlightLines.length > 0){highlightLines.forEach(item=>{canvas.addMarker(item, 'highlight-line');});}},//悬浮框设置genNodeDetailBox( e, overlays) {debugger;let tempDiv = document.createElement("div");//this.detailInfo = detail;let popoverEl = document.querySelector('.flowMsgPopover');//let popoverEl = this.$refs.flowMsgPopover;console.log(this.detailInfo);tempDiv.innerHTML= popoverEl.innerHTML;tempDiv.className = 'tipBox';tempDiv.style.width = '260px';tempDiv.style.background = 'rgba(255, 255, 255, .6)';overlays.add(e.element.id, {position: {top: e.element.height, left: 0},html: tempDiv});},// 以下代码为：为节点注册鼠标悬浮事件bindEvents(){let eventBus = bpmnViewer.get('eventBus');let overlays = bpmnViewer.get('overlays');eventBus.on('element.hover', (e) => {if(e.element.type === "bpmn:UserTask" ){if(this.nodeDetail[e.element.id]){this.detailInfo = this.nodeDetail[e.element.id];//悬浮框不能直接调用,因为这样调用的话popoverEl.innerHTML一直获取的是上一条数据，因为每次在调用这个方法的时候其实popover标签的变量还没有渲染//this.genNodeDetailBox(this.nodeDetail[e.element.id], e, overlays);//任何修改data的语句后,页面渲染用setTimeout(function(){console.log(233)},0)就可以了setTimeout(() => {console.log("节点类型:"+e.element.type);if(e.element.type === "bpmn:UserTask" ){this.genNodeDetailBox(e, overlays);}},10)}else {getOneActivityVoByProcessInstanceIdAndActivityId({procInstId:"1b6cc49f0bb211ecaf8f0862662f0797", elementId: e.element.id}).then(res=>{//this.nodeDetail[e.element.id] = res.data;res.data.approver="1;2";this.detailInfo = res.data;// this.genNodeDetailBox(e, overlays);setTimeout(() => {console.log("节点类型:"+e.element.type);if(e.element.type === "bpmn:UserTask" ){this.genNodeDetailBox(e, overlays);}},10)});}}});eventBus.on('element.out', (e) => {overlays.clear();});},processZoomIn(zoomStep = 0.1) {let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;if (newZoom > 4) {throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");}this.defaultZoom = newZoom;bpmnViewer.get("canvas").zoom(this.defaultZoom);},processZoomOut(zoomStep = 0.1) {let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;if (newZoom < 0.2) {throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");}this.defaultZoom = newZoom;bpmnViewer.get("canvas").zoom(this.defaultZoom);},processReZoom() {this.defaultZoom = 1;bpmnViewer.get("canvas").zoom("fit-viewport", "auto");}}}</script><style lang="scss">@import '../../../node_modules/bpmn-js/dist/assets/diagram-js.css';@import '../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css';@import '../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';@import '../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';@import '../../../node_modules/bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';/*.bjs-powered-by {display: none;}*/.flowMsgPopover{display: none;}.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {fill: rgba(251, 233, 209, 1) !important; /* color elements as green */}.highlight g.djs-visual >:nth-child(1) {stroke: rgba(214, 126, 125, 1) !important;}.highlight-line g.djs-visual >:nth-child(1) {stroke: rgba(0, 190, 0, 1) !important;}@-webkit-keyframes dynamicNode {to {stroke-dashoffset: 100%;}}.highlight{.djs-visual{-webkit-animation: dynamicNode 18S linear infinite;-webkit-animation-fill-mode: forwards;}}.tipBox {width: 300px;background: #fff;border-radius: 4px;border: 1px solid #ebeef5;padding: 12px;/*.ant-popover-arrow{display: none;}*/p{line-height: 28px;margin:0;padding:0;}}</style>

bpmn整合流程图高亮显示流程进度图相关推荐

安卓java代码写控件_安卓自定义流程进度图控件实例代码
先上效果图: 如图,可实现设置:总流程数.已完进度程数.已完成颜色,各个标题使用方法 1.导入compile 'com.github.pavlospt:circleview:1.3'依赖包(因为用到 ...
流程图形化-流程拆分（DAG(有向无环图)计算所有的路径）
题记: 今天在工作中,实现业务流程图中流程图形化 Node & Flow的计算方式,其中大概是将大的流程图集合拆解成若干个小的子流程,这样在计算的时候,只需要计算子流程的结果就可以实现流程自动 ...
activiti流程跟踪图简单详解
我用的是spring+springmvc+mybatis,前端使用的是jsp ===========前台jsp中的写法========== <img id="imgObj" ...
推荐一个在线创作流程图、思维导图软件—ProcessOn
转载自推荐一个在线创作流程图.思维导图软件-ProcessOn 最近要画流程图,破解了半天Visio2016没搞定,2016的估计都被封了,Visio收费又过贵,又不想折腾低版本的破解,所以找了个在 ...
eps格式流程图制作流程
投稿需要的Latex文档插入的eps格式流程图制作流程,先用visio画图,把它保存成pdf格式(visio可以输出pdf格式),然后用adobe acrobat pro DC(ps:一般的版本好像不 ...
rp软件app流程图_AxureRP介绍–架构图和流程图
1.绘制架构图每一个网站的规划,少不了要绘制树状的网站架构,架构图能够以可视化的方式呈现网页层级.在Axure RP的站点地图面板定义好网站结构,只要点击一下就可以转成树状架构图.开启一个空白页面, ...
前端流程图、步骤导向图的设计
实现效果如下: 主要用到了jquery的一个step插件,但是调试过程中发现好多控件会存在版本不支持的问题,是故重新调整了其结构方实现该功能(童叟无欺). 别的不多说,先上代码 HTML部分: < ...
springBoot(idea)整合activiti简单流程完整示例
最近公司在做一个带审核流程的功能,部门leader指出要集成activiti流程,而且后续的需求里也会用到.之前没有接触过经过查阅资料,自己尝试,最终走完了整个流程,记录一下自己的学习过程,如有不足之 ...
怎么将流程图转化为N-S图（盒图）？
从历史上看,N-S图就是从传统的流程图演化而来的. 随着结构化程序设计方法的出现,美国学者Ike Nassi和Ben Shneiderman于1973年提出了一种新的流程图形式, 这种流程图完全去掉了 ...

bpmn整合流程图高亮显示流程进度图

bpmn整合流程图高亮显示流程进度图相关推荐

最新文章

热门文章