1078 lines
28 KiB
Plaintext
1078 lines
28 KiB
Plaintext
<%@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 += " <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> |