activiti 流程跟蹤圖 flow 顯示

1.定義全局變量 

package com.thinkgem.jeesite.act;
import java.util.HashMap;  
import java.util.Map;  
import org.activiti.engine.delegate.event.ActivitiEvent;  
import org.activiti.engine.delegate.event.ActivitiEventListener;  
import org.activiti.engine.delegate.event.impl.ActivitiSequenceFlowTakenEventImpl;
import org.apache.commons.logging.Log;  
import org.apache.commons.logging.LogFactory;  
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
public class GlobalEventListener implements  ActivitiEventListener {	 
	 /**
	  *    <entry key="TASK_CREATED" value="taskCreateListener"/>  
		   <entry key="TASK_COMPLETED" value="taskCompleteListener"/>  
		   <entry key="TASK_ASSIGNED" value="taskAssignedListener"/>  
		   <entry key="PROCESS_COMPLETED" value="processCompleteListener"/>  
		   <entry key="ACTIVITY_STARTED" value="activityStartedListener"/>  
		   <entry key="ACTIVITY_COMPLETED" value="activityCompletedListener"/>  
		   <entry key="ACTIVITY_SIGNALED" value="activitySignaledListener"/>  
	  */
	 @Override  
	 public void onEvent(ActivitiEvent event) {
		 
	  String eventType=event.getType().name();  
	 // System.out.println("typeName=" + eventType);
	  
	  if("SEQUENCEFLOW_TAKEN".equals(eventType)){
		  ActivitiSequenceFlowTakenEventImpl  flow= (ActivitiSequenceFlowTakenEventImpl) event ;
		  System.out.println("流程實例Id--"+flow.getProcessInstanceId());
		  System.out.println(flow.getId());
          // 把   流程實例id,和 flow.getId存入數據庫便可
          // 這裏sleep 幾秒鐘

	  }
	  System.out.print("");
	 }  
	  
	 @Override  
	 public boolean isFailOnException() {  
	  return false;  
	 }  
}

<!-- Activiti begin -->
	<bean id="processEngineConfiguration" class="org.activiti.spring.SpringProcessEngineConfiguration">
		<property name="dataSource" ref="dataSource" />
		<property name="transactionManager" ref="transactionManager" />
		<property name="deploymentResources" value="classpath*:/act/deployments/**/*.bar"/><!-- 自動部署 -->
		<property name="databaseSchemaUpdate" value="true" /><!-- 自動建表，自動更新表結構 -->
		<property name="jobExecutorActivate" value="true" /><!-- 該參數將啓用定時相關的功能 -->
		<property name="history" value="full" /><!-- 歷史記錄保存模式 -->

		<!-- UUID做爲主鍵生成策略 -->
		<property name="idGenerator" ref="idGen" />
		
		<!-- 生成流程圖的字體 -->
		<property name="activityFontName" value="${activiti.diagram.activityFontName}"/>
		<property name="labelFontName" value="${activiti.diagram.labelFontName}"/>
		<property name="annotationFontName" value="${activiti.diagram.annotationFontName}"/><!-- 5.21.0 新增參數 -->
		
		<!-- 自定義用戶權限 ，必須從新實現用戶和組的相應方法-->
		<property name="customSessionFactories"> 
			<list>
				<bean class="com.thinkgem.jeesite.modules.act.service.ext.ActUserEntityServiceFactory"/>
				<bean class="com.thinkgem.jeesite.modules.act.service.ext.ActGroupEntityServiceFactory"/>
			</list>
		</property>
		
		<!-- 全局監聽器  -->
        <property name="eventListeners">
	        <list>
	            <ref bean="globalEventListener"/>
	        </list>
        </property>
	</bean>

<!--流程全局事件處理器  -->
	<bean id="globalEventListener" class="com.thinkgem.jeesite.act.GlobalEventListener">  
		<!--    <property name="handlers">   -->
		<!--   <map>   -->
		<!--    <entry key="TASK_CREATED" value="taskCreateListener"/>   -->
		<!--    <entry key="TASK_COMPLETED" value="taskCompleteListener"/>   -->
		<!--    <entry key="TASK_ASSIGNED" value="taskAssignedListener"/>   -->
		<!--    <entry key="PROCESS_COMPLETED" value="processCompleteListener"/>   -->
		<!--    <entry key="ACTIVITY_STARTED" value="activityStartedListener"/>   -->
		<!--    <entry key="ACTIVITY_COMPLETED" value="activityCompletedListener"/>   -->
		<!--    <entry key="ACTIVITY_SIGNALED" value="activitySignaledListener"/>   -->
		<!--   </map>   -->
		<!--  </property>   -->
	</bean>

 

1,  生成 flow 和   結點

/** 
	   *   查詢 高亮節點和 flow
	   *
	   */
		private ObjectNode getHighLighted_CWP(String processDefinitionId,
				String processInstanceId) {
			ProcessDefinitionEntity pde = (ProcessDefinitionEntity) repositoryService.getProcessDefinition(processDefinitionId);
			List<ActivityImpl> activities = pde.getActivities();
			Map<String, ActivityImpl> activityMap = new HashMap<String, ActivityImpl>(activities.size());
			for(ActivityImpl   acti :  activities){
			   activityMap.put(  acti.getId() ,acti);
			}// 生成   流程圖的全部節點的map
			
			List<HistoricActivityInstance> onDolist = historyService.createHistoricActivityInstanceQuery().processInstanceId(processInstanceId).unfinished().list();
			List<HistoricActivityInstance>  histAtcilist = historyService.createHistoricActivityInstanceQuery().processInstanceId(processInstanceId).
			orderByHistoricActivityInstanceStartTime().asc()
			.list();
			
			List<List<HistoricActivityInstance>> histActiArrayList=new ArrayList<List<HistoricActivityInstance>>(); // 存放因此得歷史數據
			Map<String ,List<HistoricActivityInstance>>  maphistAct=new HashMap<String, List<HistoricActivityInstance>>();
			for(HistoricActivityInstance histActi:histAtcilist){
				String executionId = histActi.getExecutionId();
				List<HistoricActivityInstance> list = maphistAct.get(executionId);
				if(null!=list){
					list.add(histActi);// 添加元素 
				}else{// 第一次生成
					  list=new ArrayList<HistoricActivityInstance>(); // 建立實體
					  list.add(histActi);  //添加元素
					  histActiArrayList.add(list); // 添加到列表
					  maphistAct.put(executionId, list);// 添加到map
				}
			}
			/** histActiArrayList  對這個分析
			 *  第0個組, 必定是 開始事件,   flowId一定在連續的求解當中, 若是中斷, 則求出惟一的路徑,若是不惟一,暫時缺失留下bug待之後修復
			 *  第1個之後的組,則從惟一中選擇,若是不惟一,則缺省留下bug,待之後修復
			 */
			List<String> highLightedFlows =new ArrayList<String>();
			boolean  isDuanKai=true;
			if(histActiArrayList.size()>=0){
				List<HistoricActivityInstance> list = histActiArrayList.get(0);
				for(int i=1; i<list.size();i++){
					isDuanKai=true ; // 斷開
					ActivityImpl  pre = activityMap.get(list.get(i-1).getActivityId());
					ActivityImpl  current = activityMap.get(list.get(i).getActivityId());
					List<PvmTransition> incomingTransitions = current.getIncomingTransitions();
					for(PvmTransition  pvts:incomingTransitions){
						if(pvts.getSource().getId().equals(pre.getId())){ //找到了鏈接,沒有斷開
							isDuanKai=false;
							highLightedFlows.add(pvts.getId());
						}
					}//  若是找到了,就不往下走
					if(isDuanKai){  // 斷開了 ,則取惟一的路徑,若是多餘2條,暫時不取,待後面修復
						 if(incomingTransitions.size()==1){
							 highLightedFlows.add( incomingTransitions.get(0).getId() );
						 }
					}
				}
			}// 處理第1位後數據 
			if(histActiArrayList.size()>1){//有多個執行id
				for(int i=1;i<histActiArrayList.size();i++){
					List<HistoricActivityInstance> list = histActiArrayList.get(i);
					// 這裏處理 第二個以上的執行id
					ActivityImpl  acti0 = activityMap.get( list.get(0).getActivityId()); // 處裏第一個元素,
					if(acti0.getIncomingTransitions().size()==1){  //惟一的路口,則
						highLightedFlows.add(acti0.getIncomingTransitions().get(0).getId());// 添加惟一
					}
					
					for(int j=1;j<list.size();j++){
						isDuanKai=true ; // 斷開
						ActivityImpl  pre = activityMap.get(list.get(j-1).getActivityId());
						ActivityImpl  current = activityMap.get(list.get(j).getActivityId());
						List<PvmTransition> incomingTransitions = current.getIncomingTransitions();
						for(PvmTransition  pvts:incomingTransitions){
							if(pvts.getSource().getId().equals(pre.getId())){ //找到了鏈接,沒有斷開
								isDuanKai=false;
								highLightedFlows.add(pvts.getId());
							}
						}//  若是找到了,就不往下走
						if(isDuanKai){  // 斷開了 ,則取惟一的路徑,若是多餘2天,暫時不取,待後面修復
							 if(incomingTransitions.size()==1){
								 highLightedFlows.add( incomingTransitions.get(0).getId() );
							 }
						}
					}
					
				}
			}
			
			// 生成數據  
			ObjectNode responseJSON = objectMapper.createObjectNode();
			ArrayNode activitiesArray = objectMapper.createArrayNode();
			ArrayNode flowsArray = objectMapper.createArrayNode();
			
			ArrayNode histactivities = objectMapper.createArrayNode();
			
			for( HistoricActivityInstance   hi:  histAtcilist){
				histactivities.add(hi.getActivityId());
			}
			
			for (HistoricActivityInstance  hi: onDolist) {  // 設置 正在執行的
				activitiesArray.add(hi.getActivityId());
			}

			for (String flow : highLightedFlows) {
				flowsArray.add(flow);
			}
			
			responseJSON.put("processInstanceId", processInstanceId);
			responseJSON.put("processDefinitionId",processDefinitionId);
			responseJSON.put("activities", activitiesArray);
			responseJSON.put("histactivities", histactivities);  // 設置 歷史
			
			responseJSON.put("flows", flowsArray);
			return responseJSON;
		}

ProcessDiagramGenerator.js

highLightActivity: function(activityId){
		var shape = this.g.getById(activityId);
		if (!shape) {
			console.error("Activity " + activityId + " not found");
			return;
		}
		
		var contextObject = shape.data("contextObject");
		if (contextObject)
			console.log("--> highLightActivity: ["+contextObject.getProperty("type")+"], activityId: " + contextObject.getId());
		else
			console.log("--> highLightActivity: ", shape, shape.data("contextObject"));
		
		shape.attr("stroke-width", THICK_TASK_BORDER_STROKE);
		shape.attr("stroke", HIGHLIGHT_COLOR);
	},
	highLightActivity_ByColor: function(activityId,COLOR){   // 設置   節點  顏色
		var shape = this.g.getById(activityId);
		if (!shape) {
			console.error("Activity " + activityId + " not found");
			return;
		}
		
		var contextObject = shape.data("contextObject");
		if (contextObject)
			console.log("--> highLightActivity: ["+contextObject.getProperty("type")+"], activityId: " + contextObject.getId());
		else
			console.log("--> highLightActivity: ", shape, shape.data("contextObject"));
		
		shape.attr("stroke-width", THICK_TASK_BORDER_STROKE);
		shape.attr("stroke", COLOR);
	},
	
	highLightFlow: function(flowId){
		var shapeFlow = this.g.getById(flowId);
		if (!shapeFlow) {
			console.error("Flow " + flowId + " not found");
			return;
		}
		
		var contextObject = shapeFlow.data("contextObject");
		if (contextObject)
			console.log("--> highLightFlow: ["+contextObject.id+"] " + contextObject.flow);
		//console.log("--> highLightFlow: ", flow.flow, flow.data("set"));
		
		var st = shapeFlow.data("set");
		
		st.attr("stroke-width", SEQUENCEFLOW_HIGHLIGHT_STROKE);
		st.attr("stroke", HIGHLIGHT_COLOR);
		var withArrowHead = shapeFlow.data("withArrowHead");
		if (withArrowHead)
			st[1].attr("fill", HIGHLIGHT_COLOR);
		
		st.forEach(function(el){
			//console.log("---->", el);
			//el.attr("")
		});
	},
	highLightFlow_ByColor: function(flowId,COLOR){  //  設置 flow 顏色
		var shapeFlow = this.g.getById(flowId);
		if (!shapeFlow) {
			console.error("Flow " + flowId + " not found");
			return;
		}
		
		var contextObject = shapeFlow.data("contextObject");
		if (contextObject)
			console.log("--> highLightFlow: ["+contextObject.id+"] " + contextObject.flow);
		//console.log("--> highLightFlow: ", flow.flow, flow.data("set"));
		
		var st = shapeFlow.data("set");
		
		st.attr("stroke-width", SEQUENCEFLOW_HIGHLIGHT_STROKE);
		st.attr("stroke", COLOR);
		var withArrowHead = shapeFlow.data("withArrowHead");
		if (withArrowHead)
			st[1].attr("fill", COLOR);
		
		st.forEach(function(el){
			//console.log("---->", el);
			//el.attr("")
		});
	},

ProcessDiagramCanvas.js 

for (var i in highLights.histactivities) {  // 設置歷史流程節點
			var activityId = highLights.histactivities[i];
			processDiagramCanvas.highLightActivity_ByColor(activityId,Color.LimeGreen); //  
		}
		
		for (var i in highLights.activities) {
			var activityId = highLights.activities[i];
			processDiagramCanvas.highLightActivity_ByColor(activityId,Color.Firebrick1);//  設置任務結點
		}
		
		//   設置  flow線高亮
		for (var i in highLights.flows) {
			var flowId = highLights.flows[i];
			var object = processDiagramCanvas.g.getById(flowId);
			var flow = object.data("contextObject");
			flow.isHighLighted = true;
			processDiagramCanvas.highLightFlow_ByColor(flowId,Color.LimeGreen);
		}

index.html

ActivitiRest.options = {
	processInstanceHighLightsUrl: baseUrl + "/act/service/process-instance/{processInstanceId}/highlights?processDefinitionId="+processDefinitionId+"&callback=?",
    processDefinitionUrl: baseUrl + "/act/service/process-definition/{processDefinitionId}/diagram-layout?callback=?",
    processDefinitionByKeyUrl: baseUrl + "/act/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?",
    processInstanceUrl: baseUrl + "/act/service/process-instance/{processInstanceId}/diagram-layout?callback=?"
  };