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

---
 src/render/components/Clock.vue     | 35 +++++++++++++++++++++++------
 src/render/page/DataMonitorPage.vue |  2 +-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/render/components/Clock.vue b/src/render/components/Clock.vue
index 594fb45..a1e7350 100644
--- a/src/render/components/Clock.vue
+++ b/src/render/components/Clock.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,8 @@ use([
   GaugeChart
 ]);
 
-const option = ref({
+// TODO: 修复指针转过一圈之后反向旋转的bug
+const option = reactive({
   title: {
     text: '时间',
     left: 'center'
@@ -61,7 +62,7 @@ const option = ref({
       detail: {
         show:false
       },
-      data: [{ value: 11.2 }]
+      data: [{ value: 0 }]
     }, {
       name: 'minute',
       type: 'gauge',
@@ -92,7 +93,7 @@ const option = ref({
       detail: {
         show:false
       },
-      data: [{ value: 35.6}]
+      data: [{ value: 0}]
     }, {
       name: 'second',
       type: 'gauge',
@@ -100,7 +101,7 @@ const option = ref({
       max : 60,
       splitNumber: 60,
       startAngle: 90,
-      endAngle:-270,
+      endAngle  :-270,
       axisLine: {
         show: false
       },
@@ -123,12 +124,32 @@ const option = ref({
       detail: {
         show:false
       },
-      data: [{ value: 30 }]
+      data: [{ value: 0 }]
     }
   ]
 });
 
-const update = console.log
+const update = (dateTime: Date) => {
+  if (!dateTime) return
+
+  const seconds = dateTime.getSeconds()
+  const minutes = dateTime.getMinutes()
+  const hours   = dateTime.getHours()
+
+  const second_data = seconds
+  const minute_data = second_data / 60 + minutes
+  const hour_data   = minute_data / 60 + hours
+
+  const value = {
+    series: [
+      {data: [{ value: hour_data }]},
+      {data: [{ value: minute_data }]},
+      {data: [{ value: second_data }]}
+    ]
+  }
+  
+  Object.assign(option, value)
+}
 
 defineExpose({ update })
 </script>
\ No newline at end of file
diff --git a/src/render/page/DataMonitorPage.vue b/src/render/page/DataMonitorPage.vue
index 3e4d738..c5aac1b 100644
--- a/src/render/page/DataMonitorPage.vue
+++ b/src/render/page/DataMonitorPage.vue
@@ -49,7 +49,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)
+  clock.value.update(dateTime)
   // compass.value.update(variation, variationPole)
   // waterLevel.value.update(alt)
   // map.value.update(lon, lonPole, lat, latPole)