From 6157554ccb2a3332dcbf9a078e118e36473dfe3d Mon Sep 17 00:00:00 2001 From: guoapeng Date: Thu, 17 Jul 2025 20:31:36 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=98=BE=E7=A4=BA=E5=92=8C=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E6=97=A5=E6=9C=9F=E5=92=8C=E6=97=B6=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/system.ts | 3 + src/assets/styles/element.scss | 104 ++++++++++++++++++++++++++++++- src/components/home/DateTime/index.vue | 108 +++++++++++++++++++++++++++++++++ src/hooks/useServerTime.ts | 64 +++++++++++++++++++ src/libs/http.ts | 6 +- src/libs/utils.ts | 13 ++++ src/stores/useSystemStore.ts | 1 + src/views/main/index.vue | 14 +++++ 8 files changed, 309 insertions(+), 4 deletions(-) create mode 100644 src/components/home/DateTime/index.vue create mode 100644 src/hooks/useServerTime.ts diff --git a/src/apis/system.ts b/src/apis/system.ts index 0958cde..edb594e 100644 --- a/src/apis/system.ts +++ b/src/apis/system.ts @@ -15,3 +15,6 @@ export const getDeviceSelfTest = () => http.get('/self-test/status') export const deviceSelfTestFinish = () => http.post('/self-test/finish') export const getSprayStatus = () => http.get('/spray-task/status') export const setParams = (params: any) => http.post('/spray-task/set-params', params) + +export const getTime = (): Promise<{ epochMilli: number }> => http.get('/sys/get-datetime') +export const setTime = (epochMilli: number): Promise => http.post('/sys/set-datetime', { epochMilli }) diff --git a/src/assets/styles/element.scss b/src/assets/styles/element.scss index 971b4d0..ddf8c45 100644 --- a/src/assets/styles/element.scss +++ b/src/assets/styles/element.scss @@ -19,7 +19,7 @@ } .el-input { - height: 80px; + height: 80px !important; background: #E8ECF7; .el-input__wrapper { background: #E8ECF7; @@ -328,3 +328,105 @@ font-size: 30px; padding: 20px; } +.el-picker-panel { + width: 700px; + .el-picker-panel__body-wrapper { + width: 100%; + .el-picker-panel__body { + width: 100%; + .el-date-picker__time-header { + .el-date-picker__editor-wrap { + .el-input { + height: 60px !important; + .el-input__inner { + font-size: 30px; + } + } + .el-time-panel { + width: 330px; + .el-time-panel__content:before { + border: none + } + .el-time-spinner__list:after, .el-time-spinner__list:before { + height: 0; + } + .el-time-spinner__item { + font-size: 30px; + height: 80px; + line-height: 40px; + } + .el-time-panel__footer { + height: 70px; + line-height: 70px; + .el-time-panel__btn { + font-size: 30px; + } + } + } + + } + } + .el-date-picker__header { + display: flex; + justify-content: space-between; + align-items: center; + .el-date-picker__header-label { + font-size: 30px; + } + .el-picker-panel__icon-btn { + .el-icon { + width: 30px; + } + } + } + + .el-picker-panel__content { + width: 95%; + .el-year-table, .el-month-table { + height: 50px; + .el-date-table-cell { + height: 50px; + + .el-date-table-cell__text { + font-size: 25px; + line-height: 50px; + width: 100px; + height: 50px; + } + } + } + .el-date-table { + font-size: 20px; + width: 100%; + + .el-date-table__row { + line-height: 50px; + } + td { + padding: 10px 0; + width: 40px; + height: 30px; + .el-date-table-cell { + height: 50px; + .el-date-table-cell__text { + font-size: 25px; + line-height: 50px; + width: 50px; + height: 50px; + } + } + + } + } + } + } + } + .el-picker-panel__footer { + height: 80px; + line-height: 80px; + .el-button { + height: 50px; + font-size: 30px; + } + } +} diff --git a/src/components/home/DateTime/index.vue b/src/components/home/DateTime/index.vue new file mode 100644 index 0000000..5f8ab8d --- /dev/null +++ b/src/components/home/DateTime/index.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/src/hooks/useServerTime.ts b/src/hooks/useServerTime.ts new file mode 100644 index 0000000..0233b45 --- /dev/null +++ b/src/hooks/useServerTime.ts @@ -0,0 +1,64 @@ +import { getTime, setTime } 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') + const editVisible = ref(false) + + let interval: number | null = null + + onMounted(async () => { + try { + await getDateTime() + } + // eslint-disable-next-line unused-imports/no-unused-vars + catch (error) { + // currentTime.value = formatDateTime(undefined, new Date()) + console.error('获取服务器时间失败') + } + }) + + const openDialog = () => { + editVisible.value = true + } + + const closeDialog = () => { + editVisible.value = false + } + + const getDateTime = async () => { + serverTime.value = (await getTime())?.epochMilli + clientFetchTime.value = Date.now() + let num = 0 + if (interval) + clearInterval(interval) + interval = window.setInterval(async () => { + if (num > 60) { + serverTime.value = (await getTime())?.epochMilli + 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) + } + + const setDateTime = async (time: number) => { + await setTime(time) + await getDateTime() + } + + onUnmounted(() => { + if (interval) + clearInterval(interval) + }) + + return { currentTime, serverTime, editVisible, setDateTime, openDialog, closeDialog } +} diff --git a/src/libs/http.ts b/src/libs/http.ts index 15b740c..4d92ae6 100644 --- a/src/libs/http.ts +++ b/src/libs/http.ts @@ -51,13 +51,13 @@ http.interceptors.response.use( } else { if (error.message.includes('timeout')) { - FtMessage.error('请求超时') + FtMessage.error(`请求超时: ${error.response.config.url}`) } else if (error.message.includes('Network')) { - FtMessage.error('网络连接错误') + FtMessage.error(`网络连接错误: ${error.response.config.url}`) } else { - FtMessage.error('接口请求失败') + FtMessage.error(`接口请求失败: ${error.response.config.url}`) } error.response = { data: { diff --git a/src/libs/utils.ts b/src/libs/utils.ts index ac18b17..6ae330c 100644 --- a/src/libs/utils.ts +++ b/src/libs/utils.ts @@ -139,3 +139,16 @@ export const colors = [ export function isNumber(value: any) { return typeof value === 'number' && !Number.isNaN(value) } + +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'), + DD: String(now.getDate()).padStart(2, '0'), + HH: String(now.getHours()).padStart(2, '0'), + mm: String(now.getMinutes()).padStart(2, '0'), + ss: String(now.getSeconds()).padStart(2, '0'), + } + + return template.replace(/YYYY|MM|DD|HH|mm|ss/g, token => tokens[token]!) +} diff --git a/src/stores/useSystemStore.ts b/src/stores/useSystemStore.ts index 9720099..2300f72 100644 --- a/src/stores/useSystemStore.ts +++ b/src/stores/useSystemStore.ts @@ -20,6 +20,7 @@ export const useSystemStore = defineStore('system', { slideTemperature: 0, nozzleTemperature: 0, }, + currentTime: '0000-00-00 00:00:00', isDebug: import.meta.env.FT_NODE_ENV === 'dev', streamVisible: false, systemList: [{ cmdCode: '' }], diff --git a/src/views/main/index.vue b/src/views/main/index.vue index 813d084..f621cca 100644 --- a/src/views/main/index.vue +++ b/src/views/main/index.vue @@ -2,9 +2,11 @@ import { getDeviceStatus } from 'apis/system' import FtStream from 'components/common/FTStream/index.vue' import Check from 'components/home/Check/index.vue' +import DatetimeEdit from 'components/home/DateTime/index.vue' import Environment from 'components/home/Environment/index.vue' import Stop from 'components/home/Stop/index.vue' import { ElMessageBox } from 'element-plus' +import { useServerTime } from 'hooks/useServerTime' import { isClose, reconnectCurrentCount, socket } from 'libs/socket' import { useSystemStore } from 'stores/useSystemStore' // 引入 systemStore import { computed, ref, watch } from 'vue' @@ -14,6 +16,8 @@ const route = useRoute() const router = useRouter() const systemStore = useSystemStore() // 使用 systemStore +const { currentTime, openDialog, closeDialog, editVisible } = useServerTime() + const checkVisible = ref(false) console.log(import.meta.env.FT_NODE_ENV) const environmentVisible = ref(false) @@ -174,6 +178,9 @@ const backHandle = () => {
+
+ {{ currentTime }} +
{ + @@ -291,4 +299,10 @@ const backHandle = () => { width: 50px; margin: 0 50px; } +.time { + color: #ddd; + display: flex; + align-items: center; + font-size: 45px; +}