init commit

src/render/app/BDDataAnalysisPlatform/index.vue

@@ -0,0 +1,74 @@
+<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>