pipeline_disinfection_front_end/src/components/Setting/components/Device.vue

<template>
  <div class="device_container">
    <div class="row_wrap">
      <p class="title">加液蠕动泵(/g)</p>
      <p class="num">
        <van-field
          type="number"
          v-model="addLiquidConfigVal"
          :clickable="true"
          :formatter="formatter2"
          :maxlength="3"
          readonly
          @touchstart.stop="addLiquidConfigValShow = true"
        />
      </p>
      <div class="btn" @click="setAddliquidVal">设置</div>
    </div>
    <div class="row_wrap">
      <p class="title">喷液蠕动泵(/g)</p>
      <p class="num">
        <van-field
          type="number"
          v-model="sprayLiquidConfigVal"
          :clickable="true"
          :formatter="formatter2"
          :maxlength="3"
          readonly
          @touchstart.stop="sprayLiquidConfigValShow = true"
        />
      </p>
      <div class="btn" @click="setSprayLiquidVal">设置</div>
    </div>
    <div class="row_wrap">
      <p class="title">消毒停止过氧化氢溶度(/ppm)</p>
      <p class="num">
        <van-field
          type="number"
          v-model="stoped_gs"
          :clickable="true"
          :formatter="formatter3"
          :maxlength="4"
          readonly
          @touchstart.stop="stoped_gsShow = true"
        />
      </p>
      <div class="btn" @click="setStopedGsVal">设置</div>
    </div>
    <div class="row_wrap">
      <p class="title">消毒继续过氧化氢溶度(/ppm)</p>
      <p class="num">
        <van-field
          type="number"
          v-model="continued_gs"
          :clickable="true"
          :maxlength="4"
          :formatter="formatter3"
          readonly
          @touchstart.stop="continued_gsShow = true"
        />
      </p>
      <div class="btn" @click="setcontinuedGsVal">设置</div>
    </div>
    <div class="row_wrap">
      <p class="title">消毒停止过氧化氢相对饱和度(%RS)</p>
      <p class="num">
        <van-field
          type="number"
          :formatter="formatter1"
          v-model="stoped_satur"
          :clickable="true"
          :maxlength="3"
          readonly
          @touchstart.stop="stoped_saturShow = true"
        />
      </p>
      <div class="btn" @click="setstopedSaturVal">设置</div>
    </div>
    <div class="row_wrap">
      <p class="title">消毒继续过氧化氢相对饱和度(%RS)</p>
      <p class="num">
        <van-field
          type="number"
          :formatter="formatter1"
          v-model="continued_satur"
          :clickable="true"
          :maxlength="3"
          readonly
          @touchstart.stop="continued_saturShow = true"
        />
      </p>
      <div class="btn" @click="setContinuedSaturVal">设置</div>
    </div>
    <div class="row_wrap">
      <p class="title">允许消毒最大湿度(%RH)</p>
      <p class="num">
        <van-field
          :formatter="formatter1"
          type="number"
          v-model="max_humidity"
          :clickable="true"
          :maxlength="3"
          readonly
          @touchstart.stop="max_humidityShow = true"
        />
      </p>
      <div class="btn" @click="setMaxHumidityVal">设置</div>
    </div>
    <van-number-keyboard
      v-model="addLiquidConfigVal"
      :show="addLiquidConfigValShow"
      :maxlength="3"
      @blur="addLiquidConfigValShow = false"
    />
    <van-number-keyboard
      v-model="sprayLiquidConfigVal"
      :show="sprayLiquidConfigValShow"
      :maxlength="3"
      @blur="sprayLiquidConfigValShow = false"
    />
    <van-number-keyboard
      v-model="stoped_gs"
      :show="stoped_gsShow"
      :maxlength="4"
      @blur="stoped_gsShow = false"
    />
    <van-number-keyboard
      v-model="continued_gs"
      :show="continued_gsShow"
      :maxlength="4"
      @blur="continued_gsShow = false"
    />
    <van-number-keyboard
      v-model="stoped_satur"
      :show="stoped_saturShow"
      :maxlength="3"
      @blur="stoped_saturShow = false"
    />
    <van-number-keyboard
      v-model="continued_satur"
      :show="continued_saturShow"
      :maxlength="3"
      @blur="continued_saturShow = false"
    />
    <van-number-keyboard
      v-model="max_humidity"
      :show="max_humidityShow"
      :maxlength="3"
      @blur="max_humidityShow = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'
import { useSettingStore, useWebSocketStore } from '@/store'
import { storeToRefs } from 'pinia'
import { setSettingValJSON } from '@/mock/command'

const settingStore = useSettingStore()
const webSocketStore = useWebSocketStore()
const {
  max_humidity,
  continued_satur,
  stoped_satur,
  continued_gs,
  stoped_gs,
  addLiquidConfigVal,
  sprayLiquidConfigVal,
} = storeToRefs(settingStore)

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 formatter1 = value => {
  if (parseInt(value) > 100) {
    return '100'
  }
  return value
}

const formatter2 = value => {
  if (parseInt(value) > 500) {
    return '500'
  }
  return value
}

const formatter3 = value => {
  if (parseInt(value) > 1000) {
    return '1000'
  }
  return value
}

const setAddliquidVal = () => {
  const val = parseInt(addLiquidConfigVal.value)
  settingStore.changeAddLiquidConfigVal(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('drainage_pump_speed', val))
  showSuccessToast('设置成功')
}

const setStopedGsVal = () => {
  const val = parseInt(stoped_gs.value)
  settingStore.updateStopedGs(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('stoped_gs', val))
  showSuccessToast('设置成功')
}

const setcontinuedGsVal = () => {
  const val = parseInt(continued_gs.value)
  settingStore.updateContinuedGs(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('continued_gs', val))
  showSuccessToast('设置成功')
}

const setstopedSaturVal = () => {
  const val = parseInt(stoped_satur.value)
  settingStore.updateStopedSatur(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('stoped_satur', val))
  showSuccessToast('设置成功')
}

const setContinuedSaturVal = () => {
  const val = parseInt(continued_satur.value)
  settingStore.updateContinuedSatur(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('continued_satur', val))
  showSuccessToast('设置成功')
}

const setMaxHumidityVal = () => {
  const val = parseInt(max_humidity.value)
  settingStore.updateMaxHumidity(val)
  webSocketStore.sendCommandMsg(setSettingValJSON('max_humidity', val))
  showSuccessToast('设置成功')
}

const setSprayLiquidVal = () => {
  const val = parseInt(sprayLiquidConfigVal.value)
  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: 100%;
  padding: 20px;
  display: grid;
  overflow: scroll;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(1, 1fr);
  row-gap: 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;
      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;
    }
    .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>