bigDataApp/pages/cb/cbd/equip-set/imgpage.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="imglists.length==0">暂无数据</p>
			<u-select v-model="modelPicker" mode="single-column" @confirm="confirmModel" v-if="device_type != 7"
				:default-value="[identify_model]" :list="modelList"></u-select>
			<view class="schedule" @click="modelPicker=!modelPicker" v-if="device_type != 7">
				<p class="schedule_value">{{modelList[identify_model].label}}</p>
				<!-- {{titletext[indexone]}} -->
				<p class="schedule_icon">
					<u-icon name="arrow-down"></u-icon>
				</p>
			</view>
			<view :class="`selecttimes ${device_type == 7 ? 'bigSelect' : ''}`" @click="tiemshow=!tiemshow">
				<view class="timesbox">
					<image
						:src="'http://www.hnyfwlw.com:8006/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="'http://www.hnyfwlw.com:8006/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.ids)">
							<p class="iconfont icon-shanchu">删除</p>
						</view>
						<view class="icon_box" @click="shibie(item.ids,item.addr)" v-if="disable==1 && device_type!=7">
							<p class="iconfont icon-shibie">识别</p>
						</view>
						<view class="icon_box" v-else-if="disable==2 && device_type!=7">
							<p class="iconfont icon-shibie">计数：{{item.des_nums}}只</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://www.hnyfwlw.com:8006/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'"
				mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modelPicker: false,
				identify_model: 1,
				modelList: [{
					value: 'A',
					label: '模型A'
				}, {
					value: 'B',
					label: '模型B'
				}],
				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,
				resultdata: {},
				titletext: ["24小时", "近一个月", "近半年", "近一年"],
				titleidnex: 0,
				tiemshow: false, //时间选择器
				disable: "",
				device_type: "",
				myuid: "",
				loading:false
			}
		},
		methods: {
			// 切换模型
			confirmModel(e) {
				
				this.modelList.forEach((item, index) => {
					if (e[0].value == item.value) {
						this.identify_model = index;
					}
				})
				this.page=1
				this.imglists=[];
				this.imglistdata(parseInt(this.timestate), parseInt(this.timeend))
				// console.log(e)
			},
			//forecast.forecast_system.equip_photofo
			async imglistdata(time_begin, time_end) { //获取图片列表
				this.loading = true
				uni.showLoading({
					title: '加载中'
				});
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.device_photo_list',
					data: {
						device_id: this.device_id,
						// device_id: '861551058865205',
						page: this.page,
						status: "no",
						page_number: 12,
						identify_model: this.modelList[this.identify_model].value,
						time_begin: time_begin, //开始时间
						time_end: time_end, //结束时间
					}
				})
				uni.hideLoading()
				// this.loading = false
				this.imglists = this.imglists.concat(res.data)
				console.log(this.imglists)
				
			},
			// 孢子仪的图片列表
			async imglistdataBzy(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",
						page_number: 12,
						// identify_model: this.modelList[this.identify_model].value,
						time_begin: time_begin, //开始时间
						time_end: time_end, //结束时间
					}
				})
				this.imglists = this.imglists.concat(res.data)
				console.log(this.imglists)
			
			},
			//forecast.forecast_system.equip_photo_del
			async del(id) { //删除图片
				var arr = [id]
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_del',
					data: {
						device_id: this.device_id,
						addrlist: JSON.stringify(arr)
					}
				})
				if (res) {
					uni.showToast({
						title: '指令下发成功！',
						duration: 2000
					});
					this.page = 1
					this.imglists = []
					if(this.device_type == 7) {
						this.imglistdataBzy(parseInt(this.timestate), parseInt(this.timeend))
					} else {
						this.imglistdata(parseInt(this.timestate), parseInt(this.timeend))
					}
					// this.imglistdata(parseInt(this.timestate), parseInt(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 拍照 
			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
					});
					var that = this
					setTimeout(() => {
						if(that.device_type == 7) {
							that.imglistdataBzy(parseInt(that.timestate), parseInt(that.timeend))
						} else {
							that.imglistdata(parseInt(that.timestate), parseInt(that.timeend))
						}
						// that.imglistdata(parseInt(that.timestate), parseInt(that.timeend))
					}, 1000)
				} else {
					uni.showToast({
						title: '指令下发失败！',
						duration: 2000,
						icon: "none"
					});
				}

			},
			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('用户点击取消');
						}
					}
				});
			},
			shibie(id, addr) { //识别
				// this.discern(id)
				uni.navigateTo({
					url: "./results?id=" + id + "&addr=" + addr+"&identify_model=" + this.modelList[this.identify_model].value
				})
			},
			tongji(item) { //统计
				// this.species(id)
				uni.navigateTo({
					url: "./manualinput?id=" + item.ids + "&device_id=" + item.device_id + "&addtime=" + item
						.addtime
				})
			},
			add(item) {
				uni.navigateTo({
					url: "./addimg?id=" + item.ids + "&device_id=" + item.device_id + "&addtime=" + item.addtime
				})
			},
			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
				});
			},
			clickRight() { //下发拍照指令
				this.takephoto()
			},
			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;
				if(this.device_type == 7) {
					this.imglistdataBzy(parseInt(this.timestate), parseInt(this.timeend))
				} else {
					this.imglistdata(parseInt(this.timestate), parseInt(this.timeend))
				}
				// this.imglistdata(parseInt(this.timestate), parseInt(this.timeend))
			},
			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
			},
		},
		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.device_id
			this.d_id = option.d_id
			this.imglists = []
			this.disable = option.disable
			this.device_type = option.device_type
			console.log(this.timestate)
			if(this.device_type == 7) {
				this.imglistdataBzy(parseInt(this.timestate), parseInt(this.timeend))
			} else {
				this.imglistdata(parseInt(this.timestate), parseInt(this.timeend))
			}
		},
		onShow() {

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

	.schedule {
		position: fixed;
		top: 85px;
		left: 10rpx;
		padding: 5rpx 0;
		// left: 50%;
		// transform: translateX(-50%);
		z-index: 100;
		display: flex;
		width: 220rpx;
		margin: 0 auto;
		height: 50rpx;
		// border: 2rpx solid #F0F0F0;
		background-color: #Fff;
		// border-radius: 25px;
		box-shadow: 0 0 10rpx #bcb9ca;

		.schedule_value {
			width: 70%;
			text-align: center;
			line-height: 50rpx;
			font-size: 24rpx;
		}

		.schedule_icon {
			width: 30%;
			// background-color: #F2F2F2;
			text-align: center;
			line-height: 50rpx;

			/deep/.u-icon__icon {
				color: rgba(0, 0, 0, 0.3);
			}
		}
	}
	.selecttimes {
		width: 65%;
		position: fixed;
		top: 85px;
		right: 10rpx;
		z-index: 100;
		background-color: #fff;
		// padding-top: 30rpx;

		.timesbox {
			display: flex;
			width: 100%;
			// 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;
			}
		}
	}

	
	.bigSelect{
		width: 100%;
	}
	.timeshow {
		width: 96%;
		height: 50rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 84px;
		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: 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>