sanitizing-machine/src/components/UpdatePreSetting.vue

<template>
  <div class="update_device_container">
    <div class="row_wrap">
      <p class="title">消毒停止过氧化氢浓度(ppm)</p>
      <p class="num">
        <van-field
          class="field_font"
          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"
          class="field_font"
          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"
          class="field_font"
          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"
          class="field_font"
          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"
          class="field_font"
          :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"
          class="field_font"
          :formatter="formatter4"
          v-model="continued_satur"
          :clickable="true"
          readonly
          @click.stop="hideClickKey(6)"
        />
      </p>
    </div>
    <div class="row_wrap">
      <p class="title">注射蠕动泵速率(g/min)</p>
      <p class="num">
        <van-field
          type="number"
          class="field_font"
          v-model="sprayLiquidConfigVal"
          :clickable="true"
          :formatter="formatter7"
          readonly
          @click.stop="hideClickKey(2)"
        />
      </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-show="showkeyboard" id="keyboard_formula">
      <SimpleKeyboard
        @onKeyPress="onKeyPress"
        @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,
  updateAllFormulaJSON,
  updateFormulaJSON,
} from '@/mock/command'
import LogPicker from 'cpns/dialogs/LogPicker'

const settingStore = useSettingStore()
const webSocketStore = useWebSocketStore()
const operatorStore = useOperatorStore()
const formulaStore = useFormulaStore()

const max_humidity = ref('0')
const continued_satur = ref(props.formulaInfo.continued_satur)
const stoped_satur = ref(props.formulaInfo.stoped_satur)
const continued_gs = ref(props.formulaInfo.continued_gs)
const stoped_gs = ref(props.formulaInfo.stoped_gs)
const addLiquidConfigVal = ref('0')
const sprayLiquidConfigVal = ref(props.formulaInfo.injection_pump_speed)
const stoped_humi = ref(props.formulaInfo.stoped_humi)
const continued_humi = ref(props.formulaInfo.continued_humi)
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(props.formulaInfo.loglevel)
const formula_id = ref(props.formulaInfo.formula_id)

// watch(formula_id, (newValue, oldValue) => {
//   if (newValue != '') {
//     // webSocketStore.sendCommandMsg(
//     //   updateFormulaJSON('formula_id', newValue, props.formulaInfo.id),
//     // )
//   }
// })

const onKeyPress = button => {
  if (button == '{bksp}') {
    formula_id.value = formula_id.value.substr(0, formula_id.value.length - 1)
  }
}

const save = () => {
  if (formula_id.value == '') {
    showFailToast('配方名称不能为空')
    return
  }
  const data = {
    id: props.formulaInfo.id,
    formula_id: formula_id.value,
    loglevel: parseInt(logVal.value),
    injection_pump_speed: parseInt(sprayLiquidConfigVal.value),
    stoped_gs: parseInt(stoped_gs.value),
    continued_gs: parseInt(continued_gs.value),
    stoped_satur: parseInt(stoped_satur.value),
    continued_satur: parseInt(continued_satur.value),
    stoped_humi: parseInt(stoped_humi.value),
    continued_humi: parseInt(continued_humi.value),
  }
  console.log(data)
  webSocketStore.sendCommandMsg(updateAllFormulaJSON(data))
  webSocketStore.sendCommandMsg(getAllFormulaJSON)
  props.hideSettingModal()
}

const changeLogVal = val => {
  logVal.value = val
  logVisible.value = false
  // webSocketStore.sendCommandMsg(
  //   updateFormulaJSON('loglevel', val, props.formulaInfo.id),
  // )
}
const hiddenLogVisible = () => {
  logVisible.value = false
}
const showLogPicker = () => {
  logVisible.value = true
}

const isFirstClick = ref(true)

const props = defineProps({
  hideSettingModal: {
    type: Function,
  },
  formulaInfo: {
    type: Object,
  },
})

const hiddleSettingModal = () => {
  webSocketStore.sendCommandMsg(getAllFormulaJSON)
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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 + ''
    }
  }
  if (value == '') {
    return '0'
  }
  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
  } else {
    // webSocketStore.sendCommandMsg(
    //   updateFormulaJSON('stoped_gs', val, props.formulaInfo.id),
    // )
  }
}

const setcontinuedGsVal = () => {
  const val = parseInt(continued_gs.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  } else {
    // webSocketStore.sendCommandMsg(
    //   updateFormulaJSON('continued_gs', val, props.formulaInfo.id),
    // )
  }
}

const setstopedSaturVal = () => {
  const val = parseInt(stoped_satur.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  } else {
    // webSocketStore.sendCommandMsg(
    //   updateFormulaJSON('stoped_satur', val, props.formulaInfo.id),
    // )
  }
}

const setContinuedSaturVal = () => {
  const val = parseInt(continued_satur.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  } else {
    // webSocketStore.sendCommandMsg(
    //   updateFormulaJSON('continued_satur', val, props.formulaInfo.id),
    // )
  }
}

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
  } else {
    // webSocketStore.sendCommandMsg(
    //   updateFormulaJSON('stoped_humi', val, props.formulaInfo.id),
    // )
  }
}

const setcontinued_humiVal = () => {
  const val = parseInt(continued_humi.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  } else {
    // webSocketStore.sendCommandMsg(
    //   updateFormulaJSON('continued_humi', val, props.formulaInfo.id),
    // )
  }
}

const setSprayLiquidVal = () => {
  const val = parseInt(sprayLiquidConfigVal.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  } else {
    // webSocketStore.sendCommandMsg(
    //   updateFormulaJSON('injection_pump_speed', val, props.formulaInfo.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')
    const arr = [
      'hg-candidate-box-next',
      'hg-candidate-box-btn-active',
      'hg-candidate-box-prev',
      'hg-candidate-box-list-item',
    ]
    if (
      !box?.contains(e.target) &&
      e.target != room &&
      !arr.includes(Array.from(e.target.classList)[0])
    ) {
      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: 24px;
      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;
      }
      .field_font {
        font-size: 26px;
        width: 180px;
      }
    }
    .formula_input {
      border: none;
      height: 38px;
      padding: 0 12px;
      width: 220px;
      font-size: 22px;
    }
    .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;
    right: 97px;
    bottom: 0;
    height: 245px;
    width: 520px;
  }
}
</style>