/*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 = $('
', {
'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 = $('', {
'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) {
$('', {
id: 'workflowTraceDialog',
title: '查看流程',
html: "
" +
"
" +
positionHtml +
"
" +
"
"
}).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', '查看流程()');
$('#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 = "";
$.each(vars, function(varKey, varValue) {
if (varValue) {
tipContent += "| " + varKey + " | " + varValue + " | |
";
}
});
tipContent += "
";
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) {
$('', {
id: 'workflowTraceDialog',
title: '查看流程',
html: "
" +
"
"
}).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
});
});
}
}