zhuhongbin
/
TMRWatchNew


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
							<%@ page contentType="text/html; charset=utf-8" session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的工作台</title>
<%@ include file="../common/header.jsp" %>
<link type="text/css" rel="stylesheet" href="${contextPath}/css/themes/easyui.css"  />
<script type="text/javascript" src="${contextPath }/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/highcharts.js"></script>
<script type="text/javascript" src="${contextPath}/js/exporting.js"></script>
<script type="text/javascript">
	var mydata,minWeight,xStr,Series,Aw,Ll,chart,chartHeight,chartWidth,panelCHeight=0,panelSHeight=0,panelStatus = 1;
	$(document).ready( function() {
		loadList();	//加载jqgrid
		$("#list").jqGrid("setGridWidth",$(window).width()*0.32);
		$("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
		$("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
		$("#list").jqGrid("setSelection",1);
		$("#dl1Result").load("${contextPath }/admin/statistics/process1.html");
		$("#dl2Result").load("${contextPath }/admin/statistics/process2.html");
		
		$("body").layout("panel","south").panel({
			onClose: function(){
				panelC = $("body").layout("panel","center").panel();
				$("#list").jqGrid("setGridWidth",$(window).width()*0.33);
				$("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
				$("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
				$("#list").jqGrid("setGridHeight",panelC.height()-60);
				$("#p1list").jqGrid("setGridHeight",panelC.height()-80);
				$("#p2list").jqGrid("setGridHeight",panelC.height()-80);
				panelStatus = 0;
			},
			onOpen: function(){
				if(panelCHeight == 0){
					panelStatus = 1;
					panelC = $("body").layout("panel","center").panel();
					panelCHeight = panelC.height();
					panelSHeight = $(window).height() - panelC.height();
					chartWidth = $(window).width()*0.99;
					chartHeight = panelSHeight*0.85;
					loadChart(); //加载点线图	
				}
			},
			onResize: function(){
				panelS = $("body").layout("panel","south").panel();
				panelCHeight = $(window).height() - panelS.height();
				$("#list").jqGrid("setGridHeight",panelCHeight-70);
				$("#p1list").jqGrid("setGridHeight",panelCHeight-90);
				$("#p2list").jqGrid("setGridHeight",panelCHeight-90);
				$("#list").jqGrid("setGridWidth",$(window).width()*0.33);
				$("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
				$("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
				chartWidth = $(window).width()*0.99;
				chartHeight = panelS.height()*0.99;
				loadChart(); //加载点线图	
			}
		});

	});
	
	$(window).resize(function(){
		panelS = $("body").layout("panel","south").panel();
		$("#list").jqGrid("setGridHeight",panelCHeight-110);
		$("#p1list").jqGrid("setGridHeight",panelCHeight-130);
		$("#p2list").jqGrid("setGridHeight",panelCHeight-130);
		$("#list").jqGrid("setGridWidth",$(window).width()*0.32);
		$("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
		$("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
		chartWidth = $(window).width()*0.99;
		chartHeight = panelS.height()*0.99;
		loadChart(); //加载点线图		
	});
	
	//jqgrid初始化
	function loadList(){
		jQuery("#list").jqGrid({ 
			datatype: "local",  //从服务器端返回的数据类型，（表格期望接收的数据类型）。可选类型：xml，xmlstring，json，local，function
			height: 170, 	//高度
			colNames:["主键","TMR","计划名称", "制定日期", "开始时间", "DataCaptureNo", "lastInTime","ActualWeight"],  //列名
			colModel:[
				{
					name: "ID",
					index: "ID",
					width: 10, 
					align: "center", 
					sorttype: "string", 
					hidden: true
				}, 
				{
					name: "TNAME",
					index: "TNAME", 
					width: 50, 
					align: "center", 
					sorttype: "string"
				}, 
				{
					name: "ProjName",
					index: "ProjName", 
					width: 70, 
					align: "center", 
					sorttype: "string"
				}, 
				{
					name: "Mydate",
					index: "Mydate", 
					width: 80, 
					align: "center", 
					sorttype: "string"
				}, 
				{
					name: "InTime",
					index: "InTime", 
					width: 150, 
					align: "center", 
					sorttype: "string"
				}, 
				{
					name: "DataCaptureNo",
					index: "DataCaptureNo", 
					width: 10, 
					align: "center", 
					sorttype: "string", 
					hidden: true
				}, 
				{
					name: "lastInTime",
					index: "lastInTime", 
					width: 10, 
					align: "center", 
					sorttype: "string", 
					hidden: true
				},
				{
					name: "ActualWeight",
					index: "ActualWeight", 
					width: 10, 
					align: "center", 
					sorttype: "string", 
					hidden: true
				}
			],
		   	
		    onSelectRow: function(rowid){
		    	var selId = $("#list").jqGrid("getGridParam","selrow"); //获取当前选中行号
				var rowData = $("#list").jqGrid("getRowData",selId); //获取当前选中行真实对象
				$("#currentpId").val(rowData.ID);
				$("#dl1Result").load("${contextPath }/admin/statistics/process1.html");
				$("#dl2Result").load("${contextPath }/admin/statistics/process2.html");
				//获取点线图的数据
				$.ajax({
					async: false,
					type: "POST",
					dataType: "json", //返回类型json
					data: "beginDate="+rowData.InTime+"&endDate="+rowData.lastInTime+"&SrcAddr="+rowData.DataCaptureNo+"&currentpId="+rowData.ID+"&ActualWeight="+rowData.ActualWeight,
					url: "${contextPath }/admin/statistics/pdxlist.html",
					error: function(){alert("系统错误");},
					success: function(json){
						if(json.status == "success"){
							minWeight = json.minWeight;
							xStr = json.MTime;
							Series = json.Weight;
							Aw = json.AW;
							Ll = json.Ll;
						}
					}
				});
				loadChart(); //加载点线图
		    },
			/**
			*	设置水平滚动条 begin
			**/
			shrinkToFit:false,	
			autoScroll: true,
			//width: 370,
		   	autowidth: true,	//自动调节宽度
		   	rowNum: 1000,	//每页显示条数
		   	/**
			*	设置水平滚动条 end
			**/
		   	altRows: true,	//设置表格是否允许行交替变色值
		    altclass:"tdbgmouseover"	//自定义隔行变色的样式
		    
		}); 
		
		//获取数据集
		mydata = getLists();
		
		if(mydata!=null){
			for(var i=0;i<=mydata.length;i++){
				jQuery("#list").jqGrid("addRowData",i+1,mydata[i]);
			}
			//如果页面上没有分页工具条、就不要自动刷新一次了，不然数据显示不完全，jqgrid可能有默认每页显示的条数，如果想数据完全展示，
			//在自动刷新后并且没有页面分页工具条时必须给一个默认页面显示条数才可以。
			//rowNum: 10000,	//每页显示条数
			//jQuery("#list").jqGrid().trigger("reloadGrid"); //添加完数据后客户端自动刷新一次、实现客户端数据与服务器数据的完全分离
		}
		
	}
	
	//获取服务器数据
	function getLists(){
		var beginDate = $("#beginDate").val();
		var endDate = $("#endDate").val();
		var Times = $("#Times").val();
		var DataCaptureNo = $("#DataCaptureNo").val();
		var DriverID = $("#DriverID").val();
		$.ajax({
			async: false,
			type: "POST",
			dataType: "json", //返回类型json
			data: "beginDate="+beginDate+"&endDate="+endDate+"&Times="+Times+"&DataCaptureNo="+DataCaptureNo+"&DriverID="+DriverID,
			url: "${contextPath }/admin/statistics/reeorchartlist.html",
			error: function(){alert("系统错误");},
			success: function(json){
				mydata = json;
			}
		});
		return mydata;
	}
	
	//Chart初始化
	function loadChart(){
        chart = new Highcharts.Chart({
            chart: {
            	backgroundColor:"#FFFFEF",
            	shadow: true,
                renderTo: "container",
                type: "spline",
                zoomType: "x,y",
                height: chartHeight,
                width: chartWidth
            },
	        navigation: {
	            buttonOptions: {
	                enabled: false
	            }
	        },
            lang: {
            	loading: "请稍等……",
            	printButtonTitle: "打印",
            	resetZoom: "缩放比例",
            	resetZoomTitle: "缩放比例",
            	exportButtonTitle: "导出",
            	downloadPNG: "PNG格式导出",
            	downloadJPEG: "JPEG格式导出",
            	downloadPDF: "PDF格式导出",
            	downloadSVG: "SVG格式导出"
            },
            title: {
                text: "过程分析",
                x: -20 //center
            },
            xAxis: {
                categories: xStr,
                labels: {
                	step: 20
            	}
            },
            yAxis: {
                title: {
                    text: "重量(kg)"
                },
                min: minWeight,
                tickInterval: 1000  //坐标轴刻度间距:tickPixelInterval像素距离、tickInterval数值距离
            },
            tooltip: {
            	crosshairs: true, //鼠标移动x轴显示虚线
                formatter: function() {
                        return "<b>"+ this.series.name +"</b><br/>"+
                        this.x +"　"+ this.y +"kg";
                }
            },
            legend: {
                layout: "vertical",
                align: "right",
                verticalAlign: "top",
                x: -10,
                y: 100,
                borderWidth: 1,
                itemMarginBottom: 5
            },
            plotOptions: {
            	series: {
                	animation: false
            	},	
            	spline: {
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: false,
                                radius: 1,
                                lineWidth: 1
                            }
                        }
                    }
            	}
            },
            series: [
            {
                name: "重量",
                data: Series
            },
            {
                type: "scatter",
                name: "实际重量",
                data: Aw,
                marker: {
                    radius: 4
             	},
             	color: "#BE77FF"
            },
            {
                name: "理论重量",
                step: "right",
                data: Ll,
                marker: {
                    radius: 3
             	},
             	color: "#EA0000"
            }
            ]
        });
	}
</script>
</head>
<body class="easyui-layout">
	<div region="center" style="padding:5px;background:#eee;">
		<table cellspacing="1" cellpadding="0" border="0" style="width: 100%;">
			<tr>
				<td width="33%">
					<input type="hidden" id="currentpId" name="currentpId" value="${currentpId }" />
					<input type="hidden" id="beginDate" name="beginDate" value="${beginDate }" />
					<input type="hidden" id="endDate" name="endDate" value="${endDate }" />
					<input type="hidden" id="Times" name="Times" value="${Times }" />
					<input type="hidden" id="DataCaptureNo" name="DataCaptureNo" value="${DataCaptureNo }" />
					<input type="hidden" id="DriverID" name="DriverID" value="${DriverID }" />
					<table id="list"></table>
				</td>
				<td width="33%"><div id="dl1Result"></div></td>
				<td width="33%"><div id="dl2Result"></div></td>
			</tr>
		</table>
	</div>
	<div region="south" split="true" title="监控图" style="height:320px;">
		<table cellspacing="1" cellpadding="0" border="0" style="width: 99%;">
			<tr>
				<td><div id="container"></div></td>
			</tr>
		</table>
	</div>
</body>
</html>