diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue index 6467211c..49231f06 100644 --- a/src/layouts/BasicLayout.vue +++ b/src/layouts/BasicLayout.vue @@ -28,7 +28,7 @@ import useAlarmStore from '@/store/modules/alarm'; import { getServerTime } from '@/api'; import { MENU_PATH_INLINE } from '@/constants/menu-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; -import { parseDateToStr } from '@/utils/date-utils'; +import { getTimezoneOffset, parseDateUTCToStr } from '@/utils/date-utils'; import { parseUrlPath } from '@/plugins/file-static-url'; const { proConfig, waterMarkContent } = useLayoutStore(); const { t, currentLocale } = useI18n(); @@ -196,6 +196,7 @@ onMounted(() => { // ==== 服务器时间显示 start let serverTimeInterval: any = null; let serverTime = 0; +let serverTimeZone = getTimezoneOffset(); // 获取服务器时间 function fnGetServerTime() { @@ -204,12 +205,16 @@ function fnGetServerTime() { clearInterval(serverTimeInterval); serverTimeInterval = null; serverTime = res.data.timestamp; + serverTimeZone = res.data.timezone; // 用DOM直接修改 const serverTimeDom = document.getElementById('serverTimeDom'); serverTimeInterval = setInterval(() => { serverTime += 1000; if (serverTimeDom) { - serverTimeDom.innerText = parseDateToStr(serverTime); + serverTimeDom.innerText = parseDateUTCToStr( + serverTime, + serverTimeZone + ); } else { clearInterval(serverTimeInterval); serverTimeInterval = null; diff --git a/src/utils/date-utils.ts b/src/utils/date-utils.ts index 8dd0d24b..5b5243ca 100644 --- a/src/utils/date-utils.ts +++ b/src/utils/date-utils.ts @@ -1,27 +1,19 @@ // 依赖来源 https://github.com/iamkun/dayjs import dayjs from 'dayjs'; - +import utc from 'dayjs/plugin/utc'; +import timezone from 'dayjs/plugin/timezone'; +dayjs.extend(utc); +dayjs.extend(timezone); // 导入本地化语言并设为默认使用,只需要全局有引入就行 // import('dayjs/locale/zh-cn'); // dayjs.locale('zh-cn'); -/**年 列如:2022 */ -export const YYYY = 'YYYY'; - -/**年-月 列如:2022-12 */ -export const YYYY_MM = 'YYYY-MM'; - -/**年-月-日 列如:2022-12-30 */ -export const YYYY_MM_DD = 'YYYY-MM-DD'; - -/**年月日时分秒 列如:20221230010159 */ -export const YYYYMMDDHHMMSS = 'YYYYMMDDHHmmss'; - /**年-月-日 时:分:秒 列如:2022-12-30 01:01:59 */ export const YYYY_MM_DD_HH_MM_SS = 'YYYY-MM-DD HH:mm:ss'; /**国际时间 列如:2022-12-30T01:01:59+08:00 */ export const RFC3339 = 'YYYY-MM-DDTHH:mm:ssZ'; + /**国际时间 列如:Thu, Nov 14 2024 10:19 GMT+08:00 */ export const RFC822Z = 'ddd, MMM DD YYYY HH:mm [GMT]Z'; @@ -52,13 +44,34 @@ export function parseDateToStr( } /** - * 格式时间成日期路径 - * - * 年/月 列如:2022/12 - * @returns 时间格式字符串 YYYY/MM + * 格式时间 + * @param date 可转的Date对象 + * @param offset 时间格式 默认 RFC3339 + * @returns 时间格式字符串 */ -export function parseDatePath(date: number | Date = Date.now()): string { - return dayjs(date).format('YYYY/MM'); +export function parseDateUTCToStr( + date: string | number | Date, + offset: string = '+0000' +): string { + // 将时间戳转换为 UTC 时间 + const utcTime = dayjs.utc(date); + // 使用自定义时区偏移格式化时间 + return utcTime.format(`YYYY-MM-DD HH:mm:ss [UTC${offset}]`); +} + +/** + * 获取时区偏移量 + * @returns +0800格式 + */ +export function getTimezoneOffset(): string { + const offset = new Date().getTimezoneOffset(); + const hours = Math.abs(Math.floor(offset / 60)); + const minutes = Math.abs(offset % 60); + const sign = offset <= 0 ? '+' : '-'; + return `${sign}${String(hours).padStart(2, '0')}${String(minutes).padStart( + 2, + '0' + )}`; } /**