sanitizing-machine-new/src/components/info/AirSwitchConfig.vue

<template>
  <div class="air_switch_config_container">
    <div class="header">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="28"
        height="28"
        viewBox="0 0 28 28"
      >
        <g>
          <path
            d="M14,0C6.26801,0,0,6.26802,0,14C0,21.732,6.26801,28,14,28C21.732,28,28,21.732,28,14C28,6.26802,21.732,0,14,0ZM9.10859,20.4807C9.097,21.0081,8.66847,21.431,8.14073,21.4356C7.6131,21.4405,7.17713,21.0253,7.15599,20.4979L7.15599,14.4761C7.15421,13.9358,7.59264,13.4974,8.1329,13.4992C8.39231,13.4979,8.64147,13.6004,8.8248,13.784C9.00814,13.9674,9.11035,14.2167,9.10859,14.4761L9.10859,20.4807ZM9.11277,16.4831L10.5775,16.4831L10.5775,13.9308C10.5771,12.598,11.3513,11.3866,12.5608,10.827C12.5414,10.7319,12.5318,10.635,12.5322,10.5379L12.5322,9.02199L8.39528,9.02199C8.06546,9.02229,7.74915,8.89097,7.51653,8.65716C7.2839,8.42333,7.15414,8.10636,7.15602,7.77653C7.15499,7.44753,7.2848,7.13161,7.51685,6.89839C7.74891,6.66514,8.06422,6.53379,8.39324,6.53331L19.6047,6.53331C19.935,6.53331,20.2516,6.66514,20.4843,6.89948C20.717,7.13381,20.8465,7.45138,20.844,7.78166C20.8444,8.46656,20.2895,9.02198,19.6047,9.02198L15.4668,9.02198L15.4668,10.5421C15.467,10.639,15.4581,10.7358,15.4401,10.831C16.6497,11.3886,17.4242,12.5989,17.4235,13.9308L17.4235,16.4831L18.8842,16.4831L18.8842,14.4761C18.8842,13.9363,19.3218,13.4987,19.8614,13.4987C20.4013,13.4987,20.8389,13.9363,20.8389,14.4761L20.8389,20.4847C20.8414,21.0244,20.4058,21.4641,19.8661,21.4667C19.3263,21.4691,18.8867,21.0336,18.8842,20.4939L18.8842,18.9728L18.8893,18.9728L18.8893,16.4831L18.8842,16.4831L18.8842,18.9697L17.2923,18.9697C16.8744,20.4411,15.5307,21.4564,14.001,21.4564C12.4714,21.4564,11.1276,20.441,10.7096,18.9697L9.11274,18.9697"
            fill="#FFFFFF"
            fill-opacity="1"
          />
        </g>
      </svg>
      <p class="title">选择空气阀配置</p>
    </div>
    <div class="opers_box">
      <div class="left_container">
        <div
          :class="activeTab == '1' ? 'tab mb active' : 'tab mb'"
          @click="changeTab('1')"
        >
          <p class="text">上管道</p>
          <div class="percent">{{ topText }}</div>
          <img :src="activeTab == 1 ? A2 : A1" class="icon" alt="" />
        </div>
        <div
          :class="activeTab == '2' ? 'tab active' : 'tab'"
          @click="changeTab('2')"
        >
          <p class="text">下管道</p>
          <div class="percent">{{ bottomText }}</div>
          <img :src="activeTab == 2 ? A2 : A1" class="icon" alt="" />
        </div>
      </div>
      <div class="right_container">
        <van-picker
          v-if="activeTab == 1"
          :columns="columns"
          :show-toolbar="false"
          visible-option-num="3"
          option-height="42"
          v-model="selectedValuesTop"
          @change="topChange"
        />
        <van-picker
          v-if="activeTab == 2"
          :columns="columns"
          :show-toolbar="false"
          visible-option-num="3"
          option-height="42"
          @change="bottomChange"
          v-model="selectedValuesBottom"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import A1 from '@/assets/img/air/1.png'
import A2 from '@/assets/img/air/2.png'
import { useSealStore, useWebSocketStore } from '@/store'
import {
  AirInletProportionalValve_setStateJSON,
  AirOutletProportionalValve_setStateJSON,
  airInletProportionalValve_getStateJSON,
  AirOutletProportionalValve_getStateJSON,
} from '@/mock/command'
import { ref, onMounted, watch } from 'vue'

const activeTab = ref('1')
const sealStore = useSealStore()
const webSocketStore = useWebSocketStore()

const changeTab = tab => {
  activeTab.value = tab
}
const topText = ref('0%')
const bottomText = ref('0%')
const topChange = ({ selectedOptions, selectedValues }) => {
  topText.value = selectedOptions[0].text
  webSocketStore.sendCommandMsg(
    AirInletProportionalValve_setStateJSON([parseInt(selectedValues[0])]),
  )
  sealStore.updateAirInletProportionalValue(parseInt(selectedValues[0]))
}
const bottomChange = ({ selectedOptions, selectedValues }) => {
  bottomText.value = selectedOptions[0].text
  webSocketStore.sendCommandMsg(
    AirOutletProportionalValve_setStateJSON([parseInt(selectedValues[0])]),
  )
  sealStore.updateAirOutletProportionalValue(parseInt(selectedValues[0]))
}

const columns = ref([
  { text: '0%', value: '0' },
  { text: '10%', value: '10' },
  { text: '20%', value: '20' },
  { text: '30%', value: '30' },
  { text: '40%', value: '40' },
  { text: '50%', value: '50' },
  { text: '60%', value: '60' },
  { text: '70%', value: '70' },
  { text: '80%', value: '80' },
  { text: '90%', value: '90' },
  { text: '100%', value: '100' },
])

const selectedValuesTop = ref(['0'])
const selectedValuesBottom = ref(['0'])

onMounted(() => {
  setTimeout(() => {
    webSocketStore.sendCommandMsg(airInletProportionalValve_getStateJSON)
    webSocketStore.sendCommandMsg(AirOutletProportionalValve_getStateJSON)
  }, 1000)
})

watch(
  () => sealStore.airInletProportionalInitVal,
  (newVal, oldVal) => {
    console.log('airInletProportionalInitVal', newVal)
    selectedValuesTop.value = [newVal + '']
    topText.value = `${newVal}%`
  },
)

watch(
  () => sealStore.airOutletProportionalInitVal,
  (newVal, oldVal) => {
    console.log('airOutletProportionalInitVal', newVal)
    selectedValuesBottom.value = [newVal + '']
    bottomText.value = `${newVal}%`
  },
)
</script>

<style lang="scss" scoped>
.air_switch_config_container {
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .title {
      margin-left: 8px;
      font-family: 思源黑体;
      font-size: 24px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0.06em;
      color: #ffffff;
    }
  }
  .opers_box {
    display: flex;
    align-items: center;
    height: 151px;
    justify-content: space-between;
    .left_container {
      width: 337px;
      height: 151px;
      .tab {
        width: 337px;
        height: 68px;
        border-radius: 6px;
        background: #1f6397;
        box-sizing: border-box;
        padding-left: 25px;
        padding-right: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .text {
          font-family: 思源黑体;
          font-size: 16px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0.06em;
          color: #ffffff;
        }
        .percent {
          width: 69px;
          height: 36px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: Source Han Sans;
          font-size: 20px;
          font-weight: bold;
          line-height: normal;
          letter-spacing: 0.06em;
          font-feature-settings: 'kern' on;
          color: #ffffff;
        }
        .icon {
          width: 22px;
          height: 22px;
        }
      }
      .active {
        .percent {
          background: #06518b;
        }
      }
      .mb {
        margin-bottom: 15px;
      }
    }
    .right_container {
      width: 339px;
      height: 146px;
      border-radius: 6px;
      box-sizing: border-box;
      background: #fff;
      overflow: hidden;
    }
  }
}
</style>