<template>
<view class="pages">
<u-navbar title="设备录入" :border-bottom="false" :background="bgc" title-size='38' title-color='#fff'
back-icon-color="#fff" 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="dblist" v-for="(item, index) in devicesLists" :key="index">
<view class="lt">
<image src="https://api.ccttiot.com/smartmeter/img/static/uoQO0pUZ1UHcW5uVKkuR" mode=""></image>
</view>
<view class="cen">
<view class="name">
智能开关录入
</view>
<view class="mac">
MAC：{{item.localName.substring(5)}}
</view>
</view>
<view class="rt">
<!-- <text style="margin-bottom: 10rpx;" :id="item.deviceId" @tap="createBLEConnections(item)">响铃</text> -->
<text :id="item.deviceId" @click="createBLEConnection(item)">录入</text>
</view>
</view>
<view class="anniu" @click="Search">
<button>重新扫描</button>
</view>
<view class="mask" v-if="titleflag">
<view class="titles">
温馨提示
</view>
<text>未扫描到附近未绑定设备:</text>
<text>1.确保待连接设备在附近且蓝牙处于打开状态。</text>
<text>2.确保设备未与其他设备进行蓝牙连接。</text>
<text>确保设备未被添加过。</text>
<text>...</text>
<button @click="btnyc">好的</button>
</view>
<view v-if="mengcflag" class="mengc" style="width: 100%;height: 100vh;background-color: #000;opacity: .5;position: fixed;top: 0;left: 0;"></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 {
mengcflag:false,
titleflag: false, //提示隐藏
bgc: {
backgroundColor: "#F7FAFE",
},
devicesList: [
// {name:'110000',
// mac:'11111'}
],
devicesLists: [],
searching: false,
texts: '正在扫描设备...',
btnflag: true,
tishiflag: false,
option: '',
bluthlist: [], //蓝牙数组
status: 'loading',
statusflag: false,
Bluetoothmac: '',
gps: {},
mac: '',
status: false,
storeId: '',
bgc: {
backgroundColor: "#8883f0",
},
lurulist: [],
}
},
onLoad(option) {
// console.log(option);
this.getluru()
this.storeId = option.sn
xBlufi.initXBlufi(1);
console.log("xBlufi", xBlufi.XMQTT_SYSTEM);
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
// 两秒后停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
this.status = true
}, 1500)
},
onShow: function() {
// this.openBluetoothAdapter()
// xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
// xBlufi.notifyStartDiscoverBle({
// 'isStart': false
// });
},
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
});
},
// 分享到好友（会话）
onShareAppMessage: function () {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function () {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
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,100100);
devicesarr.forEach(device => {
const mac = device.name.substring(5);
if (device.name.substring(0, 4) == "CTKG") {
this.devicesList.push(device);
let uniqueDevicesList = Array.from(new Set(this.devicesList));
this.devicesLists = uniqueDevicesList.filter(device => {
const deviceId = device.name.substring(5);
return !this.lurulist.includes(deviceId);
})
// 将去重后的数组重新赋值给 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 data = {
// sn:this.storeId,
// mac:this.mac
// }
// this.$u.post('/app/device', data).then((res) => {
// if (res.code == 200) {
// uni.showToast({
// title: '录入成功',
// icon: 'none',
// duration: 2000
// })
// uni.hideLoading()
// uni.removeStorageSync('mac');
// let vm = this
// uni.showModal({
// title: '提示',
// content: '你已录入成功，是否返回首页？',
// success: function (res) {
// if (res.confirm) {
// setTimeout(()=>{
// uni.navigateTo({
// url:'/pages/shouye/index'
// })
// },1000)
// } else if (res.cancel) {
// console.log('用户点击了取消');
// }
// }
// })
// } else {
// uni.hideLoading()
// uni.showToast({
// title: res.msg,
// icon: 'none',
// duration: 2000
// });
// }
// })
}
}
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));
// console.log(uniqueDevicesList,'uniqueDevicesListuniqueDevicesList');
// 将去重后的数组重新赋值给 this.devicesList
this.devicesLists = uniqueDevicesList.filter(device => {
const deviceId = device.name.substring(5);
return !this.lurulist.includes(deviceId);
})
console.log('蓝牙停止搜索ok')
if (this.devicesLists.length == 0) {
this.titleflag = true
}
} else {
//蓝牙停止搜索失败
console.log('蓝牙停止搜索失败');
}
this.searching = false
// _this.setData({
// searching: false
// });
break;
}
},
// createBLEConnections(e) {
// xBlufi.notifyStartDiscoverBle({
// 'isStart': false
// });
// console.log(e, '蓝牙信息101010')
// const deviceId = e.deviceId
// this.Bluetoothmac = e.localName.substring(5) //从第七位开始截取 只取后面的mac号
// this.mac = e.localName.substring(5)
// let name = e.name;
// xBlufi.notifyConnectBle({
// isStart: true,
// deviceId: e.deviceId,
// name:e.name
// })
// // 发送响铃
// xBlufi.notifySendCustomData({
// customData: "BEEP2@"
// })
// let that = this
// },
// 请求已经录入设备的mac
getluru() {
this.$u.get(`/app/device/listAllMac`).then(res => {
if (res.code == 200) {
this.lurulist = res.data
}
})
},
//4、建立连接
createBLEConnection(e) {
this.mengcflag = true
uni.showLoading({
title: '录入中...'
})
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
// console.log(e, '蓝牙信息101010')
this.mac = e.name.substring(5)
// console.log(this.mac, '54545454');
// xBlufi.notifyConnectBle({
// isStart: true,
// deviceId: e.deviceId,
// name:e.name
// })
// 录入设备
let data = {
sn: this.storeId,
mac: this.mac
}
this.$u.post('/app/device', data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '设备录入成功',
icon: 'success',
duration: 2000
})
this.mengcflag = false
uni.hideLoading()
setTimeout(()=>{
uni.navigateBack()
},2000)
uni.removeStorageSync('mac');
// uni.showModal({
// title: '提示',
// content: '你已录入成功，是否返回首页？',
// success: function (res) {
// if (res.confirm) {
// console.log('1111');
// setTimeout(()=>{
// uni.reLaunch({
// url:'/pages/shouye/index'
// })
// },500)
// } else if (res.cancel) {
// console.log('用户点击了取消');
// }
// }
// })
} else {
this.mengcflag = false
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
},
// 点击重新搜索
Search() {
// console.log(1);
// if (this.status) {
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
// 重新搜索清空蓝牙数组
this.bluthlist = []
this.devicesList = []
this.devicesLists = []
// 重新搜索
// this.startBluetoothDevicesDiscovery()
this.statusflag = true
this.texts = '正在扫描蓝牙设备...'
setTimeout(() => {
this.statusflag = false
if (this.searching) {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
// 判断是否存在设备
if (this.devicesList.length == 0) {
this.tishiflag = true
this.texts = '扫描完毕，暂无发现设备'
} else {
this.texts = '扫描到以下设备，请点击录入！'
}
} else {
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
}
}, 2000)
// }
},
// 点击隐藏没有设备提示
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;
margin-top: 50rpx;
image {
display: inline-block;
width: 48rpx;
height: 48rpx;
vertical-align: bottom;
margin-right: 10rpx;
}
text:nth-child(1) {
font-weight: 400;
font-size: 66rpx;
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;
font-size: 26rpx;
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>