Commit @3321d52a1943072bd3aedcd365bb3ddae12dadd6

허정 2023-07-25

230725횡단보도 검색창 디자인변경 김하영

@3321d52a1943072bd3aedcd365bb3ddae12dadd6

2c0a2c6

3321d52

client/resources/css/common.css

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

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


   font-weight: bold;
   font-style: normal;
 }
-.grid{display: grid;}
-.grid2{display: grid; grid-template-columns: 1fr 1fr;}
+.grid {
+  display: grid;
+}
+.grid2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
 .flex {
   display: flex;
   align-items: center;
 }
 .flex-between {
   display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
   justify-content: space-between;
   align-items: center;
 }

 .bg-green {
   background: #6dba67;
 }
-.green{color: #a7d292;}
-.black{color: #333;}
-.lined{text-decoration: underline;}
+.green {
+  color: #a7d292;
+}
+.black {
+  color: #333;
+}
+.lined {
+  text-decoration: underline;
+}
 .bg-yellow {
   background: #e6c772;
 }

   margin-left: 32rem !important;
 }
 
-.m-b{margin-bottom: 1rem;}
-.m-b3{margin-bottom: 3rem;}
-.m-r{margin-right: 1rem;}
-.m-r3{margin-right: 3rem;}
-.gap{gap: 1rem;}
-.gap5{gap: 5rem;}
-button{padding: 0.3rem 2rem;}
-.btn-l{width: -webkit-fill-available;}
-.green-btn{background: #13833b; border: 0; border-radius: 5px; color: #fff;}
-.gray-btn{background: #f9f9f9; border: 1px solid #c8c5c5; border-radius: 5px;}
-
+.m-b3 {
+  margin-bottom: 3rem;
+}
+.m-r {
+  /* margin-right: 1rem; */
+  /* min-height: 150px; */
+  flex-shrink: 1;
+  /* flex-grow: 1; */
+}
+.m-r3 {
+  margin-right: 3rem;
+}
+.gap {
+  gap: 1rem;
+}
+.gap5 {
+  gap: 5rem;
+}
+button {
+  padding: 0.3rem 2rem;
+}
+.btn-l {
+  width: -webkit-fill-available;
+}
+.green-btn {
+  background: #13833b;
+  background: #13833b;
+  border: 0;
+  border-radius: 5px;
+  color: #fff;
+  height: 3em;
+  line-height: 3em;
+}
+.gray-btn {
+  background: #f9f9f9;
+  border: 1px solid #c8c5c5;
+  border-radius: 5px;
+}
 
 /*스크롤바디자인*/
 ::-webkit-scrollbar-thumb {

   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
-.modal, .modal2 {
+.modal,
+.modal2 {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);    
+  transform: translate(-50%, -50%);
   z-index: 2;
   background-color: #fff;
-  
+
   text-align: center;
 }
 

   color: #13833b;
 }
 @media all and (max-width: 479px) {
-.m-mb{margin-bottom: 1rem;}
-h2.page-title{font-size: 23px;}
+  .m-mb {
+    margin-bottom: 1rem;
+  }
+  h2.page-title {
+    font-size: 23px;
+  }
 }
 /* 달력 */
 /* input[type="date"]{

   max-height: 100%;
   min-height: 100%;
 }
-.main-warp > div{height: inherit;}
-.left, .right, .right > div, .right > div >div, .right > div >div>#map{height: inherit;}
+.main-warp > div {
+  height: inherit;
+}
+.left,
+.right,
+.right > div,
+.right > div > div,
+.right > div > div > #map {
+  height: inherit;
+}

2c0a2c6

3321d52

client/views/layout/Header.vue

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

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


               :key="subIndex"
               style="color: #333"
             >
-              <router-link :to="subItem.route"> {{ subItem.title }}</router-link>
+              <router-link :to="subItem.route">
+                {{ subItem.title }}</router-link
+              >
             </li>
-           
           </ul>
         </li>
-        <li style="color: #3fb52d"><router-link to="/Mypage.page">
-          마이페이지
-        </router-link></li>
-            <li style="color: #3fb52d"><router-link to="/Login.page">
-          로그인
-        </router-link></li>
+        <li style="color: #3fb52d">
+          <router-link to="/Mypage.page"> 마이페이지 </router-link>
+        </li>
+        <li style="color: #3fb52d">
+          <router-link to="/Login.page"> 로그인 </router-link>
+        </li>
       </ul>
     </div>
     <div class="logo flex">
       <input type="checkbox" id="menuicon" @click="toggleSubmenu()" />
       <label class="menu-icon" for="menuicon">
-        <img  :src="imageSrc" alt="Image"  @click="toggle()"/>
+        <img :src="imageSrc" alt="Image" @click="toggle()" />
         <!-- <span></span>
       <span></span>
       <span></span> -->

         <router-link to="/Login.page">
           <span v-show="store.state.loginUser == null">로그인</span>
         </router-link>
-        <button class="logout-btn" @click="logout"  v-show="store.state.loginUser != null">로그아웃</button>
+        <button
+          class="logout-btn"
+          @click="logout"
+          v-show="store.state.loginUser != null"
+        >
+          로그아웃
+        </button>
       </div>
     </div>
   </header>

 export default {
   data() {
     return {
-      imageSrc: 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5',
+      imageSrc:
+        "https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5",
       menuOpen: false,
       showDropdown: false,
       showSubmenu: false,

           open: false,
           subMenu: [
             { title: "스마트 횡단보도란?", route: "/Introduction.page" },
-          ]
+          ],
         },
         {
           title: "현황관제",
           open: false,
           subMenu: [
-          { title: "실시간 현황관제", route: "/RealtimeStatus.page" },
-          { title: "상황발생 정보조회", route: "/SituationSearch.page" },
-          { title: "장애 발생 정보조회", route: "/ErrorSearch.page" },
-          { title: "횡단보도 목록조회", route: "/CrosswalkListSearch.page" },
+            { title: "실시간 현황관제", route: "/RealtimeStatus.page" },
+            { title: "상황발생 정보조회", route: "/SituationSearch.page" },
+            { title: "장애 발생 정보조회", route: "/ErrorSearch.page" },
+            { title: "횡단보도 목록조회", route: "/CrosswalkListSearch.page" },
           ],
         },
         {
           title: "통계분석",
           open: false,
-          subMenu: [{ title: "통계분석", route: "/Analysis.page" },],
+          subMenu: [{ title: "통계분석", route: "/Analysis.page" }],
         },
         {
           title: "횡단보도 관리",

           subMenu: [
             { title: "횡단보도 등록", route: "/CrosswalkInsert.page" },
             { title: "횡단보도 조회", route: "/CrosswalkSearch.page" },
-            ],
+          ],
         },
         {
           title: "시스템 관리",

         // {
         //   title: "마이페이지",
         //   open: false,
-        //   route: "/Mypage.page" 
+        //   route: "/Mypage.page"
         // },
         // {
         //   title: "로그인",

         //   subMenu: [{ title: "로그인", route: "/Login.page" },],
         // },
       ],
-      store : useStore(),
+      store: useStore(),
     };
   },
   methods: {
     //로그아웃
     logout: function () {
-            if (confirm('로그아웃 하시겠습니까?') == false) {
-                return;
-            }
-            let vm = this;
-            axios({
-                url: "/user/logout.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-            }).then(function (response) {
-                // console.log("logout - response : ", response);
-                vm.$router.push({ path: '/Login.page', query: {} });
-            }).catch(function (error) {
-                console.log("logout - error : ", error);
-            });
+      if (confirm("로그아웃 하시겠습니까?") == false) {
+        return;
+      }
+      let vm = this;
+      axios({
+        url: "/user/logout.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
+      })
+        .then(function (response) {
+          // console.log("logout - response : ", response);
+          vm.$router.push({ path: "/Login.page", query: {} });
+        })
+        .catch(function (error) {
+          console.log("logout - error : ", error);
+        });
+    },
 
     toggleSubMenu(index) {
       this.menuItems[index].open = !this.menuItems[index].open;
       this.showSubmenu = true;
       console.log("toggleSubMenu 호출됨");
     },
-    toggle(){
-
-      if (this.imageSrc === 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5') {
-        this.imageSrc = 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/close2.png?alt=media&token=801544fa-80dd-4dc5-98c2-099a2fdb7791';
+    toggle() {
+      if (
+        this.imageSrc ===
+        "https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5"
+      ) {
+        this.imageSrc =
+          "https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/close2.png?alt=media&token=801544fa-80dd-4dc5-98c2-099a2fdb7791";
       } else {
-        this.imageSrc = 'https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5';
+        this.imageSrc =
+          "https://firebasestorage.googleapis.com/v0/b/senior-care-system-dcf90.appspot.com/o/menu2.png?alt=media&token=6f3b2966-0820-419d-ba82-97290e71a7b5";
       }
     },
     toggleSubmenu: function () {

 header {
   position: relative;
 }
-nav{position: relative;}
+nav {
+  position: relative;
+}
 nav a {
   width: 16rem;
   text-align: center;

   padding: 2.7rem 0;
   /* border: 1px solid blue; */
 }
-.nav{position: absolute;
-    left: 0;
-    top: 65px;
-    z-index: 500;
-    width: -webkit-fill-available;
-    padding: -1rem;
-    height: 14rem;}
+.nav {
+  position: absolute;
+  left: 0;
+  top: 65px;
+  z-index: 500;
+  width: -webkit-fill-available;
+  box-sizing: border-box;
+  /* padding: 50em 50em 50em 50em !important; */
+  /* padding-left: 50em !important; */
+  height: 14rem;
+  /* background-color: white; */
+}
 .menu {
   position: absolute;
-    left: 0;
-    top: 0rem;
-    z-index: 500;
-    width: fit-content;
-    /* border: 1px solid red; */
-    /* padding: 1rem 25.5rem 1rem 1rem; */
-    text-align: center;
+  left: 0;
+  top: -1.6rem;
+  z-index: 500;
+  width: fit-content;
+  /* border: 1px solid red; */
+  /* padding: 1rem 25.5rem 1rem 1rem; */
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.66);
+  padding: 2em 50em 2em 100em;
+  transform: translateX(-100em);
 }
-.menu li:hover{background: #13833b; }
-.menu li:hover a{color: #fff;}
+.menu li:hover {
+  background: #13833b;
+}
+.menu li:hover a {
+  color: #fff;
+}
 
 ul {
   width: 16rem;

 
   .show-menu {
     display: block;
-    padding: 1rem ;
-
+    padding: 1rem;
   }
 
   .contenedor-menu2 li {

2c0a2c6

3321d52

client/views/pages/RealtimeStatus/CrosswalkListSearch.vue

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

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


   <div class="wrap">
     <div class="board-wrap">
       <div class="search-wrap">
-        <div class="flex m-b gap mb-block" style="margin-bottom: 2rem">
-          <div class="flex gap m-r date" style="margin-right: 5rem">
-            <label>조회기간: </label>
-            <input type="date" value-format="yyyyMMdd" v-model="crosswalkListSearch.startDate"/>
-            <span> ~ </span>
-            <input type="date" value-format="yyyyMMdd" v-model="crosswalkListSearch.endDate"/>
+        <div class="flex m-b mb-block">
+          <div class="gap gap-sub">
+            <label class="taa ta5">지역: </label>
+            <dongSelectList
+              @setDongCd="setDongCd"
+              :nodeHiddenCk="true"
+              :crslk_azHiddenCk="true"
+            ></dongSelectList>
           </div>
-          <label>지역: </label>
-          <dongSelectList @setDongCd="setDongCd" :nodeHiddenCk="true" :crslk_azHiddenCk="true"></dongSelectList>
         </div>
-        <div class="flex-between gap line">
-          <div class="gap flex mb-block">
-            <div class="flex m-b gap">
-              <label>우회차선: </label>
+        <div class="flex gap m-r date">
+          <label class="taa">조회기간: </label>
+          <input
+            class="in1"
+            type="date"
+            value-format="yyyyMMdd"
+            v-model="crosswalkListSearch.startDate"
+          />
+          <span> ~ </span>
+          <input
+            class="in1"
+            type="date"
+            value-format="yyyyMMdd"
+            v-model="crosswalkListSearch.endDate"
+          />
+          <div class="flex">
+            <div class="gap g3">
+              <label class="taa taa2">상태: </label>
+              <select name="" id="">
+                <option value="">정상</option>
+              </select>
+              <button
+                type="button"
+                class="btn-2 green-btn"
+                @click="crosswalkSelectList()"
+              >
+                조회
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="flex-between line">
+          <div class="flex mb-block">
+            <div class="flex m-b gap g2">
+              <label class="taa">우회차선: </label>
               <select v-model="crosswalkListSearch.searchRightTurnType">
                 <option value="null" disabled>전체</option>
                 <option value="직각">직각</option>
                 <option value="곡선">곡선</option>
               </select>
-              <label>왕복차선: </label>
+            </div>
+
+            <div class="flex m-b gap g2">
+              <label class="taa">왕복차선: </label>
               <select v-model="crosswalkListSearch.searchRoundTripLane">
                 <option value="null" disabled>전체</option>
               </select>
             </div>
-            <div class="flex">
-              <div class="m-r flex gap">
-                <label class="m-r">장비: </label>
-                <label>무단횡단</label>
-                <input class="m-r" type="checkbox" v-model="crosswalkListSearch.jaywalking" true-value="Y" false-value="N"/>
-                <label>신호연장</label>
-                <input class="m-r" type="checkbox" v-model="crosswalkListSearch.signal" true-value="Y" false-value="N"/>
-                <label>우회차량</label>
-                <input class="m-r" type="checkbox" v-model="crosswalkListSearch.rightTurn" true-value="Y" false-value="N"/>
-              </div>
-            </div>
-            <div class="flex gap">
-              <label>상태: </label>
-              <select name="" id="">
-                <option value="">정상</option>
-              </select>
-              <button type="button" class="btn-2 green-btn" @click="crosswalkSelectList()">조회</button>
+          </div>
+
+          <div class="flex">
+            <div class="m-r flex gap">
+              <label class="m-r taa">장비: </label>
+              <label>무단횡단</label>
+              <input
+                class="m-r"
+                type="checkbox"
+                v-model="crosswalkListSearch.jaywalking"
+                true-value="Y"
+                false-value="N"
+              />
+              <label>신호연장</label>
+              <input
+                class="m-r"
+                type="checkbox"
+                v-model="crosswalkListSearch.signal"
+                true-value="Y"
+                false-value="N"
+              />
+              <label>우회차량</label>
+              <input
+                class="m-r"
+                type="checkbox"
+                v-model="crosswalkListSearch.rightTurn"
+                true-value="Y"
+                false-value="N"
+              />
             </div>
           </div>
         </div>
       </div>
-      <div>
-        <table class="pc">
-          <!-- <colgroup>
+    </div>
+    <div>
+      <table class="pc">
+        <!-- <colgroup>
             <col style="width: 10%;">
             <col style="width: 20%;">
             <col style="width: 20%;">
             <col style="width: 30%;">
             <col style="width: 20%;">
           </colgroup> -->
-          <thead>
-            <tr>
-              <th>No</th>
-              <th>설치일자</th>
-              <th>시/도</th>
-              <th>시/군/구</th>
-              <th>행정동</th>
-              <th>노드명</th>
-              <th>횡단보도명</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr 
-              v-for="(item, idx) in crosswalkList"
-              :key="idx"
-              @click="crosswalkSelectOne(item)"    
+        <thead>
+          <tr>
+            <th>No</th>
+            <th>설치일자</th>
+            <th>시/도</th>
+            <th>시/군/구</th>
+            <th>행정동</th>
+            <th>노드명</th>
+            <th>횡단보도명</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, idx) in crosswalkList"
+            :key="idx"
+            @click="crosswalkSelectOne(item)"
+          >
+            <td data-title="NO">{{ crosswalkIdx - idx }}</td>
+            <td data-title="설치일자">{{ item.instl_ymd }}</td>
+            <td data-title="시/도">{{ item.sido_nm }}</td>
+            <td data-title="시/군/구">{{ item.sigungu_nm }}</td>
+            <td data-title="행정동">{{ item.dong_nm }}</td>
+            <td data-titel="노드명">{{ item.node_name }}</td>
+            <td data-titel="횡단보도명">{{ item.crslk_nm }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <table class="mobile">
+        <colgroup>
+          <col style="width: 10%" />
+          <col style="width: 20%" />
+        </colgroup>
+        <tbody>
+          <tr>
+            <th>No</th>
+            <td></td>
+          </tr>
+          <tr>
+            <th>설치일자</th>
+            <td></td>
+          </tr>
+          <tr>
+            <th>시/도</th>
+            <td></td>
+          </tr>
+          <tr>
+            <th>시/군/구</th>
+            <td></td>
+          </tr>
+          <tr>
+            <th>행정동</th>
+            <td></td>
+          </tr>
+          <tr>
+            <th>교차로</th>
+            <td></td>
+          </tr>
+          <tr>
+            <th>횡단보도명</th>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="modal-wrap" v-if="modal_crosswalkOne == true">
+        <div class="modal-bg"></div>
+        <div class="modal">
+          <h2 class="flex-between">
+            횡단보도 상세정보
+            <button
+              type="button"
+              class="gray-btn"
+              @click="modal_crosswalkOne = false"
             >
-              <td data-title="NO">{{ crosswalkIdx - idx }}</td>
-              <td data-title="설치일자">{{ item.instl_ymd }}</td>
-              <td data-title="시/도">{{ item.sido_nm }}</td>
-              <td data-title="시/군/구">{{ item.sigungu_nm }}</td>
-              <td data-title="행정동">{{ item.dong_nm }}</td>
-              <td data-titel="노드명">{{ item.node_name }}</td>
-              <td data-titel="횡단보도명">{{ item.crslk_nm }}</td>
-            </tr>
-          </tbody>
-        </table>
-        <table class="mobile">
-                <colgroup>
-                  <col style="width: 10%" />
-                  <col style="width: 20%" />
-                </colgroup>
-                <tbody>
-                  <tr>
-                    <th>No</th>
-                    <td></td>
-                  </tr>
-                  <tr>
-                    <th>설치일자</th>
-                    <td></td>
-                  </tr>
-                  <tr>
-                    <th>시/도</th>
-                    <td></td>
-                  </tr>
-                  <tr>
-                    <th>시/군/구</th>
-                    <td></td>
-                  </tr>
-                  <tr>
-                    <th>행정동</th>
-                    <td></td>
-                  </tr>
-                  <tr>
-                    <th>교차로</th>
-                    <td></td>
-                  </tr>
-                  <tr>
-                    <th>횡단보도명</th>
-                    <td></td>
-                  </tr>
-                </tbody>
-              </table>
-        <div class="modal-wrap" v-if="modal_crosswalkOne == true">
-          <div class="modal-bg"></div>
-          <div class="modal">
-            <h2 class="flex-between">
-              횡단보도 상세정보
-              <button type="button" class="gray-btn" @click="modal_crosswalkOne = false">
-                <img src="../../../resources/images/close.png" alt="" />
-              </button>
-            </h2>
-            <div class="modalmain">
-              <div class="flex-between">
-                <div class="img">무단횡단검지카메라 이미지</div>
-                <div class="img">무단횡단검지카메라 이미지</div>
-                <div class="img">신호연장검지카메라 이미지</div>
-                <div class="img">신호연장검지카메라 이미지</div>
-                <div class="img">우회차량검지카메라 이미지</div>
-              </div>
-              <table>
-                <colgroup>
-                  <col style="width: 20%" />
-                  <col style="width: 20%" />
-                  <col style="width: 20%" />
-                  <col style="width: 20%" />
-                </colgroup>
-                <tbody>
-                  <tr>
-                    <td colspan="2">시/도</td>
-                    <td colspan="2">{{ crosswalk.sido_nm }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">시/군/구</td>
-                    <td colspan="2">{{  crosswalk.sigungu_nm }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">행정동</td>
-                    <td colspan="2">{{ crosswalk.dong_nm }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">노드명</td>
-                    <td colspan="2">{{ crosswalk.node_name }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">횡단보도명</td>
-                    <td colspan="2">{{ crosswalk.crslk_nm }}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="2">좌표</td>
-                    <td>위도</td>
-                    <td colspan="2">{{ crosswalk.lat }}</td>
-                  </tr>
-                  <tr>
-                    <td>경도</td>
-                    <td colspan="2">{{ crosswalk.lon }}</td>
-                  </tr>
-                  <tr>
-                    <td rowspan="3">설치된 검시장비</td>
-                    <td>무단횡단</td>
-                    <td colspan="2" v-if="crosswalk.wtrms_crosng_eqpmn_instl_yn == 'y'">설치</td>
-                    <td colspan="2" v-else>미설치</td>
-                  </tr>
-                  <tr>
-                    <td>신호연장</td>
-                    <td colspan="2" v-if="crosswalk.signl_extn_eqpmn_instl_yn == 'y'">설치</td>
-                    <td colspan="2" v-else>미설치</td>
-                  </tr>
-                  <tr>
-                    <td>우회전차량</td>
-                    <td colspan="2" v-if="crosswalk.rittrn_vhcle_eqpmn_instl_yn == 'y'">설치</td>
-                    <td colspan="2" v-else>미설치</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">무단횡단 검지범위</td>
-                    <td colspan="2">{{ crosswalk.wtrms_crosng_detct_rate }}%</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">왕복차선</td>
-                    <td colspan="2">{{ crosswalk.rndtp_tfclne_info }}차선</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">우회전차선유무</td>
-                    <td colspan="2">{{ crosswalk.rittrn_tfclne_yn }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">우회전차선유형</td>
-                    <td colspan="2">{{ crosswalk.rittrn_tfclne_ty }}</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">횡단보도 유지보수 담당자</td>
-                    <td colspan="2">{{ crosswalk.mngr_nm }}</td>
-                  </tr>
-                  <tr>
-                    <td>등록자 ID</td>
-                    <td>{{ nullHyphen(crosswalk.rgtr_id) }}</td>
-                    <td>등록일자</td>
-                    <td>{{ yyyymmdd(crosswalk.reg_dt) }}</td>
-                  </tr>
-                  <tr>
-                    <td>수정자 ID</td>
-                    <td>{{ nullHyphen(crosswalk.mdfr_id) }}</td>
-                    <td>수정일자</td>
-                    <td>{{ yyyymmdd(crosswalk.mdfcn_dt) }}</td>
-                  </tr>
-                </tbody>
-              </table>
-              <br>
-              <br>
-              <br>
-              <table>
-                <colgroup>
-                  <col style="width: 20%" />
-                  <col style="width: 20%" />
-                  <col style="width: 20%" />
-                  <col style="width: 20%" />
-                </colgroup>
-                <tbody>
-                  <tr>
-                    <td rowspan="3">금일 상황발생 수</td>
-                    <td>무단횡단</td>
-                    <td>2회</td>
-                    <td rowspan="4">
-                      <button class="green-btn">상황발생 상세보기</button>
-                      <button class="green-btn">장애발생 상세보기</button>
-                      <button class="green-btn">위치확인</button>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>신호연장</td>
-                    <td>-</td>
-                  </tr>
-                  <tr>
-                    <td>우회전차량</td>
-                    <td>-</td>
-                  </tr>
-                  <tr>
-                    <td colspan="2">금일 장애발생 수</td>
-                    <td>1회</td>
-                  </tr>
-                </tbody>
-              </table>
-              
+              <img src="../../../resources/images/close.png" alt="" />
+            </button>
+          </h2>
+          <div class="modalmain">
+            <div class="flex-between">
+              <div class="img">무단횡단검지카메라 이미지</div>
+              <div class="img">무단횡단검지카메라 이미지</div>
+              <div class="img">신호연장검지카메라 이미지</div>
+              <div class="img">신호연장검지카메라 이미지</div>
+              <div class="img">우회차량검지카메라 이미지</div>
             </div>
+            <table>
+              <colgroup>
+                <col style="width: 20%" />
+                <col style="width: 20%" />
+                <col style="width: 20%" />
+                <col style="width: 20%" />
+              </colgroup>
+              <tbody>
+                <tr>
+                  <td colspan="2">시/도</td>
+                  <td colspan="2">{{ crosswalk.sido_nm }}</td>
+                </tr>
+                <tr>
+                  <td colspan="2">시/군/구</td>
+                  <td colspan="2">{{ crosswalk.sigungu_nm }}</td>
+                </tr>
+                <tr>
+                  <td colspan="2">행정동</td>
+                  <td colspan="2">{{ crosswalk.dong_nm }}</td>
+                </tr>
+                <tr>
+                  <td colspan="2">노드명</td>
+                  <td colspan="2">{{ crosswalk.node_name }}</td>
+                </tr>
+                <tr>
+                  <td colspan="2">횡단보도명</td>
+                  <td colspan="2">{{ crosswalk.crslk_nm }}</td>
+                </tr>
+                <tr>
+                  <td rowspan="2">좌표</td>
+                  <td>위도</td>
+                  <td colspan="2">{{ crosswalk.lat }}</td>
+                </tr>
+                <tr>
+                  <td>경도</td>
+                  <td colspan="2">{{ crosswalk.lon }}</td>
+                </tr>
+                <tr>
+                  <td rowspan="3">설치된 검시장비</td>
+                  <td>무단횡단</td>
+                  <td
+                    colspan="2"
+                    v-if="crosswalk.wtrms_crosng_eqpmn_instl_yn == 'y'"
+                  >
+                    설치
+                  </td>
+                  <td colspan="2" v-else>미설치</td>
+                </tr>
+                <tr>
+                  <td>신호연장</td>
+                  <td
+                    colspan="2"
+                    v-if="crosswalk.signl_extn_eqpmn_instl_yn == 'y'"
+                  >
+                    설치
+                  </td>
+                  <td colspan="2" v-else>미설치</td>
+                </tr>
+                <tr>
+                  <td>우회전차량</td>
+                  <td
+                    colspan="2"
+                    v-if="crosswalk.rittrn_vhcle_eqpmn_instl_yn == 'y'"
+                  >
+                    설치
+                  </td>
+                  <td colspan="2" v-else>미설치</td>
+                </tr>
+                <tr>
+                  <td colspan="2">무단횡단 검지범위</td>
+                  <td colspan="2">{{ crosswalk.wtrms_crosng_detct_rate }}%</td>
+                </tr>
+                <tr>
+                  <td colspan="2">왕복차선</td>
+                  <td colspan="2">{{ crosswalk.rndtp_tfclne_info }}차선</td>
+                </tr>
+                <tr>
+                  <td colspan="2">우회전차선유무</td>
+                  <td colspan="2">{{ crosswalk.rittrn_tfclne_yn }}</td>
+                </tr>
+                <tr>
+                  <td colspan="2">우회전차선유형</td>
+                  <td colspan="2">{{ crosswalk.rittrn_tfclne_ty }}</td>
+                </tr>
+                <tr>
+                  <td colspan="2">횡단보도 유지보수 담당자</td>
+                  <td colspan="2">{{ crosswalk.mngr_nm }}</td>
+                </tr>
+                <tr>
+                  <td>등록자 ID</td>
+                  <td>{{ nullHyphen(crosswalk.rgtr_id) }}</td>
+                  <td>등록일자</td>
+                  <td>{{ yyyymmdd(crosswalk.reg_dt) }}</td>
+                </tr>
+                <tr>
+                  <td>수정자 ID</td>
+                  <td>{{ nullHyphen(crosswalk.mdfr_id) }}</td>
+                  <td>수정일자</td>
+                  <td>{{ yyyymmdd(crosswalk.mdfcn_dt) }}</td>
+                </tr>
+              </tbody>
+            </table>
+            <br />
+            <br />
+            <br />
+            <table>
+              <colgroup>
+                <col style="width: 20%" />
+                <col style="width: 20%" />
+                <col style="width: 20%" />
+                <col style="width: 20%" />
+              </colgroup>
+              <tbody>
+                <tr>
+                  <td rowspan="3">금일 상황발생 수</td>
+                  <td>무단횡단</td>
+                  <td>2회</td>
+                  <td rowspan="4">
+                    <button class="green-btn">상황발생 상세보기</button>
+                    <button class="green-btn">장애발생 상세보기</button>
+                    <button class="green-btn">위치확인</button>
+                  </td>
+                </tr>
+                <tr>
+                  <td>신호연장</td>
+                  <td>-</td>
+                </tr>
+                <tr>
+                  <td>우회전차량</td>
+                  <td>-</td>
+                </tr>
+                <tr>
+                  <td colspan="2">금일 장애발생 수</td>
+                  <td>1회</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
-      <div class="bottom-wrap">
-        <PaginationButton
-          v-model:currentPage="crosswalkListSearch.currentPage"
-          :per-page="crosswalkListSearch.perPage"
-          :total-count="crosswalkListCount"
-          :max-range="5"
-          :click="crosswalkSelectList"
-        />
-        <div class="btn-wrap">
-          <router-link to="/UserManagement.page">
-            <span class="btn-2 green-btn">Excel로 저장</span>
-          </router-link>
-        </div>
+    </div>
+    <div class="bottom-wrap">
+      <PaginationButton
+        v-model:currentPage="crosswalkListSearch.currentPage"
+        :per-page="crosswalkListSearch.perPage"
+        :total-count="crosswalkListCount"
+        :max-range="5"
+        :click="crosswalkSelectList"
+      />
+      <div class="btn-wrap">
+        <router-link to="/UserManagement.page">
+          <span class="btn-2 green-btn">Excel로 저장</span>
+        </router-link>
       </div>
     </div>
   </div>

 <script>
 import axios from "axios";
 import PaginationButton from "../../component/pagination/PaginationButton.vue";
-import dongSelectList from '../../component/dongSelectList.vue';
+import dongSelectList from "../../component/dongSelectList.vue";
 import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
 
 export default {

         searchRoundTripLane: null,
         jaywalking: null,
         signal: null,
-        rightTurn: null
+        rightTurn: null,
       },
 
       crosswalk: {

         sigungu_nm: null,
         dong_nm: null,
         node_name: null,
-        mngr_nm: null
+        mngr_nm: null,
       },
 
       crosswalkListCount: 0,

     };
   },
   methods: {
-    crosswalkSelectList: function() {
+    crosswalkSelectList: function () {
       const vm = this;
       vm.crosswalkListSearch.searchDongCode = vm.address.dong_cd;
 
-        axios({
+      axios({
         url: "/statusControl/crosswalkSelectList.json",
         method: "post",
         headers: {

         },
         data: vm.crosswalkListSearch,
       })
-        .then(function(response) {
+        .then(function (response) {
           console.log("crosswalkSelectList - response : ", response.data);
           vm.crosswalkListCount = response.data.crosswalkListCount;
           vm.crosswalkList = response.data.crosswalkList;
-          vm.crosswalkIdx = response.data.crosswalkListCount - (vm.crosswalkListSearch.currentPage - 1) * response.data.crosswalkList.length;
+          vm.crosswalkIdx =
+            response.data.crosswalkListCount -
+            (vm.crosswalkListSearch.currentPage - 1) *
+              response.data.crosswalkList.length;
         })
-        .catch(function(error) {
+        .catch(function (error) {
           console.log("crosswalkSelectList - error : ", error);
           alert("횡단보도 목록 조회 오류, 관리자에게 문의해주세요.");
         });
     },
 
-    crosswalkSelectOne: function(item) {
+    crosswalkSelectOne: function (item) {
       const vm = this;
 
       axios({

         headers: {
           "Content-Type": "application/json; charset=UTF-8",
         },
-        data: {"node_id":item.node_id, "crslk_az":item.crslk_az}
+        data: { node_id: item.node_id, crslk_az: item.crslk_az },
       })
-        .then(function(response) {
+        .then(function (response) {
           console.log("crosswalkSelectOne - response : ", response.data);
           vm.crosswalk = response.data;
           vm.modal_crosswalkOne = true;
-      })
-        .catch(function(error) {
+        })
+        .catch(function (error) {
           console.log("crosswalkSelectOne - error : ", error);
-          alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.")
-      })
+          alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
+        });
     },
     //날짜 시,분,초 자르기
     yyyymmdd: function (date) {
       return COMMON_UTIL.yyyymmdd(date);
     },
-    
+
     //null값 '-' 치환
     nullHyphen(data) {
       return COMMON_UTIL.nullHyphen(data);

       console.log("value : ", value);
       this.address = value;
     },
-
   },
   watch: {},
   computed: {},
   components: {
     PaginationButton: PaginationButton,
-    dongSelectList: dongSelectList
+    dongSelectList: dongSelectList,
   },
   mounted() {
     console.log("CrosswalkListSearch mounted");

     width: 8.7rem;
   }
 }
+
+.gap {
+  width: 77.5em;
+  /* height: 16em; */
+  display: flex;
+  flex-wrap: wrap;
+  /* align-content: flex-start; */
+  border: 1px solid red;
+}
+.gap-sub {
+  height: 30em;
+}
+.taa2 {
+  height: 14em !important;
+  line-height: 14 !important;
+}
+.ta5 {
+  height: 30em !important;
+  line-height: 30em !important;
+  height: 30em;
+}
+.in1 {
+  width: 21em;
+  height: 4em !important;
+  text-align: center;
+}
+.taa {
+  width: 10em;
+  height: 16em;
+  border: 1px solid gray;
+  line-height: 16em;
+  text-align: center;
+}
+.g2 {
+  width: 38.7em;
+}
+.g3 {
+  /* height: 14em; */
+  margin-top: -11px;
+  /* flex-grow: 1; */
+  /* width: 155em; */
+}
+.board-wrap {
+  width: 100%;
+  height: 50em;
+}
 .mobile {
   display: none;
 }

   width: max-content;
 }
 select {
-  width: 15rem;
+  width: 19rem;
+  height: 4em !important;
+  background: #ffffffc2;
+  text-align: center;
 }
 .modal {
   width: 100rem;

 .search-wrap {
   margin-bottom: 30px;
   background: #f7f6f6;
-  padding: 1rem;
+  display: flex;
+  /* padding: 1rem; */
+  height: 46em;
+  width: 100%;
+
+  flex-wrap: wrap;
+  align-content: flex-start;
 }
 
 .search-wrap input,

Add a comment

Open 0
Closed 0

List

...	...	@@ -19,14 +19,21 @@
19	19	font-weight: bold;
20	20	font-style: normal;
21	21	}
22		-.grid{display: grid;}
23		-.grid2{display: grid; grid-template-columns: 1fr 1fr;}
	22	+.grid {
	23	+ display: grid;
	24	+}
	25	+.grid2 {
	26	+ display: grid;
	27	+ grid-template-columns: 1fr 1fr;
	28	+}
24	29	.flex {
25	30	display: flex;
26	31	align-items: center;
27	32	}
28	33	.flex-between {
29	34	display: flex;
	35	+ flex-wrap: wrap;
	36	+ flex-grow: 1;
30	37	justify-content: space-between;
31	38	align-items: center;
32	39	}
...	...	@@ -142,9 +149,15 @@
142	149	.bg-green {
143	150	background: #6dba67;
144	151	}
145		-.green{color: #a7d292;}
146		-.black{color: #333;}
147		-.lined{text-decoration: underline;}
	152	+.green {
	153	+ color: #a7d292;
	154	+}
	155	+.black {
	156	+ color: #333;
	157	+}
	158	+.lined {
	159	+ text-decoration: underline;
	160	+}
148	161	.bg-yellow {
149	162	background: #e6c772;
150	163	}
...	...	@@ -155,17 +168,44 @@
155	168	margin-left: 32rem !important;
156	169	}
157	170
158		-.m-b{margin-bottom: 1rem;}
159		-.m-b3{margin-bottom: 3rem;}
160		-.m-r{margin-right: 1rem;}
161		-.m-r3{margin-right: 3rem;}
162		-.gap{gap: 1rem;}
163		-.gap5{gap: 5rem;}
164		-button{padding: 0.3rem 2rem;}
165		-.btn-l{width: -webkit-fill-available;}
166		-.green-btn{background: #13833b; border: 0; border-radius: 5px; color: #fff;}
167		-.gray-btn{background: #f9f9f9; border: 1px solid #c8c5c5; border-radius: 5px;}
168		-
	171	+.m-b3 {
	172	+ margin-bottom: 3rem;
	173	+}
	174	+.m-r {
	175	+ /* margin-right: 1rem; */
	176	+ /* min-height: 150px; */
	177	+ flex-shrink: 1;
	178	+ /* flex-grow: 1; */
	179	+}
	180	+.m-r3 {
	181	+ margin-right: 3rem;
	182	+}
	183	+.gap {
	184	+ gap: 1rem;
	185	+}
	186	+.gap5 {
	187	+ gap: 5rem;
	188	+}
	189	+button {
	190	+ padding: 0.3rem 2rem;
	191	+}
	192	+.btn-l {
	193	+ width: -webkit-fill-available;
	194	+}
	195	+.green-btn {
	196	+ background: #13833b;
	197	+ background: #13833b;
	198	+ border: 0;
	199	+ border-radius: 5px;
	200	+ color: #fff;
	201	+ height: 3em;
	202	+ line-height: 3em;
	203	+}
	204	+.gray-btn {
	205	+ background: #f9f9f9;
	206	+ border: 1px solid #c8c5c5;
	207	+ border-radius: 5px;
	208	+}
169	209
170	210	/스크롤바디자인/
171	211	::-webkit-scrollbar-thumb {
...	...	@@ -191,17 +231,18 @@
191	231	position: absolute;
192	232	width: 100%;
193	233	height: 100%;
194		- background-color: rgba(0, 0, 0, .6);
	234	+ background-color: rgba(0, 0, 0, 0.6);
195	235	}
196	236
197		-.modal, .modal2 {
	237	+.modal,
	238	+.modal2 {
198	239	position: absolute;
199	240	top: 50%;
200	241	left: 50%;
201		- transform: translate(-50%, -50%);
	242	+ transform: translate(-50%, -50%);
202	243	z-index: 2;
203	244	background-color: #fff;
204		-
	245	+
205	246	text-align: center;
206	247	}
207	248
...	...	@@ -213,8 +254,12 @@
213	254	color: #13833b;
214	255	}
215	256	@media all and (max-width: 479px) {
216		-.m-mb{margin-bottom: 1rem;}
217		-h2.page-title{font-size: 23px;}
	257	+ .m-mb {
	258	+ margin-bottom: 1rem;
	259	+ }
	260	+ h2.page-title {
	261	+ font-size: 23px;
	262	+ }
218	263	}
219	264	/* 달력 */
220	265	/* input[type="date"]{
...	...	@@ -238,5 +283,13 @@
238	283	max-height: 100%;
239	284	min-height: 100%;
240	285	}
241		-.main-warp > div{height: inherit;}
242		-.left, .right, .right > div, .right > div >div, .right > div >div>#map{height: inherit;} (No newline at end of file)
	286	+.main-warp > div {
	287	+ height: inherit;
	288	+}
	289	+.left,
	290	+.right,
	291	+.right > div,
	292	+.right > div > div,
	293	+.right > div > div > #map {
	294	+ height: inherit;
	295	+}

Delete comment