流程图进度展示

基于Flowable，展示工作流审批流程进度

本实例基于Springboot+React项目，在前端用Ant Design的Image组件展示流程进度图

后端处理方法如下：

/**
 * 根据流程节点绘图
 *
 * @param processInstanceId   流程实例id
 * @param httpServletResponse http响应
 */
private void getFlowDiagram(String processInstanceId, HttpServletResponse httpServletResponse) {
	// 获得当前活动的节点
	String processDefinitionId;
	// 如果流程已经结束，则得到结束节点
	if (this.isFinished(processInstanceId)) {
		HistoricProcessInstance pi = historyService.createHistoricProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
		processDefinitionId = pi.getProcessDefinitionId();
	} else {
		// 如果流程没有结束，则取当前活动节点
		// 根据流程实例ID获得当前处于活动状态的ActivityId合集
		ProcessInstance pi = runtimeService.createProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
		processDefinitionId = pi.getProcessDefinitionId();
	}
	// 高亮节点集合
	List<String> highLightedActivities = new ArrayList<>();
	// 高亮连线集合
	List<String> highLightedFlows = new ArrayList<>();
	// 获得活动的节点
	List<HistoricActivityInstance> highLightedActivityList = historyService.createHistoricActivityInstanceQuery().processInstanceId(processInstanceId).orderByHistoricActivityInstanceStartTime().asc().list();

	for (HistoricActivityInstance tempActivity : highLightedActivityList) {
		if("sequenceFlow".equals(tempActivity.getActivityType())){
			// 添加高亮连线
			highLightedFlows.add(tempActivity.getActivityId());
		}else {
			// 添加高亮节点
			String activityId = tempActivity.getActivityId();
			highLightedActivities.add(activityId);
		}

	}

	List<String> flows = new ArrayList<>();
	// 获取流程图
	BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinitionId);
		DefaultProcessDiagramGenerator defaultProcessDiagramGenerator = new DefaultProcessDiagramGenerator(); // 创建默认的流程图生成器
	String activityFontName = "宋体"; // 节点字体
	String labelFontName = "微软雅黑"; // 连线标签字体
	String annotationFontName = "宋体"; // 连线标签字体
	ClassLoader customClassLoader = null; // 类加载器
	double scaleFactor = 1.0d; // 比例因子，默认即可
	boolean drawSequenceFlowNameWithNoLabelDI = true; // 不设置连线标签不会画

	// 生成图片
	InputStream in = defaultProcessDiagramGenerator.generateDiagram(bpmnModel, "bmp", highLightedActivities
		, highLightedFlows, activityFontName, labelFontName, annotationFontName, customClassLoader,
		scaleFactor, drawSequenceFlowNameWithNoLabelDI); // 获取输入流

	OutputStream out = null;
	byte[] buf = new byte[1024];
	int length;
	try {
		out = httpServletResponse.getOutputStream();
		while ((length = in.read(buf)) != -1) {
			out.write(buf, 0, length);
		}
	} catch (IOException e) {
		log.error("操作异常", e);
	} finally {
		IoUtil.closeSilently(out);
		IoUtil.closeSilently(in);
	}
}

前端部分代码

请求：

export async function getFlowProcessPicture(params: any){
  return request(`/api/sino-flow/process/diagram-view?processInstanceId=${params}`,{
    method: 'GET',
    responseType: 'blob',
  })
}

注意响应类型一定要为blob，

  const getImage = async (proInsId: string) => {
    const res = await getFlowProcessPicture(proInsId);
    setImg(URL.createObjectURL(res))
  }

这里的setImg()方法是用的React的Hooks函数的useState（），声明为

const [img,setImg] = useState("");//初始化类型为字符串

然后我们在标签中的src属性下直接引用img即可展示工作流审批的进度。