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="pre == 'WATER'">
			<view class="list" v-if="list.length > 0 || list != null">
				<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">
					请设置浇水时间
				</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="choushuiben" v-else>
			<view class="name">
				<text>抽水泵启动时间/时：</text> <input type="text" v-model="shi"/>
			</view>
			<view class="name">
				<text>抽水泵启动时间/分：</text><input type="text" v-model="fen"/>
			</view>
			<view class="name">
				<text>抽水泵工作时长/秒：</text><input type="text" v-model="miao"/>
			</view>
			<view class="name">
				<text>抽水泵间隔时间/天：</text><input type="text" v-model="tian"/>
			</view>
			<view class="baocun" @click="btnbc">
				保存
			</view>
		</view>
		
		<view class="" v-if="pre == 'WATER'" 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: '',
				csbobj:{},
				pre:'',
				shi:'',
				fen:'',
				miao:'',
				tian:''
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '绿小能',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '绿小能',
				query: '',
				path: '/pages/index/index'
			}
		},
		onLoad(option) {
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
			xBlufi.notifySendCustomData({
				customData: "11get"
			})
			if (option.list.length > 0) { //判断有无数据 有数据直接拿 无数据则发送命令获取数据
			this.pre = option.pre
				if (option.pre == 'WATER') {
					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 {
					this.csbobj = JSON.parse(option.list)
					this.shi = this.csbobj.hour
					this.fen = this.csbobj.minute
					this.miao = this.csbobj.second
					this.tian = this.csbobj.day
				}
			} 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)
			},
			btnbc(){
				if(this.shi >= 24){
					uni.showToast({
					   	title: '最大值为23时',
					   	icon: 'none',
					   	duration:2000
					})
				}else if(this.fen >= 60){
					uni.showToast({
					   	title: '最大值为59分钟',
					   	icon: 'none',
					   	duration:2000
					})
				}else{
					this.timeflag = false
					let cucun = '11num0' + '@' + this.shi + '@' + this.fen + '@' + this.miao + '@' + this.tian + '@'
					xBlufi.notifySendCustomData({
						customData: cucun
					})
					uni.showToast({
					   	title: '保存成功',
					   	icon: 'success',
					   	duration:2000
					})
					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')
						if (this.pre == 'WATER') {
							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
									}
								}
							}
						} else {
                            const input = options.data.slice(0, -1) + ";"
                            // 去除末尾的分号并分割字符串
                            const parts = input.replace(";", "").split(":")
                            // 获取时间部分并分割
                            const timeParts = parts[1].split(",")
                            // 解析为对象
                            this.csbobj = {
                                hour: parseInt(timeParts[0]), // 小时
                                minute: parseInt(timeParts[1]), // 分钟
                                second: parseInt(timeParts[2]), // 秒
                                day: parseInt(timeParts[3]) // 天数
                            }
                            console.log(this.csbobj);
							this.shi = this.csbobj.hour
							this.fen = this.csbobj.minute
							this.miao = this.csbobj.second
							this.tian = this.csbobj.day
						}
						break
				}
			},
		}
	}
</script>

<style lang="less">
	/deep/ .u-title {
		margin-bottom: 22rpx;
	}

	/deep/ .uicon-nav-back {
		margin-bottom: 22rpx;
	}
    .choushuiben{
		.baocun{
			margin: auto;
			width: 630rpx;
			height: 100rpx;
			margin-top: 50rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 20rpx;
			background-color: #7FAD76;
			color: #fff;
			font-size: 32rpx;
		}
		.name{
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
			text{
				width: 300rpx;
			}
			input{
				border-bottom: 1px solid #ccc;
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}
	.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>