data.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  5. <title></title>
  6. <link rel="stylesheet" type="text/css" href="css/style.css">
  7. <script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
  8. </head>
  9. <body>
  10. <div class="header">
  11. <ul class="nav clearfix">
  12. <li><a href="" title="">水润佳禾</a></li>
  13. <li><a href="" title="">雨农灌溉</a></li>
  14. <li><a href="" title="">灌溉商城</a></li>
  15. <li><a href="" title="">智慧农业</a></li>
  16. <li class="no-bg"><a href="" title="">登录新农宝盒云平台</a></li>
  17. </ul>
  18. </div>
  19. <div class="equip-top">
  20. <h3>大田一号管理</h3>
  21. <div class="avatar"><img src="img/equip2.jpg" width="106" height="106" alt=""></div>
  22. <img src="../img/equip1.jpg" alt="" class="bg">
  23. <div class="txt">E:1234.54,W:2233.43</div>
  24. </div>
  25. <div class="equip">
  26. <div class="tabs clearfix">
  27. <a href="equip.html" class="">设备控制</a>
  28. <a href="business.html">墒情分析</a>
  29. <a href="data.html" class="active">数据统计</a>
  30. <a href="log.html" class="no-bg">设备记录</a>
  31. </div>
  32. <div class="business-cavs" style="padding-top: 20px;">
  33. <div class="title">
  34. <select class="start-time">
  35. <option>开始时间</option>
  36. </select>
  37. <select class="end-time">
  38. <option>结束时间</option>
  39. </select>
  40. <select class="args">
  41. <option>查询参数</option>
  42. </select>
  43. <div class="submit-btn" id="J_submitBtn">提交</div>
  44. </div>
  45. <div class="business-list three-list data clearfix">
  46. <div class="business-item">
  47. <div class="num">28℃</div>
  48. <div class="name">平均温度</div>
  49. </div>
  50. <div class="business-item mlr35">
  51. <div class="num">85%rh</div>
  52. <div class="name">平均湿度</div>
  53. </div>
  54. <div class="business-item">
  55. <div class="num">20m/s</div>
  56. <div class="name">平均风速</div>
  57. </div>
  58. </div>
  59. <div id="container" style="min-width:700px;height:400px;margin-bottom:60px;"></div>
  60. </div>
  61. </div>
  62. <div class="footer">
  63. <div class="txt">京ICP备123456号 联系电话:4001231234</div>
  64. </div>
  65. <script type="text/javascript" src="../lib/date/WdatePicker.js"></script>
  66. <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  67. <script id="push">var Maze_Data = {};Maze_Data.dw = "℃";Maze_Data.url = "http://www.xinnongbaohe.com/data?farm=2&park=8";Maze_Data.name = "1号土壤温度";Maze_Data.data = [
  68. {
  69. "value": 1.1618426259,
  70. "date": "2012-08-28",
  71. "l": -2.6017329022,
  72. "u": 0.2949717757
  73. },
  74. {
  75. "value": 0.5828247293,
  76. "date": "2012-08-29",
  77. "l": -1.3166963635,
  78. "u": 0.1324086347
  79. },
  80. {
  81. "value": 0.3790770636,
  82. "date": "2012-08-30",
  83. "l": -0.8712221305,
  84. "u": 0.0956413566
  85. }
  86. ];</script>
  87. <script type="text/javascript">
  88. $(function () {
  89. var chart = new Highcharts.Chart({
  90. chart: {
  91. renderTo: 'container',
  92. type: 'spline'
  93. },
  94. title: {
  95. text: null
  96. },
  97. credits: {
  98. enabled: false
  99. },
  100. exporting: {
  101. enabled: false
  102. },
  103. xAxis: {
  104. type: 'datetime',
  105. dateTimeLabelFormats: {
  106. millisecond: '%H:%M:%S.%L',
  107. second: '%H:%M:%S',
  108. minute: '%H:%M',
  109. hour: '%H:%M',
  110. day: '%e. %b',
  111. week: '%e. %b',
  112. month: '%b \'%y',
  113. year: '%Y'
  114. }
  115. },
  116. yAxis: {
  117. title: {
  118. text: ''
  119. }
  120. },
  121. tooltip: {
  122. formatter: function()
  123. {
  124. return '<b>'+ Maze_Data.name +'</b><br/>'+
  125. Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br />'+ this.y +' ' + Maze_Data.dw;
  126. }
  127. },
  128. series: Maze_Data.data
  129. });
  130. $('#J_submitBtn').bind('click', function()
  131. {
  132. var start = $("#search_start").val();
  133. var end = $("#search_end").val();
  134. var type = $("#search_type").val();
  135. var method = $("#search_method").val();
  136. var time = $("#search_time_value").val();
  137. location.href = Maze_Data.url + '&start=' + start + '&end=' + end + '&type=' + type + '&method=' + method + '&time=' + time + '#J_submitBtn';
  138. });
  139. });
  140. function time()
  141. {
  142. var value = $("#search_time").val();
  143. if(value)
  144. {
  145. var temp = value.split('||');
  146. $("#search_start").val(temp[0]);
  147. $("#search_end").val(temp[1]);
  148. $("#search_method").val(temp[2]);
  149. $("#search_time_value").val(temp[3]);
  150. $("#J_submitBtn").click();
  151. }
  152. }
  153. </script>
  154. </body>
  155. </html>