SIPAIIS_WMS_JSSW/bin/WebRoot/JS/activiti/workflow.js

/*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
	        });
    	});
    }
    
}