From 6d45b84c35f8b329f69558871fcc06eba3837119 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Sat, 18 Jan 2025 19:22:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE-=E8=AE=BE=E5=A4=87=E6=94=B9?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/Regular/Emergency.vue   |   1 +
 src/pages/Index/Settings/Device.vue     | 365 ++++++++++++++++++++------------
 src/pages/Index/Settings/Lis.vue        | 112 +++++++++-
 src/services/Index/settings/settings.ts |  46 +++-
 4 files changed, 378 insertions(+), 146 deletions(-)

diff --git a/src/pages/Index/Regular/Emergency.vue b/src/pages/Index/Regular/Emergency.vue
index 248c751..5320845 100644
--- a/src/pages/Index/Regular/Emergency.vue
+++ b/src/pages/Index/Regular/Emergency.vue
@@ -18,6 +18,7 @@
             @focus="showKeyboard('sampleBarcode')"
             style="width: 400px"
             :value="emergencyPosition.sampleBarcode"
+            readonly
           />
         </el-col>
       </el-row>
diff --git a/src/pages/Index/Settings/Device.vue b/src/pages/Index/Settings/Device.vue
index f9b0710..c071a3c 100644
--- a/src/pages/Index/Settings/Device.vue
+++ b/src/pages/Index/Settings/Device.vue
@@ -5,91 +5,186 @@
       <span class="value">{{ formattedDate }}</span>
     </div>
 
+    <!-- <div class="setting-item">
+      <span class="label">时间</span>
+      <span class="value">{{ time }}</span>
+    </div> -->
+
     <div class="setting-item">
-      <span class="label">日期格式</span>
+      <span class="label">语言</span>
       <div class="options">
-        <button v-for="format in dateFormats" :key="format" :class="{ active: selectedDateFormat === format }"
-          @click="setDateFormat(format)">
-          {{ format }}
+        <button
+          v-for="lang in languages"
+          :key="lang.value"
+          :class="{ active: settings.language === lang.value }"
+          @click="updateSetting('language', lang.value)"
+          :disabled="lang.value == 'ko_KR'"
+        >
+          {{ lang.label }}
         </button>
       </div>
     </div>
-
     <div class="setting-item">
-      <span class="label">时间</span>
-      <span class="value">{{ time }}</span>
+      <span class="label">孵育温度</span>
+      <div class="options">
+        <button
+          v-for="t in temperatures"
+          :key="t"
+          :class="{ active: settings.temperature === t }"
+          @click="updateSetting('temperature', t)"
+        >
+          {{ t }}
+        </button>
+      </div>
     </div>
-
     <div class="setting-item">
-      <span class="label">语言</span>
+      <span class="label">DHCP</span>
       <div class="options">
-        <button v-for="lang in languages" :key="lang.value" :class="{ active: settings.language === lang.value }"
-          @click="updateSetting('language', lang.value)" :disabled="lang.value == 'ko_KR'">
-          {{ lang.label }}
+        <button
+          :class="{
+            active: settings.DHCP,
+          }"
+          @click="updateSetting('DHCP', true)"
+        >
+          开启
+        </button>
+        <button
+          :class="{
+            active: !settings.DHCP,
+          }"
+          @click="updateSetting('DHCP', false)"
+        >
+          关闭
+        </button>
+      </div>
+    </div>
+    <div v-if="!settings.DHCP" class="setting-item">
+      <span class="label">Local IP</span>
+      <div class="options">
+        <input
+          style="min-width: 250px"
+          v-model="settings.localIp"
+          type="text"
+          @focus="showKeyboard()"
+          readonly
+        />
+        <button @click="updateSetting('localIP', settings.localIp)">
+          设置
         </button>
       </div>
     </div>
-
     <div class="setting-item">
       <span class="label">打印</span>
       <div class="options">
-        <button v-for="(mode, index) in printModes" :key="index" :class="{ active: settings.autoPrint === mode.value }"
-          @click="updateSetting('autoPrint', mode.value)">
+        <button
+          v-for="(mode, index) in printModes"
+          :key="index"
+          :class="{ active: settings.autoPrint === mode.value }"
+          @click="updateSetting('autoPrint', mode.value)"
+        >
           {{ mode.label }}
         </button>
       </div>
     </div>
-
     <div class="setting-item">
-      <span class="label">注销时间</span>
+      <span class="label">自动登出</span>
       <div class="options">
-        <button v-for="time in logoutTimes" :key="time.value"
-          :class="{ active: settings.autoLogout && settings.logoutTime === time.value }"
-          @click="handleLogoutTime(time.value)">
+        <button
+          :class="{
+            active: settings.autoLogout,
+          }"
+          @click="updateSetting('autoLogout', true)"
+        >
+          开启
+        </button>
+        <button
+          :class="{
+            active: !settings.autoLogout,
+          }"
+          @click="updateSetting('autoLogout', false)"
+        >
+          关闭
+        </button>
+      </div>
+    </div>
+    <div v-if="settings.autoLogout" class="setting-item">
+      <span class="label">登出时间</span>
+      <div class="options">
+        <button
+          v-for="time in logoutTimes"
+          :key="time.value"
+          :class="{ active: settings.autoLogoutTimeout === time.value }"
+          @click="updateSetting('autoLogoutTimeout', time.value)"
+        >
           {{ time.label }}
         </button>
       </div>
     </div>
   </div>
+  <!-- 键盘 -->
+  <transition name="slide-up">
+      <div class="keyboard" v-if="keyboardVisible">
+        <SimpleKeyboard
+          :input="currentInputValue"
+          @onChange="handleKeyboardInput"
+          @onKeyPress="handleKeyPress"
+        />
+      </div>
+    </transition>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { format } from 'date-fns'
-import { getSystemSettings, setLanguage, setAutoPrint, setAutoLogout } from '../../../services/Index/settings/settings'
-import { eMessage } from '../utils';
+import {
+  getSystemSettings,
+  setLanguage,
+  setAutoPrint,
+  setAutoLogout,
+  getTemperatureRange,
+  setTemperature,
+  setDHCP,
+  setLocalIP,
+  setAutoLogoutTime,
+} from '../../../services/Index/settings/settings'
+import { eMessage } from '../utils'
 
 // 系统设置状态
 interface Settings {
-  language: string;
-  autoPrint: boolean;
-  autoLogout: boolean;
-  logoutTime: number;
+  language: string
+  autoPrint: boolean
+  autoLogout: boolean
+  autoLogoutTimeout: number
+  temperature: number
+  DHCP: boolean
+  localIp: string
 }
 
 const settings = ref<Settings>({
   language: 'zh-CN',
   autoPrint: true,
   autoLogout: false,
-  logoutTime: 3600,
+  autoLogoutTimeout: 10,
+  temperature: 0,
+  DHCP: true,
+  localIp: '',
 })
 
 // 日期和时间
 const currentDate = ref(new Date())
 const time = ref('00:00:00')
-const dateFormats = ['MM.dd.yyyy', 'dd.MM.yyyy', 'yyyy.MM.dd']
-const selectedDateFormat = ref(dateFormats[0])
+// const dateFormats = ['MM.dd.yyyy', 'dd.MM.yyyy', 'yyyy.MM.dd']
+// const selectedDateFormat = ref(dateFormats[2])
 
 // 选项配置
 const languages = [
-  { label: '한국어', value: 'ko_KR' },
   { label: 'English', value: 'en_US' },
   { label: '简体中文', value: 'zh_CN' },
 ]
 
 interface PrintMode {
-  label: string;
-  value: boolean;
+  label: string
+  value: boolean
 }
 
 const printModes: PrintMode[] = [
@@ -98,17 +193,15 @@ const printModes: PrintMode[] = [
 ]
 
 const logoutTimes = [
-  { label: '00:00', value: 0 },
-  { label: '00:10', value: 600 },
-  { label: '00:30', value: 1800 },
-  { label: '01:00', value: 3600 },
-  { label: '02:00', value: 7200 },
-  { label: '03:00', value: 10800 },
+  { label: '10分钟', value: 10 },
+  { label: '30分钟', value: 30 },
+  { label: '1小时', value: 60 },
+  { label: '2小时', value: 120 },
 ]
 
 // 格式化日期显示
 const formattedDate = computed(() =>
-  format(currentDate.value, selectedDateFormat.value)
+  format(currentDate.value, 'yyyy.MM.dd HH:mm:ss'),
 )
 
 // 获取系统设置
@@ -116,13 +209,7 @@ const fetchSettings = async () => {
   try {
     const res = await getSystemSettings()
     if (res.success) {
-      settings.value = {
-        language: res.data.language,
-        autoPrint: res.data.autoPrint,
-        autoLogout: res.data.autoLogout,
-        logoutTime: res.data.logoutTime,
-      }
-      console.log('Current language:', settings.value.language)
+      settings.value = res.data
     }
   } catch (error) {
     eMessage.error('获取系统设置失败')
@@ -143,46 +230,30 @@ const updateSetting = async (key: string, value: any) => {
       case 'autoLogout':
         res = await setAutoLogout(value)
         break
+      case 'autoLogoutTimeout':
+        res = await setAutoLogoutTime(value)
+        break
+      case 'temperature':
+        res = await setTemperature(value)
+        break
+      case 'DHCP':
+        res = await setDHCP(value)
+        break
+      case 'localIP':
+        hideKeyboard()
+        res = await setLocalIP(value)
+        break
     }
 
     if (res?.success) {
       settings.value = { ...settings.value, [key]: value }
-      eMessage.success('设置更新成功')
     }
   } catch (error) {
     eMessage.error('设置更新失败')
   }
 }
 
-// 设置日期格式
-const setDateFormat = (format: string) => {
-  selectedDateFormat.value = format
-}
-
-// 处理注销时间选择
-const handleLogoutTime = async (time: number) => {
-  try {
-    if (settings.value.autoLogout && settings.value.logoutTime === time) {
-      // 取消选择
-      const res = await setAutoLogout(false)
-      if (res?.success) {
-        settings.value.autoLogout = false
-        settings.value.logoutTime = 0
-        eMessage.success('设置更新成功')
-      }
-    } else {
-      // 选择新时间
-      const res = await setAutoLogout(true)
-      if (res?.success) {
-        settings.value.autoLogout = true
-        settings.value.logoutTime = time
-        eMessage.success('设置更新成功')
-      }
-    }
-  } catch (error) {
-    eMessage.error('设置更新失败')
-  }
-}
+const temperatures = ref<number[]>([])
 
 // 初始化
 onMounted(async () => {
@@ -194,6 +265,56 @@ onMounted(async () => {
     currentDate.value = now
     time.value = now.toLocaleTimeString()
   }, 1000)
+
+  const res = await getTemperatureRange()
+  if (res && res.success) {
+    temperatures.value = res.data
+  } else {
+    res && res.data && res.data.info && eMessage.error(res.data.info)
+  }
+})
+
+// 键盘相关状态
+const keyboardVisible = ref(false)
+const currentInputValue = ref('')
+
+// 显示键盘
+const showKeyboard = () => {
+  // 清空当前输入值，避免累加
+  currentInputValue.value = settings.value.localIp
+  keyboardVisible.value = true
+}
+
+// 处理键盘输入
+const handleKeyboardInput = (value: string) => {
+  // 更新当前输入值
+  currentInputValue.value = value
+  settings.value.localIp = value
+}
+
+// 处理键盘按键
+const handleKeyPress = (button: string) => {
+  if (button === '{enter}') {
+    hideKeyboard()
+  } else if (button === '{bksp}') {
+    // 处理退格键
+    const value = currentInputValue.value
+    if (value.length > 0) {
+      const newValue = value.slice(0, -1)
+      handleKeyboardInput(newValue)
+    }
+  }
+}
+
+// 隐藏键盘
+const hideKeyboard = () => {
+  keyboardVisible.value = false
+  currentInputValue.value = ''
+}
+
+// 在组件卸载时清理状态
+onUnmounted(() => {
+  hideKeyboard()
 })
 </script>
 
@@ -218,11 +339,6 @@ onMounted(async () => {
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
-    }
-
     .label {
       font-size: 28px;
       font-weight: 500;
@@ -233,6 +349,14 @@ onMounted(async () => {
       font-size: 28px;
       color: #606266;
     }
+    input {
+      padding: 8px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 30px;
+      transition: box-shadow 0.2s ease;
+      border-radius: 10px;
+    }
 
     .options {
       display: flex;
@@ -254,72 +378,35 @@ onMounted(async () => {
         align-items: center;
         justify-content: center;
 
-        &:hover {
-          color: #409eff;
-          border-color: #c6e2ff;
-          background-color: #ecf5ff;
-        }
-
         &.active {
           color: #fff;
           background-color: #409eff;
           border-color: #409eff;
           box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
-
-          &:hover {
-            background-color: #66b1ff;
-            border-color: #66b1ff;
-          }
         }
       }
     }
-
-    // 针对日期格式按钮的特殊样式
-    &:nth-child(2) {
-      .options button {
-        min-width: 160px;
-        font-family: monospace;
-        letter-spacing: 1px;
-      }
-    }
-
-    // 针对语言按钮的特殊样式
-    &:nth-child(4) {
-      .options button {
-        min-width: 140px;
-      }
-    }
-
-    // 针对打印按钮的特殊样式
-    &:nth-child(5) {
-      .options button {
-        min-width: 100px;
-      }
-    }
-
-    // 针对注销时间按钮的特殊样式
-    &:nth-child(6) {
-      .options button {
-        min-width: 100px;
-        font-family: monospace;
-      }
-    }
   }
 }
-
-// 添加响应式设计
-@media screen and (max-width: 768px) {
-  .device-management {
-    .setting-item {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 16px;
-
-      .options {
-        width: 100%;
-        justify-content: flex-start;
-      }
-    }
+.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%);
   }
-}
 </style>
diff --git a/src/pages/Index/Settings/Lis.vue b/src/pages/Index/Settings/Lis.vue
index 40c4c48..db01465 100644
--- a/src/pages/Index/Settings/Lis.vue
+++ b/src/pages/Index/Settings/Lis.vue
@@ -53,8 +53,14 @@
     >
       <span class="label">Host's IP</span>
       <div class="options">
-        <input style="min-width: 250px" v-model="lisSettings.LISNetIp" type="text"></input>
-        <button @click="updLisIP(lisSettings.LISNetIp)" >设置</button>
+        <input
+          style="min-width: 250px"
+          v-model="lisSettings.LISNetIp"
+          type="text"
+          @focus="showKeyboard('ip')"
+          readonly
+        />
+        <button @click="updLisIP(lisSettings.LISNetIp)">设置</button>
       </div>
     </div>
     <div
@@ -63,8 +69,13 @@
     >
       <span class="label">Host's Port</span>
       <div class="options">
-        <input type="text" v-model="lisSettings.LISNetPort" ></input>
-        <button @click="updLisPort(lisSettings.LISNetPort)" >设置</button>
+        <input
+          type="text"
+          v-model="lisSettings.LISNetPort"
+          @focus="showKeyboard('port')"
+          readonly
+        />
+        <button @click="updLisPort(lisSettings.LISNetPort)">设置</button>
       </div>
     </div>
     <div
@@ -107,6 +118,16 @@
       </div>
     </div>
   </div>
+  <!-- 键盘 -->
+  <transition name="slide-up">
+    <div class="keyboard" v-if="keyboardVisible">
+      <SimpleKeyboard
+        :input="currentInputValue"
+        @onChange="handleKeyboardInput"
+        @onKeyPress="handleKeyPress"
+      />
+    </div>
+  </transition>
 </template>
 
 <script setup lang="ts">
@@ -128,7 +149,7 @@ import {
   setLISSerialBaudrate,
   setLISType,
 } from '@/services'
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import * as R from 'ramda'
 import { eMessage } from '../utils'
 
@@ -144,7 +165,7 @@ const getLisSetting = async () => {
   }
 }
 
-const updLisType = async (type:LISType) => {
+const updLisType = async (type: LISType) => {
   const res = await setLISType(type)
   if (res && res.success) {
     getLisSetting()
@@ -190,6 +211,7 @@ const updLisAutoExport = async (auto: boolean) => {
 }
 
 const updLisIP = async (ip: string) => {
+  hideKeyboard()
   const res = await setLISNetIp(ip)
   if (res && res.success) {
     getLisSetting()
@@ -199,6 +221,7 @@ const updLisIP = async (ip: string) => {
 }
 
 const updLisPort = async (port: number) => {
+  hideKeyboard()
   const res = await setLISNetPort(port)
   if (res && res.success) {
     getLisSetting()
@@ -210,6 +233,62 @@ const updLisPort = async (port: number) => {
 onMounted(() => {
   getLisSetting()
 })
+// 键盘相关状态
+const keyboardVisible = ref(false)
+const currentInputValue = ref('')
+const currentInputField = ref<'ip' | 'port' | ''>('')
+
+// 显示键盘
+const showKeyboard = (field: 'ip' | 'port') => {
+  // 清空当前输入值，避免累加
+  if (field === 'ip') {
+    currentInputValue.value = lisSettings.value?.LISNetIp || ''
+  }
+  if (field === 'port') {
+    currentInputValue.value = lisSettings.value?.LISNetPort.toString() || ''
+  }
+  currentInputField.value = field
+  keyboardVisible.value = true
+}
+
+// 处理键盘输入
+const handleKeyboardInput = (value: string) => {
+  if (!currentInputField.value) return
+  // 更新当前输入值
+  currentInputValue.value = value
+  // 更新对应字段的值
+  if (currentInputField.value === 'ip') {
+    lisSettings.value!.LISNetIp = value
+  } else {
+    lisSettings.value!.LISNetPort = +value
+  }
+}
+
+// 处理键盘按键
+const handleKeyPress = (button: string) => {
+  if (button === '{enter}') {
+    hideKeyboard()
+  } else if (button === '{bksp}') {
+    // 处理退格键
+    const value = currentInputValue.value
+    if (value.length > 0) {
+      const newValue = value.slice(0, -1)
+      handleKeyboardInput(newValue)
+    }
+  }
+}
+
+// 隐藏键盘
+const hideKeyboard = () => {
+  keyboardVisible.value = false
+  currentInputField.value = ''
+  currentInputValue.value = ''
+}
+
+// 在组件卸载时清理状态
+onUnmounted(() => {
+  hideKeyboard()
+})
 </script>
 
 <style lang="less" scoped>
@@ -277,4 +356,25 @@ onMounted(() => {
     }
   }
 }
+.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%);
+}
 </style>
diff --git a/src/services/Index/settings/settings.ts b/src/services/Index/settings/settings.ts
index efaab6a..a655db1 100644
--- a/src/services/Index/settings/settings.ts
+++ b/src/services/Index/settings/settings.ts
@@ -25,6 +25,40 @@ export const setLanguage = async (language: 'zh_CN' | 'en_US') => {
   }
 }
 
+export const setDHCP = async (enable: boolean) => {
+  try {
+    const res = await apiClient.post(
+      `/api/v1/app/DeviceSetting/setDHCCP?val=${enable}`,
+    )
+    return res.data
+  } catch (error) {
+    console.log('修改DHCP出错', error)
+  }
+}
+
+// data : number[]
+export const getTemperatureRange = async () => {
+  try {
+    const res = await apiClient.post(
+      `/api/v1/app/DeviceSetting/getTemperatureAvailableRange`,
+    )
+    return res.data
+  } catch (error) {
+    console.log('修改DHCP出错', error)
+  }
+}
+
+export const setLocalIP = async (ip: string) => {
+  try {
+    const res = await apiClient.post(
+      `/api/v1/app/DeviceSetting/setLocalIp?val=${ip}`,
+    )
+    return res.data
+  } catch (error) {
+    console.log('修改localIP出错', error)
+  }
+}
+
 // 设置自动打印报告
 export const setAutoPrint = async (data: any) => {
   try {
@@ -38,7 +72,7 @@ export const setAutoPrint = async (data: any) => {
 }
 
 // 设置自动登出
-export const setAutoLogout = async (data: any) => {
+export const setAutoLogout = async (data: boolean) => {
   try {
     const res = await apiClient.post(
       `/api/v1/app/DeviceSetting/setAutoLogout?val=${data}`,
@@ -48,6 +82,16 @@ export const setAutoLogout = async (data: any) => {
     console.log('设置自动登出出错', error)
   }
 }
+export const setAutoLogoutTime = async (data: number) => {
+  try {
+    const res = await apiClient.post(
+      `/api/v1/app/DeviceSetting/setAutoLogoutTimeout?val=${data}`,
+    )
+    return res.data
+  } catch (error) {
+    console.log('设置自动登出出错', error)
+  }
+}
 
 //获取系统设置
 export const getSystemSettings = async () => {