activiti5.17.0流程圖及節點顯示

阿新 • • 發佈：2019-01-21

這篇文章寫得很好，揭示了圖片點擊出現資訊的方法，於是我也做了，只不過有些改動，可能是activiti的版本不同的原因。

jsp頁面，通過流程例項id進行操作

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/pages/common/common-js.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>Insert title here</title>  
        <style type="text/css">  
            .activity-attr{border-radius: 10px; border: 3px solid red; transition:ease-out 0.5s; box-shadow:0px 0px 9px red;}  
            #processKey{color: red;}  
            #flowImageAndRect{position: relative;overflow: scroll;height:300px; heibackground-image: url('grid_10.png')}  
            body,html{margin: 0px;padding:0px;}  
        </style>  
        <script type="text/javascript">  
            var baseURL = "<%=rootPath%>/pages/WorkTaskCon/";
            $(function(){  debugger;
                var pid = '${flowKey}'; // 流程定義的key  
                var $flowImageAndRect = $('#flowImageAndRect');  
                $('#processKey').html('流程定義的key --> ' + pid);  
                // 載入流程圖片  
                loadProcessImage(pid,$flowImageAndRect);  
                // 載入各節點資訊，最終實現，在點選圖片上的各節點時，出現高亮  
                setTimeout(function(){  
                    loadProcessTrace(pid,$flowImageAndRect);  
                },200);  
                  
                var $revClickRect = null; // 上次點選的圖形  
                // 繫結click事件，點選實現，只有點選的不是同一個時，才顯示紅色的邊框（如果多次點選同一個，紅色的邊框只出現一次）  
                $('#flowImageAndRect').off('click').on('click','.activity-attr',function(e){  
                    var $this = $(this);  
                    var prevFlag = false; // 是上一個圖形，避免多次點選同一個  
                    if($revClickRect){ // 說明不是第一次點選  
                        prevFlag = ($revClickRect.attr('actId')!=$this.attr('actId')) ? false : true;// 說明2次點選的不是同一個  
                        if(!prevFlag)  
                            $revClickRect.css('opacity','0');  
                    }  
                    if(!prevFlag){ // 此處可以請求後臺，載入相關的資料（多次點選同一個，下方可確保只執行一次）  
                        $this.css('opacity','1'); // 顯示當前的  
                        $revClickRect = $this; // 將當前設定為上次點選的  
                        $('#info').html('節點ID --> ' + $this.attr('actId') + "  |  " + "節點名稱 --> " + $this.attr('name'));  
                    }  
                });  
            });  
               
            /** 
             * 載入圖片 
             */  
            function loadProcessImage(pid,$flowImageAndRect){   debugger;
                var imageUrl =baseURL+ 'readResource.htm?pid=' + pid;  
                // 載入圖片  
                $('<img />',{  
                    "src" : imageUrl,  
                    "alt" : ''  
                }).appendTo($flowImageAndRect);   
            }  
              
            /** 
             * 載入流程中各節點的資訊  
             * @param pid : 流程定義的key 
             * @param $flowImageAndRect  
             */  
            function loadProcessTrace(pid,$flowImageAndRect){   debugger;
                var traceUrl = baseURL+'getProcessTrace.htm?pid='+pid;  
                $.getJSON(traceUrl,function(infos){  
                    var html = "";  
                    $.each(infos,function(i,v){  
                        // 矩形的div  
                        var $div = $('<div/>', {  
                                'class': 'activity-attr'  
                        }).css({  
                            position: 'absolute',  
                            left: v.x,  
                            top: v.y,  
                            width: v.width - 3,  
                            height:v.height - 3,  
                            opacity: 0,  
                            zIndex: 100,  
                   			cursor : 'pointer'  
                        }).attr({'actId':v.actId,'name':v.name});  
                        html += $div.prop("outerHTML");  
                    });  
                    $('<div />',{'id':'processRect'}).html(html).appendTo($flowImageAndRect);  
                });  
            }  
        </script>  
    </head>  
    <body>  
        <div id="main">  
            <div id="flowImageAndRect">  
                  
            </div>  
              
            <div id="processKey" style="font-size: 12px;text-align: center;margin-bottom: 50px;">  
              
            </div>  
              
            <div id="info" style="font-size: 12px;text-align: center;">  
                  
            </div>  
        </div>  
    </body>  
</html>

java程式碼，通過反射呼叫原始碼中的節點x、y以及資訊

 /** 
    * 根據流程的key生成圖片 
    *  
    * @param request 
    * @param response 
    * @param wfKey 流程定義的key 
    */  
    @RequestMapping(value="readResource.htm")
	public void readResource(HttpServletRequest request,HttpServletResponse response) {  
		try {
			IMap params = new IMap(request);
			String processDefinitionId = ProcessEngines.getDefaultProcessEngine().getHistoryService()
					.createHistoricProcessInstanceQuery()
					.processInstanceId(params.getString("pid")).singleResult()
					.getProcessDefinitionId();
			RepositoryService repositoryService =  ProcessEngines.getDefaultProcessEngine().getRepositoryService();  
			ProcessDefinitionEntity processDefinition = (ProcessDefinitionEntity) ((RepositoryServiceImpl) repositoryService)
					.getDeployedProcessDefinition(processDefinitionId);
			
			InputStream imageStream = iActivitiUtilSvc.getFlowImageByKey(processDefinition.getKey());

			// 輸出資源內容到相應物件
			byte[] b = new byte[1024];
			int len;
			while ((len = imageStream.read(b, 0, 1024)) != -1) {
				response.getOutputStream().write(b, 0, len);
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
    }
    /** 
     * 獲取各個節點的具體的資訊 
     * @param wfKey 
     *      流程定義的key 
     * @return 
     */  
    @RequestMapping("getProcessTrace.htm")  
    @ResponseBody  
    public List<Map<String, Object>> getProcessTrace(String pid) throws Exception {  
        List<Map<String, Object>> activityInfos = new ArrayList<Map<String, Object>>();  
        String processDefinitionId = ProcessEngines.getDefaultProcessEngine().getHistoryService()
				.createHistoricProcessInstanceQuery()
				.processInstanceId(pid).singleResult()
				.getProcessDefinitionId();
        RepositoryService repositoryService =  ProcessEngines.getDefaultProcessEngine().getRepositoryService();  
		ProcessDefinitionEntity processDefinition = (ProcessDefinitionEntity) ((RepositoryServiceImpl) repositoryService)
				.getDeployedProcessDefinition(processDefinitionId);
        List<ActivityImpl> activitiList = processDefinition.getActivities();  
        InputStream xmlIs = repositoryService.getResourceAsStream(processDefinition.getDeploymentId(), processDefinition.getResourceName());  
        BpmnModel bm = new BpmnXMLConverter().convertToBpmnModel(new InputStreamSource(xmlIs), false, true);  
        // 下方使用反射獲取最小的x和y，仔細看就會發現呼叫的是上方2.1節的方法 
        Class<?> clazz = Class.forName("org.activiti.image.impl.DefaultProcessDiagramGenerator");  
        Method method = clazz.getDeclaredMethod("initProcessDiagramCanvas", BpmnModel.class, String.class,
        	      String.class, String.class, ClassLoader.class);  
        method.setAccessible(true);   
        DefaultProcessDiagramCanvas pdc = (DefaultProcessDiagramCanvas) method.invoke(clazz.newInstance(), bm,"png", "宋體", "宋體",  null); // 呼叫方法  
  
        clazz = Class.forName("org.activiti.image.impl.DefaultProcessDiagramCanvas");  
        Field minXField = clazz.getDeclaredField("minX"); // 得到minX欄位  
        Field minYField = clazz.getDeclaredField("minY");  
        minXField.setAccessible(true);  
        minYField.setAccessible(true);  
        int minX = minXField.getInt(pdc);// 最小的x值    
        int minY = minYField.getInt(pdc); // 最小的y的值  
  

        minX = minX > 0 ? minX - 5 : 0;   // 此處為什麼需要減5，上方2.2中activiti原始碼中有</span>  
        minY = minY > 0 ? minY - 5 : 0;  
        for (ActivityImpl activity : activitiList) {  
            Map<String, Object> activityInfo = new HashMap<String, Object>();  
            activityInfo.put("width", activity.getWidth());  
            activityInfo.put("height", activity.getHeight());  
            activityInfo.put("x", activity.getX() - minX);  
            activityInfo.put("y", activity.getY() - minY);  
            activityInfo.put("actId", activity.getId());  
            activityInfo.put("name", activity.getProperty("name")); // </strong>ActivityImpl 中沒有getName方法，所以此處需要這樣獲取。</span>  
            activityInfos.add(activityInfo);  
        }  
       
        
        return activityInfos;  
    }

public InputStream getFlowImageByKey(String flowKey){
		ProcessDefinition processDefinition = repositoryService.createProcessDefinitionQuery().processDefinitionKey(flowKey).latestVersion()
				.singleResult();
		BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinition.getId());
		// 不使用spring請使用下面的兩行程式碼
		ProcessEngineImpl defaultProcessEngine = (ProcessEngineImpl) ProcessEngines.getDefaultProcessEngine();
		Context.setProcessEngineConfiguration(defaultProcessEngine.getProcessEngineConfiguration());

		// 使用spring注入引擎請使用下面的這行程式碼
		// Context.setProcessEngineConfiguration(processEngine.getProcessEngineConfiguration());
		ProcessDiagramGenerator a = defaultProcessEngine.getProcessEngineConfiguration().getProcessDiagramGenerator();
		return a.generateDiagram(bpmnModel, "png", "宋體", "宋體", null, 1.0);
	}

activiti5.17.0流程圖及節點顯示

這篇文章寫得很好，揭示了圖片點擊出現資訊的方法，於是我也做了，只不過有些改動，可能是activiti的版本不同的原因。 jsp頁面，通過流程例項id進行操作 <%@ page language="java" import="java.util.*" pageEn

解決SpringBoot整合Activiti5.20.0流程圖中文亂碼

最近在做SpringBoot整合Activiti5.20.0,結果發現設計器中編輯後的流程圖,我再次用介面獲取到圖片後發現中文亂碼，但是在設計器中是好的，網上查了一些資料都是springmvc的解決辦法，如下: <bean id="processEngineConfigur

GitLab v8.17.0安裝及漢化

一、GitLab介紹 GitLab是一個利用 Ruby on Rails 開發的開源應用程式，實現一個自託管的Git專案倉庫，可通過Web介面進行訪問公開的或者私人專案。它擁有與Github類似的功能，能夠瀏覽原始碼，管理缺陷和註釋。可以管理團隊對倉庫的訪

學習筆記:從0開始學習大資料-17.Redis安裝及使用

Redis 是一個高效能的key-value資料庫。 redis的出現，很大程度補償了memcached這類key/value儲存的不足，在部分場合可以對關係資料庫起到很好的補充作用。 1. 下載 wget http://download.redis.io/releases/redis-5

activiti繪製流程圖，線上顯示文字，審批過的節點新增審批人的名字

最有時間優化了一下activiti的繪製圖片工具類，主要用於在領導審批的時候展示的漂亮，直接上程式碼吧， /** 放在我們的業務程式碼中，穿個流程例項id進來，返回一個字元陣列，然後該怎麼處理你們應該知道怎麼做了吧 */ public byte[] getImage(Str

activiti6.0新增節點，分享一個activiti5.12改6.0.0的新增節點的程式碼，如果有人拿來用的話有些地方請自行調整

實現activiti的新增節點， 5.12版本改為6.0.0版本以下為5.12版本的程式碼以下為我改過之後的6.0.0版本的程式碼package cn.k12soft.servo.module.activiti.apply.service; import junit.fra

Hadoop中正常啟動了datanode但管理介面卻卻顯示0個datanode節點或者只有本機的一個datanade，DFS Used顯示0（100%）

以下會列出引起該問題的常見原因，及其解決辦法 1、在hadoop已經啟動的前提下，使用命令netstat -an |grep 9001 （改命令用來監聽namenode主節點通訊情況，9001為

Android6.0 SystemUI啟動簡析及圖示顯示重新整理

1、Android系統啟動時，在SystemServer中會去註冊StatusBarManagerService; 2、在StatusBarManagerService中的構造方法會去config.xml中讀取Icon slot，並在StatusBarIconList集合中構造出相應長度的StatusBar

FreeImage 3.17.0 在VS2015下編譯及遇到問題解決

1、在FreeImage 3170版本中，裡面沒有帶VS2015的工程檔案。但是有VS2005/2008/2013的。雙擊原始碼目錄下面的FreeImage.2013.sln檔案，然後VS2015就會彈出升級編譯器和庫選項。 2、選擇要編譯的版本為win32還是X6

總結一下vc6.0,vs2010,vs2013的軟體助手Visual Assist及行顯示外掛，專案檔案開啟外掛

工作幾個月以來，分別將vc6.0裝在xp、win8系統上，也將vs2010裝在xp系統上、將vs2013裝在win8系統上。下面總結兩個版本的手Visual Assist的安裝過程，供記憶和參考。 1，VA_X_Setup2048.exe 將其安裝在win

[android] 百度地圖開發 (一).申請AK顯示地圖及解決顯示空白網格問題

定義 gps 官方應用程序 2.x lns settings sap xmlns 近期做android百度地圖,可是使用baidumapapi_v2_3_1.jar和libBaiduMapSDK_v2_3_1.so顯示百度地圖時總是遇到問題——僅僅顯示

不帶插件，自己寫js，實現批量上傳文件及進度顯示

批量上傳發的 xhr string () .cn tom 需要 pen 今天接受項目中要完成文件批量上傳文件而且還要顯示上傳進度，一開始覺得這個應該不是很麻煩，當我在做的時候遇到了很多問題，很頭疼啊。不過看了別人寫的代碼，自己也測試過，發現網上好多都存在一些問題，並不是

Yii2.0 的分頁顯示設置

顯示 -1 log ges 分頁什麽 image 設置 blog 這是框架自帶的分頁顯示的樣式，雖然不知道為什麽這樣顯示，不過先記錄下來吧 Yii2.0 的分頁顯示設置

COCOS2D-X 3.0 文字button 不顯示或者閃動

文字 post 即使背景之前 cocos2d art child 顯示由於這些控件和背景在addChild是在同一層。有時候被背景擋住了把文字、button之類的addChild第二個參數設置得比背景大就OK了老版本號cocos2d-x 2.1.3即使

TASM 5.0 安裝及使用教程

列表管理工具 win 多個 display right ges 搜索路徑管理安裝TASM 5.0很簡單，您只需要下載本站[相關工具]中的"TASM50.zip"文件，解壓後在Windows9x/NT下執行"INSTALL.EXE"即可開始安裝。　 1.如果你在安

機票預訂系統的數據流程圖及實體聯系圖

數據流程 mage 數據流數據數據流圖技術分享 img jpg 系統數據流圖：　　實體-聯系圖：機票預訂系統的數據流程圖及實體聯系圖

銀行儲蓄系統的數據流程圖及實體-聯系圖

jpg 技術 logs 技術分享 http 系統實體數據流 .cn 數據流圖：實體-聯系圖：銀行儲蓄系統的數據流程圖及實體-聯系圖

JavaScript判斷對象類型及節點類型、節點名稱和節點值

table 屬性節點定義 ring pan nod undefined tel gpo 一、JavaScript判斷對象類型 1、可以使用typeof函數判斷對象類型 1 function checkObject1(){ 2 var str="st

vim介紹及顏色顯示

nag 比較模式 ado 文件顯示 install 明顯 F12 結果 1、vim 介紹在之前的章節當中，我們多次用到 vi 命令，vim 和 vi 實際上是一樣的命令，用法相同。下面介紹一下 vim，舉例子，使用命令 vi /etc/passwd ，回車，看到的內容都

activiti5.17.0流程圖及節點顯示

相關推薦