实现星座图数据的更新

src/main/app.ts

@@ -24,8 +24,8 @@ function createWindow(page: String) {
 function launch() {
   // createWindow('satellite-data-monitor-platform')
   // createWindow('satellite-info-monitor-platform')
-  createWindow('satellite-signal-monitor-platform')
+  // createWindow('satellite-signal-monitor-platform')
-  // createWindow('satellite-state-monitor-platform')
+  createWindow('satellite-state-monitor-platform')
 }
 
 app.whenReady().then(launch)

src/render/components/PlanisphereView.vue

@@ -104,7 +104,7 @@ const getPlanisphereOption  = (GSVArr: Array<any>, GSAArr: Array<any>) => {
   try {
     let in_positioning_data: Array<any> = [],
         un_positioning_data: Array<any> = []
-    const in_positioning_id = utils.get_in_positioning_id(GSAArr)
+    const in_positioning_id = get_in_positioning_id(GSAArr)
 
     GSVArr.forEach(({ satellites }) => {
       satellites.forEach(({ id, elevationDeg, azimuthTrue }) => {

src/render/page/SignalMonitorPage.vue

@@ -27,10 +27,10 @@ import SNRView from '../components/SNRView.vue'
 import { ref, onMounted } from 'vue'
 import { getNMEAObj } from '../api/util'
 
-const BDSNRView = ref()
+const BDSNRView = ref(null)
-const GPSNRView = ref()
+const GPSNRView = ref(null)
-const GLSNRView = ref()
+const GLSNRView = ref(null)
-const GASNRView = ref()
+const GASNRView = ref(null)
 const update = (nmeaStr: string) => {
   const data: any = getMonitoringData(nmeaStr)
   if (!data) return

src/render/page/StateMonitorPage.vue

@@ -4,16 +4,16 @@
 
     <div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
       <div>
-        <PlanisphereView title="北斗" />
+        <PlanisphereView ref="BDPlanisphereView" title="北斗" />
       </div>
       <div>
-        <PlanisphereView title="GPS" />
+        <PlanisphereView ref="GPPlanisphereView" title="GPS" />
       </div>
       <div>
-        <PlanisphereView title="格洛纳斯" />
+        <PlanisphereView ref="GLPlanisphereView" title="格洛纳斯" />
       </div>
       <div>
-        <PlanisphereView title="伽利略" />
+        <PlanisphereView ref="GAPlanisphereView" title="伽利略" />
       </div>
     </div>
   </full-screen-container>
@@ -24,13 +24,57 @@ import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
 import TheHeader from '../components/Layout/TheHeader.vue'
 import PlanisphereView from '../components/PlanisphereView.vue'
 
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
+import { getNMEAObj } from '../api/util'
+
+const BDPlanisphereView = ref(null)
+const GPPlanisphereView = ref(null)
+const GLPlanisphereView = ref(null)
+const GAPlanisphereView = ref(null)
+const update = (nmeaStr: string) => {
+  const data: any = getMonitoringData(nmeaStr)
+  if (!data) return
+
+  const { bd, gp, gl, ga } = data
+  
+  // TODO: 找到bdgsv语句有7条的原因以及gsa语句配置talker_id为各个卫星导航系统自己的名字
+  BDPlanisphereView.value.update(bd.GSVArr, bd.GSAArr)
+  GPPlanisphereView.value.update(gp.GSVArr, gp.GSAArr)
+  GLPlanisphereView.value.update(gl.GSVArr, gl.GSAArr)
+  GAPlanisphereView.value.update(ga.GSVArr, ga.GSAArr)
+}
 
 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.GSV || !nmeaObj.GSA) return null
+
+  const { GSV, GSA } = nmeaObj
+  const bd = {
+    GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'BD'),
+    GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'BD')
+  }
+  const gp = {
+    GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GP'),
+    GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GP')
+  }
+  const gl = {
+    GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GL'),
+    GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GL')
+  }
+  const ga = {
+    GSVArr: GSV.filter((gsv: any) => gsv.talker_id === 'GA'),
+    GSAArr: GSA.filter((gsa: any) => gsa.talker_id === 'GA')
+  }
+
+  return { bd, gp, gl, ga }
+}
 </script>