276 lines
7.2 KiB
Vue
276 lines
7.2 KiB
Vue
<template>
|
||
<view class="fullHeight">
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
{{pageTitle}}
|
||
</view>
|
||
</headers>
|
||
<view class="equip-content">
|
||
<view class="title">
|
||
<!-- <text style="color: #2A2B5B; opacity: 0.4;">·设备列表·</text> -->
|
||
<button type="primary" plain @click="getList()" size="mini" class="searchBluetooth">
|
||
<icon v-show="!isSearching" class="searchIcon" color="#007aff" type="search" size="15" />
|
||
<loadingGig v-show="isSearching"></loadingGig>
|
||
<!-- <image src="/static/loading.png" class="loadingIcon"></image> -->
|
||
{{isSearching?'搜索蓝牙中':'搜索蓝牙'}}
|
||
</button>
|
||
</view>
|
||
<view class="listItem"
|
||
:class="(bleDeviceId==item.deviceId&&isLinkFinished=='连接成功')?'linkFinishedItem':'value'"
|
||
v-for="(item,index) in bluetooth" @click="conn(item)" :key="index">
|
||
<view class="item_name">蓝牙编码：<text class="value">{{item.name?item.name:item.deviceId}}</text></view>
|
||
<view class="item_name">信号强度：<text class="value">{{item.RSSI}}</text></view>
|
||
<!-- <view class="item_name">边接状态：<text class="value">{{isLink[index]==0?'未连接':isLink[index]==1?'连接中...':isLink[index]==2?'连接成功':
|
||
isLink[index]==3?'连接失败':isLink[index]==4?'已断开':''
|
||
}}</text></view> -->
|
||
<view class="item_name">连接状态：<text
|
||
:class="bleDeviceId==item.deviceId?'primaryText':'value'">{{bleDeviceId==item.deviceId?isLinkFinished:'未连接'}}</text>
|
||
</view>
|
||
<view class="animateBox" v-show="bleDeviceId==item.deviceId&&isLinkFinished=='连接中...'">
|
||
|
||
</view>
|
||
</view>
|
||
<view class="placeholderBox" v-if="bluetooth.length==0">
|
||
<image class="noDataImg" src="/static/noData.png"></image>
|
||
<view class="text">暂未搜到蓝牙设备</view>
|
||
</view>
|
||
</view>
|
||
<view class="bigOperateBtn" @click="toMeasurePage">
|
||
下一步
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getBlooth,
|
||
createBLE,
|
||
DeviceFound
|
||
} from '@/static/js/BLEConn.js';
|
||
import loadingGig from "@/components/loadingGig.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
pageTitle: '设备列表',
|
||
isSearching: false,
|
||
bleDeviceId: '',
|
||
bluetooth: [],
|
||
bleName: '',
|
||
isLinkFinished: ''
|
||
}
|
||
},
|
||
components: {
|
||
loadingGig
|
||
},
|
||
onLoad(options) {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
toMeasurePage() {
|
||
uni.navigateTo({
|
||
url: './taskDetails'
|
||
});
|
||
},
|
||
async closeDevConnect(id) {
|
||
if (this.bleDeviceId) {
|
||
let that = this
|
||
uni.closeBLEConnection({
|
||
deviceId: this.bleDeviceId,
|
||
success(res) {
|
||
console.log('断开上一个连接的蓝牙')
|
||
that.bleDeviceId = ''
|
||
that.bleName = ''
|
||
that.isLinkFinished = '未连接'
|
||
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 2. 选中蓝牙并连接
|
||
async conn(item) {
|
||
// console.log(item)
|
||
// uni.showLoading({
|
||
// title: "正在连接...",
|
||
// icon: "loading",
|
||
// mask: true
|
||
// })
|
||
// await this.closeDevConnect(item.deviceId)
|
||
if (this.bleDeviceId) {
|
||
let that = this
|
||
// that.closeBle().then(res => {
|
||
// // this.closeDiv = false
|
||
// // this.clear()
|
||
// // uni.hideLoading()
|
||
// console.log('断开蓝牙成功')
|
||
// }).catch(err => {
|
||
// // uni.hideLoading()
|
||
// console.log('断开蓝牙失败')
|
||
// })
|
||
|
||
// return new Promise((resolve, reject) => {
|
||
uni.closeBLEConnection({
|
||
deviceId: this.bleDeviceId,
|
||
success(res) {
|
||
console.log('断开上一个连接的蓝牙')
|
||
if (that.bleDeviceId == item.deviceId && (that.isLinkFinished == '连接成功')) {
|
||
that.bleDeviceId = ''
|
||
that.bleName = ''
|
||
that.isLinkFinished = '未连接'
|
||
uni.showToast({
|
||
title: '已断开连接'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
// })
|
||
if (this.bleDeviceId == item.deviceId && (that.isLinkFinished != '连接失败')) {
|
||
console.log('停止接下来的操作')
|
||
return false
|
||
}
|
||
}
|
||
// console.log('执行完closeDevConnect')
|
||
this.bleDeviceId = item.deviceId
|
||
this.bleName = item.name
|
||
this.isLinkFinished = '连接中...'
|
||
// connBLESuc++
|
||
let create = true // 判断有没有进入createBLE
|
||
// '49535343-FE7D-4AE5-8FA9-9FAFD205E455'
|
||
await createBLE(item, '00001800-0000-1000-8000-00805F9B34FB').then(res => {
|
||
console.log('createBLE ' + res)
|
||
create = false
|
||
this.isLinkFinished = '连接成功'
|
||
// this.addDevice(item.name, item.deviceId)
|
||
}).catch(err => {
|
||
console.log('createBLE error')
|
||
// this.isLinkFinished = '连接失败'
|
||
create = false
|
||
|
||
})
|
||
},
|
||
// 搜索蓝牙列表
|
||
async getList() {
|
||
// uni.showLoading({
|
||
// title: '蓝牙搜索中...',
|
||
// icon: 'none'
|
||
// })
|
||
this.isSearching = true
|
||
var flag = false // 标记是否进入了getBLooth
|
||
this.closeDevConnect()
|
||
await getBlooth().then(res => {
|
||
console.log(res, '6666666666666')
|
||
flag = true
|
||
this.isSearching = false
|
||
uni.showToast({
|
||
title: '蓝牙搜索完成',
|
||
icon: 'none'
|
||
})
|
||
// console.log('第' + times + '次')
|
||
// if (res.devices.length == 0 && times <= 3) {
|
||
// times++
|
||
// this.getList()
|
||
// } else {
|
||
this.bluetooth = res.devices
|
||
if (res.devices.length == 0) {
|
||
// uni.showToast({
|
||
// title: '请先开启手机定位',
|
||
// icon: 'none',
|
||
// mask: true
|
||
// })
|
||
this.checkOpenGPSServiceByAndroid()
|
||
}
|
||
console.log('蓝牙设备列表')
|
||
console.log(this.bluetooth)
|
||
// uni.hideLoading()
|
||
// times = 1
|
||
// // 打开弹框
|
||
// this.$refs.popup.open()
|
||
// this.scanBLE = true
|
||
// }
|
||
}).catch(err => {
|
||
flag = false
|
||
// times = 1
|
||
})
|
||
// console.log(flag)
|
||
if (!flag) {
|
||
this.isSearching = false
|
||
// uni.hideLoading()
|
||
let txt = ''
|
||
if (this.platform == 'android') {
|
||
txt = '和定位'
|
||
}
|
||
uni.showToast({
|
||
title: '请先开启手机蓝牙' + txt,
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
console.log('没有进入getBlooth')
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.equip-content {
|
||
.title {
|
||
text-align: right;
|
||
font-size: 30rpx;
|
||
letter-spacing: 1.4px;
|
||
padding: 8rpx 0;
|
||
border-bottom: 1px solid #ccc;
|
||
|
||
.searchBluetooth {
|
||
position: relative;
|
||
|
||
.searchIcon {
|
||
vertical-align: middle;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.listItem {
|
||
line-height: 52rpx;
|
||
margin-top: 30rpx;
|
||
box-shadow: 0 4rpx 20rpx 0 rgba(212, 220, 236, 0.65);
|
||
border-radius: 10rpx;
|
||
padding: 20rpx 30rpx;
|
||
font-size: 28rpx;
|
||
position: relative;
|
||
|
||
.item_name {
|
||
color: rgba(42, 43, 91, 0.6);
|
||
}
|
||
|
||
.animateBox {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 5%;
|
||
width: 80px;
|
||
height: 90%;
|
||
background: linear-gradient(to right, rgba(219, 231, 243, 0.2), rgba(219, 231, 243, 0.8), #dbe7f3);
|
||
filter: blur(4px);
|
||
animation: mymove 1s infinite;
|
||
}
|
||
}
|
||
|
||
.linkFinishedItem {
|
||
background-color: rgba(219, 231, 243, 0.2);
|
||
}
|
||
}
|
||
|
||
.bigOperateBtn {
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
left: 30rpx;
|
||
width: calc(100% - 60rpx);
|
||
background: #488DEC;
|
||
box-shadow: 0px 4px 8px 0px rgba(43, 141, 243, 0.42);
|
||
border-radius: 50rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
color: white;
|
||
font-size: 40rpx;
|
||
text-align: center;
|
||
}
|
||
</style> |