Sprinkler-app/page_newyemian/wgluru-add.vue

<template>
	<view class="page">
		<u-navbar title="设备录入" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='38' :custom-back="btns"
			height='50'></u-navbar>
		<view class="iptbox" @click="backpage()">
			<input type="text" class="ips" v-model="mac" placeholder=" " style="margin-left: 32rpx;" 
				placeholder-class="my-placeholder" />
			<view class="mini-btn" @click.stop="Binddevice()">蓝牙连接</view>
		</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 class="mini-btn" @click="btnwl">网络控制</view>
		</view>
        <view class="lanyasj">
        	<view class="item">
        		<view class="label-box">
					<u-icon name="info-circle" size="28" color="#52c41a"></u-icon>
					<text class="label">版本号</text>
				</view>
        		<view>
        			<text v-if="ver_data.ver" class="value">{{'V' + ver_data.ver}}</text>
        			<text v-else class="value">--</text>
					<view class="apn-btn" @click.stop="fengm()" v-if="carstause">固件升级</view>
        		</view>
        	</view>
        </view>
		<view class="bot_btn">
			<view class="btn1" @click="bind()">
				录入
			</view>
		</view>
		<u-mask :show="showbind" :z-index='100' />
		<view class="tip_box" v-if="showbind">
			<view class="top" v-if="showbind">
				<view class="tip">
					操作提示
				</view>
				<view class="ipt_box" style="justify-content: center;">
					<view class="text" style="width: 80%;text-align: center;">
						该mac号已有绑定sn码是否修改为当前sn码
					</view>
				</view>
			</view>
			<view class="bots">
				<view class="bot_left" @click="showbind=false ">
					取消
				</view>
				<view class="bot_right" @click="changeBind()">
					确定
				</view>
			</view>
		</view> 

		<u-mask :show="showApnModal" :z-index='100' />
		<view class="tip_box" v-if="showApnModal">
			<view class="top">
				<view class="tip">修改APN</view>
				<view class="ipt_box" style="justify-content: center;">
					<input class="input" v-model="apnValue" placeholder="请输入APN" style="border: 1px solid #ccc; padding: 10rpx; width: 80%; text-align: center; border-radius: 10rpx; height: 60rpx;" />
				</view>
			</view>
			<view class="bots">
				<view class="bot_left" @click="showApnModal=false">取消</view>
				<view class="bot_right" @click="confirmApn">确定</view>
			</view>
		</view>

        <view class="float-container">
            <view class="float-btn" @click="qrcode()">
                <image src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs" mode="aspectFit"></image>
                <!-- <text>扫码</text> -->
            </view>
        </view> 
		
		<!-- 进度条 -->
		<view class="container" v-if="shengjiflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uquIy7wJmrNhjvy2maJf" mode=""></image>
		    <!-- 进度条背景 -->
		    <view class="progress-bar">
		        <!-- 进度条填充部分 -->
		        <view class="progress-fill" :style="{ width: progress + '%' }"></view>
		    </view>
		    <!-- 显示进度百分比 -->
		    <view class="progress-text">{{ progress }}%</view>
			<view class="wz">
				固件升级中请保持蓝牙连接
			</view>
			<view class="wz">
				切记在蓝牙范围内，以防升级失败
			</view>
		</view>
		<!-- <view class="bot">
			<view class="btn">
				退款
			</view>
		</view> -->
	</view>
</template>

<script>
	const app = getApp();
	var xBlufi = require("@/components/blufi/xBlufi.js"); 
	let _this = null;
	export default {
		data() {
			return {
				devicesList: [
					// {name:'110000',
					// mac:'11111'}
				],
				searching: false,
				texts: '正在扫描蓝牙设备...',
				btnflag: true,
				tishiflag: false,
				option: '',
				bluthlist: [], //蓝牙数组
				// status: 'loading',
				statusflag: false,
				Bluetoothmac: '',
				mac: '',
				ishave: false,
				ver_data: {},
				deviceInfoss: {},
				gps: {},
				isband: false,
				// status: false,
				deviceIds: '',
				name: '',
				orderinfo: {},
				dl: 0,
				czmoney: true,
				iscz: true,
				banben: '请点击选择版本',
				modelId: '',
				bgc: {
					backgroundColor: "#FAFDFD",
				},
				sn: '',
				carstause: false,
				isbands: false,
				show: false,
				list: [],
				hardwareInfo: {},
				showbind: false,
                storeId:'',
                deviceId:'',
                file:'https://lxnapi.ccttiot.com/FlAnyIGlQIy6Ln-l5HWmiSiINwj7' ,//固件升级地址
				intervalId: null,
				version:'',
				progress:0,
				shengjiflag:false,
				valuedian:1000,
				xshu:'1',
				x:'',
				sn:'',
				zhendong:'',
				zdlyyc:true,
				showApnModal: false,
				apnValue: ''
			}
		},
		onLoad(e) {
			xBlufi.initXBlufi(1)
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
			xBlufi.notifyStartDiscoverBle({
				'isStart': true
			})
			console.log(e)
			this.mac = e.mac
			this.Binddevice()
			this.isbands = false
			this.carstause = false
			if(uni.getStorageSync('banben') || uni.getStorageSync('banbenid')){
				this.banben = uni.getStorageSync('banben')
				this.modelId = uni.getStorageSync('banbenid')
			}
			if(e.sn){
				this.storeId = e.sn
			}
		},
		onShow() {
			// this.getlist()
			// this.getbanben()
			 uni.setKeepScreenOn({
			   keepScreenOn: true
			 })
		},
		onUnload: function() {
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
			wx.closeBLEConnection({
				deviceId: this.deviceId,
			})
			uni.setKeepScreenOn({
			  keepScreenOn: false
			})
		},
		onHide() {
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
			xBlufi.notifyStartDiscoverBle({
				'isStart': false
			});
			uni.setKeepScreenOn({
			  keepScreenOn: false
			})
		},
		onBeforeUnmount() {
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
			xBlufi.notifyStartDiscoverBle({
				'isStart': false
			});
		},
		watch: {

		},
		methods: {
			// 点击进行重启
			btncq(){
				xBlufi.notifySendCustomData({
					customData: '11reboot@'
				})
			},
			// 获取版本号和文件
			getbanben(){
				this.$u.get(`/app/softVersion/latest`).then(res =>{
					if(res.code == 200){
						this.version = res.data.version
						this.file = res.data.fileUrl
					}
				})
			},
			// 增加震动值
			btnzdadd(){
				if(this.zhendong == 10){
					uni.showToast({
						title: '最高值为10',
						icon: 'none',
						duration: 3000
					})
					return
				}
				this.zhendong = this.zhendong + 1
			},
			//减少震动值
			btnzdjian(){
				if(this.zhendong == 0){
					uni.showToast({
						title: '最低值为0',
						icon: 'none',
						duration: 3000
					})
					return
				}
				this.zhendong = this.zhendong - 1
			},
			// 点击确定震动
			btnqdzd(){
				this.$u.get(`/farm/beehive/iot/levelToZdxs?level=${this.zhendong}`).then(res => {
					if (res.code == 200) {
						xBlufi.notifySendCustomData({
							customData: `11zdxs${res.data}@`
						})
						uni.showToast({
							title: '设置成功',
							icon: 'success',
							duration: 3000
						})
						this.ver_data = {}
						this.Binddevice()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			
			btnwl(){
				uni.reLaunch({
					url:'/page_newyemian/wgkongzhi?sn=' + this.storeId
				})
			},
			// 开风扇
			btnfsk(){
				xBlufi.notifySendCustomData({
					customData: "11fan100@" 
				})
				uni.showToast({
					title: '开启风扇命令成功',
					icon: 'success',
					duration:2000
				})
				this.ver_data = {}
				this.Binddevice()
			},
			// 关风扇
			btnfsg(){
				xBlufi.notifySendCustomData({
					customData: "11fan0@" 
				})
				uni.showToast({
					title: '关闭风扇命令成功',
					icon: 'success',
					duration:2000
				})
				this.ver_data = {}
				this.Binddevice()
			},
			// 点击重置系数
			btnczxs(){
				xBlufi.notifySendCustomData({
					customData: "11zlxs1@" 
				})
				uni.showToast({
					title: '重置系数命令成功',
					icon: 'success',
					duration:2000
				})
				this.ver_data = {}
				this.Binddevice()
			},
			// 点击校准电量
			btnjiaozhun(){
				this.x = this.valuedian / this.ver_data.weight * this.ver_data.xs
				console.log(this.x,this.valuedian,this.ver_data.weight,this.ver_data.xs);
				this.x = this.x.toFixed(3)
				setTimeout(()=>{
					xBlufi.notifySendCustomData({
						customData: "11zlxs" + this.x + '@'
					})
					this.ver_data = {}
					this.Binddevice()
					uni.showToast({
						title: '发送校准命令成功',
						icon: 'success',
						duration:2000
					})
				},1000)
				// this.$u.put(`app/beehive/admin/zlxs?sn=${this.sn}&zlxs=${this.x}`).then(res => {
				// 	if(res.code == 200){
				// 		uni.showToast({
				// 			title: '校准成功',
				// 			icon: 'success',
				// 			duration:2000
				// 		})
				// 		setTimeout(()=>{
				// 			this.ver_data = {}
				// 			this.Binddevice()
				// 		},1000)
				// 	}else{
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: 'none'
				// 		})
				// 	}
				// })
			},
			btnadd(){
				this.valuedian = this.valuedian + 50
			},
			btnjian(){
				this.valuedian = this.valuedian - 50
			},
			// 点击进行固件升级
			fengm(){
				var data = {
				    sum: 100,
				    http: this.file
				}
				xBlufi.notifySendCustomData({
				    customData: data
				})
				this.shengjiflag = true
				this.startProgress()
			},
			// 固件升级进度
			startProgress() {
			    this.intervalId = setInterval(() => {
			        if (this.progress < 100) {
			            
			        } else {
			            clearInterval(this.intervalId); // 进度达到 100% 时清除定时器
			            console.log("加载完成");
			        }
			    }, 30); // 每 30 毫秒更新一次进度
			},
			
			ring() {
				xBlufi.notifySendCustomData({
					customData: "11clear_weight@"
				})
				this.ver_data = {}
				this.Binddevice()
			},
			btns(){
				uni.reLaunch({
					url:'/page_newyemian/wgluru'
				})
			},
			confirm(e) {
				// console.log(e);
				this.banben = e[0].label
				this.modelId = e[0].value
				uni.setStorageSync('banben', this.banben)
				uni.setStorageSync('banbenid', this.modelId)
			},
			getlist() {
				this.$u.get('/app/model/admin/all').then((res) => {
					if (res.code === 200) {
						this.Versionlist = res.data
						const hardwareVersionId = uni.getStorageSync('hardwareVersionId');

						if (hardwareVersionId) {
							this.hardwareVersionId = hardwareVersionId
							const matchedVersion = this.Versionlist.find(version => version.id ===
								hardwareVersionId);
							if (matchedVersion) {
								this.hardwareInfo = matchedVersion;
							}
						}
						this.list = res.data.map(item => ({
							value: item.modelId,
							label: item.name
						}));
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			send() {
				this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
					if (res.code === 200) {

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			changeBind() {
				this.$u.post(`/appVerify/updateSn?sn=` + this.sn + '&mac=' + this.mac + '&hardwareVersionId=' + this
					.hardwareVersionId).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '绑定成功',
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1 // delta值为1时表示返回的页面层数
							});
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			bind() {
				let data = {
					sn: this.storeId,
					mac: this.mac,
					pre:'CTWG:'
				}
				this.$u.post('/device/device/addDevice', data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '录入成功',
							icon: 'success',
							duration: 2000
						})
						wx.closeBLEConnection({
							deviceId: this.deviceId,
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/page_newyemian/wgkongzhi?sn=' + this.storeId
							})
						},1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
				
			},
			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
						}
						console.log(res,'000');
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						let id = getQueryParam(decodedValue, 's')
						this.storeId = id
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},

			Binddevice() {
				this.zdlyyc = true
				this.devicesList = [] // 清空设备列表
				uni.showLoading({
					title: '连接中..'
				})
				// 两秒后停止蓝牙搜索
				setTimeout(() => {
					xBlufi.notifyStartDiscoverBle({
						'isStart': false
					});
					setTimeout(() => {
						uni.hideLoading()
						if (this.devicesList.length == 0) {
							uni.showToast({
								title: '暂无发现对应设备,请重试',
								icon: 'none'
							});
						} else {
							let uniqueDevicesList = Array.from(new Set(this.devicesList));

							// 将去重后的数组重新赋值给 this.devicesList
							this.devicesList = uniqueDevicesList;
							// console.log(this.devicesList,'this.devicesListthis.devicesList');
							this.devicesList.forEach(device => {
								// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
								let macFromName = device.name.substring(device.name.length - 12);
								console.log(macFromName, 'macFromNamemacFromName');
								// 与 this.mac 进行比较
								if (macFromName == this.mac) {
									// 如果相同，则将 this.ishave 设置为 true
									console.log(device);
									this.deviceInfoss = device
									// this.ishave = true;
									this.createBLEConnection(device)
									console.log('对比正确1111111111');
								} else {
									console.log('对比错误');

								}
							});
						}
					}, 200)
					// 判断是否存在浇花器设备

					// this.status = true
				}, 2000)

			},
			reboot() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "11reboot"
									});
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			open() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "open"
									});
									xBlufi.notifySendCustomData({
										customData: "11open"
									});
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			close() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "close"
									});
									xBlufi.notifySendCustomData({
										customData: "11close"
									});
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			btnyc() {
				this.titleflag = false
			},

			// 解析自定义数据

			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
						if (!options.result) {
							this.ver_data = {}
							this.carstause = false
						}
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result) {
							let devicesarr = options.data
							devicesarr.forEach(device => {
								// 只添加以CTWG:开头的设备
								const deviceName = device.name || device.localName || ''
								// 严格检查：设备名称必须以CTWG:开头
								if (deviceName && deviceName.length >= 5 && deviceName.substring(0, 5) === 'CTWG:') {
									this.devicesList.push(device);
								}
							});
							// 循环结束后统一去重（基于deviceId去重）
							let deviceMap = new Map()
							this.devicesList.forEach(device => {
								if (device.deviceId && !deviceMap.has(device.deviceId)) {
									deviceMap.set(device.deviceId, device)
								}
							})
							this.devicesList = Array.from(deviceMap.values())
						}
						break;

					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						console.log("连接回调：" + JSON.stringify(options));
						if (options.result) {
							uni.hideLoading();
							this.carstause = true
							uni.showToast({
								title: '连接成功',
								icon: 'none'
							}); {
								xBlufi.notifyInitBleEsp32({
									deviceId: options.data.deviceId
								});
								this.deviceIds = options.data.deviceId
								this.name = options.data.name
							}
						}

						break;
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
                       if (typeof options.data === 'string') {
                           if (options.data.indexOf("prom:") !== -1) {
							   console.log("选择固件升级收信息：", options.data, options.data.length);
                               console.log('固件升级中')
                               var indexOld = options.data.substring(options.data.indexOf('prom:'))
                               console.log("indexOld", indexOld);
                               var load_num = indexOld.substring(
                                   indexOld.indexOf("prom:") + 5,
                                   indexOld.indexOf("@")
                               )
                               this.progress = Number(load_num);
                               console.log("load_num", load_num);
                               console.log("升级进度：", this.progress)
                               if (this.progress === 6000) {
                                   console.log('固件成功')
                                   this.progress = 100
                       			uni.showToast({
                       				title: '固件升级成功',
                       				icon: 'success',
                       				duration: 2000
                       			})
                       			setTimeout(()=>{
									this.ver_data = {}
                       				this.shengjiflag = false
                       			},2000)
                               }
                               if (this.progress === 9000) {
                                   console.log('固件升级失败')
                                   this.progress = 99
                       			uni.showToast({
                       				title: '固件升级失败',
                       				icon: 'none',
                       				duration: 2000
                       			})
                       			setTimeout(()=>{
									this.ver_data = {}
                       				this.shengjiflag = false
                       			},1000)
                               }
                           }else{
							   this.ver_data = this.parseBluetoothData(options.data + ',')
							   if (options.data) {
							   }
							   console.log("1收到设备发来的自定义数据结果：", options.data,this.ver_data);
							   if(this.zdlyyc == true){
								   this.zdlyyc = false
								   this.$u.get(`/farm/beehive/iot/zdxsToLevel?zdxs=${this.ver_data.zd}`).then(res => {
								   	if (res.code == 200) {
								   		this.zhendong = res.data
								   	}
								   })
							   }
						   }
                       } else {
                           console.log("不是字符串：", options.data,this.ver_data);
                       }
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
						if (options.result) {
							
						} else {

						}
						this.searching = false
						break
				}
			},
           parseBluetoothData(data) {
               const result = {};
               const parts = data.split(',');
           
               parts.forEach(part => {
                   if (part) {
                       // 使用正则表达式匹配键和值
                       const match = part.match(/^([a-zA-Z_]+):?([^@]+)/);
                       if (match) {
                           const key = match[1]; // 提取键
                           const value = match[2]; // 提取值
                           result[key] = value;
                       } else {
                           // 如果没有匹配到键值对，直接将该部分作为键，值为空
                           result[part] = '';
                       }
                   }
               });
               return result;
           },
			//4、建立连接
			createBLEConnection(e) {
				console.log('调用了')
				xBlufi.notifyStartDiscoverBle({
					'isStart': false
				})
				console.log(e, '蓝牙信息')
				const deviceId = e.deviceId
				this.deviceId = e.deviceId
				this.Bluetoothmac = e.localName.substring(5) //从第七位开始截取 只取后面的mac号
				console.log(this.Bluetoothmac, '11111')
				let name = e.name;
				console.log('点击了，蓝牙准备连接的deviceId:' + e.deviceId)
				xBlufi.notifyConnectBle({
					isStart: true,
					deviceId: e.deviceId,
					name
				})
			},
			// 点击重新搜索
			Search() {
				if (this.status) {
					xBlufi.notifyStartDiscoverBle({
						'isStart': true
					});
					// 重新搜索清空蓝牙数组
					this.bluthlist = []
					this.devicesList = []
					// 重新搜索
					// this.startBluetoothDevicesDiscovery()
					this.statusflag = true
					this.status = false
					this.texts = '正在扫描蓝牙设备...'
					setTimeout(() => {
						this.statusflag = false
						this.status = true
						if (this.searching) {
							xBlufi.notifyStartDiscoverBle({
								'isStart': false
							});
							// 判断是否存在浇花器设备
							if (this.devicesList.length == 0) {
								uni.showToast({
									title: '暂无发现对应设备,请重试',
									icon: 'none'
								});
							} else {
								this.texts = '扫描到以下设备，请点击连接！'
							}
						} else {
							xBlufi.notifyStartDiscoverBle({
								'isStart': true
							});
						}
					}, 2000)
				}
			},
			// 点击隐藏没有设备提示
			btnhd() {
				this.tishiflag = false
			},
			btnSetApn(){
				this.apnValue = this.ver_data.apn || ''
				this.showApnModal = true
			},
			confirmApn(){
				// if(!this.apnValue) {
				// 	uni.showToast({
				// 		title: '请输入APN',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				xBlufi.notifySendCustomData({
					customData: `11apn${this.apnValue}@`
				})
				uni.showToast({
					title: '设置成功',
					icon: 'success'
				})
				this.showApnModal = false
                this.ver_data = {}
                this.Binddevice()
			}
		}
	}
</script>

<style lang="scss">
	page {
		overflow-x: hidden;
		background-color: #F3F3F3;
	}
	.jiaozhun{
		display: flex;
		padding: 50rpx;
		box-sizing: border-box;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		button{
			height: 80rpx;
			line-height: 80rpx;
			background-color: #52c41a;
			color: #fff;
		}
		.input{
			input{
				height: 80rpx;
				line-height: 80rpx;
			}
			border: 1px solid #ccc;
			border-radius: 20rpx;
			display: flex;
			width: 260rpx;
			height: 80rpx;
			text-align: center;
		}
		.view{
			width: 200rpx;
			height: 80rpx;
			border-radius: 20rpx;
			background-color: #52c41a;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
		}
	}
	.container {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    height: 100vh; /* 全屏高度 */
	    background-color: #f0f0f0; /* 背景颜色 */
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		z-index: 99;
		image{
			width: 400rpx;
			height: 500rpx;
			margin-top: 260rpx;
			margin-bottom: 80rpx;
		}
		.wz{
			color: red;
			margin-top: 20rpx;
		}
	}
	
	/* 进度条背景 */
	.progress-bar {
	    width: 80%; /* 进度条宽度 */
	    height: 20px; /* 进度条高度 */
	    background-color: #e0e0e0; /* 背景颜色 */
	    border-radius: 10px; /* 圆角 */
	    overflow: hidden; /* 隐藏超出部分 */
	}
	
	/* 进度条填充部分 */
	.progress-fill {
	    height: 100%;
	    background-color: #7FAD76; /* 填充颜色 */
	    transition: width 0.1s ease; /* 平滑过渡 */
	}
	
	/* 进度百分比文字 */
	.progress-text {
	    margin-top: 20px;
	    font-size: 24px;
	    color: #333;
	}
	
    .lanyasj{
		margin: 15rpx auto 0;
		width: 658rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 20rpx;
    	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    	padding: 30rpx 30rpx;
    	box-sizing: border-box;
    	.item{
    		width: 50%;
    		margin-top: 20rpx;
    		text-align: left;
			display: flex;
			flex-direction: column;
			.label-box {
				display: flex; 
				align-items: center; 
				margin-bottom: 8rpx;
			}
			.label{
				font-size: 24rpx;
				color: #999;
				margin-left: 8rpx;
			}
			.value{
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			.apn-btn {
				margin-left: 20rpx;
				background-color: #52c41a;
				color: #fff;
				font-size: 24rpx;
				padding: 4rpx 16rpx;
				border-radius: 10rpx;
				display: inline-block;
			}
    	}
    }
	.page {
		padding-bottom: 250rpx;
		width: 750rpx;
        height: 100%;
        .float-container {
            position: fixed;
            right: 30rpx;
            bottom: 760rpx;
            display: flex;
            flex-direction: column;
            gap: 30rpx;
            z-index: 99;
            
            .float-btn {
                width: 100rpx;
                height: 100rpx;
                background: #fff;
                border-radius: 50%;
                box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.2);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 24rpx;
                color: #333;
                
                image {
                    width: 60rpx;
                    height: 60rpx;
                }
                
                &.confirm-btn {
                    background: #52c41a;
                    color: #fff;
					border: 2rpx solid #fff;
					font-size: 32rpx;
                }
            }
        }
		.tip_box {
			position: fixed;
			left: 72rpx;
			top: 628rpx;
			width: 610rpx;
			// height: 282rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			z-index: 110;
			padding-bottom: 100rpx;

			.top {
				padding: 52rpx 38rpx 42rpx 36rpx;

				.ipt_box {
					margin-top: 22rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.text {
						width: 350rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #3D3D3D;
					}

					.ipt {
						padding: 10rpx 18rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 26rpx;
						width: 420rpx;
						height: 64rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #979797;

						.input {
							width: 80%;
						}
					}
				}

				.tip {
					width: 100%;
					text-align: center;
					font-weight: 700;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.txt {
					margin-top: 32rpx;
					width: 100%;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}

			.bots {
				position: absolute;

				width: 610rpx;
				// border-top: 2rpx solid #D8D8D8;
				display: flex;
				flex-wrap: nowrap;
				// height: 100%;
				bottom: -20rpx;

				.bot_left {
					border-radius: 0rpx 0rpx 0rpx 30rpx;
					width: 50%;
					height: 86rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
					background: #EEEEEE;
				}

				.bot_right {
					border-radius: 0rpx 0rpx 30rpx 0rpx;
					width: 50%;
					height: 86rpx;
					background: #4C97E7;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					// border-left: 2rpx solid #D8D8D8;
					font-weight: 500;
					font-size: 32rpx;
					// color: #4C97E7;

				}

			}
		}


		.imgs {
			margin-top: 50rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			position: relative;
            .an{
				width: 200rpx;
				height: 60rpx;
				color: #fff;
				background-color: #52c41a;
				border-radius: 10rpx;
				position: absolute;
				bottom: 0;
				right: 30rpx;
				text-align: center;
				line-height: 60rpx;
			}
			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.btn {

			margin: auto;
			margin-top: 30rpx;
			// position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			// bottom: 100rpx;
			// left: 46rpx;
			width: 658rpx;
			height: 88rpx;
			background: #52c41a;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.tips {
			margin: 28rpx auto 0;
			width: 658rpx;
		}

		.iptbox {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			padding: 22rpx;
			margin: 15rpx 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 {
				flex: 1;
				min-width: 0;
			}

			image {
				width: 18rpx;
				height: 32rpx;
			}

			.my-placeholder {
				font-weight: 400;
				font-size: 32rpx;
				color: #808080;
			}
			.mini-btn {
				min-width: 140rpx;
				padding: 0 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #52c41a;
				color: #fff;
				font-size: 26rpx;
				border-radius: 30rpx;
				margin-left: 10rpx;
				flex-shrink: 0;
			}
		}

		.bot_btn {
			position: fixed;
			bottom: 30rpx;
			left: 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 46rpx;
			box-sizing: border-box;
			justify-content: space-between;
			background: transparent;
			box-shadow: none;
			pointer-events: none; /* Let clicks pass through empty space */

			.btn1 {
				pointer-events: auto;
				margin-top: 20rpx;
				margin-right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 80rpx;
				background: #fff;
				border-radius: 40rpx;
				border: 2rpx solid #52c41a;
				font-weight: 500;
				font-size: 28rpx;
				color: #52c41a;
				box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
			}
		}



	}
</style>