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

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 64px;">
			<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="timeshow">
				<view class="timeshow_tate" @click="selecttimestate">
					{{timestate|timeFormat()}}
				</view>
				<view class="timeshow_end" @click="selecttimeend">
					{{timeend|timeFormat()}}
				</view>
				<u-icon name="search" size="36" @click="search"></u-icon>
				<u-picker mode="time" v-model="timeshow" :params="params" @confirm="confirm"></u-picker>
			</view>
			<view class="imglist">
				<view class="imglist_box" v-for="(item,index) in imglists" :key="index">
					<view class="imglist_left">
						<image :src="'http://static.yfpyx.com/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.id)">
							<p class="iconfont icon-shanchu">删除</p>
						</view>
						<view class="icon_box" @click="shibie(item.id)">
							<p class="iconfont icon-shibie">识别</p>
						</view>
						<view class="icon_box" @click="tongji(item.id)">
							<p class="iconfont icon-tongji2">手动统计</p>
						</view>
						<view class="icon_box" @click="add(item.id)">
							<p class="iconfont icon-iconzhengli_shouxieqianpi">手动添加</p>
						</view>
						<p style="color: #06B535;">{{item.addtime|timeFormat()}}</p>
					</view>
				</view>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				imglists: [],
				tishi: true,
				d_id: '',
				timeend: null, //当前时间 也是搜索的结束时间
				timestate: null,
				timeshow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				flag:1,
				self:true,
				isTop:false
			}
		},
		methods: {
			//forecast.forecast_system.equip_photofo
			async imglistdata(time_begin,time_end) { //获取图片列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo',
					data: {
						device_id: this.device_id,
						page: this.page,
						ret: "list",
						time_begin:time_begin,//开始时间
						time_end: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) { //删除图片
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_del',
					data: {
						device_id: this.device_id,
						addrlist: id
					}
				})
			},
			//forecast.forecast_system.equip_photo_discern识别
			async discern(id) { //识别图片
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_discern',
					data: {
						img_id: id,
						ret: "see"
					}
				})
			},
			//forecast.forecast_system.equip_photo_species  pest_list
			//forecast.forecast_system.equip_photo_species统计
			async species(id) { //统计
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_species',
					data: {
						ret: "photo_desc",
						img_id: id
					}
				})
			},
			//forecast.send_control.admin_device_control 拍照 
			async takephoto() { //统计
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
					data: {
						device_type_id: 3,
						d_id: this.d_id,
						cmd: "takephoto"
					}
				})
				console.log(res)
				if (res == true) {
					uni.showToast({
						title: '指令下发成功！',
						duration: 2000
					});
				}
				uni.navigateBack({
					delta:1
				})
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			delimg(id) { //删除图片
				uni.showModal({
					title: '提示',
					content: '是否删除此图片？',
					success: function(res) {
						if (res.confirm) {
							// this.del(id)
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			shibie(id) { //识别
				this.discern(id)
			},
			tongji(id) { //统计
				this.species(id)
			},
			add(id) {
				uni.navigateTo({
					url: "./addimg?id=" + id + "&device_id" + this.device_id
				})
			},
			examine(index) {
				var imgarr = []
				for(var i=0;i<this.imglists.length;i++){
					imgarr.push(this.imglists[i].addr)
				}
				console.log(imgarr)
				uni.previewImage({
					urls: imgarr,
					current:index
				});
			},
			clickRight() { //下发拍照指令
				this.takephoto()
			},
			confirm(val){//时间选择框确定按钮
				
				var time = val.year+"-"+val.month+"-"+val.day+" "+val.hour+":"+val.minute+":00"
				if(this.flag==1){
					this.timestate = +new Date(time)/1000
				}else if(this.flag==2){
					this.timeend = +new Date(time)/1000
				}
			},
			selecttimestate(){//开始时间选择
				this.timeshow = !this.timeshow
				this.flag = 1
			},
			selecttimeend(){//结束时间选择
				this.timeshow = !this.timeshow
				this.flag = 2
			},
			search(){//按时间搜索
				this.imglists=[]
				this.page = 1
				this.imglistdata(parseInt(this.timestate),parseInt(this.timeend))
				this.self = false
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			}
		},
		onLoad(option) {
			console.log(option)
			this.device_id = option.device_id
			this.d_id = option.d_id
		},
		onShow(){
			setTimeout(()=>{
				this.imglistdata('','')
			},1000)
			this.timeend = +new Date() / 1000
			this.timestate = this.timeend - 60 * 60 * 24
		},
		onReachBottom() {
			this.page++
			if(this.self){
				this.imglistdata('','')
			}else{
				this.imglistdata(parseInt(this.timestate),parseInt(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: 104px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		font-size: 40rpx;
	}

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

		.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: 84px;
		width: 95%;
		left: 2.5%;
		.imglist_box {
			display: flex;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}
		.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>