From a228697c2b438ccbba0263855a0da5f729538be0 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Thu, 5 Jun 2025 15:19:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=80=92=E8=AE=A1=E6=97=B6=E5=92=8C?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E5=B7=B2=E6=9C=8D=E5=8A=A1=E5=99=A8=E4=B8=BA?=
 =?UTF-8?q?=E5=87=86?=
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 | 105 +++++++++++++++++++++++++++++
 src/components/home/Tube/index.vue  |  24 ++-----
 src/hooks/useServerTime.ts          |  43 ++++++++++++
 src/layouts/default.vue             |  15 ++---
 src/libs/utils.ts                   |   4 +-
 src/stores/systemStore.ts           |   5 +-
 src/types/system.d.ts               |   1 +
 src/views/debug/index.vue           | 127 ++++++++++++++++++++----------------
 9 files changed, 240 insertions(+), 85 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 ab33991..9ffe170 100644
--- a/src/apis/system.ts
+++ b/src/apis/system.ts
@@ -5,3 +5,4 @@ export const control = <T>(params: System.CmdControlParams<T>): Promise<null> =>
 export const getStatus = (): Promise<System.SystemStatus> => http.get('/sys/device-status')
 export const getPoint = (): Promise<string> => http.get('/cmd/step/gantry-point')
 export const requireOutTray = (): Promise<{ moduleCode: string }[]> => http.get('/self-test/require-out-tray')
+export const getTime = (): Promise<number> => http.get('/sys/datetime')
diff --git a/src/components/common/Countdown.vue b/src/components/common/Countdown.vue
new file mode 100644
index 0000000..674c71a
--- /dev/null
+++ b/src/components/common/Countdown.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { useSystemStore } from 'stores/systemStore'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+  current: number
+  startTime: number
+  duration: number // 秒
+}>()
+
+const systemStore = useSystemStore()
+
+const remaining = ref(0)
+let timer: number | null = null
+
+const calculateRemaining = () => {
+  // const now = new Date()
+  // // 计算时间差（考虑网络延迟）
+  // const timeDiff = now.getTime() - props.current
+  // 计算结束时间
+  console.log(props)
+  const endTime = props.startTime + props.duration * 1000
+  // 剩余时间 = 结束时间 - 当前时间 - 网络延迟
+  remaining.value = Math.max(0, endTime - new Date(systemStore.currentTime).getTime())
+  console.log('remaining', remaining.value)
+}
+
+const updateCountdown = () => {
+  if (remaining.value <= 0) {
+    stopTimer()
+    return
+  }
+  remaining.value -= 1000
+}
+
+const startTimer = () => {
+  updateCountdown() // 立即执行一次
+  timer = window.setInterval(() => {
+    calculateRemaining()
+    updateCountdown()
+  }, 1000)
+}
+
+const stopTimer = () => {
+  if (timer) {
+    console.log(111)
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+onMounted(() => {
+  startTimer()
+})
+
+onBeforeUnmount(() => {
+  stopTimer()
+})
+
+// 时间分割计算
+const days = ref(0)
+const hours = ref('00')
+const minutes = ref('00')
+const seconds = ref('00')
+
+// 监听剩余时间变化
+watch(
+  () => remaining.value,
+  (newVal) => {
+    if (newVal <= 0 || !newVal) {
+      days.value = 0
+      hours.value = '00'
+      minutes.value = '00'
+      seconds.value = '00'
+      return
+    }
+
+    days.value = Math.floor(newVal / (1000 * 60 * 60 * 24))
+
+    const hoursNum = Math.floor((newVal % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+    hours.value = hoursNum.toString().padStart(2, '0')
+
+    const minutesNum = Math.floor((newVal % (1000 * 60 * 60)) / (1000 * 60))
+    minutes.value = minutesNum.toString().padStart(2, '0')
+
+    const secondsNum = Math.floor((newVal % (1000 * 60)) / 1000)
+    seconds.value = secondsNum.toString().padStart(2, '0')
+  },
+)
+</script>
+
+<template>
+  <div class="countdown">
+    <span v-if="days">{{ days }}天</span>
+    {{ hours }}:{{ minutes }}:{{ seconds }}
+  </div>
+</template>
+
+<style scoped>
+.countdown {
+  text-align: center;
+  font-size: 12px;
+  color: #FF4500;
+}
+</style>
diff --git a/src/components/home/Tube/index.vue b/src/components/home/Tube/index.vue
index 2479fa9..0b22cc2 100644
--- a/src/components/home/Tube/index.vue
+++ b/src/components/home/Tube/index.vue
@@ -5,10 +5,10 @@ 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 { socket } from 'libs/socket'
+import CountDown from 'components/common/Countdown.vue'
 import { useHomeStore } from 'stores/homeStore'
 import { useSystemStore } from 'stores/systemStore'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<{ data: System.HeatArea }>(), {
   data: () => ({
@@ -17,6 +17,7 @@ const props = withDefaults(defineProps<{ data: System.HeatArea }>(), {
     trayStatus: 0,
     fanOpen: false,
     heating: false,
+    heatingType: 'constant',
     capExist: false,
     temperature: 0,
     targetTemperature: 0,
@@ -25,19 +26,6 @@ const props = withDefaults(defineProps<{ data: System.HeatArea }>(), {
 
 const emits = defineEmits(['selectChange', 'setTemperature'])
 
-onMounted(() => {
-  socket.init(receiveMessage, 'heat_countdown')
-})
-
-onUnmounted(() => {
-  socket.unregisterCallback(receiveMessage, 'heat_countdown')
-})
-
-const numList = ref<{ heatModuleCode: string, countdownStr: string }[]>([])
-const receiveMessage = (data: any) => {
-  numList.value = data
-}
-
 const homeStore = useHomeStore()
 const systemStore = useSystemStore()
 const mousedownHandle = async (e: Event) => {
@@ -122,7 +110,7 @@ defineExpose({
     <div class="tube-item" :class="{ 'tube-item-heat': ['warm_up', 'thermostatic'].includes(data.heatingType), 'tube-item-constant': data.heatingType === 'constant', 'tube-item-fan': data.fanOpen }" @click.prevent="mousedownHandle" @touch.prevent="mousedownHandle">
       <div v-if="data.trayStatus === 0" class="tube-disable" />
       <div
-        v-if="data.trayStatus !== 0 && craft?.state"
+        v-if="craft?.state"
         class="status" :class="{
           'status-success': craft?.state === 'FINISHED',
           'status-wait': craft?.state === 'READY',
@@ -171,9 +159,7 @@ defineExpose({
       <span v-show="data.heatingType === 'constant'" style="color: #eccbb6;font-weight: bold ">恒温中</span>
       <span v-show="data.fanOpen" style="color: #6CD3FF;font-weight: bold ">降温中</span>
     </div>
-    <div v-if="numList.find(item => item.heatModuleCode === data.moduleCode)?.countdownStr" style="text-align: center;font-size: 12px;color:#FE0A0A ">
-      {{ numList.find(item => item.heatModuleCode === data.moduleCode)?.countdownStr }}
-    </div>
+    <CountDown v-if="data.startHeatTime && data.targetTime" :current="new Date().getTime()" :start-time="data.startHeatTime" :duration="data.targetTime" />
     <div class="footer">
       <div class="tem-box">
         <span :class="{ 'active-footer': hearInfo?.selected }"> {{ data.targetTemperature || '--' }}℃</span>
diff --git a/src/hooks/useServerTime.ts b/src/hooks/useServerTime.ts
new file mode 100644
index 0000000..c32fdf1
--- /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<number | null>(null) // 初始服务器时间戳
+  const clientFetchTime = ref<number | null>(null) // 获取服务器时间时的客户端时间戳
+  const currentTime = ref<string>('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 > 10) {
+          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 dac4f1e..31fcdb4 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -5,8 +5,8 @@ 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 { useSystemStore } from 'stores/systemStore'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -14,14 +14,13 @@ 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)
+watch(() => currentTime.value, () => {
+  systemStore.currentTime = currentTime.value
+})
 
 onMounted(async () => {
   if (!systemStore.systemStatus.selfTest && systemStore.systemStatus.currentUser?.username !== 'test') {
@@ -30,7 +29,7 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  clearInterval(timeInterval)
+  // clearInterval(timeInterval)
 })
 // meta的isDefault=true 并且 当isDebug=true时,把debug路由的页面也显示
 const menuList = computed(() => {
@@ -100,7 +99,7 @@ const statusMap = {
         </el-dropdown>
 
         <div class="time">
-          {{ currentTime }}
+          {{ systemStore.currentTime }}
         </div>
         <div class="user">
           <el-dropdown class="user-dropdown" trigger="click">
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 70d77f5..e5f06c7 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -55,6 +55,7 @@ export const cmdNameMap = {
   shake_origin: '摇匀电机回原点',
   filled_solution_start: '开始预充',
   filled_solution_stop: '停止预充',
+  debug_show_smog: '展示烟雾',
 }
 
 export const generateColors = (count: number): string[] => {
@@ -99,8 +100,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<string, string> = {
     YYYY: String(now.getFullYear()),
     MM: String(now.getMonth() + 1).padStart(2, '0'),
diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts
index a42b34f..1acf491 100644
--- a/src/stores/systemStore.ts
+++ b/src/stores/systemStore.ts
@@ -90,6 +90,8 @@ export const useSystemStore = defineStore('system', {
           capExist: false,
           temperature: 0,
           targetTemperature: 0,
+          startHeatTime: 1749105000000,
+          targetTime: 1800,
         },
         {
           moduleCode: 'heat_module_02',
@@ -114,7 +116,7 @@ export const useSystemStore = defineStore('system', {
         {
           moduleCode: 'heat_module_04',
           trayUp: 1,
-          trayStatus: 1,
+          trayStatus: 0,
           heatingType: 'stop',
           fanOpen: true,
           capExist: false,
@@ -230,6 +232,7 @@ export const useSystemStore = defineStore('system', {
     streamVisible: false,
     systemList: [],
     systemLogList: [],
+    currentTime: '0000-00-00 00:00:00',
   }),
   actions: {
     insertLog(log: System.SystemLog) {
diff --git a/src/types/system.d.ts b/src/types/system.d.ts
index 8ff676c..577b3f8 100644
--- a/src/types/system.d.ts
+++ b/src/types/system.d.ts
@@ -9,6 +9,7 @@ declare namespace System {
     menuExpand: boolean
     loginForm: LoginForm
     systemLogList: SystemLog[]
+    currentTime: string
   }
   interface SystemLog {
     cmdName: string
diff --git a/src/views/debug/index.vue b/src/views/debug/index.vue
index f8a9ec4..eaf0039 100644
--- a/src/views/debug/index.vue
+++ b/src/views/debug/index.vue
@@ -471,24 +471,36 @@ const debug_door_stop = async () => {
   }
   await debugStore.sendControl(params)
 }
+//
+// const debug_move_tray_to_solution_area = async () => {
+//   currentCommandId = Date.now().toString()
+//   const params = {
+//     commandId: currentCommandId,
+//     command: 'debug_move_tray_to_solution_area',
+//     params: {
+//       heatId: debugStore.formData.heatArea.index,
+//     },
+//   }
+//   await debugStore.sendControl(params)
+// }
+//
+// const debug_move_tray_to_heat_area = async () => {
+//   currentCommandId = Date.now().toString()
+//   const params = {
+//     commandId: currentCommandId,
+//     command: 'debug_move_tray_to_heat_area',
+//     params: {
+//       heatId: debugStore.formData.heatArea.index,
+//     },
+//   }
+//   await debugStore.sendControl(params)
+// }
 
-const debug_move_tray_to_solution_area = async () => {
-  currentCommandId = Date.now().toString()
-  const params = {
-    commandId: currentCommandId,
-    command: 'debug_move_tray_to_solution_area',
-    params: {
-      heatId: debugStore.formData.heatArea.index,
-    },
-  }
-  await debugStore.sendControl(params)
-}
-
-const debug_move_tray_to_heat_area = async () => {
+const debug_show_smog = async () => {
   currentCommandId = Date.now().toString()
   const params = {
     commandId: currentCommandId,
-    command: 'debug_move_tray_to_heat_area',
+    command: 'debug_show_smog',
     params: {
       heatId: debugStore.formData.heatArea.index,
     },
@@ -520,29 +532,29 @@ const debug_gantry_to_heat_area_tray = async () => {
   await debugStore.sendControl(params)
 }
 
-const debug_cap_in_heat_area = async () => {
-  currentCommandId = Date.now().toString()
-  const params = {
-    commandId: currentCommandId,
-    command: 'debug_cap_in_heat_area',
-    params: {
-      heatId: debugStore.formData.heatArea.index,
-    },
-  }
-  await debugStore.sendControl(params)
-}
-
-const debug_cap_out_heat_area = async () => {
-  currentCommandId = Date.now().toString()
-  const params = {
-    commandId: currentCommandId,
-    command: 'debug_cap_out_heat_area',
-    params: {
-      heatId: debugStore.formData.heatArea.index,
-    },
-  }
-  await debugStore.sendControl(params)
-}
+// const debug_cap_in_heat_area = async () => {
+//   currentCommandId = Date.now().toString()
+//   const params = {
+//     commandId: currentCommandId,
+//     command: 'debug_cap_in_heat_area',
+//     params: {
+//       heatId: debugStore.formData.heatArea.index,
+//     },
+//   }
+//   await debugStore.sendControl(params)
+// }
+//
+// const debug_cap_out_heat_area = async () => {
+//   currentCommandId = Date.now().toString()
+//   const params = {
+//     commandId: currentCommandId,
+//     command: 'debug_cap_out_heat_area',
+//     params: {
+//       heatId: debugStore.formData.heatArea.index,
+//     },
+//   }
+//   await debugStore.sendControl(params)
+// }
 
 const debug_cap_up_one = async () => {
   currentCommandId = Date.now().toString()
@@ -1093,26 +1105,31 @@ const savePositionVisible = ref(false)
           </template>
           <el-divider>复合操作</el-divider>
           <div class="card-box">
+            <div style="display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px">
+              <ft-button size="small" type="primary" :click-handle="debug_show_smog">
+                展示烟雾
+              </ft-button>
+              <ft-button size="small" type="primary" :click-handle="debug_gantry_to_heat_area_cap">
+                机械臂移至拍子位
+              </ft-button>
+              <ft-button size="small" type="primary" :click-handle="debug_gantry_to_heat_area_tray">
+                机械臂移至托盘位
+              </ft-button>
+            </div>
             <el-form>
               <el-form-item>
-                <ft-button size="small" type="primary" :click-handle="debug_move_tray_to_solution_area">
-                  加热托盘移至加液
-                </ft-button>
-                <ft-button size="small" type="primary" :click-handle="debug_cap_in_heat_area">
-                  安装拍子
-                </ft-button>
-                <ft-button size="small" type="primary" :click-handle="debug_move_tray_to_heat_area">
-                  加液托盘移至加热
-                </ft-button>
-                <ft-button size="small" type="primary" :click-handle="debug_cap_out_heat_area">
-                  拆卸拍子
-                </ft-button>
-                <ft-button size="small" type="primary" :click-handle="debug_gantry_to_heat_area_cap">
-                  机械臂移至拍子位
-                </ft-button>
-                <ft-button size="small" type="primary" :click-handle="debug_gantry_to_heat_area_tray">
-                  机械臂移至托盘位
-                </ft-button>
+                <!--                <ft-button size="small" type="primary" :click-handle="debug_move_tray_to_solution_area"> -->
+                <!--                  加热托盘移至加液 -->
+                <!--                </ft-button> -->
+                <!--                <ft-button size="small" type="primary" :click-handle="debug_cap_in_heat_area"> -->
+                <!--                  安装拍子 -->
+                <!--                </ft-button> -->
+                <!--                <ft-button size="small" type="primary" :click-handle="debug_move_tray_to_heat_area"> -->
+                <!--                  加液托盘移至加热 -->
+                <!--                </ft-button> -->
+                <!--                <ft-button size="small" type="primary" :click-handle="debug_cap_out_heat_area"> -->
+                <!--                  拆卸拍子 -->
+                <!--                </ft-button> -->
               </el-form-item>
             </el-form>
           </div>