我用的是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;
??? }

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

下面是我的效果圖

?

轉載于:https://www.cnblogs.com/xueershewang/p/6799215.html

總結

以上是生活随笔為你收集整理的activiti流程跟踪图简单详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。