feedpchart.jsp 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <%@ page contentType="text/html; charset=utf-8" session="false" %>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>我的工作台</title>
  6. <%@ include file="../common/header.jsp" %>
  7. <script type="text/javascript" src="${contextPath }/js/calendar/WdatePicker.js"></script>
  8. <script type="text/javascript" src="${contextPath}/js/highcharts.js"></script>
  9. <script type="text/javascript" src="${contextPath}/js/exporting.js"></script>
  10. <script type="text/javascript">
  11. var chart,xStr,chartHeight,chartWidth,options;
  12. $(document).ready( function(){
  13. $("input.datebox").bind("click", function() {WdatePicker();});
  14. setNowDate();
  15. chartWidth = document.body.clientWidth-10;
  16. chartHeight = document.body.clientHeight-60;
  17. queryDate();
  18. });
  19. //初始化日期
  20. function setNowDate(){
  21. var myDate = new Date();
  22. var year = myDate.getFullYear();
  23. var month = myDate.getMonth()+1;
  24. var day = myDate.getDate();
  25. var nowdate = year + "-" + month + "-" + day;
  26. $("#endDate").val(nowdate);
  27. var lastmonth = myDate.getMonth();
  28. var lastdate = year + "-" + lastmonth + "-" + day;
  29. $("#beginDate").val(lastdate);
  30. }
  31. function leftDate(){
  32. var beginDate = $("#beginDate").val();
  33. var endDate = $("#endDate").val();
  34. var newbDate = checkDate(beginDate,"left");
  35. var neweDate = checkDate(endDate,"left");
  36. $("#beginDate").val(newbDate);
  37. $("#endDate").val(neweDate);
  38. queryDate();
  39. }
  40. function rightDate(){
  41. var beginDate = $("#beginDate").val();
  42. var endDate = $("#endDate").val();
  43. var newbDate = checkDate(beginDate,"");
  44. var neweDate = checkDate(endDate,"");
  45. $("#beginDate").val(newbDate);
  46. $("#endDate").val(neweDate);
  47. queryDate();
  48. }
  49. //查询数据
  50. function queryDate(){
  51. //获取点线图的数据
  52. $.ajax({
  53. async: false,
  54. type: "post",
  55. dataType: "json", //返回类型json
  56. data: "beginDate="+$("#beginDate").val()+"&endDate="+$("#endDate").val()+"&cattleId="+$("#cattleId").val(),
  57. url: "${contextPath }/admin/chart/feedpchartlist.html",
  58. error: function(){alert("系统错误");},
  59. success: function(json){
  60. if(json.status == "success"){
  61. xStr = json.Mydate;
  62. options = {
  63. chart: {
  64. type: "line",
  65. height: chartHeight,
  66. width: chartWidth,
  67. renderTo: "container",
  68. },
  69. navigation: {
  70. buttonOptions: {
  71. enabled: false
  72. }
  73. },
  74. title: {
  75. text: "发料时间图表"
  76. },
  77. xAxis: {
  78. categories: xStr,
  79. },
  80. yAxis: {
  81. title: {
  82. text: null
  83. },
  84. labels: {
  85. formatter: function() {
  86. if(this.value < 12){
  87. return this.value + ":00 AM";
  88. }else{
  89. return this.value + ":00 PM";
  90. }
  91. }
  92. },
  93. tickPositions: [0,2,4,6,8,10,12,14,16,18,20,22,24],
  94. min: 0,
  95. max: 24
  96. },
  97. tooltip: {
  98. formatter: function() {
  99. var ydate = String(this.y);
  100. var pIndex = ydate.indexOf(".");
  101. var bdate,edate,newdate;
  102. if(pIndex < 0){
  103. newdate = ydate + ":00";
  104. }else{
  105. bdate = ydate.substring(0,pIndex);
  106. edate = ydate.substring(pIndex+1);
  107. if(bdate.length==1){
  108. bdate = "0"+bdate;
  109. }
  110. if(edate.length==1){
  111. edate = edate+"0";
  112. }
  113. newdate = bdate + ":" + edate;
  114. }
  115. var str = "<b>"+ this.x +"</b><br/>";
  116. str += this.series.name + ": "+newdate;
  117. return str;
  118. }
  119. },
  120. legend: {
  121. layout: "vertical",
  122. align: "right",
  123. verticalAlign: "top",
  124. x: -10,
  125. y: 100,
  126. borderWidth: 0
  127. },
  128. plotOptions: {
  129. series: {
  130. animation: false
  131. }
  132. },
  133. series: []
  134. };
  135. loadChart(json.Serieslists,json.Mydate); //加载点线图
  136. }
  137. }
  138. });
  139. }
  140. //Chart初始化
  141. function loadChart(Serieslists,Mydate){
  142. $.each(Serieslists, function(i, n){
  143. options.series.push({name:""});
  144. options.series[i].name = n.FName;
  145. options.series[i].data = n.RMydatelist;
  146. });
  147. chart = new Highcharts.Chart(options);
  148. }
  149. </script>
  150. </head>
  151. <body style="background-color: #E0E0E0;">
  152. <div class="navfrm">
  153. <span>当前位置:</span>
  154. <span><a href="${contextPath }/admin/welcome.html">首页</a></span>
  155. <span>&nbsp;>>&nbsp;</span>
  156. <span>栏舍统计</span>
  157. </div>
  158. <table cellspacing="1" cellpadding="0" border="0" style="width: 99%;">
  159. <tr>
  160. <td width="10%" height="20">
  161. <input id="beginDate" name="beginDate" style="width:100px;" class="datebox" value=""/>
  162. <input id="endDate" name="endDate" style="width:100px;" class="datebox" value=""/>
  163. <input type="button" value="<" onclick="leftDate();" /><input type="button" value=">" onclick="rightDate();" />
  164. 牲畜类别:
  165. <select id="cattleId" style="width:100px;">
  166. <option value="">全部</option>
  167. <c:forEach items="${cattlelists }" var="cattle">
  168. <option value="${cattle.ID }">
  169. <c:out value="${cattle.CLASSNAME }" />
  170. </option>
  171. </c:forEach>
  172. </select>
  173. <input type="button" value="统计" onclick="queryDate()" class="sysub" />
  174. </td>
  175. </tr>
  176. <tr>
  177. <td height="20">
  178. <div id="container"></div>
  179. </td>
  180. </tr>
  181. </table>
  182. </body>
  183. </html>