<template> <view class="page"> <u-navbar :is-back="false" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='8'></u-navbar> <view class="title"> <image src="https://api.ccttiot.com/smartmeter/img/static/uhRjXxrVaNwOCld2fYUl" mode=""></image> </view> <!-- 背景图 --> <!-- 没设备时展示 --> <image class="bjimg" v-if="bjflag" src="https://api.ccttiot.com/smartmeter/img/static/uz8MR6BuZW2qRANnYgLu" mode=""></image> <!-- 有设备时展示 --> <image class="bjimg" v-else src="https://api.ccttiot.com/smartmeter/img/static/uXBpJuaUs0XUNb8HTahh" mode=""> </image> <view class="wusb" v-if="bjflag"> <text>暂无设备,请先绑定设备</text> <view class="bang" @click="btnaddsb"> 绑定 </view> <!-- <view class="selectnames" @click="btnluru" v-if="userobj.userType == 00"> 录入设备 </view> --> </view> <view class="" v-else> <!-- 选择设备 --> <view class="selectbox"> <view class="selectname" @click="btnksxz"> 切换设备 <image v-if="!xuanzeflag" src="https://api.ccttiot.com/smartmeter/img/static/uwHOBxvbJjkhx1uDiQHI" mode=""></image> <image v-else class="rotated-image" src="https://api.ccttiot.com/smartmeter/img/static/uwHOBxvbJjkhx1uDiQHI" mode=""></image> </view> <view class="selectshezhi" style="display: flex;"> <!-- <view class="selectnames" @click="btnluru" v-if="userobj.userType == 00"> 录入设备 </view> --> <image @click="btnsz" src="https://api.ccttiot.com/smartmeter/img/static/uvCJ8ro0MpfGZd53vypJ" mode=""></image> </view> </view> <view class="selectbox"> <view class="shebeiname"> {{user.deviceName == undefined ? '--' : user.deviceName}} <text style="background-color: red;box-shadow: 0rpx 0rpx 10rpx 0rpx red, 0rpx 0rpx 30rpx 0rpx red" v-if="vardataflag == 1 || vardataflag == 2"></text> <text v-else></text> <view class="lj" @click="btnlj" v-if="vardataflag == 1"> 点击连接 </view> <view class="lj" @click="btnlj" v-if="vardataflag == 2"> 连接中 </view> <view class="lj" style="color: #15C55D;border: 1px solid #15C55D;" @click="btnlj" v-if="vardataflag == 3"> 已连接 </view> </view> <!-- <view class="shebeiadd" @click="btnaddsb"> <image src="https://api.ccttiot.com/smartmeter/img/static/udlX67UXzuRUZCuEtWDH" mode=""></image> </view> --> </view> <!-- 设备信息 --> <view class="devicebox"> <view class="devicetop"> <view class="devicelt"> <image src="https://api.ccttiot.com/smartmeter/img/static/uVKucPVDjxjaCDCpFKvw" mode=""></image> <view class="xinghao"> <view class="one">型号:{{user.model == undefined ? '--' : user.model}}</view> <view class="">MAC:{{user.mac == undefined ? '--' : user.mac}}</view> </view> </view> <!-- <view class="devicert"> <view class="shoudong"> <image @click="btnkq" v-if="kgflag" src="https://api.ccttiot.com/smartmeter/img/static/uIiHf1LAHhLyVZODV9Pc" mode=""> </image> <image @click="btngb" v-else src="https://api.ccttiot.com/smartmeter/img/static/upKZD5SgfKHZDCxcPSCl" mode=""> </image> 手动浇水 </view> <view class="shengyu"> 剩余:{{ sdminutes ? sdminutes + ':' : '' }}{{ sdseconds ? sdseconds : '--' }} </view> </view> --> </view> <view class="deviceweek"> <view class="weeklist"> <view class="kg" v-if="ver_data.p_set0[3] == 0"> OFF </view> <view class="kg" style="color: #48893B;" v-else> ON </view> <view class="weekday"> P1 </view> <view class=""> {{ver_data.p_set0[0] == undefined ? '' : ver_data.p_set0[0] + ':'}}{{ver_data.p_set0[1] == undefined ? '' : ver_data.p_set0[1]}} </view> <view class="img"> <image v-if="ver_data.p_set0 && ver_data.p_set0[0] == xctimesj.slice(0,2) && ver_data.p_set0[1] == xctimesj.slice(-2)" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode=""> </image> </view> </view> <view class="weeklist"> <view class="kg" v-if="ver_data.p_set1[3] == 0"> OFF </view> <view class="kg" style="color: #48893B;" v-else> ON </view> <view class="weekday"> P2 </view> <view class=""> {{ver_data.p_set1[0] == undefined ? '' : ver_data.p_set1[0] + ':'}}{{ver_data.p_set1[1] == undefined ? '' : ver_data.p_set1[1]}} </view> <view class="img"> <image v-if="ver_data.p_set1 && ver_data.p_set1[0] == xctimesj.slice(0,2) && ver_data.p_set1[1] == xctimesj.slice(-2)" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode=""> </image> </view> </view> <view class="weeklist"> <view class="kg" v-if="ver_data.p_set2[3] == 0"> OFF </view> <view class="kg" style="color: #48893B;" v-else> ON </view> <view class="weekday"> P3 </view> <view class=""> {{ver_data.p_set2[0] == undefined ? '' : ver_data.p_set2[0] + ':'}}{{ver_data.p_set2[1] == undefined ? '' : ver_data.p_set2[1]}} </view> <view class="img"> <image v-if="ver_data.p_set2 && ver_data.p_set2[0] == xctimesj.slice(0,2) && ver_data.p_set2[1] == xctimesj.slice(-2)" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode=""> </image> </view> </view> <view class="weeklist"> <view class="kg" v-if="ver_data.p_set3[3] == 0"> OFF </view> <view class="kg" style="color: #48893B;" v-else> ON </view> <view class="weekday"> P4 </view> <view class=""> {{ver_data.p_set3[0] == undefined ? '' : ver_data.p_set3[0] + ':'}}{{ver_data.p_set3[1] == undefined ? '' : ver_data.p_set3[1]}} </view> <view class="img"> <image v-if="ver_data.p_set3 && ver_data.p_set3[0] == xctimesj.slice(0,2) && ver_data.p_set3[1] == xctimesj.slice(-2)" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode=""> </image> </view> </view> <view class="weeklist"> <view class="kg" v-if="ver_data.p_set4[3] == 0"> OFF </view> <view class="kg" style="color: #48893B;" v-else> ON </view> <view class="weekday"> P5 </view> <view class=""> {{ver_data.p_set4[0] == undefined ? '' : ver_data.p_set4[0] + ':'}}{{ver_data.p_set4[1] == undefined ? '' : ver_data.p_set4[1]}} </view> <view class="img"> <image v-if="ver_data.p_set4 && ver_data.p_set4[0] == xctimesj.slice(0,2) && ver_data.p_set4[1] == xctimesj.slice(-2)" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode=""> </image> </view> </view> <view class="weeklist"> <view class="kg" v-if="ver_data.p_set5[3] == 0"> OFF </view> <view class="kg" style="color: #48893B;" v-else> ON </view> <view class="weekday"> P6 </view> <view class=""> {{ver_data.p_set5[0] == undefined ? '' : ver_data.p_set5[0] + ':'}}{{ver_data.p_set5[1] == undefined ? '' : ver_data.p_set5[1]}} </view> <view class="img"> <image v-if="ver_data.p_set5 && ver_data.p_set5[0] == xctimesj.slice(0,2) && ver_data.p_set5[1] == xctimesj.slice(-2)" src="https://api.ccttiot.com/smartmeter/img/static/u9iZpd6bW6bUsUay4uvH" mode=""> </image> </view> </view> </view> </view> <!-- 开关选择 --> <view class="switchbox"> <view class="switch_he"> <image src="https://api.ccttiot.com/smartmeter/img/static/u7NwkNOoQYYsvHVMkDlu" mode=""></image> <view class="yushui"> 雨水感应 <u-switch v-if="yschecked" v-model="one" @change="btnyushui" inactive-color="#eee" active-color="#eee" size="40"></u-switch> <u-switch v-else v-model="ones" @change="btnyushuis" active-color="#7FAD76" inactive-color="#7FAD76" size="40"></u-switch> </view> </view> <view class="switch_he"> <image src="https://api.ccttiot.com/smartmeter/img/static/u7kd92ocUgDN052nhp4R" mode=""></image> <view class="yushui"> 儿童锁 <u-switch v-if="etchecked" v-model="two" @change="btnertong" inactive-color="#eee" active-color="#eee" size="40"></u-switch> <u-switch v-else v-model="twos" @change="btnertongs" active-color="#7FAD76" inactive-color="#7FAD76" size="40"></u-switch> </view> </view> </view> <view class="" style="display: flex;justify-content: space-between;"> <!-- 定时 --> <view class="dingshi_he" @click="btntime"> <view class="naoz"> <image src="https://api.ccttiot.com/smartmeter/img/static/uJPgzMejk9gaogWnCO9M" mode=""></image> 6组 </view> <view class="dstime"> 定时管理 <image src="https://api.ccttiot.com/smartmeter/img/static/uagx3wGa7RYvqKqoSymy" mode=""> </image> </view> </view> <!-- 手动浇水 --> <view class="dingshi_he"> <view class="naoz" style="font-weight: 400;font-size: 26rpx;align-items: center;"> <image style="width: 170rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uVYXvo4F6U6fJ5fP27BT" mode="aspectFill"></image>{{ sdminutes ? sdminutes + ':' : '' }}{{ sdseconds ? sdseconds : '' }} </view> <view class="dstime"> 手动浇水 <u-switch v-if="kgflag" v-model="jskeds" @change="btngb" inactive-color="#eee" active-color="#eee" size="40"></u-switch> <u-switch v-else v-model="jsked" @change="btnkq" active-color="#7FAD76" inactive-color="#7FAD76" size="40"></u-switch> </view> </view> </view> <!-- 浇水日志 --> <view class="wateringlogbox" @click="btnjs"> <view class="wateringlogtop"> <image src="https://api.ccttiot.com/smartmeter/img/static/uGh3pRM7mMRSHdmvtzv3" mode=""></image> 浇水日志 </view> <view class="wateringlogbd"> <view class="lt"> <view class="">距离下次:{{xctime}}</view> <view class="">下次浇水时长:{{xctimesc}}</view> <view class="">上次浇水:{{sctimejs}}</view> </view> <view class="rt"> <image src="https://api.ccttiot.com/smartmeter/img/static/uagx3wGa7RYvqKqoSymy" mode=""></image> </view> </view> </view> </view> <!-- 切换设备 --> <view class="tabsb" v-if="xuanzeflag"> <view class="sblist"> <view class="sbist_val" v-for="(item,index) in devicelist" :key="index" @click="btnactive(item.deviceId,index)"> <view class="lt"> <view class="">{{item.deviceName}}</view> <!-- <view class="" style="margin-top: 14rpx;">型号:{{item.model}}</view> --> <view class="" style="margin-top: 14rpx;">MAC:{{item.mac}}</view> </view> <view class="rt"> <image src="https://api.ccttiot.com/smartmeter/img/static/uVKucPVDjxjaCDCpFKvw" mode=""></image> </view> </view> </view> <view class="qdan" @click="btnaddsb"> 添加新设备 </view> </view> <view class="mask" v-if="xuanzeflag"></view> <!-- 手动浇水 --> <view class="manualjs" v-if="sdjsflag"> <view class="toptit"> 选择浇水时长 </view> <view class="container" @click="btnshowjs"> <view class="">{{minute}}分</view> <text>:</text> <view class="">{{second}}秒</view> </view> <view class="anniu"> <view class="qx" @click="btnqx"> 取消 </view> <view class="qd" @click="btnqd"> 确定 </view> </view> </view> <view class="manualmask" v-if="sdjsflag"></view> <!-- 选择浇水时间--> <u-picker v-model="showjs" mode="time" :default-time="00" :params="params" @confirm="confirm"></u-picker> <tab-bar :indexs='0'></tab-bar> </view> </template> <script> var xBlufi = require("@/components/blufi/xBlufi.js") export default { data() { return { one: false, ones: true, two: false, twos: true, jsked:true, jskeds:false, yschecked: true, etchecked: true, kgflag: true, activeshu: 0, xuanzeflag: false, selectedMinute: '1', selectedSecond: '1', sdjsflag: false, showjs: false, params: { year: false, month: false, day: false, hour: false, minute: true, second: true }, minute: '--', second: '--', devicesList: [], deviceId: '', name: '', mac: '', jstime: '', ver_data: {}, vardataflag:1, showobj: {}, jstimeobj:{}, xctime: '--', sctimejs: '--', xctimesc: '--', xctimesj: '', sdminutes: '', sdseconds: '', datalist: '', devicelist:[], shebid:'', user:{}, lastChar:'', timer:'', bjflag:true, userobj:{}, devicesarr:[], intervalId: null, imgflag:true, ver:'' } }, // 分享到好友(会话) onShareAppMessage: function() { return { title: '绿小能', path: '/pages/index/index' } }, // 分享到朋友圈 onShareTimeline: function() { return { title: '绿小能', query: '', path: '/pages/index/index' } }, onLoad() { wx.openBluetoothAdapter({ success: function (res) { console.log('蓝牙适配器初始化成功'); }, fail: function (err) { console.error('蓝牙适配器初始化失败,可能是因为没有权限', err); uni.showToast({ title: '蓝牙适配器初始化失败,可能是因为没有权限', icon: 'none', duration:2000 }) } }) this.vardataflag = 1 xBlufi.initXBlufi(1) let that = this xBlufi.listenDeviceMsgEvent(true, that.funListenDeviceMsgEvent) xBlufi.notifyStartDiscoverBle({ 'isStart': true }) }, onShow() { // 请求个人信息 this.getinfo() this.getshuju() // 页面加载时启动定时器 xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent) }, mounted() { }, onHide() { // 页面隐藏时清除定时器 this.clearTimer() }, onUnload() { // 页面卸载时清除定时器 this.clearTimer() }, methods: { // 点击进行设备录入 btnluru(){ this.datalist = '' this.mac = '' this.ver_data = {} uni.reLaunch({ url:'/pages/myorder/index' }) }, // 点击选择时间 btnshowjs() { this.showjs = true }, // 补零函数 formattedTime(minutes, seconds) { // 将数字转换为字符串并补零 const formattedMinutes = String(minutes).padStart(2, '0') const formattedSeconds = String(seconds).padStart(2, '0') // 返回格式化后的时间字符串 console.log(`${formattedMinutes}:${formattedSeconds}`,'111111111') return `${formattedMinutes}:${formattedSeconds}` }, // 静默登录 jmlogin() { let taht = this wx.login({ success(res) { if (res.code) { let data = { jsCode: res.code, } taht.$u.post(`/loginByopenid?jsCode=${res.code}`, data).then(res => { if (res.code == 200) { taht.getinfo() uni.setStorageSync('token', res.token) }else{ uni.showModal({ title: '提示', content: '您还未登录,是否前去登录?', success: function (res) { if (res.confirm) { uni.navigateTo({ url:'/pages/login/login' }) } else if (res.cancel) { } } }) } }) } } }) }, // 获取用户信息 getinfo() { this.$u.get(`/appVerify/profile`).then((res) => { if (res.code == 200) { this.userobj = res.data // 根据用户id获取当前用户 this.getlist() }else if(res.code == 401){ this.jmlogin() } }) }, // 获取设备列表 getlist(){ this.$u.get(`/app/getDeviceInfoByUser?userId=${this.userobj.userId}`).then((res) => { if (res.code == 200) { if(res.data.length > 0 || res.data != ''){ this.bjflag = false this.devicelist = res.data this.mac = res.data[0].mac this.deviceId = res.data[0].mac.match(/.{2}/g).reverse().join(':') this.user = res.data[0] this.shebid = res.data[0].deviceId let that = this }else{ this.bjflag = true } } }) }, // 点击连接蓝牙函数 btnlj() { console.log("进入111蓝牙连接") if (this.vardataflag != 3) { this.vardataflag = 2 let that = this if (that.deviceId != '') { let systemInfo = uni.getSystemInfoSync() if (systemInfo.platform == 'android') { console.log("进入这里是IOS") xBlufi.notifyStartDiscoverBle({ 'isStart': false }) console.log("进入蓝牙连接", that.deviceId) console.log("进入that.name", that.name) xBlufi.notifyConnectBle({ isStart: true, deviceId: that.deviceId, name: that.name }) } else if (systemInfo.platform == 'ios') { // 当前设备是 iOS console.log("进入这里是IOS") that.findDevice() //使用递归函数不断去匹配 } } } }, // ios递归函数匹配 findDevice() { // 使用 find 方法查找匹配的设备 const matchedDevice = this.devicesarr.find(device => { console.log(device.name, this.mac, '111') console.log("IOSMAC", device) return device.name.slice(-12) == this.mac.slice(-12) }) if (matchedDevice) { // 找到匹配的设备 xBlufi.notifyStartDiscoverBle({ 'isStart': false }) xBlufi.notifyConnectBle({ isStart: true, deviceId: matchedDevice.deviceId, name: matchedDevice.name }) this.deviceId = matchedDevice.deviceId this.name = matchedDevice.name console.log(this.deviceId, '11221') } else { console.log("未找到匹配的设备,继续查找...") setTimeout(this.findDevice.bind(this), 1000) // 使用 bind 保持 this 上下文 } }, // 雨水感应开启 btnyushui() { this.one = false this.ones = true if(this.vardataflag != 3){ uni.showToast({ title: '设备未连接', icon: 'none', duration:2000 }) }else{ uni.showLoading({ title: '开启中...' }) setTimeout(() => { this.yschecked = false xBlufi.notifySendCustomData({ customData: '11yudi' }) uni.hideLoading() }, 1500) } }, // 雨水感应关闭 btnyushuis() { this.one = false this.ones = true if(this.vardataflag != 3){ uni.showToast({ title: '设备未连接', icon: 'none', duration:2000 }) }else{ uni.showLoading({ title: '关闭中...' }) setTimeout(() => { this.yschecked = true xBlufi.notifySendCustomData({ customData: '11unyudi' }) uni.hideLoading() }, 1500) } }, // 点击儿童锁开启 btnertong() { this.two = false this.twos = true if(this.vardataflag != 3){ uni.showToast({ title: '设备未连接', icon: 'none', duration:2000 }) }else{ uni.showLoading({ title: '开启中...' }) setTimeout(() => { this.etchecked = false xBlufi.notifySendCustomData({ customData: '11lock' }) uni.hideLoading() }, 1500) } }, // 点击儿童锁关闭 btnertongs() { this.two = false this.twos = true if(this.vardataflag != 3){ uni.showToast({ title: '设备未连接', icon: 'none', duration:2000 }) }else{ uni.showLoading({ title: '关闭中...' }) setTimeout(() => { this.etchecked = true xBlufi.notifySendCustomData({ customData: '11unlock' }) uni.hideLoading() }, 1500) } }, // 点击添加设备 btnaddsb() { //跳转后清空数据 重新进行连接 this.vardataflag = 1 this.ver_data = {} this.datalist = '' uni.navigateTo({ url: '/page_user/lanya' }) }, // 点击选择浇水时间 confirm(e) { this.minute = e.minute this.second = e.second this.jstime = Number(e.second) + Number(e.minute * 60) }, // 点击跳转到定时页面 btntime() { if(this.vardataflag != 3){ uni.showToast({ title: '蓝牙未连接', icon: 'none', duration: 2000 }) }else{ uni.navigateTo({ url: '/page_user/dingshi?list=' + JSON.stringify(this.ver_data) }) } }, // 点击取消手动浇水 btnqx() { this.sdjsflag = false this.sdminutes = '' this.sdseconds = '' this.kgflag = true this.jsked = true this.jskeds = false }, // 确定选择时间 btnqd() { if (this.minute == '--' || this.second == '--') { uni.showToast({ title: '请选择浇水时长', icon: 'none', duration: 3000 }) } else { uni.showLoading({ title: '开启中...' }) setTimeout(() => { xBlufi.notifySendCustomData({ customData: "11time@" + this.jstime + '@' }) uni.hideLoading() this.startTimer(this.jstime) this.sdjsflag = false }, 1500) } }, // 手动浇水定时器 startTimer(totalSeconds) { let remainingSeconds = totalSeconds const sdminutes = '' const sdseconds = '' this.timer = setInterval(() => { // 计算分钟和秒 const minutes = Math.floor(remainingSeconds / 60).toString() const secs = (remainingSeconds % 60).toString() // 格式化秒和分钟,确保是两位数 this.sdseconds = secs.padStart(2, '0') this.sdminutes = (minutes > 0 ? minutes : '').padStart(2, '0') // 如果分钟为0,则不显示分钟 // 更新剩余秒数 remainingSeconds-- // 如果剩余秒数为0,则停止定时器 if (remainingSeconds <= 0) { clearInterval(this.timer) this.btnkq() this.sdminutes = '' this.sdseconds = '' } }, 1000) }, // 关闭手动浇水 btnkq() { console.log('关闭') if(this.vardataflag != 3){ uni.showToast({ title: '设备未连接', icon: 'none', duration:2000 }) }else{ uni.showLoading({ title: '关闭中...' }) setTimeout(() => { xBlufi.notifySendCustomData({ customData: "11close" }) clearInterval(this.timer) this.sdminutes = '' this.sdseconds = '' this.kgflag = true this.jsked = true this.jskeds = false uni.hideLoading() }, 1500) } }, // 开启手动浇水 btngb() { console.log('开启') if(this.vardataflag != 3){ uni.showToast({ title: '设备未连接', icon: 'none', duration:2000 }) this.jsked = true this.jskeds = false }else{ this.sdjsflag = true this.kgflag = false } }, // 跳转到设置 btnsz() { xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent) uni.navigateTo({ url: '/page_user/upload?deviceid=' + this.shebid + '&ver=' + this.ver }) }, // 选择设备 btnactive(deviceId,index) { this.shebid = deviceId this.btnxuanze() }, // 选择确定设备 shebid btnxuanze() { this.$u.put(`/app/toggleDevice?userId=${this.userobj.userId}&deviceId=${this.shebid}`).then(res => { if(res.code == 200){ wx.closeBLEConnection({ deviceId: this.mac, }) xBlufi.notifyConnectBle({ isStart: false, deviceId: this.deviceId, name: this.name }) uni.showToast({ title: res.msg, icon: 'success', duration: 2000 }) this.datalist = '' this.mac = '' this.ver_data = {} this.name = '' this.deviceId = '' this.xuanzeflag = false this.vardataflag = 1 this.sdseconds = '' this.sdminutes = '' this.kgflag = true this.jsked = true this.jskeds = false this.getshebxq() }else{ uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) }, // 获取设备信息 getshebxq(){ this.$u.get(`/app/getDeviceInfo/${this.shebid}`).then(res => { if(res.code == 200){ this.mac = res.data.mac this.deviceId = res.data.mac.match(/.{2}/g).reverse().join(':') this.user = res.data } }) }, // 点击切换设备 btnksxz() { if (this.xuanzeflag == true) { this.xuanzeflag = false } else { this.xuanzeflag = true } }, //跳转到浇水日志页 btnjs() { uni.showToast({ title: '此功能暂未开通', icon: 'none', duration:2000 }) // uni.navigateTo({ // url: '/page_user/jiaoshui' // }) }, // 获取附近蓝牙设备列表 funListenDeviceMsgEvent: function(options) { switch (options.type) { case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: if (!options.result) { this.vardataflag = 1 } break; case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS: if (options.result) { this.devicesarr = options.data } break; case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED: console.log("连接回调:" + JSON.stringify(options)) if (options.result == true){ this.datalist = '1' this.vardataflag = 3 xBlufi.notifyInitBleEsp32({ deviceId: this.deviceId }) }else{ this.vardataflag = 1 } break case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA: console.log("1收到设备发来的自定义数据结果:", options.data,options.data.length) this.datalist = options.data.slice(0, -1) + ";" this.vardataflag = 3 this.getchuli() break case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START: if (!options.result) { console.log('蓝牙未开启') return } break } }, // 每隔一时间发送一次获取数据 getshuju() { const that = this that.intervalId = setInterval(() => { if (that.vardataflag == 3) { xBlufi.notifySendCustomData({ customData: "11get" }) } console.log("定时器一段时间执行一次") }, 10000) }, // 清除定时器 clearTimer() { if (this.intervalId) { clearInterval(this.intervalId); this.intervalId = null; // 重置定时器 ID console.log("定时器已清除"); } }, // 处理从设备接收数据 getchuli() { const inputString = this.datalist const [ver, restOfString] = inputString.split('@') this.ver = ver || '' console.log(this.ver, restOfString, 'ververver') const processedString = restOfString const pairs = processedString.split(';') console.log(pairs,'10101010'); const showObject = {} const pSetObjects = {} // 解析字符串 pairs.forEach(pair => { const [key, value] = pair.split(':') if (key === 'show') { showObject.showArray = value.split(',').map(Number) } else if (key.startsWith('p_set')) { pSetObjects[key] = value.split(',').map(Number) } }) this.ver_data = pSetObjects // 六个浇水时间段 this.jstimeobj = pSetObjects this.showobj = showObject// 雨滴,锁,等是否开启 // 设置开关状态 this.yschecked = this.showobj.showArray[1] !== 1 this.etchecked = this.showobj.showArray[0] !== 1 // 计算浇水时间 const calculateTimeDifference = (date1, date2) => { const diffMs = Math.abs(date1 - date2) const diffMinutes = Math.floor(diffMs / (1000 * 60)) const diffHours = Math.floor(diffMinutes / 60) const remainingMinutes = diffMinutes % 60 return { hours: diffHours, minutes: remainingMinutes } } const formatTime = (seconds) => { const minutes = Math.floor(seconds / 60) const remainingSeconds = seconds % 60 return `${minutes}分${remainingSeconds}秒` } const getTimeFromArray = (timeArray) => { const [hour, minute, , second] = timeArray const date = new Date() date.setHours(hour, minute, second, 0) // 毫秒设为0 return date } let nextTime = null let nextTimeDiff = null let nextWaterDuration = null let prevTime = null for (const key in this.ver_data) { if (this.ver_data.hasOwnProperty(key) && this.ver_data[key][3] === 1) { const timeArray = this.ver_data[key] const timeDate = getTimeFromArray(timeArray) const diff = calculateTimeDifference(timeDate, new Date()) if (timeDate > new Date()) { if (!nextTime || (diff.hours * 60 + diff.minutes < (nextTimeDiff?.hours || 0) * 60 + (nextTimeDiff?.minutes || 0))) { nextTimeDiff = diff nextTime = timeDate nextWaterDuration = formatTime(timeArray[2]) } } else if (!prevTime || timeDate > prevTime) { prevTime = timeDate; } } } // 输出结果 this.xctime = nextTime ? `${nextTimeDiff.hours}时${nextTimeDiff.minutes}分` : '无距离下次浇水时间' this.xctimesc = nextWaterDuration || '未知' this.sctimejs = prevTime ? prevTime.toTimeString().slice(0, 5) : '无上次浇水时间' this.xctimesj = nextTime ? nextTime.toTimeString().slice(0, 5) : '无下次浇水时间' console.log('下次浇水时间', this.xctimesj, '距离下次浇水时间', this.xctime, '上次浇水时间', this.sctimejs) } } } </script> <style lang="scss"> .rotated-image { transform: rotate(180deg); /* 旋转 180 度 */ transition: transform 1s ease; } .container { display: flex; align-items: center; justify-content: center; margin-top: 22rpx; view { width: 242rpx; height: 208rpx; background: #F0F0F0; border-radius: 24rpx 24rpx 24rpx 24rpx; text-align: center; line-height: 208rpx; font-weight: 600; font-size: 44rpx; color: #3D3D3D; } text { font-size: 80rpx; margin-left: 46rpx; margin-right: 46rpx; } } .anniu { display: flex; justify-content: space-between; margin-top: 58rpx; .qx { width: 278rpx; height: 80rpx; border-radius: 10rpx 10rpx 10rpx 10rpx; border: 2rpx solid #7FAD76; font-size: 36rpx; color: #7FAD76; font-weight: 600; line-height: 80rpx; text-align: center; } .qd { width: 278rpx; height: 80rpx; background: #7FAD76; border-radius: 10rpx 10rpx 10rpx 10rpx; font-size: 36rpx; color: #fff; font-weight: 600; line-height: 80rpx; text-align: center; } } .selected-time { margin-top: 20px; font-size: 20px; } #activebor { border: 1px solid #48893B; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); /* 初始位置稍微在上方 */ } to { opacity: 1; transform: translateY(0); /* 最终位置 */ } } .mask{ width: 100%; height: 100vh; background: #3D3D3D; opacity: 0.2; position: fixed; top: 20%; left: 0; z-index: 1; } .manualmask { width: 100%; height: 100vh; background: #3D3D3D; opacity: 0.2; position: fixed; top: 0; left: 0; z-index: 99; } .manualjs { width: 678rpx; max-height: 610rpx; background: #fff; border-radius: 24rpx 24rpx 24rpx 24rpx; position: fixed; top: 538rpx; left: 50%; transform: translateX(-50%); z-index: 100; padding: 42rpx 44rpx; box-sizing: border-box; .toptit { font-size: 36rpx; color: #3D3D3D; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } } .page { padding: 0 40rpx; box-sizing: border-box; .tabsb { width: 750rpx; max-height: 90vh; background: #FFFFFF; position: fixed; top: 270rpx; left: 0; padding: 0 40rpx; padding-bottom: 60rpx !important; box-sizing: border-box; border-radius: 0rpx 0rpx 50rpx 50rpx; z-index: 2; padding-top: 48rpx; box-sizing: border-box; animation: fadeInDown .5s ease-out forwards; .qdan { width: 100%; height: 102rpx; font-size: 48rpx; color: #FFFFFF; font-weight: 500; line-height: 102rpx; text-align: center; background-color: #48893B; border-radius: 20rpx; margin-top: 40rpx; } .sblist { width: 100%; max-height: 68vh; overflow: scroll; .sbist_val { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 30rpx; margin-bottom: 28rpx; box-sizing: border-box; background: #F7F7F7; border-radius: 20rpx 20rpx 20rpx 20rpx; border: 1px solid transparent; .lt { font-size: 36rpx; color: #3D3D3D; font-weight: 600; } .rt { image { width: 124rpx; height: 124rpx; } } } } } .sbmask { width: 100%; height: 100vh; background-color: rgb(238, 238, 238); position: fixed; top: 400rpx; left: 0; opacity: .5; } .wusb { margin-top: 514rpx; text-align: center; text { font-size: 28rpx; color: #737B80; } view { width: 212rpx; height: 76rpx; background: #48893B; border-radius: 38rpx 38rpx 38rpx 38rpx; border-radius: 50rpx; font-size: 28rpx; color: #FFFFFF; text-align: center; line-height: 76rpx; margin: auto; margin-top: 50rpx; } } .wateringlogbox { width: 100%; height: 244rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3); filter: blur(0px); border-radius: 20rpx; margin-top: 20rpx; padding: 30rpx; box-sizing: border-box; .wateringlogbd { display: flex; justify-content: space-between; .lt { view { font-size: 28rpx; color: #50565A; margin-top: 10rpx; } } .rt { image { width: 114rpx; height: 114rpx; } } } .wateringlogtop { display: flex; align-items: center; font-size: 32rpx; color: #3D3D3D; font-weight: 600; image { width: 40rpx; height: 40rpx; margin-right: 14rpx; } } } .dingshi_he { margin-top: 24rpx; width: 304rpx; height: 194rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3); filter: blur(0px); border-radius: 20rpx; padding: 26rpx; box-sizing: border-box; .naoz { font-size: 40rpx; color: #3D3D3D; font-weight: 600; display: flex; justify-content: space-between; image { width: 78rpx; height: 78rpx; } } .dstime { margin-top: 14rpx; display: flex; align-items: center; width: 100%; justify-content: space-between; image { width: 52rpx; height: 52rpx; } } } .switchbox { margin-top: 24rpx; display: flex; justify-content: space-between; .switch_he { width: 304rpx; height: 194rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3); filter: blur(0px); border-radius: 20rpx; padding: 26rpx; box-sizing: border-box; .yushui { width: 100%; font-size: 28rpx; color: #3D3D3D; display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; } image { width: 78rpx; height: 78rpx; } } } .devicebox { width: 100%; max-height: 320rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(128, 128, 128, 0.3); filter: blur(0px); margin-top: 22rpx; border-radius: 20rpx; padding: 30rpx; box-sizing: border-box; .deviceweek { display: flex; justify-content: space-between; margin-top: 34rpx; .weeklist { text-align: center; .kg { font-size: 24rpx; color: #999999; font-weight: 600; } .weekday { font-size: 36rpx; color: #3D3D3D; font-weight: 600; margin-top: 4rpx; } .img { text-align: center; image { width: 12rpx; height: 12rpx; } } } } .devicetop { display: flex; justify-content: space-between; align-items: center; .devicert { text-align: right; .shoudong { display: flex; image { width: 64rpx; height: 32rpx; margin-right: 8rpx; } font-size: 24rpx; color: #3D3D3D; } .shengyu { font-size: 24rpx; color: #3D3D3D; margin-top: 6rpx; } } .devicelt { display: flex; .xinghao { font-size: 24rpx; color: #3D3D3D; .one { font-size: 28rpx !important; color: #3D3D3D; font-weight: 600 !important; margin-top: 6rpx; } } image { width: 74rpx; height: 80rpx; margin-right: 32rpx; } } } } .selectbox { width: 100%; margin-top: 22rpx; display: flex; justify-content: space-between; align-items: center; .shebeiname { font-size: 36rpx; color: #73787B; font-weight: 600; display: flex; align-items: center; .lj{ color: red; margin-left: 10rpx; font-weight: 400; font-size: 28rpx; border: 1px solid red; padding: 4rpx; box-sizing: border-box; border-radius: 10rpx; } text { display: inline-block; width: 14rpx; height: 14rpx; background: #15C55D; border-radius: 50%; box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 255, 102, 0.9), 0rpx 0rpx 30rpx 0rpx rgba(69, 255, 143, 0.9); margin-left: 22rpx; } } .shebeiadd { image { width: 214rpx; height: 64rpx; } } .selectname { font-size: 48rpx; color: #3D3D3D; font-weight: 600; z-index: 2; image { width: 32rpx; height: 26rpx; margin-left: 14rpx; } } .selectnames { font-size: 28rpx; color: #3D3D3D; border: 1px solid; padding:0 20rpx; box-sizing: border-box; border-radius: 10rpx; background-color: #7FAD76; color: #fff; height: 60rpx; line-height: 60rpx; image { width: 32rpx; height: 26rpx; margin-left: 14rpx; } } .selectshezhi { image { width: 60rpx; height: 66rpx; } } } .bjimg { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; } .title { box-sizing: border-box; image { width: 260rpx; height: 60rpx; } } } </style>