bigDataApp/pages/cb/cbd/equip-set/results.vue

<template>
	<view>
		<view class="images_box">
			<p class="title">图片标记</p>
			<view class="images">
				<image :src="$imageURL+'/bigdata_app/image/cb/jiazai.ui.gif'" mode=""
					class="jiazai"></image>
				<image :src="resuils.image" mode=""  @click="examine(resuils)"></image>
				<view class="imgbg" v-if="imgbg">
					<image src="../../../../static/images/cb/6286299.gif" mode="" class="img"></image>
				</view>
			</view>
			<view class="btn">
				<p class="btn_box" @click="anew">重新识别</p>
			</view>
		</view>
		<view class="information">
			<p class="title">识别结果</p>
			<view class="information_data" v-for="item,index in resuils.result">
				<p>害虫名称：<span>{{item.result_list+"("+item.number+")"}}</span></p>
				<p>害虫数量：<span>{{item.nums}}只</span></p>
			</view>
		</view>
	</view>
</template>

<script>
	import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
	import insect_dict from "../../../../static/data/cbd_pest_library.js"
	export default {
		data() {
			return {
				resuils: {
					image: ""
				},
				id: "",
				imgbg: false,
			}
		},
		methods: {
	
			//forecast.forecast_system.equip_photo_discern识别 see again\
			async discern(ret) { //识别图片
				var publiukey = `-----BEGIN PUBLIC KEY-----
			MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC6m92fXUrccS4SoLg4W4jPRNua
			4BcRk4ldLcqPuQpD2Mds2+hw+Gi+0MUnshF/r/DTcCJgkt7rtoY9EB6/XJ6MFw14
			whhESFie/lZUWRsk8M89Rkr8m5rwmBl+uLAd5LopyshFqKTBXeT2ytHP1JCQLPBO
			34Fy4/yEz4qEzkzBuwIDAQAB
			-----END PUBLIC KEY-----`;
				var time = +new Date();
				var str2 = 'YuNfEi' + time + 'YuNfEi'
				var pubblicData = jsencrypt.setEncrypt(publiukey, str2);
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_discern',
					data: {
						img_id: this.id,
						ret: ret,
						device_type: "cbd",
						identify_model: this.identify_model,
						sign: pubblicData
					},
				})
				console.log(res)
				if (res) {
					if (ret == "see") {
						this.resuils = res
					} else if (ret == "again") {
						// this.resuils.result
						// console.log(insect_dict)
						this.resuils.result = []
						var arr = res.result.split("#")
						for (var i = 0; i < arr.length; i++) {
							arr[i] = arr[i].split(",")
							var obj = {
								number: arr[i][0],
								nums: arr[i][1],
								result_list: insect_dict[arr[i][0]]
							}
							this.resuils.result.push(obj)
						}
						console.log(arr)
						// var obj
					}

					this.imgbg = false
					uni.showToast({
						title: '识别成功！',
						duration: 2000
					});
				} else {
					this.resuils.image = this.addr
					console.log(this.resuils)
					this.imgbg = false
					uni.showToast({
						title: '识别无结果！',
						duration: 2000,
						icon: "none"
					});

				}
			},
			anew() {
				this.discern("again")
				this.imgbg = true
			},
			examine(url) {
				console.log(url)
				var imgarr = []
				imgarr.push(url.image)
				console.log(imgarr)
				uni.previewImage({
					urls: imgarr
				});
			},
		},
		onLoad(option) {
			this.id = option.id
			this.addr = option.addr
			this.identify_model = option.identify_model
			this.discern("see")
		}
	}
</script>

<style lang="scss">
	.images_box {
		width: 90%;
		margin: 0 auto;
		padding-top: 20rpx;

		.title {
			border-left: 10rpx solid #71cd9a;
			padding-left: 20rpx;
			font-size: 30rpx;
		}

		.images {
			margin: 20rpx 0;
			width: 100%;
			height: 480rpx;
			position: relative;

			image {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.jiazai {
				width: 480rpx;
				height: 400rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -240rpx;
				margin-left: -240rpx;
			}

			.imgbg {
				width: 100%;
				height: 480rpx;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.5);

				.img {
					width: 430rpx;
					height: 400rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -200rpx;
					margin-left: -220rpx;
				}
			}
		}

		.btn {
			width: 100%;
			display: flex;
			justify-content: flex-end;

			.btn_box {
				width: 200rpx;
				height: 60rpx;
				background-color: #fbb40a;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
				margin-left: -10rpx;
			}
		}
	}

	.information {
		width: 97%;
		margin: 0 auto;
		padding-top: 20rpx;

		.title {
			border-left: 10rpx solid #71cd9a;
			padding-left: 20rpx;
			font-size: 30rpx;
		}

		.information_data {
			margin: 30rpx;
			display: flex;
			box-shadow: 0 0 10rpx #e8e5f7;
			padding: 20rpx 10rpx;

			p {
				margin-right: 20rpx;
				font-size: 28rpx;

				span {
					color: #FF0000;
				}
			}
		}
	}
</style>