pipeline_disinfection_front_end/src/components/dialogs/LeaveModal.vue

<template>
  <div class="leave_modal">
    <div class="modal_content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="69"
        height="69"
        viewBox="0 0 69 69"
      >
        <g>
          <path
            d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
            fill="#FA1C1C"
            fill-opacity="1"
          />
        </g>
      </svg>
      <div class="tips">
        <span class="red">正在测试气压中，离开将会停止测试</span>
        <p class="red2">确定离开吗？</p>
      </div>
      <div class="btns">
        <div class="ok style-btn" @click="handleStart">确定</div>
        <div class="cancel style-btn" @click="handleCancel">取消</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useSealStore, useWebSocketStore } from '@/store'

const sealStore = useSealStore()
const websocketStore = useWebSocketStore()

const props = defineProps({
  hiddenLeaveModal: {
    type: Function,
  },
  clickType: {
    type: Number,
  },
  handleLogoutReal: {
    type: Function,
  },
  changeTabReal: {
    type: Function,
  },
})

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

const handleStart = () => {
  // 结束当前测试
  sealStore.updateIsStartTest(false)
  // 需要执行原先点击该按钮的逻辑
  props.hiddenLeaveModal()
  if (props.clickType != -1) {
    if (props.clickType == -2) {
      props.handleLogoutReal()
    } else {
      props.changeTabReal(props.clickType)
    }
  }
}
</script>

<style lang="scss" scoped>
.leave_modal {
  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;
      display: flex;
      flex-direction: column;
      align-items: center;
      .red {
        color: #fa1c1c;
      }
      .red2 {
        color: #fa1c1c;
        margin-top: 6px;
      }
    }
    .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>