数字键盘

src/components/LiquidHandle.vue

@@ -6,9 +6,10 @@
           type="number"
           v-model="addLiquidVal"
           :clickable="true"
+          :maxlength="3"
+          readonly
+          @touchstart.stop="numberKeyboardShow = true"
           class="add_liquid_input"
-          :maxlength="5"
-          :formatter="formatter"
         />
         <p class="title">设置加液</p>
       </div>
@@ -75,6 +76,12 @@
       :startPopFlag="startPopFlag"
       :isPopLiquidStatus="isPopLiquidStatus"
     />
+    <van-number-keyboard
+      v-model="addLiquidVal"
+      :show="numberKeyboardShow"
+      :maxlength="3"
+      @blur="numberKeyboardShow = false"
+    />
   </div>
 </template>
 
@@ -89,13 +96,15 @@ import {
   stopDrainingJSON,
 } from '@/mock/command'
 
+const numberKeyboardShow = ref(false)
+
 const props = defineProps({
   tabType: {
     type: Number,
   },
 })
 
-const addLiquidVal = ref(0)
+const addLiquidVal = ref(1)
 const tipModalVisible = ref(false)
 const webSocketStore = useWebSocketStore()
 
@@ -105,11 +114,9 @@ const isPopLiquidStatus = ref(false)
 const startAdd = () => {
   if (!isAddLiquidStatus.value) {
     isAddLiquidStatus.value = true
-    console.log(
-      startReplenishingFluidsJSON(parseInt(addLiquidVal.value.slice(0, -2))),
-    )
+    console.log(startReplenishingFluidsJSON(parseInt(addLiquidVal.value)))
     webSocketStore.sendCommandMsg(
-      startReplenishingFluidsJSON(parseInt(addLiquidVal.value.slice(0, -2))),
+      startReplenishingFluidsJSON(parseInt(addLiquidVal.value)),
     )
   }
 }

src/components/Setting/components/Device.vue

@@ -1,89 +1,145 @@
 <template>
   <div class="device_container">
     <div class="row_wrap">
-      <p class="title">加液蠕动泵</p>
+      <p class="title">加液蠕动泵(/g)</p>
       <p class="num">
         <van-field
           type="number"
           v-model="addLiquidConfigVal"
           :clickable="true"
-          :formatter="formatter"
+          :maxlength="3"
+          readonly
+          @touchstart.stop="addLiquidConfigValShow = true"
         />
       </p>
       <div class="btn" @click="setAddliquidVal">设置</div>
     </div>
     <div class="row_wrap">
-      <p class="title">喷液蠕动泵</p>
+      <p class="title">喷液蠕动泵(/g)</p>
       <p class="num">
         <van-field
           type="number"
           v-model="sprayLiquidConfigVal"
           :clickable="true"
-          :formatter="formatter"
+          :maxlength="3"
+          readonly
+          @touchstart.stop="sprayLiquidConfigValShow = true"
         />
       </p>
       <div class="btn" @click="setSprayLiquidVal">设置</div>
     </div>
     <div class="row_wrap">
-      <p class="title">消毒停止过氧化氢溶度</p>
+      <p class="title">消毒停止过氧化氢溶度(/ppm)</p>
       <p class="num">
         <van-field
           type="number"
           v-model="stoped_gs"
           :clickable="true"
-          :formatter="hP1Formatter"
+          :maxlength="4"
+          readonly
+          @touchstart.stop="stoped_gsShow = true"
         />
       </p>
       <div class="btn" @click="setStopedGsVal">设置</div>
     </div>
     <div class="row_wrap">
-      <p class="title">消毒继续过氧化氢溶度</p>
+      <p class="title">消毒继续过氧化氢溶度(/ppm)</p>
       <p class="num">
         <van-field
           type="number"
           v-model="continued_gs"
           :clickable="true"
-          :formatter="hP1Formatter"
+          :maxlength="4"
+          readonly
+          @touchstart.stop="continued_gsShow = true"
         />
       </p>
       <div class="btn" @click="setcontinuedGsVal">设置</div>
     </div>
     <div class="row_wrap">
-      <p class="title">消毒停止过氧化氢相对饱和度</p>
+      <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
       <p class="num">
         <van-field
           type="number"
           v-model="stoped_satur"
           :clickable="true"
-          :formatter="hPFormatter"
+          :maxlength="3"
+          readonly
+          @touchstart.stop="stoped_saturShow = true"
         />
       </p>
       <div class="btn" @click="setstopedSaturVal">设置</div>
     </div>
     <div class="row_wrap">
-      <p class="title">消毒继续过氧化氢相对饱和度</p>
+      <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
       <p class="num">
         <van-field
           type="number"
           v-model="continued_satur"
           :clickable="true"
-          :formatter="hPFormatter"
+          :maxlength="3"
+          readonly
+          @touchstart.stop="continued_saturShow = true"
         />
       </p>
       <div class="btn" @click="setContinuedSaturVal">设置</div>
     </div>
     <div class="row_wrap">
-      <p class="title">允许消毒最大湿度</p>
+      <p class="title">允许消毒最大湿度(%RH)</p>
       <p class="num">
         <van-field
           type="number"
           v-model="max_humidity"
           :clickable="true"
-          :formatter="humidityFormatter"
+          :maxlength="3"
+          readonly
+          @touchstart.stop="max_humidityShow = true"
         />
       </p>
       <div class="btn" @click="setMaxHumidityVal">设置</div>
     </div>
+    <van-number-keyboard
+      v-model="addLiquidConfigVal"
+      :show="addLiquidConfigValShow"
+      :maxlength="3"
+      @blur="addLiquidConfigValShow = false"
+    />
+    <van-number-keyboard
+      v-model="sprayLiquidConfigVal"
+      :show="sprayLiquidConfigValShow"
+      :maxlength="3"
+      @blur="sprayLiquidConfigValShow = false"
+    />
+    <van-number-keyboard
+      v-model="stoped_gs"
+      :show="stoped_gsShow"
+      :maxlength="4"
+      @blur="stoped_gsShow = false"
+    />
+    <van-number-keyboard
+      v-model="continued_gs"
+      :show="continued_gsShow"
+      :maxlength="4"
+      @blur="continued_gsShow = false"
+    />
+    <van-number-keyboard
+      v-model="stoped_satur"
+      :show="stoped_saturShow"
+      :maxlength="3"
+      @blur="stoped_saturShow = false"
+    />
+    <van-number-keyboard
+      v-model="continued_satur"
+      :show="continued_saturShow"
+      :maxlength="3"
+      @blur="continued_saturShow = false"
+    />
+    <van-number-keyboard
+      v-model="max_humidity"
+      :show="max_humidityShow"
+      :maxlength="3"
+      @blur="max_humidityShow = false"
+    />
   </div>
 </template>
 
@@ -106,123 +162,60 @@ const {
   sprayLiquidConfigVal,
 } = storeToRefs(settingStore)
 
-const hPFormatter = value => {
-  if (value > 100) {
-    return '100%RS'
-  }
-  if (value != 0) {
-    var newVal = value.replace(/\b(0+)/gi, '')
-    return newVal + '%RS'
-  }
-  return '0%RS'
-}
-
-const hP1Formatter = value => {
-  if (value > 2000) {
-    return '2000ppm'
-  }
-  if (value != 0) {
-    var newVal = value.replace(/\b(0+)/gi, '')
-    return newVal + 'ppm'
-  }
-  return '0ppm'
-}
-
-const humidityFormatter = value => {
-  if (value > 100) {
-    return '100%RH'
-  }
-  if (value != 0) {
-    var newVal = value.replace(/\b(0+)/gi, '')
-    return newVal + '%RH'
-  }
-  return '0%RH'
-}
-
-const formatter = value => {
-  if (value > 2000) {
-    return '2000/g'
-  }
-  if (value != 0) {
-    var newVal = value.replace(/\b(0+)/gi, '')
-    return newVal + '/g'
-  }
-  return '0/g'
-}
+const addLiquidConfigValShow = ref(false)
+const sprayLiquidConfigValShow = ref(false)
+const stoped_gsShow = ref(false)
+const continued_gsShow = ref(false)
+const stoped_saturShow = ref(false)
+const continued_saturShow = ref(false)
+const max_humidityShow = ref(false)
 
 const setAddliquidVal = () => {
-  const val = parseInt(
-    addLiquidConfigVal.value.substring(0, addLiquidConfigVal.value.length - 2),
-  )
+  const val = parseInt(addLiquidConfigVal.value)
   settingStore.changeAddLiquidConfigVal(val)
-  webSocketStore.sendCommandMsg(
-    setSettingValJSON('drainage_pump_speed', addLiquidConfigVal.value),
-  )
+  webSocketStore.sendCommandMsg(setSettingValJSON('drainage_pump_speed', val))
   showSuccessToast('设置成功')
 }
 
 const setStopedGsVal = () => {
-  const val = parseInt(stoped_gs.value.substring(0, stoped_gs.value.length - 3))
+  const val = parseInt(stoped_gs.value)
   settingStore.updateStopedGs(val)
-  webSocketStore.sendCommandMsg(setSettingValJSON('stoped_gs', stoped_gs.value))
+  webSocketStore.sendCommandMsg(setSettingValJSON('stoped_gs', val))
   showSuccessToast('设置成功')
 }
 
 const setcontinuedGsVal = () => {
-  const val = parseInt(
-    continued_gs.value.substring(0, continued_gs.value.length - 3),
-  )
+  const val = parseInt(continued_gs.value)
   settingStore.updateContinuedGs(val)
-  webSocketStore.sendCommandMsg(
-    setSettingValJSON('continued_gs', continued_gs.value),
-  )
+  webSocketStore.sendCommandMsg(setSettingValJSON('continued_gs', val))
   showSuccessToast('设置成功')
 }
 
 const setstopedSaturVal = () => {
-  const val = parseInt(
-    stoped_satur.value.substring(0, stoped_satur.value.length - 3),
-  )
+  const val = parseInt(stoped_satur.value)
   settingStore.updateStopedSatur(val)
-  webSocketStore.sendCommandMsg(
-    setSettingValJSON('stoped_satur', stoped_satur.value),
-  )
+  webSocketStore.sendCommandMsg(setSettingValJSON('stoped_satur', val))
   showSuccessToast('设置成功')
 }
 
 const setContinuedSaturVal = () => {
-  const val = parseInt(
-    continued_satur.value.substring(0, continued_satur.value.length - 3),
-  )
+  const val = parseInt(continued_satur.value)
   settingStore.updateContinuedSatur(val)
-  webSocketStore.sendCommandMsg(
-    setSettingValJSON('continued_satur', continued_satur.value),
-  )
+  webSocketStore.sendCommandMsg(setSettingValJSON('continued_satur', val))
   showSuccessToast('设置成功')
 }
 
 const setMaxHumidityVal = () => {
-  const val = parseInt(
-    max_humidity.value.substring(0, max_humidity.value.length - 3),
-  )
+  const val = parseInt(max_humidity.value)
   settingStore.updateMaxHumidity(val)
-  webSocketStore.sendCommandMsg(
-    setSettingValJSON('max_humidity', max_humidity.value),
-  )
+  webSocketStore.sendCommandMsg(setSettingValJSON('max_humidity', val))
   showSuccessToast('设置成功')
 }
 
 const setSprayLiquidVal = () => {
-  const val = parseInt(
-    sprayLiquidConfigVal.value.substring(
-      0,
-      sprayLiquidConfigVal.value.length - 2,
-    ),
-  )
+  const val = parseInt(sprayLiquidConfigVal.value)
   settingStore.changeSprayLiquidConfigVal(val)
-  webSocketStore.sendCommandMsg(
-    setSettingValJSON('injection_pump_speed', sprayLiquidConfigVal.value),
-  )
+  webSocketStore.sendCommandMsg(setSettingValJSON('injection_pump_speed', val))
   showSuccessToast('设置成功')
 }
 </script>