75 lines
2.5 KiB
Vue
75 lines
2.5 KiB
Vue
<template>
|
||
<Application>
|
||
<Layout>
|
||
<!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
|
||
<Tabs default-value="data" class="h-full">
|
||
<n-tab-pane display-directive="show:lazy" tab="数据" name="data">
|
||
<BasicInfoView class="mx-auto"/>
|
||
</n-tab-pane>
|
||
<n-tab-pane display-directive="show:lazy" tab="星座图" name="planisphere">
|
||
<PlanisphereView class="w-h-full" />
|
||
</n-tab-pane>
|
||
<n-tab-pane display-directive="show:lazy" tab="载噪比" name="snr">
|
||
<SNRView class="w-h-full" />
|
||
</n-tab-pane>
|
||
<n-tab-pane display-directive="show:lazy" tab="信息" name="message">
|
||
<SerialPortReceivingMessageView class="h-full" />
|
||
</n-tab-pane>
|
||
<n-tab-pane display-directive="show:lazy" tab="地图" name="map">
|
||
<MapView />
|
||
</n-tab-pane>
|
||
</Tabs>
|
||
</Layout>
|
||
|
||
<SerialPortManagementDrawer />
|
||
</Application>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { watch } from 'vue'
|
||
import { NTabPane } from 'naive-ui'
|
||
import { Application } from '@/components/Application'
|
||
import { default as Layout } from '@/layout/absolute/Default.vue'
|
||
import { Tabs } from '@/components/Tabs'
|
||
import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
|
||
import { SerialPortReceivingMessageView } from '@/components/SerialPort'
|
||
import { BasicInfoView } from '@/views/BDDataAnalysisPlatform/BasicInfoView'
|
||
import { PlanisphereView } from '@/views/BDDataAnalysisPlatform/PlanisphereView'
|
||
import { SNRView } from '@/views/BDDataAnalysisPlatform/SNRView'
|
||
import MapView from '@/views/BDDataAnalysisPlatform/MapView.vue'
|
||
|
||
|
||
import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
|
||
import { useNMEAStore, NMEADataSource } from '@/stores/nmea'
|
||
import { LineBreakParser } from '@/utils/parser'
|
||
|
||
const nmea = useNMEAStore()
|
||
const dataSource = new NMEADataSource()
|
||
nmea.bindDataSource(dataSource)
|
||
|
||
const decoder = new TextDecoder()
|
||
const parser = new LineBreakParser()
|
||
const onSerialPortData = (data: Uint8Array) => {
|
||
const lineArr = parser.parse(decoder.decode(data))
|
||
lineArr.forEach(line => dataSource.emit('data', line))
|
||
}
|
||
|
||
const onSerialPortOpen = isOpen => {
|
||
if (!isOpen) return
|
||
|
||
dataSource.emit('open')
|
||
}
|
||
|
||
const serialPort = useSerialPortStore()
|
||
watch(() => serialPort.isOpen, onSerialPortOpen)
|
||
serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
// 实现pane中的内容水平垂直居中
|
||
.n-tab-pane {
|
||
display: flex;
|
||
place-items: center;
|
||
}
|
||
</style>
|