From bad94bd96e281c738d9be938f7df304a0862d9b8 Mon Sep 17 00:00:00 2001
From: yezhichao <651778286@qq.com>
Date: Tue, 23 Nov 2021 07:44:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=8C=87=E5=8D=97=E9=92=88?=
 =?UTF-8?q?=E7=9A=84=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/render/components/Clock.vue     |  6 +++---
 src/render/components/Compass.vue   | 24 ++++++++++++++++++++----
 src/render/page/DataMonitorPage.vue |  2 +-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/render/components/Clock.vue b/src/render/components/Clock.vue
index a1e7350..6d9724d 100644
--- a/src/render/components/Clock.vue
+++ b/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
diff --git a/src/render/components/Compass.vue b/src/render/components/Compass.vue
index cf2e740..7547b95 100644
--- a/src/render/components/Compass.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/render/page/DataMonitorPage.vue b/src/render/page/DataMonitorPage.vue
index c5aac1b..599db2b 100644
--- a/src/render/page/DataMonitorPage.vue
+++ b/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)
 }