bigDataApp/pages/cb/cbd/equip-set/photo.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>
		<view class="search-item">
			<u-dropdown >
				<u-dropdown-item @change="dropDownChange" v-model="searchObj.is_pest" title="害虫筛选" :options="pestOptions"></u-dropdown-item>
			</u-dropdown>
			<span v-if="!delShow" class="right" @click="imgOperate">
				管理
			</span>
			<span v-else class="right"  @click="delShow = false">
				完成
			</span>
			
		</view>
		<view style="padding: 0 48rpx;" v-if="searchObj.is_pest!='2'">
			<u-search bg-color="#fff" height="92" shape="square"  placeholder="请输入害虫名称" v-model="searchObj.pest_name" @search="dropDownChange" :show-action='false'></u-search>
		</view>
		<u-calendar v-model="calendarShow" mode="range" @maxDate="maxDate" @change="change"></u-calendar>
		<view class="tile-item">
			
			<view @click="calendarShow = true" class="calendar">{{start_time}} <span style="margin: 0 40rpx;"> -</span> {{end_time}}</view>
			
			<u-icon name="camera" color="#018B3F" size="52" @click="takephoto"></u-icon>
		</view>
		<view class="imglist" v-if="imglists.length>0">
			<view class="imglist_box" v-for="(item,index) in imglists" :key="index" >
				<view class="top">识别:{{item.indentify_count}} 
					<span class="yficonfont icon-shanchu float-right" v-if="delShow" @click="delImage(item)"></span>
					<!-- <u-icon v-if="delShow" @click="delImage(item)" class="float-right" name="trash-fill" color="#FF5951" size="28"></u-icon> -->
				</view>
				<!-- <image class="img-flex" v-if="showPlaceholder" src="/static/images/image.png"></image> -->
				<image class="img-flex" @error="handleImgErr($event,index)" :src="item.addr+'?x-oss-process=image/resize,w_130/quality,q_50'" mode="" @click="imageDetail(item)"></image>
				<view class="bottom">{{item.addtime}}</view>
			</view>
		</view>
		<view v-else class="notip">
			暂无数据
		</view>
	
	</view>
</template>

<script>
	import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
	export default {
		data() {
			return {
				maxDate:'2050-12-31',
				value1:'',
				value2:'',
				searchObj:{
					is_pest:'',
					pest_name:''
				},
				pestOptions:[
					{label: '全部',value: ''},
					{label: '有虫',value: '1'},
					{label: '无虫',value: '2'},
				],
				timeend:'',
				timestart:'',
				imglists:[],
				page:1,
				device_type:'',
				device_id:'',
				d_id:'',
				calendarShow:false,
				start_time:'',
				end_time:'',
				delShow:false,
				loadMore:true,
				noImage:'/static/images/image.png'
			}
		},
		methods: {
			handleImgErr(e,index){
				console.log(e,'图片加载出错了')
				this.imglists[index].addr = this.noImage
				// this.showPlaceholder = true
			},
			imageDetail(item){
				console.log(item)
				if(this.delShow){
					return
				}
				uni.navigateTo({
					url: '/pages/cb/cbd/equip-set/photoResults'  + '?d_id=' + this.d_id + "&device_id=" + this.device_id + "&device_type=" + this.device_type + "&time=" + item.addtime
				});
			},
			imgOperate(){
				this.delShow = true
			},
			clickLeft() {
				uni.navigateBack()
			},
			dropDownChange(){
				this.loadMore = true
				this.page = 1
				this.imglists = []
				this.getImgData()
			},
			change(e){
				this.loadMore = true
				console.log(e)
				this.start_time = e.startDate 
				this.end_time = e.endDate 
				this.page = 1
				this.imglists = []
				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: this.page,
						page_number: 12,
						start: +new Date(this.start_time+' 00:00:00') / 1000,
						end: +new Date(this.end_time+' 23:59:59') / 1000, 
						...this.searchObj
					}
				})
				if(res.data.length==0){
					// 加载完了
					this.loadMore = false
					return
				}
				this.imglists = this.imglists.concat(res.data)
				
		
			},
			// 删除
			delImage(item){
				uni.showModal({
				    title: '提示',
				    content: '确认删除？',
				    success:  async (res)=> {
				        if (res.confirm) {
				            const res = await this.$myRequest({
				            	url: '/api/api_gateway?method=new_gateway.photo_info.delete_photo',
				            	data: {
				            		device_type_id: this.device_type,
				            		ids: item.id
				            	}
				            })
				            this.delShow = false
				            
				            uni.showToast({
				            	title: res.msg,
				            	duration: 2000
				            });
				            this.imglists = []
				            this.getImgData()
				        } else if (res.cancel) {
				            
				        }
				    }
				});
				
			},
	
			onReachBottom() {
				if(this.loadMore){
					this.page++
					this.getImgData()
				}
				
			},
			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
				});
			},
			async takephoto() { //拍照
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.device_info.send_control',
					data: {
						device_type_id: this.device_type,
						id: this.device_id,
						cmd: "0004"
					}
				})
				console.log(res)
	
				if (res == true) {
					uni.showToast({
						title: '指令下发成功！',
						duration: 2000
					});
		
				} else {
					uni.showToast({
						title: '指令下发失败！',
						duration: 2000,
						icon: "none"
					});
				}
			
			},
		},
		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()/1000
			let startTime = endTime - 60 * 60 * 24
			
			this.end_time = this.formatTime(endTime*1000,'yyyy-MM-dd')
			this.start_time = this.formatTime(startTime*1000,'yyyy-MM-dd')
			// this.imglists = []
			
			this.getImgData()
		
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-calendar__action {
		display: flex;
		justify-content: space-around;
	
		.u-calendar__action__text {
			line-height: 25px;
		}
	}
	/deep/.u-flex{
		display: flex;
	}
	page {
		background: #F7F7F7;
		.notip{
			text-align: center;
			color: #666666;
			margin-top: 100rpx;
		}
	.search-item{
		// padding: 0rpx 48rpx;
		box-sizing: border-box;
		background: #F7F7F7;
		line-height: 80rpx;
		color: #656C74;
		position: relative;
		.right{
			position: absolute;
			z-index: 11;
			right: 48rpx;
			top: 0;
		}
		.right::before{
			content: '|';
			color: #C3CBCF;
			padding-right: 10rpx;
		}
	}
	.tile-item{
		margin-top: 16rpx;
		padding: 0rpx 48rpx;
		box-sizing: border-box;
		height: 92rpx;
		line-height: 92rpx;
		display: flex;
		justify-content: space-between;
		background: #F7F7F7;
		.calendar{
			width: 83%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 0 18rpx;
			color: #5C5C5C;
			text-align: center;
		}
		.camera{
			
		}
	}	
		.imglist{
				display: flex;
				flex-flow: row wrap;
				padding: 0rpx 48rpx;
				box-sizing: border-box;
				background: #F7F7F7;
				margin-top: 6rpx;
				// justify-content: space-around;
				// gap: 16rpx;
			.imglist_box{
				box-sizing: border-box;
				flex: 0 0 33.3333%;
				height: 224rpx;
				padding: 6rpx;
				border-radius: 4rpx;
				position: relative;
				.top{
					position: absolute;
					top: 6rpx;
					left: 6rpx;
					background: rgba(0, 0, 0, 0.6);
					color: #fff;
					border-top-left-radius: 4rpx;
					border-top-right-radius: 4rpx;
					padding: 0 20rpx;
					font-size: 10px;
					z-index: 1;
					width: 75.5%;
					.float-right{
						float: right;
						color: #FF5951;
						font-size: 36rpx;
					}
				}
				.bottom{
					position: absolute;
					bottom: 6rpx;
					left: 6rpx;
					background: rgba(0, 0, 0, 0.6);
					color: #fff;
					border-bottom-left-radius: 4rpx;
					border-bottom-right-radius: 4rpx;
					text-align: center;
					font-size: 10px;
					width: 94.5%;
					padding: 4rpx 0;
				}
				.img-flex{
					border-radius: 4rpx;
					width: 100%;
					height: 100%;
				}
			}
		}
}
</style>