308 lines
6.5 KiB
Vue
308 lines
6.5 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="deviceDetail">
|
|
<view class="imgContent">
|
|
<image src="/static/images/BLEAdd/addBleDevice.png" class="titleIco" mode="aspectFit">
|
|
</image>
|
|
</view>
|
|
<view class="deviceName">
|
|
蓝牙名:{{device.name}}
|
|
</view>
|
|
<view class="deviceName">
|
|
设备名:{{device.deviceName}}
|
|
</view>
|
|
<view class="deviceId">
|
|
ID:{{device.deviceId}}
|
|
</view>
|
|
<view class="bound" v-bind:class="boundStatu">
|
|
{{Statu.boundRemark}}
|
|
</view>
|
|
</view>
|
|
<view class="btnLink" @click="Link()">
|
|
连接
|
|
</view>
|
|
|
|
<global-loading ref="loading" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/utils/request.js';
|
|
import bleTool from '@/utils/BleHelper.js';
|
|
import {
|
|
showLoading,
|
|
hideLoading,
|
|
updateLoading
|
|
} from '@/utils/loading.js';
|
|
|
|
const pagePath="pages/common/addBLE/LinkBle";
|
|
|
|
var these = null;
|
|
var eventChannel = null;
|
|
var ble = null;
|
|
export default {
|
|
data() {
|
|
return {
|
|
Statu: {
|
|
bound: null
|
|
},
|
|
device: {
|
|
"deviceId": "",
|
|
"name": "",
|
|
"deviceName": "",
|
|
"RSSI": -37,
|
|
"localName": "",
|
|
"advertisServiceUUIDs": [
|
|
|
|
],
|
|
"linkStatu": false,
|
|
"macAddress": ""
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
boundStatu: function() {
|
|
if (this.Statu.bound === null) {
|
|
return "displayNone"
|
|
}
|
|
if (this.Statu.bound) {
|
|
return "green"
|
|
} else {
|
|
return "red";
|
|
}
|
|
}
|
|
},
|
|
onBackPress() {
|
|
console.log("返回时断开蓝牙连接,取消订阅");
|
|
ble.disconnectDevice(these.device.deviceId);
|
|
ble.removeReceiveCallback(pagePath);
|
|
},
|
|
onUnload() {
|
|
console.log("返回时断开蓝牙连接,取消订阅");
|
|
ble.removeReceiveCallback(pagePath);
|
|
},
|
|
onLoad(option) {
|
|
these = this;
|
|
ble = bleTool.getBleTool();
|
|
ble.addReceiveCallback((receive,f,path) => {
|
|
console.log("收到设备消息，", receive);
|
|
if (these.device.deviceId == receive.deviceId) {
|
|
// console.log("11111");
|
|
|
|
if (receive.bytes[0] == 0xFC || receive.str.indexOf('mac address:') == 0) {
|
|
if (f && f.macAddress) {
|
|
these.device.macAddress = f.macAddress;
|
|
// console.log("222222");
|
|
these.initDevice();
|
|
}
|
|
}
|
|
}
|
|
},pagePath);
|
|
eventChannel = this.getOpenerEventChannel();
|
|
eventChannel.on('LinkItem', function(data) {
|
|
console.log("data=",data);
|
|
let f = ble.data.LinkedList.find((v) => {
|
|
return v.deviceId == data.deviceId;
|
|
});
|
|
if (f) {
|
|
let keys=Object.keys(f);
|
|
keys.forEach((v,index)=>{
|
|
these.device[v]=f[v];
|
|
})
|
|
console.log("LinkedList=",ble.data.LinkedList)
|
|
console.log("f=", f);
|
|
console.log("获取到设备", these.device);
|
|
if (f.macAddress) {
|
|
these.device.macAddress = f.macAddress;
|
|
|
|
these.initDevice();
|
|
}
|
|
} else {
|
|
console.log("未获取到设备");
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
|
|
initDevice: function() {
|
|
showLoading(these, {
|
|
text: '正在获取设备信息'
|
|
});
|
|
console.log("these.device=",these.device);
|
|
request({
|
|
url: '/app/device/getDeviceInfoByDeviceMac',
|
|
method: 'GET',
|
|
data: {
|
|
deviceMac: these.device.macAddress
|
|
}
|
|
}).then(res => {
|
|
console.log("获取设备信息", res);
|
|
if (res && res.code == 200) {
|
|
let data = res.data;
|
|
if (data) {
|
|
let keys = Object.keys(data);
|
|
ble.data.LinkedList.find((v) => {
|
|
if(v.deviceId == these.device.deviceId){
|
|
for (var i = 0; i < keys.length; i++) {
|
|
let key = keys[i];
|
|
v[key] = data[key];
|
|
// console.log("key="+key);
|
|
// console.log("value="+data[key]);
|
|
|
|
|
|
these.$set(these.device, key, data[key]);
|
|
|
|
}
|
|
|
|
ble.setBleData();
|
|
}
|
|
});
|
|
|
|
console.log("device=",these.device);
|
|
console.log("LinkedList=",ble.data.LinkedList);
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}).catch((ex) => {
|
|
console.log("获取设备出现异常:", ex);
|
|
}).finally(() => {
|
|
hideLoading(these);
|
|
});
|
|
},
|
|
Link() {
|
|
// 调用绑定设备接口
|
|
|
|
let f = ble.data.LinkedList.find((v) => {
|
|
return v.deviceId == these.device.deviceId;
|
|
});
|
|
if (!f) {
|
|
these.Statu.bound = false;
|
|
these.Statu.boundRemark = "蓝牙连接不成功";
|
|
return;
|
|
}
|
|
if (!f.macAddress) {
|
|
these.Statu.bound = false;
|
|
these.Statu.boundRemark = "设备上报Mac地址异常";
|
|
return;
|
|
}
|
|
these.Statu.bound = null;
|
|
these.Statu.boundRemark = "";
|
|
showLoading(these, {
|
|
|
|
text: "连接中..."
|
|
})
|
|
let promise = request({
|
|
url: '/app/device/bind',
|
|
method: 'POST',
|
|
data: {
|
|
deviceImei: '',
|
|
deviceMac: these.device.macAddress,
|
|
communicationMode: '1', //0是4g,1是蓝牙
|
|
}
|
|
});
|
|
promise.then((res) => {
|
|
console.log("1111" + JSON.stringify(res));
|
|
if (res.code == 200) {
|
|
these.Statu.bound = true;
|
|
these.Statu.boundRemark = "设备绑定成功!";
|
|
ble.removeReceiveCallback(pagePath);
|
|
|
|
uni.$emit("refreshDeviceList");
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: "/pages/common/index/index"
|
|
});
|
|
}, 500);
|
|
} else {
|
|
these.Statu.bound = false;
|
|
these.Statu.boundRemark = res.msg;
|
|
}
|
|
}).catch((ex) => {
|
|
these.Statu.bound = false;
|
|
these.Statu.boundRemark = '出现了未知的异常,操作失败';
|
|
}).finally(() => {
|
|
hideLoading(this);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
background-color: #1d1d1d;
|
|
color: #ffffffde;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
height: auto;
|
|
font-family: "PingFang SC";
|
|
}
|
|
|
|
.deviceDetail {
|
|
margin: 200rpx auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.imgContent,
|
|
.titleIco {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.deviceId {
|
|
color: rgba(255, 255, 255, 0.87);
|
|
font-size: 32rpx;
|
|
|
|
line-height: 44rpx;
|
|
letter-spacing: 0.14rpx;
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
.btnLink {
|
|
position: fixed;
|
|
bottom: 30rpx;
|
|
left: 30rpx;
|
|
right: 30rpx;
|
|
width: calc(100% - 60rpx);
|
|
border-radius: 91px;
|
|
height: 90rpx;
|
|
background: rgba(187, 230, 0, 1);
|
|
color: rgba(35, 35, 35, 1);
|
|
|
|
|
|
font-size: 32rpx;
|
|
line-height: 90rpx;
|
|
letter-spacing: 12rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.bound,
|
|
.deviceName {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
line-height: 44rpx;
|
|
letter-spacing: 0.14rpx;
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
.displayNone {
|
|
display: none !important;
|
|
}
|
|
|
|
.green {
|
|
color: rgba(187, 230, 0, 1);
|
|
}
|
|
|
|
.red {
|
|
color: rgba(245, 80, 80, 1);
|
|
}
|
|
</style> |