129 lines
3.8 KiB
Vue
129 lines
3.8 KiB
Vue
<template>
|
||
<div>
|
||
<button @click="connectSerial" :disabled="serialPort !== null">
|
||
连接串口
|
||
</button>
|
||
<button @click="disconnectSerial" :disabled="serialPort === null">
|
||
断开串口
|
||
</button>
|
||
<p v-if="serialPort !== null">已连接到: {{ serialPort.getInfo().usbVendorId }}:{{ serialPort.getInfo().usbProductId
|
||
}}</p>
|
||
<p v-else>未连接</p>
|
||
<p v-if="errorMessage">{{ errorMessage }}</p>
|
||
<pre>{{ receivedData }}</pre>
|
||
<pre>{{ code }}</pre>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SCAN from "./scanCode" // from后面为创建的SCAN类文件地址
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
serialPort: null,
|
||
reader: null,
|
||
writer: null,
|
||
errorMessage: '',
|
||
receivedData: '',
|
||
code: ''
|
||
};
|
||
},
|
||
async created() {
|
||
this.scan = new SCAN(this, 200)
|
||
// 重新注册scanCode事件，
|
||
// this.$bus.$on('scanCode', this.handleCode)
|
||
this.scan.start() //开启监听
|
||
},
|
||
beforeDestroy() {
|
||
// this.$bus.$off('scanCode')
|
||
this.scan.stop()
|
||
},
|
||
activated() {
|
||
// 注销scanCode事件
|
||
// this.$bus.$off('scanCode')
|
||
// this.$bus.$on('scanCode', this.handleCode)
|
||
this.scan.start()
|
||
},
|
||
methods: {
|
||
async connectSerial() {
|
||
try {
|
||
this.serialPort = await navigator.serial.requestPort();
|
||
console.log('选择了串口:', this.serialPort);
|
||
|
||
// 检查浏览器是否支持所需的波特率
|
||
const options = { baudRate: 9600 };
|
||
await this.serialPort.open(options);
|
||
console.log('串口已打开');
|
||
|
||
// 设置读取器
|
||
this.reader = this.serialPort.readable.getReader();
|
||
this.readLoop();
|
||
|
||
} catch (error) {
|
||
console.error('无法打开串口:', error);
|
||
this.errorMessage = `无法打开串口: ${error.message}`;
|
||
this.serialPort = null
|
||
}
|
||
},
|
||
async readLoop() {
|
||
while (true) {
|
||
try {
|
||
const { value, done } = await this.reader.read();
|
||
if (done) {
|
||
console.log('读取完成');
|
||
break;
|
||
}
|
||
// 将接收到的字节数组转换为字符串
|
||
const decoder = new TextDecoder();
|
||
const decodedValue = decoder.decode(value, { stream: true });
|
||
this.receivedData += decodedValue;
|
||
} catch (error) {
|
||
console.error('读取数据时出错:', error);
|
||
break;
|
||
}
|
||
}
|
||
// 关闭读取器
|
||
this.reader.releaseLock();
|
||
this.reader = null;
|
||
},
|
||
disconnectSerial() {
|
||
if (this.reader) {
|
||
this.reader.cancel();
|
||
this.reader.releaseLock();
|
||
this.reader = null;
|
||
}
|
||
if (this.writer) {
|
||
this.writer.close();
|
||
this.writer = null;
|
||
}
|
||
if (this.serialPort) {
|
||
this.serialPort.close();
|
||
this.serialPort = null;
|
||
console.log('串口已关闭');
|
||
}
|
||
},
|
||
handleCode(code) {
|
||
code = code.trim()
|
||
if (!code) return
|
||
this.code = code
|
||
this.handleSearchCode()
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
button {
|
||
margin: 5px;
|
||
}
|
||
|
||
pre {
|
||
background-color: #f4f4f4;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
overflow-y: auto;
|
||
max-height: 200px;
|
||
}
|
||
</style>
|