Commit @2073bdce2cf5dc72e6e13b8e6c17ca36e5a14bc8

최정임 2023-07-27
230727 최정임 통계분석 css 조절
@2073bdce2cf5dc72e6e13b8e6c17ca36e5a14bc8
3abab81
2073bdc
client/views/pages/Analysis/Analysis.vue
--- client/views/pages/Analysis/Analysis.vue
+++ client/views/pages/Analysis/Analysis.vue

             </div>
             <div class="grid3_7 m-b gap">
               <label for="">횡단보도</label>
-              <select name="crslk_azSelectList" id="crslk_azSelectList" v-model="address.crslk_az">
-                <option :value="0" disabled> 횡단보도 </option>
+              <select
+                name="crslk_azSelectList"
+                id="crslk_azSelectList"
+                v-model="address.crslk_az"
+              >
+                <option :value="0" disabled>횡단보도</option>
                 <option :value="10">북</option>
                 <option :value="50">북동</option>
                 <option :value="20">동</option>

                 <option :value="70">남서</option>
                 <option :value="40">서</option>
                 <option :value="80">북서</option>
-            </select>
+              </select>
             </div>
             <div class="flex-center">
               <button type="button" class="btn-l gr-btn search-btn">

             </div>
           </div>
           <h2>검색결과</h2>
-          <div class="box tab-buttons result" style="height: calc(100% - 45rem);">
+          <div
+            class="box tab-buttons result"
+            style="height: calc(100% - 45rem)"
+          >
             <h4>총 <em style="color: #13833b">200</em>건</h4>
             <div class="ulbox" style="">
-              <ul >
-                <li class="result" v-for="(item, idx) in searchResult" :key="idx">
+              <ul>
+                <li
+                  class="result"
+                  v-for="(item, idx) in searchResult"
+                  :key="idx"
+                >
                   <h5>{{ idx + 1 }}</h5>
                   <p class="m-b">시도: {{ item.dong }}</p>
                   <p class="m-b">

                   </p>
                   <p class="m-b">X좌표: {{ item.lat }}</p>
                   <p class="m-b">Y좌표: {{ item.lon }}</p>
-                  <p class="">{{searchResultState}} 수: {{ item.cnt }}</p>
+                  <p class="">{{ searchResultState }} 수: {{ item.cnt }}</p>
                 </li>
               </ul>
             </div>

             v-show="activeTab3 === tab.id"
           >
             <div v-show="tab.content1" class="box">
-              <Chart :data="dongData" :theme="themeList[8]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
+              <Chart
+                :data="dongData"
+                :theme="themeList[8]"
+                :categoryDataList="categoryDataList"
+                :valueDataList="valueDataList"
+              ></Chart>
             </div>
             <div v-show="tab.content2" class="box">
-              <Chart :data="nodeData" :theme="themeList[8]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
+              <Chart
+                :data="nodeData"
+                :theme="themeList[8]"
+                :categoryDataList="categoryDataList"
+                :valueDataList="valueDataList"
+              ></Chart>
             </div>
           </div>
         </div>

     </div>
     <div class="boxwrap bg-white2 b-r b-shadow">
       <h2>발생 현황</h2>
-      <div class="grid" style="height: 100%">
-        <div class="flex">
-          <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"
+      <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"
-              v-show="activeTab === tab.id"
+              :class="{ active: activeTab === tab.id }"
+              @click="changeTab(tab.id)"
             >
-              <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>
+              {{ 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="flex">
-          <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"
+        <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"
-              v-show="activeTab2 === tab.id"
+              :class="{ active: activeTab2 === tab.id }"
+              @click="changeTab2(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>
+              {{ 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 class="boxwrap bg-white2 b-r b-shadow">
       <h2>서구 발생현황</h2>
       <div class="minichart">
-          <Chart :data="dongData" :theme="themeList[1]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
+        <Chart
+          :data="dongData"
+          :theme="themeList[1]"
+          :categoryDataList="categoryDataList"
+          :valueDataList="valueDataList"
+        ></Chart>
       </div>
     </div>
   </div>
 </template>
 <script>
-import Chart from "../../component/chart/ChartMain.vue"
+import Chart from "../../component/chart/ChartMain.vue";
 import Chart1 from "./Chart1.vue";
 import Chart2 from "./Chart2.vue";
 import Chart3 from "./Chart3.vue";

 import { baseStyles } from "../../component/OpenLayersStyle.vue";
 import axios from "axios";
 import DongSelectList from "../../component/dongSelectList.vue";
-import ChartMainVue from '../../component/chart/ChartMain.vue';
+import ChartMainVue from "../../component/chart/ChartMain.vue";
 
 export default {
   data() {

         lon: null,
         baseSource: "EPSG:5181",
       },
-      searchResultState:"무단횡단 발생",
+      searchResultState: "무단횡단 발생",
       searchResult: [
-      {
+        {
           dong: "대구광역시 서구 상중이동",
           node: "에덴둥지맨션",
           lat: "35.86492",

       heatmapCk: false,
 
       // 차트 데이터
-      monthData: [{
+      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: [{
+        },
+      ],
+      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: [{
+        },
+      ],
+      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:[{
+      weekData: [
+        {
           category: "월요일",
           value1: 1000,
-      }, {
+        },
+        {
           category: "화요일",
           value1: 1200,
-      }, {
+        },
+        {
           category: "수요일",
           value1: 850,
-      }, {
+        },
+        {
           category: "목요일",
           value1: 1050,
-      }, {
+        },
+        {
           category: "금요일",
           value1: 953,
-      }, {
+        },
+        {
           category: "토요일",
           value1: 815,
-      }, {
+        },
+        {
           category: "일요일",
           value1: 780,
-      }],
+        },
+      ],
 
-      nodeData:[{
+      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,
-      }],
+        },
+      ],
 
-
-
-      heatMapData: [{
+      heatMapData: [
+        {
           week: "Monday",
           quarter: "0-6시",
           category2: "동구",
           value1: 1000,
-          value2: 588
-      }, {
+          value2: 588,
+        },
+        {
           week: "Monday",
           quarter: "7-12시",
           category2: "동구",
           value1: 1200,
-          value2: 1800
-      }, {
+          value2: 1800,
+        },
+        {
           week: "Monday",
           quarter: "13-18시",
           category2: "동구",
           value1: 850,
-          value2: 1230
-      }, {
+          value2: 1230,
+        },
+        {
           week: "Monday",
           quarter: "19-24시",
           category2: "동구",
           value1: 1050,
           value2: 950,
-      }, {
+        },
+        {
           week: "Tuesday",
           quarter: "0-6시",
           category2: "중구",
           value1: 2000,
-          value2: 458
-      }, {
+          value2: 458,
+        },
+        {
           week: "Tuesday",
           quarter: "7-12시",
           category2: "중구",
           value1: 4000,
-          value2: 2100
-      }, {
+          value2: 2100,
+        },
+        {
           week: "Tuesday",
           quarter: "13-18시",
           category2: "중구",
           value1: 2500,
-          value2: 1430
-      }, {
+          value2: 1430,
+        },
+        {
           week: "Tuesday",
           quarter: "19-24시",
           category2: "중구",
           value1: 3100,
           value2: 1150,
-      }, {
+        },
+        {
           week: "Wednesday",
           quarter: "0-6시",
           category2: "동구",
           value1: 1800,
-          value2: 1588
-      }, {
+          value2: 1588,
+        },
+        {
           week: "Wednesday",
           quarter: "7-12시",
           category2: "중구",
           value1: 4200,
-          value2: 900
-      }, {
+          value2: 900,
+        },
+        {
           week: "Wednesday",
           quarter: "13-18시",
           category2: "서구",
           value1: 3500,
-          value2: 430
-      }, {
+          value2: 430,
+        },
+        {
           week: "Wednesday",
           quarter: "19-24시",
           category2: "남구",
           value1: 2300,
           value2: 1850,
-      }],
+        },
+      ],
 
       // Set data
-      dongData : [{
-        country: "평리동",
-        value: 2504
-      }, {
-        country: "운대동",
-        value: 4011
-      }, {
-        country: "내당동",
-        value: 3224
-      }, {
-        country: "상중이동",
-        value: 4523
-      }, {
-        country: "비산동",
-        value: 4342
-      }],
+      dongData: [
+        {
+          country: "평리동",
+          value: 2504,
+        },
+        {
+          country: "운대동",
+          value: 4011,
+        },
+        {
+          country: "내당동",
+          value: 3224,
+        },
+        {
+          country: "상중이동",
+          value: 4523,
+        },
+        {
+          country: "비산동",
+          value: 4342,
+        },
+      ],
       // 차트 테마 목록
-      themeList: ["XY", "YX", "ClusterXY", "ClusterYX", "StackXY", "StackYX", "Line", "ClusterLine", "Pie", "Donut", "HeatMap"],
-
+      themeList: [
+        "XY",
+        "YX",
+        "ClusterXY",
+        "ClusterYX",
+        "StackXY",
+        "StackYX",
+        "Line",
+        "ClusterLine",
+        "Pie",
+        "Donut",
+        "HeatMap",
+      ],
     };
   },
   components: {
     ClusterPopup: ClusterPopup,
-    Chart : Chart,
+    Chart: Chart,
     Chart1: Chart1,
     Chart2: Chart2,
     Chart3: Chart3,

       // this.$refs.open_layers.setZoom(this.address.zoomLevel);
 
       // 지역 중앙에 노드 + 이름 넣기
-      this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
+      this.$refs.open_layers.addVectorLayerAutoSizeByUrl(
+        "/common/getDongsGeoJson.json",
+        "multiPolygonLayer",
+        "EPSG:5181",
+        baseStyles["MultiPolygon"],
+        "MultiPolygon",
+        this.address.dong_cd
+      );
       //polygon 그리기
-      this.$refs.open_layers.addClusterLayer("/common/getCrslksGeoJsonUsingDong.json","clusterLayer","EPSG:5181",baseStyles["clusterStyle"],"clusterStyle",this.address.siDo_dong_cd);
+      this.$refs.open_layers.addClusterLayer(
+        "/common/getCrslksGeoJsonUsingDong.json",
+        "clusterLayer",
+        "EPSG:5181",
+        baseStyles["clusterStyle"],
+        "clusterStyle",
+        this.address.siDo_dong_cd
+      );
     },
 
     //행정동 Select 선택시 바로 위치 이동

       // this.$refs.open_layers.setZoom(this.address.zoomLevel);
 
       // 행정동에 포함된 노드 넣기
-      this.$refs.open_layers.addVectorLayerAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
+      this.$refs.open_layers.addVectorLayerAutoSizeByUrl(
+        "/common/getDongsGeoJson.json",
+        "multiPolygonLayer",
+        "EPSG:5181",
+        baseStyles["MultiPolygon"],
+        "MultiPolygon",
+        this.address.dong_cd
+      );
       //polygon 그리기
-      this.$refs.open_layers.addClusterLayer("/common/getCrslksGeoJsonUsingDong.json","clusterLayer","EPSG:5181",baseStyles["clusterStyle"],"clusterStyle",this.address.siDo_dong_cd);
+      this.$refs.open_layers.addClusterLayer(
+        "/common/getCrslksGeoJsonUsingDong.json",
+        "clusterLayer",
+        "EPSG:5181",
+        baseStyles["clusterStyle"],
+        "clusterStyle",
+        this.address.siDo_dong_cd
+      );
     },
 
     //노드 Select 선택시 바로 위치 이동 횡단보도 노드

       //기존 layer 지우기
       this.$refs.open_layers.removeLayerAll();
       //기본 지도 layer 그리기 + 해당 위치로 이동
-      this.$refs.open_layers.setBaseMap(vworldBaseLayer,this.address.dong_cd,event.target.value);
+      this.$refs.open_layers.setBaseMap(
+        vworldBaseLayer,
+        this.address.dong_cd,
+        event.target.value
+      );
       // this.$refs.open_layers.setZoom(this.address.zoomLevel);
       //polygon 그리기
-      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
+      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+        "/common/getDongsGeoJson.json",
+        "multiPolygonLayer",
+        "EPSG:5181",
+        baseStyles["MultiPolygon"],
+        "MultiPolygon",
+        this.address.dong_cd
+      );
       // 노드 중앙에 노드 그리기
-      this.$refs.open_layers.addClusterLayer("/common/getCrslksGeoJsonUsingDong.json","clusterLayer","EPSG:5181",baseStyles["clusterStyle"],"clusterStyle",this.address.siDo_dong_cd);
+      this.$refs.open_layers.addClusterLayer(
+        "/common/getCrslksGeoJsonUsingDong.json",
+        "clusterLayer",
+        "EPSG:5181",
+        baseStyles["clusterStyle"],
+        "clusterStyle",
+        this.address.siDo_dong_cd
+      );
     },
 
     changeClusterLayer() {

       this.$refs.open_layers.removeLayer("nodeLayer");
       // this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl( "/common/getDongsGeoJson.json","multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", this.address.dong_cd);
       // this.$refs.open_layers.addClusterLayer("/common/getCrslksGeoJsonUsingDong.json","clusterLayer", "EPSG:5181",  baseStyles['clusterStyle'], "clusterStyle", this.address.siDo_dong_cd );
-      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl( "/common/getDongsPolygonGeoJson.json", "multPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", this.address.guGun_dong_cd);
-      this.$refs.open_layers.dumpClusterLayer( "무단", "clusterLayer",  "EPSG:5181", baseStyles["clusterStyle"], "clusterStyle", this.address.siDo_dong_cd );
+      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+        "/common/getDongsPolygonGeoJson.json",
+        "multPolygonLayer",
+        "EPSG:5181",
+        baseStyles["MultiPolygon"],
+        "MultiPolygon",
+        this.address.guGun_dong_cd
+      );
+      this.$refs.open_layers.dumpClusterLayer(
+        "무단",
+        "clusterLayer",
+        "EPSG:5181",
+        baseStyles["clusterStyle"],
+        "clusterStyle",
+        this.address.siDo_dong_cd
+      );
     },
     changeLayer() {
       //클러스터 체크

       this.$refs.open_layers.removeLayer("multPolygonLayer");
       this.$refs.open_layers.removeLayer("nodeLayer");
       // this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getCrslksGeoJsonUsingDong.json","nodeLayer", "EPSG:5181", baseStyles['labelStyle'], 'label', this.address.siDo_dong_cd );
-      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address.guGun_dong_cd);
-      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsCenterJson.json","labelForAnalysis","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address.guGun_dong_cd);
+      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+        "/common/getDongsPolygonGeoJson.json",
+        "multPolygonLayer",
+        "EPSG:5181",
+        baseStyles["MultiPolygonForAnalysis"],
+        "MultiPolygonForAnalysis",
+        this.address.guGun_dong_cd
+      );
+      this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+        "/common/getDongsCenterJson.json",
+        "labelForAnalysis",
+        "EPSG:5181",
+        baseStyles["labelForAnalysis"],
+        "labelForAnalysis",
+        this.address.guGun_dong_cd
+      );
     },
     changeHeatmapLayer() {
       //클러스터 체크

           this.$refs.open_layers.removeLayer("clusterLayer");
           this.$refs.open_layers.removeLayer("multPolygonLayer");
           this.$refs.open_layers.removeLayer("nodeLayer");
-          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl( "/common/getDongsPolygonGeoJson.json", "multPolygonLayer",  "EPSG:5181",  baseStyles["MultiPolygon"], "MultiPolygon", this.address.guGun_dong_cd  );
-          this.$refs.open_layers.dumpClusterLayer( "무단", "clusterLayer", "EPSG:5181",baseStyles["clusterStyle"], "clusterStyle", this.address.siDo_dong_cd);
+          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+            "/common/getDongsPolygonGeoJson.json",
+            "multPolygonLayer",
+            "EPSG:5181",
+            baseStyles["MultiPolygon"],
+            "MultiPolygon",
+            this.address.guGun_dong_cd
+          );
+          this.$refs.open_layers.dumpClusterLayer(
+            "무단",
+            "clusterLayer",
+            "EPSG:5181",
+            baseStyles["clusterStyle"],
+            "clusterStyle",
+            this.address.siDo_dong_cd
+          );
         } else if (this.layerCk) {
           this.$refs.open_layers.removeLayer("MultiPolygonForAnalysis");
           this.$refs.open_layers.removeLayer("labelForAnalysis");
           this.$refs.open_layers.removeLayer("clusterLayer");
           this.$refs.open_layers.removeLayer("multPolygonLayer");
           this.$refs.open_layers.removeLayer("nodeLayer");
-          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygonForAnalysis"],"MultiPolygonForAnalysis",this.address.guGun_dong_cd);
-          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsCenterJson.json","nodeLayer","EPSG:5181",baseStyles["labelForAnalysis"],"labelForAnalysis",this.address.guGun_dong_cd);
+          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+            "/common/getDongsPolygonGeoJson.json",
+            "multPolygonLayer",
+            "EPSG:5181",
+            baseStyles["MultiPolygonForAnalysis"],
+            "MultiPolygonForAnalysis",
+            this.address.guGun_dong_cd
+          );
+          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+            "/common/getDongsCenterJson.json",
+            "nodeLayer",
+            "EPSG:5181",
+            baseStyles["labelForAnalysis"],
+            "labelForAnalysis",
+            this.address.guGun_dong_cd
+          );
         } else if (this.heatmapCk) {
-
         }
-        this.searchResultState='무단횡단 발생'
+        this.searchResultState = "무단횡단 발생";
 
-        this.searchResult= [
-      {
-          dong: "대구광역시 서구 상중이동",
-          node: "에덴둥지맨션",
-          lat: "35.86492",
-          lon: "128.55006",
-          cnt: "57",
-        },
-        {
-          dong: "대구광역시 서구 평리3동",
-          node: "비산초등",
-          lat: "35.877758",
-          lon: "128.56302",
-          cnt: "76",
-        },
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "이현파출소",
-          lat: "35.86879",
-          lon: "128.54343",
-          cnt: "54",
-        },
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "달서초등(A)",
-          lat: "35.86729",
-          lon: "128.54962",
-          cnt: "42",
-        },
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "에덴둥지맨션",
-          lat: "35.86492",
-          lon: "128.55006",
-          cnt: "57",
-        },
-      ];
+        this.searchResult = [
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "에덴둥지맨션",
+            lat: "35.86492",
+            lon: "128.55006",
+            cnt: "57",
+          },
+          {
+            dong: "대구광역시 서구 평리3동",
+            node: "비산초등",
+            lat: "35.877758",
+            lon: "128.56302",
+            cnt: "76",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "이현파출소",
+            lat: "35.86879",
+            lon: "128.54343",
+            cnt: "54",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "달서초등(A)",
+            lat: "35.86729",
+            lon: "128.54962",
+            cnt: "42",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "에덴둥지맨션",
+            lat: "35.86492",
+            lon: "128.55006",
+            cnt: "57",
+          },
+        ];
       } else if (item.id == 2) {
         if (this.clusterCk) {
           this.$refs.open_layers.removeLayer("MultiPolygonForAnalysis");

           this.$refs.open_layers.removeLayer("clusterLayer");
           this.$refs.open_layers.removeLayer("multPolygonLayer");
           this.$refs.open_layers.removeLayer("nodeLayer");
-          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.guGun_dong_cd);
-          this.$refs.open_layers.dumpClusterLayer("신호","clusterLayer","EPSG:5181",baseStyles["clusterStyle"],"clusterStyle",this.address.siDo_dong_cd);
+          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+            "/common/getDongsPolygonGeoJson.json",
+            "multPolygonLayer",
+            "EPSG:5181",
+            baseStyles["MultiPolygon"],
+            "MultiPolygon",
+            this.address.guGun_dong_cd
+          );
+          this.$refs.open_layers.dumpClusterLayer(
+            "신호",
+            "clusterLayer",
+            "EPSG:5181",
+            baseStyles["clusterStyle"],
+            "clusterStyle",
+            this.address.siDo_dong_cd
+          );
         }
-        this.searchResultState='신호연장 발생'
+        this.searchResultState = "신호연장 발생";
 
-        this.searchResult= [
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "달서초등(A)",
-          lat: "35.86729",
-          lon: "128.54962",
-          cnt: "42",
-        },
-        {
-          dong: "대구광역시 서구 평리3동",
-          node: "비산초등",
-          lat: "35.877758",
-          lon: "128.56302",
-          cnt: "76",
-        },
-      {
-          dong: "대구광역시 서구 상중이동",
-          node: "에덴둥지맨션",
-          lat: "35.86492",
-          lon: "128.55006",
-          cnt: "57",
-        },
-        
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "이현파출소",
-          lat: "35.86879",
-          lon: "128.54343",
-          cnt: "54",
-        },
-        
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "에덴둥지맨션",
-          lat: "35.86492",
-          lon: "128.55006",
-          cnt: "57",
-        },
-      ];
+        this.searchResult = [
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "달서초등(A)",
+            lat: "35.86729",
+            lon: "128.54962",
+            cnt: "42",
+          },
+          {
+            dong: "대구광역시 서구 평리3동",
+            node: "비산초등",
+            lat: "35.877758",
+            lon: "128.56302",
+            cnt: "76",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "에덴둥지맨션",
+            lat: "35.86492",
+            lon: "128.55006",
+            cnt: "57",
+          },
+
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "이현파출소",
+            lat: "35.86879",
+            lon: "128.54343",
+            cnt: "54",
+          },
+
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "에덴둥지맨션",
+            lat: "35.86492",
+            lon: "128.55006",
+            cnt: "57",
+          },
+        ];
       } else if (item.id == 3) {
         if (this.clusterCk) {
           this.$refs.open_layers.removeLayer("MultiPolygonForAnalysis");

           this.$refs.open_layers.removeLayer("clusterLayer");
           this.$refs.open_layers.removeLayer("multPolygonLayer");
           this.$refs.open_layers.removeLayer("nodeLayer");
-          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.guGun_dong_cd);
-          this.$refs.open_layers.dumpClusterLayer("우회","clusterLayer","EPSG:5181",baseStyles["clusterStyle"],"clusterStyle",this.address.siDo_dong_cd);
+          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+            "/common/getDongsPolygonGeoJson.json",
+            "multPolygonLayer",
+            "EPSG:5181",
+            baseStyles["MultiPolygon"],
+            "MultiPolygon",
+            this.address.guGun_dong_cd
+          );
+          this.$refs.open_layers.dumpClusterLayer(
+            "우회",
+            "clusterLayer",
+            "EPSG:5181",
+            baseStyles["clusterStyle"],
+            "clusterStyle",
+            this.address.siDo_dong_cd
+          );
         }
-        this.searchResultState='불법 우회전 발생'
+        this.searchResultState = "불법 우회전 발생";
 
-        this.searchResult= [
-        {
-          dong: "대구광역시 서구 평리3동",
-          node: "비산초등",
-          lat: "35.877758",
-          lon: "128.56302",
-          cnt: "76",
-        },
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "에덴둥지맨션",
-          lat: "35.86492",
-          lon: "128.55006",
-          cnt: "57",
-        },
-      {
-          dong: "대구광역시 서구 상중이동",
-          node: "에덴둥지맨션",
-          lat: "35.86492",
-          lon: "128.55006",
-          cnt: "57",
-        },
-        
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "이현파출소",
-          lat: "35.86879",
-          lon: "128.54343",
-          cnt: "54",
-        },
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "달서초등(A)",
-          lat: "35.86729",
-          lon: "128.54962",
-          cnt: "42",
-        },
-        
-      ];
+        this.searchResult = [
+          {
+            dong: "대구광역시 서구 평리3동",
+            node: "비산초등",
+            lat: "35.877758",
+            lon: "128.56302",
+            cnt: "76",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "에덴둥지맨션",
+            lat: "35.86492",
+            lon: "128.55006",
+            cnt: "57",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "에덴둥지맨션",
+            lat: "35.86492",
+            lon: "128.55006",
+            cnt: "57",
+          },
+
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "이현파출소",
+            lat: "35.86879",
+            lon: "128.54343",
+            cnt: "54",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "달서초등(A)",
+            lat: "35.86729",
+            lon: "128.54962",
+            cnt: "42",
+          },
+        ];
       } else if (item.id == 4) {
         if (this.clusterCk) {
           this.$refs.open_layers.removeLayer("MultiPolygonForAnalysis");

           this.$refs.open_layers.removeLayer("clusterLayer");
           this.$refs.open_layers.removeLayer("multPolygonLayer");
           this.$refs.open_layers.removeLayer("nodeLayer");
-          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl("/common/getDongsPolygonGeoJson.json","multPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.guGun_dong_cd);
-          this.$refs.open_layers.dumpClusterLayer("장애","clusterLayer","EPSG:5181",baseStyles["clusterStyle"],"clusterStyle",this.address.siDo_dong_cd);
+          this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
+            "/common/getDongsPolygonGeoJson.json",
+            "multPolygonLayer",
+            "EPSG:5181",
+            baseStyles["MultiPolygon"],
+            "MultiPolygon",
+            this.address.guGun_dong_cd
+          );
+          this.$refs.open_layers.dumpClusterLayer(
+            "장애",
+            "clusterLayer",
+            "EPSG:5181",
+            baseStyles["clusterStyle"],
+            "clusterStyle",
+            this.address.siDo_dong_cd
+          );
         }
-        this.searchResultState='장애발생'
-        this.searchResult= [
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "이현파출소",
-          lat: "35.86879",
-          lon: "128.54343",
-          cnt: "54",
-        },
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "달서초등(A)",
-          lat: "35.86729",
-          lon: "128.54962",
-          cnt: "42",
-        },
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "에덴둥지맨션",
-          lat: "35.86492",
-          lon: "128.55006",
-          cnt: "57",
-        },
-        {
-          dong: "대구광역시 서구 상중이동",
-          node: "대구의료원입구(A)",
-          lat: "35.859085",
-          lon: "128.54163",
-          cnt: "24",
-        },
-        {
-          dong: "대구광역시 서구 평리3동",
-          node: "비산초등",
-          lat: "35.877758",
-          lon: "128.56302",
-          cnt: "76",
-        },
-      ];
+        this.searchResultState = "장애발생";
+        this.searchResult = [
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "이현파출소",
+            lat: "35.86879",
+            lon: "128.54343",
+            cnt: "54",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "달서초등(A)",
+            lat: "35.86729",
+            lon: "128.54962",
+            cnt: "42",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "에덴둥지맨션",
+            lat: "35.86492",
+            lon: "128.55006",
+            cnt: "57",
+          },
+          {
+            dong: "대구광역시 서구 상중이동",
+            node: "대구의료원입구(A)",
+            lat: "35.859085",
+            lon: "128.54163",
+            cnt: "24",
+          },
+          {
+            dong: "대구광역시 서구 평리3동",
+            node: "비산초등",
+            lat: "35.877758",
+            lon: "128.56302",
+            cnt: "76",
+          },
+        ];
       }
       for (var i = 0; i < 4; i++) {
         this.items[i].isActive = false;

       this.$refs.open_layers.removeLayerAll();
       this.$refs.open_layers.setBaseMap(vworldBaseLayer);
       // this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','realtimeStatusMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',this.address.dong_cd);
-      this.$refs.open_layers.addHeatmapLayer("/common/getCrslksGeoJsonUsingDong.json","clusterLayer","EPSG:5181",baseStyles["heatmapStyle"],"heatmapStyle",this.address.siDo_dong_cd);
+      this.$refs.open_layers.addHeatmapLayer(
+        "/common/getCrslksGeoJsonUsingDong.json",
+        "clusterLayer",
+        "EPSG:5181",
+        baseStyles["heatmapStyle"],
+        "heatmapStyle",
+        this.address.siDo_dong_cd
+      );
       // this.$refs.open_layers.createClusterSource();
     },
     setDongCd(value) {

     transform: translateX(0);
   }
 }
-.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;}
+.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 {
+  height: 100%;
+}
 .boxwrap h2 {
   border-radius: 10px 10px 0 0;
 }

 }
 .chart h2 {
   padding: 0.5rem 0;
+    height: 3.4rem;
 }
 .search .box ul {
 }
Add a comment
Open 0
Closed 0
List
Delete comment
