1、后端直接传入任务的ID
/**
* 查看当前流程图已到达节点(包含路径)
*/
public String genProcessDiagrams(@RequestParam String taskId, HttpServletResponse httpServletResponse) throws IOException {
String processId = taskService.createTaskQuery().taskId(taskId).singleResult().getProcessInstanceId();
ProcessInstance pi = runtimeService.createProcessInstanceQuery().processInstanceId(processId).singleResult();
HistoricProcessInstance his = historyService.createHistoricProcessInstanceQuery().processInstanceId(processId).singleResult();
String pdi="";
//流程走完的不显示图
if (pi == null) {
pdi=his.getProcessDefinitionId();
}else {
pdi=pi.getProcessDefinitionId();
}
if(pdi==""){
return null;
}
//获得活动的节点
List<HistoricActivityInstance> historyProcess = historyService.createHistoricActivityInstanceQuery().processInstanceId(processId).orderByHistoricActivityInstanceStartTime().asc().list();
List<String> activityIds = new ArrayList<>();
List<String> flows = new ArrayList<>();
//获取流程图
BpmnModel bpmnModel = repositoryService.getBpmnModel(pdi);
for (HistoricActivityInstance hi : historyProcess) {
String activityType = hi.getActivityType();
if (activityType.equals("sequenceFlow") || activityType.equals("exclusiveGateway")) {
flows.add(hi.getActivityId());
} else if (activityType.equals("userTask") || activityType.equals("startEvent")) {
activityIds.add(hi.getActivityId());
}
}
List<Task> tasks = taskService.createTaskQuery().processInstanceId(processId).list();
for (Task task : tasks) {
activityIds.add(task.getTaskDefinitionKey());
}
ProcessEngineConfiguration engConf = processEngine.getProcessEngineConfiguration();
engConf.setActivityFontName("宋体");
engConf.setLabelFontName("宋体");
engConf.setAnnotationFontName("宋体");
//定义流程画布生成器
ProcessDiagramGenerator processDiagramGenerator = engConf.getProcessDiagramGenerator();
InputStream in = processDiagramGenerator.generateDiagram(bpmnModel, "png", activityIds, flows, engConf.getActivityFontName()
, engConf.getLabelFontName(), engConf.getAnnotationFontName(), engConf.getClassLoader(), 1.0, true);
// 设置响应的类型格式为图片格式
httpServletResponse.setContentType("image/png");
//禁止图像缓存。
httpServletResponse.setHeader("Pragma", "no-cache");
httpServletResponse.setHeader("Cache-Control", "no-cache");
httpServletResponse.setDateHeader("Expires", 0);
String base64Img = null;
try {
// in.available()返回文件的字节长度
byte[] buf = new byte[in.available()];
// 将文件中的内容读入到数组中
in.read(buf);
// 进行Base64编码处理
base64Img = new String(Base64Utils.encode(buf), StandardCharsets.UTF_8);
}catch (IOException e){
e.printStackTrace();
} finally {
if (in != null) {
in.close();
}
}
return base64Img;
}
2、前端实现
<div id="content36">
<BoxHead title="流程审批跟踪" />
<div style="text-align: center">
<img :src="imgSrc" />
</div>
</div>
// 获取审批图
genProcessDiagrams() {
genProcessDiagramsApi({ taskId: this.taskIds })
.then((res) => {
this.imgSrc = "data:image/png;base64," + res.data;
})
.catch((err) => {
if (+err.status === -1) {
this.handleMessage(err.statusText);
}
});
},