pipeline_disinfection_front_end/src/components/PreSetting.vue

<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">
      <p class="title">Log等级</p>
      <div class="num">
        <p class="log">6</p>
      </div>
    </div>
    <!-- <div class="row_wrap" v-if="operatorStore.disinfectStatus != 1">
      <p class="title">允许消毒最大湿度(%RH)</p>
      <p class="num">
        <van-field
          :formatter="formatter5"
          type="number"
          v-model="max_humidity"
          :clickable="true"
          readonly
          @click.stop="hideClickKey(7)"
        />
      </p>
    </div>
    <div class="row_wrap" v-if="operatorStore.disinfectStatus != 1">
      <p class="title">预热时间(s)</p>
      <p class="num">
        <van-field
          :formatter="formatter8"
          type="number"
          v-model="pre_heat_time_s"
          :clickable="true"
          readonly
          @click.stop="hideClickKey(8)"
        />
      </p>
    </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"
    />
    <div class="btns">
      <div class="btn">保存</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'

const settingStore = useSettingStore()
const webSocketStore = useWebSocketStore()
const operatorStore = useOperatorStore()
const {
  max_humidity,
  continued_satur,
  stoped_satur,
  continued_gs,
  stoped_gs,
  addLiquidConfigVal,
  sprayLiquidConfigVal,
  stoped_humi,
  continued_humi,
  allSettingList,
  pre_heat_time_s,
} = storeToRefs(settingStore)

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 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
  }
  settingStore.changeAddLiquidConfigVal(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('drainage_pump_speed', val))
  showSuccessToast('设置成功')
}

const setStopedGsVal = () => {
  const val = parseInt(stoped_gs.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.updateStopedGs(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('stoped_gs', val))
  showSuccessToast('设置成功')
}

const setcontinuedGsVal = () => {
  const val = parseInt(continued_gs.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.updateContinuedGs(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('continued_gs', val))
  showSuccessToast('设置成功')
}

const setstopedSaturVal = () => {
  const val = parseInt(stoped_satur.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.updateStopedSatur(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('stoped_satur', val))
  showSuccessToast('设置成功')
}

const setContinuedSaturVal = () => {
  const val = parseInt(continued_satur.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.updateContinuedSatur(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('continued_satur', val))
  showSuccessToast('设置成功')
}

const setMaxHumidityVal = () => {
  const val = parseInt(max_humidity.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.updateMaxHumidity(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('max_humidity', val))
  showSuccessToast('设置成功')
}

const setHeat_timeVal = () => {
  const val = parseInt(pre_heat_time_s.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.updatePre_heat_time_s(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('pre_heat_time_s', val))
  showSuccessToast('设置成功')
}

const setstoped_humiVal = () => {
  const val = parseInt(stoped_humi.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.updateStopedHumi(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('stoped_humi', val))
  showSuccessToast('设置成功')
}

const setcontinued_humiVal = () => {
  const val = parseInt(continued_humi.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.updateContinuedHumi(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('continued_humi', val))
  showSuccessToast('设置成功')
}

const setSprayLiquidVal = () => {
  const val = parseInt(sprayLiquidConfigVal.value)
  if (isNaN(val)) {
    showFailToast('设置失败,请填写正确参数')
    return
  }
  settingStore.changeSprayLiquidConfigVal(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('injection_pump_speed', val))
  showSuccessToast('设置成功')
}
</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>