fix: 格式时间-到指定时区

src/layouts/BasicLayout.vue

@@ -9,7 +9,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, watch, onMounted, onUnmounted } from 'vue';
 import useLayoutStore from '@/store/modules/layout';
 import useRouterStore from '@/store/modules/router';
 import useTabsStore from '@/store/modules/tabs';
@@ -21,8 +21,7 @@ const { proConfig, waterMarkContent } = useLayoutStore();
 import useI18n from '@/hooks/useI18n';
 import { getServerTime } from '@/api';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { onMounted } from 'vue';
-import { parseDateToStr } from '@/utils/date-utils';
+import { parseDateToStrByUTCOffset } from '@/utils/date-utils';
 import { parseUrlPath } from '@/plugins/file-static-url';
 const { t, currentLocale } = useI18n();
 const routerStore = useRouterStore();
@@ -170,7 +169,7 @@ onMounted(() => {
 let serverTime = reactive({
   timestamp: 0,
   zone: 'UTC', // 时区 UTC
-  interval: 0 as any, // 定时器
+  interval: null as any, // 定时器
 });
 
 // 获取服务器时间
@@ -178,6 +177,9 @@ function fnGetServerTime() {
   getServerTime().then(res => {
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
       const serverTimeDom = document.getElementById('serverTimeDom');
+      // 时区
+      const utcOffset = res.data.timeZone / 3600;
+      serverTime.zone = `UTC ${utcOffset}`;
       // 时间戳
       serverTime.timestamp = parseInt(res.data.timestamp);
       serverTime.interval = setInterval(() => {
@@ -185,13 +187,12 @@ function fnGetServerTime() {
         // serverTimeStr.value = parseDateToStr(serverTime.timestamp);
         // 用DOM直接修改
         if (serverTimeDom) {
-          serverTimeDom.innerText = parseDateToStr(serverTime.timestamp);
+          serverTimeDom.innerText = parseDateToStrByUTCOffset(
+            serverTime.timestamp,
+            utcOffset
+          );
         }
       }, 1000);
-
-      // 时区
-      const offsetHours = res.data.timeZone / 3600;
-      serverTime.zone = `UTC ${offsetHours}`;
     }
   });
 }
@@ -201,14 +202,21 @@ document.addEventListener('visibilitychange', function () {
   if (document.visibilityState == 'hidden') {
     //切离该页面时执行
     clearInterval(serverTime.interval);
+    serverTime.interval = null;
   }
   if (document.visibilityState == 'visible') {
     //切换到该页面时执行
     clearInterval(serverTime.interval);
+    serverTime.interval = null;
     fnGetServerTime();
     useAlarmStore().fnGetActiveAlarmInfo();
   }
 });
+
+onUnmounted(() => {
+  clearInterval(serverTime.interval);
+  serverTime.interval = null;
+});
 // ==== 服务器时间显示 end
 </script>
 

src/utils/date-utils.ts

@@ -1,5 +1,8 @@
 // 依赖来源 https://github.com/iamkun/dayjs
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc'; // 导入 UTC 插件
+// 应用 UTC 插件
+dayjs.extend(utc);
 
 // 导入本地化语言并设为默认使用，只需要全局有引入就行
 // import('dayjs/locale/zh-cn');
@@ -73,6 +76,21 @@ export function diffValue(
   return value;
 }
 
+/**
+ * 格式时间-到指定时区
+ * @param date 可转的Date对象
+ * @param utcOffset 分钟偏移量
+ * @param formatStr 时间格式 默认YYYY-MM-DD HH:mm:ss
+ * @returns 时间格式字符串
+ */
+export function parseDateToStrByUTCOffset(
+  date: string | number | Date,
+  utcOffset: number,
+  formatStr: string = YYYY_MM_DD_HH_MM_SS
+): string {
+  return dayjs(date).utcOffset(utcOffset).format(formatStr);
+}
+
 /**
  * 格式化秒值为 ?h?m?s
  * @param seconds 2558 秒
@@ -83,7 +101,7 @@ export function parseDuration(seconds: number | string) {
   const duration = new Date(seconds * 1000);
   const hours = duration.getUTCHours();
   const minutes = duration.getUTCMinutes();
-  const secondsLeft = duration.getUTCSeconds(); 
+  const secondsLeft = duration.getUTCSeconds();
   if (+hours > 0) {
     return `${hours}h${minutes}m${secondsLeft}s`;
   }