anKeYuan-largeScreen-9600/src/components/alarmWindow/index.vue

<template>
  <div class="alarm-overlay">
    <Alarm
      v-if="pageType == 1"
      :data="alarmData"
      @close="$emit('close')"
    />
    <emergency
      v-if="pageType == 2"
      :data="alarmData"
      @close="$emit('close')"
    />
  </div>
</template>

<script>
import Alarm from './alarm.vue'
import emergency from './emergency.vue'

export default {
  name: 'AlarmWindow',
  components: { Alarm,emergency },
  props: {
    alarmData: {
      type: Object,
      default: () => ({})
    }
  },
  data(){
    return{
      pageType:2,
    }
  },
  methods: {
    emergencyButton(val){
      this.$set(this,'pageType',val);
    },
  }
}
</script>

<style lang="scss" scoped>
.alarm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
</style>