daDetails.htm 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>daDetails</title>
  6. <style>
  7. li{
  8. text-align: left;
  9. }
  10. li + li{
  11. margin-top: 0.15rem;
  12. }
  13. li a span:first-child{
  14. color: #fff;
  15. background-color: #4e768f;
  16. padding: 0.05rem 0.2rem;
  17. border-radius: 10px;
  18. }
  19. .suosou {
  20. padding: 0.24rem 0.15rem;
  21. justify-content: center;
  22. background: #d7dfea ;
  23. border-bottom: none ;
  24. flex-direction: column;
  25. }
  26. #wrap header{
  27. box-shadow: 0 0 0.32rem #000;
  28. }
  29. .row {
  30. width: 100%;
  31. color: #64879d;
  32. margin-right: 0;
  33. margin-left: 0;
  34. padding: 0.05rem 0;
  35. }
  36. .mui-table-view,.mui-table-view-cell.mui-collapse .mui-collapse-content{
  37. background: #D7DFEA;
  38. }
  39. .mui-table-view-cell{
  40. padding: 8px 0;
  41. background-color: #bbcde1;
  42. border-radius: 0;
  43. }
  44. .mui-table-view-cell.mui-collapse .mui-collapse-content{
  45. margin: 8px 0 -8px 0;
  46. }
  47. .mui-table-view-cell.mui-collapse + .mui-active {
  48. margin-top: 0.15rem;
  49. }
  50. .mui-table-view-cell>a:not(.mui-btn).mui-active,.mui-table-view-cell.mui-active{
  51. background-color: #bbcde1;
  52. }
  53. .mui-collapse-content .row .col-xs-2.col-sm-2.col-md-2:first-child{
  54. font-weight: bold;text-indent: 0.06rem;
  55. }
  56. .mui-navigate-right:after, .mui-push-left:after, .mui-push-right:after{
  57. color: #4e768f;
  58. font-size: 0.38rem;
  59. background: #fff;
  60. border-radius: 50%;
  61. right: 0.7rem;
  62. }
  63. .mui-table-view-cell>a:not(.mui-btn){
  64. padding: 8px 0.7rem;
  65. }
  66. .xian{
  67. position: absolute;left: 0.25rem;top: -12px;background: #bbcde1;width: 0.04rem;height: 1.1rem;
  68. }
  69. .dian{
  70. position: absolute;left: 0.265rem;top: 50%;transform: translate(-50%,-50%);width: 0.15rem;height: 0.15rem;border-radius: 50%;
  71. }
  72. .pz{
  73. background: #2EBB88;
  74. }
  75. .sj{
  76. background: #CE6E3B;
  77. }
  78. .dn{
  79. background: #C401A7;
  80. }
  81. .fm{
  82. background: #9102CF;
  83. }
  84. .col-xs-4.col-sm-4.col-md-4 div div+div{
  85. margin-left: 0.1rem;
  86. }
  87. .col-xs-2.col-sm-2.col-md-2,.col-xs-3.col-sm-3.col-md-3,.col-xs-4.col-sm-4.col-md-4{
  88. padding: 0 0 0 0.3rem;
  89. }
  90. .col-xs-4.col-sm-4.col-md-4{
  91. padding-left: 0.1rem;
  92. }
  93. </style>
  94. <script type="text/javascript" src="views/haifmv/sjrl/da/mzda/daDetails.js"></script>
  95. </head>
  96. <body>
  97. <input type="hidden" id="dweb" value="$!sjlrMzda.dweb" />
  98. <input type="hidden" id="eph" value="$!sjlrMzda.eph" />
  99. <input type="hidden" value="$!ztsl" id="ztsl" />
  100. <input type="hidden" value="$!from" id="fromtt" />
  101. <input type="hidden" value="$!cxeph" id="cxeph" />
  102. <div id="wrap">
  103. <header>
  104. <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="backUrl();"></span>
  105. <p>$!sjlrMzda.eph</p>
  106. #if("$!from" != "zztt")
  107. <span class="glyphicon glyphicon-pencil" aria-hidden="true" style="font-size: 0.3rem;" onclick = "edit();"></span>
  108. #end
  109. </header>
  110. <div class="middle">
  111. <section class="detailIscroll">
  112. <div>
  113. <div class="suosou container-fluid">
  114. <div class="row">
  115. <div class="col-xs-6 col-sm-6 col-md-6 discenter">品种:<span>$!sjlrMzda.pzStr</span></div>
  116. <div class="col-xs-6 col-sm-6 col-md-6 discenter">舍栏:<span>$!sjlrMzda.slStr</span></div>
  117. </div>
  118. <div class="row">
  119. <div class="col-xs-6 col-sm-6 col-md-6 discenter">出生日期:<span>$!dateTool.format('yyyy-MM-dd', $!sjlrMzda.csrq)</span></div>
  120. <div class="col-xs-6 col-sm-6 col-md-6 discenter">当前状态:<span>$!sjlrMzda.dqztStr</span></div>
  121. </div>
  122. <div class="row">
  123. <div class="col-xs-6 col-sm-6 col-md-6 discenter">窝均活仔:<span>$!sjlrMzda.yctc胎</span></div>
  124. <div class="col-xs-6 col-sm-6 col-md-6 discenter">已产胎次:<span>$!sjlrMzda.wjhz头</span></div>
  125. </div>
  126. <div class="row">
  127. <div class="col-xs-6 col-sm-6 col-md-6 discenter">日龄:<span>$!sjlrMzda.rl天</span></div>
  128. <div class="col-xs-6 col-sm-6 col-md-6 discenter">窝均断奶:<span>$!sjlrMzda.wjdn头</span></div>
  129. </div>
  130. </div>
  131. <ul class="mui-table-view">
  132. <li class="mui-table-view-cell mui-collapse">
  133. <a class="mui-navigate-right" href="#"><span>温度</span></a>
  134. <div class="mui-collapse-content container-fluid">
  135. <div id="container" style="width:100%;height:100%"></div>
  136. </div>
  137. </li>
  138. #foreach($obj in $mzxxList)
  139. <li class="mui-table-view-cell mui-collapse">
  140. <a class="mui-navigate-right" href="#"><span>第$!obj.hh胎</span></a>
  141. <div class="mui-collapse-content">
  142. #if("$!obj.sjlrPzjl" != "")
  143. <!--初配-->
  144. <div class="row">
  145. <div class="col-xs-2 col-sm-2 col-md-2 discenter" style="color: #2EBB88;">【配种】<i class="xian"></i><i class="dian pz"></i></div>
  146. <div class="col-xs-3 col-sm-3 col-md-3 discenter">$!dateTool.format('yyyy-MM-dd', $!obj.sjlrPzjl.pzsj)</div>
  147. <div class="col-xs-4 col-sm-4 col-md-4 discenter">配种公猪:<span>$!obj.sjlrPzjl.ypgzeb</span></div>
  148. <div class="col-xs-3 col-sm-3 col-md-3 discenter">评分:<span>$!obj.sjlrPzjl.yppf</span></div>
  149. </div>
  150. <div class="row">
  151. <div class="col-xs-2 col-sm-2 col-md-2 discenter"><i class="xian"></i></div>
  152. <div class="col-xs-3 col-sm-3 col-md-3 discenter"></div>
  153. <div class="col-xs-4 col-sm-4 col-md-4 discenter">预产期:<span>$!dateTool.format('yyyy-MM-dd', $!obj.sjlrPzjl.ycrq)</span></div>
  154. <div class="col-xs-3 col-sm-3 col-md-3 discenter">发情间隔:<span>$!obj.sjlrPzjl.fqjg</span></div>
  155. </div>
  156. #end
  157. <!--娠检-->
  158. <div class="row">
  159. <div class="col-xs-2 col-sm-2 col-md-2 discenter" style="color: #CE6E3B;">【娠检】<i class="xian"></i><i class="dian sj"></i></div>
  160. <div class="col-xs-3 col-sm-3 col-md-3 discenter">$!dateTool.format('yyyy-MM-dd', $!obj.sjlrRsjl.rssj)</div>
  161. <div class="col-xs-4 col-sm-4 col-md-4 discenter">娠检结果:<span>$!obj.sjlrRsjl.rsjgStr</span></div>
  162. <div class="col-xs-3 col-sm-3 col-md-3 discenter"></div>
  163. </div>
  164. #if("$!obj.sjlrFmjl" != "")
  165. <!--分娩-->
  166. <div class="row">
  167. <div class="col-xs-2 col-sm-2 col-md-2 discenter" style="color: #9102CF;">【分娩】<i class="xian"></i><i class="dian fm"></i></div>
  168. <div class="col-xs-3 col-sm-3 col-md-3 discenter">$!dateTool.format('yyyy-MM-dd', $!obj.sjlrFmjl.fmsj)</div>
  169. <div class="col-xs-2 col-sm-2 col-md-2 discenter" style="padding-left: 0.1rem;">总仔:<span>$!obj.sjlrFmjl.szgs</span></div>
  170. <div class="col-xs-4 col-sm-4 col-md-4 discenter" style="display: flex;flex-direction: column;align-items: flex-start;padding-left: 0.4rem;">
  171. <div style="display: flex;"><div>健:<span>$!obj.sjlrFmjl.jzgs</span></div><div>弱:<span>$!obj.sjlrFmjl.rzgs</span></div><div>畸:<span>$!obj.sjlrFmjl.jxgs</span></div></div>
  172. <div style="display: flex;"><div>活:<span>$!obj.sjlrFmjl.hzgs</span></div><div>木:<span>$!obj.sjlrFmjl.mnygs</span></div><div>死:<span>$!obj.sjlrFmjl.stgs</span></div></div>
  173. <div style="display: flex;"><div>公:<span>$!obj.sjlrFmjl.gzgs</span></div><div>母:<span>$!obj.sjlrFmjl.mzgs</span></div></div>
  174. </div>
  175. </div>
  176. #end
  177. #if ("$!obj.sjlrDnjl" != "")
  178. <!--断奶-->
  179. <div class="row">
  180. <div class="col-xs-2 col-sm-2 col-md-2 discenter" style="color: #C401A7;">【断奶】<i class="xian"></i><i class="dian dn"></i></div>
  181. <div class="col-xs-3 col-sm-3 col-md-3 discenter">$!dateTool.format('yyyy-MM-dd', $!obj.sjlrDnjl.dnsj)</div>
  182. <div class="col-xs-4 col-sm-4 col-md-4 discenter">断奶头数:<span>$!obj.sjlrDnjl.dnsl头</span></div>
  183. <div class="col-xs-3 col-sm-3 col-md-3 discenter">断奶窝重:<span>$!obj.sjlrDnjl.dnwzkg</span></div>
  184. </div>
  185. #end
  186. </div>
  187. </li>
  188. #end
  189. </ul>
  190. </div>
  191. </section>
  192. </div>
  193. </div>
  194. </body>
  195. </html>