bigdata_WX/pages/identifyPest/vegetablesPlant/vegetablesPlant.vue

<template>
	<view>
		<!-- 搜索 -->
		<!-- <u-search :disabled="true" margin="15rpx auto" :input-style="{width: '20rpx'}" input-align="center" :animation="true" placeholder="搜索作物名称"
		 shape="square" :show-action="false" v-model="keyword"></u-search> -->

		<!-- 作物列表 -->
		<view class="plantList_ul">

			<!-- 上次定位 -->
			<view class="plantList_li" v-if="lastTimeShow">
				<view class="plantList_tlt">
					上次选择
				</view>

				<view class="plantList_li_ul">
					<view class="plantList_li_List" @click="recognizeData(allPlantData[lastTimeIndex].num, allPlantData[lastTimeIndex].name, lastTimeIndex)">
						<image :src="$imageURL_58003+'/bigservers/' + allPlantData[lastTimeIndex].img" mode=""></image>
						<view class="">
							{{ allPlantData[lastTimeIndex].name }}
						</view>
					</view>
				</view>
			</view>

			<!-- 全部 -->
			<view class="plantList_li">
				<view class="plantList_tlt">
					该模型开发中。。。
				</view>

				<view class="plantList_li_ul">
					<view @click="recognizeData(item.num, item.name, index)" class="plantList_li_List" v-for="(item, index) in allPlantData" :key="index">
						<image :src="$imageURL_58003+'/bigservers/' + item.img" mode=""></image>
						<view class="">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>

			<!-- 其他 -->
			<!-- <view class="plantList_li">
				<view class="plantList_tlt">
					其他
					<text>(此项目开发中，结果可能会有误差)</text>
				</view>

				<view class="plantList_li_ul">
					<view class="plantList_li_List" @click="restsData()">
						<image :src="$imageURL_58003+'/bigservers/' + 'images/detail_9.png'" mode=""></image>
						<view class="">
							其他
						</view>
					</view>
				</view>
			</view> -->
		</view>
		
		<!-- 裁剪组件 -->
		<kps-image-cutter @ok="axiosData" @cancel="oncancle" :url="url" :fixed="false" :blob="false" :maxWidth="500" :maxHeight="500"></kps-image-cutter>
			
		<!-- 弹框 -->
		<u-modal :mask-close-able="true" @cancel="insectData('1')" @confirm="insectData('2')" confirm-text="虫害" cancel-text="病害" v-model="show" :show-cancel-button="true" :content="content"></u-modal>
		
		<!--loading-->
		<ourLoading v-show="loadingShow" isFullScreen active text="识别中..." />
	</view>
</template>

<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue"; //裁剪图片
	export default {
		data() {
			return {
				keyword: '', //搜索
				show: false,
				content: '请选择测试虫害还是病害',
				allPlantData: [
					// {
					// 	'name': '黄瓜',
					// 	'img': 'images/plant_10.jpg',
					// 	'num': '8',
					// },
					// {
					// 	'name': '番茄',
					// 	'img': 'images/plant_11.jpg',
					// 	'num': '17',
					// },
					// {
					// 	'name': '南瓜',
					// 	'img': 'images/plant_12.jpg',
					// 	'num': '18',
					// },
					// {
					// 	'name': '辣椒',
					// 	'img': 'images/plant_10.jpg',
					// 	'num': '19',
					// },
					// {
					// 	'name': '白菜',
					// 	'img': 'images/plant_14.jpg',
					// 	'num': '24',
					// },
					// {
					// 	'name': '马铃薯',
					// 	'img': 'images/plant_15.jpg',
					// 	'num': '25',
					// },
					// {
					// 	'name': '萝卜',
					// 	'img': 'images/plant_9.jpg',
					// 	'num': '6',
					// }
				],
				url: "", //裁剪
				serialNum: '', //获取到作物序号码
				urlData: {}, //图片全部信息
				urlName: '', //识别失败作物名称
				insectNum: '', //区别病虫害  1虫 2病
				lastTimeShow: false, //是否显示上次选择
				lastTimeIndex: null, //上次选择下标
				loadingShow: false, //加载
			}
		},
		methods: {
			recognizeData(num, name, index) {
				uni.setStorage({
				    key: 'lastTimeC',
				    data: index,
				    success: function () {
				        console.log('success');
				    }
				});
				this.insectNum = ''
				this.urlName = name
				this.serialNum = num
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 设置url的值，显示控件
						// console.log(res)
						this.urlData = res
						this.url = res.tempFilePaths[0];
						this.urlFile = res.tempFilePaths[0]; //失败跳转显示的图片
					}
				});
			},
			
			// 将base64转换为blob
			// dataURLtoFile(dataURI, type) {
			// 	let binary = atob(dataURI.split(",")[1]);
			// 	let array = [];
			// 	for (let i = 0; i < binary.length; i++) {
			// 		array.push(binary.charCodeAt(i));
			// 	}
			// 	return new Blob([new Uint8Array(array)], {
			// 		type: type
			// 	});
			// },
			// 图片提交事件。把bold格式转为formData格式进行提交。
			// submitPic(fileData) {
			// 	let form = new FormData();
			// 	// let fileOfBlob = new File([fileData], 'plantinsect.jpg'); // 重命名了
			// 	let fileOfBlob = new File([fileData], this.serialNum); // 重命名了
			// 	// console.log(this.fileA);
			// 	form.append("file", fileOfBlob);
			// 	return form;
			// },
			
			// 取消上传
			oncancle() {
				this.url = '';
			},
			
			// 确定上传
			axiosData(ev) {
				let that = this
				that.loadingShow = true
				// let blob = that.dataURLtoFile(ev.path, 'image/jpeg'); //将base64转换为blob
				// let data = that.submitPic(blob); //再将blob转换为file
				// var img = data.get("file");
				if (that.serialNum == '' && that.insectNum !== '') {
					// 老接口
					var url = 'other_discern'
					var num = that.insectNum
				} else if (that.serialNum !== '' && that.insectNum == '') {
					//新接口
					var url = 'discern'
					var num = that.serialNum
				}
				
				uni.uploadFile({
					url: 'https://wx.hnyfwlw.com/bigservers/'+ url + '?type=' + num,
					fileType: 'image',
					file: this.urlData.tempFiles[0],
					filePath: this.urlData.tempFiles[0].path,
					name: 'img_addr',
					success(res) {
						that.url = '';
						if (res.statusCode !== 500) {
							var data = JSON.parse(res.data)
							// 判断是否识别成功 -新接口
							if (data.returnResult.returnStatus == 1) {
								// 成功
								var img = []
								img.push(that.urlFile)
								if (that.urlName == '其他') {
									var f = JSON.parse(res.data)
									if (f.data == null || f.data[0].prevention == "[防治方法] null") {
										console.log('失败')
										uni.navigateTo({
											url: '/pages/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
										})
									} else {
										uni.navigateTo({
											url: '/pages/recognizeSucceedWorn/recognizeSucceedWorn?data=' + JSON.stringify(data.data) + '&name=' + that.urlName + '&img=' + img
										})
										console.log('成功')
									}
								} else {
									uni.navigateTo({
										url: '/pages/recognizeSucceed/recognizeSucceed?data=' + (data.returnResult.returnImageUrl)
									})
								}
								
								// uni.navigateTo({
								//     url: '/pages/recognizeSucceed/recognizeSucceed?data=' + JSON.stringify(data.data)
								// })
							} else if (data.code !== 200) {
								//失败
								var img = []
								img.push(that.urlFile)
								uni.navigateTo({
								    url: '/pages/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
								})
							}
						} else {
							//失败
							var img = []
							img.push(that.urlFile)
							uni.navigateTo({
							    url: '/pages/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
							})
						}
						
						
					},
					fail(err) {
						//失败
						var img = []
						img.push(that.urlFile)
						uni.navigateTo({
						    url: '/pages/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
						})
					},
					complete(com) {
						that.loadingShow = false
					}
				})
			},
			
			// 其他--老识别接口
			restsData() {
				this.show = true;
			},
			// 确定
			insectData(num) {
				this.urlName = '其他'
				this.serialNum = ''
				this.insectNum = num
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 设置url的值，显示控件
						this.urlData = res
						this.url = res.tempFilePaths[0];
						this.urlFile = res.tempFilePaths[0]; //失败跳转显示的图片
					}
				});
			},
		},
		components: {
			kpsImageCutter
		},
		onShow() {
			var that = this
			uni.getStorage({
			    key: 'lastTimeC',
			    success: function (res) {
					that.lastTimeShow = true
			        console.log(res.data);
					that.lastTimeIndex = res.data
			    },
				fail: function (err) {
					that.lastTimeShow = false
					console.log(err)
				}
			});
		},
	}
</script>

<style lang="scss">
	// 搜索
	// uni-view,
	// uni-text {
	// 	width: 740rpx;
	// 	margin: 0 auto;
	// }

	// 作物选择
	.plantList_ul {
		.plantList_li {
			margin: 55rpx 0 55rpx 0;

			.plantList_tlt {
				font-weight: 550;
				font-size: 16px;
				width: 700rpx;
				margin: 0 auto;
				text {
					color: #7e7e7e;
					font-size: 12px;
				}
			}
			.plantList_li_ul {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10rpx;

				.plantList_li_List {
					margin: 10rpx 0 0 18rpx;
					width: 150rpx;
					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 55px;
						margin: 0 auto;
						display: block;
						box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
					}

					view {
						width: 150rpx;
						color: #646464;
						text-align: center;
						margin: 10rpx 0 0 0;
						font-size: 13px;
					}
				}
			}
		}
	}
</style>