From 14ce413b5f15ef064d782c20a869ff92ef568251 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sun, 10 Sep 2023 11:42:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=85=8D=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UpdatePreSetting.vue | 156 ++++++-
 src/components/a.vue                | 815 ++++++++++++++++++++++++++++++++++++
 test.js                             |   9 +
 3 files changed, 962 insertions(+), 18 deletions(-)
 create mode 100644 src/components/a.vue
 create mode 100644 test.js

diff --git a/src/components/UpdatePreSetting.vue b/src/components/UpdatePreSetting.vue
index 2184b62..c4dee65 100644
--- a/src/components/UpdatePreSetting.vue
+++ b/src/components/UpdatePreSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="update_pre_device_container">
+  <div class="update_device_container">
     <div class="row_wrap">
       <p class="title">注射蠕动泵速率(g/min)</p>
       <p class="num">
@@ -97,6 +97,19 @@
         <p class="log">{{ logVal }}</p>
       </div>
     </div>
+    <div class="row_wrap">
+      <p class="title">配方名称</p>
+      <div>
+        <input
+          id="id_formula"
+          type="text"
+          v-model="formula_id"
+          class="formula_input"
+          placeholder="请输入配方名称"
+          @focus="handleShowKeyBoard"
+        />
+      </div>
+    </div>
     <van-number-keyboard
       v-model="addLiquidConfigVal"
       :title="addLiquidConfigVal"
@@ -204,23 +217,40 @@
       :logVal="logVal"
     />
     <div class="btns">
-      <div class="btn" @click="save">保存</div>
+      <!-- <div class="btn" @click="save">保存</div> -->
       <div class="btn ml" @click="hiddleSettingModal">返回</div>
     </div>
+    <div class="key_wrap" v-if="showkeyboard" id="keyboard_formula">
+      <SimpleKeyboard @onChange="onChange" :input="formula_id" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
 import { showSuccessToast, showFailToast } from 'vant'
-import { useSettingStore, useWebSocketStore, useOperatorStore } from '@/store'
+import {
+  useSettingStore,
+  useWebSocketStore,
+  useOperatorStore,
+  useFormulaStore,
+} from '@/store'
 import { storeToRefs } from 'pinia'
-import { setSettingValJSON } from '@/mock/command'
+import {
+  setSettingValJSON,
+  addFormulaJSON,
+  getAllFormulaJSON,
+  updateFormulaJSON,
+} from '@/mock/command'
 import LogPicker from 'cpns/dialogs/LogPicker'
 
 const settingStore = useSettingStore()
 const webSocketStore = useWebSocketStore()
 const operatorStore = useOperatorStore()
+const formulaStore = useFormulaStore()
+
+const { currentFormula } = storeToRefs(formulaStore)
 
 const max_humidity = ref('0')
 const continued_satur = ref('0')
@@ -246,25 +276,56 @@ const continued_humiShow = ref(false)
 
 const logVisible = ref(false)
 const logVal = ref('6')
+const formula_id = ref('')
+
+watch(currentFormula, (newValue, oldValue) => {
+  formula_id.value = newValue.formula_id
+  logVal.value = newValue.loglevel
+  stoped_gs.value = newValue?.stoped_gs
+  continued_gs.value = newValue?.continued_gs
+  stoped_satur.value = newValue?.stoped_satur
+  continued_satur.value = newValue?.continued_satur
+  stoped_humi.value = newValue?.stoped_humi
+  continued_humi.value = newValue?.continued_humi
+  injection_pump_speed.value = newValue?.injection_pump_speed
+})
+
+watch(formula_id, (newValue, oldValue) => {
+  if (newValue != '') {
+    webSocketStore.sendCommandMsg(
+      updateFormulaJSON('formula_id', newValue, currentFormula.id),
+    )
+  }
+})
 
 const save = () => {
-  const data = {
-    loglevel: logVal.value,
-    injection_pump_speed: sprayLiquidConfigVal.value,
-    stoped_gs: stoped_gs.value,
-    continued_gs: continued_gs.value,
-    stoped_satur: stoped_satur.value,
-    continued_satur: continued_satur.value,
-    stoped_humi: stoped_humi.value,
-    continued_humi: continued_humi.value,
-  }
-  console.log(data)
+  if (formula_id.value == '') {
+    showFailToast('配方名称不能为空')
+    return
+  }
+  //   const data = {
+  //     formula_id: formula_id.value,
+  //     loglevel: logVal.value,
+  //     injection_pump_speed: sprayLiquidConfigVal.value,
+  //     stoped_gs: stoped_gs.value,
+  //     continued_gs: continued_gs.value,
+  //     stoped_satur: stoped_satur.value,
+  //     continued_satur: continued_satur.value,
+  //     stoped_humi: stoped_humi.value,
+  //     continued_humi: continued_humi.value,
+  //   }
+  //   console.log(data)
+  //   webSocketStore.sendCommandMsg(addFormulaJSON(data))
+  //   webSocketStore.sendCommandMsg(getAllFormulaJSON)
   props.hideSettingModal()
 }
 
 const changeLogVal = val => {
   logVal.value = val
   logVisible.value = false
+  webSocketStore.sendCommandMsg(
+    updateFormulaJSON('loglevel', val, currentFormula.id),
+  )
 }
 const hiddenLogVisible = () => {
   logVisible.value = false
@@ -576,6 +637,10 @@ const setStopedGsVal = () => {
   if (isNaN(val)) {
     showFailToast('设置失败,请填写正确参数')
     return
+  } else {
+    webSocketStore.sendCommandMsg(
+      updateFormulaJSON('stoped_gs', val, currentFormula.id),
+    )
   }
 }
 
@@ -584,6 +649,10 @@ const setcontinuedGsVal = () => {
   if (isNaN(val)) {
     showFailToast('设置失败,请填写正确参数')
     return
+  } else {
+    webSocketStore.sendCommandMsg(
+      updateFormulaJSON('continued_gs', val, currentFormula.id),
+    )
   }
 }
 
@@ -592,6 +661,10 @@ const setstopedSaturVal = () => {
   if (isNaN(val)) {
     showFailToast('设置失败,请填写正确参数')
     return
+  } else {
+    webSocketStore.sendCommandMsg(
+      updateFormulaJSON('stoped_satur', val, currentFormula.id),
+    )
   }
 }
 
@@ -600,6 +673,10 @@ const setContinuedSaturVal = () => {
   if (isNaN(val)) {
     showFailToast('设置失败,请填写正确参数')
     return
+  } else {
+    webSocketStore.sendCommandMsg(
+      updateFormulaJSON('continued_satur', val, currentFormula.id),
+    )
   }
 }
 
@@ -624,6 +701,10 @@ const setstoped_humiVal = () => {
   if (isNaN(val)) {
     showFailToast('设置失败,请填写正确参数')
     return
+  } else {
+    webSocketStore.sendCommandMsg(
+      updateFormulaJSON('stoped_humi', val, currentFormula.id),
+    )
   }
 }
 
@@ -632,6 +713,10 @@ const setcontinued_humiVal = () => {
   if (isNaN(val)) {
     showFailToast('设置失败,请填写正确参数')
     return
+  } else {
+    webSocketStore.sendCommandMsg(
+      updateFormulaJSON('continued_humi', val, currentFormula.id),
+    )
   }
 }
 
@@ -640,17 +725,39 @@ const setSprayLiquidVal = () => {
   if (isNaN(val)) {
     showFailToast('设置失败,请填写正确参数')
     return
+  } else {
+    webSocketStore.sendCommandMsg(
+      updateFormulaJSON('injection_pump_speed', val, currentFormula.id),
+    )
   }
 }
+
+const showkeyboard = ref(false)
+const onChange = a => {
+  formula_id.value = a
+}
+const handleShowKeyBoard = () => {
+  showkeyboard.value = true
+}
+
+onMounted(() => {
+  document.addEventListener('click', e => {
+    let box = document.getElementById('keyboard_formula')
+    let room = document.getElementById('id_formula')
+    if (!box?.contains(e.target) && e.target != room) {
+      showkeyboard.value = false
+    }
+  })
+})
 </script>
 
 <style lang="scss" scoped>
-.update_pre_device_container {
+.update_device_container {
   box-sizing: border-box;
   width: 100%;
   height: 580px;
   display: grid;
-  overflow: scroll;
+  overflow: hidden;
   grid-template-columns: repeat(2, 1fr);
   row-gap: 20px;
   column-gap: 20px;
@@ -718,6 +825,12 @@ const setSprayLiquidVal = () => {
         justify-content: center;
       }
     }
+    .formula_input {
+      border: none;
+      height: 38px;
+      padding: 0 12px;
+      width: 220px;
+    }
     .btn {
       width: 87px;
       height: 45px;
@@ -733,5 +846,12 @@ const setSprayLiquidVal = () => {
       justify-content: center;
     }
   }
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
 }
 </style>
diff --git a/src/components/a.vue b/src/components/a.vue
new file mode 100644
index 0000000..33eb01d
--- /dev/null
+++ b/src/components/a.vue
@@ -0,0 +1,815 @@
+<template>
+  <div class="update_device_container">
+    <div class="row_wrap">
+      <p class="title">注射蠕动泵速率(g/min)</p>
+      <p class="num">
+        <van-field
+          type="number"
+          v-model="sprayLiquidConfigVal"
+          :clickable="true"
+          :formatter="formatter7"
+          readonly
+          @click.stop="hideClickKey(2)"
+        />
+      </p>
+    </div>
+    <div class="row_wrap">
+      <p class="title">消毒停止过氧化氢浓度(ppm)</p>
+      <p class="num">
+        <van-field
+          type="number"
+          v-model="stoped_gs"
+          :clickable="true"
+          :formatter="formatter1"
+          readonly
+          @click.stop="hideClickKey(3)"
+        />
+      </p>
+    </div>
+    <div class="row_wrap">
+      <p class="title">消毒继续过氧化氢浓度(ppm)</p>
+      <p class="num">
+        <van-field
+          type="number"
+          v-model="continued_gs"
+          :clickable="true"
+          :formatter="formatter2"
+          readonly
+          @click.stop="hideClickKey(4)"
+        />
+      </p>
+    </div>
+    <div class="row_wrap">
+      <p class="title">消毒停止相对湿度(%RH)</p>
+      <p class="num">
+        <van-field
+          type="number"
+          v-model="stoped_humi"
+          :clickable="true"
+          :formatter="formatter9"
+          readonly
+          @click.stop="hideClickKey(9)"
+        />
+      </p>
+    </div>
+    <div class="row_wrap">
+      <p class="title">消毒继续相对湿度(%RH)</p>
+      <p class="num">
+        <van-field
+          type="number"
+          v-model="continued_humi"
+          :clickable="true"
+          :formatter="formatter10"
+          readonly
+          @click.stop="hideClickKey(10)"
+        />
+      </p>
+    </div>
+    <div class="row_wrap">
+      <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
+      <p class="num">
+        <van-field
+          type="number"
+          :formatter="formatter3"
+          v-model="stoped_satur"
+          :clickable="true"
+          readonly
+          @click.stop="hideClickKey(5)"
+        />
+      </p>
+    </div>
+    <div class="row_wrap">
+      <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
+      <p class="num">
+        <van-field
+          type="number"
+          :formatter="formatter4"
+          v-model="continued_satur"
+          :clickable="true"
+          readonly
+          @click.stop="hideClickKey(6)"
+        />
+      </p>
+    </div>
+    <div class="row_wrap" @click="showLogPicker">
+      <p class="title">Log等级</p>
+      <div class="num">
+        <p class="log">{{ logVal }}</p>
+      </div>
+    </div>
+    <div class="row_wrap">
+      <p class="title">配方名称</p>
+      <div>
+        <input
+          id="id_formula"
+          type="text"
+          v-model="formula_id"
+          class="formula_input"
+          placeholder="请输入配方名称"
+          @focus="handleShowKeyBoard"
+        />
+      </div>
+    </div>
+    <van-number-keyboard
+      v-model="addLiquidConfigVal"
+      :title="addLiquidConfigVal"
+      :show="addLiquidConfigValShow"
+      @input="val => handleInput(val, 1)"
+      theme="custom"
+      close-button-text="配置"
+      @close="setAddliquidVal"
+      @blur="addLiquidConfigValShow = false"
+    />
+    <van-number-keyboard
+      v-model="sprayLiquidConfigVal"
+      @input="val => handleInput(val, 2)"
+      :title="sprayLiquidConfigVal"
+      :show="sprayLiquidConfigValShow"
+      theme="custom"
+      @close="setSprayLiquidVal"
+      close-button-text="配置"
+      @blur="sprayLiquidConfigValShow = false"
+    />
+    <van-number-keyboard
+      v-model="stoped_gs"
+      @input="val => handleInput(val, 3)"
+      :title="stoped_gs"
+      :show="stoped_gsShow"
+      theme="custom"
+      @close="setStopedGsVal"
+      close-button-text="配置"
+      @blur="stoped_gsShow = false"
+    />
+    <van-number-keyboard
+      v-model="continued_gs"
+      @input="val => handleInput(val, 4)"
+      :title="continued_gs"
+      @close="setcontinuedGsVal"
+      :show="continued_gsShow"
+      theme="custom"
+      close-button-text="配置"
+      @blur="continued_gsShow = false"
+    />
+    <van-number-keyboard
+      v-model="stoped_satur"
+      @input="val => handleInput(val, 5)"
+      :title="stoped_satur"
+      @close="setstopedSaturVal"
+      :show="stoped_saturShow"
+      theme="custom"
+      close-button-text="配置"
+      @blur="stoped_saturShow = false"
+    />
+    <van-number-keyboard
+      v-model="continued_satur"
+      @input="val => handleInput(val, 6)"
+      :title="continued_satur"
+      @close="setContinuedSaturVal"
+      :show="continued_saturShow"
+      theme="custom"
+      close-button-text="配置"
+      @blur="continued_saturShow = false"
+    />
+    <van-number-keyboard
+      v-model="max_humidity"
+      @input="val => handleInput(val, 7)"
+      :title="max_humidity"
+      @close="setMaxHumidityVal"
+      :show="max_humidityShow"
+      theme="custom"
+      close-button-text="配置"
+      @blur="max_humidityShow = false"
+    />
+    <van-number-keyboard
+      theme="custom"
+      close-button-text="配置"
+      @input="val => handleInput(val, 8)"
+      @close="setHeat_timeVal"
+      v-model="pre_heat_time_s"
+      :title="pre_heat_time_s"
+      :show="pre_heat_time_sShow"
+      @blur="pre_heat_time_sShow = false"
+    />
+    <van-number-keyboard
+      @input="val => handleInput(val, 9)"
+      theme="custom"
+      close-button-text="配置"
+      @close="setstoped_humiVal"
+      v-model="stoped_humi"
+      :title="stoped_humi"
+      :show="stoped_humiShow"
+      @blur="stoped_humiShow = false"
+    />
+    <van-number-keyboard
+      theme="custom"
+      @input="val => handleInput(val, 10)"
+      close-button-text="配置"
+      @close="setcontinued_humiVal"
+      v-model="continued_humi"
+      :title="continued_humi"
+      :show="continued_humiShow"
+      @blur="continued_humiShow = false"
+    />
+    <LogPicker
+      v-if="logVisible"
+      :hiddenLogVisible="hiddenLogVisible"
+      :changeLogVal="changeLogVal"
+      :logVal="logVal"
+    />
+    <div class="btns">
+      <div class="btn" @click="save">保存</div>
+      <div class="btn ml" @click="hiddleSettingModal">返回</div>
+    </div>
+    <div class="key_wrap" v-if="showkeyboard" id="keyboard_formula">
+      <SimpleKeyboard @onChange="onChange" :input="formula_id" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
+import { showSuccessToast, showFailToast } from 'vant'
+import {
+  useSettingStore,
+  useWebSocketStore,
+  useOperatorStore,
+  useFormulaStore,
+} from '@/store'
+import { storeToRefs } from 'pinia'
+import {
+  setSettingValJSON,
+  addFormulaJSON,
+  getAllFormulaJSON,
+} from '@/mock/command'
+import LogPicker from 'cpns/dialogs/LogPicker'
+
+const settingStore = useSettingStore()
+const webSocketStore = useWebSocketStore()
+const operatorStore = useOperatorStore()
+const formulaStore = useFormulaStore()
+
+const { currentFormula } = storeToRefs(formulaStore)
+
+const max_humidity = ref('0')
+const continued_satur = ref('0')
+const stoped_satur = ref('0')
+const continued_gs = ref('0')
+const stoped_gs = ref('0')
+const addLiquidConfigVal = ref('0')
+const sprayLiquidConfigVal = ref('0')
+const stoped_humi = ref('0')
+const continued_humi = ref('0')
+const pre_heat_time_s = ref('0')
+
+const pre_heat_time_sShow = ref(false)
+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 stoped_humiShow = ref(false)
+const continued_humiShow = ref(false)
+
+watch(currentFormula, (newValue, oldValue) => {
+  stoped_gs.value = newValue?.stoped_gs
+  continued_gs.value = newValue?.continued_gs
+  stoped_satur.value = newValue?.stoped_satur
+  continued_satur.value = newValue?.continued_satur
+  stoped_humi.value = newValue?.stoped_humi
+  continued_humi.value = newValue?.continued_humi
+  injection_pump_speed.value = newValue?.injection_pump_speed
+})
+
+const logVisible = ref(false)
+const logVal = ref('6')
+
+const formula_id = ref('')
+const save = () => {
+  if (formula_id.value == '') {
+    showFailToast('配方名称不能为空')
+    return
+  }
+  //   const data = {
+  //     formula_id: formula_id.value,
+  //     loglevel: logVal.value,
+  //     injection_pump_speed: sprayLiquidConfigVal.value,
+  //     stoped_gs: stoped_gs.value,
+  //     continued_gs: continued_gs.value,
+  //     stoped_satur: stoped_satur.value,
+  //     continued_satur: continued_satur.value,
+  //     stoped_humi: stoped_humi.value,
+  //     continued_humi: continued_humi.value,
+  //   }
+  //   console.log(data)
+  //   webSocketStore.sendCommandMsg(addFormulaJSON(data))
+  //   webSocketStore.sendCommandMsg(getAllFormulaJSON)
+  props.hideSettingModal()
+}
+
+const changeLogVal = val => {
+  logVal.value = val
+  logVisible.value = false
+}
+const hiddenLogVisible = () => {
+  logVisible.value = false
+}
+const showLogPicker = () => {
+  logVisible.value = true
+}
+
+const isFirstClick = ref(true)
+
+const props = defineProps({
+  hideSettingModal: {
+    type: Function,
+  },
+})
+
+const hiddleSettingModal = () => {
+  props.hideSettingModal()
+}
+
+const hideClickKey = flag => {
+  isFirstClick.value = true
+  stoped_humiShow.value = false
+  continued_humiShow.value = false
+  pre_heat_time_sShow.value = false
+  addLiquidConfigValShow.value = false
+  sprayLiquidConfigValShow.value = false
+  stoped_gsShow.value = false
+  continued_gsShow.value = false
+  stoped_saturShow.value = false
+  continued_saturShow.value = false
+  max_humidityShow.value = false
+  if (flag == 1) {
+    addLiquidConfigValShow.value = true
+  }
+  if (flag == 2) {
+    sprayLiquidConfigValShow.value = true
+  }
+  if (flag == 3) {
+    stoped_gsShow.value = true
+  }
+  if (flag == 4) {
+    continued_gsShow.value = true
+  }
+  if (flag == 5) {
+    stoped_saturShow.value = true
+  }
+  if (flag == 6) {
+    continued_saturShow.value = true
+  }
+  if (flag == 7) {
+    max_humidityShow.value = true
+  }
+  if (flag == 8) {
+    pre_heat_time_sShow.value = true
+  }
+  if (flag == 9) {
+    stoped_humiShow.value = true
+  }
+  if (flag == 10) {
+    continued_humiShow.value = true
+  }
+}
+
+const handleInput = (value, index) => {
+  if (isFirstClick.value) {
+    if (index == 1) {
+      setTimeout(() => {
+        addLiquidConfigVal.value = value + ''
+      })
+    }
+    if (index == 2) {
+      setTimeout(() => {
+        sprayLiquidConfigVal.value = value + ''
+      })
+    }
+    if (index == 3) {
+      setTimeout(() => {
+        stoped_gs.value = value + ''
+      })
+    }
+    if (index == 4) {
+      setTimeout(() => {
+        continued_gs.value = value + ''
+      })
+    }
+    if (index == 5) {
+      setTimeout(() => {
+        stoped_satur.value = value + ''
+      })
+    }
+    if (index == 6) {
+      setTimeout(() => {
+        continued_satur.value = value + ''
+      })
+    }
+    if (index == 7) {
+      setTimeout(() => {
+        max_humidity.value = value + ''
+      })
+    }
+    if (index == 8) {
+      setTimeout(() => {
+        pre_heat_time_s.value = value + ''
+      })
+    }
+    if (index == 9) {
+      setTimeout(() => {
+        stoped_humi.value = value + ''
+      })
+    }
+    if (index == 10) {
+      setTimeout(() => {
+        continued_humi.value = value + ''
+      })
+    }
+    isFirstClick.value = false
+  }
+}
+
+const formatter1 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(item => item.name == 'stoped_gs')
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter2 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'continued_gs',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter3 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'stoped_satur',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter4 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'continued_satur',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter5 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'max_humidity',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter6 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'drainage_pump_speed',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter7 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'injection_pump_speed',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter8 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'pre_heat_time_s',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter9 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'stoped_humi',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const formatter10 = value => {
+  if (parseInt(value) == 0) {
+    return '0'
+  }
+  let arr = settingStore.allSettingList.filter(
+    item => item.name == 'continued_humi',
+  )
+  if (arr && arr.length > 0) {
+    if (parseInt(value) > arr[0].val_upper_limit) {
+      return arr[0].val_upper_limit + ''
+    }
+    if (parseInt(value) < arr[0].val_lower_limit) {
+      return arr[0].val_lower_limit + ''
+    }
+  }
+  return value.replace(/^0+/gi, '')
+}
+
+const setAddliquidVal = () => {
+  const val = parseInt(addLiquidConfigVal.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setStopedGsVal = () => {
+  const val = parseInt(stoped_gs.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setcontinuedGsVal = () => {
+  const val = parseInt(continued_gs.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setstopedSaturVal = () => {
+  const val = parseInt(stoped_satur.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setContinuedSaturVal = () => {
+  const val = parseInt(continued_satur.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setMaxHumidityVal = () => {
+  const val = parseInt(max_humidity.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setHeat_timeVal = () => {
+  const val = parseInt(pre_heat_time_s.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setstoped_humiVal = () => {
+  const val = parseInt(stoped_humi.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setcontinued_humiVal = () => {
+  const val = parseInt(continued_humi.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const setSprayLiquidVal = () => {
+  const val = parseInt(sprayLiquidConfigVal.value)
+  if (isNaN(val)) {
+    showFailToast('设置失败,请填写正确参数')
+    return
+  }
+}
+
+const showkeyboard = ref(false)
+const onChange = a => {
+  formula_id.value = a
+}
+const handleShowKeyBoard = () => {
+  showkeyboard.value = true
+}
+
+onMounted(() => {
+  document.addEventListener('click', e => {
+    let box = document.getElementById('keyboard_formula')
+    let room = document.getElementById('id_formula')
+    if (!box?.contains(e.target) && e.target != room) {
+      showkeyboard.value = false
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.update_device_container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 580px;
+  display: grid;
+  overflow: hidden;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 20px;
+  column-gap: 20px;
+  padding: 20px;
+  padding-bottom: 180px;
+  position: relative;
+  .btns {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    width: 300px;
+    height: 68px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .btn {
+      width: 111px;
+      height: 38px;
+      border-radius: 19px;
+      background: #06518b;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: Source Han Sans CN;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0.1em;
+      color: #ffffff;
+    }
+    .ml {
+      margin-left: 20px;
+    }
+  }
+  .row_wrap {
+    // width: 726px;
+    height: 80px;
+    border-radius: 14px;
+    background: #f6f6f6;
+    box-sizing: border-box;
+    padding: 0 18px 0 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .title {
+      font-family: Zona Pro;
+      white-space: nowrap;
+      font-size: 20px;
+      font-weight: normal;
+      letter-spacing: 0.06em;
+      color: #000000;
+    }
+    .num {
+      font-family: Source Han Sans CN;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      color: #000000;
+      display: flex;
+      align-items: center;
+      .log {
+        width: 182px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .formula_input {
+      border: none;
+      height: 38px;
+      padding: 0 12px;
+      width: 220px;
+    }
+    .btn {
+      width: 87px;
+      height: 45px;
+      border-radius: 23px;
+      background: #06518b;
+      font-family: Source Han Sans CN;
+      font-size: 14px;
+      font-weight: normal;
+      letter-spacing: 0.1em;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
+}
+</style>
diff --git a/test.js b/test.js
new file mode 100644
index 0000000..c624663
--- /dev/null
+++ b/test.js
@@ -0,0 +1,9 @@
+let a = {
+  stoped_gs: '100',
+  continued_gs: '110',
+  stoped_satur: '200',
+  continued_satur: '300',
+  stoped_humi: '100',
+  continued_humi: '102',
+  injection_pump_speed: '300',
+}