update
This commit is contained in:
hanjian
259
ebpm-process-manage/webapp/pages/trace/traceProcess.jsp
Normal file
259
ebpm-process-manage/webapp/pages/trace/traceProcess.jsp
Normal file
@@ -0,0 +1,259 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/commons/taglibs.jsp"%>
|
||||
<%@page import="com.blueland.bpm.manage.util.*"%>
|
||||
<%
|
||||
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" style="overflow-y: auto;overflow-x auto;">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<%@ include file="/commons/meta.jsp"%>
|
||||
<style type="text/css">
|
||||
div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
|
||||
div#rMenu ul li{
|
||||
margin: 1px 0;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
list-style: none outside none;
|
||||
background-color: #DFDFDF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link href="${ctx}/resource/js/plugins/loadmask/jquery.loadmask.css" rel="stylesheet" type="text/css" />
|
||||
<link href="${ctx}/resource/js/plugins/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" media="screen" />
|
||||
<script type="text/javascript" src="${ctx }/resource/js/plugins/zTree/js/jquery-1.4.4.min.js"></script>
|
||||
<script type="text/javascript" src="${ctx }/resource/js/plugins/zTree/js/jquery.ztree.core-3.4.js"></script>
|
||||
<script type='text/javascript' src='${ctx}/resource/js/plugins/loadmask/jquery.loadmask.js'></script>
|
||||
<script type="text/javascript">
|
||||
/*function $(id){
|
||||
return document.getElementById(id);
|
||||
}*/
|
||||
function changeHref(id,srcStr,currentType){
|
||||
|
||||
//if("image"==currentType){
|
||||
//var height="${height}";
|
||||
|
||||
//}
|
||||
document.getElementById(id).src=srcStr;
|
||||
}
|
||||
function selectTag(showContent,selfObj,currentType,fileId){
|
||||
//当前展示的是文本监控还是图形监控页面标记，text为文本监控页面 image为图形监控页面
|
||||
$("#currentType").val(currentType);
|
||||
var currentProcessInstanceId = $("#currentProcessInstanceId").val();
|
||||
showContent = showContent+(showContent.indexOf("?")!=-1?'&':'?') + "processInstanceId="+currentProcessInstanceId+"&fileId="+fileId ;
|
||||
setMask("main-container");
|
||||
// 操作标签
|
||||
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 busiProcess(arisCode){
|
||||
var url = "<%=MyContants.BPM_FRONT_PATH%>"+"/ebpm-bpa-front/#/detail?fileId="+arisCode+"&type=.bpmn&isMenu=false";
|
||||
var iframeHeight = $("#frmrightChild").contents().find("body").height()<500?500:$("#frmrightChild").contents().find("body").height();
|
||||
$("#frmrightChild").height(iframeHeight);
|
||||
changeHref("frmrightChild",url,"");
|
||||
}
|
||||
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";
|
||||
}
|
||||
|
||||
var zNodes ;
|
||||
var setting = {
|
||||
view: {
|
||||
dblClickExpand : false,
|
||||
selectedMulti: false
|
||||
},
|
||||
edit: {
|
||||
enable: false,
|
||||
drag:{isMove:false}
|
||||
},
|
||||
data: {
|
||||
simpleData: {
|
||||
enable : true,
|
||||
idKey : "id",
|
||||
pIdKey : "pId"
|
||||
}
|
||||
},async: {
|
||||
enable: true,
|
||||
url:"${ctx}/workflow/trace/allProcessInstance.do?processInstanceId=${processInstanceId}",
|
||||
autoParam:["id", "name=n"],
|
||||
dataFilter: filter
|
||||
},callback: {
|
||||
beforeClick: beforeClick,
|
||||
onAsyncSuccess:onAsyncSuccess
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function onAsyncSuccess (){
|
||||
zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
var nodes=zTree.getNodes();
|
||||
var allnodes = zTree.transformToArray(nodes);
|
||||
if(1<allnodes.length){//左边树有多个节点时，展示左边树
|
||||
$("#leftPart").show();
|
||||
}
|
||||
|
||||
//在树上标志出当前节点
|
||||
var currentProcessInstanceId = $("#currentProcessInstanceId").val();
|
||||
var node = zTree.getNodeByParam("id",currentProcessInstanceId);
|
||||
zTree.selectNode(node,false);
|
||||
}
|
||||
|
||||
function filter(treeId, parentNode, childNodes) {
|
||||
//alert(childNodes);
|
||||
//默认加载第一个或者根节点
|
||||
if(typeof(parentNode)=="undefined"||parentNode==null||parentNode==""){
|
||||
//alert(childNodes[2].id);
|
||||
}
|
||||
|
||||
return childNodes;
|
||||
}
|
||||
function beforeClick(treeId, treeNode) {
|
||||
flushFlowLog(treeNode.id);
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
$(function(){
|
||||
var height = window.screen.height;
|
||||
$("#frmrightChild").height(parseInt(height)-290);
|
||||
$("#treeDemo").height(parseInt(height)-218);
|
||||
//默认跳转文本监控
|
||||
var currentProcessInstanceId = $("#currentProcessInstanceId").val();
|
||||
$("#frmrightChild").attr("src","${ctx}/workflow/trace/traceByText.do?"+ "processInstanceId="+currentProcessInstanceId);
|
||||
$.fn.zTree.init($("#treeDemo"), setting);
|
||||
//setMask("main-container");
|
||||
});
|
||||
|
||||
function flushFlowLog(processInstanceId){
|
||||
setMask("main-container");
|
||||
$("#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;
|
||||
}
|
||||
|
||||
}
|
||||
function changiframheight(){
|
||||
$("#main-container").unmask();
|
||||
}
|
||||
function showFlowImage(arisCode){
|
||||
if($("#currentType").val()=="image"){
|
||||
return;
|
||||
}
|
||||
setMask("main-container");
|
||||
|
||||
var currentProcessInstanceId = $("#currentProcessInstanceId").val();
|
||||
$("#currentType").val("image");
|
||||
var url="<%=MyContants.BPM_PROCESS_MODELER_PATH%>";
|
||||
$("#frmrightChild").attr("src",url+"#/processMonitor?"+ "processInstanceId="+currentProcessInstanceId+"&arisCode");
|
||||
}
|
||||
</script>
|
||||
<title>流程监控</title>
|
||||
</head>
|
||||
<body class="no-skin white-page" >
|
||||
<input type="hidden" id="currentProcessInstanceId" value="${processInstanceId}"/>
|
||||
<input type="hidden" id="currentType" value="text"/>
|
||||
<div class="main-container" id="main-container">
|
||||
<script type="text/javascript">
|
||||
try{ace.settings.check('main-container' , 'fixed')}catch(e){}
|
||||
</script>
|
||||
<div class="main-content">
|
||||
<!-- /section:basics/content.breadcrumbs -->
|
||||
<div class="page-content" style="padding:2px;">
|
||||
<!-- #section:settings.box -->
|
||||
|
||||
<!-- /section:settings.box -->
|
||||
<div class="page-content-area">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<!-- PAGE CONTENT BEGINS -->
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="panel-heading" style="margin:0 15px;background: #f5f5f5 !important;color: #18191A;border: 0 !important;padding: 10px 20px;">
|
||||
<span id="headingSpan" style="font-size: 14px;"><b>流程标题：</b>${processInstance.procTitle}，<b>流程状态：</b>${processInstance.procState==1?'运行中':(processInstance.procState==5?'已结束':'已作废')}，<b>流程定义名称：</b>${processInstance.procDefName}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="leftPart" valign="top" class="centerleft" style="width:250px;display:none; ">
|
||||
<div class="panel panel-primary" style="width:250px;">
|
||||
<div class="ztree" id="treeDemo" style="width:250px; height:474px; overflow:auto"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td valign="top" align="left" id="rightPart" >
|
||||
<div class="tabbable" style="margin-left: 0; margin-right: 0;">
|
||||
<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','${arisCode}');"
|
||||
href="" target="frmrightChild" class="current"><i class="ace-icon fa fa-file-text-o bigger-125"></i>
|
||||
文本监控</a></li>
|
||||
|
||||
<%-- <li><a id="UserEvent" href=""
|
||||
data-toggle="tab"
|
||||
onclick="selectTag('${ctx}/workflow/trace/traceByImage.do',this,'image','${arisCode}');"
|
||||
target="frmrightChild"><i class="ace-icon fa fa-picture-o bigger-125"></i>
|
||||
图形监控</a></li> --%>
|
||||
<li><a id="UserEvent" href=""
|
||||
data-toggle="tab"
|
||||
onclick="selectTag('${ctx}/workflow/trace/traceByImage.do',this,'image','${arisCode}');"
|
||||
target="frmrightChild"><i class="ace-icon fa fa-picture-o bigger-125"></i>
|
||||
图形监控</a></li>
|
||||
<%-- <li><a id="UserEvent" href=""
|
||||
data-toggle="tab"
|
||||
onclick="showFlowImage('${arisCode}');"
|
||||
target="frmrightChild"><i class="ace-icon fa fa-picture-o bigger-125"></i>
|
||||
图形监控</a></li> --%>
|
||||
<c:if test="${arisCode != null }">
|
||||
<li><a id="busiEvent" href=""
|
||||
data-toggle="tab"
|
||||
onclick="busiProcess('${arisCode}');"
|
||||
target="frmrightChild"><i class="ace-icon fa fa-sitemap bigger-125"></i>业务流程梳理</a></li>
|
||||
</c:if>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" style="width: 100%; height: 100%;" id="firea">
|
||||
<IFRAME scrolling="auto" frameBorder=0 id="frmrightChild"
|
||||
onload="changiframheight();"
|
||||
name="frmrightChild" style="width:100%;"
|
||||
allowTransparency="true">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- PAGE CONTENT ENDS -->
|
||||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /.page-content-area -->
|
||||
</div><!-- /.page-content -->
|
||||
|
||||
|
||||
|
||||
</div><!-- /.main-container -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user