From bdd00dfe234f4dd27000c2e15d3023fa85c04eff Mon Sep 17 00:00:00 2001 From: guoapeng Date: Thu, 5 Jun 2025 20:25:01 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=A1=E6=97=B6=E5=99=A8=E5=92=8C?= =?UTF-8?q?=E5=80=92=E8=AE=A1=E6=97=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/system.ts | 1 + src/components/common/Countdown.vue | 103 ++++++++++++++++++++++++++++++++++++ src/components/home/Tube/index.vue | 2 + src/hooks/useServerTime.ts | 43 +++++++++++++++ src/layouts/default.vue | 14 ++--- src/libs/utils.ts | 3 +- src/types/system.d.ts | 2 + 7 files changed, 155 insertions(+), 13 deletions(-) create mode 100644 src/components/common/Countdown.vue create mode 100644 src/hooks/useServerTime.ts diff --git a/src/apis/system.ts b/src/apis/system.ts index 7f4e8b6..c0c4137 100644 --- a/src/apis/system.ts +++ b/src/apis/system.ts @@ -6,3 +6,4 @@ export const getStatus = (): Promise => http.get('/sys/devi export const getPoint = (motor: string): Promise => http.get(`/motor/position/${motor}`) export const requireOutTray = (): Promise<{ moduleCode: string }[]> => http.get('/self-test/require-out-tray') export const setIgnoreItem = (params: { ignoreSelfTestType: string, ignore: boolean }): Promise => http.post('/self-test/set-ignore-item', params) +export const getTime = (): Promise => http.get('/sys/datetime') diff --git a/src/components/common/Countdown.vue b/src/components/common/Countdown.vue new file mode 100644 index 0000000..ff21d71 --- /dev/null +++ b/src/components/common/Countdown.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/src/components/home/Tube/index.vue b/src/components/home/Tube/index.vue index a02b551..1e8aaa9 100644 --- a/src/components/home/Tube/index.vue +++ b/src/components/home/Tube/index.vue @@ -5,6 +5,7 @@ import errorIcon from 'assets/images/error.svg' import ingIcon from 'assets/images/ing.svg' import successIcon from 'assets/images/success.svg' import waitIcon from 'assets/images/wait.svg' +import CountDown from 'components/common/Countdown.vue' import { useHomeStore } from 'stores/homeStore' import { useSystemStore } from 'stores/systemStore' import { computed, ref } from 'vue' @@ -167,6 +168,7 @@ defineExpose({ 烘干中 退火中 +
{{ data.targetTemperature || '--' }}℃ diff --git a/src/hooks/useServerTime.ts b/src/hooks/useServerTime.ts new file mode 100644 index 0000000..d233c29 --- /dev/null +++ b/src/hooks/useServerTime.ts @@ -0,0 +1,43 @@ +import { getTime } from 'apis/system' +import { formatDateTime } from 'libs/utils' +import { onMounted, onUnmounted, ref } from 'vue' + +export function useServerTime() { + const serverTime = ref(null) // 初始服务器时间戳 + const clientFetchTime = ref(null) // 获取服务器时间时的客户端时间戳 + const currentTime = ref('0000-00-00 00:00:00') + + let interval: number | null = null + + onMounted(async () => { + try { + serverTime.value = await getTime() + clientFetchTime.value = Date.now() + let num = 0 + interval = window.setInterval(async () => { + if (num > 60) { + serverTime.value = await getTime() + clientFetchTime.value = Date.now() + num = 0 + } + if (serverTime.value && clientFetchTime.value) { + const elapsed = Date.now() - clientFetchTime.value + const currentServerTime = serverTime.value + elapsed + currentTime.value = formatDateTime(undefined, new Date(currentServerTime)) + num++ + } + }, 1000) + } + // eslint-disable-next-line unused-imports/no-unused-vars + catch (error) { + console.error('获取服务器时间失败') + } + }) + + onUnmounted(() => { + if (interval) + clearInterval(interval) + }) + + return { currentTime } +} diff --git a/src/layouts/default.vue b/src/layouts/default.vue index 21cdc7e..3015213 100644 --- a/src/layouts/default.vue +++ b/src/layouts/default.vue @@ -6,25 +6,20 @@ import Check from 'components/check/index.vue' import Liquid from 'components/home/Liquid/index.vue' import Stop from 'components/Stop/index.vue' import { useActivateDebug } from 'hooks/useActivateDebug' +import { useServerTime } from 'hooks/useServerTime' import { isClose } from 'libs/socket' -import { formatDateTime } from 'libs/utils' import { authRoutes } from 'router/routes' import { useDebugStore } from 'stores/debugStore' import { useSystemStore } from 'stores/systemStore' -import { computed, onMounted, onUnmounted, ref, watch } from 'vue' +import { computed, onMounted, ref, watch } from 'vue' import { useRouter } from 'vue-router' const { handleLogoClick } = useActivateDebug() +const { currentTime } = useServerTime() const systemStore = useSystemStore() const router = useRouter() -const currentTime = ref(formatDateTime()) - -const timeInterval = setInterval(() => { - currentTime.value = formatDateTime() -}, 1000) - onMounted(async () => { if (!systemStore.systemStatus.selfTest && systemStore.systemStatus.currentUser?.username !== 'test') { isCheck.value = true @@ -32,9 +27,6 @@ onMounted(async () => { solutionList.value = (await getSolsList()).list }) -onUnmounted(() => { - clearInterval(timeInterval) -}) // meta的isDefault=true 并且 当isDebug=true时,把debug路由的页面也显示 const menuList = computed(() => { return authRoutes.filter((item) => { diff --git a/src/libs/utils.ts b/src/libs/utils.ts index b58e991..a940326 100644 --- a/src/libs/utils.ts +++ b/src/libs/utils.ts @@ -102,8 +102,7 @@ export function isNumber(value: any) { return typeof value === 'number' && !Number.isNaN(value) } -export function formatDateTime(template: string = 'YYYY-MM-DD HH:mm:ss'): string { - const now = new Date() +export function formatDateTime(template: string = 'YYYY-MM-DD HH:mm:ss', now: Date = new Date()): string { const tokens: Record = { YYYY: String(now.getFullYear()), MM: String(now.getMonth() + 1).padStart(2, '0'), diff --git a/src/types/system.d.ts b/src/types/system.d.ts index 7b5e555..ca604c1 100644 --- a/src/types/system.d.ts +++ b/src/types/system.d.ts @@ -71,6 +71,8 @@ declare namespace System { heatTemperature?: number targetTemperature?: number temperature: number + targetTime?: number + startHeatTime?: number } interface SolutionContainer { containerCode: number