zhuhongbin
/
TMRWatchNew


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<%@ 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" %>
<script type="text/javascript" src="${contextPath }/js/calendar/WdatePicker.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 chart,xStr,chartHeight,chartWidth,options;
	$(document).ready( function(){
		$("input.datebox").bind("click", function() {WdatePicker();});
		setNowDate();
		chartWidth = document.body.clientWidth-10;
		chartHeight = document.body.clientHeight-60;
		queryDate();
	});
	//初始化日期
	function setNowDate(){
		var myDate = new Date();
		var year = myDate.getFullYear();
		var month = myDate.getMonth()+1;
		var day = myDate.getDate();
		var nowdate = year + "-" + month + "-" + day;
		$("#endDate").val(nowdate);
		var lastmonth = myDate.getMonth();
		var lastdate = year + "-" + lastmonth + "-" + day;		
		$("#beginDate").val(lastdate);
	}
	function leftDate(){
		var beginDate = $("#beginDate").val();
		var endDate = $("#endDate").val();
		var newbDate = checkDate(beginDate,"left");
		var neweDate = checkDate(endDate,"left");
		$("#beginDate").val(newbDate);
		$("#endDate").val(neweDate);
		queryDate();
	}
	function rightDate(){
		var beginDate = $("#beginDate").val();
		var endDate = $("#endDate").val();
		var newbDate = checkDate(beginDate,"");
		var neweDate = checkDate(endDate,"");
		$("#beginDate").val(newbDate);
		$("#endDate").val(neweDate);
		queryDate();
	}
	//查询数据
	function queryDate(){
		//获取点线图的数据
		$.ajax({
			async: false,
			type: "post",
			dataType: "json", //返回类型json
			data: "beginDate="+$("#beginDate").val()+"&endDate="+$("#endDate").val()+"&cattleId="+$("#cattleId").val(),
			url: "${contextPath }/admin/chart/feedpchartlist.html",
			error: function(){alert("系统错误");},
			success: function(json){
				if(json.status == "success"){
					xStr = json.Mydate;
					options = {
			            chart: {
			                type: "line",
			                height: chartHeight,
			                width: chartWidth,
			                renderTo: "container",
			            },
				        navigation: {
				            buttonOptions: {
				                enabled: false
				            }
				        },
			            title: {
			                text: "发料时间图表"
			            },
			            xAxis: {
			                categories: xStr,
			            },
			            yAxis: {
				            title: {
				                text: null
				            },
				            labels: {
								formatter: function() {
									if(this.value < 12){
										return this.value + ":00 AM";
									}else{
										return this.value + ":00 PM";
									}
				                }
				            },
				            tickPositions: [0,2,4,6,8,10,12,14,16,18,20,22,24],
				            min: 0,
				            max: 24
			            },
			            tooltip: {
			                formatter: function() {
			                	var ydate = String(this.y);
			                	var pIndex = ydate.indexOf(".");
			                	var bdate,edate,newdate;
			                	if(pIndex < 0){
			                		newdate = ydate + ":00";
			                	}else{
			                		bdate = ydate.substring(0,pIndex);
			                		edate = ydate.substring(pIndex+1);
				                	if(bdate.length==1){
				                		bdate = "0"+bdate;
				                	}
				                	if(edate.length==1){
				                		edate = edate+"0";
				                	}
			                		newdate = bdate + ":" + edate;
			                	}
			                	var str = "<b>"+ this.x +"</b><br/>";
			                	str += this.series.name + ":	"+newdate;
			                    return str;
			                }
			            },
			            legend: {
			                layout: "vertical",
			                align: "right",
			                verticalAlign: "top",
			                x: -10,
			                y: 100,
			                borderWidth: 0
			            },
			            plotOptions: {
			            	series: {
			                	animation: false
			            	}
			            },
			            series: []					
					};		
					loadChart(json.Serieslists,json.Mydate); //加载点线图	
				}
			}
		});
	}
	
	//Chart初始化
	function loadChart(Serieslists,Mydate){
		$.each(Serieslists, function(i, n){
		  	options.series.push({name:""});
			options.series[i].name = n.FName;
			options.series[i].data = n.RMydatelist;				
		});	
		chart = new Highcharts.Chart(options);
	}
</script>
</head>
<body style="background-color: #E0E0E0;">
	<div class="navfrm">		
			<span>当前位置：</span>
			<span><a href="${contextPath }/admin/welcome.html">首页</a></span>
			<span>&nbsp;>>&nbsp;</span>
			<span>栏舍统计</span>		
	</div>
	<table cellspacing="1" cellpadding="0" border="0" style="width: 99%;">
	  <tr>
	    <td width="10%" height="20">
	    	<input id="beginDate" name="beginDate" style="width:100px;" class="datebox" value=""/>
	    	<input id="endDate" name="endDate" style="width:100px;" class="datebox" value=""/>
	    	<input type="button" value="<" onclick="leftDate();" /><input type="button" value=">" onclick="rightDate();" />
			牲畜类别：
			<select id="cattleId" style="width:100px;">
				<option value="">全部</option>
				<c:forEach items="${cattlelists }" var="cattle">
					<option value="${cattle.ID }">
						<c:out value="${cattle.CLASSNAME }" />
					</option>
				</c:forEach>
			</select>	
	    	<input type="button" value="统计" onclick="queryDate()" class="sysub" />
	    </td>
	  </tr>
	  <tr>
	    <td height="20">
	    	<div id="container"></div>
	    </td>
	  </tr>
	</table>
</body>
</html>