RuoYi-activiti流程图进度追踪实现原理基于历史活动高亮已完成节点与流转连线【免费下载链接】RuoYi-activiti整合RuoYi框架基于Activiti6.0集流程设计、流程部署、流程执行、任务办理、流程监控于一体的开源工作流开发平台。项目地址: https://gitcode.com/gh_mirrors/sp/RuoYi-activitiRuoYi-activiti 是一款基于 RuoYi 框架与 Activiti 6.0 的开源工作流开发平台内置流程设计、部署、执行、任务办理与流程监控五大能力。本文聚焦其中的流程图进度追踪功能它如何只凭流程实例 ID就能自动生成一张走过的节点变蓝、走过的连线加粗的流程图让审批进度一目了然。 流程进度追踪能解决什么问题传统工作流系统里发起人提交申请后往往石沉大海只能反复追问管理员我的单子现在到哪一步了RuoYi-activiti 的流程监控模块提供了直观答案。在「流程实例」页面中每条运行中的流程都配有流程进度入口点击后浏览器直接打开一张流程图已审批的节点被红框标出、已走过的连线高亮显示一眼就能看出流程卡在哪、谁在办实现这一效果的核心只有一个工具类和一个接口下面拆开讲。 数据基础Activiti 的历史活动表流程追踪不需要项目自己记录走到了哪因为Activiti 引擎本身就会自动记录。流程每经过一个节点用户任务、网关、子流程、开始/结束事件引擎都会在历史活动表ACT_HI_ACTINST中写入一条HistoricActivityInstance记录包含activityId/activityName节点标识与名称startTime/endTime进入与离开时间未结束则为空taskAssignee任务办理人processInstanceId所属流程实例项目中的 FlowMonitorController.java 里/flow/monitor/history/{processInstanceId}接口就是基于这张表用HistoryService.createHistoricActivityInstanceQuery()按开始时间升序查询为「运行历史」页面前端 runHistory.vue提供节点流转时间线。流程图追踪复用的正是同一份历史数据。 核心实现四步生成高亮流程图追踪逻辑集中在 ActivitiTracingChart.java 的generateFlowChart()方法中整体分四步第一步拿到历史流程实例通过HistoryService按processInstanceId查出一个HistoricProcessInstance从中得到流程定义 ID——这是定位图长什么样的钥匙。第二步收集已执行节点清单查询该实例的全部历史活动记录把每条记录的activityId收进一个highLightedActivitiIds列表。这个列表就是后面哪些节点要变色的依据。第三步推算已流转连线节点连线SequenceFlow不会作为独立的历史记录保存需要自己推算。getHighLightedFlows()方法的思路很巧妙历史活动已按开始时间升序排列因此相邻两条记录必然对应一条实际走过的连线遍历每个已执行节点取出它在 BPMN 模型中的outgoingFlows出边若某条出边的目标节点也在已执行集合中且恰好是下一个下标差为 1就判定该连线已流转加入highLightedFlowIds。第四步调用引擎渲染器出图借助 Activiti 自带的ProcessDiagramGenerator用RepositoryService.getBpmnModel()加载流程定义模型把两个高亮 ID 列表节点 连线传入generateDiagram()同时指定中文字体宋体/微软雅黑/黑体与 2.0 倍缩放避免中文乱码和图太小生成的图片字节流直接写回 HTTP 响应。对外只有一个接口FlowMonitorController中GET /flow/monitor/traceProcess/{processInstanceId}响应头设置为image/jpeginline展示浏览器打开即是图片无需前端再做渲染。️ 前端怎么调用前端非常简单。processInstance.vue 中的流程进度按钮只做了两件事取出当前行的processInstanceId拼出接口 URL然后openWindow新窗口打开const url /flow/monitor/traceProcess/${processInstanceId}; commonHelper.openWindow(url);由于后端直接吐图片流前端连img标签都不需要天然支持运行中与已结束两种状态的流程——历史表对两者都有完整记录。✨ 设计亮点与扩展思路零额外存储完全复用 Activiti 历史表业务代码不写一条追踪数据运行中/结束后通用历史活动是追加式写入的流程走一步图就更新一步可自定义渲染generateDiagram()还支持传入自定义GraphicInfo字体映射、缩放比例甚至换成 SVG 输出svg格式方便嵌入前端组件易扩展若在generateFlowChart()中额外传入当前活动节点 IDruntimeService可查即可在图上同时标出正在办的节点实现三色状态已完成/进行中/未开始。 相关文件索引说明路径流程追踪图工具类核心ruoyi-admin/src/main/java/com/ruoyi/web/util/ActivitiTracingChart.java流程监控接口traceProcessruoyi-admin/src/main/java/com/ruoyi/web/controller/activiti/FlowMonitorController.java流程实例管理页面ruoyi-ui/src/views/inspection/processInstance.vue运行历史时间线页面ruoyi-ui/src/views/inspection/runHistory.vue前端监控接口封装ruoyi-ui/src/views/inspection/api.js总结一句话RuoYi-activiti 的流程图进度追踪 历史活动记录数据 BPMN 模型出边推算连线 ProcessDiagramGenerator 高亮渲染出图三段式组合代码量小、扩展性强是学习 Activiti 流程可视化非常值得参考的范例。【免费下载链接】RuoYi-activiti整合RuoYi框架基于Activiti6.0集流程设计、流程部署、流程执行、任务办理、流程监控于一体的开源工作流开发平台。项目地址: https://gitcode.com/gh_mirrors/sp/RuoYi-activiti创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考