bigdata_WX/pages/cb/zjxydetail/photolist.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="查看图片" rightIcon="camera"
					@clickRight="clickRight"></uni-nav-bar>
			</view>
			<!-- <p class="tishi" v-if="tishi">暂无数据</p> -->
			<view class="selecttimes" @click="tiemshow=!tiemshow">
				<view class="timesbox">
					<image
						:src="$imageURL+'/bigdata_app'+'/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
						mode=""></image>
					<p>{{timetab(timestate)}}</p>
					<p class="or">~</p>
					<p>{{timetab(timeend)}}</p>
					<u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
				</view>
				<u-calendar v-model="tiemshow" mode="range" @change="tiemchange"></u-calendar>
			</view>
			<view class="imglist">
				<view class="imglist_box" v-for="(item,index) in imglists" :key="index">
					<view class="imglist_left">
						<image :src="$imageURL+'/bigdata_app/image/cb/jiazai.ui.gif'" mode="">
						</image>
						<image :src="item.addr" mode="" @click="examine(index)"></image>
					</view>
					<view class="imglist_right">
						<view class="">
							{{item.time}}
						</view>
						<view class="">
							害虫数量:{{item.pest_counts}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="$imageURL+'/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'"
				mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tiemshow:false,
				timestate:"",
				timeend:"",
				isTop:false,
				imglists:[],
				device_id:"",
				page:1,
				d_id:""
			}
		},
		methods: {
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			},
			clickRight(){
				this.takephoto()
			},
			timetab(e) {
				e = new Date(e * 1000)
				var year = e.getFullYear()
				var month = e.getMonth() + 1 < 10 ? "0" + (e.getMonth() + 1) : e.getMonth() + 1
				var day = e.getDate() < 10 ? "0" + e.getDate() : e.getDate()
				var time = year + "/" + month + "/" + day
				return time
			},
			examine(index){
				var imgarr = []
				for (var i = 0; i < this.imglists.length; i++) {
					imgarr.push(this.imglists[i].addr)
				}
				uni.previewImage({
					urls: imgarr,
					current: index
				});
			},
			async getimglist(){
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.device_photo_list',
					data: {
						cmd: "zjxy",
						device_id: this.device_id,
						page: this.page,
						page_number: "12",
						time_begin: Math.floor(this.timestate),
						time_end: Math.floor(this.timeend),
					}
				})
				console.log(res)
				this.imglists = [...this.imglists,...res.data]
				if(this.imglists.length == 0) {
					uni.showToast({
						title: '数据为空',
						duration: 2000,
						icon:'none'
					});
				}
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			tiemchange(e){
				// console.log(e)
				this.imglists = []
				this.page = 1
				console.log(e)
				this.timestate = +new Date(e.startDate) / 1000 - 8 * 60 * 60
				this.timeend = +new Date(e.endDate) / 1000 + 16 * 60 * 60
				this.getimglist()
			},
			async takephoto() { //拍照
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
					data: {
						device_type_id: 8,
						d_id: this.d_id,
						cmd: "takephoto"
					}
				})
				console.log(res)
				if (res == true) {
					uni.showToast({
						title: '指令下发成功！',
						duration: 2000
					});
					var that = this
					setTimeout(() => {
						that.getimglist()
					}, 1000)
				} else {
					uni.showToast({
						title: '指令下发失败！',
						duration: 2000,
						icon: "none"
					});
				}
			
			},
		},
		onLoad(option) {
			this.d_id =  option.d_id
			this.device_id = option.device_id
			this.timeend = +new Date() / 1000
			this.timestate = this.timeend - 60 * 60 * 24
			this.getimglist()
		},
		onReachBottom() {
			this.page++
			this.getimglist()
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		}
	}
</script>

<style lang="scss">
	.tishi {
		position: absolute;
		top: 104px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		font-size: 40rpx;
	}

	.selecttimes {
		width: 100%;
		position: fixed;
		top: 85px;
		left: 0;
		z-index: 100;
		background-color: #fff;
		padding-top: 30rpx;

		.timesbox {
			display: flex;
			width: 95%;
			margin: 0 auto;
			justify-content: space-around;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 6rpx;
			}

			.icon {
				color: #949494;
				text-align: right;
				margin-left: 30rpx;

			}
		}

		/deep/.u-calendar__action {
			display: flex;
			justify-content: space-around;

			.u-calendar__action__text {
				line-height: 25px;
			}
		}
	}
	.imglist {
		position: absolute;
		top: 100px;
		width: 95%;
		left: 2.5%;
	
		.imglist_box {
			display: flex;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 20rpx;
			margin-bottom: 20rpx;
			height: 140px;
		}
	
		.imglist_left {
			width: 50%;
			position: relative;
	
			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 280rpx;
			}
		}
	
		.imglist_right {
			margin-left: 40rpx;
			padding: 10rpx 0;
	
			.icon_box {
				margin-bottom: 12rpx;
				font-size: 24rpx;
	
				.iconfont {
					margin-right: 20rpx;
					color: #56C877;
					font-size: 32rpx;
				}
			}
	
			p:last-child {
				margin-bottom: 0;
			}
	
		}
	}
.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>