SmartBeehive/page_user/lurutwo.vue

<template>
	<view class="">
		<u-navbar title="设备控制" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" :custom-back="btnshang"
			title-size='36' height='50'></u-navbar>
		<view class="title">
			控制台
		</view>
		<view class="shuom">
			请扫描设备上的二维码
		</view>
		<view class="iptbox">
			<view class="qrcode" @click="qrcode()">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode=""></image>
			</view>
			<input type="text" class="ips" v-model="storeId" placeholder="请扫描设备上的二维码" style="margin-left: 32rpx;" placeholder-class="my-placeholder"/>
		</view>
		<view class="machao">
			MAC号：{{obj.mac == undefined ? '--' : obj.mac}}  <text v-if="onlineStatus == '离线'" style="color: red;margin-left: 50rpx;">离线</text> <text v-if="onlineStatus == '在线'" style="color: green;margin-left: 50rpx;">在线</text>
		</view>
		<view class="machao">
			总重量：{{(obj.totalWeight == undefined ? '--' : (Number(obj.totalWeight / 1000)).toFixed(2)) + 'kg'}}
		</view>
		<view class="machao">
			<text class="one">箱内温度：{{obj.innerTemperature == undefined ? '--' : obj.innerTemperature + '°C'}}</text>  <input type="text" v-model="wdxsn" /> <view class="" @click="btnone">校准</view> {{xsN}}
		</view>
		<view class="machao">
			箱内湿度：{{obj.innerHumidity == undefined ? '--' : obj.innerHumidity + '%'}}
		</view>
		<view class="machao">
			<text class="one">箱外温度：{{obj.outerTemperature == undefined ? '--' : obj.outerTemperature + '°C'}}</text> <input type="text" v-model="wdxsw" />  <view class="" @click="btntwo">校准</view> {{xsW}}
		</view>
		<view class="machao">
			箱外湿度：{{obj.outerHumidity == undefined ? '--' : obj.outerHumidity + '%'}}
		</view>
		<view class="machao">
			剩余电量：{{obj.surplusPowerPoint == undefined ? '--' : obj.surplusPowerPoint + '%'}}
		</view>
		<view class="machao">
			CO₂浓度：{{obj.innerCo2 == undefined ? '--' : obj.innerCo2 + 'ppm'}}
		</view>
		<view class="machao">
			出勤：{{obj.ioCountDay == undefined ? '--' : obj.ioCountDay + '次'}}
		</view>
		<view class="machao">
			频率：{{obj.volume == undefined ? '--' : (obj.volume / 1000).toFixed(1) + 'KHz'}}
		</view>
		<view class="machao">
			最后在线时间：{{obj.lastOnlineTime == undefined ? '--' : obj.lastOnlineTime}}
		</view>
        <view class="list" style="bottom: 300rpx;">
        	<view class="anniulist">
        		<view class="anniu" @click="btnkqjr">
        			开启加热
        		</view>
        		<view class="anniu" @click="btngbjr">
        			关闭加热
        		</view>
        		<view class="anniu" @click="btngnsd">
        			功能锁定
        		</view>
        		<view class="anniu" @click="btngnjs">
        			功能解锁
        		</view>
        	</view>
        </view>
		<view class="list">
			<view class="anniulist">
				<view class="anniu" @click="btngbkq">
					开启风扇
				</view>
				<view class="anniu" @click="btngb">
					关闭风扇
				</view>
				<view class="anniu" @click="btnkq">
					开启蜂鸣
				</view>
				<view class="anniu" @click="btnsx">
					刷新
				</view>
			</view>
			<view class="fanhui" @click="btnfh">
				返回
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#FAFDFD",
				},
				storeId: '',
				obj: {},
				id: '',
				onlineStatus: '--',
				powerStatus: '--',
				message: '定时器未启动',
				intervalId: null, // 用于存储定时器的ID
				wdxsn:'',
				wdxsw:'',
				xsN:'',
				xsW:''
			}
		},
		onLoad(options) {
			if (options.sn) {
				this.storeId = options.sn
				this.getsn()
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		onUnload() {
			// 页面卸载时清除定时器
			this.clearInterval()
		},
		onHide() {
			// 页面隐藏时清除定时器（可选，根据需求决定是否添加）
			this.clearInterval()
		},
		beforeDestroy() {
			// 组件销毁前清除定时器（可选，根据需求决定是否添加）
			this.clearInterval()
		},
		methods: {
			// 点击开启加热
			btnkqjr(){
				this.$u.put(`/app/beehive/admin/heat?sn=${this.storeId}&open=true`).then(res=>{
					if(res.code == 200){
					   uni.showToast({
					   	  title:'开启加热成功',
					   	  icon: 'success',
					   	  duration:2000
					   }) 
					}else{
					    uni.showToast({
					       title:res.msg,
					       icon: 'none',
					       duration:2000
					    }) 
					}
				})
			},
			// 点击关闭加热
			btngbjr(){
				this.$u.put(`/app/beehive/admin/heat?sn=${this.storeId}&open=false`).then(res=>{
					if(res.code == 200){
					   uni.showToast({
					   	  title:'关闭加热成功',
					   	  icon: 'success',
					   	  duration:2000
					   }) 
					}else{
					    uni.showToast({
					       title:res.msg,
					       icon: 'none',
					       duration:2000
					    }) 
					}
				})
			},
			// 功能锁定
			btngnsd(){
				this.$u.put(`/app/beehive/admin/lock?sn=${this.storeId}&lock=true`).then(res=>{
					if(res.code == 200){
					   uni.showToast({
					   	  title:'开启功能锁成功',
					   	  icon: 'success',
					   	  duration:2000
					   }) 
					}else{
					    uni.showToast({
					       title:res.msg,
					       icon: 'none',
					       duration:2000
					    }) 
					}
				})
			},
			// 功能解锁
			btngnjs(){
				this.$u.put(`/app/beehive/admin/lock?sn=${this.storeId}&lock=false`).then(res=>{
					if(res.code == 200){
					   uni.showToast({
					   	  title:'关闭功能锁成功',
					   	  icon: 'success',
					   	  duration:2000
					   }) 
					}else{
					    uni.showToast({
					       title:res.msg,
					       icon: 'none',
					       duration:2000
					    }) 
					}
				})
			},
			// 内部温度
			btnone(){
				 let num = Number(this.wdxsn) + Number(this.xsN)
				 this.$u.put(`/app/beehive/admin/wdxsn?sn=${this.storeId}&wdxsn=${num}`).then(res=>{
					 if(res.code == 200){
						 this.obj.innerTemperature = Number(this.obj.innerTemperature) + Number(num)
						 uni.showToast({
						 	title:'校准成功',
						 	icon: 'success',
						 	duration:2000
						 }) 
					 }else{
						uni.showToast({
							title:res.msg,
							icon: 'none',
							duration:2000
						}) 
					 }
				 })
			},
			// 外部温度
			btntwo(){
				let num = Number(this.wdxsw) + Number(this.xsW)
				this.$u.put(`/app/beehive/admin/wdxsw?sn=${this.storeId}&wdxsw=${num}`).then(res=>{
					 if(res.code == 200){
						this.obj.outerTemperature = Number(this.obj.outerTemperature) + Number(num)
						uni.showToast({
							title:'校准成功',
							icon: 'success',
							duration:2000
						}) 
					 }else{
						uni.showToast({
							title:res.msg,
							icon: 'none',
							duration:2000
						}) 
					 }
				})
			},
			btnshang(){
				uni.reLaunch({
					url:'/page_user/luru'
				})
			},
			startInterval() {
				// 每五秒执行一次的方法
				const timerCallback = () => {
					if(this.storeId == '' || this.storeId == null || this.obj == null){
						this.clearInterval()
					}else{
					   this.$u.get(`/app/beehive/admin/sn/${this.storeId}?refresh=true`).then(res => {
					   	if (res.code == 200) {
					   		this.obj = res.data
							this.xsW = res.data.xsW
							this.xsN = res.data.xsN
					   		this.id = res.data.deviceId
					   		if (res.data.onlineStatus == 0) {
					   			this.onlineStatus = '离线'
					   		} else if (res.data.onlineStatus == 1) {
					   			this.onlineStatus = '在线'
					   		}
					   		if (res.data.powerStatus == 0) {
					   			this.powerStatus = '关闭'
					   		} else if (res.data.powerStatus == 1) {
					   			this.powerStatus = '开启'
					   		}
					   	}
					   })	
					}
				}
				// 启动定时器，并将ID存储在intervalId中
				this.intervalId = setInterval(timerCallback, 5000)
			},
			clearInterval() {
				// 清除定时器
				if (this.intervalId !== null) {
					clearInterval(this.intervalId)
					this.intervalId = null
				}
			},
			// 进行扫描二维码获取设备sn
			qrcode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							let results = regex.exec(url);
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						let id = getQueryParam(decodedValue, 's')
						this.storeId = id
						this.getsn()
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
            // 根据设备sn获取设备详情
			getsn() {
				this.$u.get(`/app/beehive/admin/sn/${this.storeId}?refresh=true`).then(res => {
					if (res.code == 200) {
						if(res.data == null){
							this.clearInterval()
						}else{
							this.obj = res.data
							this.id = res.data.deviceId
							this.xsW = res.data.xsW
							this.xsN = res.data.xsN
							if (res.data.onlineStatus == 0) {
								this.onlineStatus = '离线'
							} else if (res.data.onlineStatus == 1) {
								this.onlineStatus = '在线'
							}
							if (res.data.powerStatus == 0) {
								this.powerStatus = '关闭'
							} else if (res.data.powerStatus == 1) {
								this.powerStatus = '开启'
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
						})
						this.clearInterval()
					}
				})
			},
			// 返回录入
			btnfh() {
				uni.reLaunch({
					url:'/page_user/luru'
				})
			},
			// 开启蜂鸣
			btnkq() {
				this.$u.put(`/app/beehive/admin/buzzer?sn=${this.storeId}`).then((res) => {
					if (res.code == 200) {
						setTimeout(() => {
							this.getsn()
						}, 1000)
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 关闭风扇
			btngb() {
				this.$u.put(`/app/beehive/admin/fan?sn=${this.storeId}&open=false`).then((res) => {
					if (res.code == 200) {
						setTimeout(() => {
							this.btnsx()
						}, 1000)
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 开启风扇
			btngbkq() {
				this.$u.put(`/app/beehive/admin/fan?sn=${this.storeId}&open=true`).then((res) => {
					if (res.code == 200) {
						setTimeout(() => {
							this.btnsx()
						}, 1000)
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 刷新
			btnsx() {
				this.$u.put(`/app/beehive/iot/${this.storeId}/uploadBySn`).then(res => {
					this.getsn()
					if(this.intervalId == null){
						this.startInterval()
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.list {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		.anniulist {
			width: 658rpx;
			margin: auto;
			text-align: left;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			.anniu {
				width: 30%;
				height: 90rpx;
				border-radius: 20rpx;
				background-color: #ce9e10;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				line-height: 90rpx;
				margin: 0 10rpx;
			}
		}
		.fanhui {
			width: 658rpx;
			height: 90rpx;
			border-radius: 20rpx;
			background-color: #ce9e10;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			line-height: 90rpx;
			margin: auto;
			margin-top: 50rpx;
		}
	}
	.machao {
		width: 658rpx;
		margin: auto;
		margin-top: 20rpx;
		text-align: left;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		.one{
			width: 280rpx;
		}
		input{
			width: 100rpx;
			height: 40rpx;
			border: 1px solid #ce9e10;
			margin-left: 50rpx;
			text-align: center;
			border-radius: 10rpx;
		}
		view{
			margin-left: 20rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			background-color: #ce9e10;
			color: #fff;
			border-radius: 10rpx;
			margin-right: 10rpx;
		}
	}
	.title {
		font-size: 70rpx;
		font-weight: 600;
		text-align: left;
		width: 658rpx;
		margin: auto;
		margin-top: 30rpx;
	}
	.shuom {
		width: 658rpx;
		margin: auto;
		margin-top: 30rpx;
		text-align: left;
		font-size: 32rpx;
	}
	.iptbox {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		padding: 22rpx;
		margin: 28rpx auto 0;
		width: 658rpx;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		.qrcode {
			padding-right: 20rpx;
			border-right: 2rpx solid #D8D8D8;
			image {
				width: 54rpx;
				height: 54rpx;
			}
		}
		.ips {
			width: 630rpx;

		}
		image {
			width: 18rpx;
			height: 32rpx;
		}
		.my-placeholder {
			font-weight: 400;
			font-size: 32rpx;
			color: #808080;
		}
	}
</style>