feat: 底部显示服务器时间

src/layouts/BasicLayout.vue

@@ -8,7 +8,7 @@ import {
 import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
 import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
-import { computed, reactive, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import useLayoutStore from '@/store/modules/layout';
 import useRouterStore from '@/store/modules/router';
 import useTabsStore from '@/store/modules/tabs';
@@ -132,52 +132,46 @@ function fnLocale(title: string) {
 
 //
 onMounted(() => {
-  // fnGetServerTime();
+  fnGetServerTime();
   useAlarmStore().fnGetActiveAlarmInfo();
 });
 
 // ==== 服务器时间显示 start
-// let serverTime = reactive({
-//   timestamp: 0,
-//   zone: '', // 时区 UTC
-//   str: '', // 年月日时分秒
-//   interval: 0 as any, // 定时器
-// });
+let serverTimeStr = ref<string>('');
+let serverTime = reactive({
+  timestamp: 0,
+  zone: 'UTC', // 时区 UTC
+  interval: 0 as any, // 定时器
+});
 
-// // 获取服务器时间
-// function fnGetServerTime() {
-//   getServerTime().then(res => {
-//     if (res.code === RESULT_CODE_SUCCESS && res.data) {
-//       // 时间戳
-//       serverTime.timestamp = parseInt(res.data.timestamp);
-//       serverTime.interval = setInterval(() => {
-//         serverTime.timestamp += 1000;
-//         serverTime.str = parseDateToStr(serverTime.timestamp);
-//       }, 1000);
+// 获取服务器时间
+function fnGetServerTime() {
+  getServerTime().then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && res.data) {
+      // 时间戳
+      serverTime.timestamp = parseInt(res.data.timestamp);
+      serverTime.interval = setInterval(() => {
+        serverTime.timestamp += 1000;
+        serverTimeStr.value = parseDateToStr(serverTime.timestamp);
+      }, 1000);
 
-//       // 时区
-//       const offsetHours = res.data.timeZone / 3600;
-//       if (offsetHours === 0) {
-//         serverTime.zone = 'UTC';
-//       } else if (offsetHours > 0) {
-//         serverTime.zone = `UTC +${offsetHours}`;
-//       } else {
-//         serverTime.zone = `UTC ${offsetHours}`;
-//       }
-//     }
-//   });
-// }
+      // 时区
+      const offsetHours = res.data.timeZone / 3600;
+      serverTime.zone = `UTC ${offsetHours}`;
+    }
+  });
+}
 
 // 监听可视改变
 document.addEventListener('visibilitychange', function () {
   if (document.visibilityState == 'hidden') {
     //切离该页面时执行
-    // clearInterval(serverTime.interval);
+    clearInterval(serverTime.interval);
   }
   if (document.visibilityState == 'visible') {
     //切换到该页面时执行
-    // clearInterval(serverTime.interval);
-    // fnGetServerTime();
+    clearInterval(serverTime.interval);
+    fnGetServerTime();
     useAlarmStore().fnGetActiveAlarmInfo();
   }
 });
@@ -277,7 +271,7 @@ document.addEventListener('visibilitychange', function () {
             </div>
             <div>
               <span class="footer-time">
-                <!-- {{ serverTime.str }} {{ serverTime.zone }} -->
+                {{ serverTimeStr }} {{ serverTime.zone }}
               </span>
             </div>
           </div>