bigdata_WX/pages/identifyPest/cerealPlant/cerealPlant.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 :lazy-load="true" :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_16.jpg',
						'num': '12',
					},
					{
						'name': '小麦',
						'img': 'images/plant_19.jpg',
						'num': '11',
					},
					{
						'name': '玉米',
						'img': 'images/plant_17.jpg',
						'num': '14',
					},
					// {
					// 	'name': '甘薯',
					// 	'img': 'images/plant_18.jpg',
					// 	'num': '13',
					// }
				],
				url: "", //裁剪
				serialNum: '', //获取到作物序号码
				urlData: {}, //图片全部信息
				urlName: '', //识别失败作物名称
				insectNum: '', //区别病虫害  1虫 2病
				lastTimeShow: false, //是否显示上次选择
				lastTimeIndex: null, //上次选择下标
				loadingShow: false, //加载
			}
		},
		methods: {
			recognizeData(num, name, index) {
				uni.setStorage({
				    key: 'lastTimeB',
				    data: index,
				    success: function () {
				        console.log('success');
				    }
				});
				this.urlName = name
				this.insectNum = ''
				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]; //失败跳转显示的图片
					}
				});
			},
			
			
			// 取消上传
			oncancle() {
				this.url = '';
			},
			
			// 确定上传
			axiosData(ev) {
				uni.showLoading({
					title: '识别中。。。'
				});
				let that = this
				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) {
						uni.hideLoading();
						that.url = '';
						if (res.statusCode !== 500) {
							var data = JSON.parse(res.data)
							// 判断是否识别成功 -新接口
							if (data.returnResult.returnStatus == 1) {
								// 成功
								console.log(data.data)
								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/identifyPest/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
										})
									} else {
										uni.navigateTo({
											url: '/pages/identifyPest/recognizeSucceedWorn/recognizeSucceedWorn?data=' + JSON.stringify(data.data) + '&name=' + that.urlName + '&img=' + img
										})
										console.log('成功')
									}
								} else {
									uni.navigateTo({
										url: '/pages/identifyPest/recognizeSucceed/recognizeSucceed?data=' + JSON.stringify(data.returnResult)
									})
								}
								
								// 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/identifyPest/recognizeFail/recognizeFail?data=' + img + '&name=' + that.urlName
								})
							}
						} else {
							//失败
							var img = []
							img.push(that.urlFile)
							uni.navigateTo({
							    url: '/pages/identifyPest/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]; //失败跳转显示的图片
					}
				});
			},
			
			// 上次选择
			lastListData() {
				var that = this
				uni.request({
					url: 'https://wx.hnyfwlw.com/bigservers/user_record',
					method: 'get',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					data: {
						
					},
					success(res) {
						console.log(res.data)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
		},
		components: {
			kpsImageCutter
		},
		onShow() {
			var that = this
			uni.getStorage({
			    key: 'lastTimeB',
			    success: function (res) {
					that.lastTimeShow = true
			        console.log(res.data);
					that.lastTimeIndex = res.data
			    },
				fail: function (err) {
					that.lastTimeShow = false
					console.log(err)
				}
			});
			
			// 上次选择
			this.lastListData()
		},
	}
</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>