transmit_draw_bar_disinfection_front_end/src/components/Test.vue

<template>
  <div class="test_container">
    <!-- 喷液泵 -->
    <div class="common_set switch_wrap">
      <p class="title">喷液泵</p>
      <div class="num">
        <van-field
          type="number"
          v-model="sprayLiquidPumpGPMValue"
          :clickable="true"
          readonly
          @click.stop="hideAllKeyboards(3)"
          class="add_liquid_input"
        />
        <p>g/min</p>
      </div>
      <div class="btn_wrap">
        <div class="open style-btn" @click="actionSprayLiquidPumpGPMValueChange">更新</div>
      </div>
    </div>

    <!-- 气密性空压机 -->
    <div class="common_set switch_wrap">
      <p class="title">气密性空压机</p>
      <div class="btn_wrap">
        <div
          :class="airCompressorPowerCtrl === 1 ? 'open style-btn mg' : 'close style-btn mg'"
          @click="airTightnessTestAirCompressorPowerCtrl(1)"
        >打开</div>
        <div
          :class="airCompressorPowerCtrl == 0 ? 'open style-btn' : 'close style-btn'"
          @click="airTightnessTestAirCompressorPowerCtrl(0)"
        >关闭</div>
      </div>
    </div>

    <!-- 风机 -->
    <div class="common_set switch_wrap">
      <p class="title"> 风机</p>
      <div class="btn_wrap">
        <div class="style-btn"
          :class="50 === miniPwmBlowerCtrl ? 'open  mg' : 'close style-btn mg'"
          @click="actionMiniPwmBlowerCtrl(50)"
        >打开</div>
        <div
          :class="0 == miniPwmBlowerCtrl ? 'open style-btn ' : 'close style-btn'"
          @click="actionMiniPwmBlowerCtrl(0)"
        >关闭</div>
      </div>
    </div>

    <!-- 加热片 -->
    <div class="common_set switch_wrap">
      <p class="title">加热空压机控制</p>
      <div class="btn_wrap">
        <div
          :class="1 === heaterCtrl ? 'open style-btn mg' : 'close style-btn mg'"
          @click="actionHeaterCtrlUpdate(1)"
        >打开</div>
        <div
          :class="0 === heaterCtrl ? 'open style-btn' : 'close style-btn'"
          @click="actionHeaterCtrlUpdate(0)"
        >关闭</div>
      </div>
    </div>






    <!-- 喷液空压机控制 -->
    <div class="common_set switch_wrap">
      <p class="title">喷液空压机控制</p>
      <div class="btn_wrap">
        <div :class="1 == sprayAirCompressorPowerCtrl ? 'open style-btn mg' : 'close style-btn mg'"
          @click="actionSprayAirCompressorPowerCtrlUpdate(1)"
        >打开</div>
        <div :class="0 == sprayAirCompressorPowerCtrl ? 'open style-btn' : 'close style-btn'"
          @click="actionSprayAirCompressorPowerCtrlUpdate(0)"
        >关闭</div>
      </div>
    </div>
    
    <!-- 加热空压机安全电磁阀控制 -->
    <div class="common_set switch_wrap">
      <p class="title">加热空压机安全电磁阀控制</p>
      <div class="btn_wrap">
        <div :class="heaterCtrlSafeValve == 1 ? 'open style-btn mg' : 'close style-btn mg'"
          @click="actionHeaterCtrlSafeValveUpdate(1)"
        >打开</div>
        <div :class="heaterCtrlSafeValve == 0 ? 'open style-btn' : 'close style-btn'"
          @click="actionHeaterCtrlSafeValveUpdate(0)"
        >关闭</div>
      </div>
    </div>
    <div class="common_set update_wrap pressure">
      <div class="title"> 压力1 <p class="num">{{ testStore.pressureSensor1 }}</p></div>
      <div class="title"> 压力2 <p class="num">{{ testStore.pressureSensor2 }}</p></div>
      <div class="title"> 压力3 <p class="num">{{ testStore.pressureSensor3 }}</p></div>
    </div>
    <div class="common_set info_wrap">
      <p class="title">加热片</p>
      <p class="info">电流 {{ testStore.heatingStripCurrent }} A</p>
      <p class="info">湿度 {{ testStore.heatingStripTemperature }} ℃</p>
    </div>
    <div class="common_set info_wrap">
      <p class="title">仓内</p>
      <p class="info">温度 {{ deviceStore.binTemperature }} ℃</p>
      <p class="info">湿度 {{ deviceStore.binHumidity }} ℃</p>
      <p class="info">过氧化氢浓度 {{ deviceStore.binHP }} PPM</p>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">通道切换</p>
      <div class="btn_wrap">
        <div class="style-btn"
          :class="extChannelActiveName == 'disinfectionChannel' ? 'open' : 'close'"
          @click="actionSetExtChannelActiveName('disinfectionChannel')"
        >除湿</div>
        <div style="margin-left:5px;" class="style-btn"
          :class="extChannelActiveName == 'dehumidificationchannel' ? 'open' : 'close'"
          @click="actionSetExtChannelActiveName('dehumidificationchannel')"
        >降解</div>
        <div style="margin-left:5px;" class="style-btn"
          :class="extChannelActiveName == 'degradationchannel' ? 'open' : 'close'"
          @click="actionSetExtChannelActiveName('degradationchannel')"
        >消毒</div>
      </div>
    </div>
    <van-number-keyboard
      v-model="addLiquidVal"
      @input="val => handleInput(val, 1)"
      :show="numberKeyboardShowVal"
      @blur="numberKeyboardShowVal = false"
    />
    <van-number-keyboard
      @input="val => handleInput(val, 2)"
      v-model="addLiquidPower"
      :show="numberKeyboardShowPower"
      @blur="numberKeyboardShowPower = false"
    />
    <van-number-keyboard
      @input="val => handleInput(val, 3)"
      v-model="sprayLiquidPumpGPMValue"
      :show="numberKeyboardShowVal2"
      @blur="numberKeyboardShowVal2 = false"
    />
    <van-number-keyboard
      @input="val => handleInput(val, 4)"
      v-model="addLiquidPower2"
      :show="numberKeyboardShowPower2"
      @blur="numberKeyboardShowPower2 = false"
    />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import {
  useTestStore,
  useDeviceStore,
  useWebSocketStore,
  useSettingStore,
  useSealStore,
} from '@/store'
import {
  someAirSwitchJSON,
  liquidpumpctrlJSON,
  airCompressorChannelSelectJSON,
  airCompressor_channelCtrlJSON,
  getStateJSON,
  addLiquidCtrlJSON,
  airCompressorSetValve1JSON,
  airCompressorSetValve2JSON,
  test_replenishingFluidsPumpCtrJSON,
  sprayLiquidPump_open_for_testJSON,
} from '@/mock/command'
import { showSuccessToast, showFailToast } from 'vant'
import { storeToRefs } from 'pinia';
const testStore = useTestStore()
const deviceStore = useDeviceStore()
const websocketStore = useWebSocketStore()
const settingStore = useSettingStore()
const sealStore = useSealStore()

const addLiquidVal = ref(settingStore.addLiquidConfigVal)
const addLiquidPower = ref(25)
const numberKeyboardShowVal = ref(false)
const numberKeyboardShowPower = ref(false)

const addLiquidVal2 = ref(settingStore.sprayLiquidConfigVal)
const addLiquidPower2 = ref(25)
const numberKeyboardShowVal2 = ref(false)
const numberKeyboardShowPower2 = ref(false)


const {
  extChannelActiveName, // 外部通道名称
  miniPwmBlowerCtrl, // 风机控制
  sprayLiquidPumpGPM, // 喷液泵GPM值
  airCompressorPowerCtrl, // 气密性空压机
  heaterCtrl, // 加热片
  heaterCtrlSafeValve, // 加热空压机安全电磁阀控制
  sprayAirCompressorPowerCtrl, // 喷液空压机控制
} = storeToRefs(testStore);
const sprayLiquidPumpGPMValue = ref(sprayLiquidPumpGPM);

// 外部通道控制
function actionSetExtChannelActiveName( name ) {
    testStore.extChannelActiveName = name;
    websocketStore.call('DBDBTestPage__extValveCtrl',{channel:name});
}

// 风机控制
function actionMiniPwmBlowerCtrl(power) {
    testStore.miniPwmBlowerCtrl = power;
    websocketStore.call('DBDBTestPage__miniPwmBlowerCtrl',{power100:power});
}

// 喷液泵GPM值变化
function actionSprayLiquidPumpGPMValueChange() {
    testStore.sprayLiquidPumpGPM = sprayLiquidPumpGPMValue.value;
    websocketStore.call('DBDBTestPage__sprayLiquidPump_run',{gpm:sprayLiquidPumpGPMValue.value});
}

// 气密性空压机
function airTightnessTestAirCompressorPowerCtrl(value) {
    testStore.airCompressorPowerCtrl = value;
    websocketStore.call('DBDBTestPage__airTightnessTestAirCompressorPowerCtrl',{power:value});
}

// 加热片
function actionHeaterCtrlUpdate( value ) {
    testStore.heaterCtrl = value;
    websocketStore.call('DBDBTestPage__heaterCtrl',{power:value});
}

// 加热空压机安全电磁阀控制
function actionHeaterCtrlSafeValveUpdate( value ) {
    testStore.heaterCtrlSafeValve = value;
    websocketStore.call('DBDBTestPage__heaterCtrlSafeValve',{power:value});
}

// 喷液空压机控制
function actionSprayAirCompressorPowerCtrlUpdate( value ) {
    testStore.sprayAirCompressorPowerCtrl = value;
    websocketStore.call('DBDBTestPage__sprayAirCompressorPowerCtrl',{power:value});
}

const isFirstClick = ref(true)
const hideAllKeyboards = flag => {
  isFirstClick.value = true
  if (flag == 1) {
    numberKeyboardShowVal.value = true
    numberKeyboardShowPower.value = false
    numberKeyboardShowVal2.value = false
    numberKeyboardShowPower2.value = false
  }
  if (flag == 2) {
    numberKeyboardShowPower.value = true
    numberKeyboardShowVal.value = false
    numberKeyboardShowVal2.value = false
    numberKeyboardShowPower2.value = false
  }
  if (flag == 3) {
    numberKeyboardShowVal2.value = true
    numberKeyboardShowPower.value = false
    numberKeyboardShowVal.value = false
    numberKeyboardShowPower2.value = false
  }
  if (flag == 4) {
    numberKeyboardShowPower2.value = true
    numberKeyboardShowPower.value = false
    numberKeyboardShowVal2.value = false
    numberKeyboardShowVal.value = false
  }
}

const handleInput = (value, index) => {
  if (isFirstClick.value) {
    if (index == 1) {
      setTimeout(() => {
        addLiquidVal.value = value + ''
      })
    }
    if (index == 2) {
      setTimeout(() => {
        addLiquidPower.value = value + ''
      })
    }
    if (index == 3) {
      setTimeout(() => {
        sprayLiquidPumpGPMValue.value = value + ''
      })
    }
    if (index == 4) {
      setTimeout(() => {
        addLiquidPower2.value = value + ''
      })
    }
    isFirstClick.value = false
  }
}

const setAddLiquidConfig = flag => {
  if (flag == 1) {
    websocketStore.sendCommandMsg(
      // 正传
      test_replenishingFluidsPumpCtrJSON(1, 300),
    )
    showSuccessToast('设置成功')
    return
  } else if (flag == 2) {
    websocketStore.sendCommandMsg(
      sprayLiquidPump_open_for_testJSON(1, addLiquidVal2.value),
    )
    showSuccessToast('设置成功')
    return
  } else if (flag == 3) {
    // 关闭
    websocketStore.sendCommandMsg(test_replenishingFluidsPumpCtrJSON(0, 0))
    showSuccessToast('关闭加液蠕动泵成功')
    return
  } else if (flag == 5) {
    // 反转
    websocketStore.sendCommandMsg(test_replenishingFluidsPumpCtrJSON(-1, 300))
    showSuccessToast('设置成功')
  } else if (flag == 6) {
    websocketStore.sendCommandMsg(
      sprayLiquidPump_open_for_testJSON(-1, addLiquidVal2.value),
    )
    showSuccessToast('设置成功')
  } else {
    websocketStore.sendCommandMsg(
      sprayLiquidPump_open_for_testJSON(0, addLiquidVal2.value),
    )
    showSuccessToast('关闭注射蠕动泵成功')
    return
  }
}

const handleUpdate = () => {
  websocketStore.sendCommandMsg(getStateJSON)
}

const changeFeedingStatus = flag => {
  if (flag == 1) {
    if (!testStore.feedingPeristalticPumpStatus) {
      // 发送打开指令
      websocketStore.sendCommandMsg(
        liquidpumpctrlJSON(1, settingStore.addLiquidConfigVal),
      )
      testStore.updateFeedingPeristalticPumpStatus(true)
    }
  } else {
    if (testStore.feedingPeristalticPumpStatus) {
      websocketStore.sendCommandMsg(liquidpumpctrlJSON(1, 0))
      testStore.updateFeedingPeristalticPumpStatus(false)
    }
  }
}

const changeSprayStatus = flag => {
  if (flag == 1) {
    if (!testStore.sprayPeristalticPump) {
      websocketStore.sendCommandMsg(
        liquidpumpctrlJSON(2, settingStore.sprayLiquidConfigVal),
      )
      testStore.updateSprayPeristalticPump(true)
    }
  } else {
    if (testStore.sprayPeristalticPump) {
      websocketStore.sendCommandMsg(liquidpumpctrlJSON(2, 0))
      testStore.updateSprayPeristalticPump(false)
    }
  }
}

const changeHeatingStatus = flag => {
  if (flag == 1) {
    if (!testStore.heatingStrip) {
      websocketStore.sendCommandMsg(someAirSwitchJSON(4, 1))
      websocketStore.sendCommandMsg(someAirSwitchJSON(5, 1))
      testStore.updateHeatingStrip(true)
    }
  } else {
    if (testStore.heatingStrip) {
      websocketStore.sendCommandMsg(someAirSwitchJSON(4, 0))
      websocketStore.sendCommandMsg(someAirSwitchJSON(5, 0))
      testStore.updateHeatingStrip(false)
    }
  }
}

const changeAirStatus = flag => {
  if (flag == 1) {
    if (!testStore.airCompressor) {
      websocketStore.sendCommandMsg(someAirSwitchJSON(0, 1))
      websocketStore.sendCommandMsg(someAirSwitchJSON(1, 1))
      testStore.updateAirCompressor(true)
    }
  } else {
    if (testStore.airCompressor) {
      websocketStore.sendCommandMsg(someAirSwitchJSON(0, 0))
      websocketStore.sendCommandMsg(someAirSwitchJSON(1, 0))
      testStore.updateAirCompressor(false)
    }
  }
}

const changeDraughtStatus = flag => {
  if (flag == 1) {
    if (!testStore.draughtFan) {
      websocketStore.sendCommandMsg(someAirSwitchJSON(2, 1))
      websocketStore.sendCommandMsg(someAirSwitchJSON(3, 1))
      testStore.updateDraughtFan(true)
    }
  } else {
    if (testStore.draughtFan) {
      websocketStore.sendCommandMsg(someAirSwitchJSON(2, 0))
      websocketStore.sendCommandMsg(someAirSwitchJSON(3, 0))
      testStore.updateDraughtFan(false)
    }
  }
}

const changeChannel = flag => {
  if (flag == 1) {
    websocketStore.sendCommandMsg(airCompressorChannelSelectJSON([2]))
    sealStore.updateAirCompressorChannelSelectVal(2)
  } else {
    websocketStore.sendCommandMsg(airCompressorChannelSelectJSON([1]))
    sealStore.updateAirCompressorChannelSelectVal(1)
  }
}
</script>

<style lang="scss" scoped>
.custom-button {
  width: 64px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    background-color: #064b91;
    border-radius: 100px;
    height: 36px;
    line-height: 36px;
}
.test_container {
  margin-bottom: 19px;
  height: 580px;
  overflow: scroll;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  display: grid;
  row-gap: 20px;
  column-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  padding-bottom: 20px;
  .common_set {
    width: 580px;
    height: 90px;
    box-sizing: border-box;
    border-radius: 14px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    .title {
      font-family: Source Han Sans CN;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: #000000;
      width: 300px;
    }
    .num {
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: #000000;
      display: flex;
      align-items: center;
      margin-right: 4px;
      .add_liquid_input {
        width: 40px;
        margin-right: 2px;
        text-align: right;
        height: 24px;
        padding: 0;
        color: #0e0e0e;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 18px;
      }
    }
  }
  .pressure {
    display: flex;
    align-items: center;
    justify-content: space-evenly !important;
    .title {
      display: flex;
      line-height: 30px;
      justify-content: center !important;
      flex-direction: column;
      align-items: center;
      span {
        font-size: 26px;
      }
    }
  }
  .switch_wrap {
    padding: 0 17px 0 17px;
    justify-content: space-between;
    .btn_wrap {
      display: flex;
      align-items: center;
      background: #ddd;
      padding: 6px;
      border-radius: 30px;
      .mg {
        margin-right: 6px;
      }
      .open {
        width: 67px;
        height: 35px;
        border-radius: 18px;
        background: #06518b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: #ffffff;
      }
      .success {
        background: #1ad66e;
      }
      .close {
        width: 67px;
        height: 35px;
        border-radius: 18px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: #282727;
      }
    }
  }
  .update_wrap {
    padding: 0 17px 0 17px;
    justify-content: space-between;
    .btn_wrap {
      width: 150px;
      height: 45px;
      border-radius: 23px;
      background: #06518b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Source Han Sans CN;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: #ffffff;
    }
  }
  .info_wrap {
    padding: 0 32px 0 17px;
    justify-content: space-between;
    .title {
      font-family: Source Han Sans CN;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: #000000;
      width: 57px;
      white-space: nowrap;
    }
    .info {
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: #06518b;
    }
  }
}
</style>