在實際生產中，我們除了需要檢視流程定義資訊的列表外，還需要檢視相應的流程定義圖，以及每個流程例項的執行狀態圖

流程定義圖

流程例項執行狀態圖，實際上流程例項執行狀態圖就是在流程定義圖的基礎上，查到該流程例項執行的當前任務節點，並根據此任務節點查出.bpmn裡的座標，並在流程定義圖上使用前端技巧做標記

下面介紹如何檢視流程例項執行狀態圖

//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>

結果：