实现基本信息的变更

src/render/api/util.js

@@ -34,3 +34,9 @@ export function get_in_positioning_id(GSAArr) {
 
 	return in_positioning_id
 }
+
+export function getNMEAObj(nmeaStr) {
+  if (!nmeaStr) return
+
+  return JSON.parse(nmeaStr)
+}

src/render/components/Clock.vue

@@ -128,7 +128,7 @@ const option = ref({
   ]
 });
 
-const update = () => console.log
+const update = console.log
 
 defineExpose({ update })
 </script>

src/render/components/Compass.vue

@@ -76,7 +76,7 @@ const option = ref({
   ]
 });
 
-const update = () => console.log
+const update = console.log
 
 defineExpose({ update })
 </script>

src/render/components/DigitalFlop.vue

@@ -1,14 +1,12 @@
 <template>
-  <div class="digital-flop text-3xl font-bold" :style="style">
+  <div v-if="value" class="digital-flop text-3xl font-bold" :style="style">
     {{ value }}
   </div>
 </template>
 
 <script lang="ts" setup>
-import Vue from 'vue'
-
 const props = defineProps({
-  value: Number,
+  value: Number || String,
   style: String
 })
 </script>

src/render/components/DigitalFlopContainer.vue

@@ -2,13 +2,14 @@
     <div class="digital-flop-container h-1/6 relative flex flex-shrink-0 justify-between items-center">
       <div class="digital-flop-item w-1/6 h-4/5 flex flex-col justify-center items-center"
         v-for="item in digitalFlopData"
-        :key="item.title"
+        :key="item.key"
       >
         <div class="digital-flop-title text-2xl mb-5">{{ item.title }}</div>
         <div class="digital-flop flex">
           <DigitalFlop
             :value="item.value"
             :style="item.style"
+            :ref="item.key + 'Digital'"
           />
             <div class="unit ml-2.5 leading-10">{{ item.unit }}</div>
         </div>
@@ -23,38 +24,56 @@ import DigitalFlop from './DigitalFlop.vue'
 const digitalFlopData = reactive([
   {
     title: '日　　期',
-    value: 28,
+    value: '',
     style: 'color: #4d99fc',
-    unit : '座'
+    unit : ''
   }, {
     title: '时　　间',
-    value: 28,
+    value: '',
     style: 'color: #f46827',
-    unit : '座'
+    unit : ''
   }, {
     title: '经　　度',
-    value: 28,
+    value: '',
     style: 'color: #40faee',
-    unit : '座'
+    unit : ''
   }, {
     title: '纬　　度',
-    value: 28,
+    value: '',
     style: 'color: #4d99fc',
-    unit : '座'
+    unit : ''
   }, {
     title: '海　　拔',
-    value: 28,
+    value: null,
     style: 'color: #f46827',
-    unit : '座'
+    unit : ''
   }, {
     title: '定位卫星数目',
-    value: 28,
+    value: 0,
     style: 'color: #40faee',
-    unit : '座'
+    unit : ''
   }
 ])
 
-const update = console.log
+const update = (
+  dateTime: Date,
+  longitude: Number,
+  latitude: Number,
+  alt: number,
+  numSat: number) => {
+  // 日期
+  digitalFlopData[0].value = dateTime.toLocaleDateString()
+  // 时间
+  digitalFlopData[1].value = dateTime.toLocaleTimeString()
+  // 经度
+  digitalFlopData[2].value = `${longitude} ${longitude >= 0 ? 'E' : 'W'}`
+  // 纬度
+  digitalFlopData[3].value = `${latitude} ${latitude >= 0 ? 'N' : 'S'}`
+  // 海拔
+  digitalFlopData[4].value = `${alt} 米`
+  // 定位卫星数目
+  digitalFlopData[5].value = numSat
+}
 
 defineExpose({ update })
 </script>

src/render/components/Map.vue

@@ -30,7 +30,7 @@ const option = reactive({
   }
 });
 
-const update = () => console.log
+const update = console.log
 
 defineExpose({ update })
 </script>

src/render/page/DataMonitorPage.vue

@@ -3,22 +3,22 @@
     <TheHeader title="卫星数据监控平台" />
 
     <div class="main-content flex flex-1 flex-col">
-      <DigitalFlopContainer />
+      <DigitalFlopContainer ref="digitalFlopContainer" />
 
       <div class="block-left-right-content flex flex-1 mt-5">
         <div class="block-left-content w-1/5 flex flex-col">
           <div class="clock-content mb-2 flex-1">
-            <Clock />
+            <Clock ref="clock" />
           </div>
           <div class="compass-content mb-2 flex-1">
-            <Compass />
+            <Compass ref="compass" />
           </div>
           <div class="water-level-content flex-1">
-            <WaterLevel />
+            <WaterLevel ref="waterLevel" />
           </div>
         </div>
         <div class="block-right-content ml-2 flex flex-1">
-          <Map />
+          <Map ref="map" />
         </div>
       </div>
     </div>
@@ -34,15 +34,60 @@ import Compass from '../components/Compass.vue'
 import WaterLevel from '../components/WaterLevel.vue'
 import Map from '../components/Map.vue'
 
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
+import { Helpers } from 'nmea'
+import { getNMEAObj } from '../api/util'
+
+const digitalFlopContainer = ref(null)
+const clock                = ref(null)
+const compass              = ref(null)
+const waterLevel           = ref(null)
+const map                  = ref(null)
+const update               = (nmeaStr: string) => {
+  const data: any = getMonitoringData(nmeaStr)
+  if (!data) return
+
+  const { dateTime, longitude, latitude, alt, variation, variationPole, numSat } = data
+  digitalFlopContainer.value.update(dateTime, longitude, latitude, alt, numSat)
+  // clock.value.update(dateTime)
+  // compass.value.update(variation, variationPole)
+  // waterLevel.value.update(alt)
+  // map.value.update(lon, lonPole, lat, latPole)
+}
 
 onMounted(() => {
   if ('ipcRenderer' in window) {
-    ipcRenderer.receive('nmea', console.log)
+    ipcRenderer.receive('nmea', update)
 
     ipcRenderer.send('APP_MOUNTED')
   }
 })
+
+const getMonitoringData = (nmeaStr: string) => {
+  const nmeaObj: any = getNMEAObj(nmeaStr)
+  console.log(nmeaObj, '================')
+  if (!nmeaObj || !nmeaObj.RMC || !nmeaObj.GGA) return null
+
+  const { RMC, GGA } = nmeaObj
+  // 日期，时间，磁偏角，磁偏角方向
+  const { date, timestamp, variation, variationPole } = RMC
+  // 经度，经度方向，纬度，纬度方向，海拔，用于定位的卫星数目
+  const { lon, lonPole, lat, latPole, alt, numSat }   = GGA
+
+  const year        = date.substring(4)
+  const month       = date.substring(2, 4)
+  const day         = date.substring(0, 2)
+  const hours       = timestamp.substring(0, 2)
+  const minutes     = timestamp.substring(2, 4)
+  const seconds     = timestamp.substring(4, 6)
+  const dateTimeStr = `20${year}-${month}-${day}T${hours}:${minutes}:${seconds}+00:00`
+  const dateTime    = new Date(dateTimeStr)
+
+  const longitude   = Helpers.parseLongitude(lon, lonPole)
+  const latitude    = Helpers.parseLatitude(lat, latPole)
+
+  return { dateTime, longitude, latitude, alt, variation, variationPole, numSat }
+}
 </script>
 
 <style scoped>