Activiti工作流框架学习七：流程定义图以及流程实例运行状态图

在实际生产中，我们除了需要查看流程定义信息的列表外，还需要查看相应的流程定义图，以及每个流程实例的运行状态图

流程定义图

流程实例运行状态图，实际上流程实例运行状态图就是在流程定义图的基础上，查到该流程实例执行的当前任务节点，并根据此任务节点查出.bpmn里的坐标，并在流程定义图上使用前端技巧做标记

查看流程定义图的例子已经在 Activiti工作流框架学习六：与Spring框架整合写过，这里不再介绍

下面介绍如何查看流程实例运行状态图

---

//html
<a onclick="showPng('${id}');" href="#">查看流程实例运行状态图</a>
//js
function showPng(id){
    window.showModalDialog("${pageContext.request.contextPath}/processInstanceAction_showPng.action?id="+id);
}

---

//ProcessInstanceAction.java
/**
 * 根据流程实例id查询坐标、部署id、图片名称
 */
private String id;
public String showPng(){
    //1、根据流程实例id查询流程实例对象
    ProcessInstance processInstance = runtimeService.createProcessInstanceQuery().processInstanceId(id).singleResult();
    //2、根据流程实例对象查询流程定义id
    String processDefinitionId = processInstance.getProcessDefinitionId();
    //3、根据流程定义id查询流程定义对象
    ProcessDefinition processDefinition = repositoryService.createProcessDefinitionQuery().processDefinitionId(processDefinitionId).singleResult();
    //4、根据流程定义对象查询部署id
    deploymentId = processDefinition.getDeploymentId();
    imageName = processDefinition.getDiagramResourceName();

    //查询坐标
    //1、获得当前流程实例执行到哪个节点
    String activityId = processInstance.getActivityId();//usertask2
    //2、加载bpmn（xml）文件，获得一个流程定义对象
    ProcessDefinitionEntity pd = (ProcessDefinitionEntity) repositoryService.getProcessDefinition(processDefinitionId);//查询act_ge_bytearray
    //3、根据activitiId获取含有坐标信息的对象
    ActivityImpl findActivity = pd.findActivity(activityId);
    int x = findActivity.getX();
    int y = findActivity.getY();
    int width = findActivity.getWidth();
    int height = findActivity.getHeight();

    ActionContext.getContext().getValueStack().set("x", x);
    ActionContext.getContext().getValueStack().set("y", y);
    ActionContext.getContext().getValueStack().set("width", width);
    ActionContext.getContext().getValueStack().set("height", height);

    return "showPng";
}

---

<!-- 流程实例管理 -->
<action name="processInstanceAction_*" class="processInstanceAction" method="{1}">
    <!-- 查出当前执行任务的坐标以及图片名称后跳转到显示图片的页面 -->
    <result name="showPng">/WEB-INF/pages/workflow/image.jsp</result>
</action>

---

//image.jsp
<!-- 1.获取到规则流程图 -->
<img style="position: absolute;top: 0px;left: 0px;"
     src="processInstanceAction_viewImage?deploymentId=${deploymentId}&imageName=${imageName}">

<!-- 2.根据当前活动的坐标，动态绘制DIV -->
<div style="position: absolute;border:1px solid red;top:${y-1}px;left:${x-1}px;width:${width}px;height:${height}px;"></div>

---

//根据image.jsp页面传过来的参数取得图片流返回
private String deploymentId;
private String imageName;

//根据流程部署id和图片名称，获取png输入流
public String viewImage(){
    InputStream pngStream = repositoryService.getResourceAsStream(deploymentId, imageName);
    ActionContext.getContext.getValueStack().set("pngStream", pngStream);
    return "viewImage";
}

---

//struts.xml
<!-- 流程实例管理 -->
<action name="processInstanceAction_*" class="processInstanceAction" method="{1}">
    <!-- 查出当前执行任务的坐标以及图片名称后跳转到显示图片的页面 -->
    <result name="showPng">/WEB-INF/pages/workflow/image.jsp</result>
    <result name="viewImage" type="stream">
        <param name="contentType">image/png</param>
        <param name="inputName">pngStream</param>
    </result>
</action>

---

结果：