disinfection_high_front_end/src/components/Test.vue

<template>
  <div class="test_container">
    <div class="common_set switch_wrap">
      <p class="title">加液蠕动泵</p>
      <p class="num">000 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">000 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">000 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">000 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 update_wrap">
      <p class="title">水浸</p>
      <p class="num">有水</p>
      <div class="btn_wrap">更新读取水浸状态</div>
    </div>
    <div class="common_set update_wrap">
      <p class="title">液位</p>
      <p class="num">000 kPa/100g</p>
      <div class="btn_wrap">更新读取液位状态</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 } from '@/store'

const testStore = useTestStore()
const deviceStore = useDeviceStore()

const changeFeedingStatus = flag => {
  if (flag == 1) {
    if (!testStore.feedingPeristalticPumpStatus) {
      testStore.updateFeedingPeristalticPumpStatus(true)
    }
  } else {
    if (testStore.feedingPeristalticPumpStatus) {
      testStore.updateFeedingPeristalticPumpStatus(false)
    }
  }
}

const changeSprayStatus = flag => {
  if (flag == 1) {
    if (!testStore.sprayPeristalticPump) {
      testStore.updateSprayPeristalticPump(true)
    }
  } else {
    if (testStore.sprayPeristalticPump) {
      testStore.updateSprayPeristalticPump(false)
    }
  }
}

const changeAirStatus = flag => {
  if (flag == 1) {
    if (!testStore.airCompressor) {
      testStore.updateAirCompressor(true)
    }
  } else {
    if (testStore.airCompressor) {
      testStore.updateAirCompressor(false)
    }
  }
}

const changeDraughtStatus = flag => {
  if (flag == 1) {
    if (!testStore.draughtFan) {
      testStore.updateDraughtFan(true)
    }
  } else {
    if (testStore.draughtFan) {
      testStore.updateDraughtFan(false)
    }
  }
}
</script>

<style lang="scss" scoped>
.test_container {
  margin-bottom: 30px;
  height: 580px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  padding-bottom: 80px;
  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>