zhuhongbin
/
TMRWatchNew


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
							<%@ page contentType="text/html; charset=utf-8" session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<title>我的工作台</title>
<%@ include file="../common/header.jsp" %>
<script type="text/javascript" src="${contextPath}/js/highcharts.js"></script>
<script type="text/javascript" src="${contextPath}/js/exporting.js"></script>
<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">
	var mydata,minWeight,xStr,Series,Aw,Ll,chart,chartHeight,chartWidth,loadcount=0,panelCHeight=0,panelSHeight=0,InterId;
	$(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);
		
		$("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);
			},
			onOpen: function(){
				panelC = $("body").layout("panel","center").panel();
				panelCHeight = panelC.height();
				panelSHeight = $(window).height() - panelC.height();
				chartWidth = $(window).width()*0.99;
				chartHeight = panelSHeight*0.75;
				loadChart(); //加载点线图
			},
			onResize: function(){
				panelS = $("body").layout("panel","south").panel();
				panelCHeight = $(window).height() - panelS.height();
				$("#list").jqGrid("setGridHeight",panelCHeight-110);
				$("#p1list").jqGrid("setGridHeight",panelCHeight-130);
				$("#p2list").jqGrid("setGridHeight",panelCHeight-130);
				$("#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("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.9;
		loadChart(); //加载点线图		
	});
	
	function showloadChart(){
		var currentpId = $("#currentpId").val();
		var Dno = $("#Dno").val();
		var beginDate = $("#beginDate").val();
		var ActualWeight = $("#ActualWeight").val();
		//获取点线图的数据
		$.ajax({
			async: false,
			type: "POST",
			dataType: "json", //返回类型json
			data: "beginDate="+beginDate+"&SrcAddr="+Dno+"&currentpId="+currentpId+"&ActualWeight="+ActualWeight,
			url: "${contextPath }/admin/statistics/rdxlist.html",
			error: function(){alert("系统错误");},
			success: function(json){
				if(json.status == "success"){
					xStr = json.MTime;
					Series = json.Weight;
					Aw = json.AW;
					Ll = json.Ll;
				}
			}
		});
		$("#p1list").clearGridData();
		loadR1List();
		$("#p2list").clearGridData();
		loadR2List();
		loadChart(); //加载点线图
	}
	
	//jqgrid初始化
	function loadList(){

		jQuery("#list").jqGrid({ 
			datatype: "local",  //从服务器端返回的数据类型，（表格期望接收的数据类型）。可选类型：xml，xmlstring，json，local，function
			height: 150, 	//高度
			colNames:["主键","TMR","执行计划", "开始时间", "计划日期", "DataCaptureNo","ActualWeight"],  //列名
			colModel:[
				{
					name: "ID",
					index: "ID",
					align: "center", 
					sorttype: "string", 
					hidden: true
				}, 
				{
					name: "TNAME",
					index: "TNAME", 
					align: "center", 
					sorttype: "string"
				}, 
				{
					name: "ProjName",
					index: "ProjName", 
					align: "center", 
					sorttype: "string"
				}, 
				{
					name: "InTime",
					index: "InTime", 
					width: 300,
					align: "center", 
					sorttype: "string"
				}, 
				{
					name: "Mydate",
					index: "Mydate", 
					align: "center", 
					sorttype: "string"
				}, 
				{
					name: "DataCaptureNo",
					index: "DataCaptureNo", 
					align: "center", 
					sorttype: "string", 
					hidden: true
				},
				{
					name: "ActualWeight",
					index: "ActualWeight", 
					align: "center", 
					sorttype: "string", 
					hidden: true
				}
			],
		   	
		    onSelectRow: function(rowid){
		    
              	window.clearInterval(InterId);//取消定时
              	
		    	var selId = $("#list").jqGrid("getGridParam","selrow"); //获取当前选中行号
				var rowData = $("#list").jqGrid("getRowData",selId); //获取当前选中行真实对象
				$("#currentpId").val(rowData.ID);
				$("#Dno").val(rowData.DataCaptureNo);
				$("#beginDate").val(rowData.InTime);
				$("#ActualWeight").val(rowData.ActualWeight);
				$("#dl1Result").load("${contextPath }/admin/statistics/realtime1.html");
				$("#dl2Result").load("${contextPath }/admin/statistics/realtime2.html");
				
				panelS = $("body").layout("panel","south").panel();
				panelCHeight = $(window).height() - panelS.height();
				$("#list").jqGrid("setGridHeight",panelCHeight-110);
				$("#p1list").jqGrid("setGridHeight",panelCHeight-130);
				$("#p2list").jqGrid("setGridHeight",panelCHeight-130);
				$("#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.9;
				
				//获取点线图的数据
				$.ajax({
					async: false,
					type: "POST",
					dataType: "json", //返回类型json
					data: "beginDate="+rowData.InTime+"&SrcAddr="+rowData.DataCaptureNo+"&currentpId="+rowData.ID+"&ActualWeight="+rowData.ActualWeight,
					url: "${contextPath }/admin/statistics/rdxlist.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(); //加载点线图
				InterId = setInterval("showloadChart()","10000");//设置定时器，每10s跳一次
		    },
		    autowidth: true,	//自动调节宽度
		    rowNum: 1000,	//每页显示条数
		   	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]);
			}
		}
		
		
	}
	
	//获取服务器数据
	function getLists(){
		$.ajax({
			async: false,
			type: "POST",
			dataType: "json", //返回类型json
			url: "${contextPath }/admin/statistics/realtimelist.html",
			error: function(){alert("系统错误");},
			success: function(json){
				mydata = json;
			}
		});
		return mydata;
	}
	
	//Chart初始化
	function loadChart(){
        chart = new Highcharts.Chart({
            chart: {
            	backgroundColor:"#FFFFEF",
            	animation: false,
                renderTo: "container",
                type: "line",
                zoomType: "x,y",
                height: chartHeight,
                width: chartWidth
            },
            title: {
                text: ""
            },
            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: {
                align: "top",
                verticalAlign: "top",
                x: 100,
                y: 1,
                borderWidth: 1,
                itemMarginBottom: 5
            },
            plotOptions: {
            	series: {
                	animation: false
            	},	
            	line: {
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: false,
                                radius: 1,
                                lineWidth: 1
                            }
                        }
                    }
            	}
            },
            exporting: {
            	enabled: false
            },
            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" title="实时监控" 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="" />
					<input type="hidden" id="beginDate" name="beginDate" value="" />
					<input type="hidden" id="Dno" name="Dno" value="" />
					<input type="hidden" id="ActualWeight" name="ActualWeight" value="" />
					<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>