From f39e504908bc3ecc4c831df9d1b93dfe1de7502a Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Sun, 27 Apr 2025 16:29:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E8=AE=BE=E7=BD=AE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E6=B8=A9=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/Settings/Device.vue | 167 +++++++++++++++++++++---------------
 1 file changed, 100 insertions(+), 67 deletions(-)

diff --git a/src/pages/Index/Settings/Device.vue b/src/pages/Index/Settings/Device.vue
index 47d7e89..56c8f27 100644
--- a/src/pages/Index/Settings/Device.vue
+++ b/src/pages/Index/Settings/Device.vue
@@ -46,37 +46,54 @@
             @focus="showKeyboard('number', 1)"
             readonly
           />
-          <button @click="updateSetting('allTemperature', settings.allTemperature)">
+          <button
+            @click="updateSetting('allTemperature', settings.allTemperature)"
+          >
             设置
           </button>
         </div>
       </div>
       <div class="setting-item setting-item-no-border">
-        <span class="label">孵育盘温度</span>
+        <span class="label">孵育盘温度  <el-tag type="primary" class="option-tag">  {{ deviceStore.sensorState?.incubateBoxTemperature }}℃</el-tag></span>
+
         <div class="options">
+
           <input
             style="width: 150px"
             v-model="settings.incubateBoxTemperature"
             type="number"
-            @focus="showKeyboard('number',2)"
+            @focus="showKeyboard('number', 2)"
             readonly
           />
-          <button @click="updateSetting('incubateBoxTemperature', settings.incubateBoxTemperature)">
+          <button
+            @click="
+              updateSetting(
+                'incubateBoxTemperature',
+                settings.incubateBoxTemperature,
+              )
+            "
+          >
             设置
           </button>
         </div>
       </div>
       <div class="setting-item setting-item-no-border">
-        <span class="label">板夹区温度</span>
+        <span class="label">板夹区温度 <el-tag type="primary" class="option-tag">  {{ deviceStore.sensorState?.pboxTemperature }}℃</el-tag></span>
         <div class="options">
+
+
           <input
             style="width: 150px"
             v-model="settings.plateBoxTemperature"
             type="number"
-            @focus="showKeyboard('number',3)"
+            @focus="showKeyboard('number', 3)"
             readonly
           />
-          <button @click="updateSetting('plateBoxTemperature', settings.plateBoxTemperature)">
+          <button
+            @click="
+              updateSetting('plateBoxTemperature', settings.plateBoxTemperature)
+            "
+          >
             设置
           </button>
         </div>
@@ -169,15 +186,15 @@
   </div>
   <!-- 键盘 -->
   <transition name="slide-up">
-      <div class="keyboard" v-if="keyboardVisible">
-        <SimpleKeyboard
-          :input="currentInputValue"
-          :layout
-          @onChange="handleKeyboardInput"
-          @onKeyPress="handleKeyPress"
-        />
-      </div>
-    </transition>
+    <div class="keyboard" v-if="keyboardVisible">
+      <SimpleKeyboard
+        :input="currentInputValue"
+        :layout
+        @onChange="handleKeyboardInput"
+        @onKeyPress="handleKeyPress"
+      />
+    </div>
+  </transition>
 </template>
 
 <script setup lang="ts">
@@ -191,9 +208,15 @@ import {
   getTemperatureRange,
   setDHCP,
   setLocalIP,
-  setAutoLogoutTime, setAllTemperature, setIncubateBoxTemperature, setPlateBoxTemperature, setDateAndTime
+  setAutoLogoutTime,
+  setAllTemperature,
+  setIncubateBoxTemperature,
+  setPlateBoxTemperature,
+  setDateAndTime,
 } from '@/services'
 import { eMessage, isValidIPv4 } from '../utils'
+import { useDeviceStore } from '@/store/index'
+const deviceStore = useDeviceStore()
 
 const layout = ref()
 
@@ -202,7 +225,7 @@ const numericLayout = {
     '1 2 3',
     '4 5 6',
     '7 8 9',
-    '{bksp} 0 {enter}' // 包含删除和确认键
+    '{bksp} 0 {enter}', // 包含删除和确认键
   ],
 }
 
@@ -213,7 +236,7 @@ interface Settings {
   autoLogout: boolean
   autoLogoutTimeout: number
   allTemperature: number | undefined
-  incubateBoxTemperature:number
+  incubateBoxTemperature: number
   plateBoxTemperature: number
   DHCP: boolean
   localIp: string
@@ -225,7 +248,7 @@ const settings = ref<Settings>({
   autoLogout: false,
   autoLogoutTimeout: 10,
   allTemperature: 20,
-  incubateBoxTemperature:20,
+  incubateBoxTemperature: 20,
   plateBoxTemperature: 20,
   DHCP: true,
   localIp: '',
@@ -283,8 +306,8 @@ const fetchSettings = async () => {
 
 function isIntegerInRange(str: string): boolean {
   // 匹配 20-40 的整数
-  const regex = /^(2[0-9]|3[0-9]|40)$/;
-  return regex.test(str);
+  const regex = /^(2[0-9]|3[0-9]|40)$/
+  return regex.test(str)
 }
 
 // 更新设置
@@ -352,9 +375,13 @@ const updateSetting = async (key: string, value: any) => {
       settings.value = { ...settings.value, [key]: value }
 
       if (key === 'allTemperature') {
-        settings.value.incubateBoxTemperature = settings.value.plateBoxTemperature = value
+        settings.value.incubateBoxTemperature =
+          settings.value.plateBoxTemperature = value
       }
-      if (settings.value.incubateBoxTemperature === settings.value.plateBoxTemperature) {
+      if (
+        settings.value.incubateBoxTemperature ===
+        settings.value.plateBoxTemperature
+      ) {
         settings.value.allTemperature = settings.value.incubateBoxTemperature
       } else {
         settings.value.allTemperature = undefined
@@ -374,7 +401,7 @@ const startTimer = () => {
   intervalId.value = setInterval(() => {
     const now = new Date()
     currentDate.value = now
-    time.value = format(now, 'yyyy.MM.dd HH:mm:ss');
+    time.value = format(now, 'yyyy.MM.dd HH:mm:ss')
   }, 1000)
 }
 
@@ -412,7 +439,7 @@ const showKeyboard = (KeyboardType: string | undefined, type: number) => {
   inputNumberType.value = type
   if (KeyboardType) {
     layout.value = numericLayout
-  }else{
+  } else {
     layout.value = undefined
   }
   keyboardVisible.value = false
@@ -426,15 +453,14 @@ const showKeyboard = (KeyboardType: string | undefined, type: number) => {
 const inputNumberType = ref(0)
 
 const inputType = {
-  1:'allTemperature',
-  2:'incubateBoxTemperature',
-  3:'plateBoxTemperature',
-  4:'localIp',
+  1: 'allTemperature',
+  2: 'incubateBoxTemperature',
+  3: 'plateBoxTemperature',
+  4: 'localIp',
 }
 
 // 处理键盘输入
 const handleKeyboardInput = (value: string) => {
-
   // 更新当前输入值
   currentInputValue.value = value
   settings.value[inputType[inputNumberType.value]] = value
@@ -469,18 +495,17 @@ onUnmounted(() => {
 const pauseTimer = () => {
   if (intervalId.value) {
     console.log(111)
-    clearInterval(intervalId.value);
-    intervalId.value = null;
+    clearInterval(intervalId.value)
+    intervalId.value = null
   }
-};
+}
 
 // 恢复定时器
 const resumeTimer = () => {
   if (!intervalId.value) {
-    startTimer();
+    startTimer()
   }
-};
-
+}
 </script>
 
 <style scoped lang="less">
@@ -494,8 +519,8 @@ const resumeTimer = () => {
   flex-direction: column;
   gap: 20px;
   .setting-item-box > :nth-child(2) {
-      border-top: 1px solid #ddd;
-      border-bottom: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
   }
 
   .setting-item-no-border {
@@ -516,6 +541,13 @@ const resumeTimer = () => {
       font-size: 28px;
       font-weight: 500;
       color: #303133;
+      display: flex;
+      align-items: center;
+      .option-tag {
+        font-size: 25px;
+        padding: 20px 10px;
+        margin: 0 10px;
+      }
     }
 
     .value {
@@ -562,34 +594,35 @@ const resumeTimer = () => {
   }
 }
 .keyboard {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 300px;
-    background-color: #f5f7fa;
-    border-top-left-radius: 16px;
-    border-top-right-radius: 16px;
-    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-  }
-  // 键盘动画
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    transition: transform 0.3s ease;
-  }
-  .slide-up-enter-from,
-  .slide-up-leave-to {
-    transform: translateY(100%);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 300px;
+  background-color: #f5f7fa;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+// 键盘动画
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+:deep(.date-input) {
+  width: 250px;
+  margin-right: 30px;
+  .el-input__wrapper {
+    height: 40px;
   }
-  :deep(.date-input) {
-    width: 250px;
-    margin-right: 30px;
-    .el-input__wrapper {
-      height: 40px;
-    }
-    .el-input__inner {
-      font-size: 18px;
-    }
+  .el-input__inner {
+    font-size: 18px;
   }
+}
+
 </style>