<%@page import="com.blueland.bpm.manage.web.ProcessTraceController,com.blueland.bpm.engine.util.*"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@page import="org.activiti.engine.history.HistoricProcessInstance"%>
<%@page
		import="com.blueland.bpm.common.page.*,com.blueland.bpm.identity.model.User,org.activiti.engine.history.HistoricProcessInstance,org.activiti.engine.history.HistoricTaskInstance,org.activiti.engine.task.Comment"%>
<%@page
		import="com.blueland.bpm.common.util.*,com.blueland.bpm.engine.core.model.*"%>
<%@page import="java.util.*"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow-y: auto;overflow-x auto;">
<head>
	<%@ include file="/commons/trace-meta.jsp"%>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="${ctx }/resource/js/common/raphael.min.js"></script>
	<style type="text/css">
		/* --------------
           *   layout  *
        * ------------ */
		.l-layout {
			position: relative;
		}

		.l-layout-left,.l-layout-right,.l-layout-center,.l-layout-top,.l-layout-bottom
		{
			position: absolute;
			border: 1px solid #BED5F3;
			background: white;
			z-index: 10;
			overflow: hidden;
		}

		.l-layout-top {
			width: 100%;
		}

		.l-layout-bottom {
			width: 100%
		}

		.l-layout-left .l-layout-header-toggle {
			position: absolute;
			top: 3px;
			right: 3px;
			height: 20px;
			width: 20px;
			overflow: hidden;
			background: url('../images/layout/togglebar.gif');
			background-position: -20px 0px;
			cursor: pointer;
		}

		.l-layout-left .l-layout-header-toggle-over {
			background-position: -20px -20px;
		}

		.l-layout-right .l-layout-header-toggle {
			position: absolute;
			top: 3px;
			left: 3px;
			height: 20px;
			width: 20px;
			overflow: hidden;
			background: url('../images/layout/togglebar.gif');
			background-position: -20px -40px;
			cursor: pointer;
		}

		.l-layout-right .l-layout-header-toggle-over {
			background-position: -20px -60px;
		}

		.l-layout-center .l-layout-header {
			cursor: default;
			color: black;
		}

		/*.l-layout-header{ position:relative;padding-left:10px;  font-weight:bold;height:28px; line-height:28px;  background:#E5EFFE url('../images/layout/tabs-bg.jpg') repeat-x; overflow:hidden; cursor:pointer}*/
		.l-layout-header {
			position: relative;
			padding-left: 10px;
			font-weight: bold;
			height: 28px;
			line-height: 28px;
			background: #DDDDDE
			url("${ctx}/resources/images/layout/layout/bg.png") repeat-x;
			overflow: hidden;
			cursor: pointer
		}

		.l-layout-header-inner {
			padding-right: 22px;
			color: black
		}

		.l-layout-right .l-layout-header-inner {
			padding-left: 22px;
			padding-right: auto;
		}
		/*.l-layout-header-over{background:#EFF4FE url('../images/layout/tabs-bg.jpg') repeat-x;}*/
		.l-layout-header-over {
			background: #DDDDDE url("../images/layout/bg.png") repeat-x;
		}

		.l-layout-collapse-left,.l-layout-collapse-right {
			width: 24px;
			background: #EAF2FE;
			border: 1px solid #B8D0D6;
			position: absolute;
			top: 0px;
			display: none;
			height: 100%;
			z-index: 10;
		}

		.l-layout-collapse-left-over,.l-layout-collapse-right-over {
			background: #F5F9FA;
		}

		.l-layout-collapse-left-toggle,.l-layout-collapse-right-toggle {
			position: absolute;
			height: 20px;
			width: 20px;
			overflow: hidden;
			background: url('../images/layout/togglebar.gif');
			cursor: pointer;
		}

		.l-layout-collapse-left {
			left: 2px;
		}

		.l-layout-collapse-left-toggle {
			top: 0px;
			right: 2px;
			background-position: -20px -40px;
		}

		.l-layout-collapse-left-toggle-over {
			background-position: -20px -60px;
		}

		.l-layout-collapse-right {
			right: 2px;
		}

		.l-layout-collapse-right-toggle {
			top: 0px;
			left: 2px;
			background-position: -20px 0px;
		}

		.l-layout-collapse-right-toggle-over {
			background-position: -20px -20px;
		}

		.l-layout-drophandle-left {
			position: absolute;
			width: 5px;
			cursor: col-resize;
			z-index: 10;
			display: none;
		}

		.l-layout-drophandle-right {
			position: absolute;
			width: 5px;
			cursor: col-resize;
			z-index: 10;
			display: none;
		}

		.l-layout-drophandle-top {
			position: absolute;
			height: 5px;
			cursor: row-resize;
			z-index: 10;
			display: none;
			line-height: 1px;
			overflow: hidden;
		}

		.l-layout-drophandle-bottom {
			position: absolute;
			height: 5px;
			cursor: row-resize;
			z-index: 10;
			display: none;
			line-height: 1px;
			overflow: hidden;
		}

		.l-layout-dragging-xline {
			background: #E0E4E2;
			height: 4px;
			position: absolute;
			display: none;
			z-index: 9999;
			padding: 0;
			margin: 0;
			line-height: 1px;
			overflow: hidden;
		}

		.l-layout-dragging-yline {
			background: #E0E4E2;
			width: 4px;
			position: absolute;
			display: none;
			z-index: 9999;
			padding: 0;
			margin: 0;
		}

		.l-layout-lock {
			position: absolute;
			width: 100%;
			height: 100%;
			display: none;
			z-index: 9990;
			margin: 0;
			padding: 0;
		}

		.l-layout-content {
			position: relative;
			background: white;
			overflow: hidden;
		}

		.l-layout-drophandle {
			position: absolute;
			top: 0px;
			left: -5px;
			width: 5px;
			cursor: col-resize;
			z-index: 10;
			height: 100%;
			display: none;
		}

		.l-layout-collapse {
			width: 24px;
			background: #EAF2FE;
			border: 1px solid #B8D0D6;
			position: absolute;
			top: 0px;
			left: 4px;
			display: none;
			height: 100%;
			z-index: 10;
		}

		.l-layout-collapse-over {
			background: #F5F9FA;
		}

		.l-layout-collapse-toggle {
			position: absolute;
			top: 0px;
			right: 2px;
			height: 20px;
			width: 20px;
			overflow: hidden;
			background: url('../images/layout/togglebar.gif');
			background-position: -20px -40px;
			cursor: pointer;
		}

		.l-layout-collapse-toggle-over {
			background-position: -20px -60px;
		}

		.l-layout-dragging-line {
			background: #E0E4E2;
			width: 4px;
			position: absolute;
			top: 0px;
			display: none;
			z-index: 9999;
			padding: 0;
			margin: 0;
			height: 100%;
		}

		div.header {
			background-image:
					url(${ctx}/styles/default/images/tool_bg.jpg);
			height: 24px;
			line-height: 24px;
			font-weight: bold;
			font-size: 14px;
			padding-left: 5px;
			margin: 0;
			width: 394px;
		}

		div .legend {
			width: 14px;
			height: 14px;
			border: 1px solid black;
			float: left;
		}

		.table-task {
			margin: 0 auto;
			width: 233px;
			border-collapse: collapse;
		}

		.table-task th {
			text-align: right;
			padding-right: 6px;
			color: #000;
			height: 32px;
			border: solid 1px #A8CFEB;
			font-weight: bold;
			text-align: right;
			font-size: 13px;
			font-weight: bold;
			padding-right: 5px;
			background-color: #D7D7D7;
			padding-right: 5px;
			border: 1px solid #656565;
		}

		.table-task td {
			border: solid 1px #656565;
			padding-left: 6px;
			text-align: left;
		}

		.target {
			height: 20px;
			float: left;
			margin: 10px;
		}

		div.icon {
			border: 1px solid #000;
			line-height: 10px;
			width: 15px;
			height: 15px;
			float: left;
			overflow: hidden;
		}

		.target span {
			margin: 0 0 0 5px;
			font-size: 14px;
			font-weight: bold;
			float: left;
			vertical-align: middle;
			white-space: nowrap;
		}

	</style>


	<link href="${ctx }/resource/js/plugins/jquery.qtip.css" rel="stylesheet" type="text/css" media="screen" />
	<script src="${ctx }/resource/js/plugins/easyTemplate.js" type="text/javascript"></script>
	<script src="${ctx }/resource/js/plugins/jquery.qtip.js" type="text/javascript"></script>


	<title>流程图监控</title>
	<script>
		var listDiv = [];
		//eval('${processHistoryDiv}');
		$(function() {
			$.each($("div.flowNode"), function() {
				var obj = $(this);
				var nodeId =obj.attr('id');
				obj.css('cursor', 'pointer');
				var type=obj.attr('type');
				if(type!="manualTask"&&type!="serviceTask"){
					checkStatusInfo(nodeId,type);
				}

			});
			//去除纵向滚动条
			/* var height = document.documentElement.offsetHeight;
			var width = document.documentElement.offsetWidth;

			var imageHeight =  "${imageHeight}";
			var imageWidth =  "${imageWidth}";

			$("#frmrightChild",window.parent.document).height(height+250);

			if(height>(parseInt(imageHeight)+400)){
				$("#divContainer").height(height);
			}else{
				$("#divContainer").height(height+400);
			}


			if((width > (parseInt(imageWidth)+200))){
				$("#divContainer").width(width);
			}else{
				$("#divContainer").width(parseInt(imageWidth)+200);
			}

			$("#treeDemo",window.parent.document).height(height+320); */
			$("#headingSpan",window.parent.document).html("<b>流程标题：</b>${procTitle}，<b>流程状态：</b>${processInstance.procState==1?'运行中':(processInstance.procState==5?'已结束':'已作废')}，<b>流程定义名称：</b>${processInstance.processDefinitionName}");
		});

		//初始化qtip
		function checkStatusInfo(nodeId,type) {
			var obj = $("#" + nodeId);
			var y = -15;
			var x = -15;
			var atValue = "center";
			var myValue = "Top Left";
			var html = getHistoryTaskHtml(nodeId);
			if(html){
				//如果流程距离页面顶部距离较大，显示在上边
				if(obj.offset().top+335-40 > $(window).height()){
					myValue = "Bottom Left";
					y = 50;
				}
				//如果流程距离页面左边距离较大，显示在左边
				if(obj.offset().left+270+40 > $(window).width()){
					myValue = "Top Right";
					x = -30;
				}
				if(obj.offset().top+335-40 > $(window).height() && obj.offset().left+270+40 > $(window).width()){
					myValue = "Bottom Right";
					x = -20;
					y = -30;
				}
			}else{

				if(obj.offset().top+170+40 > $(window).height()){
					myValue = "Bottom Left";
					y = -20;
				}
				//如果流程距离页面左边距离较大，显示在左边
				if(obj.offset().left+270+40 > $(window).width()){
					myValue = "Top Right";
					x = -30;
				}
				if(obj.offset().top+170+40 > $(window).height() && obj.offset().left+270+40 > $(window).width()){
					myValue = "Bottom Right";
					x = -20;
					y = -30;
				}
			}
			//$("#" + nodeId).append('<span style="float: right; margin: 4px;" class="badge badge-danger">4</span>');
			obj.qtip({
				content : {
					text : function() {
						if(type=="userTask"){
							var html = getHistoryTaskHtml(nodeId);
							if (html) {
								return html;
							}else {
								return getTaskDefinitionHtml(nodeId);
							}
						}else if(type=="callActivity"){
							//return  getCallActivitDefinitionHtml(nodeId);
						}
					},
					title : {
						text : "任务执行情况"
					}
				},
				position : {
					at : atValue,
					my : myValue,
					target : 'event',
					adjust : {
						x : x,
						y : y
					}
				},
				show : {
					effect : function(offset) {
						$(this).slideDown(200);
// 								$("a[candidateUserUrl]").each(showResult);
					}
				},
				hide : {
					event : 'mouseleave',
					fixed : true,
					delay : 300
				},
				style : {
					classes : 'ui-tooltip-light ui-tooltip-shadow',
					width : 270,
					height: $("#ui-tooltip-content").height()
				}
			});
		};




		//构建显示的html
		function getHistoryTaskHtml(nodeId) {
			//alert(nodeId);
			var html = new Array();
			var textareaObj = $("textarea[id='txtTask" + nodeId + "']");
			if (textareaObj.length == 0) {
				return;
			}
			html.push('<div style="max-height:310px;width=100px;overflow:auto;">');
			textareaObj.each(function(i) {
				var tableHtml = $(this).val();
				if (typeof (tableHtml) == "undefined") {
					return;
				}
				html.push(tableHtml);
			});
			html.push('</div>');
			//alert(html.join(''));
			return html.join('');
		}


		function getTaskDefinitionHtml(nodeId) {
			var html = new Array();
			var procDefId="${processInstance.processDefinitionId}";
			var url="${ctx}/procDefMgr/getActivityDefModel.do";
			$.ajax({
				url : url,
				data:{"procDefId":procDefId,"actDefId":nodeId},
				cache : false,
				async : false,
				type : "POST",
				success : function (data){
					//alert(data);
					var actDefObject = eval(data);
					html.push('<div class="panel-body"><div  id="txtTaskDefHmtl" style="max-height:310px;width=100px;overflow:auto;">');
					html.push('<table class="table-task" cellpadding="0" cellspacing="0" border="0">');
					html.push('<tr>');
					html.push('<th>任务名称: </th>');
					html.push('<td>'+actDefObject.actDefName+'</td>');
					html.push('</tr>');
					html.push('<tr>');
					html.push('<th>任务资源: </th>');
					html.push('<td>');
					var roleStrs="";
					var orgStrs="";
					var userStrs="";
					var activityResources = eval(actDefObject.activityResources);
					$.each(activityResources,function(index,activityResource){
						// alert(activityResource.name);
						if(activityResource.type=="ROLE"){
							roleStrs+=activityResource.name+",";
						}else if(activityResource.type=="ORG"){
							orgStrs+=activityResource.name+",";
						}else if(activityResource.type=="USER"){
							userStrs+=activityResource.name+",";
						}
					});
					roleStrs=roleStrs.substring(0,roleStrs.lastIndexOf(","));
					orgStrs=orgStrs.substring(0,orgStrs.lastIndexOf(","));
					userStrs=userStrs.substring(0,userStrs.lastIndexOf(","));
					if(roleStrs.length>0){
						html.push("角色:"+roleStrs+"<br/>");
					}
					if(orgStrs.length>0){
						html.push("组织:"+orgStrs+"<br/>");
					}
					if(userStrs.length>0){
						html.push("人员:"+userStrs+"<br/>");
					}
					html.push('</td>');
					html.push('</tr>');
					html.push('<tr>');
					html.push("<th width='100px'>任务处理类型: </th>");
					html.push('<td>单人处理</td>');
					html.push('</tr>');
					html.push('<tr>');
					html.push('<th>任务状态: </th>');
					html.push('<td>未执行</td>');
					html.push('</tr>');
					html.push('</table>');
					html.push('</div></div>');
				}
			});
			return  html.join('');
		}

		function getCallActivitDefinitionHtml(nodeId) {
			var html = new Array();
			html.push('<div class="panel-body"><div id="calltxtTaskDefHmtl" style="max-height:310px;width=100px;overflow:auto;">请您点击左边树导航查看子流程信息<br/><br/></div></div>');
			return  html.join('');
		}

		function getCallActivityHtml(nodeId) {
			//alert(nodeId);
			var html = new Array();
			var procDefId="${processInstance.processDefinitionId}";
			var url="${ctx}/procDefMgr/getActivityDefModel.do";
			$.ajax({
				url : url,
				data:{"procDefId":procDefId,"actDefId":nodeId},
				cache : false,
				async : false,
				type : "POST",
				success : function (data){
					//alert(data);
					var actDefObject = eval(data);
					html.push('<div class="panel-body"><div  id="txtTaskDefHmtl" style="max-height:310px;width=100px;overflow:auto;">');
					html.push('<table class="table-task" cellpadding="0" cellspacing="0" border="0">');
					html.push('<tr>');
					html.push('<th>任务名称: </th>');
					html.push('<td>'+actDefObject.actDefName+'</td>');
					html.push('</tr>');
					html.push('<tr>');
					html.push('<th>任务资源: </th>');
					html.push('<td>');
					var roleStrs="";
					var orgStrs="";
					var userStrs="";
					var activityResources = eval(actDefObject.activityResources);
					$.each(activityResources,function(index,activityResource){
						// alert(activityResource.name);
						if(activityResource.type=="ROLE"){
							roleStrs+=activityResource.name+",";
						}else if(activityResource.type=="ORG"){
							orgStrs+=activityResource.name+",";
						}else if(activityResource.type=="USER"){
							userStrs+=activityResource.name+",";
						}
					});
					roleStrs=roleStrs.substring(0,roleStrs.lastIndexOf(","));
					orgStrs=orgStrs.substring(0,orgStrs.lastIndexOf(","));
					userStrs=userStrs.substring(0,userStrs.lastIndexOf(","));
					if(roleStrs.length>0){
						html.push("角色:"+roleStrs+"<br/>");
					}
					if(orgStrs.length>0){
						html.push("组织:"+orgStrs+"<br/>");
					}
					if(userStrs.length>0){
						html.push("人员:"+userStrs+"<br/>");
					}
					html.push('</td>');
					html.push('</tr>');
					html.push('<tr>');
					html.push("<th width='100px'>任务处理类型: </th>");
					html.push('<td>单人处理</td>');
					html.push('</tr>');
					html.push('<tr>');
					html.push('<th>任务状态: </th>');
					html.push('<td>未执行</td>');
					html.push('</tr>');
					html.push('</table>');
					html.push('</div></div>');
				}
			});
			return  html.join('');
		}


		var paper = null,
				animationMs = 500,
				animationEasing = '>',
				dispearDelay = 2000,
				deviation = 5,
				amendX = 0,
				amendY = 0,
				defaultStyle = {"stroke" : "red", "stroke-width" : "3px"};

		function initPaper(){
			var imageContainer = $("#imageContainer"),
					containerWidth = imageContainer.width(),
					containerHeight = imageContainer.height();
			paper = Raphael("imageContainer", containerWidth, containerHeight);
		}

		function handle(c, i){
			setTimeout(function(){
				if(c.type=='startEvent' || c.type=='endEvent'){
					amendPoint(c);
					circle(c);
				}
				if(c.type=='line'){
					for(var i=0,m;m=c.points[i++];){
						amendPoint(m);
					}
					edge(c);
				}
				if(c.type=='userTask'){
					amendPoint(c);
					rect(c);
				}
				if(c.type=='diamond'){
					amendPoint(c.point);
					diamond(c);
				}
			}, (c.sn-1)*animationMs);
		}

		// 坐标点修正
		function amendPoint(point){
			point.x = Math.round(point.x - amendX);
			point.y = Math.round(point.y - amendY);
		}

		// 绘制矩形
		function rect(c){
			var x=c.x,
					y=c.y,
					width=c.width,
					height=c.height;
			var element = paper.rect(x+width/2, y+height/2, 0, 0, 10).attr(defaultStyle);
			element.animate({x:x,y:y,width:width,height:height}, animationMs, animationEasing, function(){
				var me = this;
				document.getElementById('divContainer').scrollLeft=x;
				document.getElementById('divContainer').scrollTop=y;
				setTimeout(function(){
					me.remove();
				}, dispearDelay);
			});
		}

		// 绘制菱形
		function diamond(c){
			var x=c.point.x,
					y=c.point.y,
					length=c.length;
			var element = paper.rect(x + length/6, y + length/6, length/1.5, length/1.5).attr(defaultStyle);
			element.animate({transform:"r45"}, animationMs, animationEasing, function(){
				var me = this;
				document.getElementById('divContainer').scrollLeft=x;
				document.getElementById('divContainer').scrollTop=y;
				setTimeout(function(){
					me.remove();
				}, dispearDelay);
			});
		}

		// 绘制圆圈
		function circle(c){
			var x=c.x,
					y=c.y,
					r=15.6;
			var element = paper.circle(x + r, y + r, 0).attr(defaultStyle);
			element.animate({"r":r}, animationMs, animationEasing, function(){
				var me = this;
				setTimeout(function(){
					me.remove();
				}, dispearDelay);
			});
		}

		// 绘制连线
		function edge(c){
			var points = c.points,
					size = points.length-1,
					sp = points[0],
					elements = [];

			for(var i=0; i < size; i++){
				var twins = [];
				twins.push(points[i]);
				twins.push(points[i+1]);
				edgeAssembly(twins, elements, i+1, size);
			}
		}

		// 每两个点为一组绘制连线
		function edgeAssembly(twins, elements, index, size){
			var sp = twins[0],
					ep = twins[1];
			var element = paper.path("M" + sp.x + " " + sp.y).attr(defaultStyle);
			elements.push(element);
			var adjustX = ep.x,
					adjustY = ep.y;
			if(index==size){
				if(sp.x != ep.x){
					adjustX = ep.x - deviation;
				}
				if(sp.y != ep.y){
					adjustY = ep.y - deviation;
				}
			}
			var path = "M" + sp.x + " " + sp.y + "L" + adjustX + " " + adjustY;
			var ms = animationMs/size;
			var anim = Raphael.animation({"path":path}, ms, animationEasing, function(){
				var me = this;
				if(index==1){
					setTimeout(function(){
						for(var i=0,c;c=elements[i++];){
							c.remove();
						}
					}, dispearDelay + ms*(size-1));
				}
				if(index==size){
					me.attr({"arrow-end" : "block-wide-long"});
				}
			});
			element.animate(anim.delay(ms*(index-1)));
		}

		//显示指定流程实例的轨迹图
		function plays(){
			if(!paper) initPaper();
			var dealNodes = this.listDiv;
			//getDealNodes();
			paper.clear();
			if(dealNodes && dealNodes.length >0){
				//calcAmend(dealNodes[0]);
				for(var i=0,c;c=dealNodes[i++];){
					handle(c);
				}
			}
		}

		//计算修正值-修复流程图节点显示错误问题
		function calcAmend(track){
			var firstNode = getTargetNodeWithTrack(track),
					left = firstNode.css("left"),
					top = firstNode.css("top"),
					leftVal = Number(left.replace("px","")),
					topVal = Number(top.replace("px",""));

			amendX = track.point.x - leftVal;
			amendY = track.point.y - topVal;
		}

		// 通过track找到对应的html元素
		function getTargetNodeWithTrack(track){
			//
			var ary = $("#imageContainer").find("div.flowNode")
			node = null;
			for(var i =0,c; c = ary[i++];){
				if(c && c.outerHTML && c.outerHTML.indexOf(track.taskKey) > -1){
					node = $(c);
					break;
				}
			}
			if(!node){
				node = $("#imageContainer").find("div.flowNode:first");
			}
			return node;
		}


		/* function getDealNodes(){
		var nodes = null;
		$.ajaxSetup({
		    async : false
		});
		var url= __ctx+"/flow/instance/getPathNodes?id="+'10000000761501';
		$.post(url,function(result){
			nodes = result;
		});
		return nodes;
		} */
	</script>
</head>
<body>
<div class="main-container" id="main-container" style="overflow-y: auto;overflow-x auto;">
	<div class="panel-body">
		<div>
			<div class="target">
				<div class="icon" style="background: gray;"></div>
				<span>未执行</span>
			</div>
			<div class="target">
				<div class="icon" style="background: #00FF00;"></div>
				<span>已执行</span>
			</div>
			<!--

			<div class="target">
				<div class="icon" style="background:#00FF00;"></div>
				<span>同意</span>
			</div>

			 -->
			<div class="target">
				<div class="icon" style="background: red;"></div>
				<span>当前节点</span>
			</div>
			<!--

			<div class="target">
				<div class="icon" style="background:#8A0902;"></div>
				<span>驳回</span>
			</div>
			<div class="target">
				<div class="icon" style="background:#023B62;"></div>
				<span>撤销</span>
			</div>

			-->
			<div class="target">
				<div class="icon" style="background: #802A2A;"></div>
				<span>作废</span>
			</div>
			<!-- <div class="target">
			<button type="button" class="btn btn-xs btn-danger" onclick="plays()">
				审批轨迹
			</button>
			</div> -->
		</div>

		<div style="padding-top: 40px; background-color: white;width:${imageWidth+140}px;">
			<div id="divContainer" style="height: ${imageHeight}px;width:${imageWidth+140}px;">
				<input name="iframHeiht" id="iframHeiht" value="${height}" type="hidden"/>
				<div id="imageContainer"
					 style="display: inline; float: left; margin:10px auto 0;position: relative;background:url('${ctx}/workflow/trace/resource1.do?resourceType=image&processInstanceId=${processInstance.id}')  no-repeat;width:${imageWidth+140}px;height:${imageHeight}px;">
					${processDefinitonDiv}
				</div>
			</div>
		</div>
		<%
			Map<String, Object> hisTaskLog = (Map) request
					.getAttribute("hisTaskLog");
			HistoricProcessInstance historicProcessInstance = (HistoricProcessInstance) hisTaskLog
					.get("historicProcessInstance");
			String finishStr = "未结束";
			if (historicProcessInstance != null
					&& historicProcessInstance.getEndTime() != null) {
				finishStr = "已结束";
			}
			List<ProcessLogModel> processDetailLogs = (List<ProcessLogModel>) hisTaskLog
					.get("processDetailLogs");
			Map<String,com.blueland.bpm.engine.config.model.ActivityInfoConfig> allActivityInfoConfigs =(Map<String,com.blueland.bpm.engine.config.model.ActivityInfoConfig>)hisTaskLog.get("allActivityInfoConfigs");


			for (int i=0;i<processDetailLogs.size();i++) {
				ProcessLogModel processDetailLog =processDetailLogs.get(i);
				HistoricTaskInstance historicTaskInstance = processDetailLog
						.getHistoricTaskInstance();
				Comment comment = processDetailLog.getComment();
				String limitTimeStr = "";
				try {

					com.blueland.bpm.engine.config.model.ActivityInfoConfig activityInfoConfig = allActivityInfoConfigs.get(historicTaskInstance.getTaskDefinitionKey());
					Date endDate=new Date();
					if (historicTaskInstance.getEndTime() != null) {
						endDate=historicTaskInstance.getEndTime();
					}
					if (activityInfoConfig.getActivityLimitTime() != null
							&& activityInfoConfig.getActivityLimitTime() != 0) {
						Date dueDate = org.apache.commons.lang3.time.DateUtils
								.addDays(historicTaskInstance.getStartTime(),
										activityInfoConfig
												.getActivityLimitTime());
						long limitDate = ProcessTraceController.differByDay(
								dueDate, endDate);
						if (limitDate > 0) {
							limitTimeStr = "超时" + limitDate + "天";
						} else if(historicTaskInstance.getEndTime() != null){
							limitTimeStr = "耗时" + Math.abs(limitDate) + "天";
						} else{
							limitTimeStr = "剩余" + Math.abs(limitDate) + "天";
						}

					} else {
						String t = String.valueOf((ProcessTraceController
								.differByDay(
										historicTaskInstance.getStartTime(),endDate)));
						limitTimeStr = "耗时" + t + "天";
						;
					}

					if (historicTaskInstance.getEndTime() == null) {
						//limitTimeStr += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"showDiaLog('/standard/workflow/taskPressView.do','催办','500px','400px');\"><font color='blue'>催办</font></a>";
					}
				} catch (Exception e) {
				}
		%>
		<textarea id="txtTask<%=historicTaskInstance.getTaskDefinitionKey()%>"
				  style="display: none">
				<table class="table-task" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
				<tr>
					<th  width="100px">接收环节: </th>
					<td  width="140px"><%=historicTaskInstance.getName()%></td>
				</tr>
				<tr>
					<th>发送环节: </th>
					<td><%=historicTaskInstance.getPreTaskDefName()!=null?historicTaskInstance.getPreTaskDefName():""%></td>
				</tr>
				<tr>
					<th>发送人: </th>
					<td><%=processDetailLog.getSendUserName()%></td>
				</tr>
				<tr>
					<th>接收人: </th>
					<td title='<%=processDetailLog.getAssigneeInfo()%>'>
					<%
						if (processDetailLog.getReiceiveUserName() != null
								|| processDetailLog.getReceiveOrgName() != null) {
					%>

					<%=processDetailLog.getReiceiveUserName()%>（<%=processDetailLog.getReceiveOrgName()%>）
					<%
						}
					%>
					</td>
				</tr>
				<%
					if (processDetailLog.getOwnerName() != null) {
				%>
				<tr>
					<th>委托人: </th>
					<td>
					<%=processDetailLog.getOwnerName()%>
					</td>
				</tr>
				<%
					}
				%>
				<tr>
					<th>审批意见: </th>
				<%
					String commentMsg = (comment!=null&&comment.getMessage()!=null? comment.getMessage() : "");
					if(!StringUtils.isEmpty(historicTaskInstance.getDeleteReason())&&"cancel_process".equals(historicTaskInstance.getActionType())){
						String cancelCommentMsg="当前流程已作废,作废意见为:"+historicTaskInstance.getDeleteReason();
						commentMsg=StringUtils.isEmpty(commentMsg)?cancelCommentMsg:(cancelCommentMsg+",发送环节意见为:"+commentMsg);
					}
					int length = commentMsg.length();
				%>

							<c:set var="set" value="<%=length %>" />
							<c:choose>
								<c:when test="${set>16}">
									<td title="<%=commentMsg%>" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
									<a href="#" style="text-decoration:none;"><%=commentMsg%></a></td>
								</c:when>
								<c:otherwise>
									<td class="qTipmessage"><%=commentMsg%></td>
								</c:otherwise>
							</c:choose>

				</tr>
				<tr>
					<th nowrap="nowrap">开始时间: </th>
				<td><%=DateUtil.convertDateToString("yyyy-MM-dd HH:mm:ss",
				historicTaskInstance.getStartTime())%></td>
				</tr>
				<%
					if (historicTaskInstance.getEndTime() != null) {
				%>
				<tr>
					<th nowrap="nowrap">结束时间: </th>
				<td><%=DateUtil.convertDateToString(
				"yyyy-MM-dd HH:mm:ss",
				historicTaskInstance.getEndTime())%></td>
				</tr>
				<%
					}
				%><tr>
					<th nowrap="nowrap">持续时间: </th>
				<td><%=limitTimeStr%></td>
				</tr>

				<tr>
					<th>任务状态: </th>
				<td><%
			if(WorkFlowContants.ACTION_TYPE_CANCEL_PROCESS.equals(historicTaskInstance.getActionType())){
				out.println("<font color='red'>作废</font>");
			}else{
				out.println(historicTaskInstance.getEndTime() != null ? "已完成": "<font color='red'>正在审批</font>");
			}
		%></td>
				</tr>
				</table>
			<br>

		</textarea>
		<%
			}
		%>
	</div>
</div>
</body>
</html>
<script>


</script>