<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>