75 lines
2.6 KiB
Vue
75 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<!-- TODO: 使用form grid替换 -->
|
||
|
|
<n-descriptions :column="1">
|
||
|
|
<n-descriptions-item>
|
||
|
|
<n-button :disabled="serialPort.isOpen" type="primary" @click="onSelectBtnClick">选择串口</n-button>
|
||
|
|
</n-descriptions-item>
|
||
|
|
<n-descriptions-item label="波特率">
|
||
|
|
<n-select :disabled="serialPort.instance === null || serialPort.isOpen" v-model:value="serialPortOptions.baudRate" :options="BAUDRATE_OPTIONS" />
|
||
|
|
</n-descriptions-item>
|
||
|
|
<n-descriptions-item label="数据位">
|
||
|
|
<n-select :disabled="serialPort.instance === null || serialPort.isOpen" v-model:value="serialPortOptions.dataBits" :options="DATA_BITS_OPTIONS" />
|
||
|
|
</n-descriptions-item>
|
||
|
|
<n-descriptions-item label="停止位">
|
||
|
|
<n-select :disabled="serialPort.instance === null || serialPort.isOpen" v-model:value="serialPortOptions.stopBits" :options="STOPBITS_OPTIONS" />
|
||
|
|
</n-descriptions-item>
|
||
|
|
<n-descriptions-item label="奇偶校验">
|
||
|
|
<n-select :disabled="serialPort.instance === null || serialPort.isOpen" v-model:value="serialPortOptions.parity" :options="PARITY_OPTIONS" />
|
||
|
|
</n-descriptions-item>
|
||
|
|
<n-descriptions-item>
|
||
|
|
<n-button :disabled="serialPort.instance === null" type="primary" @click="onTriggerBtnClick">{{ serialPort.isOpen ? '关闭串口' : '打开串口' }}</n-button>
|
||
|
|
</n-descriptions-item>
|
||
|
|
</n-descriptions>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { NDescriptions, NDescriptionsItem, NSelect, NButton, useMessage } from 'naive-ui'
|
||
|
|
import { BAUDRATE_OPTIONS, DATA_BITS_OPTIONS, STOPBITS_OPTIONS, PARITY_OPTIONS } from './data'
|
||
|
|
|
||
|
|
import { useSerialPortStore } from '@/stores/serialPort'
|
||
|
|
|
||
|
|
const message = useMessage()
|
||
|
|
|
||
|
|
const serialPort = useSerialPortStore()
|
||
|
|
|
||
|
|
const serialPortOptions = ref({
|
||
|
|
baudRate: BAUDRATE_OPTIONS[BAUDRATE_OPTIONS.length - 1].value,
|
||
|
|
dataBits: DATA_BITS_OPTIONS[0].value,
|
||
|
|
stopBits: STOPBITS_OPTIONS[0].value,
|
||
|
|
parity : PARITY_OPTIONS[0].value,
|
||
|
|
})
|
||
|
|
|
||
|
|
let closedPromise
|
||
|
|
const openSerialPort = () => {
|
||
|
|
closedPromise = serialPort.open(serialPortOptions.value).catch((error) => {
|
||
|
|
console.error(error)
|
||
|
|
message.error('打开串口失败,' + error.message)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const closeSerialPort = async () => {
|
||
|
|
try {
|
||
|
|
await serialPort.close()
|
||
|
|
await closedPromise
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error)
|
||
|
|
message.error('关闭串口失败,' + error.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const onSelectBtnClick = serialPort.select
|
||
|
|
const onTriggerBtnClick = async () => {
|
||
|
|
if (serialPort.isOpen) {
|
||
|
|
closeSerialPort()
|
||
|
|
} else {
|
||
|
|
openSerialPort()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.n-button {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|