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

/*options流程附加信息显示标示.线边库存为xbk,品质扣料为kl
pid_流程实例id
pdid_流程定义id*/
function graphTrace(options,pdid_) {
	//alert(pdid_);
    var _defaults = {
        srcEle: this,
	    pdid: pdid_,// $(this).attr('pdid')
	    detail: options// $(this).attr('pdid')
    };
    var opts = $.extend(true, _defaults);
    // 获取图片资源,如果流程实例id不为空，根据实例id调用资源显示；若为空则调用流程定义资源显示
    //console.info(opts)
   if(opts.detail!=""){
    	//调用流程定义资源显示
    	var imageUrl = ext.contextPath + "/activiti/workflow/resource/read.do?processDefinitionId=" + opts.pdid + "&resourceType=image";
    	var positionHtml = "";
    	var toppx=60;
    	var leftpx=8;
    	var key =opts.detail;
    	$.getJSON(ext.contextPath + '/work/scadaPic/traceProcessDefinitionWithPInfo.do?pdid=' + opts.pdid+"&key="+key, function(infos) {
    		//console.info("infos:",infos)
	        // 生成图片
	        var varsArray = new Array();
	        $.each(infos, function(i, v) {
	            var $positionDiv = $('<div/>', {
	                'class': 'activity-attr'
	            }).css({
	                position: 'absolute',
	                left: (v.x +leftpx),
	                top: (v.y +toppx),
	                width: (v.width ),
	                height: (v.height),
	                opacity: 1,
	                textAlign:"center"
	            });
	            // 节点边框
	            var $border = $('<div/>', {
	                'class': 'activity-attr-border'
	            }).css({
	                position: 'absolute',
	                left: (v.x + leftpx ),
	                top: (v.y +toppx),
	                width: (v.width ),
	                height: (v.height )
	            });
	            
	            if (v.taskActiviti) {
		            $border.addClass('ui-corner-all-12').css({
	                    border: '3px solid red'
	                });
	            }
	            //$positionDiv.textbox("setValue","sssss");
	            positionHtml += $positionDiv.prop("outerHTML") + $border.prop("outerHTML");
	            varsArray[varsArray.length] = v.vars;
	        });
	        if ($('#workflowTraceDialog').length == 0) {
	            $('<div/>', {
	                id: 'workflowTraceDialog',
	                title: '查看流程',
	                html: "<div ><img style='margin:" + toppx + "px 0 0 "+ leftpx + "px' src='" + imageUrl + "'  />" +
	                "<div id='processImageBorder'>" +
	                positionHtml +
	                "</div>" +
	                "</div>"
	            }).appendTo('body');
	            $(document.body).addClass("easyui-layout");
	        } else {
	            $('#workflowTraceDialog img').attr('src', imageUrl);
	        }
	        // 设置每个节点的data
	        $('#workflowTraceDialog .activity-attr').each(function(i, v) {
	        	//console.info("setVars")
	            $(this).data('vars', varsArray[i]);
	        });
	        //console.info("activity-attr-info:",$('#workflowTraceDialog .activity-attr'))
	        //console.info(varsArray)
	//                $('#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);
	                console.info("open")
	                // 此处用于显示每个节点的信息，如果不需要可以删除
	                //console.info($('.activity-attr'));
	                $('.activity-attr').each(function(i,v){
	                	var vars = $(this).data('vars');
	                        //console.info("每个节点信息"+vars)
                        var content="";
                        $.each(vars, function(varKey, varValue) {
                            if (varKey==key) {
                            	content += '<span style="color:#117cb0">'+varValue+'</span>';;
                            }
                            
                        });
                        $(this).append(content);
				   });
    	});
    }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
	        });*/
    	});
    }
    
}