yctb-SpringBoot/web/player/design/bpmn/play/play.js

  var xmlData = '';
  var nodeInfo;
  var logNode = new Array();
  var interval;//定时器
  var time = 0;
  var model = null;//流程实例
  var lineHandle = ';';
  var showLog;
  
  $(document).ready(function(){
	  showPlay();
  });

function showPlay(){
	logNode={};
	var nodeId = new Array();
	var nodeName = new Array();
	nodeInfo ={};
    time = 0;
	xmlData = '<?xml version="1.0" encoding="UTF-8"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd"><process id="Process_18p4xqa" /><bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830"><bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="Process_18p4xqa" /><bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581"><omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" /></bpmndi:BPMNLabelStyle><bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b"><omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" /></bpmndi:BPMNLabelStyle></bpmndi:BPMNDiagram></definitions>';
	if(interval!=null)
		window.clearInterval(interval);
	$.ajax({
		url : basePath + 'WFP?module=instance&action=getPlayData&id='+id,
		type : 'POST',
		data : {
		},
		success : function(json) {
			var obj = JSON.parse(json);
			if(obj.template != null && obj.template != ''){
				model = obj.template;
				xmlData = obj.template.xmlData;
				nodeInfo = obj.template.nodeToId;
				$.each(obj.template.nodeToId, function(index) {						
					nodeName[index] = obj.template.nodeToId[index].nodeName;
					nodeId[index] = obj.template.nodeToId[index].id;
				});
				$.each(obj.transacitons,function(index){
					logNode[index] = obj.transacitons[index];
				});
				
				var canHeight = isNaN(obj.template.height)?0:obj.template.height+30;
				var canWidth = isNaN(obj.template.width)?0:obj.template.width+20;
				if(type==1){
					//创建时间轴
					createtimeAxis(obj.transacitons);
					//设置宽高
					$('.mainBody').css('height',canHeight+115);
					$('.mainBody').css('width',canWidth+10);
				}else if(type==2){
					//创建日志列表
					createLogTable(obj.transacitons);
					//设置宽高
					$('.mainBody').css('height',canHeight+10);
					$('.mainBody').css('width',canWidth+300);
				}
			}else{
				var url = basePath + 'player/page/sl404.jsp';
				$("#bpmnPlay", parent.document).attr('src',url);
				$("#bubble").attr('style','display:none');
//		  		xmlData = '<?xml version="1.0" encoding="UTF-8"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd"><process id="Process_18p4xqa" /><bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830"><bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="Process_18p4xqa" /><bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581"><omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" /></bpmndi:BPMNLabelStyle><bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b"><omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" /></bpmndi:BPMNLabelStyle></bpmndi:BPMNDiagram></definitions>';
			}
			$("#show-button").trigger("click");	
			
		}
	});
}

//创建日志列表
function createLogTable(transacitons){
	$('#tableContent').empty();
	var html = '';
	
	$.each(transacitons,function(index){
		var background ='url(../js/jQuery-log/images/icon07.gif) no-repeat 83px 0;';
		if(transacitons[index].state ==='2'){
			background = 'url(../js/jQuery-log/images/icon07_yellow2.jpg) no-repeat 83px 0';
		}
		html = html + '<li style="width:292px;padding-bottom:30px;zoom:1;background:'+background+'">'
			+ '<h3 style="display: block;">'+$(this).attr('startTime').substring(0,10)+'<span>'+ $(this).attr('startTime').substring(10)+'</span></h3>'
			+ '<dl style="display: block;width:180px;"><dt><a class="nodeName">'+ $(this).attr('nodeName') +'</a>&nbsp;&nbsp;'
			+ '操作人:<span>'+$(this).attr('author')+'</span><br>'
			+ '<div style="margin-top:10px;height:20px;width:175px;font-size:10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" data-toggle="tooltip" title="'+$(this).attr('memo')+'">'+$(this).attr('memo')+'</div><br>'
			+ '</dt></dl></li>';	
	});
	
	$.getScript(basePath+"player/js/jQuery-log/js/jq22.js", function() {
		setTimeout("$('.contactusdiyou .history.scroll-y').show();",500)
		
	});
	$('.contactusdiyou .history-date ul').html(html);
}

//创建时间轴
function createtimeAxis(transacitons){
	$('.cd-horizontal-timeline .timeline ol').empty();
	var liHtml = '';
	$('.cd-horizontal-timeline .events-content ol').empty();
	var descHtml = '';
	$.each(transacitons,function(index){
		liHtml +='<li><a onclick="showLog(this)" data-date="'+$(this).attr('id')+'" class="'+(index==0?'selected ':' ')+($(this).attr('state')==2?'yellow':'')+'">'+$(this).attr('nodeName')+'</a></li>'
		descHtml = descHtml +'<li '+(index==0?'class="selected"':'')+' data-date="'+$(this).attr('id')+'">'
			+'<em>操作人:<a>'+$(this).attr('author')+'</a>;&nbsp;操作时间:<a>'+$(this).attr('startTime')+'</a></em>'
			+(($(this).attr('memo')==''||$(this).attr('memo')=='null')?'':'<em>处理信息:<a>'+$(this).attr('memo')+'</a></em></li>');
	});
	$('.cd-horizontal-timeline .timeline ol').html(liHtml);
	$('.cd-horizontal-timeline .events-content ol').html(descHtml);
	$.getScript(basePath+"player/js/jQuery-sjz/js/main.js");
}

//创建时间轴日志
function createtimeAxisLog(){
	var log = '';
	$('#event_box .parBd .slideBox').each(function(){
		if($(this).css('display')!='none'){
			log = $(this).html();
			return false;
		}
	});
	$('#log_box .parBd').html(log);
}

(function(BpmnViewer, $) {
  var bpmnViewer = new BpmnViewer({
    container: '#canvas'
  });
  var canvas = bpmnViewer.get('canvas'),
          overlays = bpmnViewer.get('overlays');

  function importXML(xml) {
    bpmnViewer.importXML(xml, function(err) {
      canvas.zoom('fit-viewport');
      var id = getOrder();
      addMark(id[0]);
      var i = time;
      $("#playButton").unbind('click').on('click',function(){
    	  $('#stopButton').attr('style','display:block');
    	  $('#playButton').attr('style','display:none');
    	  var id = getOrder();
		  var lastId = id[id.length - 1];
		  canvas.addMarker(lastId, 'currentNode');
		  
		  setTheme();
		  
		  runInterval();
		  interval = self.setInterval(function(){
			  runInterval();
		  },3000);
      })
      
      function runInterval(){
    	  if(type==1){
			  //时间轴轮播效果
			  var selectId = $('.events-content li.selected').index();
			  if(selectId!=i){
				  $('.cd-horizontal-timeline .timeline ol li:eq('+i+') a').trigger('click');
			  }
		  }else if(type==2){
			  //日志轮播效果
			  removeMark();
		  	  addMark(id[i]);
			  var aid = '#log'+i;
			  $('#tableContent').children().removeClass('active');
			  $(aid).addClass('active');
			  $('.history-date li').removeClass('red');
			  $('.history-date li:eq('+i+')').addClass('red');
			  $('.contactusdiyou').scrollTop($('.bounceInDown.red').position().top);
		  }
		  
		  i++;
		  if(i>id.length-1){
			  i = 0;			  
		  }
		  time = i;
      }
      
      $("#stopButton").unbind('click').on('click',function(){
    	  $('#stopButton').attr('style','display:none');
    	  $('#playButton').attr('style','display:block');
    	  if(interval){
    		  interval = clearInterval(interval);
    	  }else{
    		  return;
    	  }
      });
      $("#playButton").trigger("click");	
      
      $('#canvas g .djs-visual').unbind('click').on('click',function(){
    	  var taskId = $(this).parent().attr('data-element-id');
    	  var id = getOrder();
    	  for(var i=0;i<id.length;i++){
    		  if(id[i]==taskId){
    			  $('.cd-horizontal-timeline .timeline ol li:eq('+i+') a').trigger('click');
    			  return;
    		  }
    	  }
      });
    });
    
  }

  var showButton = document.querySelector('#show-button');
  showButton.addEventListener('click', function() {
	  importXML(xmlData);
  })
  
  //获取流程图播放顺序表（节点id顺序）
  function getOrder(){
	  var id = new Array();
	  $.each(logNode,function(index){
		  for(var i = 0;i<nodeInfo.length;i++){
			  if(nodeInfo[i].nodeName === logNode[index].nodeName){
				  id[index] = nodeInfo[i].id;
			  }
		  }
	  });
	  return id;
  }
  
  function addMark(id){
	  overlays.add(id, 'note1', {
        position: {
          top: -5,
          left: -5
        },
        html: '<div class="showTop1"></div>'
      });
	  overlays.add(id, 'note2', {
        position: {
          top: -5,
          right: 10
        },
        html: '<div class="showTop2"></div>'
      });
	  overlays.add(id, 'note3', {
        position: {
        	bottom: 10,
        	left: -5
        },
        html: '<div class="showBottom1"></div>'
      });
	  overlays.add(id, 'note4', {
        position: {
          bottom: 10,
          right: 10
        },
        html: '<div class="showBottom2"></div>'
      });
	  
  }
  
  function removeMark(){
	  overlays.clear();
  }
  
  //时间轴-展示节点日志
  showLog = function(obj){
	  var id = getOrder();
	  var i = $(obj).parent().index();
	  removeMark();
  	  addMark(id[i]);
  }
  
  function setTheme(){
	  //隐藏判断节点的X
	  $('.djs-visual polygon').each(function(){
		  $(this).parent().find('path').hide();
	  });
	  //节点加上已处理状态
	  $.each(logNode,function(index){
			for(var i = 0;i<nodeInfo.length;i++){
			  if(nodeInfo[i].nodeName === logNode[index].nodeName){
				  nodeHandle(nodeInfo[i].id);
			  }
		  }
	   });
	  //创建已处理连线的marker
	  $('defs').attr('id','defs');
  	  var marker=document.getElementById("markerUnhandle").cloneNode(true);
  	  marker.id="markerHandle";
  	  document.getElementById("defs").appendChild(marker);
	  //遍历已处理的连线，看是否有已处理的节点未加class
  	  decideNodeHandle();	
	}
	
  	 //给节点和连线加上状态
	 function nodeHandle(nodeId){
		  canvas.addMarker(nodeId, 'handled');
		  //连线加上已处理状态
		  $(xmlData).find("#"+nodeId+' incoming').each(function(){
			  var lineId = $(xmlData).find("#"+nodeId+' incoming')[0].innerText;
			  if(lineHandle.indexOf(';'+lineId+';')<0){
				  lineHandle += lineId+';';
				  canvas.addMarker(lineId, 'handled');
				  return false;
			  }
		  });
	  }
    //遍历已处理的连线，看是否有已处理的节点未加class
	function decideNodeHandle(){
		$('#canvas g[data-element-id^="SequenceFlow"].handled').each(function(){
			var lineId = $(this).attr('data-element-id');
			if($(xmlData).find("outgoing:contains('"+lineId+"')").length>0){
				var inNodeId = $(xmlData).find("outgoing:contains('"+lineId+"')").parent().attr('id');//出线节点id
				if(inNodeId.indexOf('StartEvent')<0&&$('#canvas g[data-element-id^="'+inNodeId+'"].handled').length==0){
					nodeHandle(inNodeId);
					decideNodeHandle();
					return false;
				}
			}
		});
	}
})(window.BpmnJS, window.jQuery);