Sprinkler-app/pages/index/index.vue

<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="false" 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="false">
			<text>暂无设备，请先绑定设备</text>
			<view class="bang">
				绑定
			</view>
		</view>
		<view class="" v-else>
			<!-- 选择设备 -->
			<view class="selectbox">
				<view class="selectname" @click="btnksxz">
					小发财树1号 <image src="https://api.ccttiot.com/smartmeter/img/static/uwHOBxvbJjkhx1uDiQHI" mode="">
					</image>
				</view>
				<view class="selectshezhi" @click="btnsz">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uvCJ8ro0MpfGZd53vypJ" mode=""></image>
				</view>
			</view>
			<view class="selectbox">
				<view class="shebeiname">
					丁丁浇花器 <text></text>
				</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">型号：G-145255445</view>
							<view class="">SN：G-145255445</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">
							剩余：5分钟
						</view>
					</view>
				</view>
				<view class="deviceweek">
					<view class="weeklist" v-for="(item,index) in 6" :key="index">
						<view class="kg">
							OFF
						</view>
						<view class="weekday">
							P{{index + 1}}
						</view>
						<view class="img">
							<image 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-model="yschecked" @change="btnyushui" active-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-model="etchecked" active-color="#7FAD76" size="40"></u-switch>
					</view>
				</view>
			</view>
			<!-- 定时 -->
			<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="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="">距离下次：8小时</view>
						<view class="">下次浇水时长：15分钟</view>
						<view class="">上次浇水：10-15 15:22</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 2" :key="index"
					:id="activeshu == index ? 'activebor' : ''" @click="btnactive(index)">
					<view class="lt">
						<view class="">小发财树1号</view>
						<view class="" style="margin-top: 14rpx;">型号:12354121</view>
					</view>
					<view class="rt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uVKucPVDjxjaCDCpFKvw" mode=""></image>
					</view>
				</view>
			</view>
			<view class="qdan" @click="btnxuanze">
				确定
			</view>
		</view>
		<!-- 手动浇水 -->
		<view class="manualjs" v-if="sdjsflag">
			<view class="toptit">
				选择浇水时长 
			</view>
			<view class="container" @click="show = true">
	            <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="show" mode="time" :params="params" @confirm="confirm"></u-picker>

		<tab-bar :indexs='0'></tab-bar>

	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js") 
	import TimePicker from '@/components/TimePicker/index.vue'
	export default { 
		components: {
			TimePicker
		},
		data() {
			return {
				yschecked: true,
				etchecked: true,
				kgflag: false,
				activeshu: 0,
				xuanzeflag: false,
				selectedMinute: '1',
				selectedSecond: '1',
				sdjsflag:false ,
				show: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: false,
					minute: true,
					second: true
				},
				minute:'--',
				second:'--',
				
				devicesList:[],
				deviceId:'',
				name:'',
				mac:'2952BB7A4EE0',
				jstime:''
				
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '绿小能',
				path: '/pages/index/index'
			}
		},
		
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '绿小能',
				query: '',
				path: '/pages/index/index'
			}
		},
		onLoad() {
            let that = this
            xBlufi.initXBlufi(1);
            xBlufi.listenDeviceMsgEvent(true, that.funListenDeviceMsgEvent);
            xBlufi.notifyStartDiscoverBle({
            	'isStart': true
            })
            setTimeout(() => {
            	xBlufi.notifyStartDiscoverBle({
            		'isStart': false
            	})
            	if (that.devicesList.length > 0) {
            		xBlufi.notifyConnectBle({
            			isStart: true,
            			deviceId: that.deviceId,
            			name: that.name
            		})
            	}
            }, 2000)
		},
		onShow() {
			
		},
		mounted() {

		},
		methods: {
			// 雨水感应
			btnyushui(){
				let that = this
				if(that.yschecked == true){ 
					uni.getNetworkType({
						success(res) {
							if (res.networkType !== 'none') {
								uni.getConnectedBluetoothDevices({
									success(res) { 
										setTimeout(()=> {
											xBlufi.notifySendCustomData({
												customData:'qlose'
											})
											that.yschecked = false
										},1500)
									},
									fail(err) {
										console.error('获取已连接蓝牙设备信息失败：',err)
									}
								}) 
							} else {
								console.log('手机未连接网络')
							}
						}
					})
				}else{
					console.log(11);
					let that = this
					uni.getNetworkType({
						success(res) {
							if (res.networkType !== 'none') {
								uni.getConnectedBluetoothDevices({
									success(res) { 
										setTimeout(()=> {
											xBlufi.notifySendCustomData({
												customData:'qpen'
											})
											that.yschecked = true 
										},1500)
									},
									fail(err) {
										console.error('获取已连接蓝牙设备信息失败：',err)
									}
								}) 
							} else {
								console.log('手机未连接网络')
							}
						}
					})
				}
			},
			
			// 点击添加设备
			btnaddsb(){
				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(){
				uni.navigateTo({
					url:'/page_user/dingshi'
				})
			},
			
			// 点击取消手动浇水
			btnqx(){
				this.sdjsflag = false
			},
			btnqd(){
				if(this.minute == '--' || this.second == '--'){
					uni.showToast({
						title: '请选择浇水时长',
						icon: 'none',
						duration: 3000
					})
				}else{
					let that = this
					uni.getNetworkType({
						success(res) {
							if (res.networkType !== 'none') {
								uni.getConnectedBluetoothDevices({
									success(res) { 
										setTimeout(()=> {
											xBlufi.notifySendCustomData({
												customData: "11time@" + that.jstime
											})
											that.sdjsflag = false
											that.kgflag = true
										},1500)
									},
									fail(err) {
										console.error('获取已连接蓝牙设备信息失败：',err)
									}
								}) 
							} else {
								console.log('手机未连接网络')
							}
						}
					})
				}
			},

			// 关闭
			btnkq() {
				let that = this
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) { 
									setTimeout(()=> {
										xBlufi.notifySendCustomData({
											customData: "11close"
										})
										that.kgflag = false
									},1500)
								},
								fail(err) {
									console.error('获取已连接蓝牙设备信息失败：',err)
								}
							}) 
						}
					}
				})
			},
			// 开启
			btngb() {
				this.sdjsflag = true
			},

			// 跳转到设置
			btnsz() {
				uni.navigateTo({
					url: '/page_user/upload'
				})
			},
			// 选择设备
			btnactive(index) {
				this.activeshu = index
			},
			// 选择确定设备
			btnxuanze() {
				this.xuanzeflag = false
			},
			btnksxz() {
				if (this.xuanzeflag == true) {
					this.xuanzeflag = false
				} else {
					this.xuanzeflag = true
				}
			},
			//跳转到浇水日志页
			btnjs() {
				uni.navigateTo({
					url: '/page_user/jiaoshui'
				})
			},
			
			
			// 获取附近蓝牙设备列表
			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
						if (!options.result) {
							uni.showModal({
								title: '很抱歉提醒你！',
								content: '小程序与设备异常断开',
								showCancel: false,
								//是否显示取消按钮
								success: function(res) {
									uni.hideLoading()
									uni.removeStorage({key:'device_key'})
								}
							})
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result) {
							let devicesarr = options.data
							console.log(devicesarr,'111');
							devicesarr.forEach(device => {
								const mac = device.name.substring(4);
								if (device.name.slice(5, 17) == this.mac) {
									this.deviceId = device.deviceId
									this.name = device.name
									// console.log(device.name,this.mac,'222');
									this.devicesList.push(device);
									let uniqueDevicesList = Array.from(new Set(this.devicesList));
									this.devicesList = uniqueDevicesList;
								} 
							})
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						console.log("连接回调：" + JSON.stringify(options));
						uni.setStorageSync('device_key', 'true')
						if (options.result) {
							{
								xBlufi.notifyInitBleEsp32({
									deviceId: this.deviceId
								})
								this.deviceIds = options.data.deviceId
								this.name = this.name
							}
						}else{
							
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
						this.ver_data = this.parseCustomData(options.data)
						console.log("1收到设备发来的自定义数据结果：", options.data);
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
						if (options.result) {
							let uniqueDevicesList = Array.from(new Set(this.devicesList));
							let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 5) === "WATER");
							// 将过滤后的数组重新赋值给 this.devicesList
							this.devicesList = filteredDevices;
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
						if (!options.result) {
							uni.showToast({
								title: '蓝牙未开启',
								icon: 'none',
								duration: 3000
							});
							return
						} else {
							
						}
						break;
				}
			},
			// 从蓝牙拿到数据进行解析
			parseCustomData(data) {
				// 将字符串按照 "@" 分割成数组
				const dataArray = data.split('@');
				const voltage = parseFloat(dataArray[0].substring(1)); // 去除前缀 "V"，并将字符串转换为浮点数
				const switchState = dataArray[1].substring(1); // 去除前缀 "S"
				const current = parseFloat(dataArray[2].substring(1)); // 去除前缀 "A"，并将字符串转换为浮点数
				const power = parseFloat(dataArray[4].substring(1)); // 去除前缀 "P"，并将字符串转换为浮点数
				const remainingPower = parseFloat(dataArray[5].substring(1)); // 去除前缀 "M"，并将字符串转换为浮点数
				const setMode = dataArray[6].substring(1); // 去除前缀 "T"
				// 返回解析后的数据对象
				return {
					voltage,
					switchState,
					current,
					power,
					remainingPower,
					setMode
				};
			},
		}
	}
</script>

<style lang="scss">
	
	.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);
			/* 最终位置 */
		}
	}

	.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;
		background-color: #FFFFFF;

		.tabsb {
			width: 750rpx;
			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: 1;
			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: 600;
				line-height: 102rpx;
				text-align: center;
				background-color: #48893B;
				border-radius: 20rpx;
				margin-top: 40rpx;
			}

			.sblist {
				width: 100%;
				height: 68vh;
				overflow: scroll;

				.sbist_val {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 40rpx 34rpx;
					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%;
			height: 290rpx;
			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;
				align-items: center;

				.weeklist {
					.kg {
						font-size: 24rpx;
						color: #999999;
					}

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

				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;

				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>