influence/components/common/footer/eventDetailView.vue

<template>
  <v-dialog v-model="props.isEventDetailModal" persistent width="62.5rem">
    <div class="v-common-dialog-wrapper custom-dialog">
      <div class="modal-tit">
        <strong>이벤트 이력 상세 정보</strong>
        <button class="btn-close" @click="fnEventDetailClose()"></button>
      </div>
      <div class="v-common-dialog-content">
        <div class="form-style1 col4 shadow--type">
          <table>
            <colgroup>
              <col style="width:8.75rem;">
              <col style="calc(50% - 8.75rem);">
              <col style="width:8.75rem;">
              <col style="calc(50% - 8.75rem);">
            </colgroup>
            <tbody>
              <tr>
                <th>번호</th>
                <td>{{ props.eventDetailData.no }}</td>
                <th>이벤트 유형</th>
                <td>{{ props.eventDetailData.eventType }}</td>
              </tr>
              <tr>
                <th>이벤트 코드</th>
                <td>{{ props.eventDetailData.eventCode }}</td>
                <th>심각도</th>
                <td class="critical">{{ props.eventDetailData.severity }}</td>
              </tr>
              <tr>
                <th>알람 그룹</th>
                <td>{{ props.eventDetailData.alarmGroup }}</td>
                <th>위치</th>
                <td>{{ props.eventDetailData.location }}</td>
              </tr>
              <tr>
                <th>테넌트 이름</th>
                <td>{{ props.eventDetailData.tenantName }}</td>
                <th>수집 시스템</th>
                <td>{{ props.eventDetailData.emsName }}</td>
              </tr>
              <tr>
                <th>NE 그룹 이름</th>
                <td>{{ props.eventDetailData.neGroup }}</td>
                <th>NE 이름</th>
                <td>{{ props.eventDetailData.neName }}</td>
              </tr>
              <tr>
                <th>발생 원인</th>
                <td colspan="3">{{ props.eventDetailData.probcause }}</td>
              </tr>
              <tr>
                <th>추가 정보</th>
                <td colspan="3">{{ props.eventDetailData.additionalText }}</td>
              </tr>
              <tr>
                <th>발생 시간</th>
                <td>{{ props.eventDetailData.alarmTime }}</td>
                <th>상태</th>
                <td>{{ props.eventDetailData.alarmState }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="form-style1 col4 shadow--type mt--125rem" v-if="props.currentAlarmYn">
          <table>
            <colgroup>
              <col style="width:8.75rem;">
              <col style="calc(50% - 8.75rem);">
              <col style="width:8.75rem;">
              <col style="calc(50% - 8.75rem);">
            </colgroup>
            <tbody>
              <tr>
                <th>인지 시간</th>
                <td>{{ props.eventDetailData.ackTime }}</td>
                <th>인지 사용자</th>
                <td>{{ props.eventDetailData.ackUser }}</td>
              </tr>
              <tr>
                <th>인지 시스템</th>
                <td colspan="3">{{ props.eventDetailData.ackSystem }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="form-style1 col4 shadow--type mt--125rem" v-if="props.currentAlarmYn">
          <table>
            <colgroup>
              <col style="width:8.75rem;">
              <col style="calc(50% - 8.75rem);">
              <col style="width:8.75rem;">
              <col style="calc(50% - 8.75rem);">
            </colgroup>
            <tbody>
              <tr>
                <th>해제 시간</th>
                <td>{{ props.eventDetailData.clearTime }}</td>
                <th>해제 사용자</th>
                <td>{{ props.eventDetailData.clearUser }}</td>
              </tr>
              <tr>
                <th>해제 시스템</th>
                <td colspan="3">{{ props.eventDetailData.clearSystem }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="form-style1 col4 shadow--type mt--125rem" v-if="!props.currentAlarmYn">
          <table>
            <colgroup>
              <col style="width:8.75rem;">
              <col style="calc(50% - 8.75rem);">
              <col style="width:8.75rem;">
              <col style="calc(50% - 8.75rem);">
            </colgroup>
            <tbody>
              <tr>
                <th>인지/해제 사용자</th>
                <td>{{ props.eventDetailData.modifyUser }}</td>
                <th>인지/해제 시스템</th>
                <td>{{ props.eventDetailData.modifySystem }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="btn-wrap">
        <v-btn class="custom-btn btn-blue mini" @click="fnEventDetailClose()"><i class="ico"></i>확인</v-btn></div>
    </div>
  </v-dialog>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
  /***********************
   *     import
   ************************/
    /***********************
   *     plugins inject
   ************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp()

  // props
  const props = defineProps({
    isEventDetailModal: Boolean,
    eventDetailData: Object,
    currentAlarmYn: Boolean //true:currentAlarm활성화
  })

  // 참조가능 데이터 설정
  defineExpose({
    fnInit
  })
  
  const emit = defineEmits(['closeModal'])
  const i18n = useI18n()
  const detailData = ref({})

  function fnInit(){
    // 데이터 초기화
  }

  function fnEventDetailClose() {
    emit('closeModal')
  }

</script>