From 4c57eecd46fe35565440897d6d7889ac8a020305 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Fri, 18 Jul 2025 16:48:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=B6=88=E6=AF=92=E4=B8=AD=E4=B8=8D?=
 =?UTF-8?q?=E8=83=BD=E4=BF=AE=E6=94=B9=E6=97=B6=E9=97=B4;=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=97=B6=E9=97=B4=E5=90=8E=E6=8F=90=E7=A4=BA=E9=87=8D?=
 =?UTF-8?q?=E5=90=AF=E8=AE=BE=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/DatePicker/index.vue | 94 ++++++++++++++++++++----------
 src/components/setting/SystemDate.vue      | 18 +++++-
 2 files changed, 79 insertions(+), 33 deletions(-)

diff --git a/src/components/common/DatePicker/index.vue b/src/components/common/DatePicker/index.vue
index 27ba0a6..d278398 100644
--- a/src/components/common/DatePicker/index.vue
+++ b/src/components/common/DatePicker/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ElMessage } from 'element-plus'
 import { computed, defineEmits, defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps({
@@ -14,6 +15,10 @@ const props = defineProps({
     type: [String, Date],
     default: null,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
   format: {
     type: String,
     default: 'YYYY-MM-DD HH:mm:ss',
@@ -105,22 +110,26 @@ onMounted(() => {
 })
 
 // 监听props变化
-watch(() => props.modelValue, (newVal) => {
-  if (newVal) {
-    const date = new Date(Number(newVal))
-    if (!Number.isNaN(date.getTime())) {
-      selectedDate.value = date
-      currentYear.value = date.getFullYear()
-      currentMonth.value = date.getMonth()
-      selectedHour.value = date.getHours().toString().padStart(2, '0')
-      selectedMinute.value = date.getMinutes().toString().padStart(2, '0')
-      selectedSecond.value = date.getSeconds().toString().padStart(2, '0')
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      const date = new Date(Number(newVal))
+      if (!Number.isNaN(date.getTime())) {
+        selectedDate.value = date
+        currentYear.value = date.getFullYear()
+        currentMonth.value = date.getMonth()
+        selectedHour.value = date.getHours().toString().padStart(2, '0')
+        selectedMinute.value = date.getMinutes().toString().padStart(2, '0')
+        selectedSecond.value = date.getSeconds().toString().padStart(2, '0')
+      }
     }
-  }
-  else {
-    selectedDate.value = null
-  }
-}, { deep: true })
+    else {
+      selectedDate.value = null
+    }
+  },
+  { deep: true },
+)
 
 // 日期操作
 const prevMonth = () => {
@@ -233,6 +242,10 @@ const toggleDropdown = (event?: MouseEvent) => {
   if (event) {
     event.stopPropagation()
   }
+  if (props.disabled) {
+    ElMessage.error('请在消毒结束后再试')
+    return
+  }
   isDropdownVisible.value = !isDropdownVisible.value
 }
 
@@ -242,7 +255,9 @@ const isSameDay = (date1: Date, date2: Date | null) => {
     return false
   }
   return (
-    date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate()
+    date1.getFullYear() === date2.getFullYear()
+    && date1.getMonth() === date2.getMonth()
+    && date1.getDate() === date2.getDate()
   )
 }
 
@@ -253,10 +268,7 @@ const isDateInRange = (date: Date) => {
   if (min && date < min) {
     return false
   }
-  if (max && date > max) {
-    return false
-  }
-  return true
+  return !(max && date > max)
 }
 
 // 点击外部关闭下拉框
@@ -307,9 +319,7 @@ onUnmounted(() => {
           <button class="nav-btn" @click="prevMonth">
             <el-icon><ArrowLeft /></el-icon>
           </button>
-          <span class="current-date">
-            {{ currentYear }}年 {{ currentMonth + 1 }}月
-          </span>
+          <span class="current-date"> {{ currentYear }}年 {{ currentMonth + 1 }}月 </span>
           <button class="nav-btn" @click="nextMonth">
             <el-icon><ArrowRight /></el-icon>
           </button>
@@ -343,19 +353,34 @@ onUnmounted(() => {
             时间:
           </div>
           <el-select v-model="selectedHour" class="time-select" @change="updateTime">
-            <el-option v-for="i in hoursOptions" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
+            <el-option
+              v-for="i in hoursOptions"
+              :key="i"
+              :value="i.toString().padStart(2, '0')"
+              style="font-size: 20px; line-height: 2px; height: 5rem; display: flex; align-items: center"
+            >
               {{ i.toString().padStart(2, '0') }}
             </el-option>
           </el-select>
           <span class="time-separator">:</span>
           <el-select v-model="selectedMinute" class="time-select" @change="updateTime">
-            <el-option v-for="i in minuteOptions" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
+            <el-option
+              v-for="i in minuteOptions"
+              :key="i"
+              :value="i.toString().padStart(2, '0')"
+              style="font-size: 20px; line-height: 2px; height: 5rem; display: flex; align-items: center"
+            >
               {{ i.toString().padStart(2, '0') }}
             </el-option>
           </el-select>
           <span class="time-separator">:</span>
           <el-select v-model="selectedSecond" class="time-select" @change="updateTime">
-            <el-option v-for="i in secondOptions" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
+            <el-option
+              v-for="i in secondOptions"
+              :key="i"
+              :value="i.toString().padStart(2, '0')"
+              style="font-size: 20px; line-height: 2px; height: 5rem; display: flex; align-items: center"
+            >
               {{ i.toString().padStart(2, '0') }}
             </el-option>
           </el-select>
@@ -420,7 +445,9 @@ $fontSize: 1.5rem;
   background-color: white;
   border: 1px solid #e2e8f0;
   border-radius: 4px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
   z-index: 100;
   padding: 12px;
 }
@@ -535,7 +562,7 @@ select option {
   width: 5rem;
 }
 
-.select-option{
+.select-option {
   max-height: 3rem;
 }
 
@@ -562,7 +589,8 @@ select {
   gap: 10px;
 }
 
-.confirm-btn, .cancel-btn {
+.confirm-btn,
+.cancel-btn {
   padding: 8px 16px;
   border: none;
   border-radius: 4px;
@@ -589,15 +617,17 @@ select {
   background-color: #e2e8f0;
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity 0.2s;
 }
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
 // 修改选择框本身的宽高
-:deep(.el-select__wrapper){
+:deep(.el-select__wrapper) {
   height: 3rem;
   font-size: 20px;
 }
diff --git a/src/components/setting/SystemDate.vue b/src/components/setting/SystemDate.vue
index e04bcc7..602a02c 100644
--- a/src/components/setting/SystemDate.vue
+++ b/src/components/setting/SystemDate.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { useHomeStore } from 'stores/homeStore'
+import { computed, onMounted, ref } from 'vue'
 
 import { syncSendCmd } from '@/apis/system'
 import DatePicker from '@/components/common/DatePicker/index.vue'
@@ -7,6 +9,7 @@ import { FtMessage } from '@/libs/message'
 import { useSystemStore } from '@/stores/systemStore'
 
 const systemStore = useSystemStore()
+const homeStore = useHomeStore()
 const systemTime = ref<string>(`${systemStore.systemTime}`)
 const onChangeDate = async (value: string) => {
   if (value) {
@@ -45,6 +48,14 @@ const onChangeDate = async (value: string) => {
       if (res.ackcode === 0) {
         FtMessage.success('日期设置成功')
         systemStore.getSystemTime()
+        ElMessageBox.confirm('日期和时间已变更, 请重启设备!', '提示', {
+          confirmButtonText: '确认',
+          showClose: false,
+          showCancelButton: false,
+          closeOnClickModal: false,
+          closeOnPressEscape: false,
+          type: 'warning',
+        })
       }
     })
   }
@@ -54,6 +65,10 @@ onMounted(() => {
   systemStore.getSystemTime()
   console.log('systemTime--', systemTime.value)
 })
+
+const operationState = computed(() => {
+  return homeStore.disinfectionState.state === 'idle' || homeStore.disinfectionState.state === 'finished'
+})
 </script>
 
 <template>
@@ -64,6 +79,7 @@ onMounted(() => {
         <DatePicker
           :key="systemTime"
           v-model="systemTime"
+          :disabled="!operationState"
           format="YYYY-MM-DD HH:mm:ss"
           @change="val => onChangeDate(val)"
         />