/*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 += ""; } }); tipContent += "
" + varKey + "" + varValue + "
"; 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 }); }); } }