157 lines
6.3 KiB
JavaScript
157 lines
6.3 KiB
JavaScript
/*options流程附加信息显示标示
|
||
pid_流程实例id
|
||
pdid_流程定义id*/
|
||
function graphTrace(pid_,pdid_,taskid_) {
|
||
//alert(pdid_);
|
||
var _defaults = {
|
||
srcEle: this,
|
||
pid: pid_,//$(this).attr('pid'),
|
||
pdid: pdid_,// $(this).attr('pdid')
|
||
taskid: taskid_// $(this).attr('pdid')
|
||
};
|
||
var opts = $.extend(true, _defaults);
|
||
// 获取图片资源,如果流程实例id不为空，根据实例id调用资源显示；若为空则调用流程定义资源显示
|
||
if(opts.pid!=""){
|
||
var imageUrl = ext.contextPath + "/activiti/workflow/resource/process-instance.do?pid=" + opts.pid + "&type=image";
|
||
$.getJSON(ext.contextPath + '/activiti/workflow/process/trace.do?pid=' + opts.pid+'&taskId='+opts.taskid, function(infos) {
|
||
var positionHtml = "";
|
||
var toppx=60;
|
||
var leftpx=8;
|
||
//console.info("trace返回结果",infos)
|
||
// 生成图片
|
||
var varsArray = new Array();
|
||
$.each(infos, function(i, v) {
|
||
//console.info("第"+i+"个节点",v)
|
||
var $positionDiv = $('<div/>', {
|
||
'class': 'activity-attr'
|
||
}).css({
|
||
position: 'absolute',
|
||
left: (v.x + leftpx-1),
|
||
top: (v.y + toppx-1),
|
||
width: (v.width - 2),
|
||
height: (v.height - 2),
|
||
backgroundColor: 'black',
|
||
opacity: 0
|
||
});
|
||
// alert("节点边框");
|
||
// 节点边框
|
||
var $border = $('<div/>', {
|
||
'class': 'activity-attr-border'
|
||
}).css({
|
||
position: 'absolute',
|
||
left: (v.x+leftpx),
|
||
top: (v.y+toppx),
|
||
width: (v.width -4),
|
||
height: (v.height -4 ),
|
||
});
|
||
|
||
if (v.currentActiviti) {
|
||
console.log("当前节点",v)
|
||
$border.addClass('ui-corner-all-12').css({
|
||
border: '3px solid red'
|
||
});
|
||
|
||
}
|
||
// alert($positionDiv.prop('outerHTML'));
|
||
positionHtml += $positionDiv.prop('outerHTML') + $border.prop('outerHTML');
|
||
|
||
varsArray[varsArray.length] = v.vars;
|
||
|
||
});
|
||
|
||
if ($('#workflowTraceDialog').length == 0) {
|
||
$('<div/>', {
|
||
id: 'workflowTraceDialog',
|
||
title: '查看流程',
|
||
html: "<div style='position:relative'><img style='margin:" + toppx + "px 0 0 "+ leftpx + "px' src='" + imageUrl + "' />" +
|
||
"<div id='processImageBorder' style='position:absolute; left:0px; top:0px;'>" +
|
||
positionHtml +
|
||
"</div>" +
|
||
"</div>"
|
||
}).appendTo('body');
|
||
$(document.body).addClass("easyui-layout");
|
||
} else {
|
||
$('#workflowTraceDialog img').attr('src', imageUrl);
|
||
$('#workflowTraceDialog #processImageBorder').html(positionHtml);
|
||
}
|
||
// 设置每个节点的data
|
||
$('#workflowTraceDialog .activity-attr').each(function(i, v) {
|
||
$(this).data('vars', varsArray[i]);
|
||
});
|
||
// 打开对话框
|
||
$('#workflowTraceDialog').dialog({
|
||
modal: true,
|
||
resizable: true,
|
||
dragable: false,
|
||
open: function() {
|
||
$('#workflowTraceDialog').dialog('option', 'title', '查看流程（）<button id="changeImg">如果坐标错乱请点击这里</button><button id="diagram-viewer">Diagram-Viewer</button>');
|
||
$('#workflowTraceDialog').css('padding', '0.2em');
|
||
$('#workflowTraceDialog .ui-accordion-content').css('padding', '0.2em').height($('#workflowTraceDialog').height() - 75);
|
||
|
||
// 此处用于显示每个节点的信息，如果不需要可以删除
|
||
$('.activity-attr').qtip({
|
||
content: function() {
|
||
var vars = $(this).data('vars');
|
||
var tipContent = "<table class='need-border'>";
|
||
$.each(vars, function(varKey, varValue) {
|
||
if (varValue) {
|
||
tipContent += "<tr><td class='label'>" + varKey + "</td><td>" + varValue + "<td/></tr>";
|
||
}
|
||
});
|
||
tipContent += "</table>";
|
||
return tipContent;
|
||
},
|
||
position: {
|
||
at: 'bottom left',
|
||
adjust: {
|
||
x: 3
|
||
}
|
||
}
|
||
});
|
||
// end qtip
|
||
},
|
||
close: function() {
|
||
$('#workflowTraceDialog').remove();
|
||
},
|
||
width: document.documentElement.clientWidth * 0.95,
|
||
height: document.documentElement.clientHeight * 0.95
|
||
});
|
||
|
||
});
|
||
}else{
|
||
//调用流程定义资源显示
|
||
var imageUrl = ext.contextPath + "/activiti/workflow/resource/read.do?processDefinitionId=" + opts.pdid + "&resourceType=image";
|
||
var positionHtml = "";
|
||
var toppx=60;
|
||
var leftpx=8;
|
||
$.getJSON(ext.contextPath + '/activiti/workflow/processDefinition/trace.do?pdid=' + opts.pdid, function(infos) {
|
||
// 生成图片
|
||
if ($('#workflowTraceDialog').length == 0) {
|
||
$('<div/>', {
|
||
id: 'workflowTraceDialog',
|
||
title: '查看流程',
|
||
html: "<div><img style='overflow:scroll;margin:" + toppx + "px 0 0 "+ leftpx + "px' src='" + imageUrl + "'/>" +
|
||
"</div>"
|
||
}).appendTo('body');
|
||
$(document.body).addClass("easyui-layout");
|
||
} else {
|
||
$('#workflowTraceDialog img').attr('src', imageUrl);
|
||
}
|
||
// 打开对话框
|
||
$('#workflowTraceDialog').dialog({
|
||
modal: true,
|
||
resizable: true,
|
||
dragable: false,
|
||
onOpen: function() {
|
||
},
|
||
onClose: function() {
|
||
$('#workflowTraceDialog').remove();
|
||
},
|
||
width: document.documentElement.clientWidth * 0.95,
|
||
height: document.documentElement.clientHeight * 0.95
|
||
});
|
||
});
|
||
}
|
||
|
||
}
|