From 4de98923b79ee9a87e43380013ebf4502bc359ab Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 1 Apr 2024 18:07:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=BC=E5=BC=8F=E6=97=B6=E9=97=B4-?=
 =?UTF-8?q?=E5=88=B0=E6=8C=87=E5=AE=9A=E6=97=B6=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BasicLayout.vue | 26 +++++++++++++++++---------
 src/utils/date-utils.ts     | 20 +++++++++++++++++++-
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index 9aea6b76..6d6d1c66 100644
--- a/src/layouts/BasicLayout.vue
+++ b/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>
 
diff --git a/src/utils/date-utils.ts b/src/utils/date-utils.ts
index eb84e7b0..7bd644d3 100644
--- a/src/utils/date-utils.ts
+++ b/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`;
   }