disinfection_high_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="addLiquidVal"
          :clickable="true"
          :formatter="formatter6"
          readonly
          @click.stop="hideAllKeyboards(1)"
          class="add_liquid_input"
        />
        <p>RPM</p>
      </div>
      <div class="num">
        <van-field
          type="number"
          v-model="addLiquidPower"
          :clickable="true"
          readonly
          :formatter="formatter"
          @click.stop="hideAllKeyboards(2)"
          class="add_liquid_input"
        />
        <p>P</p>
      </div>
      <div class="btn_wrap">
        <div class="open style-btn" @click="setAddLiquidConfig(1)">正转</div>
        <div class="open style-btn" @click="setAddLiquidConfig(5)">反转</div>
        <div
          class="open style-btn"
          @click="setAddLiquidConfig(3)"
          style="margin-right: 0"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">喷液蠕动泵</p>
      <div class="num">
        <van-field
          type="number"
          :formatter="formatter7"
          v-model="addLiquidVal2"
          :clickable="true"
          readonly
          @click.stop="hideAllKeyboards(3)"
          class="add_liquid_input"
        />
        <p>RPM</p>
      </div>
      <div class="num">
        <van-field
          type="number"
          :formatter="formatter"
          v-model="addLiquidPower2"
          :clickable="true"
          readonly
          @click.stop="hideAllKeyboards(4)"
          class="add_liquid_input"
        />
        <p>P</p>
      </div>
      <div class="btn_wrap">
        <div class="open style-btn" @click="setAddLiquidConfig(2)">正转</div>
        <div class="open style-btn" @click="setAddLiquidConfig(6)">反转</div>
        <div
          class="open style-btn"
          @click="setAddLiquidConfig(4)"
          style="margin-right: 0"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">空压机</p>
      <p class="num">
        {{
          testStore?.airCompressorObj?.currentVal > 5000
            ? 5000
            : testStore?.airCompressorObj?.currentVal
        }}
        A
      </p>
      <div class="btn_wrap">
        <div
          :class="
            testStore.airCompressor ? 'close style-btn' : 'open style-btn'
          "
          @click="changeAirStatus(1)"
        >
          打开
        </div>
        <div
          :class="
            !testStore.airCompressor ? 'close style-btn' : 'open style-btn'
          "
          @click="changeAirStatus(2)"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">风机</p>
      <p class="num">{{ testStore?.airBlowerObj?.currentVal }} A</p>
      <div class="btn_wrap">
        <div
          :class="testStore.draughtFan ? 'close style-btn' : 'open style-btn'"
          @click="changeDraughtStatus(1)"
        >
          打开
        </div>
        <div
          :class="!testStore.draughtFan ? 'close style-btn' : 'open style-btn'"
          @click="changeDraughtStatus(2)"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">加热片</p>
      <p class="num">{{ testStore?.heatingStripObj?.currentVal }} A</p>
      <div class="btn_wrap">
        <div
          :class="testStore.heatingStrip ? 'close style-btn' : 'open style-btn'"
          @click="changeHeatingStatus(1)"
        >
          打开
        </div>
        <div
          :class="
            !testStore.heatingStrip ? 'close style-btn' : 'open style-btn'
          "
          @click="changeHeatingStatus(2)"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set update_wrap">
      <p class="title">水浸1</p>
      <p class="num">{{ testStore.waterImmersionSensor1 ? '有水' : '没水' }}</p>
      <div class="btn_wrap style-btn" @click="handleUpdate">
        更新读取水浸状态
      </div>
    </div>
    <div class="common_set update_wrap">
      <p class="title">水浸2</p>
      <p class="num">{{ testStore.waterImmersionSensor2 ? '有水' : '没水' }}</p>
      <div class="btn_wrap style-btn" @click="handleUpdate">
        更新读取水浸状态
      </div>
    </div>
    <div class="common_set update_wrap">
      <p class="title">液位</p>
      <p class="num">
        {{
          deviceStore.disinfectantCapacity <= 0
            ? 0
            : deviceStore.disinfectantCapacity
        }}
        kPa/100g
      </p>
      <div class="btn_wrap style-btn" @click="handleUpdate">
        更新读取液位状态
      </div>
    </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 info_wrap">
      <p class="title">环境1</p>
      <p class="info">温度 {{ deviceStore.envirTemperature1 }} ℃</p>
      <p class="info">湿度 {{ deviceStore.envirHumidity1 }} ℃</p>
      <p class="info">过氧化氢浓度 {{ deviceStore.envirHP1 }} PPM</p>
    </div>
    <div class="common_set info_wrap">
      <p class="title">环境2</p>
      <p class="info">温度 {{ deviceStore.envirTemperature2 }} ℃</p>
      <p class="info">湿度 {{ deviceStore.envirHumidity2 }} ℃</p>
      <p class="info">过氧化氢浓度 {{ deviceStore.envirHP2 }} PPM</p>
    </div>
    <van-number-keyboard
      v-model="addLiquidVal"
      :show="numberKeyboardShowVal"
      @blur="numberKeyboardShowVal = false"
    />
    <van-number-keyboard
      v-model="addLiquidPower"
      :show="numberKeyboardShowPower"
      @blur="numberKeyboardShowPower = false"
    />
    <van-number-keyboard
      v-model="addLiquidVal2"
      :show="numberKeyboardShowVal2"
      @blur="numberKeyboardShowVal2 = false"
    />
    <van-number-keyboard
      v-model="addLiquidPower2"
      :show="numberKeyboardShowPower2"
      @blur="numberKeyboardShowPower2 = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  useTestStore,
  useDeviceStore,
  useWebSocketStore,
  useSettingStore,
} from '@/store'
import {
  someAirSwitchJSON,
  liquidpumpctrlJSON,
  getStateJSON,
  addLiquidCtrlJSON,
} from '@/mock/command'

const testStore = useTestStore()
const deviceStore = useDeviceStore()
const websocketStore = useWebSocketStore()
const settingStore = useSettingStore()

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

const formatter6 = value => {
  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
}

const formatter7 = value => {
  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
}

const hideAllKeyboards = flag => {
  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 setAddLiquidConfig = flag => {
  if (flag == 1) {
    websocketStore.sendCommandMsg(
      addLiquidCtrlJSON(1, addLiquidVal.value, addLiquidPower.value),
    )
  } else if (flag == 2) {
    websocketStore.sendCommandMsg(
      addLiquidCtrlJSON(2, addLiquidVal2.value, addLiquidPower2.value),
    )
  } else if (flag == 3) {
    websocketStore.sendCommandMsg(addLiquidCtrlJSON(1, 0, addLiquidPower.value))
  } else if (flag == 5) {
    websocketStore.sendCommandMsg(
      addLiquidCtrlJSON(1, '-' + addLiquidVal.value, addLiquidPower.value),
    )
  } else if (flag == 6) {
    websocketStore.sendCommandMsg(
      addLiquidCtrlJSON(2, '-' + addLiquidVal2.value, addLiquidPower2.value),
    )
  } else {
    websocketStore.sendCommandMsg(
      addLiquidCtrlJSON(2, 0, addLiquidPower2.value),
    )
  }
}

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)
    }
  }
}
</script>

<style lang="scss" scoped>
.test_container {
  margin-bottom: 30px;
  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: 73px;
    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: 106px;
    }
    .num {
      font-family: Source Han Sans CN;
      font-size: 13px;
      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: 14;
      }
    }
  }
  .switch_wrap {
    padding: 0 17px 0 40px;
    justify-content: space-between;
    .btn_wrap {
      display: flex;
      align-items: center;
      .open {
        margin-right: 10px;
        width: 87px;
        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;
      }
      .close {
        width: 87px;
        height: 45px;
        border-radius: 23px;
        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: #d8d8d8;
      }
    }
  }
  .update_wrap {
    padding: 0 17px 0 40px;
    justify-content: space-between;
    .btn_wrap {
      width: 184px;
      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 40px;
    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: 14px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: #06518b;
    }
  }
}
</style>