fix(admin-spa): 彻底修复时区计算和显示问题

- 修复 getSystemTimezoneDay 函数:正确计算UTC+8时区对应的UTC时间
- 修复时间筛选框显示:昨天/前天显示正确的系统时区日期
- 修复自定义时间范围:正确处理系统时区到UTC的转换
- 简化时区计算逻辑,避免复杂的条件判断
This commit is contained in:
shaw
2025-07-30 12:38:08 +08:00
parent 2bfb61e1d9
commit 81917c281e

View File

@@ -103,15 +103,15 @@ export const useDashboardStore = defineStore('dashboard', () => {
const day = localDate.getDate() const day = localDate.getDate()
if (startOfDay) { if (startOfDay) {
// 创建UTC时间使其在系统时区(UTC+8)显示为 YYYY-MM-DD 00:00:00 // 系统时区UTC+8)的 YYYY-MM-DD 00:00:00
// 例如要在UTC+8显示为 2025-07-29 00:00:00UTC时间应该是 2025-07-28 16:00:00 // 对应的UTC时间是前一天的16:00
const utcDate = new Date(Date.UTC(year, month, day - 1, 24 - systemTz, 0, 0, 0)) // 例如UTC+8的2025-07-29 00:00:00 = UTC的2025-07-28 16:00:00
return utcDate return new Date(Date.UTC(year, month, day - 1, 16, 0, 0, 0))
} else { } else {
// 创建UTC时间使其在系统时区(UTC+8)显示为 YYYY-MM-DD 23:59:59.999 // 系统时区UTC+8)的 YYYY-MM-DD 23:59:59
// 例如要在UTC+8显示为 2025-07-29 23:59:59UTC时间应该是 2025-07-29 15:59:59 // 对应的UTC时间是当天的15:59:59
const utcDate = new Date(Date.UTC(year, month, day, 24 - systemTz - 1, 59, 59, 999)) // 例如UTC+8的2025-07-29 23:59:59 = UTC的2025-07-29 15:59:59
return utcDate return new Date(Date.UTC(year, month, day, 15, 59, 59, 999))
} }
} }
@@ -411,22 +411,47 @@ export const useDashboardStore = defineStore('dashboard', () => {
dateFilter.value.customEnd = endDate.toISOString().split('T')[0] dateFilter.value.customEnd = endDate.toISOString().split('T')[0]
// 设置 customRange 为 Element Plus 需要的格式 // 设置 customRange 为 Element Plus 需要的格式
// 显示系统时区的时间 // 对于小时粒度的昨天/前天,需要特殊处理显示
const formatDateForDisplay = (utcDate) => { if (trendGranularity.value === 'hour' && (preset === 'yesterday' || preset === 'dayBefore')) {
const systemTzDate = getDateInSystemTimezone(utcDate) // 获取本地日期
const year = systemTzDate.getUTCFullYear() const targetDate = new Date()
const month = String(systemTzDate.getUTCMonth() + 1).padStart(2, '0') if (preset === 'yesterday') {
const day = String(systemTzDate.getUTCDate()).padStart(2, '0') targetDate.setDate(targetDate.getDate() - 1)
const hours = String(systemTzDate.getUTCHours()).padStart(2, '0') } else {
const minutes = String(systemTzDate.getUTCMinutes()).padStart(2, '0') targetDate.setDate(targetDate.getDate() - 2)
const seconds = String(systemTzDate.getUTCSeconds()).padStart(2, '0') }
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
// 显示系统时区的完整一天
const year = targetDate.getFullYear()
const month = String(targetDate.getMonth() + 1).padStart(2, '0')
const day = String(targetDate.getDate()).padStart(2, '0')
dateFilter.value.customRange = [
`${year}-${month}-${day} 00:00:00`,
`${year}-${month}-${day} 23:59:59`
]
} else {
// 其他情况近24小时或天粒度
const formatDateForDisplay = (date) => {
// 固定使用UTC+8来显示时间
const systemTz = 8
const tzOffset = systemTz * 60 * 60 * 1000
const localTime = new Date(date.getTime() + tzOffset)
const year = localTime.getUTCFullYear()
const month = String(localTime.getUTCMonth() + 1).padStart(2, '0')
const day = String(localTime.getUTCDate()).padStart(2, '0')
const hours = String(localTime.getUTCHours()).padStart(2, '0')
const minutes = String(localTime.getUTCMinutes()).padStart(2, '0')
const seconds = String(localTime.getUTCSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
dateFilter.value.customRange = [
formatDateForDisplay(startDate),
formatDateForDisplay(endDate)
]
} }
dateFilter.value.customRange = [
formatDateForDisplay(startDate),
formatDateForDisplay(endDate)
]
} }
// 触发数据刷新 // 触发数据刷新