健康咨询平台实时时间

src/views/healthConsultation/HealthConsultationIndex.vue

@@ -33,7 +33,7 @@
     import healthContentBottomItem2 from './components/healthContentBottomItem2.vue';
     import healthContentBottomItem3 from './components/healthContentBottomItem3.vue';
     import healthContentBottomItem4 from './components/healthContentBottomItem4.vue';
-    import { ref, onMounted, watch } from 'vue';
+    import { ref, onMounted, watch, onUnmounted } from 'vue';
     import dayjs from 'dayjs';
     import { startTime } from '/@/utils/utils.ts';
 
@@ -44,6 +44,7 @@
     const dateInfo = ref<DateInfo>({});
     const rightDate = ref<string>('');
     const initDate = ref(startTime);
+    const timer = ref<number | null>(null);
 
     const getTime = () => {
         dateInfo.value = {
@@ -51,17 +52,41 @@
             times: dayjs().format('HH:mm:ss'),
         };
     };
+
+    // 启动定时器，每秒更新时间
+    const startTimer = () => {
+        if (timer.value) {
+            clearInterval(timer.value);
+        }
+        timer.value = window.setInterval(() => {
+            getTime();
+            updateRightDate();
+        }, 1000);
+    };
+
+    const updateRightDate = () => {
+        rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
+    };
+
     onMounted(() => {
         getTime();
-        rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
+        updateRightDate();
+        startTimer(); // 启动定时器
     });
 
     watch(
         () => dateInfo.value.day,
         () => {
-            rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
+            updateRightDate();
         }
     );
+
+    // 组件卸载时清理定时器
+    onUnmounted(() => {
+        if (timer.value) {
+            clearInterval(timer.value);
+        }
+    });
 </script>
 
 <style lang="less" scoped>