实现指南针的数据更新

src/render/components/Clock.vue

@@ -132,9 +132,9 @@ const option = reactive({
 const update = (dateTime: Date) => {
   if (!dateTime) return
 
-  const seconds = dateTime.getSeconds()
-  const minutes = dateTime.getMinutes()
-  const hours   = dateTime.getHours()
+  const seconds     = dateTime.getSeconds()
+  const minutes     = dateTime.getMinutes()
+  const hours       = dateTime.getHours()
 
   const second_data = seconds
   const minute_data = second_data / 60 + minutes

src/render/components/Compass.vue

@@ -9,7 +9,7 @@ import { TitleComponent } from "echarts/components";
 import { GaugeChart } from "echarts/charts";
 
 import VChart from "vue-echarts";
-import { ref } from "vue";
+import { reactive } from "vue";
 
 use([
   CanvasRenderer,
@@ -17,7 +17,7 @@ use([
   GaugeChart
 ]);
 
-const option = ref({
+const option = reactive({
   title: {
     text: '航向',
     left: 'center'
@@ -71,12 +71,28 @@ const option = ref({
       detail: {
         show:false
       },
-      data: [{ value: 330 }]
+      data: [{ value: 0 }]
     }
   ]
 });
 
-const update = console.log
+const update = (variation: number, variationPole: string) => {
+  switch (variationPole) {
+    case 'N':
+      break;
+    case 'E':
+      variation += 90
+      break;
+    case 'S':
+      variation += 180
+      break;
+    case 'W':
+      variation += 270
+      break;
+  }
+
+  option.series[0].data[0].value = variation
+}
 
 defineExpose({ update })
 </script>

src/render/page/DataMonitorPage.vue

@@ -50,7 +50,7 @@ const update               = (nmeaStr: string) => {
   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)
+  compass.value.update(variation, variationPole)
   // waterLevel.value.update(alt)
   // map.value.update(lon, lonPole, lat, latPole)
 }