实现时钟组件数据的变更

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>

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)