disinfector_vue/src/views/seal/index.vue

<script lang="ts" setup>
import { getDeviceStatus } from '@/libs/deviceComm'
import { FtMessage } from '@/libs/message'
import { FtMessageBox } from '@/libs/messageBox'
import { useSealStore } from '@/stores/sealStore'
import { useSystemStore } from '@/stores/systemStore'
import { subscribeEvent, syncSendCmd } from 'apis/system'
import homeFinish from 'assets/images/home/home-finish.svg'
import homeStart from 'assets/images/home/home-start.svg'
import SealInstrumentSvg from 'assets/images/seal/seal-instrument.svg'
import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
import DashboardChart from 'components/seal/DashboardChart.vue'
import { startPosityveTimer, stopPosityveTimer } from 'libs/timer'
import { computed, onMounted, ref, watch, watchEffect } from 'vue'

defineOptions({
  name: 'seal',
})
const sealStore = useSealStore()
const systemStore = useSystemStore()
const sealInfo = ref(sealStore.sealInfo)
const inputValue = ref('')
const keyboardVisible = ref(false)
const keyboardType = ref<'text' | 'number'>('number')
const softKeyboardRef = ref()
const inflationTime = ref()
const sealRemainTimeS = ref<string>()
const currentPressure = ref(sealStore.sealInfo.pressure)
const realTimePressure = ref(sealStore.sealInfo.pressure)
const loading = ref(false)

onMounted(() => {
  // initData()
  systemStore.subscribeSealEvent()
  subscribeSealState()
})

const getFirstPressure = () => {
  // 当前气压是开始测试后，状态变为leakTesting后，6秒后获取的压力值为初始值。 由赵贺确认
  if (sealInfo.value.workState === 'leakTesting' && !currentPressure.value) {
    setTimeout(() => {
      currentPressure.value = realTimePressure.value
    }, 6000)
  }
}

watchEffect(() => {
  sealInfo.value = sealStore.sealInfo
  realTimePressure.value = sealStore.sealInfo.pressure
  getFirstPressure()
})

watch(inputValue, (newVal: string | number) => {
  if (Number(newVal) < 1000) {
    inflationTime.value = newVal
  }
  // else {
  //   inputValue.value = inflationTime.value
  // }
})

const subscribeSealState = () => {
  // 订阅测试状态
  subscribeEvent('stateUpdate', (data: Socket.WebSocketResponse<Seal.SealStateItem>) => {
    if (data.fromClass === 'AirLeakDetectTest') {
      // 更新测试状态
      sealStore.updateSealInfo(data.rely)
    }
  })
}

const stopText = computed(() => {
  return sealInfo.value.workState === 'stopping' ? '停止中...' : '停止测试'
})

const openKeyboard = () => {
  keyboardVisible.value = true
}

// const pressure = ref()
const onStartTest = () => {
  if (!inflationTime.value) {
    FtMessage.warning('请输入测试时间')
    return
  }
  const statusName = getDeviceStatus()
  if (statusName) {
    FtMessageBox.error(statusName)
    return
  }
  const params = {
    className: 'AirLeakDetectTest',
    fnName: 'start',
    params: {
      inflationTimeMs: Number(inflationTime.value * 1000), // 转换为ms
    },
  }
  loading.value = true
  syncSendCmd(params).then((res) => {
    loading.value = false
    if (res.ackcode === 0) {
      FtMessage.success('开始执行密封测试')
      // 开始计时
      startPosityveTimer((time) => {
        sealRemainTimeS.value = time
      })
    }
    else {
      FtMessage.error('指令发送失败，请稍候再试')
    }
  }).catch(() => {
    loading.value = false
    FtMessage.error('指令发送失败，请稍候再试')
  })
}
const onFinishTest = () => {
  const stopParams = {
    className: 'AirLeakDetectTest',
    fnName: 'stop',
    params: {},
  }
  // 停止倒计时
  stopPosityveTimer()
  loading.value = true
  syncSendCmd(stopParams).then((res) => {
    if (res.ackcode === 0) {
      FtMessage.success('测试已停止')
    }
    loading.value = false
  }).finally(() => {
    loading.value = false
  })
}

const handleConfirm = (value: string) => {
  console.log('确认输入:', value)
}

const stopDisabled = computed(() => {
  return sealInfo.value.workState === 'stopping' || sealInfo.value.workState === 'idle'
})
</script>

<template>
  <div v-loading="loading" class="dashboard-container">
    <main class="main-content">
      <div class="seal-left">
        <!-- 仪表盘 -->
        <div class="seal-chart">
          <div class="chart-ml">
            <DashboardChart />
          </div>
          <div class="seal-opt">
            <div class="seal-status">
              <div class="seal-time-text">
                测试时间：
              </div>
              <div v-if="sealInfo.workState === 'idle'" class="seal-time-statue seal-time-text">
                未开始
              </div>
              <div v-else class="seal-test-time">
                {{ sealRemainTimeS }}
              </div>
            </div>
            <div class="seal-status">
              <div class="seal-diff-text">
                实时值：
              </div>
              <div v-if="sealInfo.workState === 'idle'" class="seal-diff-statue seal-diff-text">
                未开始
              </div>
              <div v-else class="seal-test-time">
                {{ realTimePressure }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="seal-right">
        <div class="left-title">
          <div class="title-text-test">
            <img :src="SealInstrumentSvg" alt="仪表盘">
            <div class="title-text">
              测试前气压
            </div>
            <div class="title-text title-text-kpa">
              <span>{{ currentPressure }}</span>
              <span class="title-kpa-pl">Kp</span>
            </div>
          </div>
        </div>
        <div class="seal-right-btn">
          <div class="seal-input">
            <div class="inflation-time">
              打压时间：
            </div>
            <el-input
              v-model="inflationTime"
              v-prevent-keyboard
              class="input"
              name="inflation"
              placeholder="请输入"
              style="height: 4rem"
              @focus="openKeyboard"
            >
              <template #append>
                <bt-button
                  type="primary"
                  button-text="秒"
                  border-radius="0"
                  bg-color="#2892F3"
                  text-color="#ffffff"
                  height="4rem"
                  text-size="24px"
                  min-height="4rem"
                />
              </template>
            </el-input>
          </div>
          <div>
            <div class="seal-add-btn">
              <bt-button
                button-text="启动测试"
                bg-color="#31CB7A"
                text-color="#FFFFFF"
                width="27vw"
                height="7vh"
                text-size="24px"
                border-radius="12px"
                :disabled="sealInfo.workState !== 'idle'"
                min-height="4rem"
                @click="onStartTest"
              >
                <template #icon>
                  <img :src="homeStart" alt="">
                </template>
              </bt-button>
            </div>
            <div class="seal-add-btn">
              <bt-button
                :button-text="stopText"
                bg-color="#FF6767"
                text-color="#FFFFFF"
                width="27vw"
                height="7vh"
                text-size="24px"
                border-radius="12px"
                :disabled="stopDisabled"
                min-height="4rem"
                @click="onFinishTest"
              >
                <template #icon>
                  <img :src="homeFinish" alt="">
                </template>
              </bt-button>
            </div>
          </div>
        </div>
      </div>
    </main>
    <SoftKeyboard
      ref="softKeyboardRef"
      v-model="inputValue"
      :is-visible="keyboardVisible"
      :keyboard-type="keyboardType"
      @update-keyboard-visible="(visible: boolean) => keyboardVisible = visible"
      @confirm="handleConfirm"
      @close="keyboardVisible = false"
    />
  </div>
</template>

<style lang="scss" scoped>
.main-content{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  height: $main-container-height;
  gap: 10px;
  .seal-left{
    background: #FFFFFF;
    grid-column:  1 / 3;
    box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
    background: $gradient-color;
    .seal-chart{
    }
    .chart-ml{
      margin: 2rem;
      height: 32rem;
    }
  }
}
.seal-opt{
  display: flex;
  gap: 2rem;
  margin-left: 9rem;
  margin-top: -2rem;
  .seal-status{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F6FAFE;
    width: 16rem;
    height: 5rem;
    border-radius: 15px;
  }
  .seal-time-text{
    font-size: 1.5rem;
    font-weight: 500;
    padding-left: 0.5rem;
  }
  .seal-test-time{
    font-size: 24px;
    color: #2892F3;
  }
  .seal-time-statue{
    height: 3rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
  }
  .seal-diff-text{
    font-size: 1.5rem;
    font-weight: 500;
    padding-left: 0.5rem;
  }
  .seal-diff-statue{
    height: 3rem;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
  }
}

.seal-right{
  background: $gradient-color;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  .left-title{
    padding-top: 3.5vw;
    padding-left: 2.5vw;
    display: flex;
    height: 25vh;
    .title-text-test{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      .title-text{
        font-size: 20px;
      }
      .title-text-kpa{
        color: #409EFF;
      }
      .title-kpa-pl{
        padding-left: 5px;
        font-weight: bold;
      }
    }
  }
  .seal-right-btn{
    height: 30vh;
    grid-row: 2 / 4;
    margin-top: -4rem;
    .seal-input{
      padding-left: 2rem;
      height: 8rem;
      font-size: 2.143vw;
      font-weight: 400;
      .inflation-time{
        height: 4rem;
      }
      .seal-diff-text{
        height: 4rem;
      }
      .input{
        width: 25vw;
      }
    }
    .seal-add-btn{
      width: 25vw;
      height: 8vh;
      border-radius: 12px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      gap: 10px;
      margin: 2rem;
    }
  }
}
</style>