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

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 40px;">
			<view style="position: fixed;z-index: 100;top: 40px;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="查看图片"></uni-nav-bar>
			</view>
			<p class="tishi" v-if="tishi">暂无图片</p>
			<u-select v-model="modelPicker" mode="single-column" @confirm="confirmModel"
				:default-value="[identify_model]" :list="modelList" v-if="device_type != 7"></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="timeshow">
				<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"
						range-color="#999"
						btn-type="success"
						active-bg-color="#0BBC58"
						range-bg-color="rgba(11,188,88,0.13)"></u-calendar>
				</view>
				<view class="paizhao" @click="clickRight">
					<u-icon name="camera" color="#000" size="45"></u-icon>
				</view>
			</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 class="text-addr" v-if="isShowBu(item) && myuser_type">补</view>
					</view>
					<view class="imglist_right">
						<view class="icon_box" @click="delimg(item.ids)">
							<p class="yficonfont icon-shanchu">删除</p>
						</view>
						<view class="icon_box" @click="shibie(item.ids,item.addr)" v-if="disable==1 && device_type!=7">
							<p class="yficonfont icon-shibie">识别</p>
						</view>
						<view class="icon_box" v-else-if="disable==2 && device_type!=7">
							<p class="yficonfont icon-shibie">计数：{{item.des_nums}}只</p>
						</view>
						<!-- <view class="icon_box" @click="tongji(item)" v-if="device_type!=7">
							<p class="yficonfont icon-tongji2">手动统计</p>
						</view>
						<view class="icon_box" @click="add(item)" v-if="device_type!=7">
							<p class="yficonfont 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="$imageURL+'/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,
				myuser_type: false,
				self: true,
				isTop: false,
				resultdata: {},
				titleidnex: 0,
				tiemshow: false,
				disable: "",
				device_type: "",
				myuid: ""
			}
		},
		methods: {
			isShowBu(image){
				const addr = image?.addr || ''
				// 如果里面字段包含history就显示补
				if(addr.indexOf('history') != -1){
					return true;
				}
				return false;
			},
			// 切换模型
			confirmModel(e) {
				this.modelList.forEach((item, index) => {
					if (e[0].value == item.value) {
						this.identify_model = index;
					}
				})
				this.imglists=[];
				this.imglistdata(parseInt(this.timestate), parseInt(this.timeend))
				// console.log(e)
			},
			//forecast.forecast_system.equip_photofo
			async imglistdata(time_begin, time_end,isInit) { //获取图片列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.device_photo_list',
					data: {
						device_id: this.device_id,
						page: this.page,
						status: "no",
						page_number: 12,
						identify_model: this.modelList[this.identify_model].value,
						time_begin: time_begin, //开始时间
						time_end: time_end, //结束时间
					}
				})
				if(isInit){
					this.imglists = res.data
				}else{
					this.imglists = this.imglists.concat(res.data)
				}
				console.log(this.imglists)
				if (this.imglists.length == 0) {
					this.tishi = true
				} else {
					this.tishi = false
				}
			},
			// 孢子仪的图片列表
			async imglistdataBzy(time_begin, time_end,isInit) { //获取图片列表
				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, //结束时间
					}
				})
				if(isInit){
					this.imglists = res.data
				}else{
					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=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))
					}
				} else {
					uni.showToast({
						title: '指令下发失败！',
						duration: 2000,
						icon: "none"
					});
				}
			},
			//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: this.device_type,
						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),true)
						} else {
							that.imglistdata(parseInt(that.timestate), parseInt(that.timeend),true)
						}
					}, 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) { //统计
				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)
				}
				console.log(imgarr)
				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))
				}
			},
			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)
				}
			})
			uni.getStorage({
				key:"myuser_type",
				success:(res)=>{
					if(Number(res.data) == 1){
						this.myuser_type = true
					}
				}
			})
			console.log(option)
			this.device_id = option.device_id
			this.d_id = option.d_id
			this.disable = option.disable
			this.timeend = +new Date() / 1000
			this.timestate = this.timeend - 60 * 60 * 24
			this.imglists = []
			this.device_type = option.device_type
			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++
			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: 104px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		font-size: 40rpx;
	}
	.schedule {
		position: fixed;
		top: 84px;
		left: 10rpx;
		padding: 5rpx 0;
		// left: 50%;
		// transform: translateX(-50%);
		z-index: 100;
		display: flex;
		width: 180rpx;
		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);
			}
		}
	}
	.timeshow {
		width: 70%;
		height: 80rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 84px;
		right: 10rpx;
		display: flex;
		z-index: 100;
		.selecttimes {
			width: 85%;
			z-index: 100;
			background-color: #fff;
			.timesbox {
				display: flex;
				width: 95%;
				margin: 0 auto;
				justify-content: space-around;
				box-shadow: 0 0 10rpx #bcb9ca;
				padding: 13rpx 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;
				}
			}
		}
		.paizhao{
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
		.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;
			}
		}
	}
	.bigSelect{
		width: 100%;
	}
	.imglist {
		position: absolute;
		top: 104px;
		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;
			}
			.text-addr{
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				color:#f00;
				font-size: 24rpx;
			}
		}

		.imglist_right {
			margin-left: 40rpx;
			padding: 10rpx 0;

			.icon_box {
				margin-bottom: 12rpx;
				font-size: 24rpx;

				.yficonfont {
					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>