bigdata_WX/pages/monitor/imagelist.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="查看图片"></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="icon_box" @click="delimg(item.photo_id)">
							<p class="yficonfont icon-shanchu">删除</p>
						</view>
						<p style="color: #06B535;">{{item.addtime|timeFormat()}}</p>
					</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 {
				page: 1,
				imglists: [],
				tishi: true,
				d_id: '',
				timeend: '', //当前时间 也是搜索的结束时间
				timestate: '',
				timeshow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				flag: 1,
				self: true,
				isTop: false,
				resultdata: {},
				titletext: ["24小时", "近一个月", "近半年", "近一年"],
				titleidnex: 0,
				tiemshow: false, //时间选择器
				disable: "",
				device_type: "",
				myuid:""
			}
		},
		methods: {
			//forecast.forecast_system.equip_photofo
			async imglistdata(time_begin, time_end) { //获取图片列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=camera.camera_manage.camera_photo',
					data: {
						device_id: this.device_id,
						page: this.page,
						page_size: 8,
						start_time: time_begin, //开始时间
						end_time: time_end, //结束时间
					}
				})
				this.imglists = this.imglists.concat(res.data)
				console.log(this.imglists)
				if (this.imglists.length == 0) {
					this.tishi = true
				} else {
					this.tishi = false
				}
			},
			//forecast.forecast_system.equip_photo_del
			async del(id) { //删除图片
				var arr = id;
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=camera.camera_manage.del_camera_photo',
					data: {
						// device_id: this.device_id,
						photo_id_list: JSON.stringify(arr)
					}
				})
				if (res) {
					uni.showToast({
						title: '删除成功！',
						duration: 2000
					});
					this.page = 1
					this.imglists = []
					if(this.timestate != '') {
						this.timestate = parseInt(this.timestate)
					}
					if(this.timeend != '') {
						this.timeend = parseInt(this.timeend)
					}
					this.imglistdata(this.timestate, this.timeend)
				} else {
					uni.showToast({
						title: '删除失败！',
						duration: 2000,
						icon: "none"
					});
				}
			},
			//forecast.forecast_system.equip_photo_species  pest_list
			//forecast.forecast_system.equip_photo_species统计

			//forecast.send_control.admin_device_control 拍照 
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			delimg(id) { //删除图片
				uni.showModal({
					title: '提示',
					content: '是否删除此图片？',
					success: (res) => {
						if (res.confirm) {
							this.del(id)
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			tiemchange(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.imglistdata(parseInt(this.timestate), parseInt(this.timeend))
			},
			timetab(e) {
				if(!e) return '请选择'
				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
			},
		},
		onLoad(option) {
			uni.getStorage({
				key:"myuid",
				success:(res)=> {
					this.myuid = res.data
					console.log(this.myuid)
				}
			})
			// this.timeend = +new Date() / 1000
			// this.timestate = this.timeend - 60 * 60 * 24
			console.log(option)
			this.device_id = option.id
			console.log(this.timestate)
			this.imglistdata('', '')
		},
		onShow() {

		},
		onReachBottom() {
			this.page++
			console.log(this.timestate)
			if(this.timestate != '') {
				this.timestate = parseInt(this.timestate)
			}
			if(this.timeend != '') {
				this.timeend = parseInt(this.timeend)
			}
			this.imglistdata(this.timestate, this.timeend)
		},
		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: 40px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		font-size: 40rpx;
	}

	.selecttimes {
		width: 100%;
		position: fixed;
		top: 0;
		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;
			}
		}
	}

	.timeshow {
		width: 96%;
		height: 50rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 10px;
		left: 2.5%;
		display: flex;
		z-index: 100;
		padding-top: 10px;

		.shuju_one_title {
			width: 70%;
			margin: 0 auto;
			display: flex;

			.tltle_text {
				width: 25%;
				border: 2rpx solid #B2B2B2;
				color: #B2B2B2;
				text-align: center;
				font-size: 24rpx;
				height: 50rpx;
				line-height: 50rpx;
			}

			.title_text_color {
				width: 25%;
				border: 2rpx solid #28AE4F;
				color: #28AE4F;
				text-align: center;
				font-size: 24rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
		}

		.timeshow_tate,
		.timeshow_end {
			height: 50rpx;
			width: 45%;
			line-height: 50rpx;
			text-align: center;
			margin-right: 10rpx;
			background-color: #56C877;
			color: #FFFFFF;
		}
	}

	.imglist {
		position: absolute;
		top: 0;
		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>