disinfection_high_front_end/src/components/a.vue

<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>