From de7e8ed3898f0b3d6ec6acc007fa51b170512576 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sun, 10 Sep 2023 10:24:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=85=8D=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AddPreSetting.vue    | 766 ++++++++++++++++++++++++++++++++++++
 src/components/Formula.vue          |  30 +-
 src/components/PreSetting.vue       | 737 ----------------------------------
 src/components/UpdatePreSetting.vue | 737 ++++++++++++++++++++++++++++++++++
 src/mock/command.js                 |  20 +-
 5 files changed, 1524 insertions(+), 766 deletions(-)
 create mode 100644 src/components/AddPreSetting.vue
 delete mode 100644 src/components/PreSetting.vue
 create mode 100644 src/components/UpdatePreSetting.vue

diff --git a/src/components/AddPreSetting.vue b/src/components/AddPreSetting.vue
new file mode 100644
index 0000000..2947f0a
--- /dev/null
+++ b/src/components/AddPreSetting.vue
@@ -0,0 +1,766 @@
+<template>
+  <div class="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
+          type="text"
+          v-model="formula_id"
+          class="formula_input"
+          placeholder="请输入配方名称"
+        />
+      </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>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { showSuccessToast, showFailToast } from 'vant'
+import { useSettingStore, useWebSocketStore, useOperatorStore } 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 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)
+
+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
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.device_container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 580px;
+  display: grid;
+  overflow: scroll;
+  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;
+    }
+  }
+}
+</style>
diff --git a/src/components/Formula.vue b/src/components/Formula.vue
index cfb6b19..5bbc465 100644
--- a/src/components/Formula.vue
+++ b/src/components/Formula.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="formula_container">
-    <div v-if="isSettingVisible">
-      <PreSetting :hideSettingModal="hideSettingModal" />
+    <div v-if="isAddPreSettingVisible">
+      <AddPreSetting :hideSettingModal="hideAddSettingModal" />
+    </div>
+    <div v-else-if="isUpdatePreSettingVisible">
+      <UpdatePreSetting :hideSettingModal="hideUpdateSettingModal" />
     </div>
     <div v-else>
       <div class="header_wrap">
@@ -23,7 +26,7 @@
           <div class="username">{{ item?.formula_id }}</div>
           <div class="btns">
             <div class="btn" @click="delModalShow(item)">删除</div>
-            <div class="btn mg" @click="showSetting(item)">配置</div>
+            <div class="btn mg" @click="showUpdateSetting(item)">配置</div>
             <div class="btn" @click="runConfig(item)">执行</div>
           </div>
         </div>
@@ -112,7 +115,8 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import DelPreModal from 'cpns/dialogs/DelPreModal'
-import PreSetting from './PreSetting'
+import AddPreSetting from './AddPreSetting'
+import UpdatePreSetting from './UpdatePreSetting'
 import { getAllFormulaJSON } from '@/mock/command'
 import { useWebSocketStore, useFormulaStore } from '@/store'
 import { startFormulaJSON } from '@/mock/command'
@@ -131,15 +135,19 @@ const hideDelModal = () => {
   delPreModalVisible.value = false
 }
 
-const isSettingVisible = ref(false)
-
-const showSetting = item => {
+const isAddPreSettingVisible = ref(false)
+const isUpdatePreSettingVisible = ref(false)
+const showUpdateSetting = item => {
   formulaStore.updateCurrentFormula(item)
-  isSettingVisible.value = true
+  isUpdatePreSettingVisible.value = true
+}
+
+const hideUpdateSettingModal = () => {
+  isUpdatePreSettingVisible.value = false
 }
 
-const hideSettingModal = () => {
-  isSettingVisible.value = false
+const hideAddSettingModal = () => {
+  isAddPreSettingVisible.value = false
 }
 
 // 执行配置
@@ -151,7 +159,7 @@ const runConfig = item => {
 
 const addNewPre = () => {
   // 添加新预设
-  isSettingVisible.value = true
+  isAddPreSettingVisible.value = true
 }
 
 onMounted(() => {
diff --git a/src/components/PreSetting.vue b/src/components/PreSetting.vue
deleted file mode 100644
index a7ff6ac..0000000
--- a/src/components/PreSetting.vue
+++ /dev/null
@@ -1,737 +0,0 @@
-<template>
-  <div class="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>
-    <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>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { showSuccessToast, showFailToast } from 'vant'
-import { useSettingStore, useWebSocketStore, useOperatorStore } from '@/store'
-import { storeToRefs } from 'pinia'
-import { setSettingValJSON } from '@/mock/command'
-import LogPicker from 'cpns/dialogs/LogPicker'
-
-const settingStore = useSettingStore()
-const webSocketStore = useWebSocketStore()
-const operatorStore = useOperatorStore()
-
-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)
-
-const logVisible = ref(false)
-const logVal = ref('6')
-
-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)
-  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
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.device_container {
-  box-sizing: border-box;
-  width: 100%;
-  height: 580px;
-  display: grid;
-  overflow: scroll;
-  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;
-      }
-    }
-    .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;
-    }
-  }
-}
-</style>
diff --git a/src/components/UpdatePreSetting.vue b/src/components/UpdatePreSetting.vue
new file mode 100644
index 0000000..2184b62
--- /dev/null
+++ b/src/components/UpdatePreSetting.vue
@@ -0,0 +1,737 @@
+<template>
+  <div class="update_pre_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>
+    <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>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { showSuccessToast, showFailToast } from 'vant'
+import { useSettingStore, useWebSocketStore, useOperatorStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { setSettingValJSON } from '@/mock/command'
+import LogPicker from 'cpns/dialogs/LogPicker'
+
+const settingStore = useSettingStore()
+const webSocketStore = useWebSocketStore()
+const operatorStore = useOperatorStore()
+
+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)
+
+const logVisible = ref(false)
+const logVal = ref('6')
+
+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)
+  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
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.update_pre_device_container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 580px;
+  display: grid;
+  overflow: scroll;
+  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;
+      }
+    }
+    .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;
+    }
+  }
+}
+</style>
diff --git a/src/mock/command.js b/src/mock/command.js
index 6b337d2..2be236d 100644
--- a/src/mock/command.js
+++ b/src/mock/command.js
@@ -269,27 +269,11 @@ export const delFormulaJSON = id => {
 }
 
 // 添加配方 是不是少了log
-export const addFormulaJSON = (
-  formula_id,
-  stoped_gs,
-  continued_gs,
-  stoped_satur,
-  continued_satur,
-  stoped_humi,
-  continued_humi,
-  injection_pump_speed,
-) => {
+export const addFormulaJSON = data => {
   return {
     command: 'addFormula',
     messageId: 'addFormula',
-    formula_id,
-    stoped_gs,
-    continued_gs,
-    stoped_satur,
-    continued_satur,
-    stoped_humi,
-    continued_humi,
-    injection_pump_speed,
+    ...data,
   }
 }