activiti流程跟蹤圖簡單詳解

我用的是spring+springmvc+mybatis,前端使用的是jsp

===========前台jsp中的寫法==========

<img  id="imgObj" src=""/>    ----標簽直接定義一個圖片，定義一個id

js的下法如下：   
   var src = "${pageContext.request.contextPath}/usertask/imgs.do?cacheFlag"+new Date().getTime();
    $("#imgObj").attr("src", src);

提示：你可以定義一個按鈕，然后點擊按鈕就會執行一個方法，將上面兩行直接放在方法中就行

===========后台中的寫法==========

==========controller的寫法============

/**
     * 獲取流程跟蹤圖
     * @param req
     * @param res
     */
    @RequestMapping("/imgs")
    public void getCode(HttpServletRequest req, HttpServletResponse res){
            InputStream in = null;
            byte[] b=new byte[1024];
            try {
                ServletOutputStream sos = res.getOutputStream();
                in = userTaskService.imgs();
                //文件名
                String src3="UserTask.png";
                res.setHeader("Content-Disposition","attachment;filename="+URLEncoder
                        .encode(src3,"UTF-8"));
                int i=in.read(b, 0, b.length);
                while(i!=-1){
                    sos.write(b, 0, i);
                    i=in.read(b,0,b.length);
                }
                in.close();
                sos.close();
            } catch (MalformedURLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (UnsupportedEncodingException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
      }

==========service的寫法============

/**
     * 流程圖跟蹤
     * @return
     */
    public InputStream imgs(){
            String taskId="16001";//這里的任務id應該從前台傳過來，可以直接在數據庫里查一個放在這里先試試
            //processInstanceId
            String processInstanceId = taskService.createTaskQuery().taskId(taskId).singleResult().getProcessInstanceId();
            //獲取歷史流程實例
            HistoricProcessInstance processInstance =  historyService.createHistoricProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
            //獲取流程圖
            BpmnModel bpmnModel = repositoryService.getBpmnModel(processInstance.getProcessDefinitionId());
            ProcessEngineConfiguration processEngineConfiguration = processEngine.getProcessEngineConfiguration();
            Context.setProcessEngineConfiguration((ProcessEngineConfigurationImpl) processEngineConfiguration);

            ProcessDiagramGenerator diagramGenerator = processEngineConfiguration.getProcessDiagramGenerator();
            ProcessDefinitionEntity definitionEntity = (ProcessDefinitionEntity)repositoryService.getProcessDefinition(processInstance.getProcessDefinitionId());

            List<HistoricActivityInstance> highLightedActivitList =  historyService.createHistoricActivityInstanceQuery().processInstanceId(processInstanceId).list();
            //高亮環節id集合
            List<String> highLightedActivitis = new ArrayList<String>();
            //高亮線路id集合
            List<String> highLightedFlows = getHighLightedFlows(definitionEntity,highLightedActivitList);

            for(HistoricActivityInstance tempActivity : highLightedActivitList){
                String activityId = tempActivity.getActivityId();
                highLightedActivitis.add(activityId);
            }
            //中文顯示的是口口口，設置字體就好了
            InputStream imageStream = diagramGenerator.generateDiagram(bpmnModel, "png", highLightedActivitis,highLightedFlows,"宋體","宋體","宋體",null,1.0);
            //單獨返回流程圖，不高亮顯示
         return imageStream;  
    }
    
    /**
     * 獲取需要高亮的線
     * @param processDefinitionEntity
     * @param historicActivityInstances
     * @return
     */
    private List<String> getHighLightedFlows(
            ProcessDefinitionEntity processDefinitionEntity,
            List<HistoricActivityInstance> historicActivityInstances) {
        List<String> highFlows = new ArrayList<String>();// 用以保存高亮的線flowId
        for (int i = 0; i < historicActivityInstances.size() - 1; i++) {// 對歷史流程節點進行遍歷
            ActivityImpl activityImpl = processDefinitionEntity
                    .findActivity(historicActivityInstances.get(i)
                            .getActivityId());// 得到節點定義的詳細信息
            List<ActivityImpl> sameStartTimeNodes = new ArrayList<ActivityImpl>();// 用以保存后需開始時間相同的節點
            ActivityImpl sameActivityImpl1 = processDefinitionEntity
                    .findActivity(historicActivityInstances.get(i + 1)
                            .getActivityId());
            // 將后面第一個節點放在時間相同節點的集合里
            sameStartTimeNodes.add(sameActivityImpl1);
            for (int j = i + 1; j < historicActivityInstances.size() - 1; j++) {
                HistoricActivityInstance activityImpl1 = historicActivityInstances
                        .get(j);// 后續第一個節點
                HistoricActivityInstance activityImpl2 = historicActivityInstances
                        .get(j + 1);// 后續第二個節點
                if (activityImpl1.getStartTime().equals(
                        activityImpl2.getStartTime())) {
                    // 如果第一個節點和第二個節點開始時間相同保存
                    ActivityImpl sameActivityImpl2 = processDefinitionEntity
                            .findActivity(activityImpl2.getActivityId());
                    sameStartTimeNodes.add(sameActivityImpl2);
                } else {
                    // 有不相同跳出循環
                    break;
                }
            }
            List<PvmTransition> pvmTransitions = activityImpl
                    .getOutgoingTransitions();// 取出節點的所有出去的線
            for (PvmTransition pvmTransition : pvmTransitions) {
                // 對所有的線進行遍歷
                ActivityImpl pvmActivityImpl = (ActivityImpl) pvmTransition
                        .getDestination();
                // 如果取出的線的目標節點存在時間相同的節點里，保存該線的id，進行高亮顯示
                if (sameStartTimeNodes.contains(pvmActivityImpl)) {
                    highFlows.add(pvmTransition.getId());
                }
            }
        }
        return highFlows;
    }

===============================================

下面是我的效果圖