Commit @360cd5b198d4f1cda879e9e5f92cdf3a91cd6e2b

최정임 2023-07-27

230727 최정임 css 수정중 4

@360cd5b198d4f1cda879e9e5f92cdf3a91cd6e2b

0dad4c8

360cd5b

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


   font-weight: bold;
   font-style: normal;
 }
-label{width: -webkit-fill-available;}
+label {
+  width: -webkit-fill-available;
+}
 button {
   padding: 0.3rem 2rem;
   width: 100%;

   border: 1px solid #333333;
   height: 3rem;
 }
-.s-btn{width: 15rem;}
-input[type="text"]{height: 3rem; width: 90%; padding: 0.5rem;
-  border-radius: 5px; border: 1px solid #c8c8c8}
-  .text-input{width: 13rem !important;}
+.s-btn {
+  width: 15rem;
+}
+input[type="text"] {
+  height: 3rem;
+  width: 90%;
+  padding: 0.5rem;
+  /* border-radius: 5px; */
+  border: 1px solid #c8c8c8;
+}
+.text-input {
+  width: 13rem !important;
+}
 select {
   padding: 0.5rem;
-  border-radius: 5px;
+  /* border-radius: 5px; */
   width: 90%;
-    height: 3rem;
-    border: 1px solid #c8c8c8
+  height: 3rem;
+  border: 1px solid #c8c8c8;
 }
-.border-none{border-top: none !important; border-bottom: none !important;}
-.icon{position: absolute; z-index: 500;}
-.crosswalk{width: 60px; top: 22%;
-  left: 60%;}
-.warning{width: 50px;    top: 34%;
-  left: 54%;}
-.fon2{
+.border-none {
+  border-top: none !important;
+  border-bottom: none !important;
+}
+.icon {
+  position: absolute;
+  z-index: 500;
+}
+.crosswalk {
+  width: 60px;
+  top: 22%;
+  left: 60%;
+}
+.warning {
+  width: 50px;
+  top: 34%;
+  left: 54%;
+}
+.fon2 {
   background-color: #31a257;
   color: white;
 }

 .grid2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
+}
+.grid1_9 {
+  display: grid;
+  grid-template-columns: 10% 90%;
+  height: 100%;
 }
 .grid2_8 {
   display: grid;

   justify-content: space-around;
   align-items: center;
 }
-.flex-border{ display: flex;
+.flex-border {
+  display: flex;
   flex-direction: row;
   align-items: flex-start;
   border: 1px solid #949292;
-  flex-basis: content;}
+  flex-basis: content;
+}
 .flex-center {
   display: flex;
   justify-content: center;

   padding: 0px 0px;
 }
 
-
-.b-r{border-radius: 10px;}
-.b-shadow{box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.3);}
+.b-r {
+  border-radius: 10px;
+}
+.b-shadow {
+  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.3);
+}
 .bg-white {
   background: #ffffff;
 }

 .search-btn {
   height: 4rem;
   font-size: 16px;
-    padding: 0.5rem 3rem;
+  padding: 0.5rem 3rem;
 }
 /*스크롤바디자인*/
 ::-webkit-scrollbar-thumb {

   border: 1px solid #b0afaf;
 }
 
-.table2{border: 1px solid #b0afaf; text-align: left !important;}
-.table2 th{
+.table2 {
+  border: 1px solid #b0afaf;
+  text-align: left !important;
+}
+.table2 th {
   background-color: #f7f6f6 !important;
   color: #333 !important;
-  
 }
-.table2 td{
+.table2 td {
   background-color: #ffffff !important;
   border-bottom: 0 !important;
- }
+}
 
- .table2 label{width: max-content !important;}
+.table2 label {
+  width: max-content !important;
+}

0dad4c8

360cd5b

client/resources/css/main.css

--- client/resources/css/main.css

+++ client/resources/css/main.css


 /* 현황관제 */
-.search{ height: inherit; width: -webkit-fill-available; }
-.search label{ font-size: 12px; } 
-.search p{font-size: 16px;}
+.search {
+  height: inherit;
+  width: -webkit-fill-available;
+}
+.search label {
+  font-size: 12px;
+}
+.search p {
+  font-size: 16px;
+}
 /* .search select{width: 20rem;     height: 3rem;} */
-.search .box{padding: 1rem 1rem;}
-.search .box ul li{padding: 1rem; border-bottom: 1px solid #e5e3e3;}
-.iconlist{width: 55px; background: #d6d6d6; padding: 2rem 0.7rem; text-align: center; height: inherit;}
-.iconlist li{text-align: -webkit-center; margin-bottom: 4rem;}
-.iconlist li div{width: 25px; height: 25px; background-repeat: no-repeat; }
-.iconlist li p{font-weight: bold;}
-.iconlist li.active p{color:#10833b;}
-.iconlist li:nth-child(4) div{background-image: url(../images/icon/FailureOccurrencegray.png); }
-.iconlist li:nth-child(4).active div{background-image: url(../images/icon/FailureOccurrencegreen.png);}
-.iconlist li:nth-child(1) div{background-image: url(../images/icon/jaywalkinggray.png);}
-.iconlist li:nth-child(1).active div{background-image: url(../images/icon/jaywalkinggreen.png);}
-.iconlist li:nth-child(3) div{background-image: url(../images/icon/rightturngray.png);}
-.iconlist li:nth-child(3).active div{background-image: url(../images/icon/rightturngreen.png);}
-.iconlist li:nth-child(2) div{background-image: url(../images/icon/Signalextensiongray.png);}
-.iconlist li:nth-child(2).active div{background-image: url(../images/icon/Signalextensiongreen.png);}
+.search .box {
+  padding: 1rem 1rem;
+}
+.search .box ul li {
+  padding: 1rem;
+  border-bottom: 1px solid #e5e3e3;
+}
+.iconlist {
+  background: #d6d6d6;
+  padding: 2rem 0.7rem;
+  text-align: center;
+  height: inherit;
+}
+.iconlist li {
+  text-align: -webkit-center;
+  margin-bottom: 4rem;
+}
+.iconlist li div {
+  width: 25px;
+  height: 25px;
+  background-repeat: no-repeat;
+}
+.iconlist li p {
+  font-weight: bold;
+}
+.iconlist li.active p {
+  color: #10833b;
+}
+.iconlist li:nth-child(4) div {
+  background-image: url(../images/icon/FailureOccurrencegray.png);
+}
+.iconlist li:nth-child(4).active div {
+  background-image: url(../images/icon/FailureOccurrencegreen.png);
+}
+.iconlist li:nth-child(1) div {
+  background-image: url(../images/icon/jaywalkinggray.png);
+}
+.iconlist li:nth-child(1).active div {
+  background-image: url(../images/icon/jaywalkinggreen.png);
+}
+.iconlist li:nth-child(3) div {
+  background-image: url(../images/icon/rightturngray.png);
+}
+.iconlist li:nth-child(3).active div {
+  background-image: url(../images/icon/rightturngreen.png);
+}
+.iconlist li:nth-child(2) div {
+  background-image: url(../images/icon/Signalextensiongray.png);
+}
+.iconlist li:nth-child(2).active div {
+  background-image: url(../images/icon/Signalextensiongreen.png);
+}
 
-.top{ z-index: 100; background: #fff; top: 0; width: -webkit-fill-available;}
+.top {
+  z-index: 100;
+  background: #fff;
+  top: 0;
+  width: -webkit-fill-available;
+}
 .top p {
-    font-size: 15px;
-  }
-  .top ul {
-    padding: 1rem 0;
-    justify-content: space-evenly;
-  }
-  .top li {
-    text-align: center;
-  }
-  .top h3 {
-    font-size: 20px;
-  }
+  font-size: 15px;
+}
+.top ul {
+  padding: 1rem 0;
+  justify-content: space-evenly;
+}
+.top li {
+  text-align: center;
+}
+.top h3 {
+  font-size: 20px;
+}
 
+.date-input,
+.time-input {
+  height: 3rem;
+  /* border-radius: 5px; */
+  border: 1px solid #c8c8c8;
+  padding: 0.5rem;
+}
+.time-input,
+.text-input {
+  height: 3rem;
+}
 
-  .date-input,.time-input{height: 3rem;  border-radius: 5px; border: 1px solid #c8c8c8; padding: 0.5rem;
-    }
-    .time-input, .text-input{height: 3rem;}
-
-.mobile{display: none;}
+.mobile {
+  display: none;
+}
 
 .search-wrap {
   margin-bottom: 30px;
-    background: #f7f6f6;
-    /* padding: 1rem; */
-    /* height: 16em; */
-    width: 100%;
-    /* flex-wrap: wrap; */
-    /* align-content: flex-start; */
-    margin-bottom: 3rem;
+  background: #f7f6f6;
+  /* padding: 1rem; */
+  /* height: 16em; */
+  width: 100%;
+  /* flex-wrap: wrap; */
+  /* align-content: flex-start; */
+  margin-bottom: 3rem;
 }
-.search-wrap input{height: 3rem; width: 100%; border-radius: 5px;
-  border: 1px solid #949292; margin: 1rem; padding: 0.5rem;}
-  .search-wrap label{height: 100%; width: max-content; padding: 1rem; font-size: 14px;  background: #f7f6f6; border-collapse: collapse;}
-  .search-wrap select{margin: 1rem; width: 25rem;}
-  .search-wrap .situ button{margin: 1rem;}
-  .search-wrap .box{width: 100%; padding-right: 5rem;}
+.search-wrap input {
+  height: 3rem;
+  width: 100%;
+  border-radius: 5px;
+  border: 1px solid #949292;
+  margin: 1rem;
+  padding: 0.5rem;
+}
+.search-wrap label {
+  height: 100%;
+  width: max-content;
+  padding: 1rem;
+  font-size: 14px;
+  background: #f7f6f6;
+  border-collapse: collapse;
+}
+.search-wrap select {
+  margin: 1rem;
+  width: 25rem;
+}
+.search-wrap .situ button {
+  margin: 1rem;
+}
+.search-wrap .box {
+  width: 100%;
+  padding-right: 5rem;
+}
 
-  @media all and (max-width: 479px) {
-  
-    .board-wrap{padding:  0 1rem;}
-    .float-right{display: flow-root; margin: 2rem 0 1rem 0}
-    .tab-wrap ul{justify-content: center}
-    .tab{width: 16rem !important;}
-    .wrap{width: -webkit-fill-available !important; margin: 20px auto !important;}
-  .mobile{display: block !important;}
-  .pc{display: none;}
+@media all and (max-width: 479px) {
+  .board-wrap {
+    padding: 0 1rem;
   }
+  .float-right {
+    display: flow-root;
+    margin: 2rem 0 1rem 0;
+  }
+  .tab-wrap ul {
+    justify-content: center;
+  }
+  .tab {
+    width: 16rem !important;
+  }
+  .wrap {
+    width: -webkit-fill-available !important;
+    margin: 20px auto !important;
+  }
+  .mobile {
+    display: block !important;
+  }
+  .pc {
+    display: none;
+  }
+}
 
+.modal {
+  width: 100rem;
+}
+.modal input {
+  padding: 0.5rem;
+  height: 3rem;
+  border: 1px solid #c8c8c8;
+  border-radius: 5px;
+}
+.modalmain {
+  padding: 2rem;
+  max-height: 70rem;
+  overflow: scroll;
+  overflow-x: hidden;
+}
+.modalmain select {
+  width: max-content;
+}
+.modalmain input[type="text"] {
+  width: inherit;
+}
+.modalmain table thead {
+  background: #f7f6f6;
+}
+.modalmain table td {
+  border: 1px solid #eee;
+}
+.modal h2 {
+  background: #018b4d;
+  font-size: 3rem;
+  padding: 1.5rem;
+  color: #ffffff;
+}
+.modal-bg h2 {
+  background: #e5e5dd;
+  font-size: 2rem;
+  padding: 1rem;
+}
+.modal h3 {
+  font-size: 1.8rem;
+  border-bottom: 1px solid #eee;
+  padding: 1rem 0 0.2rem 0;
+}
+.modal h4 {
+  font-size: 1.6rem;
+  font-weight: 100;
+  padding: 0.2rem 0 1rem 0;
+}
+.modal h2 button {
+  border: 0;
+  background: none;
+  height: 30px;
+  cursor: pointer;
+  width: fit-content;
+}
+.modal-bg button {
+  border: 0;
+  background: none;
+  height: 30px;
+  cursor: pointer;
+}
+.modal button img {
+  width: 25px;
+}
 
-  .modal {
-    width: 100rem;
-  }
-  .modal input{padding: 0.5rem; height: 3rem; border: 1px solid #c8c8c8; border-radius: 5px;}
-  .modalmain {
-    padding: 2rem;
-    max-height: 70rem;
-    overflow: scroll;
-    overflow-x: hidden;
-  }
-  .modalmain select {
-    width: max-content;
-  }
-  .modalmain input[type="text"] {
-    width: inherit;
-  }
-  .modalmain table thead {
-    background: #f7f6f6;
-  }
-  .modalmain table td {
-    border: 1px solid #eee;
-  }
-  .modal h2 {
-    background: #018b4d;
-    font-size: 3rem;
-    padding: 1.5rem;
-    color: #ffffff;
-  }
-  .modal-bg h2 {
-    background: #e5e5dd;
-    font-size: 2rem;
-    padding: 1rem;
-  }
-  .modal h3 {
-    font-size: 1.8rem;
-    border-bottom: 1px solid #eee;
-    padding: 1rem 0 0.2rem 0;
-  }
-  .modal h4 {
-    font-size: 1.6rem;
-    font-weight: 100;
-    padding: 0.2rem 0 1rem 0;
-  }
-  .modal h2 button {
-    border: 0;
-    background: none;
-    height: 30px;
-    cursor: pointer;
-    width: fit-content;
-  }
-  .modal-bg button {
-    border: 0;
-    background: none;
-    height: 30px;
-    cursor: pointer;
-  }
-  .modal button img {
-    width: 25px;
-  }
-
-
-  .htmlTable {
-    text-align: center;
-    border-collapse: collapse;
-    position: absolute;
-    z-index: 500;
-    left: 50%;
-    top: 50%;
-    border: 1px solid #eee;
-    font-size: 13px;
-  }
-  .htmlTable thead td {
-    font-size: 16px;
-  }
-  .htmlTable th,
-  .htmlTable td {
-    border: 1px solid #eee;
-    padding: 0.5rem 1rem;
-  }
-  .htmlTable tbody td {
-    background: #ffffff;
-  }
+.htmlTable {
+  text-align: center;
+  border-collapse: collapse;
+  position: absolute;
+  z-index: 500;
+  left: 50%;
+  top: 50%;
+  border: 1px solid #eee;
+  font-size: 13px;
+}
+.htmlTable thead td {
+  font-size: 16px;
+}
+.htmlTable th,
+.htmlTable td {
+  border: 1px solid #eee;
+  padding: 0.5rem 1rem;
+}
+.htmlTable tbody td {
+  background: #ffffff;
+}

0dad4c8

360cd5b

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


 
 .grid3_7 > select {
   padding: 0.5rem;
-  border-radius: 5px;
+  /* border-radius: 5px; */
   width: 90%;
   height: 3rem;
   border: 1px solid #c3bfbf;

0dad4c8

360cd5b

client/views/component/MapPage.vue

--- client/views/component/MapPage.vue

+++ client/views/component/MapPage.vue


 <template>
-  <div>
     <div id="map" class="map"></div>
-  </div>
 </template>
 
 <script>

0dad4c8

360cd5b

client/views/component/chart/ChartMain.vue

--- client/views/component/chart/ChartMain.vue

+++ client/views/component/chart/ChartMain.vue


         </div> -->
         <!-- 차트 selectbox (끝)-->
     <!-- </div> -->
-    <div class="chart" id="chartdiv" ref="chartdiv" style="width: 100%; height: 100%;"></div>
+    <div class="" id="chartdiv" ref="chartdiv" style="width: 100%; height: 100%;"></div>
 </template>
 
 <script>

             chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
 
             let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
-            div.style.width = "110%"; // 차트를 담을 div의 넓이
-            div.style.height = "110%"; // 차트를 담을 div의 높이
-            div.style.marginTop = "-15px"; // 차트를 담을 div의 높이
-            div.style.marginLeft = "-15px"; // 차트를 담을 div의 높이
+            div.style.width = "100%"; // 차트를 담을 div의 넓이
+            div.style.height = "100%"; // 차트를 담을 div의 높이
+            div.style.marginTop = ""; // 차트를 담을 div의 높이
+            div.style.marginLeft = ""; // 차트를 담을 div의 높이
             chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가
 
             let root = am5.Root.new(div); // 차트 하위 div에 차트(root) 담기

0dad4c8

360cd5b

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


   align-items: center;
   align-content: center;
   justify-content: center;
-  width: 45%;
+  /* width: 45%; */
   
 }
 

0dad4c8

360cd5b

client/views/pages/Analysis/Analysis.vue

--- client/views/pages/Analysis/Analysis.vue

+++ client/views/pages/Analysis/Analysis.vue


             </div>
           </div>
           <h2>검색결과</h2>
-          <div class="box tab-buttons result">
+          <div class="box tab-buttons result" style="height: calc(100% - 45rem);">
             <h4>총 <em style="color: #13833b">200</em>건</h4>
-            <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">
-                  <em style="color: #13833b">장소: {{ item.node }}</em>
-                </p>
-                <p class="m-b">X좌표: {{ item.lat }}</p>
-                <p class="m-b">Y좌표: {{ item.lon }}</p>
-                <p class="">{{searchResultState}} 수: {{ item.cnt }}</p>
-              </li>
-            </ul>
+            <div class="ulbox" style="">
+              <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">
+                    <em style="color: #13833b">장소: {{ item.node }}</em>
+                  </p>
+                  <p class="m-b">X좌표: {{ item.lat }}</p>
+                  <p class="m-b">Y좌표: {{ item.lon }}</p>
+                  <p class="">{{searchResultState}} 수: {{ item.cnt }}</p>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>

               :key="tab.id"
               v-show="activeTab === tab.id"
             >
-              <div v-show="tab.content1" class="box">
+              <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="box">
+              <div v-show="tab.content2" class="" style="height: 100%;">
                 <Chart :data="weekData" :theme="themeList[0]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
               </div>
             </div>

               :key="tab.id"
               v-show="activeTab2 === tab.id"
             >
-              <div v-show="tab.content1" class="box">
+              <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="box">
+              <div v-show="tab.content2" class="" style="height: 100%;">
                 <Chart :data="timeData" :theme="themeList[0]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
               </div>
             </div>

     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;}
 .toggle {
   display: none;
 }
 .wrap {
   flex-wrap: unset;
 }
-.boxwrap {
-  height: 100%;
-}
+.boxwrap{height: 100%;}
 .boxwrap h2 {
   border-radius: 10px 10px 0 0;
 }

   /* Add any other styles you want to apply when the button is active */
 }
 .chart {
-  width: 20%;
+  width: 25%;
   height: 97%;
   position: absolute;
   right: 2rem;
   top: 2rem;
 }
-.chart .box > div {
+/* .chart .box > div {
   height: 69%;
-}
+} */
 .chart .box {
   width: -webkit-fill-available;
   height: 100%;

   border-radius: 0;
 }
 .chart > div {
-  height: 95%;
+  /* height: 95%; */
 }
 .chart h2 {
   padding: 0.5rem 0;
 }
 .search .box ul {
-  height: 30rem;
-  overflow: hidden;
 }
 .search .box ul li {
   padding: 1rem 1rem 1rem 3rem;

0dad4c8

360cd5b

client/views/pages/CrosswalkManagement/CrosswalkSearch.vue

--- client/views/pages/CrosswalkManagement/CrosswalkSearch.vue

+++ client/views/pages/CrosswalkManagement/CrosswalkSearch.vue


           </div>
           <hr />
           <div class="box bg-white tab-buttons"  v-show="modal_tab == true">
-            <div class="btn_set flex-center gap">
+            <div class="btn_set flex-start gap">
               <button
-                class="m-r flex gray-btn"
+                class="m-r flex gray-btn s-btn gap"
                 v-for="tab in tabs"
                 :key="tab.id"
                 :class="{ active: activeTab === tab.id }"

           <hr />
           <h2 v-show="modal_crosswalUpdate == true">횡단보도 수정</h2>
           <div class="box" v-show="modal_crosswalUpdate == true">
-            <div class="flex-between m-b" id="siDoHiddenCk">
+            <div class="grid3_7 m-b" id="siDoHiddenCk">
               <label for="">시/도</label>
               <select
                 name="siDoSelectList"

                 </option>
               </select>
             </div>
-            <div class="flex-between m-b" id="gunGuHiddenCk">
+            <div class="grid3_7 m-b" id="gunGuHiddenCk">
               <label for="">시/군/구</label>
               <select
                 name="gunGuSelectList"

                 </option>
               </select>
             </div>
-            <div class="flex-between m-b" id="dongHiddenCk">
+            <div class="grid3_7 m-b" id="dongHiddenCk">
               <label for="">행정동</label>
               <select
                 name="dongSelectList"

                 </option>
               </select>
             </div>
-            <div class="flex-between m-b" id="nodeHiddenCk">
+            <div class="grid3_7 m-b" id="nodeHiddenCk">
               <label for="">교차로</label>
               <select
                 name="nodeSelectList"

                 </option>
               </select>
             </div>
-            <div class="flex-between m-b" id="azimuthHiddenCk">
+            <div class="grid3_7 m-b" id="azimuthHiddenCk">
               <label for="">방위각</label>
               <select
                 name="azimutSelectList"

             </div>
 
             <div class="m-b">
-              <div class="flex m-b">
-                <label for="" class="m-r">횡단보도 좌표</label
-                ><button @click="clickStateChange()">좌표선택</button>
+              <div class="grid3_7 m-b">
+                <label for="" class="m-r ">횡단보도 좌표</label
+                ><button class="gr-btn s-btn" @click="clickStateChange()">좌표선택</button>
               </div>
               <div class="flex gap">
-                <div class="flex m-b">
+                <div class="grid3_7 m-b">
                   <label class="m-r">위도 : </label>
                   <input
-                    style="width: 9rem"
                     type="text"
                     name=""
                     id=""

                     v-model="crosswalk.lat"
                   />
                 </div>
-                <div class="flex m-b">
+                <div class="grid3_7 m-b">
                   <label class="m-r">경도 : </label>
                   <input
-                    style="width: 9rem"
                     type="text"
                     name=""
                     id=""

                       placeholder=""
                       v-model="crosswalk.mngr_nm"
                     />
-                    <button @click="modal_crosswalUpdate = false ;modal_tab=true">취소</button>
+                    <button class="gr-btn s-btn" @click="modal_crosswalUpdate = false ;modal_tab=true">취소</button>
                     <div class="modal-wrap" v-if="modal_managerSearch == true">
                       <div class="modal-bg"></div>
                       <div class="modal">

               </div>
             </div>
             <div class="flex-center gap" style="margin-top: 3rem">
-              <button @click="modal_update = true">수정</button>
+              <button class="gr-btn s-btn" @click="modal_update = true">수정</button>
               <div class="modal-wrap" v-if="modal_update == true">
                 <div class="modal-bg"></div>
                 <div class="modal2">

                   </div>
                 </div>
               </div>
-              <button @click="modal_crosswalUpdate = false">취소</button>
+              <button class="gr-btn s-btn" @click="modal_crosswalUpdate = false">취소</button>
             </div>
           </div>
         </div>

   height: 9rem;
 }
 label {
-  width: max-content;
-  text-align: left;
+  
+    /* width: max-content; */
+    text-align: left;
+    line-height: 3rem;
+
 }
 .search .box {
   padding: 1rem 2rem;
 }
 .search .box select{width: -webkit-fill-available;}
 .search input[type="text"] {
-  width: 9rem;
+  /* width: 19rem; */
 }
 .box{}
 .btn_set {

   padding: 1rem;
 }
 .bg-white {
-  min-height: 46.6rem;
-  max-height: 46.6rem;
+  min-height: -webkit-fill-available;
+  max-height: -webkit-fill-available;
   overflow: scroll;
   overflow-x: hidden;
 }

 .right {
   width: -webkit-fill-available;
 }
+.search .box button img{width: 20px;}
 .pg-item {
   display: inline-block;
   padding: 10px;

0dad4c8

360cd5b

client/views/pages/RealtimeStatus/RealtimeStatus.vue

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

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


             </ul>
           </div> -->
         <div class="search">
-          <h2>조건검색</h2>        
-          <div class="box grid gap05 bg-gray" >
+          <h2>조건검색</h2>
+          <div class="box grid gap05 bg-gray">
             <div class="titleBar">
               <h3>지역설정</h3>
-              <hr>
+              <hr />
             </div>
             <DongSelectList
               @setDongCd="setDongCd"

               @dongSelectF="dongSelectF"
               @nodeSelectF="nodeSelectF"
             ></DongSelectList>
-          </div>          
+          </div>
           <div class="box">
             <div class="titleBar">
               <h3>조건 설정</h3>
-              <hr>
+              <hr />
             </div>
 
             <div class="flex-between m-b">

                 v-model="condition['eqpmnTrobl']"
               /><label for="">장애발생</label>
             </div>
-            <div class="flex-between m-b">
+            <div class="grid3_7 m-b">
               <label for="date-input">일자</label>
               <input
                 class="date-input"

               />
               <!-- <input id="date-input" type="date" v-model="condition['end_date']" :picker-options="endDateOptions" /> -->
             </div>
-            <div class="flex-between m-b3 gap">
+            <div class="grid3_7 m-b3">
               <label for="time-input">시간대</label>
-              <input
-                class="time-input"
-                id="time-input"
-                type="time"
-                v-model="condition['start_time']"
-              />~<input
-                class="time-input"
-                id="time-input"
-                type="time"
-                v-model="condition['end_time']"
-              />
+              <div class="flex-between gap">
+                <input
+                  class="time-input"
+                  id="time-input"
+                  type="time"
+                  v-model="condition['start_time']"
+                />~<input
+                  class="time-input"
+                  id="time-input"
+                  type="time"
+                  v-model="condition['end_time']"
+                />
+              </div>
             </div>
             <button
               class="btn-l gr-btn search-btn"

                 alt
               />금일 보행자
             </p>
-            <h3><em class="green2 m-r">{{comma(totalSum.walkerCount)}}</em>명</h3>
+            <h3>
+              <em class="green2 m-r">{{ comma(totalSum.walkerCount) }}</em
+              >명
+            </h3>
           </li>
           <li class="br"></li>
           <li>

                 alt
               />금일 무단횡단 발생
             </p>
-            <h3><em class="green2 m-r">{{comma(totalSum.jayWalkCount)}}</em>회</h3>
+            <h3>
+              <em class="green2 m-r">{{ comma(totalSum.jayWalkCount) }}</em
+              >회
+            </h3>
           </li>
           <li class="br"></li>
           <li>

                 alt
               />금일 신호연장 발생
             </p>
-            <h3><em class="green2 m-r">{{comma(totalSum.extentionCount)}}</em>회</h3>
+            <h3>
+              <em class="green2 m-r">{{ comma(totalSum.extentionCount) }}</em
+              >회
+            </h3>
           </li>
           <li class="br"></li>
           <li>

                 alt
               />금일 신호연장 시간
             </p>
-            <h3><em class="green2 m-r">{{comma(totalSum.extentionTime)}}</em>초</h3>
+            <h3>
+              <em class="green2 m-r">{{ comma(totalSum.extentionTime) }}</em
+              >초
+            </h3>
           </li>
           <li class="br"></li>
           <li>

                 alt
               />금일 차량 신호위반 발생
             </p>
-            <h3><em class="green2 m-r">{{comma(totalSum.violationCount)}}</em>회</h3>
+            <h3>
+              <em class="green2 m-r">{{ comma(totalSum.violationCount) }}</em
+              >회
+            </h3>
           </li>
           <li class="br"></li>
           <li>

                 alt
               />금일 장애 발생
             </p>
-            <h3><em class="green2 m-r">{{comma(totalSum.errorCount)}}</em>회</h3>
+            <h3>
+              <em class="green2 m-r">{{ comma(totalSum.errorCount) }}</em
+              >회
+            </h3>
           </li>
         </ul>
       </div>
-      <div style="height:100%">     
       <OpenLayers ref="open_layers" />
-      <button @click="showPopup" class="popup-btn s-btn gr-btn">발생정보</button>
-      <!-- Popup container -->
-      <div
-        v-if="isPopupVisible"
-        class="popup-container"
-        @click.self="hidePopup"
-      >
-        <!-- Popup content -->
-        <div class="popup-content">
-          <!-- Add your popup content here -->
-          <h2>무단횡단 발생</h2>
-          <ul>
-                <li>
-                  <p class="m-b">발생일시: 2023-05-04 14:27</p>
-                  <p class="">발생장소: 영재어린이집(서측) 동쪽횡단보도</p>
-                </li>
-              </ul>
-          <button @click="hidePopup"  class="s-btn gr-btn">닫기</button>
+      <div >
+        <button @click="showPopup" class="popup-btn s-btn gr-btn">
+          발생정보
+        </button>
+        <!-- Popup container -->
+        <div
+          v-if="isPopupVisible"
+          class="popup-container"
+          @click.self="hidePopup"
+        >
+          <!-- Popup content -->
+          <div class="popup-content">
+            <!-- Add your popup content here -->
+            <h2>무단횡단 발생</h2>
+            <ul>
+              <li>
+                <p class="m-b">발생일시: 2023-05-04 14:27</p>
+                <p class="">발생장소: 영재어린이집(서측) 동쪽횡단보도</p>
+              </li>
+            </ul>
+            <button @click="hidePopup" class="s-btn gr-btn">닫기</button>
+          </div>
         </div>
-      </div>
       </div>
     </div>
     <div class="chart grid gap">
-      <div class=" bg-white2 b-r b-shadow">
-        <h2 style="font-size: 1.3rem;">금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
+      <div class="bg-white2 b-r b-shadow">
+        <h2 style="font-size: 1.3rem">
+          금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)
+        </h2>
         <div class="box">
-         <div style="width: 100%; height: 100%" id="chartdivWrap1">
+          <div style="width: 100%; height: 100%" id="chartdivWrap1">
             <div
               ref="chartdiv1"
               id="chartdiv1"
-              style="width: 100%; height: 90%; "
+              style="width: 100%; height: 90%"
             ></div>
-          </div>   
-        </div>    
+          </div>
+        </div>
       </div>
       <div class="bg-white2 b-r b-shadow">
-        <h2 style="font-size: 1.3rem;">금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
+        <h2 style="font-size: 1.3rem">
+          금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)
+        </h2>
         <div class="box">
-         <div style="width: 100%; height: 100%" id="chartdivWrap2">
+          <div style="width: 100%; height: 100%" id="chartdivWrap2">
             <div
               ref="chartdiv2"
               id="chartdiv2"
-              style="width: 100%; height: 90%; "
+              style="width: 100%; height: 90%"
             ></div>
-          </div>   
-        </div>    
+          </div>
+        </div>
       </div>
-      <div class=" bg-white2 b-r b-shadow">
-        <h2 style="font-size: 1.3rem;">금일 횡단보도 별 무단횡단 발생 건수 (상위5개소)</h2>
+      <div class="bg-white2 b-r b-shadow">
+        <h2 style="font-size: 1.3rem">
+          금일 횡단보도 별 무단횡단 발생 건수 (상위5개소)
+        </h2>
         <div class="box">
-         <div style="width: 100%; height: 100%" id="chartdivWrap3">
+          <div style="width: 100%; height: 100%" id="chartdivWrap3">
             <div
               ref="chartdiv3"
               id="chartdiv3"
-              style="width: 100%; height: 90%; "
+              style="width: 100%; height: 90%"
             ></div>
-          </div>   
-        </div>    
+          </div>
+        </div>
       </div>
-      <div class=" bg-white2 b-r b-shadow">
-        <h2 style="font-size: 1.3rem;">금일 횡단보도 별 무단횡단 발생 건수 (상위5개소)</h2>
+      <div class="bg-white2 b-r b-shadow">
+        <h2 style="font-size: 1.3rem">
+          금일 횡단보도 별 무단횡단 발생 건수 (상위5개소)
+        </h2>
         <div class="box">
-         <div style="width: 100%; height: 100%" id="chartdivWrap4">
+          <div style="width: 100%; height: 100%" id="chartdivWrap4">
             <div
               ref="chartdiv4"
               id="chartdiv4"
-              style="width: 100%; height: 90%; "
+              style="width: 100%; height: 90%"
             ></div>
-          </div>   
-        </div>    
+          </div>
+        </div>
       </div>
     </div>
   </div>

         { id: 3, name: "우회전 차량", isActive: false },
         { id: 4, name: "장애발생", isActive: false },
       ],
-      chart1 : {},
-      chart2 : {},
-      chart3 : {},
-      chart4 : {},
-      data1 :  [{
-                country: "달서초등 동",
-                value: 32
-              }, {
-                country: "비산초등 남",
-                value: 25
-              }, {
-                country: "달서초등 서",
-                value: 21
-              }, {
-                country: "에덴둥지맨션 동",
-                value: 21
-              }, {
-                country: "에덴둥지맨션 남",
-                value: 19
-              }, {
-                country: "대구의료원편 남",
-                value: 16
-              }, {
-                country: "대구의료원편 서",
-                value: 16
-              }, {
-                country: "대구의료원서편 북",
-                value: 15
-              }, {
-                country: "대구의료원 입구(A) 남",
-                value: 10
-              }, {
-                country: "달서초등(A) 북",
-                value: 8
-              }],
-       data2 :  [{
-                country: "달서초등 동",
-                value: 15
-              }, {
-                country: "비산초등 남",
-                value: 12
-              }, {
-                country: "달서초등 서",
-                value: 3
-              }, {
-                country: "에덴둥지맨션 동",
-                value: 1
-              }, {
-                country: "에덴둥지맨션 남",
-                value: 1
-              }, {
-                country: "대구의료원편 서",
-                value: 1
-              }, {
-                country: "대구의료원서편 북",
-                value: 0
-              }, {
-                country: "대구의료원 입구(A) 남",
-                value: 0
-              }, {
-                country: "달서초등(A) 북",
-                value: 0
-              }],
-        data3 :  [{
-                country: "달서초등 동",
-                value: 15
-              }, {
-                country: "비산초등 남",
-                value: 12
-              }, {
-                country: "달서초등 서",
-                value: 0
-              }, {
-                country: "에덴둥지맨션 동",
-                value: 0
-              }, {
-                country: "에덴둥지맨션 남",
-                value: 0
-              }],
-        data4 : [{
-                country: "달서초등 동",
-                value: 1
-              }, {
-                country: "비산초등 남",
-                value: 1
-              }, {
-                country: "달서초등 서",
-                value: 0
-              }, {
-                country: "에덴둥지맨션 동",
-                value: 0
-              }, {
-                country: "에덴둥지맨션 남",
-                value: 0
-              }],
-        totalSum : {
-              walkerCount : 1049,
-              jayWalkCount : 188,
-              extentionCount : 33,
-              extentionTime : 280,
-              violationCount : 27,
-              errorCount : 2
-              }     
+      chart1: {},
+      chart2: {},
+      chart3: {},
+      chart4: {},
+      data1: [
+        {
+          country: "달서초등 동",
+          value: 32,
+        },
+        {
+          country: "비산초등 남",
+          value: 25,
+        },
+        {
+          country: "달서초등 서",
+          value: 21,
+        },
+        {
+          country: "에덴둥지맨션 동",
+          value: 21,
+        },
+        {
+          country: "에덴둥지맨션 남",
+          value: 19,
+        },
+        {
+          country: "대구의료원편 남",
+          value: 16,
+        },
+        {
+          country: "대구의료원편 서",
+          value: 16,
+        },
+        {
+          country: "대구의료원서편 북",
+          value: 15,
+        },
+        {
+          country: "대구의료원 입구(A) 남",
+          value: 10,
+        },
+        {
+          country: "달서초등(A) 북",
+          value: 8,
+        },
+      ],
+      data2: [
+        {
+          country: "달서초등 동",
+          value: 15,
+        },
+        {
+          country: "비산초등 남",
+          value: 12,
+        },
+        {
+          country: "달서초등 서",
+          value: 3,
+        },
+        {
+          country: "에덴둥지맨션 동",
+          value: 1,
+        },
+        {
+          country: "에덴둥지맨션 남",
+          value: 1,
+        },
+        {
+          country: "대구의료원편 서",
+          value: 1,
+        },
+        {
+          country: "대구의료원서편 북",
+          value: 0,
+        },
+        {
+          country: "대구의료원 입구(A) 남",
+          value: 0,
+        },
+        {
+          country: "달서초등(A) 북",
+          value: 0,
+        },
+      ],
+      data3: [
+        {
+          country: "달서초등 동",
+          value: 15,
+        },
+        {
+          country: "비산초등 남",
+          value: 12,
+        },
+        {
+          country: "달서초등 서",
+          value: 0,
+        },
+        {
+          country: "에덴둥지맨션 동",
+          value: 0,
+        },
+        {
+          country: "에덴둥지맨션 남",
+          value: 0,
+        },
+      ],
+      data4: [
+        {
+          country: "달서초등 동",
+          value: 1,
+        },
+        {
+          country: "비산초등 남",
+          value: 1,
+        },
+        {
+          country: "달서초등 서",
+          value: 0,
+        },
+        {
+          country: "에덴둥지맨션 동",
+          value: 0,
+        },
+        {
+          country: "에덴둥지맨션 남",
+          value: 0,
+        },
+      ],
+      totalSum: {
+        walkerCount: 1049,
+        jayWalkCount: 188,
+        extentionCount: 33,
+        extentionTime: 280,
+        violationCount: 27,
+        errorCount: 2,
+      },
     };
   },
   components: {

   },
   watch: {},
   computed: {},
-  computed:{
-      comma(){
-        return (v)=>{
-          return  v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-          }
-        }
+  computed: {
+    comma() {
+      return (v) => {
+        return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      };
+    },
   },
   mounted() {
     console.log("Main2 mounted ");
-    
-    COMMON_CHART.createChartById('chartdiv1', this.chart1 , this.data1);
-    COMMON_CHART.createChartById('chartdiv2', this.chart2 , this.data2);
-    COMMON_CHART.createChartById('chartdiv3', this.chart3 , this.data3);
-    COMMON_CHART.createChartById('chartdiv4', this.chart4 , this.data4);
+
+    COMMON_CHART.createChartById("chartdiv1", this.chart1, this.data1);
+    COMMON_CHART.createChartById("chartdiv2", this.chart2, this.data2);
+    COMMON_CHART.createChartById("chartdiv3", this.chart3, this.data3);
+    COMMON_CHART.createChartById("chartdiv4", this.chart4, this.data4);
 
     this.$refs.open_layers.setBaseMap(vworldBaseLayer);
 

 
 .popup-content {
   background-color: #000000a3;
-    width: 17%;
-    text-align: center;
-    color: #ffffff;
-    /* height: 20%; */
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  width: 17%;
+  text-align: center;
+  color: #ffffff;
+  /* height: 20%; */
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }
-.popup-content ul{padding: 2rem 0;}
-.popup-content ul li{font-size: 16px;}
+.popup-content ul {
+  padding: 2rem 0;
+}
+.popup-content ul li {
+  font-size: 16px;
+}
 .popup-content h2 {
   margin-top: 0;
   font-size: 2.5rem;

   background-color: #fff;
 }
 
-.left h2, .chart h2 {
+.left h2,
+.chart h2 {
   background: #50ba8a;
   text-align: center;
   color: #fff;
   padding: 1.6rem 0;
 }
 
-.left h2{
+.left h2 {
   padding: 1rem 0;
   font-size: 1.3rem;
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -129,7 +129,7 @@
129	129
130	130	.grid3_7 > select {
131	131	padding: 0.5rem;
132		- border-radius: 5px;
	132	+ /* border-radius: 5px; */
133	133	width: 90%;
134	134	height: 3rem;
135	135	border: 1px solid #c3bfbf;

...	...	@@ -55,7 +55,7 @@
55	55	</div> -->
56	56	<!-- 차트 selectbox (끝)-->
57	57	<!-- </div> -->
58		- <div class="chart" id="chartdiv" ref="chartdiv" style="width: 100%; height: 100%;"></div>
	58	+ <div class="" id="chartdiv" ref="chartdiv" style="width: 100%; height: 100%;"></div>
59	59	</template>
60	60
61	61	<script>
...	...	@@ -429,10 +429,10 @@
429	429	chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
430	430
431	431	let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
432		- div.style.width = "110%"; // 차트를 담을 div의 넓이
433		- div.style.height = "110%"; // 차트를 담을 div의 높이
434		- div.style.marginTop = "-15px"; // 차트를 담을 div의 높이
435		- div.style.marginLeft = "-15px"; // 차트를 담을 div의 높이
	432	+ div.style.width = "100%"; // 차트를 담을 div의 넓이
	433	+ div.style.height = "100%"; // 차트를 담을 div의 높이
	434	+ div.style.marginTop = ""; // 차트를 담을 div의 높이
	435	+ div.style.marginLeft = ""; // 차트를 담을 div의 높이
436	436	chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가
437	437
438	438	let root = am5.Root.new(div); // 차트 하위 div에 차트(root) 담기

...	...	@@ -528,7 +528,7 @@
528	528	align-items: center;
529	529	align-content: center;
530	530	justify-content: center;
531		- width: 45%;
	531	+ /* width: 45%; */
532	532
533	533	}
534	534

...	...	@@ -45,20 +45,22 @@
45	45	</div>
46	46	</div>
47	47	<h2>검색결과</h2>
48		- <div class="box tab-buttons result">
	48	+ <div class="box tab-buttons result" style="height: calc(100% - 45rem);">
49	49	<h4>총 <em style="color: #13833b">200</em>건</h4>
50		- <ul>
51		- <li class="result" v-for="(item, idx) in searchResult" :key="idx">
52		- <h5>{{ idx + 1 }}</h5>
53		- <p class="m-b">시도: {{ item.dong }}</p>
54		- <p class="m-b">
55		- <em style="color: #13833b">장소: {{ item.node }}</em>
56		- </p>
57		- <p class="m-b">X좌표: {{ item.lat }}</p>
58		- <p class="m-b">Y좌표: {{ item.lon }}</p>
59		- <p class="">{{searchResultState}} 수: {{ item.cnt }}</p>
60		- </li>
61		- </ul>
	50	+ <div class="ulbox" style="">
	51	+ <ul >
	52	+ <li class="result" v-for="(item, idx) in searchResult" :key="idx">
	53	+ <h5>{{ idx + 1 }}</h5>
	54	+ <p class="m-b">시도: {{ item.dong }}</p>
	55	+ <p class="m-b">
	56	+ <em style="color: #13833b">장소: {{ item.node }}</em>
	57	+ </p>
	58	+ <p class="m-b">X좌표: {{ item.lat }}</p>
	59	+ <p class="m-b">Y좌표: {{ item.lon }}</p>
	60	+ <p class="">{{searchResultState}} 수: {{ item.cnt }}</p>
	61	+ </li>
	62	+ </ul>
	63	+ </div>
62	64	</div>
63	65	</div>
64	66	</div>
...	...	@@ -128,10 +130,10 @@
128	130	:key="tab.id"
129	131	v-show="activeTab === tab.id"
130	132	>
131		- <div v-show="tab.content1" class="box">
	133	+ <div v-show="tab.content1" class="" style="height: 100%;">
132	134	<Chart :data="monthData" :theme="themeList[0]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
133	135	</div>
134		- <div v-show="tab.content2" class="box">
	136	+ <div v-show="tab.content2" class="" style="height: 100%;">
135	137	<Chart :data="weekData" :theme="themeList[0]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
136	138	</div>
137	139	</div>
...	...	@@ -156,10 +158,10 @@
156	158	:key="tab.id"
157	159	v-show="activeTab2 === tab.id"
158	160	>
159		- <div v-show="tab.content1" class="box">
	161	+ <div v-show="tab.content1" class="" style="height: 100%;">
160	162	<Chart :data="dayData" :theme="themeList[0]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
161	163	</div>
162		- <div v-show="tab.content2" class="box">
	164	+ <div v-show="tab.content2" class="" style="height: 100%;">
163	165	<Chart :data="timeData" :theme="themeList[0]" :categoryDataList="categoryDataList" :valueDataList="valueDataList"></Chart>
164	166	</div>
165	167	</div>
...	...	@@ -1069,15 +1071,18 @@
1069	1071	transform: translateX(0);
1070	1072	}
1071	1073	}
	1074	+.boxwrap{height: calc(100% - 3rem);}
	1075	+.tab-content{height: calc(100% - 6rem);}
	1076	+.tab-content .box{padding: 1rem;}
	1077	+.tab-buttons .ulbox{height: calc(100% - 3rem); overflow: scroll; overflow-x: hidden;}
	1078	+.ulbox ul {height: 30rem;}
1072	1079	.toggle {
1073	1080	display: none;
1074	1081	}
1075	1082	.wrap {
1076	1083	flex-wrap: unset;
1077	1084	}
1078		-.boxwrap {
1079		- height: 100%;
1080		-}
	1085	+.boxwrap{height: 100%;}
1081	1086	.boxwrap h2 {
1082	1087	border-radius: 10px 10px 0 0;
1083	1088	}
...	...	@@ -1098,15 +1103,15 @@
1098	1103	/* Add any other styles you want to apply when the button is active */
1099	1104	}
1100	1105	.chart {
1101		- width: 20%;
	1106	+ width: 25%;
1102	1107	height: 97%;
1103	1108	position: absolute;
1104	1109	right: 2rem;
1105	1110	top: 2rem;
1106	1111	}
1107		-.chart .box > div {
	1112	+/* .chart .box > div {
1108	1113	height: 69%;
1109		-}
	1114	+} */
1110	1115	.chart .box {
1111	1116	width: -webkit-fill-available;
1112	1117	height: 100%;
...	...	@@ -1115,14 +1120,12 @@
1115	1120	border-radius: 0;
1116	1121	}
1117	1122	.chart > div {
1118		- height: 95%;
	1123	+ /* height: 95%; */
1119	1124	}
1120	1125	.chart h2 {
1121	1126	padding: 0.5rem 0;
1122	1127	}
1123	1128	.search .box ul {
1124		- height: 30rem;
1125		- overflow: hidden;
1126	1129	}
1127	1130	.search .box ul li {
1128	1131	padding: 1rem 1rem 1rem 3rem;

...	...	@@ -11,9 +11,9 @@
11	11	</div>
12	12	<hr />
13	13	<div class="box bg-white tab-buttons" v-show="modal_tab == true">
14		- <div class="btn_set flex-center gap">
	14	+ <div class="btn_set flex-start gap">
15	15	<button
16		- class="m-r flex gray-btn"
	16	+ class="m-r flex gray-btn s-btn gap"
17	17	v-for="tab in tabs"
18	18	:key="tab.id"
19	19	:class="{ active: activeTab === tab.id }"
...	...	@@ -60,7 +60,7 @@
60	60	<hr />
61	61	<h2 v-show="modal_crosswalUpdate == true">횡단보도 수정</h2>
62	62	<div class="box" v-show="modal_crosswalUpdate == true">
63		- <div class="flex-between m-b" id="siDoHiddenCk">
	63	+ <div class="grid3_7 m-b" id="siDoHiddenCk">
64	64	<label for="">시/도</label>
65	65	<select
66	66	name="siDoSelectList"
...	...	@@ -78,7 +78,7 @@
78	78	</option>
79	79	</select>
80	80	</div>
81		- <div class="flex-between m-b" id="gunGuHiddenCk">
	81	+ <div class="grid3_7 m-b" id="gunGuHiddenCk">
82	82	<label for="">시/군/구</label>
83	83	<select
84	84	name="gunGuSelectList"
...	...	@@ -96,7 +96,7 @@
96	96	</option>
97	97	</select>
98	98	</div>
99		- <div class="flex-between m-b" id="dongHiddenCk">
	99	+ <div class="grid3_7 m-b" id="dongHiddenCk">
100	100	<label for="">행정동</label>
101	101	<select
102	102	name="dongSelectList"
...	...	@@ -114,7 +114,7 @@
114	114	</option>
115	115	</select>
116	116	</div>
117		- <div class="flex-between m-b" id="nodeHiddenCk">
	117	+ <div class="grid3_7 m-b" id="nodeHiddenCk">
118	118	<label for="">교차로</label>
119	119	<select
120	120	name="nodeSelectList"
...	...	@@ -132,7 +132,7 @@
132	132	</option>
133	133	</select>
134	134	</div>
135		- <div class="flex-between m-b" id="azimuthHiddenCk">
	135	+ <div class="grid3_7 m-b" id="azimuthHiddenCk">
136	136	<label for="">방위각</label>
137	137	<select
138	138	name="azimutSelectList"
...	...	@@ -152,15 +152,14 @@
152	152	</div>
153	153
154	154	<div class="m-b">
155		- <div class="flex m-b">
156		- <label for="" class="m-r">횡단보도 좌표</label
157		- ><button @click="clickStateChange()">좌표선택</button>
	155	+ <div class="grid3_7 m-b">
	156	+ <label for="" class="m-r ">횡단보도 좌표</label
	157	+ ><button class="gr-btn s-btn" @click="clickStateChange()">좌표선택</button>
158	158	</div>
159	159	<div class="flex gap">
160		- <div class="flex m-b">
	160	+ <div class="grid3_7 m-b">
161	161	<label class="m-r">위도 : </label>
162	162	<input
163		- style="width: 9rem"
164	163	type="text"
165	164	name=""
166	165	id=""
...	...	@@ -168,10 +167,9 @@
168	167	v-model="crosswalk.lat"
169	168	/>
170	169	</div>
171		- <div class="flex m-b">
	170	+ <div class="grid3_7 m-b">
172	171	<label class="m-r">경도 : </label>
173	172	<input
174		- style="width: 9rem"
175	173	type="text"
176	174	name=""
177	175	id=""
...	...	@@ -282,7 +280,7 @@
282	280	placeholder=""
283	281	v-model="crosswalk.mngr_nm"
284	282	/>
285		- <button @click="modal_crosswalUpdate = false ;modal_tab=true">취소</button>
	283	+ <button class="gr-btn s-btn" @click="modal_crosswalUpdate = false ;modal_tab=true">취소</button>
286	284	<div class="modal-wrap" v-if="modal_managerSearch == true">
287	285	<div class="modal-bg"></div>
288	286	<div class="modal">
...	...	@@ -363,7 +361,7 @@
363	361	</div>
364	362	</div>
365	363	<div class="flex-center gap" style="margin-top: 3rem">
366		- <button @click="modal_update = true">수정</button>
	364	+ <button class="gr-btn s-btn" @click="modal_update = true">수정</button>
367	365	<div class="modal-wrap" v-if="modal_update == true">
368	366	<div class="modal-bg"></div>
369	367	<div class="modal2">
...	...	@@ -379,7 +377,7 @@
379	377	</div>
380	378	</div>
381	379	</div>
382		- <button @click="modal_crosswalUpdate = false">취소</button>
	380	+ <button class="gr-btn s-btn" @click="modal_crosswalUpdate = false">취소</button>
383	381	</div>
384	382	</div>
385	383	</div>
...	...	@@ -1362,15 +1360,18 @@
1362	1360	height: 9rem;
1363	1361	}
1364	1362	label {
1365		- width: max-content;
1366		- text-align: left;
	1363	+
	1364	+ /* width: max-content; */
	1365	+ text-align: left;
	1366	+ line-height: 3rem;
	1367	+
1367	1368	}
1368	1369	.search .box {
1369	1370	padding: 1rem 2rem;
1370	1371	}
1371	1372	.search .box select{width: -webkit-fill-available;}
1372	1373	.search input[type="text"] {
1373		- width: 9rem;
	1374	+ /* width: 19rem; */
1374	1375	}
1375	1376	.box{}
1376	1377	.btn_set {
...	...	@@ -1387,8 +1388,8 @@
1387	1388	padding: 1rem;
1388	1389	}
1389	1390	.bg-white {
1390		- min-height: 46.6rem;
1391		- max-height: 46.6rem;
	1391	+ min-height: -webkit-fill-available;
	1392	+ max-height: -webkit-fill-available;
1392	1393	overflow: scroll;
1393	1394	overflow-x: hidden;
1394	1395	}
...	...	@@ -1425,6 +1426,7 @@
1425	1426	.right {
1426	1427	width: -webkit-fill-available;
1427	1428	}
	1429	+.search .box button img{width: 20px;}
1428	1430	.pg-item {
1429	1431	display: inline-block;
1430	1432	padding: 10px;

...	...	@@ -19,7 +19,9 @@
19	19	font-weight: bold;
20	20	font-style: normal;
21	21	}
22		-label{width: -webkit-fill-available;}
	22	+label {
	23	+ width: -webkit-fill-available;
	24	+}
23	25	button {
24	26	padding: 0.3rem 2rem;
25	27	width: 100%;
...	...	@@ -27,24 +29,45 @@
27	29	border: 1px solid #333333;
28	30	height: 3rem;
29	31	}
30		-.s-btn{width: 15rem;}
31		-input[type="text"]{height: 3rem; width: 90%; padding: 0.5rem;
32		- border-radius: 5px; border: 1px solid #c8c8c8}
33		- .text-input{width: 13rem !important;}
	32	+.s-btn {
	33	+ width: 15rem;
	34	+}
	35	+input[type="text"] {
	36	+ height: 3rem;
	37	+ width: 90%;
	38	+ padding: 0.5rem;
	39	+ /* border-radius: 5px; */
	40	+ border: 1px solid #c8c8c8;
	41	+}
	42	+.text-input {
	43	+ width: 13rem !important;
	44	+}
34	45	select {
35	46	padding: 0.5rem;
36		- border-radius: 5px;
	47	+ /* border-radius: 5px; */
37	48	width: 90%;
38		- height: 3rem;
39		- border: 1px solid #c8c8c8
	49	+ height: 3rem;
	50	+ border: 1px solid #c8c8c8;
40	51	}
41		-.border-none{border-top: none !important; border-bottom: none !important;}
42		-.icon{position: absolute; z-index: 500;}
43		-.crosswalk{width: 60px; top: 22%;
44		- left: 60%;}
45		-.warning{width: 50px; top: 34%;
46		- left: 54%;}
47		-.fon2{
	52	+.border-none {
	53	+ border-top: none !important;
	54	+ border-bottom: none !important;
	55	+}
	56	+.icon {
	57	+ position: absolute;
	58	+ z-index: 500;
	59	+}
	60	+.crosswalk {
	61	+ width: 60px;
	62	+ top: 22%;
	63	+ left: 60%;
	64	+}
	65	+.warning {
	66	+ width: 50px;
	67	+ top: 34%;
	68	+ left: 54%;
	69	+}
	70	+.fon2 {
48	71	background-color: #31a257;
49	72	color: white;
50	73	}
...	...	@@ -58,6 +81,11 @@
58	81	.grid2 {
59	82	display: grid;
60	83	grid-template-columns: 1fr 1fr;
	84	+}
	85	+.grid1_9 {
	86	+ display: grid;
	87	+ grid-template-columns: 10% 90%;
	88	+ height: 100%;
61	89	}
62	90	.grid2_8 {
63	91	display: grid;
...	...	@@ -92,11 +120,13 @@
92	120	justify-content: space-around;
93	121	align-items: center;
94	122	}
95		-.flex-border{ display: flex;
	123	+.flex-border {
	124	+ display: flex;
96	125	flex-direction: row;
97	126	align-items: flex-start;
98	127	border: 1px solid #949292;
99		- flex-basis: content;}
	128	+ flex-basis: content;
	129	+}
100	130	.flex-center {
101	131	display: flex;
102	132	justify-content: center;
...	...	@@ -184,9 +214,12 @@
184	214	padding: 0px 0px;
185	215	}
186	216
187		-
188		-.b-r{border-radius: 10px;}
189		-.b-shadow{box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.3);}
	217	+.b-r {
	218	+ border-radius: 10px;
	219	+}
	220	+.b-shadow {
	221	+ box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.3);
	222	+}
190	223	.bg-white {
191	224	background: #ffffff;
192	225	}
...	...	@@ -273,7 +306,7 @@
273	306	.search-btn {
274	307	height: 4rem;
275	308	font-size: 16px;
276		- padding: 0.5rem 3rem;
	309	+ padding: 0.5rem 3rem;
277	310	}
278	311	/스크롤바디자인/
279	312	::-webkit-scrollbar-thumb {
...	...	@@ -372,15 +405,19 @@
372	405	border: 1px solid #b0afaf;
373	406	}
374	407
375		-.table2{border: 1px solid #b0afaf; text-align: left !important;}
376		-.table2 th{
	408	+.table2 {
	409	+ border: 1px solid #b0afaf;
	410	+ text-align: left !important;
	411	+}
	412	+.table2 th {
377	413	background-color: #f7f6f6 !important;
378	414	color: #333 !important;
379		-
380	415	}
381		-.table2 td{
	416	+.table2 td {
382	417	background-color: #ffffff !important;
383	418	border-bottom: 0 !important;
384		- }
	419	+}
385	420
386		- .table2 label{width: max-content !important;} (No newline at end of file)
	421	+.table2 label {
	422	+ width: max-content !important;
	423	+}

...	...	@@ -1,154 +1,251 @@
1	1	/* 현황관제 */
2		-.search{ height: inherit; width: -webkit-fill-available; }
3		-.search label{ font-size: 12px; }
4		-.search p{font-size: 16px;}
	2	+.search {
	3	+ height: inherit;
	4	+ width: -webkit-fill-available;
	5	+}
	6	+.search label {
	7	+ font-size: 12px;
	8	+}
	9	+.search p {
	10	+ font-size: 16px;
	11	+}
5	12	/* .search select{width: 20rem; height: 3rem;} */
6		-.search .box{padding: 1rem 1rem;}
7		-.search .box ul li{padding: 1rem; border-bottom: 1px solid #e5e3e3;}
8		-.iconlist{width: 55px; background: #d6d6d6; padding: 2rem 0.7rem; text-align: center; height: inherit;}
9		-.iconlist li{text-align: -webkit-center; margin-bottom: 4rem;}
10		-.iconlist li div{width: 25px; height: 25px; background-repeat: no-repeat; }
11		-.iconlist li p{font-weight: bold;}
12		-.iconlist li.active p{color:#10833b;}
13		-.iconlist li:nth-child(4) div{background-image: url(../images/icon/FailureOccurrencegray.png); }
14		-.iconlist li:nth-child(4).active div{background-image: url(../images/icon/FailureOccurrencegreen.png);}
15		-.iconlist li:nth-child(1) div{background-image: url(../images/icon/jaywalkinggray.png);}
16		-.iconlist li:nth-child(1).active div{background-image: url(../images/icon/jaywalkinggreen.png);}
17		-.iconlist li:nth-child(3) div{background-image: url(../images/icon/rightturngray.png);}
18		-.iconlist li:nth-child(3).active div{background-image: url(../images/icon/rightturngreen.png);}
19		-.iconlist li:nth-child(2) div{background-image: url(../images/icon/Signalextensiongray.png);}
20		-.iconlist li:nth-child(2).active div{background-image: url(../images/icon/Signalextensiongreen.png);}
	13	+.search .box {
	14	+ padding: 1rem 1rem;
	15	+}
	16	+.search .box ul li {
	17	+ padding: 1rem;
	18	+ border-bottom: 1px solid #e5e3e3;
	19	+}
	20	+.iconlist {
	21	+ background: #d6d6d6;
	22	+ padding: 2rem 0.7rem;
	23	+ text-align: center;
	24	+ height: inherit;
	25	+}
	26	+.iconlist li {
	27	+ text-align: -webkit-center;
	28	+ margin-bottom: 4rem;
	29	+}
	30	+.iconlist li div {
	31	+ width: 25px;
	32	+ height: 25px;
	33	+ background-repeat: no-repeat;
	34	+}
	35	+.iconlist li p {
	36	+ font-weight: bold;
	37	+}
	38	+.iconlist li.active p {
	39	+ color: #10833b;
	40	+}
	41	+.iconlist li:nth-child(4) div {
	42	+ background-image: url(../images/icon/FailureOccurrencegray.png);
	43	+}
	44	+.iconlist li:nth-child(4).active div {
	45	+ background-image: url(../images/icon/FailureOccurrencegreen.png);
	46	+}
	47	+.iconlist li:nth-child(1) div {
	48	+ background-image: url(../images/icon/jaywalkinggray.png);
	49	+}
	50	+.iconlist li:nth-child(1).active div {
	51	+ background-image: url(../images/icon/jaywalkinggreen.png);
	52	+}
	53	+.iconlist li:nth-child(3) div {
	54	+ background-image: url(../images/icon/rightturngray.png);
	55	+}
	56	+.iconlist li:nth-child(3).active div {
	57	+ background-image: url(../images/icon/rightturngreen.png);
	58	+}
	59	+.iconlist li:nth-child(2) div {
	60	+ background-image: url(../images/icon/Signalextensiongray.png);
	61	+}
	62	+.iconlist li:nth-child(2).active div {
	63	+ background-image: url(../images/icon/Signalextensiongreen.png);
	64	+}
21	65
22		-.top{ z-index: 100; background: #fff; top: 0; width: -webkit-fill-available;}
	66	+.top {
	67	+ z-index: 100;
	68	+ background: #fff;
	69	+ top: 0;
	70	+ width: -webkit-fill-available;
	71	+}
23	72	.top p {
24		- font-size: 15px;
25		- }
26		- .top ul {
27		- padding: 1rem 0;
28		- justify-content: space-evenly;
29		- }
30		- .top li {
31		- text-align: center;
32		- }
33		- .top h3 {
34		- font-size: 20px;
35		- }
	73	+ font-size: 15px;
	74	+}
	75	+.top ul {
	76	+ padding: 1rem 0;
	77	+ justify-content: space-evenly;
	78	+}
	79	+.top li {
	80	+ text-align: center;
	81	+}
	82	+.top h3 {
	83	+ font-size: 20px;
	84	+}
36	85
	86	+.date-input,
	87	+.time-input {
	88	+ height: 3rem;
	89	+ /* border-radius: 5px; */
	90	+ border: 1px solid #c8c8c8;
	91	+ padding: 0.5rem;
	92	+}
	93	+.time-input,
	94	+.text-input {
	95	+ height: 3rem;
	96	+}
37	97
38		- .date-input,.time-input{height: 3rem; border-radius: 5px; border: 1px solid #c8c8c8; padding: 0.5rem;
39		- }
40		- .time-input, .text-input{height: 3rem;}
41		-
42		-.mobile{display: none;}
	98	+.mobile {
	99	+ display: none;
	100	+}
43	101
44	102	.search-wrap {
45	103	margin-bottom: 30px;
46		- background: #f7f6f6;
47		- /* padding: 1rem; */
48		- /* height: 16em; */
49		- width: 100%;
50		- /* flex-wrap: wrap; */
51		- /* align-content: flex-start; */
52		- margin-bottom: 3rem;
	104	+ background: #f7f6f6;
	105	+ /* padding: 1rem; */
	106	+ /* height: 16em; */
	107	+ width: 100%;
	108	+ /* flex-wrap: wrap; */
	109	+ /* align-content: flex-start; */
	110	+ margin-bottom: 3rem;
53	111	}
54		-.search-wrap input{height: 3rem; width: 100%; border-radius: 5px;
55		- border: 1px solid #949292; margin: 1rem; padding: 0.5rem;}
56		- .search-wrap label{height: 100%; width: max-content; padding: 1rem; font-size: 14px; background: #f7f6f6; border-collapse: collapse;}
57		- .search-wrap select{margin: 1rem; width: 25rem;}
58		- .search-wrap .situ button{margin: 1rem;}
59		- .search-wrap .box{width: 100%; padding-right: 5rem;}
	112	+.search-wrap input {
	113	+ height: 3rem;
	114	+ width: 100%;
	115	+ border-radius: 5px;
	116	+ border: 1px solid #949292;
	117	+ margin: 1rem;
	118	+ padding: 0.5rem;
	119	+}
	120	+.search-wrap label {
	121	+ height: 100%;
	122	+ width: max-content;
	123	+ padding: 1rem;
	124	+ font-size: 14px;
	125	+ background: #f7f6f6;
	126	+ border-collapse: collapse;
	127	+}
	128	+.search-wrap select {
	129	+ margin: 1rem;
	130	+ width: 25rem;
	131	+}
	132	+.search-wrap .situ button {
	133	+ margin: 1rem;
	134	+}
	135	+.search-wrap .box {
	136	+ width: 100%;
	137	+ padding-right: 5rem;
	138	+}
60	139
61		- @media all and (max-width: 479px) {
62		-
63		- .board-wrap{padding: 0 1rem;}
64		- .float-right{display: flow-root; margin: 2rem 0 1rem 0}
65		- .tab-wrap ul{justify-content: center}
66		- .tab{width: 16rem !important;}
67		- .wrap{width: -webkit-fill-available !important; margin: 20px auto !important;}
68		- .mobile{display: block !important;}
69		- .pc{display: none;}
	140	+@media all and (max-width: 479px) {
	141	+ .board-wrap {
	142	+ padding: 0 1rem;
70	143	}
	144	+ .float-right {
	145	+ display: flow-root;
	146	+ margin: 2rem 0 1rem 0;
	147	+ }
	148	+ .tab-wrap ul {
	149	+ justify-content: center;
	150	+ }
	151	+ .tab {
	152	+ width: 16rem !important;
	153	+ }
	154	+ .wrap {
	155	+ width: -webkit-fill-available !important;
	156	+ margin: 20px auto !important;
	157	+ }
	158	+ .mobile {
	159	+ display: block !important;
	160	+ }
	161	+ .pc {
	162	+ display: none;
	163	+ }
	164	+}
71	165
	166	+.modal {
	167	+ width: 100rem;
	168	+}
	169	+.modal input {
	170	+ padding: 0.5rem;
	171	+ height: 3rem;
	172	+ border: 1px solid #c8c8c8;
	173	+ border-radius: 5px;
	174	+}
	175	+.modalmain {
	176	+ padding: 2rem;
	177	+ max-height: 70rem;
	178	+ overflow: scroll;
	179	+ overflow-x: hidden;
	180	+}
	181	+.modalmain select {
	182	+ width: max-content;
	183	+}
	184	+.modalmain input[type="text"] {
	185	+ width: inherit;
	186	+}
	187	+.modalmain table thead {
	188	+ background: #f7f6f6;
	189	+}
	190	+.modalmain table td {
	191	+ border: 1px solid #eee;
	192	+}
	193	+.modal h2 {
	194	+ background: #018b4d;
	195	+ font-size: 3rem;
	196	+ padding: 1.5rem;
	197	+ color: #ffffff;
	198	+}
	199	+.modal-bg h2 {
	200	+ background: #e5e5dd;
	201	+ font-size: 2rem;
	202	+ padding: 1rem;
	203	+}
	204	+.modal h3 {
	205	+ font-size: 1.8rem;
	206	+ border-bottom: 1px solid #eee;
	207	+ padding: 1rem 0 0.2rem 0;
	208	+}
	209	+.modal h4 {
	210	+ font-size: 1.6rem;
	211	+ font-weight: 100;
	212	+ padding: 0.2rem 0 1rem 0;
	213	+}
	214	+.modal h2 button {
	215	+ border: 0;
	216	+ background: none;
	217	+ height: 30px;
	218	+ cursor: pointer;
	219	+ width: fit-content;
	220	+}
	221	+.modal-bg button {
	222	+ border: 0;
	223	+ background: none;
	224	+ height: 30px;
	225	+ cursor: pointer;
	226	+}
	227	+.modal button img {
	228	+ width: 25px;
	229	+}
72	230
73		- .modal {
74		- width: 100rem;
75		- }
76		- .modal input{padding: 0.5rem; height: 3rem; border: 1px solid #c8c8c8; border-radius: 5px;}
77		- .modalmain {
78		- padding: 2rem;
79		- max-height: 70rem;
80		- overflow: scroll;
81		- overflow-x: hidden;
82		- }
83		- .modalmain select {
84		- width: max-content;
85		- }
86		- .modalmain input[type="text"] {
87		- width: inherit;
88		- }
89		- .modalmain table thead {
90		- background: #f7f6f6;
91		- }
92		- .modalmain table td {
93		- border: 1px solid #eee;
94		- }
95		- .modal h2 {
96		- background: #018b4d;
97		- font-size: 3rem;
98		- padding: 1.5rem;
99		- color: #ffffff;
100		- }
101		- .modal-bg h2 {
102		- background: #e5e5dd;
103		- font-size: 2rem;
104		- padding: 1rem;
105		- }
106		- .modal h3 {
107		- font-size: 1.8rem;
108		- border-bottom: 1px solid #eee;
109		- padding: 1rem 0 0.2rem 0;
110		- }
111		- .modal h4 {
112		- font-size: 1.6rem;
113		- font-weight: 100;
114		- padding: 0.2rem 0 1rem 0;
115		- }
116		- .modal h2 button {
117		- border: 0;
118		- background: none;
119		- height: 30px;
120		- cursor: pointer;
121		- width: fit-content;
122		- }
123		- .modal-bg button {
124		- border: 0;
125		- background: none;
126		- height: 30px;
127		- cursor: pointer;
128		- }
129		- .modal button img {
130		- width: 25px;
131		- }
132		-
133		-
134		- .htmlTable {
135		- text-align: center;
136		- border-collapse: collapse;
137		- position: absolute;
138		- z-index: 500;
139		- left: 50%;
140		- top: 50%;
141		- border: 1px solid #eee;
142		- font-size: 13px;
143		- }
144		- .htmlTable thead td {
145		- font-size: 16px;
146		- }
147		- .htmlTable th,
148		- .htmlTable td {
149		- border: 1px solid #eee;
150		- padding: 0.5rem 1rem;
151		- }
152		- .htmlTable tbody td {
153		- background: #ffffff;
154		- } (No newline at end of file)
	231	+.htmlTable {
	232	+ text-align: center;
	233	+ border-collapse: collapse;
	234	+ position: absolute;
	235	+ z-index: 500;
	236	+ left: 50%;
	237	+ top: 50%;
	238	+ border: 1px solid #eee;
	239	+ font-size: 13px;
	240	+}
	241	+.htmlTable thead td {
	242	+ font-size: 16px;
	243	+}
	244	+.htmlTable th,
	245	+.htmlTable td {
	246	+ border: 1px solid #eee;
	247	+ padding: 0.5rem 1rem;
	248	+}
	249	+.htmlTable tbody td {
	250	+ background: #ffffff;
	251	+}

...	...	@@ -1,7 +1,5 @@
1	1	<template>
2		- <div>
3	2	<div id="map" class="map"></div>
4		- </div>
5	3	</template>
6	4
7	5	<script>

...	...	@@ -12,11 +12,11 @@
12	12	</ul>
13	13	</div> -->
14	14	<div class="search">
15		- <h2>조건검색</h2>
16		- <div class="box grid gap05 bg-gray" >
	15	+ <h2>조건검색</h2>
	16	+ <div class="box grid gap05 bg-gray">
17	17	<div class="titleBar">
18	18	<h3>지역설정</h3>
19		- <hr>
	19	+ <hr />
20	20	</div>
21	21	<DongSelectList
22	22	@setDongCd="setDongCd"
...	...	@@ -26,11 +26,11 @@
26	26	@dongSelectF="dongSelectF"
27	27	@nodeSelectF="nodeSelectF"
28	28	></DongSelectList>
29		- </div>
	29	+ </div>
30	30	<div class="box">
31	31	<div class="titleBar">
32	32	<h3>조건 설정</h3>
33		- <hr>
	33	+ <hr />
34	34	</div>
35	35
36	36	<div class="flex-between m-b">
...	...	@@ -55,7 +55,7 @@
55	55	v-model="condition['eqpmnTrobl']"
56	56	/><label for="">장애발생</label>
57	57	</div>
58		- <div class="flex-between m-b">
	58	+ <div class="grid3_7 m-b">
59	59	<label for="date-input">일자</label>
60	60	<input
61	61	class="date-input"
...	...	@@ -66,19 +66,21 @@
66	66	/>
67	67	<!-- <input id="date-input" type="date" v-model="condition['end_date']" :picker-options="endDateOptions" /> -->
68	68	</div>
69		- <div class="flex-between m-b3 gap">
	69	+ <div class="grid3_7 m-b3">
70	70	<label for="time-input">시간대</label>
71		- <input
72		- class="time-input"
73		- id="time-input"
74		- type="time"
75		- v-model="condition['start_time']"
76		- />~<input
77		- class="time-input"
78		- id="time-input"
79		- type="time"
80		- v-model="condition['end_time']"
81		- />
	71	+ <div class="flex-between gap">
	72	+ <input
	73	+ class="time-input"
	74	+ id="time-input"
	75	+ type="time"
	76	+ v-model="condition['start_time']"
	77	+ />~<input
	78	+ class="time-input"
	79	+ id="time-input"
	80	+ type="time"
	81	+ v-model="condition['end_time']"
	82	+ />
	83	+ </div>
82	84	</div>
83	85	<button
84	86	class="btn-l gr-btn search-btn"
...	...	@@ -142,7 +144,10 @@
142	144	alt
143	145	/>금일 보행자
144	146	</p>
145		- <h3><em class="green2 m-r">{{comma(totalSum.walkerCount)}}</em>명</h3>
	147	+ <h3>
	148	+ <em class="green2 m-r">{{ comma(totalSum.walkerCount) }}</em
	149	+ >명
	150	+ </h3>
146	151	</li>
147	152	<li class="br"></li>
148	153	<li>
...	...	@@ -153,7 +158,10 @@
153	158	alt
154	159	/>금일 무단횡단 발생
155	160	</p>
156		- <h3><em class="green2 m-r">{{comma(totalSum.jayWalkCount)}}</em>회</h3>
	161	+ <h3>
	162	+ <em class="green2 m-r">{{ comma(totalSum.jayWalkCount) }}</em
	163	+ >회
	164	+ </h3>
157	165	</li>
158	166	<li class="br"></li>
159	167	<li>
...	...	@@ -164,7 +172,10 @@
164	172	alt
165	173	/>금일 신호연장 발생
166	174	</p>
167		- <h3><em class="green2 m-r">{{comma(totalSum.extentionCount)}}</em>회</h3>
	175	+ <h3>
	176	+ <em class="green2 m-r">{{ comma(totalSum.extentionCount) }}</em
	177	+ >회
	178	+ </h3>
168	179	</li>
169	180	<li class="br"></li>
170	181	<li>
...	...	@@ -175,7 +186,10 @@
175	186	alt
176	187	/>금일 신호연장 시간
177	188	</p>
178		- <h3><em class="green2 m-r">{{comma(totalSum.extentionTime)}}</em>초</h3>
	189	+ <h3>
	190	+ <em class="green2 m-r">{{ comma(totalSum.extentionTime) }}</em
	191	+ >초
	192	+ </h3>
179	193	</li>
180	194	<li class="br"></li>
181	195	<li>
...	...	@@ -186,7 +200,10 @@
186	200	alt
187	201	/>금일 차량 신호위반 발생
188	202	</p>
189		- <h3><em class="green2 m-r">{{comma(totalSum.violationCount)}}</em>회</h3>
	203	+ <h3>
	204	+ <em class="green2 m-r">{{ comma(totalSum.violationCount) }}</em
	205	+ >회
	206	+ </h3>
190	207	</li>
191	208	<li class="br"></li>
192	209	<li>
...	...	@@ -197,82 +214,95 @@
197	214	alt
198	215	/>금일 장애 발생
199	216	</p>
200		- <h3><em class="green2 m-r">{{comma(totalSum.errorCount)}}</em>회</h3>
	217	+ <h3>
	218	+ <em class="green2 m-r">{{ comma(totalSum.errorCount) }}</em
	219	+ >회
	220	+ </h3>
201	221	</li>
202	222	</ul>
203	223	</div>
204		- <div style="height:100%">
205	224	<OpenLayers ref="open_layers" />
206		- <button @click="showPopup" class="popup-btn s-btn gr-btn">발생정보</button>
207		- <!-- Popup container -->
208		- <div
209		- v-if="isPopupVisible"
210		- class="popup-container"
211		- @click.self="hidePopup"
212		- >
213		- <!-- Popup content -->
214		- <div class="popup-content">
215		- <!-- Add your popup content here -->
216		- <h2>무단횡단 발생</h2>
217		- <ul>
218		- <li>
219		- <p class="m-b">발생일시: 2023-05-04 14:27</p>
220		- <p class="">발생장소: 영재어린이집(서측) 동쪽횡단보도</p>
221		- </li>
222		- </ul>
223		- <button @click="hidePopup" class="s-btn gr-btn">닫기</button>
	225	+ <div >
	226	+ <button @click="showPopup" class="popup-btn s-btn gr-btn">
	227	+ 발생정보
	228	+ </button>
	229	+ <!-- Popup container -->
	230	+ <div
	231	+ v-if="isPopupVisible"
	232	+ class="popup-container"
	233	+ @click.self="hidePopup"
	234	+ >
	235	+ <!-- Popup content -->
	236	+ <div class="popup-content">
	237	+ <!-- Add your popup content here -->
	238	+ <h2>무단횡단 발생</h2>
	239	+ <ul>
	240	+ <li>
	241	+ <p class="m-b">발생일시: 2023-05-04 14:27</p>
	242	+ <p class="">발생장소: 영재어린이집(서측) 동쪽횡단보도</p>
	243	+ </li>
	244	+ </ul>
	245	+ <button @click="hidePopup" class="s-btn gr-btn">닫기</button>
	246	+ </div>
224	247	</div>
225		- </div>
226	248	</div>
227	249	</div>
228	250	<div class="chart grid gap">
229		- <div class=" bg-white2 b-r b-shadow">
230		- <h2 style="font-size: 1.3rem;">금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
	251	+ <div class="bg-white2 b-r b-shadow">
	252	+ <h2 style="font-size: 1.3rem">
	253	+ 금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)
	254	+ </h2>
231	255	<div class="box">
232		- <div style="width: 100%; height: 100%" id="chartdivWrap1">
	256	+ <div style="width: 100%; height: 100%" id="chartdivWrap1">
233	257	<div
234	258	ref="chartdiv1"
235	259	id="chartdiv1"
236		- style="width: 100%; height: 90%; "
	260	+ style="width: 100%; height: 90%"
237	261	></div>
238		- </div>
239		- </div>
	262	+ </div>
	263	+ </div>
240	264	</div>
241	265	<div class="bg-white2 b-r b-shadow">
242		- <h2 style="font-size: 1.3rem;">금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)</h2>
	266	+ <h2 style="font-size: 1.3rem">
	267	+ 금일 횡단보도 별 무단횡단 발생 건수 (상위10개소)
	268	+ </h2>
243	269	<div class="box">
244		- <div style="width: 100%; height: 100%" id="chartdivWrap2">
	270	+ <div style="width: 100%; height: 100%" id="chartdivWrap2">
245	271	<div
246	272	ref="chartdiv2"
247	273	id="chartdiv2"
248		- style="width: 100%; height: 90%; "
	274	+ style="width: 100%; height: 90%"
249	275	></div>
250		- </div>
251		- </div>
	276	+ </div>
	277	+ </div>
252	278	</div>
253		- <div class=" bg-white2 b-r b-shadow">
254		- <h2 style="font-size: 1.3rem;">금일 횡단보도 별 무단횡단 발생 건수 (상위5개소)</h2>
	279	+ <div class="bg-white2 b-r b-shadow">
	280	+ <h2 style="font-size: 1.3rem">
	281	+ 금일 횡단보도 별 무단횡단 발생 건수 (상위5개소)
	282	+ </h2>
255	283	<div class="box">
256		- <div style="width: 100%; height: 100%" id="chartdivWrap3">
	284	+ <div style="width: 100%; height: 100%" id="chartdivWrap3">
257	285	<div
258	286	ref="chartdiv3"
259	287	id="chartdiv3"
260		- style="width: 100%; height: 90%; "
	288	+ style="width: 100%; height: 90%"
261	289	></div>
262		- </div>
263		- </div>
	290	+ </div>
	291	+ </div>
264	292	</div>
265		- <div class=" bg-white2 b-r b-shadow">
266		- <h2 style="font-size: 1.3rem;">금일 횡단보도 별 무단횡단 발생 건수 (상위5개소)</h2>
	293	+ <div class="bg-white2 b-r b-shadow">
	294	+ <h2 style="font-size: 1.3rem">
	295	+ 금일 횡단보도 별 무단횡단 발생 건수 (상위5개소)
	296	+ </h2>
267	297	<div class="box">
268		- <div style="width: 100%; height: 100%" id="chartdivWrap4">
	298	+ <div style="width: 100%; height: 100%" id="chartdivWrap4">
269	299	<div
270	300	ref="chartdiv4"
271	301	id="chartdiv4"
272		- style="width: 100%; height: 90%; "
	302	+ style="width: 100%; height: 90%"
273	303	></div>
274		- </div>
275		- </div>
	304	+ </div>
	305	+ </div>
276	306	</div>
277	307	</div>
278	308	</div>
...	...	@@ -340,109 +370,142 @@
340	370	{ id: 3, name: "우회전 차량", isActive: false },
341	371	{ id: 4, name: "장애발생", isActive: false },
342	372	],
343		- chart1 : {},
344		- chart2 : {},
345		- chart3 : {},
346		- chart4 : {},
347		- data1 : [{
348		- country: "달서초등 동",
349		- value: 32
350		- }, {
351		- country: "비산초등 남",
352		- value: 25
353		- }, {
354		- country: "달서초등 서",
355		- value: 21
356		- }, {
357		- country: "에덴둥지맨션 동",
358		- value: 21
359		- }, {
360		- country: "에덴둥지맨션 남",
361		- value: 19
362		- }, {
363		- country: "대구의료원편 남",
364		- value: 16
365		- }, {
366		- country: "대구의료원편 서",
367		- value: 16
368		- }, {
369		- country: "대구의료원서편 북",
370		- value: 15
371		- }, {
372		- country: "대구의료원 입구(A) 남",
373		- value: 10
374		- }, {
375		- country: "달서초등(A) 북",
376		- value: 8
377		- }],
378		- data2 : [{
379		- country: "달서초등 동",
380		- value: 15
381		- }, {
382		- country: "비산초등 남",
383		- value: 12
384		- }, {
385		- country: "달서초등 서",
386		- value: 3
387		- }, {
388		- country: "에덴둥지맨션 동",
389		- value: 1
390		- }, {
391		- country: "에덴둥지맨션 남",
392		- value: 1
393		- }, {
394		- country: "대구의료원편 서",
395		- value: 1
396		- }, {
397		- country: "대구의료원서편 북",
398		- value: 0
399		- }, {
400		- country: "대구의료원 입구(A) 남",
401		- value: 0
402		- }, {
403		- country: "달서초등(A) 북",
404		- value: 0
405		- }],
406		- data3 : [{
407		- country: "달서초등 동",
408		- value: 15
409		- }, {
410		- country: "비산초등 남",
411		- value: 12
412		- }, {
413		- country: "달서초등 서",
414		- value: 0
415		- }, {
416		- country: "에덴둥지맨션 동",
417		- value: 0
418		- }, {
419		- country: "에덴둥지맨션 남",
420		- value: 0
421		- }],
422		- data4 : [{
423		- country: "달서초등 동",
424		- value: 1
425		- }, {
426		- country: "비산초등 남",
427		- value: 1
428		- }, {
429		- country: "달서초등 서",
430		- value: 0
431		- }, {
432		- country: "에덴둥지맨션 동",
433		- value: 0
434		- }, {
435		- country: "에덴둥지맨션 남",
436		- value: 0
437		- }],
438		- totalSum : {
439		- walkerCount : 1049,
440		- jayWalkCount : 188,
441		- extentionCount : 33,
442		- extentionTime : 280,
443		- violationCount : 27,
444		- errorCount : 2
445		- }
	373	+ chart1: {},
	374	+ chart2: {},
	375	+ chart3: {},
	376	+ chart4: {},
	377	+ data1: [
	378	+ {
	379	+ country: "달서초등 동",
	380	+ value: 32,
	381	+ },
	382	+ {
	383	+ country: "비산초등 남",
	384	+ value: 25,
	385	+ },
	386	+ {
	387	+ country: "달서초등 서",
	388	+ value: 21,
	389	+ },
	390	+ {
	391	+ country: "에덴둥지맨션 동",
	392	+ value: 21,
	393	+ },
	394	+ {
	395	+ country: "에덴둥지맨션 남",
	396	+ value: 19,
	397	+ },
	398	+ {
	399	+ country: "대구의료원편 남",
	400	+ value: 16,
	401	+ },
	402	+ {
	403	+ country: "대구의료원편 서",
	404	+ value: 16,
	405	+ },
	406	+ {
	407	+ country: "대구의료원서편 북",
	408	+ value: 15,
	409	+ },
	410	+ {
	411	+ country: "대구의료원 입구(A) 남",
	412	+ value: 10,
	413	+ },
	414	+ {
	415	+ country: "달서초등(A) 북",
	416	+ value: 8,
	417	+ },
	418	+ ],
	419	+ data2: [
	420	+ {
	421	+ country: "달서초등 동",
	422	+ value: 15,
	423	+ },
	424	+ {
	425	+ country: "비산초등 남",
	426	+ value: 12,
	427	+ },
	428	+ {
	429	+ country: "달서초등 서",
	430	+ value: 3,
	431	+ },
	432	+ {
	433	+ country: "에덴둥지맨션 동",
	434	+ value: 1,
	435	+ },
	436	+ {
	437	+ country: "에덴둥지맨션 남",
	438	+ value: 1,
	439	+ },
	440	+ {
	441	+ country: "대구의료원편 서",
	442	+ value: 1,
	443	+ },
	444	+ {
	445	+ country: "대구의료원서편 북",
	446	+ value: 0,
	447	+ },
	448	+ {
	449	+ country: "대구의료원 입구(A) 남",
	450	+ value: 0,
	451	+ },
	452	+ {
	453	+ country: "달서초등(A) 북",
	454	+ value: 0,
	455	+ },
	456	+ ],
	457	+ data3: [
	458	+ {
	459	+ country: "달서초등 동",
	460	+ value: 15,
	461	+ },
	462	+ {
	463	+ country: "비산초등 남",
	464	+ value: 12,
	465	+ },
	466	+ {
	467	+ country: "달서초등 서",
	468	+ value: 0,
	469	+ },
	470	+ {
	471	+ country: "에덴둥지맨션 동",
	472	+ value: 0,
	473	+ },
	474	+ {
	475	+ country: "에덴둥지맨션 남",
	476	+ value: 0,
	477	+ },
	478	+ ],
	479	+ data4: [
	480	+ {
	481	+ country: "달서초등 동",
	482	+ value: 1,
	483	+ },
	484	+ {
	485	+ country: "비산초등 남",
	486	+ value: 1,
	487	+ },
	488	+ {
	489	+ country: "달서초등 서",
	490	+ value: 0,
	491	+ },
	492	+ {
	493	+ country: "에덴둥지맨션 동",
	494	+ value: 0,
	495	+ },
	496	+ {
	497	+ country: "에덴둥지맨션 남",
	498	+ value: 0,
	499	+ },
	500	+ ],
	501	+ totalSum: {
	502	+ walkerCount: 1049,
	503	+ jayWalkCount: 188,
	504	+ extentionCount: 33,
	505	+ extentionTime: 280,
	506	+ violationCount: 27,
	507	+ errorCount: 2,
	508	+ },
446	509	};
447	510	},
448	511	components: {
...	...	@@ -627,20 +690,20 @@
627	690	},
628	691	watch: {},
629	692	computed: {},
630		- computed:{
631		- comma(){
632		- return (v)=>{
633		- return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
634		- }
635		- }
	693	+ computed: {
	694	+ comma() {
	695	+ return (v) => {
	696	+ return v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	697	+ };
	698	+ },
636	699	},
637	700	mounted() {
638	701	console.log("Main2 mounted ");
639		-
640		- COMMON_CHART.createChartById('chartdiv1', this.chart1 , this.data1);
641		- COMMON_CHART.createChartById('chartdiv2', this.chart2 , this.data2);
642		- COMMON_CHART.createChartById('chartdiv3', this.chart3 , this.data3);
643		- COMMON_CHART.createChartById('chartdiv4', this.chart4 , this.data4);
	702	+
	703	+ COMMON_CHART.createChartById("chartdiv1", this.chart1, this.data1);
	704	+ COMMON_CHART.createChartById("chartdiv2", this.chart2, this.data2);
	705	+ COMMON_CHART.createChartById("chartdiv3", this.chart3, this.data3);
	706	+ COMMON_CHART.createChartById("chartdiv4", this.chart4, this.data4);
644	707
645	708	this.$refs.open_layers.setBaseMap(vworldBaseLayer);
646	709
...	...	@@ -736,16 +799,20 @@
736	799
737	800	.popup-content {
738	801	background-color: #000000a3;
739		- width: 17%;
740		- text-align: center;
741		- color: #ffffff;
742		- /* height: 20%; */
743		- padding: 20px;
744		- border-radius: 5px;
745		- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	802	+ width: 17%;
	803	+ text-align: center;
	804	+ color: #ffffff;
	805	+ /* height: 20%; */
	806	+ padding: 20px;
	807	+ border-radius: 5px;
	808	+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
746	809	}
747		-.popup-content ul{padding: 2rem 0;}
748		-.popup-content ul li{font-size: 16px;}
	810	+.popup-content ul {
	811	+ padding: 2rem 0;
	812	+}
	813	+.popup-content ul li {
	814	+ font-size: 16px;
	815	+}
749	816	.popup-content h2 {
750	817	margin-top: 0;
751	818	font-size: 2.5rem;
...	...	@@ -805,14 +872,15 @@
805	872	background-color: #fff;
806	873	}
807	874
808		-.left h2, .chart h2 {
	875	+.left h2,
	876	+.chart h2 {
809	877	background: #50ba8a;
810	878	text-align: center;
811	879	color: #fff;
812	880	padding: 1.6rem 0;
813	881	}
814	882
815		-.left h2{
	883	+.left h2 {
816	884	padding: 1rem 0;
817	885	font-size: 1.3rem;
818	886	}

Delete comment