influence/components/home/dashboard/common/ranMapNeDetailModal.vue

<template>
<!-- 지도형 3Depth 정보 팝업 : S -->
    <v-dialog
      v-model="isModal"
      persistent
      width="62.5rem"
    >  
    <div class="v-common-dialog-wrapper custom-dialog alert">
      <div class="modal-tit">
        <strong>{{neInfo.neName}}</strong>
        <button class="btn-close" @click="fnClose"></button>
      </div>
      
      <div class="v-common-dialog-content pa-0">
        <div class="core--list--component">
          <div class="map--area big--map">
            <!--맵 영역-->
            <div id="ran_detail_map" style="height: 100%;"></div>

          </div>
        </div>
        <!-- NE 상세 정보 : S -->
        <div class="core--list--component mt--0">
          <h2 class="fw--500 mb--125rem">상세 정보</h2>
          <div class="form-style1 col4 shadow--type">
            <table>
              <colgroup>
                <col style="width:9.375rem;">
                <col style="width: calc(50% - 9.375rem);">
                <col style="width:9.375rem;">
                <col style="width: calc(50% - 9.375rem);">
              </colgroup>
              <tbody>
                <tr>
                  <th>테넌트 이름</th>
                  <td>
                    {{neInfo.tenantName}}
                  </td>
                  <th>NE 그룹 이름</th>
                  <td>
                    {{neInfo.neGroup}}
                  </td>
                </tr>
                <tr>
                  <th>NE 유형</th>
                  <td>
                    {{neInfo.neType}}
                  </td>
                  <th>NE 이름</th>
                  <td>
                    {{neInfo.neName}}
                  </td>
                </tr>
                <tr>
                  <th>위치</th>
                  <td colspan="3">
                    {{neInfo.neAddress}}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- NE 상세 정보 : E -->
      </div>

      <div class="btn-wrap nw--btn--wrap" style="padding-top:1.88rem">
        <div></div>
        <div class="inner--btn--wrap">
          <v-btn
            class="custom-btn btn-gray mini"
            @click="fnClose"
          >
            <i class="ico"></i>
            닫기
          </v-btn>          
        </div>
      </div>
    </div>
    </v-dialog>  
    <!-- 지도형 3Depth 정보 팝업 : E -->
</template>

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

  // props
  const props = defineProps({
    neInfo: {
      type: Object,
      default: function () {
        return {
          tenantName: '',
          neName: '',
          neType: '',
          neGroup: '',
          neAddress: '',
          neLocLatitude: '',
          neLocLongitude: ''
        }
      },
    },
    centerPosition: Object
  })
  // 참조가능 데이터 설정
  defineExpose({})
  // 발신 이벤트 선언
  const emit = defineEmits(["closeModal"])
  const i18n = useI18n()
  
  /***********************
  *     data & created
  ************************/
  const isModal = ref(true)
  const map = ref(null)       // 카카오 맵 객체

  const remToPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize)
  const rowHeightRem = 2.5 // 원하는 rem 값
  const rowHeightPx = rowHeightRem * remToPx()
  const gridApi = shallowRef()

  const markers = ref([])
  onMounted(() => {
    fnInit()
  })
  /***********************
  *     Methods
  ************************/
  function fnInit(){
    nextTick().then(() => {
      if (window.kakao && window.kakao.maps) {
        loadMap()
      } else {
        loadScript()
      }
    })
  }
  /**
   * kakao 스크립트 로드
   */
  function loadScript() {
    const script = document.createElement('script')
    script.async = true
    script.onload = () => {
      window.kakao.maps.load(loadMap)
    }
    script.src = `//dapi.kakao.com/v2/maps/sdk.js?autoload=false&libraries=services,clusterer,drawing&appkey=${import.meta.env.VITE_APP_KAKAO_APP_KEY}`
    document.head.appendChild(script)
  }
  /**
   * kakao 지도 로드
   */
  async function loadMap() {
    const mapContainer = document.getElementById('ran_detail_map')
    let mapOption = {
      center: new kakao.maps.LatLng(props.centerPosition.lat, props.centerPosition.lng), // 지도의 중심좌표
      level: 3, // 지도의 확대 레벨
    }
    map.value = new kakao.maps.Map(mapContainer, mapOption)

    let zoomControl = new kakao.maps.ZoomControl()
    // map.value.addControl(zoomControl, kakao.maps.ControlPosition.BOTTOMRIGHT)
    // fnSetEventListener() // 지도 이벤트 등록
    fnDrawMarker()
  }
  /**
   * 상세팝업 닫기
   */
  function fnClose(){
    isModal.value = false
    setTimeout(() => {
      emit('closeModal')
    }, 250);
  }
  /**
   * 마커 생성 데이터 세팅
   */
  function fnDrawMarker(){
    let position = new kakao.maps.LatLng(props.neInfo.neLocLatitude, props.neInfo.neLocLongitude)
    let markerObj = {
      overlay: null,
      markers: null,
      data: props.neInfo,
      click: false,
      position: position
    }

    markers.value.push(markerObj)
    markers.value[0].markers = fnCreateMarker(position, 0)
    map.value.panTo(position)

    setTimeout(() => {
      // 정보 레이어 오픈
      fnGetInfo(markers.value[0].data, 0)
    }, 1);
  }
  import { filename } from 'pathe/utils'
  // 이미지 가져오기 (vite문법)
  const glob = import.meta.glob('~/assets/img/ico_*.{png,svg}', { eager: true })
  const getImages = Object.fromEntries(
    Object.entries(glob).map(([key, value]) => [filename(key), value.default])
  )

  // NE 수 > 이벤트 단계 클래스
  const getNeEventCls = computed(() => {
    return (obj) => {
      let eventCls = ''
      if(!_isEmpty(obj)) {
        if(obj.minCnt > 0) eventCls = 'black'
        if(obj.majCnt > 0) eventCls = 'blue'
        if(obj.criCnt > 0) eventCls = 'red'
      }
      return eventCls
    }
  })
  // 마커 이미지 파일명 세팅
  function fnGetMarkerImage(){
    let color = getNeEventCls.value(props.neInfo)
    if(color == 'red') return 'ico_red_pin'
    else if(color == 'blue') return 'ico_blue_pin'
    else if(color == 'black') return 'ico_black_pin'
    else return 'ico_gray_pin'
  }
  /**
   * 마커 생성
   */
  function fnCreateMarker(position, index) {
    // 마커 이미지 설정
    const markerImageSrc = getImages[fnGetMarkerImage()] // assets 폴더의 이미지 경로
    const markerImageSize = new kakao.maps.Size(40, 40); // 마커 이미지 사이즈
    const markerImage = new kakao.maps.MarkerImage(markerImageSrc, markerImageSize);

    let markerOption = {
      map: map.value,         // 마커를 표시할 지도
      position: position,     // 마커의 위치
      clickable: true,
      image: markerImage,
      zIndex: 1,
    }
    let marker = new kakao.maps.Marker(markerOption)

    // 마커 클릭 이벤트등록
    kakao.maps.event.addListener(marker,'click', fnClickMarker(index))

    return marker
  }
  /**
   * 마커 클릭
   */
  function fnClickMarker(index) {
    const clickData = markers.value[index].data
    const openInfoWindow = function () {
      // 마커 클릭 > 상태변경 > z-index 및 맵 이동
      fnMarkerClickChk(index)
      fnGetInfo(clickData, index)
    }
    return openInfoWindow
  }
  /**
   * 마커 클릭 이벤트
   */
  function fnMarkerClickChk(index) {
    fnSetUnClickMarker()
    markers.value[index].click = true
    markers.value[index].markers.setZIndex(3)

    let moveLatLng = markers.value[index].position   
    map.value.panTo(moveLatLng)
  }
  /**
   * 마커 클릭 상태 해제 및 z인덱스 초기화
   */
  function fnSetUnClickMarker() {
    markers.value.forEach((item) => {
      item.click = false
      item.markers.setZIndex(2)
    })
  }
  function fnGetInfo(data, index){
    // 열려 있던 오버레이 닫기
    fnCloseMarkerInfoOverlay()
    // 오버레이 생성
    markers.value[index].overlay = fnCreateCustomOverlay(data, index)
    // 오버레이 z-index 설정
    markers.value[index].overlay.setZIndex(999)
    // 오버레이 열기
    markers.value[index].overlay.setMap(map.value)
    // 오버레이 이벤트 등록
    fnCustomOverlayAddEventListener()
  }
  /**
   * 커스텀 오버레이 생성
   */
  function fnCreateCustomOverlay(data, index) {
    let cpu = JSON.parse(data.cpu)
    let memory = JSON.parse(data.mem)
    let content = `
      <div class="area--info" style="top: -10.7rem; right: -6rem;">
        <div class="area--info--title">
          <p style="overflow:hidden; text-overflow: ellipsis;">${data.neName}</p>
          <button class="btn-close" id="overlayCloseBtn"></button>
        </div>
        <ul>
          <li><i class="ico green"></i><span>STATUS</span><span class="active">ACTIVE</span></li>
          <li><i class="ico red"></i><span>CPU</span><span class="">${cpu.AVG_CPU_L}%</span></li>
          <li><i class="ico green"></i><span>MEMORY</span><span class="">${memory.AVG_MEM_L}%</span></li>
          <li><i class="ico green"></i><span>DISK</span><span class="">${data.disk}</span></li>
        </ul>
      </div>`

    // 커스텀 오버레이 생성
    let customOverlay = new kakao.maps.CustomOverlay({
      position: markers.value[index].position,
      content: content
    })
    return customOverlay
  }
  /**
   * 커스텀 오버레이 이벤트 등록
   */
  function fnCustomOverlayAddEventListener(){
    // 오버레이 닫기 버튼
    const closeBtn = document.querySelector('#overlayCloseBtn')
    closeBtn.addEventListener('click', fnCloseBtnOverlay)
  }
  /**
   * 마커 정보 오버레이 닫기 버튼
   */
  function fnCloseBtnOverlay() {
    fnCloseMarkerInfoOverlay()
    fnSetUnClickMarker()
  }
  /**
   * 모든 마커 정보 오버레이 닫기
   */
  function fnCloseMarkerInfoOverlay() {
    for (var i = 0; i < markers.value.length; i++) {
      if (markers.value[i].overlay) {
        markers.value[i].overlay.setMap(null)
        markers.value[i].overlay = null
      }
    }
  }
  /*********************
   * grid 관련
   *********************/
  // Grid 데이터 바인딩
  function fnOnGridReady(params){
    gridApi.value = params.api 
  }

  function actionCellRenderer2(params) {
    let _cls = "";
    if(params.data.color == 'red'){
      _cls = 'pin--red';
    } else if(params.data.color == 'blue'){
      _cls = 'pin--blue';
    } else if(params.data.color == 'gray'){
      _cls = 'pin--gray';
    } else if(params.data.color == 'black'){
      _cls = 'pin--black';
    }
    let pin = `<span class="${_cls}">${params.data.neName}</span>`;
    return pin;
  }
  function actionCellRenderer3(params) {
    let _cls0 = "";
    let _cls1 = "";
    let _cls2 = "";
    let _cls3 = "";
    if(params.data.th4[0]){_cls0 = 'evt--critical';}
    if(params.data.th4[1]){_cls1 = 'evt--major';}
    if(params.data.th4[2]){_cls2 = 'evt--minor';}

    let pin = "";
    
    if (_cls0) {
      pin += `<span class="${_cls0}">CRITICAL (${params.data.th4[0]}) </span>`;
    }
    if (_cls1) {
      pin += `<span class="${_cls1}">MAJOR (${params.data.th4[1]}) </span>`;
    }
    if (_cls2) {
      pin += `<span class="${_cls2}">MINOR (${params.data.th4[2]}) </span>`;
    }

    if(pin == ""){
      pin += `<span class="evt--none">-</span>`;
    }

    return pin;
  }
</script>