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

<template>
	<view>
		<view class="images_box">
			<p class="title">图片标记</p>
			<view class="images">
				<image :src="'http://www.hnyfwlw.com:8006/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}}</span></p>
				<p>害虫数量：<span>{{item.nums}}只</span></p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				resuils:{},
				id:"",
				imgbg:false,
			}
		},
		methods: {
			//forecast.forecast_system.equip_photo_discern识别 see again
			async discern(ret) { //识别图片
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_discern',
					data: {
						img_id: this.id,
						ret: ret
					}
				})
				console.log(res)
				if(res){
					uni.showToast({
						title: '识别成功！',
						duration: 2000
					});
					this.resuils = res
					this.imgbg =false
				}else{
					uni.showToast({
						title: '识别失败！',
						duration: 2000,
						icon:"none"
					});
					this.imgbg =false
				}
			},
			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.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: 90%;
		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>