lookWormDetial.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <!--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">-->
  8. <link href="../css/mui.min.css" rel="stylesheet" />
  9. <link href="../css/common.css" rel="stylesheet" />
  10. <style type="text/css">
  11. .mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell {
  12. padding-left: 10px;
  13. }
  14. .category,
  15. .categoryVal input {
  16. text-align: center;
  17. font-size: 14px;
  18. }
  19. .saveBtn {
  20. display: none;
  21. }
  22. .nullData {
  23. margin: 45px;
  24. text-align: center;
  25. }
  26. .mui-content>.mui-table-view:first-child{
  27. margin-top: 0;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <header class="mui-bar mui-bar-nav">
  33. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  34. <h1 class="mui-title">虫害详情</h1>
  35. </header>
  36. <div class="mui-content">
  37. <ul class="mui-table-view" id="detial">
  38. <!--<li class="mui-table-view-cell mui-collapse">
  39. <a class="mui-navigate-right">
  40. <span class="equipTitle">害虫名称</span>
  41. <p class="wormname">蛾子</p>
  42. </a>
  43. <ul class="mui-table-view mui-table-view-chevron">
  44. <li class="mui-table-view-cell">
  45. <div class="mui-pull-right">
  46. <button class="editBtn"><span class="mui-icon mui-icon-compose"></span></button>
  47. <button class="saveBtn"><span class="mui-icon mui-icon-upload"></span></button>
  48. <button class="delBtn"><span class="mui-icon mui-icon-trash"></span></button>
  49. </div>
  50. </li>
  51. <li class="mui-table-view-cell">
  52. <div class="mui-row category categoryTitle">
  53. <span class="mui-col-xs-4">数量</span>
  54. <span class="mui-col-xs-4">作物种类</span>
  55. <span class="mui-col-xs-4">虫害阶段</span>
  56. </div>
  57. </li>
  58. <li class="mui-table-view-cell">
  59. <div class="mui-row category categoryVal">
  60. <span class="mui-col-xs-4 wormnum">0</span>
  61. <span class="mui-col-xs-4 cropArea">玉米花生地玉米花生地</span>
  62. <span class="mui-col-xs-4 worstage">严重严重严重</span>
  63. </div>
  64. </li>
  65. </ul>
  66. </li>-->
  67. </ul>
  68. </div>
  69. <script src="../js/mui.min.js"></script>
  70. <script src="../js/jquery-2.1.0.js"></script>
  71. <script src="../js/common.js"></script>
  72. <script type="text/javascript">
  73. var equipId;
  74. var addr;
  75. mui.init();
  76. mui.plusReady(function() {
  77. var self = plus.webview.currentWebview();
  78. equipId = self.equipId;
  79. addr = self.addr;
  80. console.log(equipId);
  81. (function() {
  82. //请求害虫列表
  83. mui.ajax('http://120.27.222.26/cbd_describe_img', {
  84. data: {
  85. req: 'desc',
  86. addr: addr
  87. },
  88. dataType: 'json', //服务器返回json格式数据
  89. type: 'get', //HTTP请求类型
  90. timeout: 10000, //超时时间设置为10秒;
  91. success: function(data) {
  92. var html = '';
  93. if(data.length){
  94. for(var i = 0; i < data.length; i++) {
  95. html += '<li class="mui-table-view-cell mui-collapse">' +
  96. '<a class="mui-navigate-right">' +
  97. '<span class="equipTitle">害虫名称</span>' +
  98. '<p class="wormname">' + data[i].pest_name + '</p></a>' +
  99. '<ul class="mui-table-view mui-table-view-chevron">' +
  100. '<li class="mui-table-view-cell">' +
  101. '<div class="mui-pull-right">' +
  102. '<button class="editBtn"><span class="mui-icon mui-icon-compose"></span></button>' +
  103. '<button class="saveBtn"><span class="mui-icon mui-icon-upload"></span></button>' +
  104. '<button class="delBtn"><span class="mui-icon mui-icon-trash"></span></button>' +
  105. '</div></li><li class="mui-table-view-cell">' +
  106. '<div class="mui-row category categoryTitle">' +
  107. '<span class="mui-col-xs-4">数量</span>' +
  108. '<span class="mui-col-xs-4">作物种类</span>' +
  109. '<span class="mui-col-xs-4">虫害阶段</span>' +
  110. '</div> </li><li class="mui-table-view-cell">' +
  111. '<div class="mui-row category categoryVal">' +
  112. '<span class="mui-col-xs-4 wormnum">' + data[i].pest_num + '</span>' +
  113. '<span class="mui-col-xs-4 cropArea">' + data[i].crop_name + '</span>' +
  114. '<span class="mui-col-xs-4 worstage">' + data[i].pest_case + '</span>' +
  115. '</div></li></ul></li>';
  116. }
  117. $('#detial').html(html)
  118. }else{
  119. var nullHtml = '<div class="nullData"><img src="../images/listNull.png" alt="" width="110" /></div>'
  120. $('.mui-content').html(nullHtml)
  121. }
  122. },
  123. error: function(xhr, type, errorThrown) {
  124. mui.toast('请求失败');$('.nullData').remove();
  125. var nullHtml = '<div class="nullData"><img src="../images/error.png" alt="" width="110" /></div>'
  126. $('.mui-content').append(nullHtml);
  127. }
  128. });
  129. //编辑
  130. mui('#detial').on('tap', '.editBtn', function() {
  131. if($('.saveBtn.current').length != 1) {
  132. $(this).hide();
  133. $(this).next().show();
  134. $(this).next().addClass('current');
  135. $(this).parents('li').eq(1).css('background', '#faf9db');
  136. var inp = $(this).parents('ul').eq(0).find('.categoryVal').find('span')
  137. inp.each(function() {
  138. var val = $(this).html();
  139. var html = '<input type="text" value="' + val + '" />'
  140. $(this).html(html)
  141. })
  142. } else {
  143. mui.toast('正在编辑中……')
  144. }
  145. })
  146. //保存
  147. mui('#detial').on('tap', '.saveBtn', function() {
  148. var _this = $(this);
  149. var dat = [];
  150. var inp = $(this).parents('ul').eq(0).find('.categoryVal').find('input');
  151. inp.each(function() {
  152. var val = $(this).val();
  153. dat.push(val)
  154. })
  155. var wormName = $(this).parents('li').eq(1).find('.wormname').html()
  156. var describe = { pest_name: wormName, crop_name: dat[1], pest_num: dat[0], pest_case: dat[2] }
  157. if(!isNaN(dat[0])) {
  158. mui.ajax('http://120.27.222.26/cbd_describe_img', {
  159. data:{
  160. req: 'change_save',
  161. addr: addr,
  162. describe:JSON.stringify(describe)
  163. },
  164. dataType: 'json', //服务器返回json格式数据
  165. type: 'post', //HTTP请求类型
  166. timeout: 10000, //超时时间设置为10秒;
  167. success: function(data) {
  168. if(data == 0) {
  169. var span = _this.parents('ul').eq(0).find('.categoryVal').find('span');
  170. span.each(function(index, ele) {
  171. $(ele).html(dat[index])
  172. })
  173. _this.hide();
  174. _this.prev().show();
  175. _this.removeClass('current');
  176. _this.parents('li').eq(1).css('background', '');
  177. }
  178. },
  179. error: function(xhr, type, errorThrown) {
  180. console.log(type)
  181. }
  182. });
  183. } else {
  184. mui.toast('输入不合法……')
  185. }
  186. })
  187. //删除
  188. mui('#detial').on('tap', '.delBtn', function() {
  189. var wormName = $(this).parents('li').eq(1).find('.wormname').html();
  190. var describe = {"pest_name":wormName}
  191. mui.ajax('http://120.27.222.26/cbd_describe_img', {
  192. data:{
  193. req: 'del_desc',
  194. addr: addr,
  195. describe:JSON.stringify(describe)
  196. },
  197. dataType: 'json', //服务器返回json格式数据
  198. type: 'post', //HTTP请求类型
  199. timeout: 10000, //超时时间设置为10秒;
  200. success: function(data) {
  201. if(data == 0) {
  202. window.location.reload();
  203. }
  204. },
  205. error: function(xhr, type, errorThrown) {
  206. console.log(type)
  207. }
  208. });
  209. })
  210. }(mui, jQuery))
  211. })
  212. </script>
  213. </body>
  214. </html>