<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<%
	String processInstanceId = request
			.getParameter("processInstanceId");
%>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/commons/meta.jsp"%>
<script type="text/javascript">
	function procDefNameOnDbClick(name, value) {
		$("#procDefName").val(name);
		$("#procDefKey").val(value);
	}
	function changeHref(id, srcStr, currentType) {
		if ("image" == currentType) {
			var height = "${height}";
			$("#frmrightChild").height(parseInt(height) + 100);
		}
		document.getElementById(id).src = srcStr;
	}
	function selectTag(showContent, selfObj, currentType) {
		//当前展示的是文本监控还是图形监控页面标记，text为文本监控页面  image为图形监控页面
		$("#currentType").val(currentType);

		var currentProcessInstanceId = $("#currentProcessInstanceId").val();
		showContent = showContent
				+ (showContent.indexOf("?") != -1 ? '&' : '?')
				+ "processInstanceId=" + currentProcessInstanceId;

		// 操作标签
		var tag = document.getElementById("tags").getElementsByTagName("li");
		var taglength = tag.length;
		for (i = 0; i < taglength; i++) {
			tag[i].className = "";
		}
		selfObj.parentNode.className = "selectTag";
		changeHref("frmrightChild", showContent, currentType);
	}
	function moveLeft() {
		var left = $("tags").style.left;
		left = left && parseInt(left) || 0;
		if (left < 0) {
			$("tags").style.left = left + 95 + "px";
		}
	}

	function moveRight() {
		var left = $("tags").style.left;
		left = left && parseInt(left) || 0;
		$("tags").style.left = left - 95 + "px";
	}

	

	$(function() {
		var currentProcessInstanceId = $("#currentProcessInstanceId").val();
	});

	function flushFlowLog(processInstanceId) {
		$("#currentProcessInstanceId").val(processInstanceId);
		var currentType = $("#currentType").val();
		if ("text" == currentType) {
			document.getElementById("frmrightChild").src = "${ctx}/workflow/trace/traceByText.do?processInstanceId="
					+ processInstanceId;
		} else {
			document.getElementById("frmrightChild").src = "${ctx}/workflow/trace/traceByImage.do?processInstanceId="
					+ processInstanceId
					+ "&imageHeight="
					+ "600"
					+ "&imageWidth=" + "1200";
		}

	}
</script>
<title>流程监控</title>
</head>
<body class="no-skin">

<jsp:include page="../../pages/procDefMgr/procDefTree.jsp" flush="false" />
	<input type="hidden" id="currentProcessInstanceId"
		value="${processInstance.procInstId}" />
	<div class="main-container" id="main-container">

		<div class="main-content">

			<!-- /section:basics/content.breadcrumbs -->
			<div class="page-content">
				<!-- #section:settings.box -->

				<!-- /section:settings.box -->
				<div class="page-content-area">

					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<form method="post" action="autoRun.do">
							<table width="100%">
								<tr>
									<td colspan="2">
										<div class="panel-heading"
											style="color: #FFF; background-color: #428BCA; border-color: #428BCA; padding: 2px 15px;">
											<tr>
												<td>发起用户(选择)<font color="red">*</font>：
													<input style="width: 400px;" type="text" name="procStartUserId"  id="procStartUserId"/>
													<input style="width: 400px;" type="hidden" name="123"  id="333"/>
												</td>
											</tr>
											
											<tr>
												<td>选择自动运行流程<font color="red">*</font>：
												<input style="width: 400px;" type="text" name="procDefName"  id="procDefName" readonly onclick="showMenu('procDefName','',''); return false;" />
								<input style="width: 400px;" type="hidden"
								name="procDefKey" value="" id="procDefKey" />
												<input type="submit" class="btn btn-sm btn-primary"
												id="submitButton"  value="继续运行" />
												<input type="submit" class="btn btn-sm btn-primary"
							id="submitButton"  value="停止" />
												</td>
											</tr>
										</div>
									</td>
								</tr>
								<tr>

									<td valign="top" align="left" id="rightPart">
										<div class="tabbable">
										${processInstance.procTitle}
											<ul
												class="nav nav-tabs padding-12 tab-color-blue background-blue"
												id="tags">
												<li class="active"><a id="UserContract"
													data-toggle="tab"
													onclick="selectTag('${ctx}/workflow/trace/traceByText.do',this,'text');"
													href="" target="frmrightChild" class="current">文本监控</a></li>

												<li><a id="UserEvent" href="" data-toggle="tab"
													onclick="selectTag('${ctx}/workflow/trace/traceByImage.do?imageHeight=600&imageWidth=1200',this,'image');"
													target="frmrightChild">图形监控</a></li>
											</ul>


											<div class="tab-content" style="width: 100%; height: 100%;">
												<IFRAME scrolling="yes" frameBorder=0 id="frmrightChild"
													src="" name="frmrightChild"
													style="width: 99%; min-height: 400px;"
													allowTransparency="true">
											</div>
										</div>
									</td>
								</tr>
							</table>
							</form>

							<!-- PAGE CONTENT ENDS -->
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content-area -->
			</div>
			<!-- /.page-content -->


		</div>
		<!-- /.main-container -->
		
</body>
</html>
