kaiguan-zfb/page_fenbao/device/lianjie.vue

496 lines
11 KiB
Vue
Raw Normal View History

2024-05-25 14:39:16 +08:00
<template>
<view class="pages">
<u-navbar title="添加设备" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='38'
height='50'></u-navbar>
<view class="title">
<text>连接设备</text>
<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/uCfe9273aC89tGOT7n1G" mode="widthFix"></image>
<text class="sm"> {{texts}} </text> -->
</view>
<view class="" style="margin: auto;text-align: center;width: 450rpx;height: 450rpx;">
<image v-if="picflag" style="width:100%;height: 100%;"
src="https://api.ccttiot.com/smartmeter/img/static/uirmkmrdVPmpvC4R5Nqc" mode=""></image>
<image v-else style="width:100%;height: 100%;"
src="https://api.ccttiot.com/smartmeter/img/static/uBJpCiwmT41SkwRFtVyB" mode=""></image>
</view>
<view class="anniu" @click="Search">
<button>返回</button>
</view>
<view class="containers" v-show="statusflag">
<uni-section>
<uni-load-more :status="status" />
</uni-section>
</view>
</view>
</template>
<script>
const app = getApp();
var xBlufi = require("@/page_components/blufi/xBlufi.js");
let _this = null;
export default {
data() {
return {
titleflag: false, //提示隐藏
bgc: {
backgroundColor: "#F7FAFE",
},
devicesList: [
// {name:'110000',
// mac:'11111'}
],
searching: false,
texts: '正在扫描蓝牙设备...',
btnflag: true,
tishiflag: false,
option: '',
bluthlist: [], //蓝牙数组
status: 'loading',
statusflag: false,
Bluetoothmac: '',
gps: {},
mac: '',
status: false,
storeId: '',
qrResult: '',
name: '',
deviceId: '',
picflag: false,
mac:''
}
},
onLoad(option) {
this.mac = option.mac
this.storeId = option.storeId
this.qrResult = 'CTKG-' + option.mac
this.picflag = true
console.log(this.qrResult, option,'101010');
xBlufi.initXBlufi(1);
console.log("xBlufi", xBlufi.XMQTT_SYSTEM);
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
// 停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
xBlufi.notifyConnectBle({
isStart: true,
deviceId: this.deviceId,
name: this.name
});
this.picflag = false
}, 3000)
},
onShow: function() {
// this.openBluetoothAdapter()
},
onUnload: function() {
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
},
onHide(){
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
},
onBeforeUnmount() {
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
},
mounted() {
this.videoContext = uni.createVideoContext('myVideo', this)
},
methods: {
btnyc() {
this.titleflag = false
},
funListenDeviceMsgEvent: function(options) {
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
let devicesarr = options.data
console.log(devicesarr,'devicesarrdevicesarr');
devicesarr.forEach(device => {
const mac = device.name.substring(6);
if (device.name == this.qrResult) {
this.deviceId = device.deviceId
this.name = device.name
// this.$u.get(`/app/device/${mac}/isBind`, data).then((res) => {
// if (res.data == false) {
// this.devicesList.push(device);
// console.log(this.devicesList);
// let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
// }
// })
}
});
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
console.log("连接回调:" + JSON.stringify(options));
if (options.result) {
uni.hideLoading();
// uni.showToast({
// title: '连接成功',
// icon: 'none'
// });
{
console.log("连接回调options.data.deviceId" + options.data.deviceId,
"连接回调options.data.name" + options.data.name);
let name = ''
let index = this.name.indexOf('-');
if (index !== -1) {
name = this.name.slice(index + 1);
}
let data = {
storeId:this.storeId,
mac:this.mac
}
this.$u.put('/app/device/bind', data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '绑定成功',
icon: 'none',
duration: 2000
});
uni.removeStorageSync('mac');
let systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'android') {
// 当前设备是 Android
uni.navigateTo({
url: '/page_components/wifilist/index?deviceId=' +
options.data.deviceId + '&name=' + options.data.name
})
} else if (systemInfo.platform === 'ios') {
// 当前设备是 iOS
uni.navigateTo({
url: '/page_fenbao/device/wifivideo?deviceId=' +
options.data.deviceId + '&name=' + options.data.name
})
}
} else {
uni.showToast({
title: '该设备已被绑定',
icon: 'none',
duration: 2000
});
// uni.navigateBack()
}
})
}
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
if (!options.result) {
console.log("蓝牙未开启", options);
uni.showToast({
title: '蓝牙未开启,如有疑问请查看查看常见问题',
icon: 'none',
duration: 3000
});
} else {
this.searching = true
//蓝牙搜索开始
// _this.setData({
// searching: true
// });
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
if (options.result) {
let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
let list = []
filteredDevices.forEach(device => {
// 从设备名称中提取 MAC 地址(假设 MAC 地址是设备名称的后6个字符
let macFromName = device.name.substring(device.name.length - 12);
// console.log(macFromName);
// 与 this.mac 进行比较
this.$u.get(`/app/device/${macFromName}/isBind`).then((res) => {
if (res.data == false) {
list.push(device)
} else {
}
})
});
setTimeout(() => {
this.devicesList = list
}, 200)
console.log('蓝牙停止搜索ok');
} else {
//蓝牙停止搜索失败
console.log('蓝牙停止搜索失败');
}
this.searching = false
// _this.setData({
// searching: false
// });
break;
}
},
//4、建立连接
createBLEConnection(e) {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
console.log(e, '蓝牙信息101010')
const deviceId = e.deviceId
this.Bluetoothmac = e.localName.substring(6) //从第七位开始截取 只取后面的mac号
this.mac = e.localName.substring(6)
let name = e.name;
xBlufi.notifyConnectBle({
isStart: true,
deviceId: e.deviceId,
name: e.name
});
let that = this
uni.getLocation({
type: 'wgs84',
success: function(lb) {
console.log('位置信息', lb);
that.gps.lat = lb.latitude;
that.gps.lon = lb.longitude;
},
fail: function(error) {
console.error('获取位置信息失败:', error);
that.gps.lat = 0;
that.gps.lon = 0;
}
})
},
// 点击重新搜索
Search() {
uni.navigateBack()
},
// 点击隐藏没有设备提示
btnhd() {
this.tishiflag = false
}
}
}
</script>
<style lang="scss">
page {
background-color: #F7FAFE !important;
}
.containers {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
padding-top: 130rpx;
box-sizing: border-box;
left: 0;
z-index: 999 !important;
/* background-color: #fff; */
z-index: 99;
}
.pages {
// padding-top: 136rpx !important;
padding: 0 66rpx;
box-sizing: border-box;
}
// text{
// display: block;
// }
.sm {
color: #77808D;
border-radius: 0rpx 0rpx 0rpx 0rpx;
// margin-top: 48rpx;
display: inline-block;
}
.title {
margin-bottom: 84rpx;
image {
display: inline-block;
width: 48rpx;
height: 48rpx;
vertical-align: bottom;
margin-right: 10rpx;
}
text:nth-child(1) {
font-weight: 400;
font-size: 96rpx;
color: #262B37;
line-height: 88rpx;
text-align: left;
font-style: normal;
text-transform: none;
display: block;
margin-bottom: 48rpx;
}
}
.dblist {
display: flex;
width: 100%;
margin-top: 34rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
padding: 20rpx 0 24rpx 18rpx;
box-sizing: border-box;
text-align: center;
border-radius: 10rpx;
.lt {
padding-left: 10rpx;
box-sizing: border-box;
margin-right: 38rpx;
image {
width: 42rpx;
// height: 112rpx;
}
}
.cen {
width: 370rpx;
padding-left: 10rpx;
box-sizing: border-box;
.name {
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
font-size: 32rpx;
color: #262B37;
line-height: 40rpx;
text-align: left;
font-style: normal;
text-transform: none;
margin-top: 10rpx;
}
.mac {
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
2024-06-05 18:07:50 +08:00
font-size: 26rpx;
2024-05-25 14:39:16 +08:00
color: #262B37;
line-height: 32rpx;
text-align: left;
font-style: normal;
text-transform: none;
margin-top: 16rpx;
}
}
.rt {
margin-top: 22rpx;
text {
display: inline-block;
width: 108rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0);
border: 2rpx solid #8883F0;
filter: blur(0px);
border-radius: 20rpx;
text-align: center;
line-height: 60rpx;
color: #8883F0;
}
}
}
.anniu {
padding: 0 90rpx;
width: 100%;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 112rpx;
button {
background: #8883F0;
border-radius: 52rpx 52rpx 52rpx 52rpx;
color: #fff;
}
}
.mask {
width: 622rpx;
height: 710rpx;
background: #FFFFFF;
filter: blur(0px);
border-radius: 20rpx;
position: fixed;
top: 475rpx;
left: 50%;
transform: translateX(-50%);
padding-top: 38rpx;
padding-left: 60rpx;
padding-right: 60rpx;
box-sizing: border-box;
.titles {
font-size: 48rpx;
color: #262B37;
line-height: 70rpx;
text-align: center;
margin-bottom: 24rpx;
}
text {
display: block;
font-size: 32rpx;
color: #262B37;
line-height: 56rpx;
text-align: left;
}
button {
margin-top: 46rpx;
width: 266rpx;
height: 96rpx;
background: #8883F0;
border-radius: 52rpx 52rpx 52rpx 52rpx;
color: #fff;
text-align: center;
line-height: 96rpx;
}
}
</style>