实现基本信息的变更

src/render/components/Clock.vue

@@ -128,7 +128,7 @@ const option = ref({
   ]
 });
 
-const update = () => console.log
+const update = console.log
 
 defineExpose({ update })
 </script>

src/render/components/Compass.vue

@@ -76,7 +76,7 @@ const option = ref({
   ]
 });
 
-const update = () => console.log
+const update = console.log
 
 defineExpose({ update })
 </script>

src/render/components/DigitalFlop.vue

@@ -1,14 +1,12 @@
 <template>
-  <div class="digital-flop text-3xl font-bold" :style="style">
+  <div v-if="value" class="digital-flop text-3xl font-bold" :style="style">
     {{ value }}
   </div>
 </template>
 
 <script lang="ts" setup>
-import Vue from 'vue'
-
 const props = defineProps({
-  value: Number,
+  value: Number || String,
   style: String
 })
 </script>

src/render/components/DigitalFlopContainer.vue

@@ -2,13 +2,14 @@
     <div class="digital-flop-container h-1/6 relative flex flex-shrink-0 justify-between items-center">
       <div class="digital-flop-item w-1/6 h-4/5 flex flex-col justify-center items-center"
         v-for="item in digitalFlopData"
-        :key="item.title"
+        :key="item.key"
       >
         <div class="digital-flop-title text-2xl mb-5">{{ item.title }}</div>
         <div class="digital-flop flex">
           <DigitalFlop
             :value="item.value"
             :style="item.style"
+            :ref="item.key + 'Digital'"
           />
             <div class="unit ml-2.5 leading-10">{{ item.unit }}</div>
         </div>
@@ -23,38 +24,56 @@ import DigitalFlop from './DigitalFlop.vue'
 const digitalFlopData = reactive([
   {
     title: '日　　期',
-    value: 28,
+    value: '',
     style: 'color: #4d99fc',
-    unit : '座'
+    unit : ''
   }, {
     title: '时　　间',
-    value: 28,
+    value: '',
     style: 'color: #f46827',
-    unit : '座'
+    unit : ''
   }, {
     title: '经　　度',
-    value: 28,
+    value: '',
     style: 'color: #40faee',
-    unit : '座'
+    unit : ''
   }, {
     title: '纬　　度',
-    value: 28,
+    value: '',
     style: 'color: #4d99fc',
-    unit : '座'
+    unit : ''
   }, {
     title: '海　　拔',
-    value: 28,
+    value: null,
     style: 'color: #f46827',
-    unit : '座'
+    unit : ''
   }, {
     title: '定位卫星数目',
-    value: 28,
+    value: 0,
     style: 'color: #40faee',
-    unit : '座'
+    unit : ''
   }
 ])
 
-const update = console.log
+const update = (
+  dateTime: Date,
+  longitude: Number,
+  latitude: Number,
+  alt: number,
+  numSat: number) => {
+  // 日期
+  digitalFlopData[0].value = dateTime.toLocaleDateString()
+  // 时间
+  digitalFlopData[1].value = dateTime.toLocaleTimeString()
+  // 经度
+  digitalFlopData[2].value = `${longitude} ${longitude >= 0 ? 'E' : 'W'}`
+  // 纬度
+  digitalFlopData[3].value = `${latitude} ${latitude >= 0 ? 'N' : 'S'}`
+  // 海拔
+  digitalFlopData[4].value = `${alt} 米`
+  // 定位卫星数目
+  digitalFlopData[5].value = numSat
+}
 
 defineExpose({ update })
 </script>

src/render/components/Map.vue

@@ -30,7 +30,7 @@ const option = reactive({
   }
 });
 
-const update = () => console.log
+const update = console.log
 
 defineExpose({ update })
 </script>