实现海拔高度数据的更新

src/render/components/DigitalFlop.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 const props = defineProps({
-  value: Number || String,
+  value: String,
   style: String
 })
 </script>

src/render/components/DigitalFlopContainer.vue

@@ -11,7 +11,6 @@
             :style="item.style"
             :ref="item.key + 'Digital'"
           />
-            <div class="unit ml-2.5 leading-10">{{ item.unit }}</div>
         </div>
       </div>
     </div>
@@ -25,33 +24,27 @@ const digitalFlopData = reactive([
   {
     title: '日　　期',
     value: '',
-    style: 'color: #4d99fc',
+    style: 'color: #4d99fc'
-    unit : ''
   }, {
     title: '时　　间',
     value: '',
-    style: 'color: #f46827',
+    style: 'color: #f46827'
-    unit : ''
   }, {
     title: '经　　度',
     value: '',
-    style: 'color: #40faee',
+    style: 'color: #40faee'
-    unit : ''
   }, {
     title: '纬　　度',
     value: '',
-    style: 'color: #4d99fc',
+    style: 'color: #4d99fc'
-    unit : ''
   }, {
     title: '海　　拔',
-    value: null,
+    value: '',
-    style: 'color: #f46827',
+    style: 'color: #f46827'
-    unit : ''
   }, {
     title: '定位卫星数目',
-    value: 0,
+    value: '',
-    style: 'color: #40faee',
+    style: 'color: #40faee'
-    unit : ''
   }
 ])
 
@@ -72,7 +65,7 @@ const update = (
   // 海拔
   digitalFlopData[4].value = `${alt} 米`
   // 定位卫星数目
-  digitalFlopData[5].value = numSat
+  digitalFlopData[5].value = numSat.toString()
 }
 
 defineExpose({ update })

src/render/components/WaterLevel.vue

@@ -29,13 +29,15 @@ const option = reactive({
     },
     label: {
       formatter: function({ value }) {
-        return value
+        return parseInt(value)
       }
     },
     data: [60, 0.5, 0.4, 0.3]
   }]
 })
 
-const update = console.log
+const update = (alt: number) => {
+  option.series[0].data[0] = alt
+}
 defineExpose({ update })
 </script>

src/render/page/DataMonitorPage.vue

@@ -51,7 +51,7 @@ const update               = (nmeaStr: string) => {
   digitalFlopContainer.value.update(dateTime, longitude, latitude, alt, numSat)
   clock.value.update(dateTime)
   compass.value.update(variation, variationPole)
-  // waterLevel.value.update(alt)
+  waterLevel.value.update(alt)
   // map.value.update(lon, lonPole, lat, latPole)
 }