Commit @25bc276d2725bc5f195721df25190b28d895e063

최정임 2023-06-29

230629 최정임 css 수정

@25bc276d2725bc5f195721df25190b28d895e063

494b4a4

25bc276

client/resources/css/layout.css

--- client/resources/css/layout.css

+++ client/resources/css/layout.css


-.flex-between {
-  height: 7rem;
-  width: 100%;
-  z-index: 2000;
-  padding: 0 4rem 0 1rem;
-  background: #13833b;
-  box-shadow: 0px 5px 20px #00000038;
-}
+header{background: #13833b; padding: 0 2rem;}
 .logo {
   display: flex;
   width: 30rem;

   align-items: center;
 }
 main {
-  padding: 2rem 9rem;
+  padding: 2rem 9rem ;   
 }
 
 body {
   /* overflow-x: hidden; */
 }
-
+ 
 footer {
   top: 100%;
   width: 100%;

494b4a4

25bc276

client/views/pages/RealtimeStatus/RealtimeStatus.vue

--- client/views/pages/RealtimeStatus/RealtimeStatus.vue

+++ client/views/pages/RealtimeStatus/RealtimeStatus.vue


   <div class="flex">
     <div class="left">
       <div class="wrap flex-between">
+        <button @click="toggleSlide" class="toggle">Toggle Slide</button>
         <!-- <div class="iconlist">
           <ul>
             <li v-for="item in items" :key="item.id" :class="{ active: item.isActive }" @click="toggleActive(item)">

             </li>
           </ul>
         </div> -->
-        <div class="search">
+        <div class="search slide-content" v-if="showSlide">
           <h2>지역설정</h2>
           <div class="box">
             <DongSelectList @setDongCd="setDongCd"></DongSelectList>

           <h2>조건설정</h2>
           <div class="box">
             <div class="flex-between m-b">
-              <input type="checkbox" v-model="condition['wtrms']"><label for="">무단횡단</label>
-              <input type="checkbox" v-model="condition['signExtn']" /><label for="">신호연장</label>
-              <input type="checkbox" v-model="condition['rittrnVhcle']" /><label for="">신호위반</label>
-              <input type="checkbox" v-model="condition['eqpmnTrobl']" /><label for="">장애발생</label>
+              <input type="checkbox" v-model="condition['wtrms']" /><label
+                for=""
+                >무단횡단</label
+              >
+              <input type="checkbox" v-model="condition['signExtn']" /><label
+                for=""
+                >신호연장</label
+              >
+              <input type="checkbox" v-model="condition['rittrnVhcle']" /><label
+                for=""
+                >신호위반</label
+              >
+              <input type="checkbox" v-model="condition['eqpmnTrobl']" /><label
+                for=""
+                >장애발생</label
+              >
             </div>
             <div class="flex-between m-b">
               <label for="date-input">일자</label>
-              <input id="date-input" type="date" v-model="condition['start_date']" :picker-options="startDateOptions" /> ~
-              <input id="date-input" type="date" v-model="condition['end_date']" :picker-options="endDateOptions" />
+              <input
+                id="date-input"
+                type="date"
+                v-model="condition['start_date']"
+                :picker-options="startDateOptions"
+              />
+              ~
+              <input
+                id="date-input"
+                type="date"
+                v-model="condition['end_date']"
+                :picker-options="endDateOptions"
+              />
             </div>
             <div class="flex-between m-b">
               <label for="time-input">시간대</label>
-              <input id="time-input" type="time" v-model="condition['start_time']" />~<input id="time-input" type="time"
-                v-model="condition['end_time']" />
+              <input
+                id="time-input"
+                type="time"
+                v-model="condition['start_time']"
+              />~<input
+                id="time-input"
+                type="time"
+                v-model="condition['end_time']"
+              />
             </div>
-            <button class="btn-l green-btn" @click="statusSearch" style="padding: 0.5rem 0">
+            <button
+              class="btn-l green-btn"
+              @click="statusSearch"
+              style="padding: 0.5rem 0"
+            >
               검색
             </button>
           </div>
           <h2>지역설정</h2>
           <div class="box bg-white tab-buttons">
             <div class="btn_set flex-center">
-              <button class="m-r" v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }"
-                @click="changeTab(tab.id)">
+              <button
+                class="m-r"
+                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">
+            <div
+              class="tab-content"
+              v-for="tab in tabs"
+              :key="tab.id"
+              v-show="activeTab === tab.id"
+            >
               <ul v-show="tab.content1">
                 <li>
                   <p class="m-b">발생일시: 2023-05-04 14:27</p>

       <div class="top">
         <ul class="flex-end">
           <li>
-            <p class="flex-center"><img class="m-r"
-                src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 보행자</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
+                alt
+              />금일 보행자
+            </p>
             <h3>명</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r"
-                src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 무단횡단 발생</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
+                alt
+              />금일 무단횡단 발생
+            </p>
             <h3>회</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
-                alt />금일 신호연장 발생</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
+                alt
+              />금일 신호연장 발생
+            </p>
             <h3>회</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
-                alt />금일 신호연장 시간</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
+                alt
+              />금일 신호연장 시간
+            </p>
             <h3>초</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
-                alt />금일 차량 신호위반 발생</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
+                alt
+              />금일 차량 신호위반 발생
+            </p>
             <h3>회</h3>
           </li>
           <li>
-            <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
-                alt />금일 장애 발생</p>
+            <p class="flex-center">
+              <img
+                class="m-r"
+                src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
+                alt
+              />금일 장애 발생
+            </p>
             <h3>회</h3>
           </li>
         </ul>

   vworldHybridLayer,
   vworldSatelliteLayer,
 } from "../../component/OpenLayersMap.vue";
-import { baseStyles } from '../../component/OpenLayersStyle.vue';
+import { baseStyles } from "../../component/OpenLayersStyle.vue";
 import axios from "axios";
-import DongSelectList from '../../component/dongSelectList.vue';
+import DongSelectList from "../../component/dongSelectList.vue";
 export default {
   data() {
     return {
+      showSlide: true,
       address: {},
       //조건설정
       condition: {

       },
       //달력에서 범위 설정 해주기 위해 (미완) -:picker-options-
       startDateOptions: {
-        disabledDate: this.disabledStDate
+        disabledDate: this.disabledStDate,
       },
       endDateOptions: {
-        disabledDate: this.disabledEdDate
+        disabledDate: this.disabledEdDate,
       },
 
       tabs: [

     DongSelectList: DongSelectList,
   },
   methods: {
+    toggleSlide() {
+      this.showSlide = !this.showSlide;
+    },
     //지역 및 조건 설정 안에 있는 횡단보도의 금일 보행자 무단횡단 신호연장 신호위반 장애발생 위치와 횟수
-
 
     //지역 및 조건 설정 안에 있는 횡단보도의 위치와 횟수의 합
 

       item.isActive = !item.isActive;
     },
     // disabledStDate(date){
-    //   date = moment(String(date)).format('YYYYMMDD') 
-    //   return date > moment().format('YYYYMMDD') || date < moment().add(-1, 'years').format('YYYYMMDD') 
+    //   date = moment(String(date)).format('YYYYMMDD')
+    //   return date > moment().format('YYYYMMDD') || date < moment().add(-1, 'years').format('YYYYMMDD')
     // },
     disabledEdDate(date) {
-      return date < this.condition.start_date
+      return date < this.condition.start_date;
     },
     statusSearch: function () {
       console.log("statusSearch this.address : ", this.address);
       //지도 영역 수정
       this.$refs.open_layers.removeLayerAll();
       this.$refs.open_layers.setBaseMap(vworldBaseLayer);
-      this.$refs.open_layers.addVectorLayerByUrl('/common/getDongGeoJson.json', 'realtimeStatusMap', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
-      this.$refs.open_layers.addClusterLayer('/common/getDongGeoJson.json', 'realtimeStatusMap', 'EPSG:5181', '', '', this.address.dong_cd);
+      this.$refs.open_layers.addVectorLayerByUrl(
+        "/common/getDongGeoJson.json",
+        "realtimeStatusMap",
+        "EPSG:5181",
+        baseStyles["MultiPolygon"],
+        "MultiPolygon",
+        this.address.dong_cd
+      );
+      this.$refs.open_layers.addClusterLayer(
+        "/common/getDongGeoJson.json",
+        "realtimeStatusMap",
+        "EPSG:5181",
+        "",
+        "",
+        this.address.dong_cd
+      );
       // this.situationOccurrenceStatusSearch();
-
     },
 
     //상황 발행 현황 검색
     situationOccurrenceStatusSearch: function () {
-      //검색 데이터 
+      //검색 데이터
       const vm = this;
       axios({
-        url: '/statusControl/statusSearch.json',
-        method: 'post',
+        url: "/statusControl/statusSearch.json",
+        method: "post",
         headers: {
-          'Content-Type': "application/json; charset=UTF-8",
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        data: { "address": vm.address, "condition": vm.condition }
-      }).then(function (response) {
-        console.log("statusSearch - response : ", response.data);
-        // vm.nodeList = response.data;
-      }).catch(function (error) {
-        console.log("statusSearch - error : ", error);
-      });
-
+        data: { address: vm.address, condition: vm.condition },
+      })
+        .then(function (response) {
+          console.log("statusSearch - response : ", response.data);
+          // vm.nodeList = response.data;
+        })
+        .catch(function (error) {
+          console.log("statusSearch - error : ", error);
+        });
     },
 
     setDongCd(value) {
       console.log("value : ", value);
       this.address = value;
-    }
+    },
   },
   watch: {},
   computed: {},
   mounted() {
     console.log("Main2 mounted");
     this.$refs.open_layers.setBaseMap(vworldBaseLayer);
-    //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');    
+    //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');
   },
 };
 </script>
 
 <style scoped>
+@media all and (max-width: 479px) {
+  .toggle{
+    display: block !important;
+    position: absolute;
+    z-index: 150;
+    top: 12rem;
+    left: 3rem;}
+  .wrap {
+    height: auto !important;
+  }
+  .slide-content {
+    position: fixed;
+    top: 0;
+    left: 0px;
+    width: -webkit-fill-available;
+    z-index: 50;
+    height: 100vh;
+    background-color: #f0f0f0;
+    transition: right 0.3s ease; /* Adjust the duration and easing as needed */
+  }
+
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: right 0.3s ease; /* Adjust the duration and easing as needed */
+  }
+
+  .slide-enter,
+  .slide-leave-to {
+    right: -300px; /* Initial and final position outside the viewport */
+  }
+}
+.toggle{display: none;}
 .chart div {
   min-height: 13rem;
 }

   width: -webkit-fill-available;
 }
 </style>
-

494b4a4

25bc276

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


 <template>
-  <div class="boxmenu">
-    <div class="box">
-      <div class="flex">
-        <img
-          src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
-          alt
-        />
-        <span class="box_title">금일 누적보행자 수</span>
+  <div class="maintop">
+    <div class="boxmenu">
+      <div class="box">
+        <div class="flex">
+          <img
+            src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
+            alt
+          />
+          <span class="box_title">금일 누적보행자 수</span>
+        </div>
+        <span class="box_num">00</span>
+        <span class="box_subtxt">명</span>
       </div>
-      <span class="box_num">00</span>
-      <span class="box_subtxt">명</span>
-    </div>
-    <div class="boxborder"></div>
-    <div class="box">
-      <div class="flex">
-        <img
-          src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
-          alt
-        />
-        <span class="box_title">금일 무단횡단 발생</span>
+      <div class="boxborder"></div>
+      <div class="box">
+        <div class="flex">
+          <img
+            src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
+            alt
+          />
+          <span class="box_title">금일 무단횡단 발생</span>
+        </div>
+        <span class="box_num">00</span>
+        <span class="box_subtxt">회</span>
       </div>
-      <span class="box_num">00</span>
-      <span class="box_subtxt">회</span>
-    </div>
-
-    <div class="boxborder"></div>
-    <div class="box">
-      <div class="flex">
-        <img
-          src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
-          alt
-        />
-        <span class="box_title">금일 신호연장 발생 수</span>
+  
+      <div class="boxborder"></div>
+      <div class="box">
+        <div class="flex">
+          <img
+            src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
+            alt
+          />
+          <span class="box_title">금일 신호연장 발생 수</span>
+        </div>
+        <span class="box_num">00</span>
+        <span class="box_subtxt">회</span>
       </div>
-      <span class="box_num">00</span>
-      <span class="box_subtxt">회</span>
-    </div>
-
-    <div class="boxborder"></div>
-    <div class="box">
-      <div class="flex">
-        <img
-          src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
-          alt
-        />
-        <span class="box_title">금일 신호연장</span>
+  
+      <div class="boxborder"></div>
+      <div class="box">
+        <div class="flex">
+          <img
+            src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
+            alt
+          />
+          <span class="box_title">금일 신호연장</span>
+        </div>
+        <span class="box_num">00</span>
+        <span class="box_subtxt">초</span>
       </div>
-      <span class="box_num">00</span>
-      <span class="box_subtxt">초</span>
-    </div>
-
-    <div class="boxborder"></div>
-    <div class="box">
-      <div class="flex">
-        <img
-          src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
-          alt
-        />
-        <span class="box_title">금일 신호 위반 발생</span>
+  
+      <div class="boxborder"></div>
+      <div class="box">
+        <div class="flex">
+          <img
+            src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
+            alt
+          />
+          <span class="box_title">금일 신호 위반 발생</span>
+        </div>
+        <span class="box_num">00</span>
+        <span class="box_subtxt">회</span>
       </div>
-      <span class="box_num">00</span>
-      <span class="box_subtxt">회</span>
-    </div>
-
-    <div class="boxborder"></div>
-    <div class="box">
-      <div class="flex">
-        <img
-          src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
-          alt
-        />
-        <span class="box_title">금일 장애 발생 수</span>
+  
+      <div class="boxborder"></div>
+      <div class="box">
+        <div class="flex">
+          <img
+            src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
+            alt
+          />
+          <span class="box_title">금일 장애 발생 수</span>
+        </div>
+        <span class="box_num">00</span>
+        <span class="box_subtxt">회</span>
       </div>
-      <span class="box_num">00</span>
-      <span class="box_subtxt">회</span>
     </div>
   </div>
   <div class="main_section">

   },
 };
 </script>
-<style>
+<style scoped>
 .box {
   text-align: end;
 }

   align-items: center;
   margin-bottom: 5rem;
 }
-
+.flex-between {
+  height: 7rem;
+  width: 100%;
+  z-index: 2000;
+  padding: 0 4rem 0 1rem;
+  background: #13833b;
+  box-shadow: 0px 5px 20px #00000038;
+}
 @media (max-width: 479px) {
+  .maintop{overflow: scroll;}
   .boxmenu {
-    width: 92vw;
-    height: 206px;
-    margin: 10px;
-    border-radius: 20px;
+        /* width: 92vw; */
+        height: fit-content;
+        display: flex !important;
+    /* margin: 10px; */
+    /* border-radius: 20px;*/
   }
+  .boxmenu{}
   .boxborder {
     display: none;
   }
-  .box {
-    width: 150px;
-    margin-top: 10px;
-    margin-right: 42px;
-    text-align: end;
-    float: left;
-  }
+  
   .box .flex {
     /* border: 1px solid red; */
     display: flex;

   }
   .barinfo {
     gap: 0;
-    width: 90vw;
+    /* width: 90vw; */
   }
   .barinfo img {
     width: 30px;

     font-size: 17px;
   }
 }
-@media (max-width: 375px) {
-  .box_title {
-    /* margin-top: 172px; */
-    width: 1000px;
-    /* border: 1px solid; */
-    color: #9c9b9a;
-    text-align: center;
-    /* margin-right: 30px; */
-    font-size: 15px;
-  }
-  .box {
-    width: 150px;
-    margin-top: 10px;
-    /* margin-right: -32px; */
-    text-align: end;
-    float: left;
-    margin: 0px;
-  }
-  .boxmenu img {
-    width: 35px;
-    display: none;
-  }
-  .boxmenu {
-    width: 92vw;
-    height: 206px;
-    margin: 10px;
-    border-radius: 20px;
-  }
-  .boxborder {
-    display: none;
-  }
-  .box {
-    width: 150px;
-    margin-top: 10px;
-    margin-right: 42px;
-    text-align: end;
-    float: left;
-  }
-  .box .flex {
-    /* border: 1px solid red; */
-    display: flex;
-    align-items: center;
-    width: 190px;
-    margin: 0px -8px 5px;
-  }
-  .box_title {
-    /* margin-top: 172px; */
-    width: 1000px;
-    /* border: 1px solid; */
-    color: #9c9b9a;
-    text-align: center;
-    /* margin-right: 30px; */
-    font-size: 15px;
-  }
-  .main_section h1 {
-    font-size: 20px;
-    color: #13833b;
-    margin: 3rem 0;
-    text-align: center;
-    width: 100vw;
-  }
-  .verticalbar {
-    width: 93vw;
-    border-radius: 15px;
-    background-color: #dddddd00;
-    margin-bottom: 3rem;
-    margin: 10px;
-    padding: 1rem;
-  }
-  .barinfo {
-    gap: 0;
-    width: 90vw;
-  }
-  .barinfo img {
-    width: 30px;
-    margin-top: 15px;
-  }
-  .bar_title {
-    color: #3b3d3d;
-    font-size: 8px;
-    gap: none;
-    display: inline;
-    display: none;
-  }
-  .main_section .elementtxt {
-    display: flex;
-    font-size: 8px;
-    width: 90px;
-    justify-content: center;
-    align-items: center;
-  }
-  .bar_element {
-    width: 100vw;
-    border-radius: 20px;
-    height: 90px;
-    line-height: 30px;
-    background: #dddddd;
-    text-align: center;
-    margin: 5px;
-  }
-  .boxmenu img {
-    display: none;
-  }
-  .board_title {
-    color: #ffff;
-    font-size: 16px;
-  }
-  .board {
-    background: #ffffff;
-    border-radius: 15px;
-    width: 93vw;
-    box-shadow: 0px 5px 20px #00000038;
-    padding: 2rem;
-    margin: 30px 10px;
-  }
-  .box_num {
-    color: #13833b;
-    font-size: 17px;
-  }
-}
+
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,11 +1,4 @@
1		-.flex-between {
2		- height: 7rem;
3		- width: 100%;
4		- z-index: 2000;
5		- padding: 0 4rem 0 1rem;
6		- background: #13833b;
7		- box-shadow: 0px 5px 20px #00000038;
8		-}
	1	+header{background: #13833b; padding: 0 2rem;}
9	2	.logo {
10	3	display: flex;
11	4	width: 30rem;
...	...	@@ -15,13 +8,13 @@
15	8	align-items: center;
16	9	}
17	10	main {
18		- padding: 2rem 9rem;
	11	+ padding: 2rem 9rem ;
19	12	}
20	13
21	14	body {
22	15	/* overflow-x: hidden; */
23	16	}
24		-
	17	+
25	18	footer {
26	19	top: 100%;
27	20	width: 100%;

...	...	@@ -2,6 +2,7 @@
2	2	<div class="flex">
3	3	<div class="left">
4	4	<div class="wrap flex-between">
	5	+ <button @click="toggleSlide" class="toggle">Toggle Slide</button>
5	6	<!-- <div class="iconlist">
6	7	<ul>
7	8	<li v-for="item in items" :key="item.id" :class="{ active: item.isActive }" @click="toggleActive(item)">
...	...	@@ -10,7 +11,7 @@
10	11	</li>
11	12	</ul>
12	13	</div> -->
13		- <div class="search">
	14	+ <div class="search slide-content" v-if="showSlide">
14	15	<h2>지역설정</h2>
15	16	<div class="box">
16	17	<DongSelectList @setDongCd="setDongCd"></DongSelectList>
...	...	@@ -18,34 +19,78 @@
18	19	<h2>조건설정</h2>
19	20	<div class="box">
20	21	<div class="flex-between m-b">
21		- <input type="checkbox" v-model="condition['wtrms']"><label for="">무단횡단</label>
22		- <input type="checkbox" v-model="condition['signExtn']" /><label for="">신호연장</label>
23		- <input type="checkbox" v-model="condition['rittrnVhcle']" /><label for="">신호위반</label>
24		- <input type="checkbox" v-model="condition['eqpmnTrobl']" /><label for="">장애발생</label>
	22	+ <input type="checkbox" v-model="condition['wtrms']" /><label
	23	+ for=""
	24	+ >무단횡단</label
	25	+ >
	26	+ <input type="checkbox" v-model="condition['signExtn']" /><label
	27	+ for=""
	28	+ >신호연장</label
	29	+ >
	30	+ <input type="checkbox" v-model="condition['rittrnVhcle']" /><label
	31	+ for=""
	32	+ >신호위반</label
	33	+ >
	34	+ <input type="checkbox" v-model="condition['eqpmnTrobl']" /><label
	35	+ for=""
	36	+ >장애발생</label
	37	+ >
25	38	</div>
26	39	<div class="flex-between m-b">
27	40	<label for="date-input">일자</label>
28		- <input id="date-input" type="date" v-model="condition['start_date']" :picker-options="startDateOptions" /> ~
29		- <input id="date-input" type="date" v-model="condition['end_date']" :picker-options="endDateOptions" />
	41	+ <input
	42	+ id="date-input"
	43	+ type="date"
	44	+ v-model="condition['start_date']"
	45	+ :picker-options="startDateOptions"
	46	+ />
	47	+ ~
	48	+ <input
	49	+ id="date-input"
	50	+ type="date"
	51	+ v-model="condition['end_date']"
	52	+ :picker-options="endDateOptions"
	53	+ />
30	54	</div>
31	55	<div class="flex-between m-b">
32	56	<label for="time-input">시간대</label>
33		- <input id="time-input" type="time" v-model="condition['start_time']" />~<input id="time-input" type="time"
34		- v-model="condition['end_time']" />
	57	+ <input
	58	+ id="time-input"
	59	+ type="time"
	60	+ v-model="condition['start_time']"
	61	+ />~<input
	62	+ id="time-input"
	63	+ type="time"
	64	+ v-model="condition['end_time']"
	65	+ />
35	66	</div>
36		- <button class="btn-l green-btn" @click="statusSearch" style="padding: 0.5rem 0">
	67	+ <button
	68	+ class="btn-l green-btn"
	69	+ @click="statusSearch"
	70	+ style="padding: 0.5rem 0"
	71	+ >
37	72	검색
38	73	</button>
39	74	</div>
40	75	<h2>지역설정</h2>
41	76	<div class="box bg-white tab-buttons">
42	77	<div class="btn_set flex-center">
43		- <button class="m-r" v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }"
44		- @click="changeTab(tab.id)">
	78	+ <button
	79	+ class="m-r"
	80	+ v-for="tab in tabs"
	81	+ :key="tab.id"
	82	+ :class="{ active: activeTab === tab.id }"
	83	+ @click="changeTab(tab.id)"
	84	+ >
45	85	{{ tab.title }}
46	86	</button>
47	87	</div>
48		- <div class="tab-content" v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
	88	+ <div
	89	+ class="tab-content"
	90	+ v-for="tab in tabs"
	91	+ :key="tab.id"
	92	+ v-show="activeTab === tab.id"
	93	+ >
49	94	<ul v-show="tab.content1">
50	95	<li>
51	96	<p class="m-b">발생일시: 2023-05-04 14:27</p>
...	...	@@ -73,33 +118,63 @@
73	118	<div class="top">
74	119	<ul class="flex-end">
75	120	<li>
76		- <p class="flex-center"><img class="m-r"
77		- src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 보행자</p>
	121	+ <p class="flex-center">
	122	+ <img
	123	+ class="m-r"
	124	+ src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
	125	+ alt
	126	+ />금일 보행자
	127	+ </p>
78	128	<h3>명</h3>
79	129	</li>
80	130	<li>
81		- <p class="flex-center"><img class="m-r"
82		- src="../../../resources/images/icon/scumulativenumberofpedestrians.png" alt />금일 무단횡단 발생</p>
	131	+ <p class="flex-center">
	132	+ <img
	133	+ class="m-r"
	134	+ src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
	135	+ alt
	136	+ />금일 무단횡단 발생
	137	+ </p>
83	138	<h3>회</h3>
84	139	</li>
85	140	<li>
86		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
87		- alt />금일 신호연장 발생</p>
	141	+ <p class="flex-center">
	142	+ <img
	143	+ class="m-r"
	144	+ src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
	145	+ alt
	146	+ />금일 신호연장 발생
	147	+ </p>
88	148	<h3>회</h3>
89	149	</li>
90	150	<li>
91		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
92		- alt />금일 신호연장 시간</p>
	151	+ <p class="flex-center">
	152	+ <img
	153	+ class="m-r"
	154	+ src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
	155	+ alt
	156	+ />금일 신호연장 시간
	157	+ </p>
93	158	<h3>초</h3>
94	159	</li>
95	160	<li>
96		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
97		- alt />금일 차량 신호위반 발생</p>
	161	+ <p class="flex-center">
	162	+ <img
	163	+ class="m-r"
	164	+ src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
	165	+ alt
	166	+ />금일 차량 신호위반 발생
	167	+ </p>
98	168	<h3>회</h3>
99	169	</li>
100	170	<li>
101		- <p class="flex-center"><img class="m-r" src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
102		- alt />금일 장애 발생</p>
	171	+ <p class="flex-center">
	172	+ <img
	173	+ class="m-r"
	174	+ src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
	175	+ alt
	176	+ />금일 장애 발생
	177	+ </p>
103	178	<h3>회</h3>
104	179	</li>
105	180	</ul>
...	...	@@ -132,12 +207,13 @@
132	207	vworldHybridLayer,
133	208	vworldSatelliteLayer,
134	209	} from "../../component/OpenLayersMap.vue";
135		-import { baseStyles } from '../../component/OpenLayersStyle.vue';
	210	+import { baseStyles } from "../../component/OpenLayersStyle.vue";
136	211	import axios from "axios";
137		-import DongSelectList from '../../component/dongSelectList.vue';
	212	+import DongSelectList from "../../component/dongSelectList.vue";
138	213	export default {
139	214	data() {
140	215	return {
	216	+ showSlide: true,
141	217	address: {},
142	218	//조건설정
143	219	condition: {
...	...	@@ -155,10 +231,10 @@
155	231	},
156	232	//달력에서 범위 설정 해주기 위해 (미완) -:picker-options-
157	233	startDateOptions: {
158		- disabledDate: this.disabledStDate
	234	+ disabledDate: this.disabledStDate,
159	235	},
160	236	endDateOptions: {
161		- disabledDate: this.disabledEdDate
	237	+ disabledDate: this.disabledEdDate,
162	238	},
163	239
164	240	tabs: [
...	...	@@ -189,8 +265,10 @@
189	265	DongSelectList: DongSelectList,
190	266	},
191	267	methods: {
	268	+ toggleSlide() {
	269	+ this.showSlide = !this.showSlide;
	270	+ },
192	271	//지역 및 조건 설정 안에 있는 횡단보도의 금일 보행자 무단횡단 신호연장 신호위반 장애발생 위치와 횟수
193		-
194	272
195	273	//지역 및 조건 설정 안에 있는 횡단보도의 위치와 횟수의 합
196	274
...	...	@@ -204,59 +282,105 @@
204	282	item.isActive = !item.isActive;
205	283	},
206	284	// disabledStDate(date){
207		- // date = moment(String(date)).format('YYYYMMDD')
208		- // return date > moment().format('YYYYMMDD') \|\| date < moment().add(-1, 'years').format('YYYYMMDD')
	285	+ // date = moment(String(date)).format('YYYYMMDD')
	286	+ // return date > moment().format('YYYYMMDD') \|\| date < moment().add(-1, 'years').format('YYYYMMDD')
209	287	// },
210	288	disabledEdDate(date) {
211		- return date < this.condition.start_date
	289	+ return date < this.condition.start_date;
212	290	},
213	291	statusSearch: function () {
214	292	console.log("statusSearch this.address : ", this.address);
215	293	//지도 영역 수정
216	294	this.$refs.open_layers.removeLayerAll();
217	295	this.$refs.open_layers.setBaseMap(vworldBaseLayer);
218		- this.$refs.open_layers.addVectorLayerByUrl('/common/getDongGeoJson.json', 'realtimeStatusMap', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
219		- this.$refs.open_layers.addClusterLayer('/common/getDongGeoJson.json', 'realtimeStatusMap', 'EPSG:5181', '', '', this.address.dong_cd);
	296	+ this.$refs.open_layers.addVectorLayerByUrl(
	297	+ "/common/getDongGeoJson.json",
	298	+ "realtimeStatusMap",
	299	+ "EPSG:5181",
	300	+ baseStyles["MultiPolygon"],
	301	+ "MultiPolygon",
	302	+ this.address.dong_cd
	303	+ );
	304	+ this.$refs.open_layers.addClusterLayer(
	305	+ "/common/getDongGeoJson.json",
	306	+ "realtimeStatusMap",
	307	+ "EPSG:5181",
	308	+ "",
	309	+ "",
	310	+ this.address.dong_cd
	311	+ );
220	312	// this.situationOccurrenceStatusSearch();
221		-
222	313	},
223	314
224	315	//상황 발행 현황 검색
225	316	situationOccurrenceStatusSearch: function () {
226		- //검색 데이터
	317	+ //검색 데이터
227	318	const vm = this;
228	319	axios({
229		- url: '/statusControl/statusSearch.json',
230		- method: 'post',
	320	+ url: "/statusControl/statusSearch.json",
	321	+ method: "post",
231	322	headers: {
232		- 'Content-Type': "application/json; charset=UTF-8",
	323	+ "Content-Type": "application/json; charset=UTF-8",
233	324	},
234		- data: { "address": vm.address, "condition": vm.condition }
235		- }).then(function (response) {
236		- console.log("statusSearch - response : ", response.data);
237		- // vm.nodeList = response.data;
238		- }).catch(function (error) {
239		- console.log("statusSearch - error : ", error);
240		- });
241		-
	325	+ data: { address: vm.address, condition: vm.condition },
	326	+ })
	327	+ .then(function (response) {
	328	+ console.log("statusSearch - response : ", response.data);
	329	+ // vm.nodeList = response.data;
	330	+ })
	331	+ .catch(function (error) {
	332	+ console.log("statusSearch - error : ", error);
	333	+ });
242	334	},
243	335
244	336	setDongCd(value) {
245	337	console.log("value : ", value);
246	338	this.address = value;
247		- }
	339	+ },
248	340	},
249	341	watch: {},
250	342	computed: {},
251	343	mounted() {
252	344	console.log("Main2 mounted");
253	345	this.$refs.open_layers.setBaseMap(vworldBaseLayer);
254		- //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');
	346	+ //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');
255	347	},
256	348	};
257	349	</script>
258	350
259	351	<style scoped>
	352	+@media all and (max-width: 479px) {
	353	+ .toggle{
	354	+ display: block !important;
	355	+ position: absolute;
	356	+ z-index: 150;
	357	+ top: 12rem;
	358	+ left: 3rem;}
	359	+ .wrap {
	360	+ height: auto !important;
	361	+ }
	362	+ .slide-content {
	363	+ position: fixed;
	364	+ top: 0;
	365	+ left: 0px;
	366	+ width: -webkit-fill-available;
	367	+ z-index: 50;
	368	+ height: 100vh;
	369	+ background-color: #f0f0f0;
	370	+ transition: right 0.3s ease; /* Adjust the duration and easing as needed */
	371	+ }
	372	+
	373	+ .slide-enter-active,
	374	+ .slide-leave-active {
	375	+ transition: right 0.3s ease; /* Adjust the duration and easing as needed */
	376	+ }
	377	+
	378	+ .slide-enter,
	379	+ .slide-leave-to {
	380	+ right: -300px; /* Initial and final position outside the viewport */
	381	+ }
	382	+}
	383	+.toggle{display: none;}
260	384	.chart div {
261	385	min-height: 13rem;
262	386	}
...	...	@@ -337,4 +461,3 @@
337	461	width: -webkit-fill-available;
338	462	}
339	463	</style>
340		-

...	...	@@ -1,79 +1,81 @@
1	1	<template>
2		- <div class="boxmenu">
3		- <div class="box">
4		- <div class="flex">
5		- <img
6		- src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
7		- alt
8		- />
9		- <span class="box_title">금일 누적보행자 수</span>
	2	+ <div class="maintop">
	3	+ <div class="boxmenu">
	4	+ <div class="box">
	5	+ <div class="flex">
	6	+ <img
	7	+ src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
	8	+ alt
	9	+ />
	10	+ <span class="box_title">금일 누적보행자 수</span>
	11	+ </div>
	12	+ <span class="box_num">00</span>
	13	+ <span class="box_subtxt">명</span>
10	14	</div>
11		- <span class="box_num">00</span>
12		- <span class="box_subtxt">명</span>
13		- </div>
14		- <div class="boxborder"></div>
15		- <div class="box">
16		- <div class="flex">
17		- <img
18		- src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
19		- alt
20		- />
21		- <span class="box_title">금일 무단횡단 발생</span>
	15	+ <div class="boxborder"></div>
	16	+ <div class="box">
	17	+ <div class="flex">
	18	+ <img
	19	+ src="../../../resources/images/icon/scumulativenumberofpedestrians.png"
	20	+ alt
	21	+ />
	22	+ <span class="box_title">금일 무단횡단 발생</span>
	23	+ </div>
	24	+ <span class="box_num">00</span>
	25	+ <span class="box_subtxt">회</span>
22	26	</div>
23		- <span class="box_num">00</span>
24		- <span class="box_subtxt">회</span>
25		- </div>
26		-
27		- <div class="boxborder"></div>
28		- <div class="box">
29		- <div class="flex">
30		- <img
31		- src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
32		- alt
33		- />
34		- <span class="box_title">금일 신호연장 발생 수</span>
	27	+
	28	+ <div class="boxborder"></div>
	29	+ <div class="box">
	30	+ <div class="flex">
	31	+ <img
	32	+ src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
	33	+ alt
	34	+ />
	35	+ <span class="box_title">금일 신호연장 발생 수</span>
	36	+ </div>
	37	+ <span class="box_num">00</span>
	38	+ <span class="box_subtxt">회</span>
35	39	</div>
36		- <span class="box_num">00</span>
37		- <span class="box_subtxt">회</span>
38		- </div>
39		-
40		- <div class="boxborder"></div>
41		- <div class="box">
42		- <div class="flex">
43		- <img
44		- src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
45		- alt
46		- />
47		- <span class="box_title">금일 신호연장</span>
	40	+
	41	+ <div class="boxborder"></div>
	42	+ <div class="box">
	43	+ <div class="flex">
	44	+ <img
	45	+ src="../../../resources/images/icon/Numberofsignalextensionstoday.png"
	46	+ alt
	47	+ />
	48	+ <span class="box_title">금일 신호연장</span>
	49	+ </div>
	50	+ <span class="box_num">00</span>
	51	+ <span class="box_subtxt">초</span>
48	52	</div>
49		- <span class="box_num">00</span>
50		- <span class="box_subtxt">초</span>
51		- </div>
52		-
53		- <div class="boxborder"></div>
54		- <div class="box">
55		- <div class="flex">
56		- <img
57		- src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
58		- alt
59		- />
60		- <span class="box_title">금일 신호 위반 발생</span>
	53	+
	54	+ <div class="boxborder"></div>
	55	+ <div class="box">
	56	+ <div class="flex">
	57	+ <img
	58	+ src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
	59	+ alt
	60	+ />
	61	+ <span class="box_title">금일 신호 위반 발생</span>
	62	+ </div>
	63	+ <span class="box_num">00</span>
	64	+ <span class="box_subtxt">회</span>
61	65	</div>
62		- <span class="box_num">00</span>
63		- <span class="box_subtxt">회</span>
64		- </div>
65		-
66		- <div class="boxborder"></div>
67		- <div class="box">
68		- <div class="flex">
69		- <img
70		- src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
71		- alt
72		- />
73		- <span class="box_title">금일 장애 발생 수</span>
	66	+
	67	+ <div class="boxborder"></div>
	68	+ <div class="box">
	69	+ <div class="flex">
	70	+ <img
	71	+ src="../../../resources/images/icon/Numberofsignalviolationstoday.png"
	72	+ alt
	73	+ />
	74	+ <span class="box_title">금일 장애 발생 수</span>
	75	+ </div>
	76	+ <span class="box_num">00</span>
	77	+ <span class="box_subtxt">회</span>
74	78	</div>
75		- <span class="box_num">00</span>
76		- <span class="box_subtxt">회</span>
77	79	</div>
78	80	</div>
79	81	<div class="main_section">
...	...	@@ -252,7 +254,7 @@
252	254	},
253	255	};
254	256	</script>
255		-<style>
	257	+<style scoped>
256	258	.box {
257	259	text-align: end;
258	260	}
...	...	@@ -284,24 +286,28 @@
284	286	align-items: center;
285	287	margin-bottom: 5rem;
286	288	}
287		-
	289	+.flex-between {
	290	+ height: 7rem;
	291	+ width: 100%;
	292	+ z-index: 2000;
	293	+ padding: 0 4rem 0 1rem;
	294	+ background: #13833b;
	295	+ box-shadow: 0px 5px 20px #00000038;
	296	+}
288	297	@media (max-width: 479px) {
	298	+ .maintop{overflow: scroll;}
289	299	.boxmenu {
290		- width: 92vw;
291		- height: 206px;
292		- margin: 10px;
293		- border-radius: 20px;
	300	+ /* width: 92vw; */
	301	+ height: fit-content;
	302	+ display: flex !important;
	303	+ /* margin: 10px; */
	304	+ /* border-radius: 20px;*/
294	305	}
	306	+ .boxmenu{}
295	307	.boxborder {
296	308	display: none;
297	309	}
298		- .box {
299		- width: 150px;
300		- margin-top: 10px;
301		- margin-right: 42px;
302		- text-align: end;
303		- float: left;
304		- }
	310	+
305	311	.box .flex {
306	312	/* border: 1px solid red; */
307	313	display: flex;
...	...	@@ -335,7 +341,7 @@
335	341	}
336	342	.barinfo {
337	343	gap: 0;
338		- width: 90vw;
	344	+ /* width: 90vw; */
339	345	}
340	346	.barinfo img {
341	347	width: 30px;
...	...	@@ -384,124 +390,5 @@
384	390	font-size: 17px;
385	391	}
386	392	}
387		-@media (max-width: 375px) {
388		- .box_title {
389		- /* margin-top: 172px; */
390		- width: 1000px;
391		- /* border: 1px solid; */
392		- color: #9c9b9a;
393		- text-align: center;
394		- /* margin-right: 30px; */
395		- font-size: 15px;
396		- }
397		- .box {
398		- width: 150px;
399		- margin-top: 10px;
400		- /* margin-right: -32px; */
401		- text-align: end;
402		- float: left;
403		- margin: 0px;
404		- }
405		- .boxmenu img {
406		- width: 35px;
407		- display: none;
408		- }
409		- .boxmenu {
410		- width: 92vw;
411		- height: 206px;
412		- margin: 10px;
413		- border-radius: 20px;
414		- }
415		- .boxborder {
416		- display: none;
417		- }
418		- .box {
419		- width: 150px;
420		- margin-top: 10px;
421		- margin-right: 42px;
422		- text-align: end;
423		- float: left;
424		- }
425		- .box .flex {
426		- /* border: 1px solid red; */
427		- display: flex;
428		- align-items: center;
429		- width: 190px;
430		- margin: 0px -8px 5px;
431		- }
432		- .box_title {
433		- /* margin-top: 172px; */
434		- width: 1000px;
435		- /* border: 1px solid; */
436		- color: #9c9b9a;
437		- text-align: center;
438		- /* margin-right: 30px; */
439		- font-size: 15px;
440		- }
441		- .main_section h1 {
442		- font-size: 20px;
443		- color: #13833b;
444		- margin: 3rem 0;
445		- text-align: center;
446		- width: 100vw;
447		- }
448		- .verticalbar {
449		- width: 93vw;
450		- border-radius: 15px;
451		- background-color: #dddddd00;
452		- margin-bottom: 3rem;
453		- margin: 10px;
454		- padding: 1rem;
455		- }
456		- .barinfo {
457		- gap: 0;
458		- width: 90vw;
459		- }
460		- .barinfo img {
461		- width: 30px;
462		- margin-top: 15px;
463		- }
464		- .bar_title {
465		- color: #3b3d3d;
466		- font-size: 8px;
467		- gap: none;
468		- display: inline;
469		- display: none;
470		- }
471		- .main_section .elementtxt {
472		- display: flex;
473		- font-size: 8px;
474		- width: 90px;
475		- justify-content: center;
476		- align-items: center;
477		- }
478		- .bar_element {
479		- width: 100vw;
480		- border-radius: 20px;
481		- height: 90px;
482		- line-height: 30px;
483		- background: #dddddd;
484		- text-align: center;
485		- margin: 5px;
486		- }
487		- .boxmenu img {
488		- display: none;
489		- }
490		- .board_title {
491		- color: #ffff;
492		- font-size: 16px;
493		- }
494		- .board {
495		- background: #ffffff;
496		- border-radius: 15px;
497		- width: 93vw;
498		- box-shadow: 0px 5px 20px #00000038;
499		- padding: 2rem;
500		- margin: 30px 10px;
501		- }
502		- .box_num {
503		- color: #13833b;
504		- font-size: 17px;
505		- }
506		-}
	393	+
507	394	</style>

Delete comment