fruitsPlant.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. <template>
  2. <view>
  3. <!-- 搜索 -->
  4. <!-- <u-search :disabled="true" margin="15rpx auto" :input-style="{width: '20rpx'}" input-align="center" :animation="true"
  5. placeholder="搜索作物名称" shape="square" :show-action="false" v-model="keyword"></u-search> -->
  6. <!-- 作物列表 -->
  7. <view class="plantList_ul">
  8. <!-- 上次定位 -->
  9. <view class="plantList_li" v-if="lastTimeShow">
  10. <view class="plantList_tlt">
  11. 上次选择
  12. </view>
  13. <view class="plantList_li_ul">
  14. <view class="plantList_li_List" @click="recognizeData(allPlantData[lastTimeIndex].num, allPlantData[lastTimeIndex].name, lastTimeIndex)">
  15. <image :src="$imageURL_58003+'/bigservers/' + allPlantData[lastTimeIndex].img" mode=""></image>
  16. <view class="">
  17. {{ allPlantData[lastTimeIndex].name }}
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. <!-- 全部 -->
  23. <view class="plantList_li">
  24. <view class="plantList_tlt">
  25. 该模型开发中。。。
  26. </view>
  27. <view class="plantList_li_ul">
  28. <view @click="recognizeData(item.num, item.name, index)" class="plantList_li_List" v-for="(item, index) in allPlantData"
  29. :key="index">
  30. <image :src="$imageURL_58003+'/bigservers/' + item.img" mode=""></image>
  31. <view class="">
  32. {{ item.name }}
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <!-- 其他 -->
  38. <!-- <view class="plantList_li">
  39. <view class="plantList_tlt">
  40. 其他
  41. <text>(此项目开发中,结果可能会有误差)</text>
  42. </view>
  43. <view class="plantList_li_ul">
  44. <view class="plantList_li_List" @click="restsData()">
  45. <image :src="$imageURL_58003+'/bigservers/' + 'images/detail_9.png'" mode=""></image>
  46. <view class="">
  47. 其他
  48. </view>
  49. </view>
  50. </view>
  51. </view> -->
  52. <!-- 裁剪组件 -->
  53. <kps-image-cutter @ok="axiosData" @cancel="oncancle" :url="url" :fixed="false" :blob="false" :maxWidth="500"
  54. :maxHeight="500"></kps-image-cutter>
  55. <!-- 弹框 -->
  56. <u-modal :mask-close-able="true" @cancel="insectData('1')" @confirm="insectData('2')" confirm-text="虫害" cancel-text="病害" v-model="show"
  57. :show-cancel-button="true" :content="content"></u-modal>
  58. <!--loading-->
  59. <ourLoading v-show="loadingShow" isFullScreen active text="识别中..." />
  60. </view>
  61. </view>
  62. </template>
  63. <script>
  64. import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue"; //裁剪图片
  65. export default {
  66. data() {
  67. return {
  68. keyword: '', //搜索
  69. show: false,
  70. content: '请选择测试虫害还是病害',
  71. allPlantData: [
  72. // {
  73. // 'name': '梨',
  74. // 'img': 'images/plant_5.jpg',
  75. // 'num': '7'
  76. // },
  77. // {
  78. // 'name': '柑橘',
  79. // 'img': 'images/plant_6.jpg',
  80. // 'num': '27'
  81. // },
  82. // {
  83. // 'name': '葡萄',
  84. // 'img': 'images/plant_7.jpg',
  85. // 'num': '26'
  86. // },
  87. // {
  88. // 'name': '苹果',
  89. // 'img': 'images/plant_8.jpg',
  90. // 'num': '28'
  91. // },
  92. // {
  93. // 'name': '桃',
  94. // 'img': 'images/plant_4.jpg',
  95. // 'num': '20'
  96. // }
  97. ],
  98. url: "", //裁剪
  99. serialNum: '', //获取到作物序号码
  100. urlData: {}, //图片全部信息
  101. insectNum: '', //区别病虫害 1虫 2病
  102. urlFile: '', //识别失败作物名称
  103. lastTimeShow: false, //是否显示上次选择
  104. lastTimeIndex: null, //上次选择下标
  105. loadingShow: false, //加载
  106. }
  107. },
  108. methods: {
  109. recognizeData(num, name, index) {
  110. uni.setStorage({
  111. key: 'lastTimeA',
  112. data: index,
  113. success: function () {
  114. console.log('success');
  115. }
  116. });
  117. this.insectNum = ''
  118. this.urlName = name
  119. this.serialNum = num
  120. uni.chooseImage({
  121. count: 1,
  122. success: (res) => {
  123. // 设置url的值,显示控件
  124. // console.log(res)
  125. this.urlData = res
  126. console.log(res.tempFilePaths[0])
  127. this.url = res.tempFilePaths[0];
  128. this.urlFile = res.tempFilePaths[0]; //失败跳转显示的图片
  129. }
  130. });
  131. },
  132. // 取消上传
  133. oncancle() {
  134. this.url = '';
  135. },
  136. // 确定上传
  137. axiosData(ev) {
  138. let that = this
  139. that.loadingShow = true
  140. if (that.serialNum == '' && that.insectNum !== '') {
  141. // 老接口
  142. var url = 'other_discern'
  143. var num = that.insectNum
  144. } else if (that.serialNum !== '' && that.insectNum == '') {
  145. //新接口
  146. var url = 'discern'
  147. var num = that.serialNum
  148. }
  149. console.log(this.urlData.tempFiles[0])
  150. console.log(this.urlData.tempFiles[0].path)
  151. uni.uploadFile({
  152. url: 'https://wx.hnyfwlw.com/bigservers/' + url + '?type=' + num,
  153. fileType: 'image',
  154. file: this.urlData.tempFiles[0],
  155. filePath: this.urlData.tempFiles[0].path,
  156. name: 'img_addr',
  157. success(res) {
  158. that.url = '';
  159. if (res.statusCode !== 500) {
  160. var data = JSON.parse(res.data)
  161. // 判断是否识别成功 -新接口
  162. if (data.code == 200) {
  163. // 成功
  164. console.log(data.data)
  165. var img = []
  166. img.push(that.urlFile)
  167. if (that.urlName == '其他') {
  168. var f = JSON.parse(res.data)
  169. if (f.data == null || f.data[0].prevention == "[防治方法] null") {
  170. console.log('失败')
  171. uni.navigateTo({
  172. url: '/pages/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
  173. })
  174. } else {
  175. uni.navigateTo({
  176. url: '/pages/recognizeSucceedWorn/recognizeSucceedWorn?data=' + JSON.stringify(data.data) + '&name=' +
  177. that.urlName + '&img=' + img
  178. })
  179. console.log('成功')
  180. }
  181. } else {
  182. uni.navigateTo({
  183. url: '/pages/recognizeSucceed/recognizeSucceed?data=' + JSON.stringify(data.data)
  184. })
  185. }
  186. } else if (data.code !== 200) {
  187. //失败
  188. var img = []
  189. img.push(that.urlFile)
  190. uni.navigateTo({
  191. url: '/pages/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
  192. })
  193. }
  194. } else {
  195. //失败
  196. var img = []
  197. img.push(that.urlFile)
  198. uni.navigateTo({
  199. url: '/pages/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
  200. })
  201. }
  202. },
  203. fail(err) {
  204. var img = []
  205. img.push(that.urlFile)
  206. uni.navigateTo({
  207. url: '/pages/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
  208. })
  209. },
  210. complete(com) {
  211. that.loadingShow = false
  212. }
  213. })
  214. },
  215. // 其他--老识别接口
  216. restsData() {
  217. this.show = true;
  218. },
  219. // 确定
  220. insectData(num) {
  221. this.urlName = '其他'
  222. this.serialNum = ''
  223. this.insectNum = num
  224. uni.chooseImage({
  225. count: 1,
  226. success: (res) => {
  227. // 设置url的值,显示控件
  228. this.urlData = res
  229. this.url = res.tempFilePaths[0];
  230. this.urlFile = res.tempFilePaths[0]; //失败跳转显示的图片
  231. }
  232. });
  233. },
  234. },
  235. components: {
  236. kpsImageCutter
  237. },
  238. onShow() {
  239. var that = this
  240. uni.getStorage({
  241. key: 'lastTimeA',
  242. success: function (res) {
  243. that.lastTimeShow = true
  244. console.log(res.data);
  245. that.lastTimeIndex = res.data
  246. },
  247. fail: function (err) {
  248. that.lastTimeShow = false
  249. console.log(err)
  250. }
  251. });
  252. },
  253. }
  254. </script>
  255. <style lang="scss">
  256. // 搜索
  257. // uni-view,
  258. // uni-text {
  259. // width: 740rpx;
  260. // margin: 0 auto;
  261. // }
  262. // 作物选择
  263. .plantList_ul {
  264. .plantList_li {
  265. margin: 55rpx 0 55rpx 0;
  266. .plantList_tlt {
  267. font-weight: 550;
  268. font-size: 16px;
  269. width: 700rpx;
  270. margin: 0 auto;
  271. text {
  272. color: #7e7e7e;
  273. font-size: 12px;
  274. }
  275. }
  276. .plantList_li_ul {
  277. display: flex;
  278. flex-wrap: wrap;
  279. margin-top: 10rpx;
  280. .plantList_li_List {
  281. margin: 10rpx 0 0 18rpx;
  282. // border: 1px solid #366092;
  283. width: 150rpx;
  284. image {
  285. width: 130rpx;
  286. height: 130rpx;
  287. border-radius: 55px;
  288. margin: 0 auto;
  289. display: block;
  290. box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  291. }
  292. view {
  293. width: 150rpx;
  294. color: #646464;
  295. text-align: center;
  296. // border: 1px solid #000000;
  297. margin: 10rpx 0 0 0;
  298. font-size: 13px;
  299. }
  300. }
  301. }
  302. }
  303. }
  304. </style>