pipeline_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="addLiquidVal"
          :clickable="true"
          :formatter="formatter6"
          readonly
          @click.stop="hideAllKeyboards(1)"
          class="add_liquid_input"
        />
        <p>g/min</p>
      </div>
      <div class="btn_wrap">
        <div
          :class="
            settingStore.chargingPumpRPM > 0
              ? 'open success style-btn mg'
              : 'open style-btn mg'
          "
          @click="setAddLiquidConfig(1)"
        >
          正转
        </div>
        <div
          :class="
            settingStore.chargingPumpRPM < 0
              ? 'open success style-btn'
              : 'open style-btn'
          "
          @click="setAddLiquidConfig(5)"
        >
          反转
        </div>
      </div>
      <div class="btn_wrap">
        <div class="open style-btn mg" @click="setAddLiquidConfig(1)">打开</div>
        <div class="open style-btn" @click="setAddLiquidConfig(3)">关闭</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>g/min</p>
      </div>
      <div class="btn_wrap">
        <div
          :class="
            settingStore.sprinklerPumpRPM > 0
              ? 'open success style-btn mg'
              : 'open style-btn mg'
          "
          @click="setAddLiquidConfig(2)"
        >
          正转
        </div>
        <div
          :class="
            settingStore.sprinklerPumpRPM < 0
              ? 'open success style-btn'
              : 'open style-btn'
          "
          @click="setAddLiquidConfig(6)"
        >
          反转
        </div>
      </div>
      <div class="btn_wrap">
        <div class="open style-btn mg" @click="setAddLiquidConfig(2)">打开</div>
        <div class="open style-btn" @click="setAddLiquidConfig(4)">关闭</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 ? 'open style-btn mg' : 'close style-btn mg'
          "
          @click="changeAirStatus(1)"
        >
          打开
        </div>
        <div
          :class="
            !testStore.airCompressor ? 'open style-btn' : 'close 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 ? 'open style-btn mg' : 'close style-btn mg'
          "
          @click="changeDraughtStatus(1)"
        >
          打开
        </div>
        <div
          :class="!testStore.draughtFan ? 'open style-btn ' : 'close 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 ? 'open style-btn mg' : 'close style-btn mg'
          "
          @click="changeHeatingStatus(1)"
        >
          打开
        </div>
        <div
          :class="
            !testStore.heatingStrip ? 'open style-btn' : 'close 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" style="opacity: 0">
        更新读取水浸状态
      </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" style="opacity: 0">
        更新读取水浸状态
      </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" style="opacity: 0">
        更新读取液位状态
      </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"
      @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="addLiquidVal2"
      :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 { ref } from 'vue'
import {
  useTestStore,
  useDeviceStore,
  useWebSocketStore,
  useSettingStore,
} from '@/store'
import {
  someAirSwitchJSON,
  liquidpumpctrlJSON,
  getStateJSON,
  addLiquidCtrlJSON,
  test_replenishingFluidsPumpCtrJSON,
  sprayLiquidPump_open_for_testJSON,
} from '@/mock/command'
import { showSuccessToast, showFailToast } from 'vant'
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) > 40) {
      return '40'
    }
    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) > 40) {
      return '40'
    }
    if (parseInt(value) < arr[0].val_lower_limit) {
      return arr[0].val_lower_limit + ''
    }
  }
  return 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(() => {
        addLiquidVal2.value = value + ''
      })
    }
    if (index == 4) {
      setTimeout(() => {
        addLiquidPower2.value = value + ''
      })
    }
    isFirstClick.value = false
  }
}

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

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: 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: 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 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: #d8d8d8;
      }
    }
  }
  .update_wrap {
    padding: 0 17px 0 17px;
    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 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: 14px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: #06518b;
    }
  }
}
</style>