fix: 重新封装时间组件

src/components/common/FTDatetime/index.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { getTime, setTime } from 'apis/system'
+import { FtMessage } from 'libs/message'
+import { formatDateTime } from 'libs/utils'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const serverTime = ref<number | undefined>() // 初始服务器时间戳
+const clientFetchTime = ref<number | null>(null) // 获取服务器时间时的客户端时间戳
+const currentTime = ref<string>('0001-00-00 00:00:00')
+const editVisible = ref(false)
+
+let interval: number | null = null
+
+onMounted(async () => {
+  try {
+    await getDateTime()
+  }
+
+  catch (error) {
+    // currentTime.value = formatDateTime(undefined, new Date())
+    console.error('获取服务器时间失败')
+  }
+})
+
+const openDialog = () => {
+  form.value.epochMilli = serverTime.value
+  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({ epochMilli: time })
+  await getDateTime()
+}
+
+const form = ref<{ epochMilli?: number }>({})
+
+const formRef = ref()
+
+const rules = {
+  epochMilli: [
+    { required: true, message: '请选择时间', trigger: 'change' },
+  ],
+}
+
+const okHandle = async () => {
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
+      return
+    }
+    await setDateTime(form.value.epochMilli as number)
+    FtMessage.success('修改成功')
+    closeDialog()
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+onUnmounted(() => {
+  if (interval)
+    clearInterval(interval)
+})
+</script>
+
+<template>
+  <span @click="openDialog">{{ currentTime }}</span>
+  <ft-dialog :visible="editVisible" title="设置日期与时间" width="40%" :ok-handle="okHandle" @cancel="closeDialog">
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+      <el-form-item label="日期与时间" prop="epochMilli">
+        <el-date-picker
+          v-model="form.epochMilli"
+          :show-now="false"
+          format="YYYY-MM-DD hh:mm:ss"
+          value-format="x"
+          style="width: 100%"
+          type="datetime"
+          placeholder="请选择日期和时间"
+        />
+      </el-form-item>
+    </el-form>
+  </ft-dialog>
+</template>

src/components/system/EditDate/index.vue

@@ -3,21 +3,16 @@ import { useServerTime } from 'hooks/useServerTime'
 import { FtMessage } from 'libs/message'
 import { ref } from 'vue'
 
+const props = defineProps({
+  datetime: {
+    type: Number,
+    default: 0,
+  },
+})
 const emits = defineEmits(['ok', 'close'])
 
-const { serverTime, setDateTime } = useServerTime()
-
-console.log(serverTime.value)
 const form = ref<{ epochMilli?: number }>({
-  epochMilli: serverTime.value,
-})
-
-let onceFlag = false
-watch(() => serverTime.value, () => {
-  if (!onceFlag) {
-    onceFlag = true
-    form.value.epochMilli = serverTime.value
-  }
+  epochMilli: props.datetime,
 })
 
 const formRef = ref()
@@ -34,8 +29,6 @@ const okHandle = async () => {
     if (!valid) {
       return
     }
-    await setDateTime(form.value.epochMilli as number)
-    FtMessage.success('修改成功')
     emits('ok')
   }
   catch (e) {

src/layouts/default.vue

@@ -3,14 +3,13 @@ import { getContainerList } from 'apis/container'
 import { craftList } from 'apis/crafts'
 import { getSolsList } from 'apis/solution'
 import logoutIcon from 'assets/images/logout.svg'
+import FtDatetime from 'components/common/FTDatetime/index.vue'
 import CheckCraft from 'components/home/CheckCraft/index.vue'
 import Liquid from 'components/home/Liquid/index.vue'
 import Check from 'components/system/Check/index.vue'
-import EditDate from 'components/system/EditDate/index.vue'
 import Stop from 'components/system/Stop/index.vue'
 import { ElMessageBox } from 'element-plus'
 import { useActivateDebug } from 'hooks/useActivateDebug'
-import { useServerTime } from 'hooks/useServerTime'
 import { FtMessage } from 'libs/message'
 import { isClose, socket } from 'libs/socket'
 import { authRoutes } from 'router/routes'
@@ -21,12 +20,6 @@ import { useRouter } from 'vue-router'
 
 const { handleLogoClick } = useActivateDebug()
 
-const { currentTime, openDialog, closeDialog, editVisible } = useServerTime()
-
-watch(() => currentTime.value, () => {
-  systemStore.currentTime = currentTime.value
-})
-
 const systemStore = useSystemStore()
 const router = useRouter()
 
@@ -189,8 +182,8 @@ const containerStatus = computed(() => {
           </template>
         </el-dropdown>
 
-        <div class="time" @click="openDialog">
-          {{ currentTime }}
+        <div class="time">
+          <FtDatetime />
         </div>
         <div class="user">
           <el-dropdown class="user-dropdown" trigger="click">
@@ -305,7 +298,6 @@ const containerStatus = computed(() => {
     <Check v-if="isCheck" @close="isCheck = false" />
     <Stop v-if="systemStore.systemStatus.emergencyStop" />
     <CheckCraft v-if="checkCraftVisible" @close="checkCraftVisible = false" />
-    <EditDate v-if="editVisible" @close="closeDialog" @ok="closeDialog" />
   </el-container>
 </template>
 

src/main.ts

@@ -1,6 +1,7 @@
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import FtButton from 'components/common/FTButton/index.vue'
 import FtChart from 'components/common/FTChart/index.vue'
+import FtDatetime from 'components/common/FTDatetime/index.vue'
 import FtDialog from 'components/common/FTDialog/index.vue'
 import FtStream from 'components/common/FTStream/index.vue'
 import FtTable from 'components/common/FTTable/index.vue'
@@ -23,6 +24,7 @@ app.component('FtButton', FtButton)
 app.component('FtDialog', FtDialog)
 app.component('FtStream', FtStream)
 app.component('FtChart', FtChart)
+app.component('FtDatetime', FtDatetime)
 app
   .use(router)
   .use(ElementPlus, { locale, zIndex: 3000 })