cbd_image_discern_resule.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Hello MUI</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <!--标准mui.css-->
  9. <!--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">-->
  10. <link rel="stylesheet" href="../css/mui.min.css">
  11. <link rel="stylesheet" href="../css/iconfont.css">
  12. <link rel="stylesheet" href="../css/common.css">
  13. <!--App自定义的css-->
  14. <style type="text/css">
  15. body,html,.mui-content{
  16. background-color: #fff;
  17. }
  18. .resultTitle{
  19. font-size: 16px;
  20. margin: 5px 0;
  21. border-left: 4px solid #006dcc;
  22. padding-left: 6px;
  23. font-weight: 600;
  24. }
  25. .resultBox span{
  26. color: #cf0000;
  27. font-weight: 600;
  28. margin-right: 10px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <header class="mui-bar mui-bar-nav">
  34. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  35. <h1 class="mui-title" id="title">测报灯识别结果</h1>
  36. <a class="mui-icon mui-icon mui-icon-reload mui-pull-right" id="reload"></a>
  37. </header>
  38. <div class="mui-content">
  39. <ul class="mui-table-view" id="resultMsg">
  40. <li class="mui-table-view-cell">
  41. <div class="resultTitle">图片标记</div>
  42. </li>
  43. <li class="mui-table-view-cell" style="text-align: center;">
  44. <img src="" width="100%" id="cbdImg"/>
  45. </li>
  46. <li class="mui-table-view-cell">
  47. <div class="resultTitle">识别结果</div>
  48. </li>
  49. <!--<li class="mui-table-view-cell resultBox">
  50. 害虫名称:<span>黑绒金龟(序号:9)</span>害虫个数:<span>2</span>
  51. </li>-->
  52. </ul>
  53. </div>
  54. </body>
  55. <script src="../js/jquery-2.1.0.js"></script>
  56. <script src="../js/mui.min.js"></script>
  57. <script src="../js/cbd_pest_library.js"></script>
  58. <script>
  59. var equipId,addr;
  60. var username;
  61. mui.plusReady(function() {
  62. var self = plus.webview.currentWebview();
  63. equipId = self.equipId;
  64. addr = self.addr;
  65. // $('#cbdImg').attr('src','http://120.27.222.26/cbd/'+addr);
  66. // $('#cbdImg').attr('src','https://pic.qiantucdn.com/back_origin_pic/19/03/18/607c964d203fe4413ee6351aef2796d4.jpg!/format/webp/fw/1024/watermark/url/L2ltYWdlcy93YXRlcm1hcmsvc2h1aXlpbi5wbmc=/repeat/true');
  67. mui.ajax('http://120.27.222.26/pests_identification_new', {
  68. data: {
  69. 'img_addr': addr
  70. },
  71. dataType: 'json', //服务器返回json格式数据
  72. type: 'post', //HTTP请求类型
  73. timeout: 10000, //超时时间设置为10秒;
  74. beforeSend: function() {
  75. plus.nativeUI.showWaiting('请求中...');
  76. },
  77. complete: function() {
  78. plus.nativeUI.closeWaiting();
  79. },
  80. success: function(data) {
  81. insectData(data,function(){})
  82. $('.resultBox').remove();
  83. console.log(JSON.stringify(data))
  84. $('#cbdImg').attr('src',data.image);
  85. $('#cbdImg').width('100%');
  86. // if(data.result){
  87. // var html = '';
  88. // var wormArr = data.result.split('#');
  89. // var wormImg = data.image;
  90. // for(var i = 0; i<wormArr.length;i++){
  91. // var worm = wormArr[i].split(',');
  92. // var wormName = worm[0];
  93. // var wormNum = worm[1];
  94. // html += '<li class="mui-table-view-cell resultBox">害虫名称:<span>'+insect_dict[wormName]+'(序号:'+wormName+')</span>害虫个数:<span>'+wormNum+'</span></li>';
  95. // if(i == wormArr.length-1){
  96. // $('#resultMsg').append(html);
  97. // }
  98. // }
  99. // }else{
  100. // var html = '';
  101. // html += '<li class="mui-table-view-cell resultBox">此类暂未录入</li>'
  102. // $('#resultMsg').append(html);
  103. // }
  104. },
  105. error: function(xhr, type, errorThrown) {
  106. mui.toast('请求失败')
  107. $('#cbdImg').attr('src','../images/error.png');
  108. $('#cbdImg').width('30%');
  109. var html = '<li class="mui-table-view-cell resultBox">此类暂未录入</li>'
  110. $('#resultMsg').append(html);
  111. }
  112. });
  113. function insectData (res) {
  114. mui.ajax('http://120.27.222.26/wechat_plant',{
  115. dataType:'json',//服务器返回json格式数据
  116. type:'get',//HTTP请求类型
  117. timeout: 10000,//超时时间设置为10秒;
  118. beforeSend: function() {
  119. plus.nativeUI.showWaiting('请求中...');
  120. },
  121. complete: function() {
  122. setTimeout(function() {
  123. plus.nativeUI.closeWaiting();
  124. }, 4000);
  125. },
  126. success:function(data){
  127. if(res.result){
  128. var html = '';
  129. var wormArr = res.result.split('#');
  130. var wormImg = res.image;
  131. for(var i = 0; i<wormArr.length;i++){
  132. var worm = wormArr[i].split(',');
  133. var wormName = worm[0];
  134. var wormNum = worm[1];
  135. html += '<li class="mui-table-view-cell resultBox">害虫名称:<span>'+data[wormName]+'(序号:'+wormName+')</span>害虫个数:<span>'+wormNum+'</span></li>';
  136. if(i == wormArr.length-1){
  137. $('#resultMsg').append(html);
  138. }
  139. }
  140. }else{
  141. var html = '';
  142. html += '<li class="mui-table-view-cell resultBox">此类暂未录入</li>'
  143. $('#resultMsg').append(html);
  144. }
  145. },
  146. error:function(xhr,type,errorThrown){
  147. mui.toast('识别失败')
  148. }
  149. });
  150. }
  151. $('#cbdImg').on('tap',function(){
  152. var imgsrc = document.getElementById('cbdImg').getAttribute('src');
  153. console.log(imgsrc)
  154. plus.nativeUI.previewImage([
  155. imgsrc
  156. ]);
  157. })
  158. $('#reload').on('tap',function(){
  159. window.location.reload();
  160. })
  161. })
  162. </script>
  163. </html>