Sprinkler-app/page_newyemian/wgluru.vue

844 lines
21 KiB
Vue
Raw Normal View History

2025-12-26 16:53:58 +08:00
<template>
<view>
<u-navbar :is-back="true" title=' ' title-color="#000" :border-bottom="false" :background="bgc"
id="navbar">
</u-navbar>
<view class="page">
<!-- 有搜索到设备 -->
<view class="you" v-if="flags">
<view class="topone">
<image src="https://api.ccttiot.com/smartmeter/img/static/ubrPcpGQEXTadkBa1gKh" mode=""></image>
扫描到以下设备点击添加
</view>
<view class="toptwo">
如未找到想添加的设备点击重新搜索
</view>
<view class="list">
<view class="list_item" v-for="(item,index) in sortedJiaohuaqi" :key="index" :class="{ show: item.show }">
<image :src="item.modelPicture" mode=""></image>
<view class="cen">
<view class="name" style="color: #ccc;" v-if="item.userId && item.userId != userid">
{{item.modelName == undefined ? '' : item.modelName}}
</view>
<view class="name" v-else>
{{item.modelName == undefined ? '' : item.modelName}}
</view>
<view class="devmac">
MAC{{item.mac == undefined ? item.name.slice(-12) : item.mac}}
</view>
<view class="devmac" style="display: flex;align-items: center;">
信号
<!-- 最强信号-50 及以上-1 -50 -->
<image
style="width: 30rpx;height: 20rpx;"
v-if="item.ssid >= -50"
src="https://api.ccttiot.com/smartmeter/img/static/ueeDGk0mVPLUd0DHxrWj"
mode=""
></image>
<!-- 较强信号-51 -60 -->
<image
style="width: 30rpx;height: 20rpx;"
v-else-if="item.ssid >= -60 && item.ssid <= -51"
src="https://api.ccttiot.com/smartmeter/img/static/uM1obZ76ittglMRKXWLq"
mode=""
></image>
<!-- 中等信号-61 -70 -->
<image
style="width: 30rpx;height: 20rpx;"
v-else-if="item.ssid >= -70 && item.ssid <= -61"
src="https://api.ccttiot.com/smartmeter/img/static/ujO9AZIuUSQvHcCBKqc4"
mode=""
></image>
<!-- 较弱信号-71 -80 -->
<image
style="width: 30rpx;height: 20rpx;"
v-else-if="item.ssid >= -80 && item.ssid <= -71"
src="https://api.ccttiot.com/smartmeter/img/static/uCSlbXZvho808NMCkIQP"
mode=""
></image>
<!-- 最弱信号-81 -100 -->
<image
style="width: 30rpx;height: 20rpx;"
v-else-if="item.ssid >= -100 && item.ssid <= -81"
src="https://api.ccttiot.com/smartmeter/img/static/u8bj3ZNi8Zssunk69HWc"
mode=""
></image>
</view>
</view>
<view class="add" style="color: #ccc;border: 1px solid #ccc;" v-if="item.userId && item.userId != null">
已录入
</view>
<view class="add" @click="btnadd(item)" v-else>
添加
</view>
</view>
</view>
</view>
<!-- 未搜索到设备 -->
<view class="wei" v-else>
<image src="https://api.ccttiot.com/smartmeter/img/static/uQ4g6A27FGtF34ebOtea" mode=""></image>
<view class="sbname">
搜索附近的设备失败
</view>
<view class="sbwz">
搜索失败点击重新搜索注意打开蓝牙
</view>
</view>
<!-- 点击搜索 -->
<view class="btnss" @click="handleSearch">
重新搜索
</view>
</view>
<!-- 自定义名称弹框 -->
<u-popup v-model="showNameDialog" mode="center" border-radius="14" width="600rpx">
<view class="custom-name-dialog">
<view class="dialog-title">设备名称</view>
<u-input v-model="customDeviceName" placeholder="请输入设备名称" />
<view class="sn-input-wrapper">
<u-input v-model="sn" placeholder="请输入SN" />
<view class="scan-btn" @click="scanSNCode">
<text class="scan-text">扫码</text>
</view>
</view>
<view class="dialog-btns">
<view class="btn cancel" @click="showNameDialog = false">取消</view>
<view class="btn confirm" @click="confirmAddDevice">确定</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
var xBlufi = require("@/components/blufi/xBlufi.js");
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
active: 1,
flag: true,
devicesList: [],
deviceId: '',
name: '',
mac: '',
flags: true,
userid: '',
arr: '',
jiaohuaqi: [],
getpre: [],
showNameDialog: false,
customDeviceName: '',
sn: '',
currentDevice: null,
searchTimer: null,
checkTimer: null,
isSearching: false,
searchTimeout: null,
throttleTimer: null,
lastSearchTime: 0,
searchInterval: 2000, // 搜索间隔2秒
displayQueue: [], // 显示队列
processingQueue: false, // 是否正在处理队列
newlist: [],
needRefresh: false, // 是否需要刷新设备状态
}
},
computed: {
sortedJiaohuaqi() {
return this.jiaohuaqi.slice().sort((a, b) => {
if (a.ssid === undefined) return 1;
if (b.ssid === undefined) return -1;
return Math.abs(a.ssid) - Math.abs(b.ssid);
});
}
},
// 分享到好友(会话)
onShareAppMessage: function() {
return {
title: '绿小能',
path: '/pages/index/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '绿小能',
query: '',
path: '/pages/index/index'
}
},
onLoad() {
this.getmodel()
this.getinfo()
// 检查蓝牙状态
uni.getBluetoothAdapterState({
success: function(res) {
console.log('蓝牙适配器状态:', res)
if (!res.available) {
// 蓝牙不可用(关闭或故障)
uni.showModal({
title: '提示',
content: '蓝牙不可用,请检查手机蓝牙是否打开',
showCancel: false,
confirmText: '知道了'
})
} else {
// 蓝牙正常,但找不到设备(设备断电、距离远、设备故障)
console.log('蓝牙正常但未找到设备,设备可能断电')
}
},
fail: function(err) {
console.error('获取蓝牙状态失败', err)
// 获取状态失败,尝试重新打开适配器检测
uni.openBluetoothAdapter({
success: function (res) {
console.log('蓝牙适配器正常,但未发现设备');
},
fail: function (err) {
console.error('蓝牙适配器初始化失败', err)
console.log('错误码:', err.errCode, '错误信息:', err.errMsg)
const errMsg = err.errMsg || ''
let content = ''
if(errMsg.includes('auth deny') || errMsg.includes('authorize')){
content = '蓝牙权限未授权,请在微信设置中开启蓝牙权限'
uni.showModal({
title: '提示',
content: content,
showCancel: false,
confirmText: '知道了'
})
}else if(errMsg.includes('not available') || errMsg.includes('unavailable')){
content = '蓝牙不可用,请检查手机蓝牙是否打开'
uni.showModal({
title: '提示',
content: content,
showCancel: false,
confirmText: '知道了'
})
}else if(errMsg.includes('open fail')){
content = '蓝牙打开失败,请检查手机蓝牙是否正常'
uni.showModal({
title: '提示',
content: content,
showCancel: false,
confirmText: '知道了'
})
}else if(errMsg.includes('already opened')){
console.log('蓝牙适配器已打开,但未找到设备')
}else if(errMsg.includes('system permission denied')){
content = '系统蓝牙权限被拒绝,请在设置中允许微信使用蓝牙'
uni.showModal({
title: '提示',
content: content,
showCancel: false,
confirmText: '知道了'
})
}else if(errMsg.includes('bluetooth service unavailable')){
content = '蓝牙服务不可用,请重启小程序后重试'
uni.showModal({
title: '提示',
content: content,
showCancel: false,
confirmText: '知道了'
})
}else{
content = '蓝牙初始化失败:' + (err.errMsg || '未知错误,请重试')
uni.showModal({
title: '提示',
content: content,
showCancel: false,
confirmText: '知道了'
})
}
}
})
}
})
},
onShow() {
// 检查是否需要刷新设备状态(从录入页面返回时)
if (this.needRefresh) {
this.needRefresh = false;
this.refreshDeviceStatus();
}
this.startSearch()
},
onHide() {
this.stopSearch()
},
onUnload() {
this.stopSearch()
},
methods: {
// 获取用户信息
getinfo() {
this.$u.get(`/system/user/profile`).then((res) => {
if (res.code == 200) {
this.userid = res.data.userId
uni.setStorageSync('user',res.data)
uni.setStorageSync('userId',res.data.userId)
} else if (res.code == 401) {
uni.showModal({
title: '提示',
content: '您还未登录,是否前去登录?',
success: function(res) {
if (res.confirm) {
uni.navigateTo({
url: '/pages/login/login'
})
} else if (res.cancel) {
}
}
})
}
})
},
// 点击添加按钮
btnadd(e) {
// 跳转到录入页面
const deviceInfo = {
name: e.name,
mac: e.name.slice(-12),
modelName: e.modelName || '网关',
pre: e.pre || 'CTWG:',
ssid: e.ssid
};
// 标记需要刷新,以便返回时更新设备状态
this.needRefresh = true;
uni.navigateTo({
url: `/page_newyemian/wgluru-add?deviceInfo=${encodeURIComponent(JSON.stringify(deviceInfo))}`
});
},
// 扫码获取SN
scanSNCode() {
uni.scanCode({
onlyFromCamera: true,
scanType: ['qrCode', 'barCode'],
success: res => {
console.log('扫码结果:', res);
// 解析扫码结果
let snValue = res.result;
// 如果是URL格式尝试提取SN参数
if (snValue.includes('?')) {
function getQueryParam(url, paramName) {
let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
let results = regex.exec(url);
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
}
let decodedValue = decodeURIComponent(snValue);
let extractedSN = getQueryParam(decodedValue, 's') || getQueryParam(decodedValue, 'sn');
if (extractedSN) {
snValue = extractedSN;
}
}
this.sn = snValue;
uni.showToast({
title: '扫码成功',
icon: 'success',
duration: 1500
});
},
fail: err => {
console.error('扫描失败:', err);
uni.showToast({
title: '扫描失败,请重试',
icon: 'none',
duration: 2000
});
}
});
},
// 确认添加设备
confirmAddDevice() {
if (!this.customDeviceName.trim()) {
uni.showToast({
title: '请输入设备名称',
icon: 'none'
});
return;
}
let mac = this.currentDevice.name.slice(-12);
let data = {
mac: mac,
// userId: this.userid,
pre: 'CTWG:',
deviceName: this.customDeviceName,
sn: this.sn || ''
}
console.log(data,'参数');
this.$u.post(`/app/device/addDevice`, data).then((res) => {
if (res.code == 200) {
// 更新设备状态为已录入
// const deviceIndex = this.jiaohuaqi.findIndex(item => item.name === mac)
// if (deviceIndex !== -1) {
// // 更新设备的userId标记为已录入
// this.$set(this.jiaohuaqi[deviceIndex], 'userId', this.userid)
// console.log('设备状态已更新为已录入:', mac)
// }
this.sn = ''
this.showNameDialog = false
uni.showToast({
title:'录入成功',
icon: 'success',
duration: 3000
})
} else {
console.log(res,'报错');
uni.showToast({
title: res.msg,
icon: 'none',
duration: 3000
})
}
})
},
getmodel() {
this.$u.get(`/app/getAllModelList`).then(res => {
if (res.code == 200) {
this.getpre = res.data
}
})
},
getpipei(pre) {
// 添加默认返回值防止undefined
return this.getpre.find(item => item.pre == pre) || {
modelName: '网关',
picture: 'https://lxnapi.ccttiot.com/77acb18b357d0532d2b7bf8e63044d59-1766023516118.png'
};
},
// 开始搜索
startSearch() {
uni.showLoading({
title: '搜索中...'
});
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(() => {
uni.hideLoading()
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.newlist.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_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
console.log(options.data);
options.data.forEach(item => {
if(item.localName.slice(0,5) == 'CTWG:'){
devicesarr.push(item.localName.slice(-12))
this.newlist.push(item)
}
})
this.arr = devicesarr
// 使用节流处理设备检查
if (this.throttleTimer) {
clearTimeout(this.throttleTimer)
}
this.throttleTimer = setTimeout(() => {
if (this.arr.length > 0) {
const data = { macList: 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_GET_DEVICE_LISTS_START:
if (!options.result) {
uni.showToast({
title: '蓝牙初始化失败',
icon: 'none',
duration: 3000
})
this.flags = false
return
}
break
}
},
btnss() {
this.stopSearch()
this.jiaohuaqi = []
this.displayQueue = []
this.processingQueue = false
this.startSearch()
},
// 处理搜索按钮点击
handleSearch() {
this.btnss()
},
// 刷新设备状态(从录入页面返回时调用)
refreshDeviceStatus() {
if (this.jiaohuaqi.length > 0 && this.arr && this.arr.length > 0) {
const data = { macList: this.arr }
this.$u.post(`/app/getExistListByMacs`, data)
.then(res => {
if (res.code === 200 && Array.isArray(res.data)) {
// 更新已录入设备的状态
res.data.forEach(existDevice => {
const deviceIndex = this.jiaohuaqi.findIndex(item => item.name === existDevice.mac)
if (deviceIndex !== -1) {
this.$set(this.jiaohuaqi[deviceIndex], 'userId', existDevice.userId)
}
})
}
})
.catch(error => {
console.error('刷新设备状态失败:', error)
})
}
},
}
}
</script>
<style lang="less">
::v-deep .u-input__input{
border: 1px solid #ccc;
border-radius: 10rpx;
padding-left: 10rpx;
box-sizing: border-box;
}
::v-deep .u-title {
margin-bottom: 22rpx;
}
::v-deep .uicon-nav-back {
margin-bottom: 22rpx;
}
.page {
padding-bottom: 300rpx;
box-sizing: border-box;
}
.wei {
text-align: center;
image {
width: 380rpx;
height: 394rpx;
}
.sbname {
font-size: 40rpx;
color: #3D3D3D;
margin-top: 80rpx;
width: 100%;
text-align: center;
}
.sbwz {
font-size: 28rpx;
color: #737B80;
margin-top: 24rpx;
width: 100%;
text-align: center;
}
}
.btnss {
width: 512rpx;
height: 92rpx;
background: #48893B;
border-radius: 46rpx 46rpx 46rpx 46rpx;
border-radius: 50rpx;
text-align: center;
line-height: 92rpx;
font-weight: 600;
font-size: 40rpx;
color: #FFFFFF;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 106rpx;
transition: all 0.3s ease;
}
.list {
width: 100%;
border-radius: 20rpx;
margin: auto;
margin-top: 72rpx;
will-change: transform; // 优化动画性能
.list_item {
margin-top: 18rpx;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 152rpx;
background: #FFFFFF;
border-radius: 20rpx;
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;
height: 94rpx;
}
.cen {
.name {
font-size: 32rpx;
color: #50565A;
}
.devmac {
font-size: 24rpx;
color: #BDBCBC;
margin-top: 6rpx;
}
}
.add {
width: 108rpx;
height: 60rpx;
background: #FFFFFF;
border: 3rpx solid #48893B;
filter: blur(0px);
border-radius: 20rpx;
text-align: center;
line-height: 60rpx;
font-size: 28rpx;
color: #48893B;
}
}
}
page {
width: 100%;
padding: 20rpx 64rpx;
box-sizing: border-box;
background-color: #fff;
}
.topone {
font-size: 36rpx;
color: #3D3D3D;
display: flex;
image {
width: 48rpx;
height: 48rpx;
}
}
.toptwo {
font-size: 28rpx;
color: #737B7F;
margin-top: 14rpx;
width: 100%;
padding-left: 48rpx;
box-sizing: border-box;
}
.custom-name-dialog {
background: #fff;
padding: 40rpx;
.dialog-title {
font-size: 32rpx;
color: #333;
text-align: center;
margin-bottom: 30rpx;
}
.sn-input-wrapper {
display: flex;
align-items: center;
gap: 20rpx;
margin-top: 20rpx;
::v-deep .u-input {
flex: 1;
}
.scan-btn {
min-width: 100rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
background: #48893B;
border-radius: 12rpx;
padding: 0 20rpx;
box-sizing: border-box;
transition: all 0.3s;
&:active {
opacity: 0.8;
transform: scale(0.95);
}
.scan-text {
font-size: 24rpx;
color: #fff;
font-weight: 500;
white-space: nowrap;
}
}
}
.dialog-btns {
display: flex;
justify-content: space-between;
margin-top: 40rpx;
.btn {
width: 240rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 40rpx;
font-size: 28rpx;
&.cancel {
background: #f5f5f5;
color: #666;
}
&.confirm {
background: #48893B;
color: #fff;
}
}
}
}
</style>