+@media all and (max-width: px) {

+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

+    align-items: center;

+    flex: 0 0 10%;

+    height: 30px;

+  /* .toggle {

+  } */

+  /* .toggle {

+  } */

+/* 

+  } */

+              <img style="height:100px;" :src="'http://localhost:8080/download/'+WTRMS_CAM1.file_path+'/'+WTRMS_CAM1.file_name">

+              <img style="height:100px;" :src="'http://localhost:8080/download/'+WTRMS_CAM2.file_path+'/'+WTRMS_CAM2.file_name">

+              <img style="height:100px;" :src="'http://localhost:8080/download/'+SIGNL_EXTN_CAM1.file_path+'/'+SIGNL_EXTN_CAM1.file_name">

+              <img style="height:100px;" :src="'http://localhost:8080/download/'+SIGNL_EXTN_CAM2.file_path+'/'+SIGNL_EXTN_CAM2.file_name">

+              <img style="height:100px;" :src="'http://localhost:8080/download/'+RITTRN_VHCLE_CAM.file_path+'/'+RITTRN_VHCLE_CAM.file_name">

+<template>

+  <button @click="toggleSlide" class="toggle">{{ slideText }}</button>

+  <div class="grid2_8">

+    <div :class="['slide-content left', { active: showSlide }]">

+      <div class="wrap flex-between">

+        <div class="search">

+          <div class="search-mobile">

+            <h2>조건검색</h2>

+            <div class="box grid gap05 bg-gray">

+              <div class="titleBar">

+                <h3>지역설정</h3>

+                <hr />

+              </div>

+              <DongSelectList @setDongCd="setDongCd" :crslk_azHiddenCk="true" :open_layers="this.$refs.open_layers"

+                @siDoGunGuSelectF="dongSelectF" @dongSelectF="dongSelectF" @nodeSelectF="dongSelectF" ref="dongSelecter">

+              </DongSelectList>

+            </div>

+            <div class="box">

+              <div class="titleBar">

+                <h3>조건 설정</h3>

+                <hr />

+              </div>

+

+              <div class="flex-between m-b">

+                <input class="m-r cbox_1" type="checkbox" v-model="condition['wtrms']" /><label for="">무단횡단</label>

+                <input class="m-r cbox_1" type="checkbox" v-model="condition['signExtn']" /><label for="">신호연장</label>

+                <input class="m-r cbox_1" type="checkbox" v-model="condition['rittrnVhcle']" /><label for="">신호위반</label>

+                <input class="m-r cbox_1" type="checkbox" v-model="condition['eqpmnTrobl']" /><label for="">장애발생</label>

+              </div>

+              <!--

+            <div class="grid3_7 m-b">

+              <label for="date-input">일자</label>

+              <input class="date-input" id="date-input" type="date" v-model="condition['date']" />      

+            </div>

+            <div class="grid3_7 m-b3">

+              <label for="time-input">시간대</label>

+              <div class="flex-between gap">

+                <input

+                  class="time-input"

+                  id="time-input"

+                  type="time"

+                  v-model="condition['start_time']"

+                />~<input

+                  class="time-input"

+                  id="time-input"

+                  type="time"

+                  v-model="condition['end_time']"

+                />

+              </div>

+            </div> -->

+              <button class="btn-l gr-btn search-btn" @click="statusSearch()" style="padding: 0.5rem 0">

+                검색하기

+              </button>

+            </div>

+          </div>

+          <div class="live-mobile">

+            <h2>실시간 발생 현황</h2>

+            <div class="box bg-white tab-buttons" style="height: calc(100% - 50rem)">

+              <div class="btn_set flex-center gap">

+                <button class="m-r flex-between gray-btn" v-for="tab in tabs" :key="tab.id"

+                  :class="{ active: activeTab === tab.id }" @click="changeTab(tab.id)">

+                  {{ tab.title }}

+                  <img v-if="tab.id === 2 && troubleOccurrenceStatusList.length > 0"

+                    src="../../../resources/images/warning.png" alt="" />

+                </button>

+              </div>

+              <div class="ulbox">

+                <div class="tab-content" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">

+                  <ul v-show="tab.content1">

+                    <li v-for="(item, idx) in situationOccurrenceStatusList" :key="idx">

+                      <p class="" style="color: #9bbb8d; ">상황명: {{ item.sn }}</p>

+                      <p class="" style="color: #474747; font-size: 14px;"><img

+                          src="../../../resources/images/icon/map.png" alt=""> {{ item.node_name }} {{ item.crslk_az }}쪽횡단보도

+                      </p>

+                      <p class="m-b" style="color: #767677; font-size: 13px;">발생일시: {{ item.ocrn_dt }}</p>

+                    </li>

+                  </ul>

+                  <ul v-show="tab.content2">

+                    <li v-for="(item, idx) in troubleOccurrenceStatusList" :key=idx @click="troblCcrnLocation(item)">

+                      <p class="m-b" style="color: #9bbb8d; ">장애명: {{ item.trobl_nm }}</p>

+                      <p class="m-b" style="color: #474747; font-size: 14px;"><img

+                          src="../../../resources/images/icon/map.png" alt=""> {{ item.node_name }} {{ item.crslk_az

+                          }}쪽횡단보도 </p>

+                      <p class="m-b">발생일시: {{ item.ocrn_dt }}</p>

+                      <p class="m-b">담당자: {{ item.mngr_nm }}</p>

+                      <p class="m-b">연락처: {{ item.mngr_telno }}</p>

+                      <p class="">복구여부: {{ item.recovery_yn }}</p>

+                    </li>

+                  </ul>

+

+                </div>

+              </div>

+              <div v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">

+                <PaginationButton v-show="tab.content1" v-if="situationOccurrenceStatusListCount > 0"

+                  v-model:currentPage="situationOccurrenceStatusListSearch.currentPage"

+                  :per-page="situationOccurrenceStatusListSearch.perPage"

+                  :total-count="situationOccurrenceStatusListCount" :max-range="5"

+                  :click="situationOccurrenceStatusSearch" />

+                <PaginationButton v-show="tab.content2" v-if="troubleOccurrenceStatusListCount > 0"

+                  v-model:currentPage="troubleOccurrenceStatusListSearch.currentPage"

+                  :per-page="troubleOccurrenceStatusListSearch.perPage" :total-count="troubleOccurrenceStatusListCount"

+                  :max-range="5" :click="troubleOccurrenceStatusSearch" />

+              </div>

+            </div>

+          </div>

+

+

+        </div>

+      </div>

+    </div>

+    <div class="right">

+      <div class="top">

+        <ul class="flex-end">

+          <li>

+            <p class="flex-center gap">

+              <img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 보행자

+            </p>

+            <h3>

+              <em class="green2 m-r">{{ comma(statusControlCountList.pdstrnCount) }}</em>명

+            </h3>

+          </li>

+          <li class="br"></li>

+          <li>

+            <p class="flex-center gap">

+              <img class="m-r" src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 무단횡단 발생

+            </p>

+            <h3>

+              <em class="green2 m-r">{{ comma(statusControlCountList.wtrmsCount) }}</em>회

+            </h3>

+          </li>

+          <li class="br"></li>

+          <li>

+            <p class="flex-center gap">

+              <img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 발생

+            </p>

+            <h3>

+              <em class="green2 m-r">{{ comma(statusControlCountList.signExtnCount) }}</em>회

+            </h3>

+          </li>

+          <li class="br"></li>

+          <li>

+            <p class="flex-center gap">

+              <img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png" alt />금일 신호연장 시간

+            </p>

+            <h3>

+              <em class="green2 m-r">{{ comma(statusControlCountList.signExtnTime) }}</em>초

+            </h3>

+          </li>

+          <li class="br"></li>

+          <li>

+            <p class="flex-center gap">

+              <img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 차량 신호위반 발생

+            </p>

+            <h3>

+              <em class="green2 m-r">{{ comma(statusControlCountList.rittrnVioltVhcleCount) }}</em>회

+            </h3>

+          </li>

+          <li class="br"></li>

+          <li>

+            <p class="flex-center gap">

+              <img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png" alt />금일 장애 발생

+            </p>

+            <h3>

+              <em class="green2 m-r">{{ comma(statusControlCountList.troblOcrnCount) }}</em>회

+            </h3>

+          </li>

+        </ul>

+      </div>

+      <OpenLayers ref="open_layers" />

+      <!-- Popup container -->

+      <div v-if="isPopupVisible" class="popup-container">

+        <!-- Popup content -->

+        <div class="popup-content">

+          <!-- Add your popup content here -->

+          <h2>{{ popupStatus.type }} 발생</h2>

+          <ul>

+            <li>

+              <p class="m-b">발생일시: {{ popupStatus.ocrn_dt }}</p>

+              <p class="">발생장소: {{ popupStatus.crslk_nm }} 횡단보도</p>

+            </li>

+          </ul>

+          <button @click="hidePopup(popupStatus.node_id)" class="s-btn gr-btn">확인</button>

+        </div>

+      </div>

+    </div>

+    <div class="chart grid gap">

+      <div class="bg-white2 b-r b-shadow">

+        <h2 style="font-size: 1.3rem">

+          금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)

+        </h2>

+        <div class="box">

+          <div style="width: 100%; height: 100%" id="chartdivWrap1">

+            <div ref="chartdiv1" id="chartdiv1" style="width: 100%; height: 90%"></div>

+          </div>

+        </div>

+      </div>

+      <div class="bg-white2 b-r b-shadow">

+        <h2 style="font-size: 1.3rem">

+          금일 횡단보도 별 신호연장 발생 건수 (상위10개소)

+        </h2>

+        <div class="box">

+          <div style="width: 100%; height: 100%" id="chartdivWrap2">

+            <div ref="chartdiv2" id="chartdiv2" style="width: 100%; height: 90%"></div>

+          </div>

+        </div>

+      </div>

+      <div class="bg-white2 b-r b-shadow">

+        <h2 style="font-size: 1.3rem">

+          금일 횡단보도 별 우회전 위반 발생 건수 (상위5개소)

+        </h2>

+        <div class="box">

+          <div style="width: 100%; height: 100%" id="chartdivWrap3">

+            <div ref="chartdiv3" id="chartdiv3" style="width: 100%; height: 90%"></div>

+          </div>

+        </div>

+      </div>

+      <div class="bg-white2 b-r b-shadow">

+        <h2 style="font-size: 1.3rem">

+          금일 횡단보도 별 장비장애 발생 건수 (상위5개소)

+        </h2>

+        <div class="box">

+          <div style="width: 100%; height: 100%" id="chartdivWrap4">

+            <div ref="chartdiv4" id="chartdiv4" style="width: 100%; height: 90%"></div>

+          </div>

+        </div>

+      </div>

+    </div>

+

+    <!-- 팝업 -->

+    <div class="modal-wrap" v-if="modal_event_detail_list == true">

+      <div class="modal-bg"></div>

+      <div class="modal_base">

+        <h2>

+          <span>{{ eventListSearch.eventType }} 발생 정보</span>

+          <button type="button" class="gray-btn modal_base_close" @click="modal_event_detail_list = false">

+            <img src="../../../resources/images/close.png" alt="" />

+          </button>

+        </h2>

+        <div class="modal_base_body">

+          <div class="de_Search">

+            <!--<table class="troubleTable">             

+              <tbody>        

+                  <tr>                     

+                    <th>검색</th>               

+                    <td colspan="7" >     

+                      <select name="" id="">

+                        <option value="">검색조건</option>

+                        <option value="">이름</option>

+                        <option value="">소속정보</option>

+                      </select>

+                      <input type="text" placeholder="검색어를 입력 해주세요." style="width: 76%;" />

+                      <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" >검색</button>

+                    </td>  

+                  </tr>

+              </tbody>

+            </table>-->

+          </div>

+          <table>

+            <thead>

+              <tr>

+                <td>동이름</td>

+                <td>횡단보도명</td>

+                <td>상황명</td>

+                <td>발생시간</td>

+              </tr>

+            </thead>

+            <tbody>

+              <tr v-for="(item, idx) in  eventList" :key="idx">

+                <td data-title="교차로명">{{ item.dong_nm }}</td>

+                <td data-title="횡단보도명"> {{ item.crslk_nm }} 쪽횡단보도</td>

+                <td data-title="상황명">{{ item.type }}</td>

+                <td data-title="발생시간">{{ item.ocrn_dt }}</td>

+              </tr>

+              <tr>

+                <td class="exception" colspan="4" v-if="eventList.length < 1">조회된 데이터가 없습니다</td>

+              </tr>

+            </tbody>

+          </table>

+          <PaginationButton v-model:currentPage="eventListSearch.currentPage" :per-page="eventListSearch.perPage"

+            :total-count="eventListCount" :max-range="5" :click="eventSelectList" />

+        </div>

+        <div class="modal_base_bottom gap">

+          <button type="button" class="btn-2 gray-btn wrem_10 mrg_5p" @click="modal_event_detail_list = false">닫기</button>

+        </div>

+      </div>

+    </div>

+

+  </div>

+</template>

+<script>

+import OpenLayers from "../../component/OpenLayers_dev.vue";

+import {

+  vworldBaseLayer,

+  vworldGrayLayer,

+  vworldMidnightLayer,

+  vworldHybridLayer,

+  vworldSatelliteLayer,

+} from "../../component/OpenLayersMap.vue";

+import COMMON_CHART from "../../common/common.js";

+import Overlay from "ol/Overlay"

+import { baseStyles } from "../../component/OpenLayersStyle.vue";

+import axios from "axios";

+import DongSelectList from "../../component/dongSelectList.vue";

+import PaginationButton from "../../component/pagination/PaginationButton.vue";

+import COMMON_UTIL from '../../../resources/js/commonUtil.ts';

+

+export default {

+  data() {

+    return {

+      address: {

+

+      },

+      troubleOccurrenceStatusListSearch: {

+        currentPage: 1,

+        perPage: 10,

+        orderByType: 'DESC',

+      },

+      situationOccurrenceStatusListSearch: {

+

+        currentPage: 1,

+        perPage: 10,

+        orderByType: 'DESC',

+      },

+

+      eventListSearch: {

+        currentPage: 1,

+        perPage: 10,

+        startDate: null,

+        endDate: null,

+        eventType: null,

+        sigungu_cd: null,

+        dong_cd: null,

+        dong_dong_cd: null,

+        node_id: null,

+        crslk_az: null

+      },

+      situationOccurrenceStatusList: [],

+      situationOccurrenceStatusListCount: 0,

+      troubleOccurrenceStatusList: [],

+      troubleOccurrenceStatusListCount: 0,

+      eventListCount: 0,

+      eventList: [],

+      eventIdx: 0,

+      isPopupVisible: false,

+      showSlide: false,

+      slideText: "검색하기",

+      address: {},

+      //조건설정

+      condition: {

+        //체크박스

+        signExtn: true,

+        wtrms: true,

+        rittrnVhcle: true,

+        eqpmnTrobl: true,

+        //일자

+        date: null,

+        start_date: null,

+        end_date: null,

+        //시간대

+        start_time: null,

+        end_time: null,

+

+        // 신규데이터 비교  시간대 

+        currentTimestamp: null,

+        popuptitle: "무단횡단 발생목록"

+      },

+      ck: true,

+      tabs: [

+        {

+          id: 1,

+          title: "상황발생현황",

+          content1: "This is the content for Tab 1",

+        },

+        {

+          id: 2,

+          title: "장애발생현황",

+          content2: "This is the content for Tab 2",

+        },

+      ],

+      activeTab: 1,

+      activeTab2: 1,

+      chart1: {},

+      chart2: {},

+      chart3: {},

+      chart4: {},

+      chartData: {

+        wtrms: [],

+        signExtn: [],

+        rittrnVioltVhcle: [],

+        troblOcrn: [],

+      },

+      data1: [],

+      statusControlCountList: {

+        pdstrnCount: 0,

+        wtrmsCount: 0,

+        signExtnCount: 0,

+        signExtnTime: 0,

+        rittrnVioltVhcleCount: 0,

+        troblOcrnCount: 0,

+      },

+      // 실시간 발생 이벤트 

+      popupStatus: {

+        node_id: '',

+        crslk_az: '',

+        ocrn_dt: '',

+        type: ''

+      },

+      // 실시간 발생 이벤트 리스트 

+      realTimeEventList: [],

+      // 이벤트 발생 체크 

+      eventFlage: false,

+      // 이벤트 상세보기 팝업 

+      modal_event_detail_list: false,

+      // 타이머 관리 

+      timer: {}

+    };

+  },

+  components: {

+    PaginationButton: PaginationButton,

+    OpenLayers: OpenLayers,

+    DongSelectList: DongSelectList,

+  },

+  methods: {

+    // 휠 이벤트 

+    childWheel(coordinate) {

+

+    },

+

+    //DongSelectList에서 dong_cd 받아오기

+    setDongCd(value) {

+      this.address = value;

+    },

+

+    childMoveEnd(zoom) {

+      // console.log("zoom zoomzoom: ", zoom);

+      if (this.now_zoom >= 18.6 && zoom < 18.6) {

+        this.address.node_id = null;

+        this.statusSearch(false);

+      }

+      this.now_zoom = zoom;

+    },

+

+    // 실시간 발생 토클?

+    toggleSlide() {

+      if (this.showSlide) {

+        this.slideText = "검색하기";

+      } else {

+        this.slideText = "창닫기";

+      }

+      this.showSlide = !this.showSlide;

+    },

+

+    dongSelectF: function (event) {

+

+    },

+

+    //지역 및 조건 설정 안에 있는 횡단보도의 위치와 횟수의 합

+    changeTab(tabId) {

+      this.activeTab = tabId;

+    },

+

+    showPopup() {

+      this.isPopupVisible = true;

+    },

+

+    hidePopup(node_id) {

+      this.isPopupVisible = false;

+    },

+

+    // 팝업 상세 

+    openDetailPopup(type) {

+      let vm = this;

+      vm.eventListSearch.currentPage = 1;

+      vm.eventListSearch.startDate = vm.condition.date + ' ' + vm.condition.start_time;

+      vm.eventListSearch.endDate = vm.condition.date + ' ' + vm.condition.end_time;

+

+

+      // 무단횡단    

+      if (type == 'c1') {

+        vm.eventListSearch.eventType = '무단횡단';

+        // 신호연장

+      } else if (type == 'c2') {

+        vm.eventListSearch.eventType = '신호연장';

+        // 차량위반

+      } else if (type == 'c3') {

+        vm.eventListSearch.eventType = '우회전신호위반';

+        // 장비발생

+      } else if (type == 'c4') {

+        vm.eventListSearch.eventType = '장비장애';

+      }

+

+      if (type != 'c4') {

+        const vm = this;

+        axios({

+          url: "/statusControl/eventSelectList.json",

+          method: "post",

+          headers: {

+            "Content-Type": "application/json; charset=UTF-8",

+          },

+          data: vm.eventListSearch,

+        })

+          .then(function (response) {

+            vm.eventListCount = response.data.eventListCount;

+            vm.eventList = response.data.eventList;

+            vm.eventIdx = response.data.eventListCount - (vm.eventListSearch.currentPage - 1) * vm.eventListSearch.perPage;

+            vm.modal_event_detail_list = true;

+          })

+          .catch(function (error) {

+            alert("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");

+          });

+      }

+    },

+

+    // 마우스 클릭 

+    childClick: function (prop, coordinate, layerCk, map) {

+      var vm = this;

+

+      if (layerCk == true) {

+        if (prop[0] != null && prop[0].layerName != 'multiPolygonLayer') {

+          if (prop[0].layerName === 'dong') {

+            //this.address.dong_dong_cd = prop[0].id_;

+            //this.address.dong_cd =prop[0].id_;       

+            vm.eventListSearch.dong_cd = prop[0].id_;

+          } else if (prop[0].layerName === 'node') {

+            //this.address.node_id = prop[0].id_;   

+            vm.eventListSearch.node_id = prop[0].id_;

+          }

+          this.createPopup(coordinate, prop[0]);

+        }

+      }

+    },

+

+    // 장애 팝업

+    createErrorPopup: function (item) {

+      var vm = this;

+      vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));

+      let element = document.createElement("div");

+      element.classList.add('ol-popup');

+

+      // 검색창 떠있는 동안은 자동 리프레쉬 멈춤     

+      var html = "";

+

+      html = "<div style='transform: translate(0%, 0%) translate(-150px,-230px);'>"

+        + " <table class='map_multi_popup' >"

+        + " <thead>"

+        + " <td colspan='4' class='fon'> <span > " + item.node_name + "_" + item.crslk_az + "측 획단보도 장애정보 <a id='popup-closer' class='ol-popup-closer' style='float: right;'>X   </a> </span></td>"

+        + " </thead>"

+        + " <tbody>"

+        + " <tr>"

+        + " <th colspan='3'>장애명</th>"

+        + " <td >" + item.trobl_nm + "</td>"

+        + " </tr>"

+        + " <tr>"

+        + " <th colspan='3'>담당자</th>"

+        + " <td >" + item.mngr_nm + "</td>"

+        + " </tr>"

+        + " <tr>"

+        + " <th colspan='3'>연락처</th>"

+        + " <td >" + item.mngr_telno + "</td>"

+        + " </tr>"

+        + " <tr>"

+        + " <th colspan='3'>이메일</th>"

+        + " <td >" + item.mngr_eml + "</td>"

+        + " </tr>"

+        + " <tr>"

+        + " <th colspan='3'>소속정보</th>"

+        + " <td >" + item.mngr_ogdp_info + "</td>"

+        + " </tr>"

+        + "<tr>"

+        + " <th colspan='5'><button class='map_multi_popup_move_button' id='close'>닫기</button></th>"

+        + " </tr>"

+        + " </tbody>"

+        + " </table>"

+        + " </div>";

+      + " </tbody>"

+        + " </table>"

+        + " </div>";

+

+      element.innerHTML = html;

+      element.style.display = 'block';

+

+      // OverLay 생성

+      let overlay = new Overlay({

+        id: 'multiPopup',

+        element: element, // 생성한 DIV

+        autoPan: true,

+        className: "multiPopup",

+        autoPanMargin: 100,

+        autoPanAnimation: {

+          duration: 400

+        }

+      });

+

+      //오버레이의 위치 저장     

+      var geom = JSON.parse(item.geom.value);

+      // console.log(geom);

+      overlay.setPosition(geom.coordinates);

+

+      //지도에 추가

+      this.$refs.open_layers.map.addOverlay(overlay);

+      // 해당 DIV 다켓방법

+      let oElem = overlay.getElement();

+      oElem.addEventListener('click', function (e) {

+        var target = e.target;

+        if (target.className == "ol-popup-closer" || target.className == 'map_multi_popup_move_button') {

+          //선택한 OverLayer 삭제

+          vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));

+          vm.timer = setInterval(() => {

+            vm.statusSearch(false);

+          }, 5000)

+

+        }

+      });

+    },

+

+    // 정보 팝업

+    createPopup: function (coordinate, prop) {

+      var vm = this;

+      vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));

+      let element = document.createElement("div");

+      element.classList.add('ol-popup');

+

+      // 검색창 떠있는 동안은 자동 리프레쉬 멈춤 

+      clearInterval(this.timer);

+      var html = "";

+      html = "<div style='transform: translate(0%, 0%) translate(-150px,-190px);'>"

+        + " <table class='map_multi_popup' >"

+        + " <thead>"

+        + " <td colspan='5' class='fon'> <span > " + prop.values_.name + " <a id='popup-closer' class='ol-popup-closer' style='float: right;'>X   </a> </span></td>"

+        + " </thead>"

+        + " <tbody>"

+        + " <tr>"

+        + " <th colspan='3'>무단횡단 발생</th>"

+        + " <td >" + prop.values_.crosng_cnt + "</td>"

+        + " <td ><button class='map_multi_popup_button' id='c1' >상세</button></td>"

+        + " </tr>"

+        + " <tr>"

+        + " <th colspan='3'>신호연장 발생</th>"

+        + " <td >" + prop.values_.extn_cnt + "</td>"

+        + " <td ><button class='map_multi_popup_button' id='c2' >상세</button></td>"

+        + " </tr>"

+        + " <tr>"

+        + " <th colspan='3'>차량위반 발생</th>"

+        + " <td >" + prop.values_.law_vltn_cnt + "</td>"

+        + " <td ><button class='map_multi_popup_button' id='c3' >상세</button></td>"

+        + " </tr>"

+        + " <tr>"

+        + " <th colspan='3'>장비장애 발생</th>"

+        + " <td >" + prop.values_.error_cnt + "</td>"

+        + " <td ><button class='map_multi_popup_button' id='c1' >상세</button></td>"

+        + " </tr>";

+      if (prop.layerName != 'crslk') {

+        html += "<tr>"

+          + " <th colspan='5'><button class='map_multi_popup_move_button' id='move'>이동</button></th>"

+          + " </tr>"

+          + " </tbody>"

+          + " </table>"

+          + " </div>";

+      } else {

+        html += " </tbody>"

+          + " </table>"

+          + " </div>";

+      }

+

+      element.innerHTML = html;

+      element.style.display = 'block';

+

+      // OverLay 생성

+      let overlay = new Overlay({

+        id: 'multiPopup',

+        element: element, // 생성한 DIV

+        autoPan: true,

+        className: "multiPopup",

+        autoPanMargin: 100,

+        autoPanAnimation: {

+          duration: 400

+        }

+      });

+

+      //오버레이의 위치 저장     

+      overlay.setPosition(prop.values_.geometry.flatCoordinates);

+

+      //지도에 추가

+      this.$refs.open_layers.map.addOverlay(overlay);

+      // 해당 DIV 다켓방법

+      let oElem = overlay.getElement();

+      oElem.addEventListener('click', function (e) {

+        var target = e.target;

+        if (target.className == "ol-popup-closer") {

+          //선택한 OverLayer 삭제

+          vm.$refs.open_layers.map.removeOverlay(vm.$refs.open_layers.map.getOverlayById('multiPopup'));

+          element = '';

+

+          vm.timer = setInterval(() => {

+            vm.statusSearch(false);

+          }, 5000)

+

+        } else if (target.className == "map_multi_popup_button") {

+          vm.openDetailPopup(target.id)

+

+        } else if (target.className == "map_multi_popup_move_button") {

+          if (prop != null && prop.layerName != 'multiPolygonLayer') {

+            if (prop.layerName === 'dong') {

+              vm.address.dong_dong_cd = prop.id_;

+              vm.address.dong_cd = prop.id_;

+            } else if (prop.layerName === 'node') {

+              vm.address.node_id = prop.id_;

+            }

+            vm.statusSearch(true);

+          }

+          vm.timer = setInterval(() => {

+            vm.statusSearch(false);

+          }, 5000)

+        }

+      });

+    },

+

+    // 장애 발생 현황 클릭 

+    troblCcrnLocation: function (item) {

+      // console.log('troblCcrnLocation', item);

+      clearInterval(this.timer);

+      this.address.node_id = item.node_id;

+      this.statusSearch(true);

+      this.eventFlage = true;

+      this.createErrorPopup(item);

+    },

+

+    // 셀렉트 선택시 반영 데이터 

+    getStatusData: function (pointAnim) {

+      const vm = this;

+

+      var layer = 'dong'

+      var epsg = "EPSG:5181";

+

+      if (vm.address.guGun_dong_cd == null) {