diff --git a/page_user/lanya.vue b/page_user/lanya.vue index aa0f015..2d27cc3 100644 --- a/page_user/lanya.vue +++ b/page_user/lanya.vue @@ -13,7 +13,7 @@ 如未找到想添加的设备，点击重新搜索 - + @@ -51,10 +51,7 @@ - - 重新搜索 - - + 重新搜索 @@ -96,6 +93,15 @@ showNameDialog: false, customDeviceName: '', currentDevice: null, + searchTimer: null, + checkTimer: null, + isSearching: false, + searchTimeout: null, + throttleTimer: null, + lastSearchTime: 0, + searchInterval: 2000, // 搜索间隔2秒 + displayQueue: [], // 显示队列 + processingQueue: false, // 是否正在处理队列 } }, // 分享到好友（会话） @@ -115,12 +121,17 @@ } }, onLoad() { - - }, - onShow() { this.getmodel() this.getinfo() - this.btnss() + }, + onShow() { + this.startSearch() + }, + onHide() { + this.stopSearch() + }, + onUnload() { + this.stopSearch() }, methods: { // 获取用户信息 @@ -207,95 +218,138 @@ }; }, - btnss() { - uni.showLoading({ - title: '搜索中...', - mask: true - }); - this.jiaohuaqi = []; - this.flag = false; - const that = this; - xBlufi.listenDeviceMsgEvent(true, that.funListenDeviceMsgEvent); - xBlufi.notifyStartDiscoverBle({ 'isStart': true }); - setTimeout(() => { - xBlufi.notifyStartDiscoverBle({ 'isStart': false }); - if (that.devicesList.length > 0) { - const data = { mac: that.arr }; - that.$u.post(`/app/getExistListByMacs`, data) - .then(res => { - if (res.code === 200) { - // 创建MAC地址映射表 - const updatedDevicesList = that.devicesList.map(item => { - const matchedData = res.data.find(val => item.name.slice(-12) === val.mac); - return matchedData ? { ...item, ...matchedData } : item; - }); - updatedDevicesList.forEach(val => { - const mac = val.name.slice(-12); - const pre = val.name.slice(0, 5); - const ssid = val.RSSI - const matched = that.getpipei(pre); - const userid = val.userId || null; - that.jiaohuaqi.push({ - name: mac, - modelName: matched.modelName, - modelPicture: matched.picture, - pre: pre, - userId: userid, - ssid:ssid - }); - console.log(that.jiaohuaqi, '2222'); - }); - } - }) - .catch(error => { - console.error('请求失败:', error); - }) - .finally(() => { - uni.hideLoading(); - that.flag = true; - }); - } else { - uni.hideLoading(); - that.flag = true; - } - }, 3000); + // 开始搜索 + startSearch() { + if (this.isSearching) return + this.isSearching = true + this.jiaohuaqi = [] + this.displayQueue = [] + this.processingQueue = false + this.flag = false + + // 开始蓝牙搜索 + xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent) + xBlufi.notifyStartDiscoverBle({ 'isStart': true }) + + // 30秒后自动停止搜索 + this.searchTimeout = setTimeout(() => { + this.stopSearch() + }, 30000) }, - + + // 停止搜索 + stopSearch() { + this.isSearching = false + if (this.checkTimer) { + clearInterval(this.checkTimer) + this.checkTimer = null + } + if (this.searchTimeout) { + clearTimeout(this.searchTimeout) + this.searchTimeout = null + } + if (this.throttleTimer) { + clearTimeout(this.throttleTimer) + this.throttleTimer = null + } + xBlufi.notifyStartDiscoverBle({ 'isStart': false }) + this.flag = true + }, + + // 处理显示队列 + processDisplayQueue() { + if (this.processingQueue || this.displayQueue.length === 0) return + + this.processingQueue = true + const device = this.displayQueue.shift() + + // 检查设备是否已存在 + if (!this.jiaohuaqi.some(item => item.name === device.name)) { + this.jiaohuaqi.push(device) + } + + // 延迟处理下一个设备 + setTimeout(() => { + this.processingQueue = false + this.processDisplayQueue() + }, 500) // 每个设备显示间隔500ms + }, + + // 添加设备到显示队列 + addToDisplayQueue(device) { + this.displayQueue.push(device) + if (!this.processingQueue) { + this.processDisplayQueue() + } + }, + + // 更新设备列表 + updateDeviceList(existList) { + const newDevices = this.devicesList.filter(item => { + const mac = item.name.slice(-12) + return !this.jiaohuaqi.some(device => device.name === mac) && + !this.displayQueue.some(device => device.name === mac) + }) + + newDevices.forEach(item => { + const mac = item.name.slice(-12) + const pre = item.name.slice(0, 5) + const ssid = item.RSSI + const matched = this.getpipei(pre) + const existDevice = existList.find(val => val.mac === mac) + + const newDevice = { + name: mac, + modelName: matched.modelName, + modelPicture: matched.picture, + pre: pre, + userId: existDevice ? existDevice.userId : null, + ssid: ssid + } + + this.addToDisplayQueue(newDevice) + }) + }, + // 获取附近蓝牙设备列表 funListenDeviceMsgEvent: function(options) { switch (options.type) { - case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: - if (!options.result) { - - } - break case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS: if (options.result) { + const now = Date.now() + if (now - this.lastSearchTime < this.searchInterval) { + return + } + this.lastSearchTime = now + let devicesarr = [] this.devicesList = options.data options.data.forEach(item => { devicesarr.push(item.name.slice(-12)) }) this.arr = devicesarr.join(',') - } - break - case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED: - console.log("连接回调：" + JSON.stringify(options)) - if (options.result) { - { - xBlufi.notifyInitBleEsp32({ - deviceId: this.deviceId - }) - this.deviceIds = options.data.deviceId - this.name = this.name + + // 使用节流处理设备检查 + if (this.throttleTimer) { + clearTimeout(this.throttleTimer) } - } else { - + + this.throttleTimer = setTimeout(() => { + if (this.devicesList.length > 0) { + const data = { mac: this.arr } + this.$u.post(`/app/getExistListByMacs`, data) + .then(res => { + if (res.code === 200) { + this.updateDeviceList(res.data) + } + }) + .catch(error => { + console.error('请求失败:', error) + }) + } + }, 500) // 500ms的节流时间 } break - case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA: - - break; case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START: if (!options.result) { uni.showToast({ @@ -305,12 +359,30 @@ }) this.flags = false return - } else { - } break } }, + + btnss() { + this.stopSearch() + this.jiaohuaqi = [] + this.displayQueue = [] + this.processingQueue = false + this.startSearch() + }, + // 处理搜索按钮点击 + handleSearch() { + if (!this.flag) { + uni.showToast({ + title: '请等待蓝牙搜索完成后再操作', + icon: 'none', + duration: 2000 + }) + return + } + this.btnss() + }, } } @@ -375,6 +447,12 @@ left: 50%; transform: translateX(-50%); bottom: 106rpx; + transition: all 0.3s ease; + + &.searching { + background: #E5E5E5; + color: #666666; + } } .list { @@ -382,6 +460,7 @@ border-radius: 20rpx; margin: auto; margin-top: 72rpx; + will-change: transform; // 优化动画性能 .list_item { margin-top: 18rpx; @@ -395,6 +474,21 @@ box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08); padding: 18rpx 30rpx; box-sizing: border-box; + animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; + opacity: 0; + transform: translateX(-100%); + will-change: transform, opacity; // 优化动画性能 + + @keyframes slideIn { + from { + opacity: 0; + transform: translateX(-100%); + } + to { + opacity: 1; + transform: translateX(0); + } + } image { width: 94rpx;