little_disinfection_high_front_end/src/components/dialogs/DisinfectModal.vue

<template>
  <my-modal type="confirm" icon="warning"
    v-model:visible="visible"
    @ok="handleStart"
    @cancel="handleCancel"
  >
    <p class="tips"><span class="red">消毒正在进行中，是否终止消毒！</span></p>
  </my-modal>
</template>

<script setup>
import { stopDisinfectionJSON } from '@/mock/command'
import { useOperatorStore, useWebSocketStore } from '@/store'
import { ref } from 'vue'

const props = defineProps({
  hideDisinfectModal: {
    type: Function,
  },
})

const visible = ref(true)



const operatorStore = useOperatorStore()
const webSocketStore = useWebSocketStore()

const handleCancel = () => {
  props.hideDisinfectModal()
}

const handleStart = () => {
  if ([1, 2, 3, 4].includes(operatorStore.disinfectStatus)) {
    operatorStore.updateStopReady(true)
    // 十秒以后隐藏遮罩
    setTimeout(() => {
      operatorStore.updateStopReady(false)
    }, 10000)
    webSocketStore.sendCommandMsg(stopDisinfectionJSON)
    props.hideDisinfectModal()
  }
}
</script>

<style lang="scss" scoped>
.tips {
  margin-top: 33px;
  margin-bottom: 50px;
  font-family: Source Han Sans CN;
  font-size: 21px;
  font-weight: normal;
  letter-spacing: 0.04em;
  color: #000000;
  .red {
    color: #fa1c1c;
  }
}






.disinfect_modal_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .modal_content {
    width: 476px;
    height: 350px;
    border-radius: 16px;
    background: #ffffff;
    padding: 52px 37px 55px 37px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .tips {
      margin-top: 33px;
      margin-bottom: 50px;
      font-family: Source Han Sans CN;
      font-size: 21px;
      font-weight: normal;
      letter-spacing: 0.04em;
      color: #000000;
      .red {
        color: #fa1c1c;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 362px;
      .cancel {
        width: 173px;
        height: 68px;
        border-radius: 34px;
        background: #06518b;
        font-family: Source Han Sans CN;
        font-size: 23px;
        font-weight: 350;
        letter-spacing: 0em;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ok {
        width: 173px;
        height: 68px;
        border-radius: 34px;
        background: #1f6397;
        font-family: Source Han Sans CN;
        font-size: 23px;
        font-weight: 350;
        letter-spacing: 0em;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>