sanitizing-machine/src/components/Test.vue

<template>
  <div class="test_container">
    <div class="common_set switch_wrap">
      <p class="title">加液蠕动泵</p>
      <p class="num">{{ Math.abs(testStore.chargingPump) }} RPM</p>
      <div class="btn_wrap">
        <div
          :class="testStore.feedingPeristalticPumpStatus ? 'close' : 'open'"
          @click="changeFeedingStatus(1)"
        >
          打开
        </div>
        <div
          :class="!testStore.feedingPeristalticPumpStatus ? 'close' : 'open'"
          @click="changeFeedingStatus(2)"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">喷液蠕动泵</p>
      <p class="num">{{ testStore.sprinklerPump }} RPM</p>
      <div class="btn_wrap">
        <div
          :class="testStore.sprayPeristalticPump ? 'close' : 'open'"
          @click="changeSprayStatus(1)"
        >
          打开
        </div>
        <div
          :class="!testStore.sprayPeristalticPump ? 'close' : 'open'"
          @click="changeSprayStatus(2)"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">空压机</p>
      <p class="num">{{ testStore?.airCompressorObj?.currentVal }} A</p>
      <div class="btn_wrap">
        <div
          :class="testStore.airCompressor ? 'close' : 'open'"
          @click="changeAirStatus(1)"
        >
          打开
        </div>
        <div
          :class="!testStore.airCompressor ? 'close' : 'open'"
          @click="changeAirStatus(2)"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">风机</p>
      <p class="num">{{ testStore?.airBlowerObj?.currentVal }} RPM</p>
      <div class="btn_wrap">
        <div
          :class="testStore.draughtFan ? 'close' : 'open'"
          @click="changeDraughtStatus(1)"
        >
          打开
        </div>
        <div
          :class="!testStore.draughtFan ? 'close' : 'open'"
          @click="changeDraughtStatus(2)"
        >
          关闭
        </div>
      </div>
    </div>
    <div class="common_set switch_wrap">
      <p class="title">加热片</p>
      <p class="num">{{ testStore?.heatingStripObj?.currentVal }} ℃</p>
      <div class="btn_wrap">
        <div
          :class="testStore.heatingStrip ? 'close' : 'open'"
          @click="changeHeatingStatus(1)"
        >
          打开
        </div>
        <div
          :class="!testStore.heatingStrip ? 'close' : 'open'"
          @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" @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" @click="handleUpdate">更新读取水浸状态</div>
    </div>
    <div class="common_set update_wrap">
      <p class="title">液位</p>
      <p class="num">{{ deviceStore.disinfectantCapacity }} kPa/100g</p>
      <div class="btn_wrap" @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>
  </div>
</template>

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

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

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);
  .common_set {
    width: 580px;
    height: 80px;
    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: 14px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: #000000;
    }
  }
  .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>