实现卫星信息监测页面数据的更新

src/render/components/CenterCmp.vue

@@ -7,30 +7,34 @@
     </div>
 
     <div class="cc-details">
-      <div class="card">5</div>
+      <div
-      <div class="card">7</div>
+        class="card"
+        v-for="(s, i) in count_str_arr"
+        :key="`count-${i}`">
+        {{ s }}
+      </div>
     </div>
 
     <div class="cc-main-container">
       <div class="ccmc-left">
         <div class="station-info">
-          　北　斗<span>15</span>
+          　北　斗<span>{{ bd_satellite_count }}</span>
         </div>
         <div class="station-info">
-          伽 利 略<span>15</span>
+          伽 利 略<span>{{ ga_satellite_count }}</span>
         </div>
       </div>
 
       <div class="ccmc-middle">
-        <Ring />
+        <Ring ref="ring"/>
       </div>
 
       <div class="ccmc-right">
         <div class="station-info">
-          <span>10</span>G P S
+          <span>{{ gp_satellite_count }}</span>G P S
         </div>
         <div class="station-info">
-          <span>17</span>格洛纳斯
+          <span>{{ gl_satellite_count }}</span>格洛纳斯
         </div>
       </div>
     </div>
@@ -42,6 +46,28 @@ import Ring from './Ring.vue'
 import Decoration1 from './Layout/Decoration1.vue'
 import Decoration5 from './Layout/Decoration5.vue'
 
+import { ref, computed } from 'vue'
+
+const bd_satellite_count = ref(0)
+const gp_satellite_count = ref(0)
+const gl_satellite_count = ref(0)
+const ga_satellite_count = ref(0)
+
+const count_str_arr = computed(() => {
+  return (bd_satellite_count.value + gp_satellite_count.value + gl_satellite_count.value + ga_satellite_count.value).toString().split('')
+})
+
+const ring = ref(null)
+const update = (bd_satellite_length: number, gp_satellite_length: number, gl_satellite_length: number, ga_satellite_length: number) => {
+  bd_satellite_count.value = bd_satellite_length
+  gp_satellite_count.value = gp_satellite_length
+  gl_satellite_count.value = gl_satellite_length
+  ga_satellite_count.value = ga_satellite_length
+
+  ring.value.update(bd_satellite_length, gp_satellite_length, gl_satellite_length, ga_satellite_length)
+}
+
+defineExpose({ update })
 </script>
 
 

src/render/components/Ring.vue

@@ -53,18 +53,18 @@ const option = reactive({
         show: false
       },
       data: [
-        { value: 15, name: '北  斗' },
+        { value: 0, name: '北  斗' },
-        { value: 10, name: 'G P S' },
+        { value: 0, name: 'G P S' },
-        { value: 15, name: '格洛纳斯' },
+        { value: 0, name: '格洛纳斯' },
-        { value: 17, name: '伽 利 略' }
+        { value: 0, name: '伽 利 略' }
       ]
     }
   ]
 });
 
-let highlightIndex = -1
 const ring = ref(null)
 const COUNT = option.series[0].data.length
+let highlightIndex = -1
 const highlight = () => {
   ring.value.dispatchAction({
     type: 'downplay',
@@ -83,7 +83,12 @@ onMounted(() => {
   setInterval(highlight, 3000)
 })
 
-const update = console.log
+const update = (bd_val: number, gp_val: number, gl_val: number, ga_val: number) => {
+  option.series[0].data[0].value = bd_val
+  option.series[0].data[1].value = gp_val
+  option.series[0].data[2].value = gl_val
+  option.series[0].data[3].value = ga_val
+}
 
 
 defineExpose({ update })

src/render/components/ScrollBoardTable.vue

@@ -11,7 +11,7 @@
       />
     </div>
 
-    <div class="table-body flex-grow bg-red-100">
+    <div class="table-body flex-grow">
       <div
         class="row-item flex"
         v-for="(row, ri) in data.satellites"

src/render/page/InfoMonitorPage.vue

@@ -5,23 +5,23 @@
     <div class="main-content flex flex-1">
       <div class="w-1/4 px-2 flex flex-col">
         <border-box-3>
-          <ScrollBoardTable title="北　　斗" ref="BDScrollBoardTable" />
+          <ScrollBoardTable ref="BDScrollBoardTable" title="北　　斗" />
         </border-box-3>
         <border-box-3>
-          <ScrollBoardTable title="伽 利 略" ref="GAScrollBoardTable" />
+          <ScrollBoardTable ref="GAScrollBoardTable" title="伽 利 略" />
         </border-box-3>
       </div>
       <div class="w-1/2 px-2">
         <border-box-3>
-          <CenterCmp />
+          <CenterCmp ref="centerCmp" />
         </border-box-3>
       </div>
       <div class="w-1/4 flex flex-col px-2">
         <border-box-3>
-          <ScrollBoardTable title="G P S" ref="GPScrollBoardTable" />
+          <ScrollBoardTable ref="GPScrollBoardTable" title="G P S" />
         </border-box-3>
         <border-box-3>
-          <ScrollBoardTable title="格洛纳斯" ref="GLScrollBoardTable" />
+          <ScrollBoardTable ref="GLScrollBoardTable" title="格洛纳斯" />
         </border-box-3>
       </div>
     </div>
@@ -39,12 +39,26 @@ import { ref, onMounted } from 'vue'
 import { getGSV } from '../api/util'
 
 const BDScrollBoardTable = ref(null)
+const GPScrollBoardTable = ref(null)
+const GLScrollBoardTable = ref(null)
+const GAScrollBoardTable = ref(null)
+const centerCmp          = ref(null)
 const update             = (nmeaStr: string) => {
   const data: any = getGSV(nmeaStr)
   if (!data) return
 
   const { bd, gp, gl, ga } = data
   BDScrollBoardTable.value.update(bd.GSVArr)
+  GPScrollBoardTable.value.update(gp.GSVArr)
+  GLScrollBoardTable.value.update(gl.GSVArr)
+  GAScrollBoardTable.value.update(ga.GSVArr)
+
+  const bd_satellite_count = getSatelliteCount(bd.GSVArr)
+  const gp_satellite_count = getSatelliteCount(gp.GSVArr)
+  const gl_satellite_count = getSatelliteCount(gl.GSVArr)
+  const ga_satellite_count = getSatelliteCount(ga.GSVArr)
+  
+  centerCmp.value.update(bd_satellite_count, gp_satellite_count, gl_satellite_count, ga_satellite_count)
 }
 onMounted(() => {
   if ('ipcRenderer' in window) {
@@ -53,4 +67,15 @@ onMounted(() => {
     ipcRenderer.send('APP_MOUNTED')
   }
 })
+
+const getSatelliteCount = (GSVArr: Array<any>) => {
+  if (!GSVArr) return
+
+  let count = 0
+  GSVArr.forEach(gsv => {
+    count += gsv.satellites.length
+  });
+
+  return count
+}
 </script>