流程执行时,有时候需要看一下当前的工作卡在哪一步了,对于熟悉流程的人员来说,看到节点的名字即可。对于不熟悉的人员来讲,就需要把整个流程图显示出来,把当前的工作点标注出来。
在生成工作流程xml文件的时候,已经生成了一个工作流程的png流程图,只需要在这个png上把当前活跃的节点表示出来即可。
网上的一种做法很简单,就是在这个png上再加一个div层,把执行的活跃节点框起来就可以了。
首先:
1. 获取当前的流程图显示
2. 获取当前的活跃节点
3. 生成相关的Div层
详细代码:
1. 获取当前的流程图:
由于流程图是放在load字段中的(发布的时候,需要把流程图和xml文件打包成zip文件一起发布,否则后面是找不到这个png文件的),通过RepositoryService获取到流程图:
- InputStream is = repositoryService.getResourceAsStream(deployId, pngFileName);
- //这个inputstream中的内容就是图片,直接输出到页面中
- byte[] pic = new byte[1024];
- int len = -1;
- while( (len=is.read(pic,1024) )!=-1 ){
- response.getOutputStream().write(pic, 0, len );
- }
以上的工作可以放在一个单独的页面中完成,作用就是输出图片。
2. 获取当前活跃的节点:
- // 通过processId,获取到processInstance
- ProcessInstance pi = executionService.findProcessInstanceById(id);
- // 获取所有活跃的节点:
- Set<String> activitySet = pi.findActiveActivityName();
3. 在页面上输出:
首先输出完成的png图片,随后在每个活跃的节点上画一个框:
输出png图片:
- <img src="第一步完成的页面地址?参数" style="position:absolute;left:0px;top:0px;">
- // 注意这里面style,要和后面画框的div匹配,否则对不起来了
画框:
- //刚才已经获取了所有的活跃节点
- <%
- for( String activityName : activitySet ) {
- ActivityCoordinates ac = repositoryService.getActivityCoordinates(
- pi.getProcessDefinitionId(); activityName );
- %>
- // 每个活跃节点上,画一个框
- <div style="position:absolute; border; 1px solid red; left:<%=ac.getX()%>; top:<%=ac.getY()%>;width:<%=ac.getWidth()%>;height:<%=ac.getHeight()%>;" />
- <% } %>