<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="iconlist">
          <ul>
            <li
              v-for="item in items"
              :key="item.id"
              :class="{ active: item.isActive }"
              @click="toggleActive(item)"
            >
              <div></div>
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
        <div class="search">
          <h2 style="background: #00b050">무단횡단 분석</h2>
          <h2>지역별</h2>
          <div class="box" style="background: #eaebec">
            <div class="grid3_7 gap m-b">
              <label style="line-height: 3rem;">분석날짜</label>
              <div class="flex gap" style="width: 90%;">
                <input class="date-input" type="date" :max="max_limit_date" v-model="address['start_date']" />
                <span>~</span>
                <input class="date-input" type="date" :min="min_limit_date" :max="max_limit_date" v-model="address['end_date']" />
              </div>
            </div>
            <div class="grid gap m-b">
              <DongSelectList
                @setDongCd="setDongCd"
                :crslk_azHiddenCk="true"
              ></DongSelectList>
            </div>
            <div class="grid3_7 m-b gap">
              <label for="">횡단보도</label>
              <select v-show="!nodeSelectCk" name="crslk_azSelectList" id="crslk_azSelectList" @change="crslkSelectF($event)" v-model="address.crslk_az" >
                <option :value="0">횡단보도</option>
              </select>
              <select v-show="nodeSelectCk" name="crslk_azSelectList" id="crslk_azSelectList" @change="crslkSelectF($event)" v-model="address.crslk_az" >
                <option :value="0">횡단보도</option>
                <option :value="10">북</option>
                <option :value="50">북동</option>
                <option :value="20">동</option>
                <option :value="60">남동</option>
                <option :value="30">남</option>
                <option :value="70">남서</option>
                <option :value="40">서</option>
                <option :value="80">북서</option>
              </select>
            </div>
            <div class="flex-center">
              <button type="button" class="btn-l gr-btn search-btn" @click="statusSearch">
                조회
              </button>
            </div>
          </div>
          <h2>검색결과</h2>
          <div
            class="box tab-buttons result"
            style="height: calc(100% - 50rem)"
          >
          <div class="ulbox" style="" v-show="itemsCk == 1">
            <h4>총 <em style="color: #13833b">{{wtrmsCrosngTotalCnt}}</em>건</h4>
              <ul>
                <li
                  class="result"
                  v-for="(item, idx) in wtrmsCrosngSearchResult"
                  :key="idx"
                >
                  <h5>{{ idx + 1 }}</h5>
                  <p class="m-b">시도: {{ item.sido_nm }} {{ item.sigungu_nm }} {{ item.dong_nm }}</p>
                  <p class="m-b">
                    <em style="color: #13833b"><img src="../../../resources/images/icon/map.png" alt=""> {{ item.crslk_nm }}</em>
                  </p>
                  <p class="m-b">X좌표: {{ item.lat }}</p>
                  <p class="m-b">Y좌표: {{ item.lon }}</p>
                  <p class="">{{ searchResultState }} 수: {{ item.count }}</p>
                </li>
              </ul>
            </div>
            <div class="ulbox" style="" v-show="itemsCk == 2">
              <h4>총 <em style="color: #13833b">{{signExtnCrosngTotalCnt}}</em>건</h4>
              <ul>
                <li
                  class="result"
                  v-for="(item, idx) in signExtnSearchResult"
                  :key="idx"
                >
                  <h5>{{ idx + 1 }}</h5>
                  <p class="m-b">시도: {{ item.sido_nm }} {{ item.sigungu_nm }} {{ item.dong_nm }}</p>
                  <p class="m-b">
                    <em style="color: #13833b"><img src="../../../resources/images/icon/map.png" alt=""> {{ item.crslk_nm }}</em>
                  </p>
                  <p class="m-b">X좌표: {{ item.lat }}</p>
                  <p class="m-b">Y좌표: {{ item.lon }}</p>
                  <p class="">{{ searchResultState }} 수: {{ item.count }}</p>
                </li>
              </ul>
            </div>
            <div class="ulbox" style="" v-show="itemsCk == 3">
              <h4>총 <em style="color: #13833b">{{rittrnVhcleCrosngTotalCnt}}</em>건</h4>
              <ul>
                <li
                  class="result"
                  v-for="(item, idx) in rittrnVhcleSearchResult"
                  :key="idx"
                >
                  <h5>{{ idx + 1 }}</h5>
                  <p class="m-b">시도: {{ item.sido_nm }} {{ item.sigungu_nm }} {{ item.dong_nm }}</p>
                  <p class="m-b">
                    <em style="color: #13833b"><img src="../../../resources/images/icon/map.png" alt=""> {{ item.crslk_nm }}</em>
                  </p>
                  <p class="m-b">X좌표: {{ item.lat }}</p>
                  <p class="m-b">Y좌표: {{ item.lon }}</p>
                  <p class="">{{ searchResultState }} 수: {{ item.count }}</p>
                </li>
              </ul>
            </div>
            <div class="ulbox" style="" v-show="itemsCk == 4">
              <h4>총 <em style="color: #13833b">{{troblOcrnCrosngTotalCnt}}</em>건</h4>
              <ul>
                <li
                  class="result"
                  v-for="(item, idx) in troblOcrnSearchResult"
                  :key="idx"
                >
                  <h5>{{ idx + 1 }}</h5>
                  <p class="m-b">시도: {{ item.sido_nm }} {{ item.sigungu_nm }} {{ item.dong_nm }}</p>
                  <p class="m-b">
                    <em style="color: #13833b"><img src="../../../resources/images/icon/map.png" alt=""> {{ item.crslk_nm }}</em>
                  </p>
                  <p class="m-b">X좌표: {{ item.lat }}</p>
                  <p class="m-b">Y좌표: {{ item.lon }}</p>
                  <p class="">{{ searchResultState }} 수: {{ item.count }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <!-- <ClusterPopup></ClusterPopup>  -->

      <div class="top flex gap">
        <button class="s-btn" @click="changeClusterLayer">클러스터</button>
        <button class="s-btn" @click="changeLayer">레이어</button>
        <button class="s-btn" @click="changeHeatmapLayer"  >히트맵</button>
      </div>
      <OpenLayers ref="open_layers" />
    </div>
  </div>
  <div class="chart grid gap">
    <div class="boxwrap bg-white2 b-r b-shadow">
      <h2>무단횡단 비율</h2>
      <div class="flex boxwrap">
        <div class="box tab-buttons">
          <div class="btn_set flex-center">
            <!-- <button
              class="flex-between gray-btn"
              v-for="tab in tabs3"
              :key="tab.id"
              :class="{ active: activeTab3 === tab.id }"
              @click="changeTab3(tab.id)"
            >
           
              {{ tab.title }}
            </button> -->
            <button v-if="address.dong_cd.length==2" class="flex-between gray-btn" :class="{ active: activeTab3 === 1 }" @click="changeTab3(1)">시군구</button>
            <button v-if="address.dong_cd.length==2 || address.dong_cd.length==5" class="flex-between gray-btn" :class="{ active: activeTab3 === 2 }" @click="changeTab3(2)">행정동</button>
            <button v-if="address.dong_cd.length==5 || address.dong_cd.length==8 && address.node_id==null" class="flex-between gray-btn" :class="{ active: activeTab3 === 3 }" @click="changeTab3(3)">교차로</button>
            <button v-if="address.dong_cd.length==8 || address.node_id" class="flex-between gray-btn" :class="{ active: activeTab3 === 4 }" @click="changeTab3(4)">횡단보도</button>
          </div>
          <div
            class="tab-content"
            v-for="tab in tabs3"
            :key="tab.id"
            v-show="activeTab3 === tab.id"
          >
            <div v-show="tab.content1 && address.dong_cd.length==2" class="box">
              <Chart
                :data="sigunguData"
                :theme="themeList[8]"
                :categoryDataList="categoryDataList"
                :valueDataList="valueDataList"
              ></Chart>
            </div>
            <div v-show="tab.content2 && (address.dong_cd.length==2 || address.dong_cd.length==5)" class="box">
              <Chart
                :data="dongData"
                :theme="themeList[8]"
                :categoryDataList="categoryDataList"
                :valueDataList="valueDataList"
              ></Chart>
            </div>
            <div v-show="tab.content3 && (address.dong_cd.length==5 || address.dong_cd.length==8 && address.node_id==null)" class="box">
              <Chart
                :data="nodeData"
                :theme="themeList[8]"
                :categoryDataList="categoryDataList"
                :valueDataList="valueDataList"
              ></Chart>
            </div>
            <div v-show="tab.content4 && (address.dong_cd.length==8 || address.node_id)" class="box">
              <Chart
                :data="crslkData"
                :theme="themeList[8]"
                :categoryDataList="categoryDataList"
                :valueDataList="valueDataList"
              ></Chart>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="boxwrap bg-white2 b-r b-shadow">
      <h2>발생 현황</h2>
      <div class="grid" style="height: calc(100% - 34px); ">
        <div class="box tab-buttons">
          <div class="btn_set flex-center">
            <button
              class="flex-between gray-btn"
              v-for="tab in tabs"
              :key="tab.id"
              :class="{ active: activeTab === tab.id }"
              @click="changeTab(tab.id)"
            >
              {{ tab.title }}
            </button>
          </div>
          <div
            class="tab-content"
            v-for="tab in tabs"
            :key="tab.id"
            v-show="activeTab === tab.id"
            style="height: calc(100% - 3rem);"
          >
            <div v-show="tab.content1" class="" style="height: 100%">
              <Chart
                :data="monthData"
                :theme="themeList[0]"
                :categoryDataList="categoryDataList"
                :valueDataList="valueDataList"
              ></Chart>
            </div>
            <div v-show="tab.content2" class="" style="height: 100%">
              <Chart
                :data="weekData"
                :theme="themeList[0]"
                :categoryDataList="categoryDataList"
                :valueDataList="valueDataList"
              ></Chart>
            </div>
          </div>
        </div>
        <div class="box tab-buttons">
          <div class="btn_set flex-center">
            <button
              class="flex-between gray-btn"
              v-for="tab in tabs2"
              :key="tab.id"
              :class="{ active: activeTab2 === tab.id }"
              @click="changeTab2(tab.id)"
            >
              {{ tab.title }}
            </button>
          </div>
          <div
            class="tab-content"
            style="height: calc(100% - 3rem);"
            v-for="tab in tabs2"
            :key="tab.id"
            v-show="activeTab2 === tab.id"
          >
            <div v-show="tab.content1" class="" style="height: 100%">
              <Chart
                :data="dayData"
                :theme="themeList[0]"
                :categoryDataList="categoryDataList"
                :valueDataList="valueDataList"
              ></Chart>
            </div>
            <div v-show="tab.content2" class="" style="height: 100%">
              <Chart
                :data="timeData"
                :theme="themeList[0]"
                :categoryDataList="categoryDataList"
                :valueDataList="valueDataList"
              ></Chart>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="boxwrap bg-white2 b-r b-shadow">
      <h2 v-if="address.dong_cd.length==2">시/군/구 발생현황</h2>
      <h2 v-if="address.dong_cd.length==5">행정동 발생현황</h2>
      <h2 v-if="address.dong_cd.length==8 && address.node_id==null">교차로 발생현황</h2>
      <h2 v-if="address.node_id">횡단보도 발생현황</h2>
      <div v-if="address.dong_cd.length==2" class="minichart">
        <Chart
          :data="sigunguData"
          :theme="themeList[1]"
          :categoryDataList="categoryDataList"
          :valueDataList="valueDataList"
        ></Chart>
      </div>
      <div v-if="address.dong_cd.length==5" class="minichart">
        <Chart
          :data="dongData"
          :theme="themeList[1]"
          :categoryDataList="categoryDataList"
          :valueDataList="valueDataList"
        ></Chart>
      </div>
      <div v-if="address.dong_cd.length==8 && address.node_id==null" class="minichart">
        <Chart
          :data="nodeData"
          :theme="themeList[1]"
          :categoryDataList="categoryDataList"
          :valueDataList="valueDataList"
        ></Chart>
      </div>
      <div v-if="address.node_id" class="minichart">
        <Chart
          :data="crslkData"
          :theme="themeList[1]"
          :categoryDataList="categoryDataList"
          :valueDataList="valueDataList"
        ></Chart>
      </div>
    </div>
  </div>
</template>
<script>
import Chart from "../../component/chart/ChartMain.vue";
import Map from "../../component/map/map.vue";
import MapPage from "../../component/map/map.vue";
import OpenLayers from "../../component/OpenLayers.vue";
import ClusterPopup from "../../component/ClusterPopup.vue";
import {
  vworldBaseLayer,
  vworldGrayLayer,
  vworldMidnightLayer,
  vworldHybridLayer,
  vworldSatelliteLayer,
} from "../../component/OpenLayersMap.vue";
import { baseStyles } from "../../component/OpenLayersStyle.vue";
import axios from "axios";
import DongSelectList from "../../component/dongSelectList.vue";

export default {
  data() {
    return {
      
      address: {
        //지역 설정
        dong_cd: "22030",
        siDo_dong_cd: "22",
        guGun_dong_cd: "22030",
        dong_dong_cd: null,
        node_id: null,
        node_name: null,
        zoomLevel: null,
        crslk_az: "0",
        coordinate: [],
        baseSource: "EPSG:5181",
        //일자
        start_date: null,
        end_date: null,
        status:null,
      },
      max_limit_date: null,
      min_limit_date: null,
      searchResultState: "무단횡단 발생",
      wtrmsCrosngSearchResult:[],
      wtrmsCrosngTotalCnt:0,
      signExtnSearchResult:[],
      signExtnCrosngTotalCnt:0,
      rittrnVhcleSearchResult:[],
      rittrnVhcleCrosngTotalCnt:0,
      troblOcrnSearchResult:[],
      troblOcrnCrosngTotalCnt:0,
      showSlide: false,
      slideText: "검색하기",
      tabs: [
        {
          id: 1,
          title: "월별",
          content1: "This is the content for Tab 1",
        },
        {
          id: 2,
          title: "요일별",
          content2: "This is the content for Tab 2",
        },
      ],
      tabs2: [
        {
          id: 1,
          title: "일별",
          content1: "This is the content for Tab 1",
        },
        {
          id: 2,
          title: "시간별",
          content2: "This is the content for Tab 2",
        },
      ],
      tabs3: [
      {
          id: 1,
          title: "시군구",
          content1: "This is the content for Tab 1",
        },
        {
          id: 2,
          title: "행정동",
          content2: "This is the content for Tab 2",
        },
        {
          id: 3,
          title: "교차로",
          content3: "This is the content for Tab 3",
        },
        {
          id: 4,
          title: "횡단보도",
          content4: "This is the content for Tab 4",
        },
      ],
      activeTab: 1,
      activeTab2: 1,
      activeTab3: 2,
      items: [
        { id: 1, name: "무단횡단", isActive: true },
        { id: 2, name: "신호연장", isActive: false },
        { id: 3, name: "우회전 차량", isActive: false },
        { id: 4, name: "장애발생", isActive: false },
      ],
      itemsCk : 1,
      //클러스터 체크
      clusterCk: true,
      //레이어 체크
      layerCk: false,
      //히트맵 체크
      heatmapCk: false,
        nodeSelectCk:false,
      // 차트 데이터
      monthData: [
        {
          category: "1월",
          value1: 1000,
        },
        {
          category: "2월",
          value1: 1200,
        },
        {
          category: "3월",
          value1: 850,
        },
        {
          category: "4월",
          value1: 1050,
        },
        {
          category: "5월",
          value1: 953,
        },
        {
          category: "6월",
          value1: 815,
        },
        {
          category: "7월",
          value1: 780,
        },
        {
          category: "8월",
          value1: 0,
        },
        {
          category: "9월",
          value1: 0,
        },
        {
          category: "10월",
          value1: 0,
        },
        {
          category: "11월",
          value1: 0,
        },
        {
          category: "12월",
          value1: 0,
        },
      ],
      dayData: [
        {
          category: "1일",
          value1: 30,
        },
        {
          category: "2일",
          value1: 12,
        },
        {
          category: "3일",
          value1: 24,
        },
        {
          category: "4일",
          value1: 19,
        },
        {
          category: "5일",
          value1: 31,
        },
        {
          category: "6일",
          value1: 15,
        },
        {
          category: "7일",
          value1: 18,
        },
        {
          category: "8일",
          value1: 24,
        },
        {
          category: "9일",
          value1: 39,
        },
        {
          category: "10일",
          value1: 25,
        },
        {
          category: "11일",
          value1: 16,
        },
        {
          category: "12일",
          value1: 14,
        },
        {
          category: "13일",
          value1: 14,
        },
        {
          category: "14일",
          value1: 20,
        },
        {
          category: "15일",
          value1: 21,
        },
        {
          category: "16일",
          value1: 25,
        },
        {
          category: "17일",
          value1: 31,
        },
        {
          category: "18일",
          value1: 33,
        },
        {
          category: "19일",
          value1: 42,
        },
        {
          category: "20일",
          value1: 24,
        },
        {
          category: "21일",
          value1: 28,
        },
        {
          category: "22일",
          value1: 30,
        },
        {
          category: "23일",
          value1: 22,
        },
        {
          category: "24일",
          value1: 15,
        },
        {
          category: "25일",
          value1: 15,
        },
        {
          category: "26일",
          value1: 15,
        },
        {
          category: "27일",
          value1: 15,
        },
        {
          category: "28일",
          value1: 15,
        },
        {
          category: "29일",
          value1: 15,
        },
        {
          category: "30일",
          value1: 15,
        },
        {
          category: "31일",
          value1: 15,
        },
      ],
      timeData: [
        {
          category: "1시",
          value1: 30,
        },
        {
          category: "2시",
          value1: 12,
        },
        {
          category: "3시",
          value1: 24,
        },
        {
          category: "4시",
          value1: 19,
        },
        {
          category: "5시",
          value1: 31,
        },
        {
          category: "6시",
          value1: 15,
        },
        {
          category: "7시",
          value1: 18,
        },
        {
          category: "8시",
          value1: 24,
        },
        {
          category: "9시",
          value1: 39,
        },
        {
          category: "10시",
          value1: 25,
        },
        {
          category: "11시",
          value1: 16,
        },
        {
          category: "12시",
          value1: 14,
        },
        {
          category: "13시",
          value1: 14,
        },
        {
          category: "14시",
          value1: 20,
        },
        {
          category: "15시",
          value1: 21,
        },
        {
          category: "16시",
          value1: 25,
        },
        {
          category: "17시",
          value1: 31,
        },
        {
          category: "18시",
          value1: 33,
        },
        {
          category: "19시",
          value1: 42,
        },
        {
          category: "20시",
          value1: 24,
        },
        {
          category: "21시",
          value1: 28,
        },
        {
          category: "22시",
          value1: 30,
        },
        {
          category: "23시",
          value1: 22,
        },
        {
          category: "24시",
          value1: 15,
        },
      ],

      weekData: [
        {
          category: "월요일",
          value1: 1000,
        },
        {
          category: "화요일",
          value1: 1200,
        },
        {
          category: "수요일",
          value1: 850,
        },
        {
          category: "목요일",
          value1: 1050,
        },
        {
          category: "금요일",
          value1: 953,
        },
        {
          category: "토요일",
          value1: 815,
        },
        {
          category: "일요일",
          value1: 780,
        },
      ],

      nodeData: [
        {
          category: "이현네거리",
          value1: 1000,
        },
        {
          category: "광덕무역(A)",
          value1: 1200,
        },
        {
          category: "대웅산업사(A)",
          value1: 850,
        },
        {
          category: "달서초등(A)",
          value1: 1050,
        },
        {
          category: "에덴둥지맨션",
          value1: 953,
        },
        {
          category: "남평네거리",
          value1: 815,
        },
        {
          category: "신평네거리",
          value1: 780,
        },
        {
          category: "평리네거리",
          value1: 624,
        },
        {
          category: "평리광명네거리",
          value1: 592,
        },
        {
          category: "세븐일레븐대구대평중",
          value1: 500,
        },
        {
          category: "비산초등",
          value1: 492,
        },
        {
          category: "내당역네거리",
          value1: 330,
        },
        {
          category: "북비산네거리",
          value1: 324,
        },
        {
          category: "북부벙류장",
          value1: 200,
        },
      ],
      crslkData:[],
      heatMapData: [
        {
          week: "Monday",
          quarter: "0-6시",
          category2: "동구",
          value1: 1000,
          value2: 588,
        },
        {
          week: "Monday",
          quarter: "7-12시",
          category2: "동구",
          value1: 1200,
          value2: 1800,
        },
        {
          week: "Monday",
          quarter: "13-18시",
          category2: "동구",
          value1: 850,
          value2: 1230,
        },
        {
          week: "Monday",
          quarter: "19-24시",
          category2: "동구",
          value1: 1050,
          value2: 950,
        },
        {
          week: "Tuesday",
          quarter: "0-6시",
          category2: "중구",
          value1: 2000,
          value2: 458,
        },
        {
          week: "Tuesday",
          quarter: "7-12시",
          category2: "중구",
          value1: 4000,
          value2: 2100,
        },
        {
          week: "Tuesday",
          quarter: "13-18시",
          category2: "중구",
          value1: 2500,
          value2: 1430,
        },
        {
          week: "Tuesday",
          quarter: "19-24시",
          category2: "중구",
          value1: 3100,
          value2: 1150,
        },
        {
          week: "Wednesday",
          quarter: "0-6시",
          category2: "동구",
          value1: 1800,
          value2: 1588,
        },
        {
          week: "Wednesday",
          quarter: "7-12시",
          category2: "중구",
          value1: 4200,
          value2: 900,
        },
        {
          week: "Wednesday",
          quarter: "13-18시",
          category2: "서구",
          value1: 3500,
          value2: 430,
        },
        {
          week: "Wednesday",
          quarter: "19-24시",
          category2: "남구",
          value1: 2300,
          value2: 1850,
        },
      ],
      sigunguData:[ {
          country: "서구",
          value: 2504,
        },
        {
          country: "중구",
          value: 4011,
        },
        {
          country: "남구",
          value: 3224,
        },
        {
          country: "동구",
          value: 4523,
        },
        {
          country: "수성구",
          value: 4342,
        },],
      // Set data
      dongData: [
        {
          country: "평리동",
          value: 2504,
        },
        {
          country: "운대동",
          value: 4011,
        },
        {
          country: "내당동",
          value: 3224,
        },
        {
          country: "상중이동",
          value: 4523,
        },
        {
          country: "비산동",
          value: 4342,
        },
      ],
      endDateOptions:{
        disabledDate: this.disabledEdDate,
      },
      // 차트 테마 목록
      themeList: [
        "XY",
        "YX",
        "ClusterXY",
        "ClusterYX",
        "StackXY",
        "StackYX",
        "Line",
        "ClusterLine",
        "Pie",
        "Donut",
        "HeatMap",
      ],
    };
  },
  components: {
    ClusterPopup: ClusterPopup,
    Chart: Chart,
    MapPage: MapPage,
    Map,
    OpenLayers: OpenLayers,
    DongSelectList: DongSelectList,
  },
  methods: {

    //통계분석 조회 결과
    analysisSearch() {
      const vm = this;

      axios({
        url: "/statisticalAnalysis/analysisSearch.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.address,
      }).then(function (response) {         
        // console.log("analysisSearch response : ",response.data);
        vm.wtrmsCrosngTotalCnt=0;
        vm.signExtnCrosngTotalCnt=0;
        vm.rittrnVhcleCrosngTotalCnt=0;
        vm.troblOcrnCrosngTotalCnt=0;
        for(var i = 0 ; i<response.data.wtrmsCrosng.length; i++){
          vm.wtrmsCrosngTotalCnt+=response.data.wtrmsCrosng[i].count;
        }
        for(var i = 0 ; i<response.data.signExtn.length; i++){
          vm.signExtnCrosngTotalCnt+=response.data.signExtn[i].count;
        }
        for(var i = 0 ; i<response.data.rittrnVhcle.length; i++){
          vm.rittrnVhcleCrosngTotalCnt+=response.data.rittrnVhcle[i].count;
        }
        for(var i = 0 ; i<response.data.troblOcrn.length; i++){
          vm.troblOcrnCrosngTotalCnt+=response.data.troblOcrn[i].count;
        }
        vm.wtrmsCrosngSearchResult=response.data.wtrmsCrosng;
        vm.signExtnSearchResult=response.data.signExtn;
        vm.rittrnVhcleSearchResult=response.data.rittrnVhcle;
        vm.troblOcrnSearchResult=response.data.troblOcrn;
      })
      .catch(function (error) {
        console.log("analysisSearch - error : ", error);
        alert("통계분석 조회 오류, 관리자에게 문의해주세요.");
      });
    },

    //상황발생 정보 목록 조회
    statisticalAnalysisAll(url) {
      const vm = this;

      axios({
        url: url,
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.address,
      }).then(function (response) {         
        // console.log("statisticalAnalysisAll response : ",response.data);
        const testData={sigungu_nm:"수성구", wtrms_crosng_cnt:0};
        vm.sigunguData=response.data.sigunguCount;
        vm.dongData=response.data.dongCount;
        vm.nodeData=response.data.nodeCount;
        vm.crslkData=response.data.crslkCount;
        vm.dayData=response.data.dayCount;
        vm.weekData=response.data.dayOfWeekCount;
        vm.timeData=response.data.hourCount;
        vm.monthData=response.data.monthCount;
      })
      .catch(function (error) {
        console.log("statisticalAnalysisAll - error : ", error);
        alert("통계분석 상황발생 정보 조회 오류, 관리자에게 문의해주세요.");
      });
    },

    //DongSelectList에서 dong_cd 받아오기
    setDongCd(value) {
      // console.log("value : ", value);
      this.address = value;
    },
    
    //시/도/군/구 Select 선택시 바로 위치 이동
    siDoGunGuSelectF: function (event) {
      this.activeTab3=2;
      this.analysisSearch();
      this.nodeSelectCk=false;
      this.address.crslk_az=0;
      if (this.itemsCk == 1) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisJaywalk.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        } else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);     
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 2) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalExtension.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonSignExtnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonSignExtnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);   
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 3) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalViolation.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);    
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 4) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisError.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonTroblOcrnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonTroblOcrnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
    },

    //행정동 Select 선택시 바로 위치 이동
    dongSelectF: function (event) {
      this.activeTab3=3;
      this.analysisSearch();
      this.nodeSelectCk=false;
      this.address.crslk_az=0;
      if (this.itemsCk == 1) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisJaywalk.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        } else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);     
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 2) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalExtension.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonSignExtnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonSignExtnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);   
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 3) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalViolation.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);    
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 4) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisError.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonTroblOcrnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonTroblOcrnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
    },

    //노드 Select 선택시 바로 위치 이동 횡단보도 노드
    nodeSelectF: function (event) {
      this.activeTab3=4;
      this.analysisSearch();
      this.nodeSelectCk=true;
      this.address.crslk_az=0;
      if (this.itemsCk == 1) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisJaywalk.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        } else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);     
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 2) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalExtension.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonSignExtnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonSignExtnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);   
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 3) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalViolation.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);    
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 4) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisError.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonTroblOcrnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonTroblOcrnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
    },
    crslkSelectF(event){
      this.activeTab3=4;
      this.analysisSearch();
      if (this.itemsCk == 1) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisJaywalk.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        } else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);     
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 2) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalExtension.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonSignExtnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonSignExtnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);   
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 3) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalViolation.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);    
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
      else if (this.itemsCk == 4) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisError.json");

        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonTroblOcrnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonTroblOcrnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
      }
    },
    statusSearch: function () {
      //무단횡단
      if (this.itemsCk == 1) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisJaywalk.json");
        this.analysisSearch();
      }
      //신호연장
      if (this.itemsCk == 2) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalExtension.json");
        this.analysisSearch()
      } 
      //우회전 차량
      if (this.itemsCk == 3) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalViolation.json");
        this.analysisSearch()
      } 
      // 장애발생
      if (this.itemsCk == 4) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisError.json");
        this.analysisSearch()
      } 
    },

    changeClusterLayer: function () {
      //클러스터 체크
      this.clusterCk = true;
      //레이어 체크
      this.layerCk = false;
      //히트맵 체크
      this.heatmapCk = false;
      //무단횡단
      if (this.itemsCk == 1) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      }
      //신호연장
      if (this.itemsCk == 2) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      } 
      //우회전 차량
      if (this.itemsCk == 3) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      } 
      // 장애발생
      if (this.itemsCk == 4) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      } 
    },
    changeLayer: function () {
      //클러스터 체크
      this.clusterCk = false;
      //레이어 체크
      this.layerCk = true;
      //히트맵 체크
      this.heatmapCk = false;
      //무단횡단
      if (this.itemsCk == 1) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
        this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);     
      }
      //신호연장
      if (this.itemsCk == 2) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonSignExtnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
        this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonSignExtnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);   
      } 
      //우회전 차량
      if (this.itemsCk == 3) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
        this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);    
      } 
      // 장애발생
      if (this.itemsCk == 4) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonTroblOcrnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
        this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonTroblOcrnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);
      } 
    },
    changeHeatmapLayer: function () {
      //클러스터 체크
      this.clusterCk = false;
      //레이어 체크
      this.layerCk = false;
      //히트맵 체크
      this.heatmapCk = true;

      if (this.itemsCk == 1) {
        this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      }
      if (this.itemsCk == 1) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      }
      //신호연장
      if (this.itemsCk == 2) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      } 
      //우회전 차량
      if (this.itemsCk == 3) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      } 
      // 장애발생
      if (this.itemsCk == 4) {
        this.$refs.open_layers.removeLayerAll();
        this.$refs.open_layers.setBaseMap(vworldBaseLayer);
        this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
        this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
      } 
    },
    childMoveEnd() {},
    childClick() {},
    childWheel() {},
    toggleSlide: function () {
      if (this.showSlide) {
        this.slideText = "검색하기";
      } else {
        this.slideText = "창닫기";
      }
      this.showSlide = !this.showSlide;
    },
    changeTab(tabId) {
      this.activeTab = tabId;
    },
    changeTab2(tabId) {
      this.activeTab2 = tabId;
    },
    changeTab3(tabId) {
      this.activeTab3 = tabId;
    },
    toggleActive: function (item) {
      this.itemsCk=item.id;
      //무단횡단 탭
      if (item.id == 1) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisJaywalk.json");
        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        } else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonWtrmsCrosngLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);     
        } else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonWtrmsCrosngAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
        this.searchResultState = "무단횡단 발생";
      } 
      //신호연장 탭
      else if (item.id == 2) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalExtension.json");
        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonSignExtnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonSignExtnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);   
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonSignExtnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
        this.searchResultState = "신호연장 발생";
      } 
      //우회전 차량 탭
      else if (item.id == 3) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisSignalViolation.json");
        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonRittrnVhcleLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);    
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonRittrnVhcleAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
        this.searchResultState = "불법 우회전 발생";
      } 
      //장애발생 탭
      else if (item.id == 4) {
        this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisError.json");
        if (this.clusterCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addClusterLayerByUrl( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }else if (this.layerCk) {
          console.log("layerck");
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addLayerTypeLayer("/common/getPolygonGeoJsonTroblOcrnLayerTypeCntAnalysis.json","multiPolygonForAnalysis","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address);
          this.$refs.open_layers.addLayerTypeLayer("/common/getGeoJsonTroblOcrnLayerTypeCntAnalysis.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address);
        }else if (this.heatmapCk) {
          this.$refs.open_layers.removeLayerAll();
          this.$refs.open_layers.setBaseMap(vworldBaseLayer, event.target.value);
          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
          this.$refs.open_layers.addHeatmapLayer( "/common/getNodeGeoJsonTroblOcrnAnalysis.json", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address );
        }
        this.searchResultState = "장애발생";
      }
      for (var i = 0; i < 4; i++) {
        this.items[i].isActive = false;
      }
      item.isActive = !item.isActive;
    },
    initialDate: function () {
      const end_date = new Date(new Date().setDate(new Date().getDate()-1));
      this.address.end_date=this.yyyyMMdd(end_date); 
      const max_limit_date = new Date(end_date);
      this.max_limit_date=this.yyyyMMdd(max_limit_date);
      const start_date = new Date(end_date.setMonth(end_date.getMonth()-1));
      this.address.start_date=this.yyyyMMdd(start_date); 
      // console.log("this.address.start_date : ",this.address.start_date);
      // console.log("this.address.end_date : ",this.address.end_date);
    },
    yyyyMMdd : function(value){ 
          // 들어오는 value 값이 공백이면 그냥 공백으로 돌려줌
          if(value == '') return '';
      
          // 현재 Date 혹은 DateTime 데이터를 javaScript date 타입화
          var js_date = new Date(value);

          // 연도, 월, 일 추출
          var year = js_date.getFullYear();
          var month = js_date.getMonth() + 1;
          var day = js_date.getDate();

          // 월, 일의 경우 한자리 수 값이 있기 때문에 공백에 0 처리
          if(month < 10){
          	month = '0' + month;
          }

          if(day < 10){
          	day = '0' + day;
          }

          // 최종 포맷 (ex - '2021-10-08')
          return year + '-' + month + '-' + day;
	}
  },
  watch: {
    'itemsCk' :function(newValue,oldValue){
      // console.log("itemsCk newValue : ", newValue);
    },
    'address.start_date' :function(newValue){
      // console.log("address.start_date newValue : ", newValue);
      const min_limit_date = new Date(newValue);
      this.min_limit_date=this.yyyyMMdd(min_limit_date);
    },
    'min_limit_date':function(newValue){
      // console.log("address.min_limit_date newValue : ", newValue);
    },
    'address.end_date' :function(newValue){
      // console.log("address.end_date newValue : ", newValue);
    },
  },
  computed: {},
  mounted() {
    console.log("Main2 mounted");
    this.initialDate();
    this.analysisSearch();
    this.statisticalAnalysisAll("/statisticalAnalysis/statisticalAnalysisJaywalk.json");
    this.$refs.open_layers.setBaseMap(vworldBaseLayer);
    this.statusSearch();
  },
};
</script>

<style scoped>
@media all and (max-width: 479px) {
  .wrap {
    margin: 0 !important;
  }
  .result {
    min-height: 30rem;
  }
  .iconlist {
    width: -webkit-fill-available;
    height: 6rem;
    padding: 1rem;
  }
  .iconlist ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .top p {
    padding-right: 1rem;
  }
  .chart {
    width: -webkit-fill-available !important;
  }

  .top {
    width: auto;
    right: -1rem;
  }
  .top ul {
    width: 137rem;
    overflow: hidden;
    justify-content: space-between !important;
    padding: 2rem 1rem !important;
  }
  .top li {
    display: flex;
    align-items: center;
  }
  .search {
    width: inherit;
  }
  .toggle {
    color: #fff;
    font-weight: bold;
    background: #13833b;
    display: block !important;
    position: absolute;
    z-index: 150;
    top: 7.5rem;
    right: 1rem;
  }
  .wrap {
    height: auto !important;
    width: inherit;
    display: block;
  }
  .slide-content {
    position: absolute;
    z-index: 104;
    top: 0rem;
    left: 0rem;
    /* width: 46rem;*/
    background-color: #f0f0f0;
    transition: transform 0.3s ease;
    transform: translateX(100%);
  }

  .slide-content.active {
    transform: translateX(0);
  }
}
.ulbox ul li p{font-size: 13px;}
.boxwrap {
  height: calc(100% - 3rem);
}
.tab-content {
  height: calc(100% - 6rem);
}
.tab-content .box {
  padding: 1rem;
}
.tab-buttons .ulbox {
  height: calc(100% - 3rem);
  overflow: scroll;
  overflow-x: hidden;
}
.ulbox ul {
  height: 30rem;
}
.toggle {
  display: none;
}
.wrap {
  flex-wrap: unset;
}
.boxwrap {
  height: 100%;
}
.boxwrap h2 {
  border-radius: 10px 10px 0 0;
}
.minichart {
  height: 90%;
}
.inner {
  width: 100%;
  height: 100%;
}
.inner > div {
  height: 100%;
}
.box button.gray-btn.active {
  /* Your CSS styles for the button when it's active (clicked) */
  background-color: #13833b;
  color: #fff;
  /* Add any other styles you want to apply when the button is active */
}
.chart {
  width: 25%;
  height: 97%;
  position: absolute;
  right: 2rem;
  top: 2rem;
}
/* .chart .box > div {
  height: 69%;
} */
.chart .box {
  width: -webkit-fill-available;
  height: 100%;
}
.chart .box button {
  border-radius: 0;
}
.chart > div {
  /* height: 95%; */
}
.chart h2 {
  padding: 0.5rem 0;
    height: 3.4rem;
}
.search .box ul {
}
.search .box ul li {
  padding: 1rem 1rem 1rem 3rem;
}
.result {
  position: relative;
}
h5 {
  position: absolute;
  left: 0;
  font-size: 2rem;
}
.box {
  text-align: left;
}
h4 {
  position: relative;
  border-bottom: 1px solid #e5e3e3;
  padding: 0 0 1rem 0;
  text-align: left;
}
.btn_set {
  height: revert !important;
}
.btn_set div {
  position: absolute;
  top: 40px;
  width: 313px;
  height: 380px;
  background: #fff;
  padding: 1rem;
}
.bg-white::-webkit-scrollbar-thumb {
  background-color: #fff;
}
h2 {
  background: #50ba8a;
  text-align: center;
  color: #fff;
  padding: 1.6rem 0;
}

.top {
  position: absolute;
  top: 0;
  background: none;
  margin: 2rem;
  height: 2rem;
}
.wrap {
  z-index: 100;
  top: 0;
  height: 100%;
}
.left {
  background: #fff;
}
.right {
  width: -webkit-fill-available;
  position: relative;
}
.top button.clicked {
  background: #50ba8a;
}
.map {
  width: 100%;
  height: 100%;
}
</style>
