bigdata_WX/pages/identifyPest/identifyPestIndex/identifyPestIndex.vue

<template>
	<view>
		<!-- 作物列表 -->
		<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(
		            (identifyPestObj[type].data)[lastTimeIndex].num,
		            (identifyPestObj[type].data)[lastTimeIndex].name,
		            lastTimeIndex
		          )
		        ">
						<image :src="$imageURL_58003+'/bigservers/' +
		            (identifyPestObj[type].data)[lastTimeIndex].img
		          " mode=""></image>
						<view class="">
							{{ (identifyPestObj[type].data)[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 (identifyPestObj[type].data)" :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" v-if="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>
	</view>
</template>

<script>
	import kpsImageCutter from '@/components/ksp-image-cutter/ksp-image-cutter.vue'; //裁剪图片
	export default {
		data() {
			return {
				url: '',
				serialNum: '', //获取到作物序号码
				urlData: {}, //图片全部信息
				urlName: '', //识别失败作物名称
				insectNum: '', //区别病虫害  1病 2虫
				lastTimeShow: false, //是否显示上次选择
				lastTimeIndex: null, //上次选择下标
				type: 'economicsPlant', // 当前拍照类型 economicsPlant：经济作物  cerealPlant：粮食作物
				identifyPestObj: {
					economicsPlant: {
						title: '经济作物',
						data: [
							// {
							// 	'name': '棉花',
							// 	'img': 'images/plant_2.jpg',
							// 	'num': '21'
							// },
							// {
							// 	'name': '茶',
							// 	'img': 'images/plant_1.jpg',
							// 	'num': '22'
							// },
							{
								name: '油菜',
								img: 'images/plant_3.jpg',
								num: '13',
							}
						]
					},
					cerealPlant: {
						title: '粮食作物',
						data: [
							{
								'name': '水稻',
								'img': 'images/plant_16.jpg',
								'num': '12',
							},
							{
								'name': '小麦',
								'img': 'images/plant_19.jpg',
								'num': '11',
							},
							{
								'name': '玉米',
								'img': 'images/plant_17.jpg',
								'num': '14',
							}
						]
					}
				}
			}
		},
		methods: {
			recognizeData(num, name, index) {
				console.log(index);
				this.url = '';
				uni.setStorage({
					key: this.type,
					data: index,
					success: function() {
						console.log('success');
					},
				});
				this.urlName = name;
				this.insectNum = '';
				this.serialNum = num;
				console.log('-------------------------------- recogonization');
				uni.chooseImage({
					count: 1,
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						// 设置url的值，显示控件
						console.log(res);
						this.urlData = res.tempFiles[0];
						this.url = res.tempFilePaths[0];
						this.urlFile = res.tempFilePaths[0]; //失败跳转显示的图片
					},
					fail(err) {
						console.log(err, '------------------------ choose image');
					},
				});
			},

			// 取消上传
			oncancle() {
				this.url = '';
			},
			axiosData(ev) {
				console.log(ev);
				this.urlData = ev;
				this.urlFile = ev.path;
				setTimeout(() => {
					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;
				}
				const session_key = uni.getStorageSync('session_key');
				console.log(num);
				uni.uploadFile({
					// url: 'https://wx.hnyfwlw.com/bigservers/' + url + '?type=' + num,
					url: `https://wx.hnyfwlw.com/api/api_gateway?method=wheat.discreen.plan`,
					fileType: 'image',
					// file: this.urlData,
					filePath: ev.path,
					formData: {
						type: num,
						token: session_key
					},
					name: 'img_addr',
					success(res) {
						console.log(res);
						uni.hideLoading();
						that.url = '';
						// 判断是否识别成功 -新接口
						// if (data.code == 200) {
						if (res.statusCode !== 500) {
							var data = JSON.parse(res.data).data;
							if (data.returnResult.returnStatus == 1) {
								// 成功
								uni.navigateTo({
									url: '/pages/identifyPest/recognizeSucceed/recognizeSucceed?data=' +
										JSON.stringify(data.returnResult),
								});
								console.log('新接口');
							} else if (data.returnResult.returnStatus == 0) {
								//失败
								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/identifyPest/recognizeFail/recognizeFail?data=' +
								img +
								'&name=' +
								that.urlName,
						});
					},
					complete(com) {
						that.loadingShow = false;
						uni.hideLoading()
					},
				});
			},

			// 其他--老识别接口
			restsData() {
				this.show = true;
			},
			// 确定
			insectData(num) {
				this.urlName = '其他';
				this.serialNum = '';
				this.insectNum = num;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						// 设置url的值，显示控件
						this.urlData = res.tempFiles[0];
						this.url = res.tempFilePaths[0];
						this.urlFile = res.tempFilePaths[0]; //失败跳转显示的图片
					},
				});
			},
		},
		components: {
			kpsImageCutter,
		},
		onLoad(option) {
			console.log(option)
			this.url = '';
			this.type = option.type;
			uni.setNavigationBarTitle({
			  title: `选择${this.identifyPestObj[option.type].title}`  // 设置为你想要的标题
			});
		},
		onShow() {
			var that = this;
			uni.getStorage({
				key: this.type,
				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, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
					}

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