Sprinkler-app/page_user/dingshi.vue

<template>
	<view>
		<u-navbar :is-back="true" title='定时管理' title-color="#000" :border-bottom="false" :background="bgc" 
			id="navbar">
		</u-navbar>
        <image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/urqUoIyCCEBykZ2oG8eO" mode=""></image>
		 <view class="" v-if="list.length > 0 || list != null">
		 	<view class="list">
		 	    <view class="list_val" v-for="(values, key, index) in list" :key="key">  
		 	      <view class="lt" @click="btnitem(key,index,values)">  
		 	        <view class="one">{{ formattedTime(values[0], values[1]) }}</view>  
		 	        <view class="two">P{{ index + 1 }} <text></text> {{ formatTime(values[2]) }}</view>  
		 	      </view>  
		 	      <view class="rt">  
		 	        <u-switch v-model="values[3]" @change="btnchange(key,index,values)" active-color="#48893B" inactive-color="#BDBCBC"></u-switch>  
		 	      </view>  
		 	    </view>  
		 	  </view>  
		 	
		 	<!-- 设置浇水时间弹窗 -->
		 	<view class="jiaoshui" v-if="timeflag">
		 		<view class="top">
		 			设置浇水
		 		</view>
		 		<view class="ts">
		 			距离下次浇水时间还有{{xctime}}
		 		</view>
		 		<view class="shifen" @click="show = true">
		 			<text>{{hour}}时</text> <text>{{minutekq}}分</text>
		 		</view>
		 		<view class="jssc">
		 			浇水时长
		 		</view>
		 		<view class="shifen" @click="shows = true">
		 			<text>{{minute}}分</text> <text>{{second}}秒</text>
		 		</view>
		 		<view class="anniu">
		 			<view class="qx" @click="btnqx">
		 				取消
		 			</view>
		 			<view class="qd" @click="btnqd">
		 				确定
		 			</view>
		 		</view>
		 	</view>
		 	<view class="mask" v-if="timeflag"></view>
		 	<!-- 定时时间 -->
		 	<u-picker v-model="show" mode="time" :params="paramss" @confirm="confirm"></u-picker>
		 	<!-- 定时时长 -->
		 	<u-picker v-model="shows" mode="time" :params="params" @confirm="confirms"></u-picker>
		 	
		 	<view class="mask" style="z-index: 9999;" v-if="kgflag"></view>
		 </view>
		<view class="" style="width: 100%;padding-top: 80rpx;text-align: center;color: #000;font-size: 36rpx;">
			没有更多定时浇水啦...
		</view>
	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js") 
	export default {
			data() {
				return {
					bgc: {
						backgroundColor: "#fff",
					},
					active:1,
					flag:false,
					checked:false,
					timeflag:false,
					show: false,
					params: {
						year: false,
						month: false,
						day: false,
						hour: false,
						minute: true,
						second: true,
					},
					shows: false,
					paramss: {
						year: false,
						month: false,
						day: false,
						hour: true,
						minute: true,
						second: false,
					},
					minute:'--',
					second:'--',
					hour:'--',
					minutekq:'--',
					list:{},
					checkedStatus: {},
					deviceindex:'',
					devicemiao:'',
					deviceflag:'',
					devicehour:'',
					deviceminute:'',
					kgflag:false,
					xctime:''
				}
			},
			// 分享到好友（会话）
			onShareAppMessage: function() {
				return {
					title: '绿小能',
					path: '/pages/index/index'
				}
			},
			// 分享到朋友圈  
			onShareTimeline: function() {
				return {
					title: '绿小能',
					query: '',
					path: '/pages/index/index'
				}
			},
			onLoad(option) {
				xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
				if(option.list){ //判断有无数据 有数据直接拿 无数据则发送命令获取数据
					this.list = JSON.parse(option.list)
					for (let key in this.list) {  
					    if (this.list.hasOwnProperty(key)) {  
					        // 获取当前数组  
					        let arr = this.list[key];  
					        // 判断数组的最后一个元素，并进行替换  
					        if (arr[arr.length - 1] === 0) {  
					            arr[arr.length - 1] = false;  
					        } else if (arr[arr.length - 1] === 1) {  
					            arr[arr.length - 1] = true;  
					        }  
					    }  
					}  
					console.log(this.list)
				}else{
					xBlufi.notifySendCustomData({
						customData: "11get"
					})
				}
			},
			onShow() {
				
			},
			methods:{
				// 点击开关是否开启
				btnchange(key,index,values){
					this.kgflag = true
					this.btnitem(key,index,values)
					this.btnqx()
					this.deviceindex = index
					this.devicehour = values[0]
					this.deviceminute = values[1]
					this.devicemiao = values[2]
					if (this.list.hasOwnProperty(key)) {  
					    const array = this.list[key]  
					    const lastIndex = array.length - 1  
					    const lastElement = array[lastIndex] 
						const lastElements = array[lastIndex] 
					    array[lastIndex] = !lastElement
						if (lastElements) {
						  this.deviceflag = 0
						} else {  
						  this.deviceflag = 1
						}  
					}
					let cucun = '11num' + this.deviceindex + '@' + this.devicehour + '@' + this.deviceminute + '@' + this.devicemiao + '@' + this.deviceflag + '@'
					xBlufi.notifySendCustomData({
						customData: cucun
					}) 
					setTimeout(()=>{
						this.kgflag = false
					},1000)
				}, 
				
				// 点击设置定时时间
				btnitem(key,index,values){
					this.deviceindex = index
					this.timeflag = true
					this.hour = values[0]
					this.minutekq = values[1]
					const totalSeconds = values[2]  
					const minutes = Math.floor(totalSeconds / 60) 
					const seconds = totalSeconds % 60 
					const formattedMinutes = minutes < 10 ? '0' + minutes : minutes.toString()  
					const formattedSeconds = seconds < 10 ? '0' + seconds : seconds.toString()  
					this.minute = formattedMinutes  
					this.second = formattedSeconds
					if (this.list.hasOwnProperty(key)) {   
					    const array = this.list[key] 
					    const lastElement = array[array.length - 1]  
					    if (lastElement) {  
					      this.deviceflag = 1
					    } else {  
					      this.deviceflag = 0
					    }  
					  }
				},
				
				formattedTime(minutes, seconds) {  
				  // 将数字转换为字符串并补零  
				  const formattedMinutes = String(minutes).padStart(2, '0');  
				  const formattedSeconds = String(seconds).padStart(2, '0');  
				  // 返回格式化后的时间字符串  
				  return `${formattedMinutes}:${formattedSeconds}`;  
				},
				  
				formatTime(seconds) {  
				  const minutes = Math.floor(seconds / 60);  
				  const remainingSeconds = seconds % 60;  
				  return `${minutes}分${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}秒`;  
				},

				// 取消选择设置定时时间
				btnqx(){
					this.timeflag = false
					this.hour = '--'
					this.minutekq = '--'
					this.minute = '--'
					this.second  = '--'
				},
				// 确定选择设置定时时间
				btnqd(){
					this.timeflag = false
					this.hour = '--'
					this.minutekq = '--'
					this.minute = '--'
					this.second  = '--'
					let cucun = '11num' + this.deviceindex + '@' + this.devicehour + '@' + this.deviceminute + '@' + this.devicemiao + '@' + this.deviceflag + '@'
					xBlufi.notifySendCustomData({
						customData: cucun
					}) 
					setTimeout(()=> {
						xBlufi.notifySendCustomData({
							customData: "11get"
						})
					},1000)
				},
				// 定时浇水时间
				confirm(e){
					this.hour = e.hour
					this.minutekq = e.minute
					this.devicehour = e.hour
					this.deviceminute = e.minute
				},
				// 定时浇水时长
				confirms(e){
					this.minute = e.minute
					this.second = e.second
					this.devicemiao =  Number(this.minute) * 60 + Number(this.second)
					console.log(this.devicemiao)
				},
				
				funListenDeviceMsgEvent: function(options) {
					switch (options.type) {
						case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
							if (!options.result) {
								
							}
							break;
						case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
						console.log("1收到设备发来的自定义数据结果：", options.data)
							const inputString = options.data.slice(0, -1) + ";"
							console.log(inputString,'12121212100')
							const pairs = inputString.split(';') 
							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')) {  
							    const numbers = value.split(',').map(Number) 
							    pSetObjects[key] = numbers
							  }  
							})
							this.list = pSetObjects  //六个浇水时间段
 
							const ver_Data = this.list
							function secondsToMinutesAndSeconds(seconds) {  
							  const minutes = Math.floor(seconds / 60)
							  const remainingSeconds = seconds % 60
							  return `${minutes}分${remainingSeconds}秒`
							}  
							// 获取当前时间    
							const now = new Date() 
							// 辅助函数：将时间数组转换为 Date 对象    
							function timeArrayToDate(timeArray) {    
							  const [hour, minute, second] = timeArray.slice(0, 3)    
							  const date = new Date() 
							  date.setHours(hour, minute, second, 0) // 毫秒设为0    
							  return date  
							}    
							// 辅助函数：计算两个时间之间的差值（以小时和分钟表示）    
							function timeDifference(date1, date2) {    
							  const diffMs = Math.abs(date1 - date2)   
							  const diffSeconds = Math.floor(diffMs / 1000)    
							  const diffMinutes = Math.floor(diffSeconds / 60)    
							  const diffHours = Math.floor(diffMinutes / 60)   
							  const remainingMinutes = diffMinutes % 60    
							  return { hours: diffHours, minutes: remainingMinutes }    
							}    
							// 遍历 ver_Data 对象    
							let nextTimeDiff = null   
							let nextTime = null   
							let prevTimeDiff = null   
							let prevTime = null  
							let nextWaterDuration = null // 用于存储下次浇水时长  
							for (const key in ver_Data) {    
							  if (ver_Data.hasOwnProperty(key) && ver_Data[key][3] === 1) {    
							    const timeArray = ver_Data[key]    
							    const timeDate = timeArrayToDate(timeArray)    
							    // 计算与当前时间的差值    
							    const diff = timeDifference(timeDate, now)   
							    // 判断是下一次时间还是上一次时间    
							    if (timeDate > now) {    
							      if (!nextTime || diff.hours * 60 + diff.minutes < nextTimeDiff.hours * 60 + nextTimeDiff.minutes) {    
							        nextTimeDiff = diff   
							        nextTime = timeDate   
							        nextWaterDuration = secondsToMinutesAndSeconds(timeArray[2]) // 获取并转换浇水时长  
							      }    
							    } else {    
							      if (!prevTime || (now.getTime() - timeDate.getTime()) < (now.getTime() - prevTime.getTime())) {    
							        prevTimeDiff = timeDifference(now, timeDate) // 注意这里要反过来算    
							        prevTime = timeDate    
							      }    
							    }    
							  }    
							}    
							// 输出结果    
							  this.xctime = `${nextTimeDiff.hours}时${nextTimeDiff.minutes}分`
							  for (let key in this.list) {
							      if (this.list.hasOwnProperty(key)) {  
							          // 获取当前数组  
							          let arr = this.list[key]  
							          // 判断数组的最后一个元素，并进行替换  
							          if (arr[arr.length - 1] === 0) {  
							              arr[arr.length - 1] = false 
							          } else if (arr[arr.length - 1] === 1) {  
							              arr[arr.length - 1] = true
							          }  
							      }  
							  } 
							break
					    }
				    },
			}
		}
</script>

<style lang="less">
	/deep/ .u-title{
		margin-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		margin-bottom: 22rpx;
	}
	.jiaoshui{
		position: fixed;
		top: 366rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 678rpx;
		height: 800rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		z-index: 99;
		.top{
			margin-top: 42rpx;
			width: 100%;
			text-align: center;
			font-size: 44rpx;
			color: #3D3D3D;
			font-weight: 600;
		}
		.ts{
			margin-top: 30rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #808080;
			font-weight: 600;
		}
		.shifen{
			width: 512rpx;
			height: 128rpx;
			background: #F0F0F0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: auto;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			line-height: 128rpx;
			padding: 0 102rpx;
			box-sizing: border-box;
			text{
				font-size: 44rpx;
				color: #3D3D3D;
				font-weight: 600;
			}
		}
		.jssc{
			font-size: 32rpx;
			color: #808080;
			font-weight: 600;
			margin-top: 58rpx;
			margin-left: 96rpx;
		}
		.anniu{
			display: flex;
			justify-content: space-between;
			margin-top: 58rpx;
			padding: 0 44rpx;
			box-sizing: border-box;
			.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;
			}
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: .6;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 98;
	}
	.list{
		.list_val{
			width: 678rpx;
			height: 208rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 20rpx;
			padding-top: 16rpx;
			padding-left: 42rpx;
			padding-right: 42rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			.lt{
				width: 100%;
				.one{
					font-size: 72rpx;
					color: #50565A;
					font-weight: 600;
				}
				.two{
					font-size: 32rpx;
					color: #50565A;
					margin-top: 12rpx;
					text{
						display: inline-block;
						width: 1rpx;
						height: 28rpx;
						background: #3D3D3D;
						margin-left: 26rpx;
						margin-right: 26rpx;
					}
				}
			}
			.rt{
				padding-top: 70rpx;
				box-sizing: border-box;
			}
		}
	}
	page{
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
    .bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

</style>