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

<template>
	<view style="background-color: #f7f7f7;padding-top: 88rpx;height: calc(100vh - 88rpx);">
		
		<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="识别结果" backgroundColor="#F7F7F7"></uni-nav-bar>
		<u-calendar v-model="calendarShow" mode="range" @change="change" @maxDate="maxDate"></u-calendar>
		<view class="img-result">
			<view class="tile-item">
				
				<view @click="calendarShow = true" class="calendar">{{start_time}} <span style="margin: 0 40rpx;"> -</span> {{end_time}}</view>
				
			</view>

		<view class="images_box">

			<view class="canvas-bg">
				<canvas-mark/>
				<!-- <img v-if="photos.length>0" :src="photos[active].addr+'?x-oss-process=image/resize,w_130/quality,q_90'" alt=""  @click="examine()"/> -->
			</view>
			<view class="image-flex" >
				<view v-for="(item,index) in photos" :key="index">
					<image class="my-img" :class="active==index?'active':''" :src="item.addr" @click="imgClick(item,index)" mode=""></image>
				</view>
			</view>
		</view>
		<view class="information">
			<view class="btn">
				<p class="title">当前图片识别结果</p>
				<u-button size="mini" :loading='respetLoading' class="btn_box" throttle-time="500" @click="resetPest" :customStyle="customStyle">重新识别</u-button>
			</view>
			<view class="notip" v-if="isObject(pestResult)">
				暂无识别结果
			</view>
			<view v-else class="information_data" v-for="(value,key) in pestResult">
				<p> <span>{{key}}</span> <span>{{value}}头</span> </p>
			</view>
		</view>
		
			
		</view>
	</view>
</template>

<script>
	import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
	import insect_dict from "../../../../static/data/cbd_pest_library.js"
	import canvasMark from '@/components/Draw/index.vue';
	export default {
		data() {
			return {
				maxDate:'2050-12-31',
				device_type:'',
				device_id:'',
				d_id:'',
				calendarShow:false,
				start_time:'',
				end_time:'',
				photos:[],
				
				active:0,
				respetLoading:false
			}
		},
		components:{canvasMark},
		computed:{
			customStyle(){
				return {
					background: '#018B3F',
					fontSize:'12px',
					border:'none',
					color:'#fff'
				}
			},
			pestResult(){
				if(this.photos==0){
					return {}
				}
				let obj = {}
				let item = this.photos[this.active]
				console.log('选中',item)
				if(item.is_mark==0){
					// 机器识别
					let aiLabel = []
					if (item.label) {
					    aiLabel = JSON.parse(item.label.replace(/'/g, '"'))
						aiLabel.forEach(label => {
							const text = Object.keys(label)[0]
							if (obj[insect_dict[text]]) {
								obj[insect_dict[text]]++
							} else {
								obj[insect_dict[text]] = 1
							} 
						})
					}
				}else{
					item.mark.forEach(item => {
					  if (obj[item.text]) {
						obj[item.text]++
					  } else {
						obj[item.text] = 1
					  }
					})
				}
				return obj
			},
			previewImages(){
				let list = []
				if(this.photos.length>0){
					this.photos.forEach(photo=>{
						list.push(photo.addr)
					})
					return list
				}else{
					return []
				}
				
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			isObject(obj){
				return Object.keys(obj).length==0
			},
			change(e){
				this.start_time = e.startDate 
				this.end_time = e.endDate 
				this.page = 1
				this.photos = []
				this.getImgData()
			},
			async getImgData(){
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.photo_info.photo_list',
					data: {
						id: this.d_id,
						device_type_id:this.device_type,
						page: 1,
						page_number: 99999,
						start: +new Date(this.start_time+' 00:00:00') / 1000,
						end: +new Date(this.end_time+' 23:59:59') / 1000
					}
				})
				this.photos = this.photos.concat(res.data)
				console.log(this.photos,'---')
				// this.photos = res.data
			},
			async resetPest(){
				this.respetLoading = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.photo_info.identify_again',
					data: {
						id: this.photos[this.active].id,
						device_type_id:this.device_type
					}
				})
				this.respetLoading = false
				if(res.code==2000){
					uni.showToast({
						title: '操作成功',
						duration: 2000
					})
				}else{
					uni.showToast({
						title: res.msg,
						duration: 2000
					})
				}
			},
			examine() {
				uni.previewImage({
					urls: this.previewImages
				});
			},
			imgClick(item,index){
				this.active = index	
			}
		},
		onLoad(option) {
			console.log('结果页面：',option)
			this.device_id = option.device_id
			this.d_id = option.d_id
			this.device_type = option.device_type
			let endTime = +new Date(option.time)/1000 + 60 * 60 * 24
			let startTime = +new Date(option.time)/1000
			
			this.end_time = this.formatTime(endTime*1000,'yyyy-MM-dd')
			this.start_time = this.formatTime(startTime*1000,'yyyy-MM-dd')
			this.getImgData()
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-calendar__action {
		display: flex;
		justify-content: space-around;
	
		.u-calendar__action__text {
			line-height: 25px;
		}
	}
	page{
		background: #F7F7F7;
	}
	.img-result{
		padding: 0rpx 48rpx;
		background-color: #F7F7F7;
		// height: calc(100vh - 120rpx);
	}
	.tile-item{
		margin-top: 32rpx;
		// padding: 0rpx 32rpx;
		box-sizing: border-box;
		height: 92rpx;
		line-height: 92rpx;
		display: flex;
		justify-content: space-between;
		background: #F7F7F7;
		.calendar{
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 0 18rpx;
			color: #5C5C5C;
			text-align: center;
		}
		.camera{
			
		}
	}
	.images_box {
		width: 100%;
		height: 742rpx;
		padding: 32rpx;
		margin: 32rpx 0;
		box-sizing: border-box;
		background: #fff;
		border-radius: 24rpx;
		.canvas-bg{
			height: 558rpx;
			position: relative;
			margin-bottom: 16rpx;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.image-flex {
			width: 100%;
			overflow-x: scroll;
			display: flex;
			flex-wrap: nowrap;
			gap: 20rpx;
			padding: 10rpx 0;
			box-sizing: border-box;
			.my-img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 4rpx;
				opacity: 0.5;
			}
			.active{
				border: 4px solid #ccc;
				animation: borderAnimation 1s;
				position: relative;
				top: -4px;
				opacity: 1;
			}
		}
	}

	.information {
		padding-bottom: 2rpx;
		.btn{
			overflow: hidden;
		}
		.title {
			float: left;
			color: #999999;
		}
		.notip{
			text-align: center;
			color: #999999;
			margin-top: 100rpx;
		}
		.btn_box{
			float: right;
			// border-radius: 8rpx;
			// background: #018B3F;
			// padding: 2rpx 10rpx;
			// color: #fff;
			// font-size: 24rpx;
		}
		.information_data {
			margin: 32rpx 0;
			display: flex;
			background-color: #fff;
			// padding: 20rpx 10rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 24rpx;
			padding: 0 32rpx;
			p {
				// margin-right: 20rpx;
				font-size: 24rpx;
				color: #666666;
				
			}
		}
	}
	
	@keyframes borderAnimation {
	  0% { 
		opacity: 0.5;
	  }
	  100% { 
		opacity: 1;
	  }
	}
</style>