ztxxHjkzHaifmMain.htm 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. @media (device-height:1024px) and (-webkit-min-device-pixel-ratio:2){/* 兼容ipad */
  6. .ztxxIscroll{
  7. font-size: 24px;
  8. }
  9. .cardWrapper div.row .leftDiv div img{
  10. width: 100px;
  11. height: 100px;
  12. }
  13. .cardWrapper div.row .leftDiv h5{
  14. width: 100px;
  15. font-size: 18px;
  16. }
  17. .cardWrapper div.row .rightDiv dl.dl-horizontal dt{
  18. height: 36px;
  19. width: 100px;
  20. }
  21. .ztxxIscroll{
  22. bottom: 100px !important;
  23. }
  24. }
  25. .cardWrapper div.row .leftDiv div img{
  26. margin-top: 0;
  27. }
  28. .ztxxIscroll>div>.row{
  29. display: flex;
  30. justify-content: center;
  31. align-items: center;
  32. border-bottom: 1px solid #ccc;
  33. }
  34. .cardWrapper div.row .rightDiv{
  35. margin: 8px auto 0;
  36. }
  37. /* 滚动条样式 */
  38. .iScrollVerticalScrollbar {
  39. position: absolute;
  40. z-index: 9999;
  41. width: 3px;
  42. bottom: 2px;
  43. top: 2px;
  44. right: 2px;
  45. overflow: hidden;
  46. }
  47. .iScrollVerticalScrollbar.iScrollBothScrollbars {
  48. bottom: 18px;
  49. }
  50. .iScrollIndicator {
  51. position: absolute;
  52. right: 0;
  53. background: rgba(0, 0, 0);
  54. border: 2px solid rgba(0, 0, 0, 0.5);
  55. border-radius: 8px;
  56. }
  57. </style>
  58. </head>
  59. <script type="text/javascript">
  60. $(function(){
  61. //滚动区域事件
  62. mScroll = new IScroll(".ztxxIscroll",{
  63. scrollbars: true,
  64. fadeScrollbars:true,
  65. shrinkScrollbars:'clip',
  66. scrollbars: 'custom',
  67. tap:true
  68. });
  69. //滚动区域的刷新事件
  70. setTimeout(function () {
  71. mScroll.refresh();
  72. }, 100);
  73. });
  74. </script>
  75. <body>
  76. <div class="container cardWrapper ztxxIscroll" style="overflow: hidden;position: absolute;margin: 0;width: 100%;bottom: 60px;margin-bottom: 0;top:70px;">
  77. <div>
  78. <!-- 基本信息 -->
  79. <div class="row">
  80. <div class="leftDiv col-xs-5 col-sm-5 col-md-5 col-lg-5">
  81. <div><img src="views/haifm/images/zs/jbxx3.png" /></div>
  82. <h5>基本信息</h5>
  83. </div>
  84. <div class="rightDiv col-xs-7 col-sm-7 col-md-7 col-lg-7">
  85. <dl class="dl-horizontal">
  86. <dt>栏期名称<span></span></dt>
  87. <dd>$!hm.daLqda.lqmc</dd>
  88. <dt>入栏天数<span></span></dt>
  89. <dd>$!hm.mscxsj&nbsp;天</dd>
  90. <dt>入栏数<span></span></dt>
  91. <dd>$!hm.daLqda.rls&nbsp;头</dd>
  92. <dt>入栏体重<span></span></dt>
  93. <dd>$!hm.daLqda.rlpjtz&nbsp;Kg</dd>
  94. <dt>猪窝数<span></span></dt>
  95. <dd>0</dd>
  96. </dl>
  97. </div>
  98. </div>
  99. <!-- 动物去向 -->
  100. <div class="row">
  101. <div class="leftDiv col-xs-5 col-sm-5 col-md-5 col-lg-5">
  102. <div><img src="views/haifm/images/zs/dwqx3.png" /></div>
  103. <h5>动物去向</h5>
  104. </div>
  105. <div class="rightDiv col-xs-7 col-sm-7 col-md-7 col-lg-7">
  106. <dl class="dl-horizontal">
  107. <dt>在栏<span></span></dt>
  108. <dd>$!hm.daLqda.zls&nbsp;($!hm.yebzls)头</dd>
  109. <dt>售出<span></span></dt>
  110. <dd>$!hm.daLqda.scs&nbsp;头</dd>
  111. <dt>隔离<span></span></dt>
  112. <dd>$!hm.daLqda.gls&nbsp;头</dd>
  113. <dt>死亡<span></span></dt>
  114. <dd>#if("$!hm.daLqda.sws" == "0")$!hm.daLqda.sws&nbsp;头#else<span style="color:red">$!hm.daLqda.sws</span>&nbsp;头#end</dd>
  115. </dl>
  116. </div>
  117. </div>
  118. <!-- 饲料消耗 -->
  119. <div class="row">
  120. <div class="leftDiv col-xs-5 col-sm-5 col-md-5 col-lg-5">
  121. <div><img src="views/haifm/images/zs/sczk3.png" /></div>
  122. <h5>饲料消耗</h5>
  123. </div>
  124. <div class="rightDiv col-xs-7 col-sm-7 col-md-7 col-lg-7">
  125. <dl class="dl-horizontal">
  126. <dt></dt>
  127. <dd>昨天/今天</dd>
  128. <dt>累计采食<span></span></dt>
  129. <dd>$!hm.rcssum KG</dd>
  130. <dt></dt>
  131. <dd>昨天/今天</dd>
  132. <dt>日采食<span></span></dt>
  133. <dd><span class="rqbt"> $!hm.ztslxh </span>KG / <span class="rqbt">$!hm.jtslxh</span>KG</dd>
  134. </dl>
  135. </div>
  136. </div>
  137. <!-- 活跃指数 -->
  138. <div class="row">
  139. <div class="leftDiv col-xs-5 col-sm-5 col-md-5 col-lg-5">
  140. <div><img src="views/haifm/images/zs/rjfw3.png" /></div>
  141. <h5 >活跃指数</h5>
  142. </div>
  143. <div class="rightDiv col-xs-7 col-sm-7 col-md-7 col-lg-7">
  144. <dl class="dl-horizontal">
  145. <dt><span></span></dt>
  146. <dd class="rqbt">昨天/今天</dd>
  147. <dt>活跃指数<span></span></dt>
  148. <dd><span class="rqbt"></span> / <span class="rqbt"></span></dd>
  149. <dt><span></span></dt>
  150. <dd class="rqbt">最高/最低</dd>
  151. <dt>单窝<span></span></dt>
  152. <dd><span class="rqbt"></span> / <span class="rqbt"></span></dd>
  153. </dl>
  154. </div>
  155. </div>
  156. <!-- 舍内环境 -->
  157. <div class="row">
  158. <div class="leftDiv col-xs-5 col-sm-5 col-md-5 col-lg-5">
  159. <div><img src="views/haifm/images/zs/snhj3.png" /></div>
  160. <h5>舍内环境</h5>
  161. </div>
  162. <div class="rightDiv col-xs-7 col-sm-7 col-md-7 col-lg-7">
  163. <dl class="dl-horizontal">
  164. <dt><span></span></dt>
  165. <dd>昨天 $!{hm.ztmintemp}-$!{hm.ztmaxtemp} °C</dd>
  166. <dt>室内温度<span></span></dt>
  167. <dd></dd>
  168. <dt><span></span></dt>
  169. <dd>今天 $!{hm.jtmintemp}-$!{hm.jtmaxtemp} °C</dd>
  170. <dt><span></span></dt>
  171. <dd>昨天 $!{hm.ztminsd}-$!{hm.ztmaxsd} RH</dd>
  172. <dt>室内湿度<span></span></dt>
  173. <dd></dd>
  174. <dt><span></span></dt>
  175. <dd>今天 $!{hm.jtminsd}-$!{hm.jtmaxsd} RH</dd>
  176. <dt>氨气浓度<span></span></dt>
  177. <dd>$!hm.aqnd ppm</dd>
  178. </dl>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. </body>
  184. </html>