influence/components/home/dashboard/common/ranMapGroupDetailModal.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>{{neGroupInfo.neGroup}}</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 class="area--info" style="top: 0.94rem; right: 0.94rem; z-index:10;">
              <div class="area--info--title">
                <p>NE001</p>
                <button class="btn-close"></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="">60.00%</span></li>
                <li><i class="ico green"></i><span>MEMORY</span><span class="">80%</span></li>
                <li><i class="ico green"></i><span>DISK</span><span class="">20%</span></li>
              </ul>
            </div> -->
            <!--맵 영역-->
            <div id="ran_detail_map" style="height: 100%;"></div>

          </div>
        </div>
        <!-- NE 목록 grid : S -->
        <div class="core--list--component--grid mt--0" >
          <div class="title">
            <h2>
              NE 목록 <span>({{getNeGroup.length}}건)</span>
            </h2>
          </div>
          <div class="tbl-wrapper">
            <div class="tbl-wrap">
              <!-- ag grid -->
              <ag-grid-vue
                style="width:100%; height:22vh;"
                class="ag-theme-quartz"
                :gridOptions="gridOptions"                                                                  
                @grid-ready="fnOnGridReady"
              >        
              </ag-grid-vue>

            </div>
          </div>
        </div>
        <!-- NE 목록 grid : 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 "ag-grid-community/styles/ag-grid.css";
  import "ag-grid-community/styles/ag-theme-quartz.css";
  import { AgGridVue } from "ag-grid-vue3";
  import { useI18n } from "vue-i18n";
  import useUtil from "@/composables/useUtil";
  /***********************
   *     plugins inject
   ************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp()

  // props
  const props = defineProps({
    neGroupInfo: Object,
    centerPosition: Object
  })
  // 참조가능 데이터 설정
  defineExpose({})
  // 발신 이벤트 선언
  const emit = defineEmits(["closeModal"])
  const i18n = useI18n()
  
  /***********************
  *     data & created
  ************************/
  const isModal = ref(true)
  const map = ref(null)       // 카카오 맵 객체
  const marker = ref(null)    // 카카오맵 마커(핀) 객체

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

  const getNeGroup = computed(() => {
    let dataObj = _cloneDeep(props.neGroupInfo)
    let result = []
    dataObj.neList.forEach((ne, idx) => {
      let tempObj = ne
      tempObj.no = idx+1,
      tempObj.color = getNeEventCls.value(ne),
      tempObj.eventStatus= [ne.criCnt, ne.majCnt, ne.minCnt],
      result.push(tempObj)
    })
    return result
  })
  // NE 그룹 수 > 이벤트 단계 클래스
  const getNeEventCls = computed(() => {
    return (obj) => {
      let eventCls = 'gray'
      if(!_isEmpty(obj)) {
        if(obj.minCnt > 0) eventCls = 'black'
        if(obj.majCnt > 0) eventCls = 'blue'
        if(obj.criCnt > 0) eventCls = 'red'
      }
      return eventCls
    }
  })
  const gridOptions = {
    defaultColDef: {
      lockVisible: true,
    },
    columnDefs: [
      { 
        headerName: 'No',
        field: 'no',
        width: 50
      },
      { 
        headerName: 'NE 이름', 
        field: 'neName',
        cellRenderer: actionCellRenderer2,
      },
      { 
        headerName: '테넌트', 
        field: 'tenantName', 
      },
      { 
        headerName: '이벤트', 
        field: 'eventStatus', 
        cellRenderer: actionCellRenderer3,
        width: 250,
      }
    ],
    rowData: getNeGroup.value,      // 테이블 데이터
    autoSizeStrategy: {
      type: "fitGridWidth", //fitCellContents
    },
    headerHeight : rowHeightPx,
    rowHeight: rowHeightPx,
    pagination: true,
    suppressPaginationPanel: true,    // 하단 default 페이징 컨트롤 숨김
    suppressRowClickSelection: true,  // 행 클릭 체크박스 무시
    localeText: {
      noRowsToShow: i18n.t('common.noData')
    },
  }
  const markers = ref([])
  onMounted(() => {
    fnInit()
  })
  /***********************
  *     Methods
  ************************/
  /**
  * RAN NE 그룹 상세 팝업
  */
  function fnGetNeGroupDetailInfo(){
    useAxios().post('/dashboard/geoNeGroupInfo/list.do').then((res) => {
      $log.debug("[dashboard][fnGetNeGroupDetailInfo][success]")
    }).catch((error)=>{
      $log.debug("[dashboard][fnGetNeGroupDetailInfo][error]")
      useErrorHandler().fnSetCommErrorHandle(error, fnGetNeGroupDetailInfo)
    }).finally(()=>{
      $log.debug("[dashboard][fnGetNeGroupDetailInfo][finished]")
    })
  }
  /**
   * 초기 실행
   */
  function fnInit(){
    fnGetNeGroupDetailInfo()
    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 fnGetNeList(){
    //
  }
  /**
   * 마커 생성 데이터 세팅
   */
  function fnDrawMarker(){
    getNeGroup.value.map((item, index) => {
      let position = new kakao.maps.LatLng(item.neLocLatitude, item.neLocLongitude)
      let markerObj = {
        overlay: null,
        markers: null,
        data: item,
        click: false,
        position: position
      }

      markers.value.push(markerObj)
      markers.value[index].markers = fnCreateMarker(position, index)
      if(index == 0) {
        map.value.panTo(position)
      }
    })
  }
  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])
  )
  function fnGetMarkerImage(index){
    let color = getNeGroup.value[index].color
    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(index)] // 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.eventStatus[0]){_cls0 = 'evt--critical';}
    if(params.data.eventStatus[1]){_cls1 = 'evt--major';}
    if(params.data.eventStatus[2]){_cls2 = 'evt--minor';}

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

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

    return pin;
  }
</script>