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> >> </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>
|