You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
6.9 KiB
299 lines
6.9 KiB
<template>
|
|
<view class="device-container">
|
|
<text class="title-rev">数据接收 : </text>
|
|
<button class="bt-clear" type="primary" @click="btClearTap" hover-start-time="0">清空</button>
|
|
<checkbox-group @change="checkScroll" class="checkbox-scroll">
|
|
<checkbox checked="true"></checkbox>
|
|
<text>滚动</text>
|
|
</checkbox-group>
|
|
<checkbox-group @change="checkRevHex" class="checkbox-rev-hex">
|
|
<checkbox></checkbox>
|
|
<text>Hex</text>
|
|
</checkbox-group>
|
|
<view class="scroll-view-container">
|
|
<scroll-view class="scroll-view-rev" scroll-y="true" :scroll-into-view="scrollIntoView">
|
|
<view class="view-rev-gap"></view>
|
|
<text class="text-rev" user-select="true" selectable="true">{{textRevData}}</text>
|
|
<view class="view-rev-gap"></view>
|
|
<view id="scroll-view-bottom"></view>
|
|
<view id="scroll-view-bottom2"></view>
|
|
</scroll-view>
|
|
</view>
|
|
<text class="title-send">数据发送 : </text>
|
|
<checkbox-group @change="checkSendHex" class="checkbox-send-hex">
|
|
<checkbox></checkbox>
|
|
<text>Hex</text>
|
|
</checkbox-group>
|
|
<view class="view-input-send">
|
|
<textarea class="input-send" maxlength="-1" show-count="false" @input="inputSendData" />
|
|
</view>
|
|
<view class="view-bt-send">
|
|
<button class="bt-send" type="primary" @click="btSendTap" hover-start-time="0">发送</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// #ifdef APP
|
|
import ecUI from '@/utils/ecUI.js'
|
|
import ecBLE from '@/utils/ecBLE/ecBLE.js'
|
|
// #endif
|
|
// #ifdef MP
|
|
const ecUI = require('@/utils/ecUI.js')
|
|
const ecBLE = require('@/utils/ecBLE/ecBLE.js')
|
|
// #endif
|
|
let ctx
|
|
let isCheckScroll = true
|
|
let isCheckRevHex = false
|
|
let isCheckSendHex = false
|
|
let sendData = ''
|
|
export default {
|
|
data() {
|
|
return {
|
|
textRevData: '',
|
|
scrollIntoView: 'scroll-view-bottom',
|
|
}
|
|
},
|
|
onLoad() {
|
|
ctx = this
|
|
isCheckScroll = true
|
|
isCheckRevHex = false
|
|
isCheckSendHex = false
|
|
sendData = ''
|
|
|
|
//on disconnect
|
|
ecBLE.onBLEConnectionStateChange(() => {
|
|
ecUI.showModal('提示', '设备断开连接')
|
|
})
|
|
//receive data
|
|
ecBLE.onBLECharacteristicValueChange((str, strHex) => {
|
|
let data =
|
|
ctx.textRevData +
|
|
'[' +
|
|
ctx.dateFormat('hh:mm:ss,S', new Date()) +
|
|
']: ' +
|
|
(isCheckRevHex ? strHex.replace(/[0-9a-fA-F]{2}/g, ' $&') : str) +
|
|
'\r\n'
|
|
ctx.textRevData = data
|
|
if (isCheckScroll) {
|
|
if (ctx.scrollIntoView === "scroll-view-bottom") {
|
|
ctx.scrollIntoView = "scroll-view-bottom2"
|
|
} else {
|
|
ctx.scrollIntoView = "scroll-view-bottom"
|
|
}
|
|
}
|
|
})
|
|
},
|
|
onUnload() {
|
|
ecBLE.onBLEConnectionStateChange(() => {})
|
|
ecBLE.onBLECharacteristicValueChange(() => {})
|
|
ecBLE.closeBLEConnection()
|
|
},
|
|
methods: {
|
|
checkScroll(e) {
|
|
if (e.detail.value.length) isCheckScroll = true
|
|
else isCheckScroll = false
|
|
},
|
|
checkRevHex(e) {
|
|
if (e.detail.value.length) isCheckRevHex = true
|
|
else isCheckRevHex = false
|
|
},
|
|
checkSendHex(e) {
|
|
if (e.detail.value.length) isCheckSendHex = true
|
|
else isCheckSendHex = false
|
|
},
|
|
inputSendData(e) {
|
|
sendData = e.detail.value
|
|
},
|
|
btClearTap() {
|
|
ctx.textRevData = ''
|
|
},
|
|
btSendTap() {
|
|
if (isCheckSendHex) {
|
|
let data = sendData
|
|
.replace(/\s*/g, '')
|
|
.replace(/\n/g, '')
|
|
.replace(/\r/g, '')
|
|
if (data.length === 0) {
|
|
ecUI.showModal('提示', '请输入要发送的数据')
|
|
return
|
|
}
|
|
if (data.length % 2 != 0) {
|
|
ecUI.showModal('提示', '数据长度只能是双数')
|
|
return
|
|
}
|
|
if (data.length > 488) {
|
|
ecUI.showModal('提示', '最多只能发送244字节')
|
|
return
|
|
}
|
|
if (!new RegExp('^[0-9a-fA-F]*$').test(data)) {
|
|
ecUI.showModal('提示', '数据格式错误，只能是0-9,a-f,A-F')
|
|
return
|
|
}
|
|
ecBLE.writeBLECharacteristicValue(data, true)
|
|
} else {
|
|
if (sendData.length === 0) {
|
|
ecUI.showModal('提示', '请输入要发送的数据')
|
|
return
|
|
}
|
|
let tempSendData = sendData.replace(/\n/g, '\r\n')
|
|
if (tempSendData.length > 244) {
|
|
ecUI.showModal('提示', '最多只能发送244字节')
|
|
return
|
|
}
|
|
ecBLE.writeBLECharacteristicValue(tempSendData, false)
|
|
}
|
|
},
|
|
dateFormat(fmt, date) {
|
|
var o = {
|
|
'M+': date.getMonth() + 1, //月份
|
|
'd+': date.getDate(), //日
|
|
'h+': date.getHours(), //小时
|
|
'm+': date.getMinutes(), //分
|
|
's+': date.getSeconds(), //秒
|
|
'q+': Math.floor((date.getMonth() + 3) / 3), //季度
|
|
S: date.getMilliseconds(), //毫秒
|
|
}
|
|
if (/(y+)/.test(fmt))
|
|
fmt = fmt.replace(
|
|
RegExp.$1,
|
|
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
|
|
)
|
|
for (var k in o)
|
|
if (new RegExp('(' + k + ')').test(fmt)) {
|
|
// console.log(RegExp.$1.length)
|
|
// console.log(o[k])
|
|
fmt = fmt.replace(
|
|
RegExp.$1,
|
|
RegExp.$1.length == 1 ?
|
|
(o[k] + '').padStart(3, '0') :
|
|
('00' + o[k]).substr(('' + o[k]).length)
|
|
)
|
|
}
|
|
return fmt
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.device-container {
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.title-rev {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 20px;
|
|
line-height: 45px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.bt-clear {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 165px;
|
|
width: 55px !important;
|
|
height: 29px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.checkbox-scroll {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 90px;
|
|
height: 45px;
|
|
font-size: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.checkbox-rev-hex {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 20px;
|
|
height: 45px;
|
|
font-size: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.scroll-view-container {
|
|
position: absolute;
|
|
top: 45px;
|
|
left: 20px;
|
|
right: 20px;
|
|
padding: 0 3px 0 5px;
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
.scroll-view-rev {
|
|
height: 150px;
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
.view-rev-gap {
|
|
height: 5px;
|
|
}
|
|
|
|
.text-rev {
|
|
font-size: 14px;
|
|
word-break: break-all;
|
|
font-family: Monospace;
|
|
}
|
|
|
|
.title-send {
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 20px;
|
|
font-size: 17px;
|
|
line-height: 45px;
|
|
}
|
|
|
|
.checkbox-send-hex {
|
|
position: absolute;
|
|
top: 200px;
|
|
right: 20px;
|
|
height: 45px;
|
|
font-size: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.view-input-send {
|
|
position: absolute;
|
|
top: 245px;
|
|
left: 20px;
|
|
right: 20px;
|
|
padding: 2px 3px;
|
|
background-color: #E5E5E5;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.input-send {
|
|
height: 84px;
|
|
width: 100%;
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
.view-bt-send {
|
|
position: absolute;
|
|
top: 370px;
|
|
left: 20px;
|
|
right: 20px;
|
|
display: flex;
|
|
}
|
|
|
|
.bt-send {
|
|
flex: 1;
|
|
height: 45px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|