Commit @f659f41a5905b498d1155b7d982be658b1e8b044

허정 2023-08-29

20230829 김하영 시스템관리 표준노드관리 양식다운로드 폰트크기 버튼위치 변경

@f659f41a5905b498d1155b7d982be658b1e8b044

f659f41

.idea/.gitignore (added)

+++ .idea/.gitignore

...	...	@@ -0,0 +1,8 @@
	1	+# Default ignored files
	2	+/shelf/
	3	+/workspace.xml
	4	+# Datasource local storage ignored files
	5	+/dataSources/
	6	+/dataSources.local.xml
	7	+# Editor-based HTTP Client requests
	8	+/httpRequests/

f659f41

.idea/crosswalk.iml (added)

+++ .idea/crosswalk.iml

...	...	@@ -0,0 +1,9 @@
	1	+<?xml version="1.0" encoding="UTF-8"?>
	2	+<module type="JAVA_MODULE" version="4">
	3	+ <component name="NewModuleRootManager" inherit-compiler-output="true">
	4	+ <exclude-output />
	5	+ <content url="file://$MODULE_DIR$" />
	6	+ <orderEntry type="inheritedJdk" />
	7	+ <orderEntry type="sourceFolder" forTests="false" />
	8	+ </component>
	9	+</module>(파일 끝에 줄바꿈 문자 없음)

f659f41

.idea/libraries/client_19_16.xml (added)

+++ .idea/libraries/client_19_16.xml

...	...	@@ -0,0 +1,11 @@
	1	+<component name="libraryTable">
	2	+ <library name="client_19.16">
	3	+ <CLASSES>
	4	+ <root url="jar://$PROJECT_DIR$/server/modules/db/oracle/client/client_19.16/ucp.jar!/" />
	5	+ <root url="jar://$PROJECT_DIR$/server/modules/db/oracle/client/client_19.16/ojdbc8.jar!/" />
	6	+ <root url="jar://$PROJECT_DIR$/server/modules/db/oracle/client/client_19.16/xstreams.jar!/" />
	7	+ </CLASSES>
	8	+ <JAVADOC />
	9	+ <SOURCES />
	10	+ </library>
	11	+</component>(파일 끝에 줄바꿈 문자 없음)

f659f41

.idea/libraries/client_21_6.xml (added)

+++ .idea/libraries/client_21_6.xml

...	...	@@ -0,0 +1,11 @@
	1	+<component name="libraryTable">
	2	+ <library name="client_21.6">
	3	+ <CLASSES>
	4	+ <root url="jar://$PROJECT_DIR$/server/modules/db/oracle/client/client_21.6/ojdbc8.jar!/" />
	5	+ <root url="jar://$PROJECT_DIR$/server/modules/db/oracle/client/client_21.6/ucp.jar!/" />
	6	+ <root url="jar://$PROJECT_DIR$/server/modules/db/oracle/client/client_21.6/xstreams.jar!/" />
	7	+ </CLASSES>
	8	+ <JAVADOC />
	9	+ <SOURCES />
	10	+ </library>
	11	+</component>(파일 끝에 줄바꿈 문자 없음)

f659f41

.idea/misc.xml (added)

+++ .idea/misc.xml

...	...	@@ -0,0 +1,9 @@
	1	+<?xml version="1.0" encoding="UTF-8"?>
	2	+<project version="4">
	3	+ <component name="JavaScriptSettings">
	4	+ <option name="languageLevel" value="ES6" />
	5	+ </component>
	6	+ <component name="ProjectRootManager" version="2" languageLevel="JDK_14" default="false" project-jdk-name="15" project-jdk-type="JavaSDK">
	7	+ <output url="file://$PROJECT_DIR$/out" />
	8	+ </component>
	9	+</project>(파일 끝에 줄바꿈 문자 없음)

f659f41

.idea/modules.xml (added)

+++ .idea/modules.xml

...	...	@@ -0,0 +1,8 @@
	1	+<?xml version="1.0" encoding="UTF-8"?>
	2	+<project version="4">
	3	+ <component name="ProjectModuleManager">
	4	+ <modules>
	5	+ <module fileurl="file://$PROJECT_DIR$/.idea/crosswalk.iml" filepath="$PROJECT_DIR$/.idea/crosswalk.iml" />
	6	+ </modules>
	7	+ </component>
	8	+</project>(파일 끝에 줄바꿈 문자 없음)

f659f41

.idea/vcs.xml (added)

+++ .idea/vcs.xml

...	...	@@ -0,0 +1,6 @@
	1	+<?xml version="1.0" encoding="UTF-8"?>
	2	+<project version="4">
	3	+ <component name="VcsDirectoryMappings">
	4	+ <mapping directory="" vcs="Git" />
	5	+ </component>
	6	+</project>(파일 끝에 줄바꿈 문자 없음)

c60ead4

f659f41

client/resources/css/common.css

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

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


 }
 .s-btn {
   width: 15rem;
+  /* border: 1px solid red; */
+}
+.green-btn-s {
+  background-color: red;
 }
 input[type="text"] {
   height: 3rem;

   background: #13833b;
   border: 0;
   border-radius: 5px;
+  /* border: 1px solid red; */
+
   color: #fff;
 }
 .gr-btn {

c60ead4

f659f41

client/views/pages/SystemManagement/DongManagement.vue

--- client/views/pages/SystemManagement/DongManagement.vue

+++ client/views/pages/SystemManagement/DongManagement.vue


       <div>
         <table>
           <colgroup>
-            <col style="width: 5%;">
-            <col style="width: 10%;">
-            <col style="width: 10%;">
-            <col style="width: 20%;">
-            <col style="width: 10%;">
-            <col style="width: 10%;">
-            <col style="width: 15%;">
-            <col style="width: 20%;">
+            <col style="width: 5%" />
+            <col style="width: 10%" />
+            <col style="width: 10%" />
+            <col style="width: 20%" />
+            <col style="width: 10%" />
+            <col style="width: 10%" />
+            <col style="width: 15%" />
+            <col style="width: 20%" />
           </colgroup>
           <thead>
             <tr>

       <div>
         <table>
           <colgroup>
-            <col style="width: 10%;">
-            <col style="width: 10%;">
-            <col style="width: 30%;">
-            <col style="width: 20%;">
-            <col style="width: 30%;">
+            <col style="width: 10%" />
+            <col style="width: 10%" />
+            <col style="width: 30%" />
+            <col style="width: 20%" />
+            <col style="width: 30%" />
           </colgroup>
           <tbody>
             <tr>
               <th colspan="2">ID</th>
-              <td><input type="text" class="full"></td>
+              <td><input type="text" class="full" /></td>
               <th>레이어</th>
-              <td><input type="text" class="full"></td>
+              <td><input type="text" class="full" /></td>
             </tr>
             <tr>
               <th colspan="2">한글명</th>
-              <td><input type="text" class="full"></td>
+              <td><input type="text" class="full" /></td>
               <th>등록일</th>
               <td></td>
             </tr>
             <tr>
               <th colspan="2">영문명</th>
-              <td><input type="text" class="full"></td>
+              <td><input type="text" class="full" /></td>
               <th>수정일</th>
               <td></td>
             </tr>
             <tr>
               <th rowspan="2">좌표</th>
               <th class="second">위도</th>
-              <td><input type="text" class="full"></td>
+              <td><input type="text" class="full" /></td>
               <th>등록자</th>
               <td></td>
             </tr>
             <tr>
               <th class="second">경도</th>
-              <td><input type="text" class="full"></td>
+              <td><input type="text" class="full" /></td>
               <th>수정자</th>
               <td></td>
             </tr>

         </table>
       </div>
       <div class="btn-wrap">
-        <button type="button" class="btn-2 gray-btn" @click="modal_2 = true">삭제</button>
-        <button type="button" class="btn-2 green-btn" @click="modal_1 = true">저장</button>
+        <button type="button" class="btn-2 gray-btn" @click="modal_2 = true">
+          삭제
+        </button>
+        <button type="button" class="btn-2 green-btn" @click="modal_1 = true">
+          저장
+        </button>
       </div>
     </div>
 

       <div>
         <table>
           <colgroup>
-            <col style="width: 30%;">
-            <col style="width: 70%;">
+            <col style="width: 30%" />
+            <col style="width: 70%" />
           </colgroup>
           <tbody>
             <tr>
               <th>ID</th>
               <td class="txt-left">
-                <input type="file" name="" id="fileBtn">
-                <label for="fileBtn" class="btn-2 green-btn">
-                  파일선택
-                </label>
+                <input type="file" name="" id="fileBtn" />
+                <label for="fileBtn" class="btn-2 green-btn"> 파일선택 </label>
                 <button type="button" class="gray-btn">등록</button>
               </td>
             </tr>

   </div>
 
   <div class="modal-wrap" v-if="modal_1 == true">
-    <div class="modal-bg">
-    </div>
+    <div class="modal-bg"></div>
     <div class="modal">
       <p>행정동을 <span class="txt-point">등록</span>하시겠습니까?</p>
       <div class="btn-wrap">
         <button type="button" class="green-btn">확인</button>
-        <button type="button" class="gray-btn" @click="modal_1 = false">취소</button>
+        <button type="button" class="gray-btn" @click="modal_1 = false">
+          취소
+        </button>
       </div>
     </div>
   </div>
 
   <div class="modal-wrap" v-if="modal_2 == true">
-    <div class="modal-bg">
-    </div>
+    <div class="modal-bg"></div>
     <div class="modal">
       <p>
-        해당 기능은 데이터 삭제 기능입니다.<br>
-        데이터 삭제 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br>
+        해당 기능은 데이터 삭제 기능입니다.<br />
+        데이터 삭제 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br />
         삭제를 원하시면 아래 삭제 버튼을 눌러주세요.
       </p>
       <div class="btn-wrap">
         <button type="button" class="green-btn">삭제</button>
-        <button type="button" class="gray-btn" @click="modal_2 = false">취소</button>
+        <button type="button" class="gray-btn" @click="modal_2 = false">
+          취소
+        </button>
       </div>
     </div>
   </div>

   float: right;
 }
 
-.sub-title-wrap>* {
+.sub-title-wrap > * {
   display: inline-block;
   vertical-align: middle;
 }
 
-.sub-title-wrap>*:not(:last-child) {
+.sub-title-wrap > *:not(:last-child) {
   margin-right: 2rem;
 }
 

 
 .txt-left .green-btn {
   margin-right: 2rem;
+  /* border: 1px solid red; */
 }
 
 .btn-2 {

   clear: both;
 }
 
-.search-wrap .float-right form>*:not(:last-child) {
+.search-wrap .float-right form > *:not(:last-child) {
   margin-right: 1rem;
 }
 

   margin-top: 15px;
 }
 
-.btn-wrap>*:not(:last-child) {
+.btn-wrap > *:not(:last-child) {
   margin-right: 15px;
 }
 

   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 .modal {

 .txt-point {
   color: #13833b;
 }
-</style>
+</style>

c60ead4

f659f41

client/views/pages/SystemManagement/NodeAddForm.vue

--- client/views/pages/SystemManagement/NodeAddForm.vue

+++ client/views/pages/SystemManagement/NodeAddForm.vue


       <div>
         <table>
           <colgroup>
-            <col style="width: 10%;">
-            <col style="width: 10%;">
-            <col style="width: 30%;">
-            <col style="width: 20%;">
-            <col style="width: 30%;">
+            <col style="width: 10%" />
+            <col style="width: 10%" />
+            <col style="width: 30%" />
+            <col style="width: 20%" />
+            <col style="width: 30%" />
           </colgroup>
           <tbody>
             <tr>
               <th colspan="2">ID</th>
-              <td><input type="text" v-model="node.node_id"></td>
+              <td><input type="text" v-model="node.node_id" /></td>
             </tr>
             <tr>
               <th colspan="2">노드명</th>
-              <td><input type="text" v-model="node.node_name"></td>
+              <td><input type="text" v-model="node.node_name" /></td>
             </tr>
             <tr>
               <th colspan="2">읍/면/동</th>

               <td>{{ dong_nm }}</td>
             </tr>
             <tr>
-              <th rowspan="2">좌표  <button type="button" class="btn-2 gray-btn" @click="[map_open = true, openMap()]">좌표수정</button></th>
+              <th rowspan="2">
+                좌표
+                <button
+                  type="button"
+                  class="btn-2 gray-btn"
+                  @click="[(map_open = true), openMap()]"
+                >
+                  좌표수정
+                </button>
+              </th>
               <th class="second">위도</th>
               <td>{{ node.lat }}</td>
             </tr>
             <tr>
               <th class="second">경도</th>
               <td>{{ node.lon }}</td>
-             
             </tr>
           </tbody>
         </table>
       </div>
       <div class="btn-wrap">
-        <button type="button" class="btn-2 green-btn" @click="nodeInsertCheck">등록</button>
-        <button type="button" class="btn-2 gray-btn" @click="nodeSelectListPage">취소</button>
+        <button type="button" class="btn-2 green-btn" @click="nodeInsertCheck">
+          등록
+        </button>
+        <button
+          type="button"
+          class="btn-2 gray-btn"
+          @click="nodeSelectListPage"
+        >
+          취소
+        </button>
       </div>
     </div>
-
   </div>
   <div class="modal-wrap" v-if="modal_insert == true">
-    <div class="modal-bg">
-    </div>
+    <div class="modal-bg"></div>
     <div class="modal">
       <p>노드를 <span class="txt-point">등록</span>하시겠습니까?</p>
       <div class="btn-wrap">
-        <button type="button" class="green-btn" @click="nodeInsert">확인</button>
-        <button type="button" class="gray-btn" @click="modal_insert = false">취소</button>
+        <button type="button" class="green-btn" @click="nodeInsert">
+          확인
+        </button>
+        <button type="button" class="gray-btn" @click="modal_insert = false">
+          취소
+        </button>
       </div>
     </div>
   </div>
 
   <div class="modal-wrap" v-if="map_open">
-    <div class="modal-bg">
-    </div>
+    <div class="modal-bg"></div>
     <div class="modalMap">
       <div class="search">
         <h2>교차로 검색</h2>
-        <dongSelectList @setDongCd="setDongCd" ref="parent" :nodeHiddenCk="true" :crslk_azHiddenCk="true"></dongSelectList>
-             <!-- @siDoGunGuSelectF="siDoGunGuSelectF" @dongSelectF="dongSelectF" @nodeSelectF="nodeSelectF"></dongSelectList> -->
+        <dongSelectList
+          @setDongCd="setDongCd"
+          ref="parent"
+          :nodeHiddenCk="true"
+          :crslk_azHiddenCk="true"
+        ></dongSelectList>
+        <!-- @siDoGunGuSelectF="siDoGunGuSelectF" @dongSelectF="dongSelectF" @nodeSelectF="nodeSelectF"></dongSelectList> -->
       </div>
       <button type="button" class="green-btn" @click="searchDong">검색</button>
-      <OpenLayers  ref="open_layers"/>
-          <label>위도 : </label>
-          <input style="width: 20rem" type="text" v-model="map_lat" disabled/>
-          <label>경도 : </label>
-          <input style="width: 20rem" type="text" v-model="map_lon" disabled/>
+      <OpenLayers ref="open_layers" />
+      <label>위도 : </label>
+      <input style="width: 20rem" type="text" v-model="map_lat" disabled />
+      <label>경도 : </label>
+      <input style="width: 20rem" type="text" v-model="map_lon" disabled />
       <div class="btn-wrap">
-        <button type="button" class="green-btn" @click="selectCoordinate">선택</button>
+        <button type="button" class="green-btn" @click="selectCoordinate">
+          선택
+        </button>
         <button type="button" class="gray-btn" @click="closeMap">취소</button>
       </div>
     </div>

 </template>
 
 <script>
-import axios from 'axios';
-import COMMON_UTIL from '../../../resources/js/commonUtil.ts';
+import axios from "axios";
+import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
 import OpenLayers from "../../component/OpenLayers.vue";
 import {
   vworldBaseLayer,

   vworldHybridLayer,
   vworldSatelliteLayer,
 } from "../../component/OpenLayersMap.vue";
-import {baseStyles} from '../../component/OpenLayersStyle.vue';
-import dongSelectList from '../../component/dongSelectList.vue';
-import { transform } from 'ol/proj';
+import { baseStyles } from "../../component/OpenLayersStyle.vue";
+import dongSelectList from "../../component/dongSelectList.vue";
+import { transform } from "ol/proj";
 
 export default {
-  data:() => {
+  data: () => {
     return {
       node: {
         node_id: null,

         node_type: null,
         lat: null,
         lon: null,
-      //  updatedate: null,
-        dong_cd: '22',
+        //  updatedate: null,
+        dong_cd: "22",
       },
       dong_nm: null,
       address: {},

       //modal
       modal_insert: false,
 
-      //좌표 modal 
+      //좌표 modal
       map_open: false,
       map_lat: null,
       map_lon: null,
-
     };
   },
   methods: {
-
     //좌표수정 지도 열기
     async openMap() {
-      const vm  = this;
+      const vm = this;
 
       //OpenLayers 랜더링 후 접근
       await vm.$nextTick();
       //기본맵 세팅
       vm.$refs.open_layers.setBaseMap(vworldBaseLayer);
-      
+
       //행정동 레이어
-      //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');    
-      vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.node.dong_cd);
+      //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');
+      vm.$refs.open_layers.addVectorLayerByUrl(
+        "/common/getDongsGeoJson.json",
+        "nodeMap",
+        "EPSG:5181",
+        baseStyles["MultiPolygon"],
+        "MultiPolygon",
+        vm.node.dong_cd
+      );
       // vm.$refs.open_layers.setZoom(11);
     },
 

     },
 
     //지도 클릭 이벤트
-    childClick(prop,coordinate){        
-      const vm = this; 
+    childClick(prop, coordinate) {
+      const vm = this;
       console.log(prop);
       console.log(coordinate);
- 
+
       // 레이어 삭제
-      vm.$refs.open_layers.removeLayer('nodePoint');
-      
-      // Icon 그리기 
-      vm.$refs.open_layers.createIcon(coordinate[1],coordinate[0],'/client/resources/images/icon/fin2.png',0.3, 'nodePoint','EPSG:5181');
-      
+      vm.$refs.open_layers.removeLayer("nodePoint");
+
+      // Icon 그리기
+      vm.$refs.open_layers.createIcon(
+        coordinate[1],
+        coordinate[0],
+        "/client/resources/images/icon/fin2.png",
+        0.3,
+        "nodePoint",
+        "EPSG:5181"
+      );
+
       //클릭위치로 이동
       //  this.$refs.open_layers.setCenterPosition(coordinate[0],coordinate[1],'EPSG:5181');
 
       //좌표계 변환
-      var changeCoordinate = transform([coordinate[0],coordinate[1]],'EPSG:5181','EPSG:4326');
+      var changeCoordinate = transform(
+        [coordinate[0], coordinate[1]],
+        "EPSG:5181",
+        "EPSG:4326"
+      );
       vm.map_lat = changeCoordinate[1];
       vm.map_lon = changeCoordinate[0];
     },

     //지도 휠 사용
     childWheel(coordinate) {},
 
-     //좌표 선택 완료
-     selectCoordinate() {
-      const vm = this; 
+    //좌표 선택 완료
+    selectCoordinate() {
+      const vm = this;
       vm.node.lat = vm.map_lat;
       vm.node.lon = vm.map_lon;
       vm.map_open = false;
-     },
+    },
 
-     // 좌표수정에서 교차로 검색시 동레이어, 노드좌표 찍어주기
-     searchDong() {
+    // 좌표수정에서 교차로 검색시 동레이어, 노드좌표 찍어주기
+    searchDong() {
       const vm = this;
       //기존 레이어 삭제
-      vm.$refs.open_layers.removeLayer('nodeMap');
-      vm.$refs.open_layers.removeLayer('nodePoint');
+      vm.$refs.open_layers.removeLayer("nodeMap");
+      vm.$refs.open_layers.removeLayer("nodePoint");
       //동 레이어 그리기
-      vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.address.dong_cd);
+      vm.$refs.open_layers.addVectorLayerByUrl(
+        "/common/getDongsGeoJson.json",
+        "nodeMap",
+        "EPSG:5181",
+        baseStyles["MultiPolygon"],
+        "MultiPolygon",
+        vm.address.dong_cd
+      );
       axios({
-        url: '/dong/dongCenter.json',
-        method: 'post',
+        url: "/dong/dongCenter.json",
+        method: "post",
         headers: {
-          'Content-Type': "application/json; charset=UTF-8"
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        data: {'dong_cd' : vm.address.dong_cd}
-      }).then(function (response) {
-        console.log("searchNode response : ",response.data);
-        if(vm.address.guGun_dong_cd === null) {
-          vm.$refs.open_layers.setZoom(11);
-        } else if(vm.address.dong_dong_cd === null) {
-          vm.$refs.open_layers.setZoom(12.5);
-        } else {
-          vm.$refs.open_layers.setZoom(16);
-        }
-        vm.$refs.open_layers.setCenterPosition(response.data.dong_lat,response.data.dong_lon,'EPSG:5181');
-        vm.dong_nm = response.data.dong_nm;
-        console.log("vm.dong_nm  :  ", vm.dong_nm);
-      }).catch(function (error) {
-        console.log("serchNode error : ", error);
-        alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");
+        data: { dong_cd: vm.address.dong_cd },
       })
-     },
+        .then(function (response) {
+          console.log("searchNode response : ", response.data);
+          if (vm.address.guGun_dong_cd === null) {
+            vm.$refs.open_layers.setZoom(11);
+          } else if (vm.address.dong_dong_cd === null) {
+            vm.$refs.open_layers.setZoom(12.5);
+          } else {
+            vm.$refs.open_layers.setZoom(16);
+          }
+          vm.$refs.open_layers.setCenterPosition(
+            response.data.dong_lat,
+            response.data.dong_lon,
+            "EPSG:5181"
+          );
+          vm.dong_nm = response.data.dong_nm;
+          console.log("vm.dong_nm  :  ", vm.dong_nm);
+        })
+        .catch(function (error) {
+          console.log("serchNode error : ", error);
+          alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");
+        });
+    },
 
     //노드 등록
     nodeInsert() {
       const vm = this;
       vm.node.dong_cd = vm.address.dong_dong_cd;
-      
+
       axios({
-        url: '/node/nodeInsert.json',
-        method: 'post',
+        url: "/node/nodeInsert.json",
+        method: "post",
         headers: {
-          'Content-Type': "application/json; charset=UTF-8"
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        data: vm.node
-      }).then(function (response) {
-        console.log("nodeInsert - response : ", response.data);
-        let result = response.data;
-        if ( result > 0) {
-          alert("노드 등록을 완료 하였습니다.")
-          vm.modal_insert = false;
-          vm.nodeSelectListPage();
-        } else {
-          alert("등록 실패, 관리자에게 문의해주세요.")
-          vm.modal_insert = false;
-        }
-      }).catch(function (error) {
-        console.log("nodeInsert - error : ", error);
-        alert("노드등록 오류, 관리자에게 문의해주세요.")
-        vm.modal_insert = false;
+        data: vm.node,
       })
+        .then(function (response) {
+          console.log("nodeInsert - response : ", response.data);
+          let result = response.data;
+          if (result > 0) {
+            alert("노드 등록을 완료 하였습니다.");
+            vm.modal_insert = false;
+            vm.nodeSelectListPage();
+          } else {
+            alert("등록 실패, 관리자에게 문의해주세요.");
+            vm.modal_insert = false;
+          }
+        })
+        .catch(function (error) {
+          console.log("nodeInsert - error : ", error);
+          alert("노드등록 오류, 관리자에게 문의해주세요.");
+          vm.modal_insert = false;
+        });
     },
 
     //등록 유효성 검사
-    nodeInsertCheck: function() {
+    nodeInsertCheck: function () {
       if (COMMON_UTIL.isEmpty(this.node.node_id) === false) {
-        alert('노드ID를 입력해주세요.');
+        alert("노드ID를 입력해주세요.");
         return false;
       }
 
       if (COMMON_UTIL.isEmpty(this.node.node_name) === false) {
-        alert("노드명을 입력해주세요.")
+        alert("노드명을 입력해주세요.");
         return false;
       }
 
       this.modal_insert = true;
-    },  
+    },
 
     //dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
     setDongCd(value) {

     },
 
     nodeSelectListPage() {
-      this.$router.push({ path: '/NodeManagement.page'})
-    }
+      this.$router.push({ path: "/NodeManagement.page" });
+    },
   },
   watch: {},
   computed: {},
   components: {
     OpenLayers: OpenLayers,
-    dongSelectList: dongSelectList
+    dongSelectList: dongSelectList,
   },
   mounted() {
     console.log("Main4 mounted");

   float: right;
 }
 
-.sub-title-wrap>* {
+.sub-title-wrap > * {
   display: inline-block;
   vertical-align: middle;
 }
 
-.sub-title-wrap>*:not(:last-child) {
+.sub-title-wrap > *:not(:last-child) {
   margin-right: 2rem;
 }
 

 
 .txt-left .green-btn {
   margin-right: 2rem;
+  /* border: 1px solid red; */
 }
 
 .btn-2 {

   clear: both;
 }
 
-.search-wrap .float-right form>*:not(:last-child) {
+.search-wrap .float-right form > *:not(:last-child) {
   margin-right: 1rem;
 }
 

   border-left: none;
   border-right: none;
 }
-td input{width: -webkit-fill-available;}
+td input {
+  width: -webkit-fill-available;
+}
 table th {
   padding: 15px;
   color: #fff;

   margin-top: 15px;
 }
 
-.btn-wrap>*:not(:last-child) {
+.btn-wrap > *:not(:last-child) {
   margin-right: 15px;
 }
-
-
 
 .modal-bg {
   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 .modal {
   position: absolute;

 .txt-point {
   color: #13833b;
 }
-</style>
+</style>

c60ead4

f659f41

client/views/pages/SystemManagement/NodeManagement.vue

--- client/views/pages/SystemManagement/NodeManagement.vue

+++ client/views/pages/SystemManagement/NodeManagement.vue


 <template>
   <div class="wrap">
-    <div >
-      
-    <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">표준노드 관리</h2>
-    <div style="margin-left: 2rem;" class="m-b3">시스템 관리&nbsp;&#62;&nbsp;<em class="green2 lined">표준노드 관리</em> </div>
-   
-    <!--
+    <div>
+      <h2 style="color: #10833b" class="flex gap">
+        <img src="../../../resources/images/bar.png" alt="" />표준노드 관리
+      </h2>
+      <div style="margin-left: 2rem" class="m-b3">
+        시스템 관리&nbsp;&#62;&nbsp;<em class="green2 lined">표준노드 관리</em>
+      </div>
+
+      <!--
     <div class="search-wrap clear-fix">
         <div class=" flex-end gap">
           <select v-model="nodeListSearch.searchType">

       </div>
     -->
 
-    <!-- 검색 -->
-    <div class="de_Search" >
-      <table class="troubleTable">
-      <tbody>        
-          <tr>                     
-              <th>검색</th>               
-              <td colspan="7" >     
+      <!-- 검색 -->
+      <div class="de_Search">
+        <table class="troubleTable">
+          <tbody>
+            <tr>
+              <th>검색</th>
+              <td colspan="7">
                 <select v-model="nodeListSearch.searchType">
                   <option value="null">검색조건</option>
                   <option value="node_id">ID</option>
                   <option value="node_nm">노드명</option>
                 </select>
-                <input type="text" placeholder="검색어를 입력 해주세요." v-model="nodeListSearch.searchText" @keyup.enter="nodeSelectList" style="width: 78%;" />
-                <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="nodeSelectList()">검색</button>
-              </td> 
-          </tr>
-      </tbody>
-      </table>
-    </div>
+                <input
+                  type="text"
+                  placeholder="검색어를 입력 해주세요."
+                  v-model="nodeListSearch.searchText"
+                  @keyup.enter="nodeSelectList"
+                  style="width: 78%"
+                />
+                <button
+                  type="button"
+                  class="green-btn"
+                  style="
+                    margin-left: 5px;
+                    padding: 5px;
+                    width: 10rem;
+                    float: right;
+                  "
+                  @click="nodeSelectList()"
+                >
+                  검색
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
-      <div  class="pc">
+      <div class="pc">
         <table>
           <colgroup>
             <col style="width: 5%" />

           </colgroup>
           <thead>
             <tr>
-              <th >순번</th>
-              <th >ID</th>
-              <th >노드위치</th>
-              <th >노드명</th>
-              <th >위도</th>
-              <th >경도</th>
-              <th >등록일</th>
-            </tr>          
+              <th>순번</th>
+              <th>ID</th>
+              <th>노드위치</th>
+              <th>노드명</th>
+              <th>위도</th>
+              <th>경도</th>
+              <th>등록일</th>
+            </tr>
           </thead>
           <tbody>
             <tr

     </div>
     <div class="pc">
       <div class="sub-title-wrap flex-between m-b">
-        <h3 class="sub-title ">표준노드 정보관리</h3>
+        <h3 class="sub-title">표준노드 정보관리</h3>
         <!-- <button class="btn-2 green-btn" @click="nodeInsertPage">신규등록</button>-->
-        <button class="btn-2 green-btn s-btn " @click="createNode()">신규등록</button>
+        <button class="btn-2 green-btn s-btn" @click="createNode()">
+          신규등록
+        </button>
       </div>
-      <div class="de_Search">    
-        <table class="troubleTable"  style="margin-bottom:5px;">
+      <div class="de_Search">
+        <table class="troubleTable" style="margin-bottom: 5px">
           <colgroup>
             <col style="width: 10%" />
             <col style="width: 10%" />

           type="button"
           class="btn-2 green-btn s-btn"
           @click="modal_update = true"
-          style="width:auto;"
+          style="width: auto"
         >
           수정
         </button>

           type="button"
           class="btn-2 green-btn s-btn"
           @click="nodeInsertCheck"
-          style="width:auto;"
+          style="width: auto"
         >
           등록
         </button>

           type="button"
           class="btn-2 gray-btn s-btn"
           @click="modal_delete = true"
-          style="width:auto;"
+          style="width: auto"
         >
           삭제
         </button>

               <th>첨부파일</th>
               <td class="txt-left flex gap">
                 <input type="file" name="" id="fileBtn" />
-                <label for="fileBtn" class="btn-2 green-btn s-btn" style="height: 3rem; text-align: center; line-height: 3rem;"> 파일선택 </label>
-                <button type="button" class="gray-btn s-btn" @click="nodeExcelInsert">
+                <label
+                  for="fileBtn"
+                  class="btn-2 green-btn s-btn"
+                  style="height: 3rem; text-align: center; line-height: 3rem"
+                >
+                  파일선택
+                </label>
+                <button
+                  type="button"
+                  class="gray-btn s-btn"
+                  @click="nodeExcelInsert"
+                >
                   등록
                 </button>
               </td>
             </tr>
-            <tr>
+            <tr style="position: relative">
               <th>양식다운로드</th>
               <td class="txt-left flex gap">
-                <div>Excel을 이용한 노드등록은 양식에 따라 작성 후 등록해주시기 바랍니다.</div>
-                <button type="button" class="btn-2 green-btn s-btn" @click="nodeInsertForm">양식다운로드</button>
+                <div width="-webkit-fill-available" style="font-size: 13px">
+                  Excel을 이용한 노드등록은 양식에 따라 작성 후 등록해주시기
+                  바랍니다.
+                </div>
+                <button
+                  type="button"
+                  class="btn-2 green-btn s-btn green-btn-s"
+                  style="
+                    width: 125px !important;
+                    position: absolute;
+                    right: -1rem;
+                  "
+                  @click="nodeInsertForm"
+                >
+                  양식다운로드
+                </button>
               </td>
             </tr>
           </tbody>

       </div>
     </div>
   </div>
-  
 
   <div class="modal-wrap" v-if="modal_update == true">
     <div class="modal-bg"></div>

     </div>
   </div>
   -->
-  <div class="modal-wrap" v-if="map_open" >
-    <div class="modal-bg">
-    </div>
-    <div class="modalMap" style="min-width: 850px;">
-      <div class="de_Search" >
+  <div class="modal-wrap" v-if="map_open">
+    <div class="modal-bg"></div>
+    <div class="modalMap" style="min-width: 850px">
+      <div class="de_Search">
         <table class="troubleTable">
-        <tbody>        
-            <tr>                     
-                <th>검색</th>               
-                <td colspan="7" class="gap" >     
-                  <dongSelectListSimple
-                    @setDongCd="setDongCd"
-                    ref="parent"
-                    :nodeHiddenCk="true"
-                    :crslk_azHiddenCk="true"
-                  ></dongSelectListSimple>
-                  <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="searchDong">검색</button>
-                </td> 
+          <tbody>
+            <tr>
+              <th>검색</th>
+              <td colspan="7" class="gap">
+                <dongSelectListSimple
+                  @setDongCd="setDongCd"
+                  ref="parent"
+                  :nodeHiddenCk="true"
+                  :crslk_azHiddenCk="true"
+                ></dongSelectListSimple>
+                <button
+                  type="button"
+                  class="green-btn"
+                  style="
+                    margin-left: 5px;
+                    padding: 5px;
+                    width: 10rem;
+                    float: right;
+                  "
+                  @click="searchDong"
+                >
+                  검색
+                </button>
+              </td>
             </tr>
-        </tbody>
+          </tbody>
         </table>
       </div>
 

       <div class="flex-between">
         <div class="flex gap">
           <label>위도 : </label>
-          <input style="width: 20rem;margin-right:1rem;" type="text" v-model="map_lat" disabled />
+          <input
+            style="width: 20rem; margin-right: 1rem"
+            type="text"
+            v-model="map_lat"
+            disabled
+          />
           <label>경도 : </label>
           <input style="width: 20rem" type="text" v-model="map_lon" disabled />
         </div>
       </div>
-      <div class="btn-wrap" style="margin-top: 4rem; text-align: center;">  
+      <div class="btn-wrap" style="margin-top: 4rem; text-align: center">
         <button type="button" class="green-btn s-btn" @click="selectCoordinate">
           선택
         </button>
-        <button type="button" class="gray-btn s-btn" @click="closeMap"> 
+        <button type="button" class="gray-btn s-btn" @click="closeMap">
           취소
         </button>
       </div>

       await vm.$nextTick();
       //수정 전 좌표 modal에서 보여주기
       if (!vm.createMode) {
-        console.log("위도경도 넣기!!!!!!!")
+        console.log("위도경도 넣기!!!!!!!");
         vm.map_lat = vm.node.lat;
         vm.map_lon = vm.node.lon;
       }
       //기본맵 세팅
       vm.$refs.open_layers.setBaseMap(vworldBaseLayer);
-      //노드위치로 이동     
-       if(!vm.createMode){
-        vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.node.dong_cd);
-        vm.$refs.open_layers.setCenterPosition(vm.node.lat,vm.node.lon,'EPSG:4326');
-        vm.$refs.open_layers.createIcon(vm.node.lat,vm.node.lon,'/client/resources/images/icon/fin2.png',0.3, 'nodePoint','EPSG:4326');
+      //노드위치로 이동
+      if (!vm.createMode) {
+        vm.$refs.open_layers.addVectorLayerByUrl(
+          "/common/getDongsGeoJson.json",
+          "nodeMap",
+          "EPSG:5181",
+          baseStyles["MultiPolygon"],
+          "MultiPolygon",
+          vm.node.dong_cd
+        );
+        vm.$refs.open_layers.setCenterPosition(
+          vm.node.lat,
+          vm.node.lon,
+          "EPSG:4326"
+        );
+        vm.$refs.open_layers.createIcon(
+          vm.node.lat,
+          vm.node.lon,
+          "/client/resources/images/icon/fin2.png",
+          0.3,
+          "nodePoint",
+          "EPSG:4326"
+        );
         vm.$refs.open_layers.setZoom(19);
-       }else{
-        vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.address.dong_cd);
-       }
+      } else {
+        vm.$refs.open_layers.addVectorLayerByUrl(
+          "/common/getDongsGeoJson.json",
+          "nodeMap",
+          "EPSG:5181",
+          baseStyles["MultiPolygon"],
+          "MultiPolygon",
+          vm.address.dong_cd
+        );
+      }
     },
 
     closeMap() {

     searchDong() {
       const vm = this;
       //기존 레이어 삭제
-      vm.$refs.open_layers.removeLayer('nodeMap');
-      vm.$refs.open_layers.removeLayer('nodePoint');
+      vm.$refs.open_layers.removeLayer("nodeMap");
+      vm.$refs.open_layers.removeLayer("nodePoint");
       //동 레이어 그리기
-      vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.address.dong_cd);
+      vm.$refs.open_layers.addVectorLayerByUrl(
+        "/common/getDongsGeoJson.json",
+        "nodeMap",
+        "EPSG:5181",
+        baseStyles["MultiPolygon"],
+        "MultiPolygon",
+        vm.address.dong_cd
+      );
       axios({
-        url: '/dong/dongCenter.json',
-        method: 'post',
+        url: "/dong/dongCenter.json",
+        method: "post",
         headers: {
-          'Content-Type': "application/json; charset=UTF-8"
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        data: {'dong_cd' : vm.address.dong_cd}
-      }).then(function (response) {
-        console.log("searchNode response : ",response.data);
-        if(vm.address.guGun_dong_cd === null) {
-          vm.$refs.open_layers.setZoom(11);
-        } else if(vm.address.dong_dong_cd === null) {
-          vm.$refs.open_layers.setZoom(12.5);
-        } else {
-          vm.$refs.open_layers.setZoom(16);
-        }
-        vm.$refs.open_layers.setCenterPosition(response.data.dong_lat,response.data.dong_lon,'EPSG:5181');
-        vm.dong_fullName =  response.data.sido_nm +
-                            " " +
-                            response.data.sigungu_nm +
-                            " " +
-                            response.data.dong_nm;
-        console.log("vm.dong_nm  :  ", vm.dongdong_fullName_nm);
-      }).catch(function (error) {
-        console.log("serchNode error : ", error);
-        alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");
+        data: { dong_cd: vm.address.dong_cd },
       })
-     },
+        .then(function (response) {
+          console.log("searchNode response : ", response.data);
+          if (vm.address.guGun_dong_cd === null) {
+            vm.$refs.open_layers.setZoom(11);
+          } else if (vm.address.dong_dong_cd === null) {
+            vm.$refs.open_layers.setZoom(12.5);
+          } else {
+            vm.$refs.open_layers.setZoom(16);
+          }
+          vm.$refs.open_layers.setCenterPosition(
+            response.data.dong_lat,
+            response.data.dong_lon,
+            "EPSG:5181"
+          );
+          vm.dong_fullName =
+            response.data.sido_nm +
+            " " +
+            response.data.sigungu_nm +
+            " " +
+            response.data.dong_nm;
+          console.log("vm.dong_nm  :  ", vm.dongdong_fullName_nm);
+        })
+        .catch(function (error) {
+          console.log("serchNode error : ", error);
+          alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");
+        });
+    },
 
     //노드 엑셀 업로드
     nodeExcelInsert() {

         .then(function (response) {
           console.log("nodeExcelInsert - response : ", response.data);
           let insert = response.data.insert;
-          if (insert > 0 ) {
+          if (insert > 0) {
             alert(insert + "건의 노드 등록완료.");
           } else {
-            alert("업로드 파일의 모든 데이터는 이미 ID가 존재하거나 등록할 수 없는 데이터 입니다.");
+            alert(
+              "업로드 파일의 모든 데이터는 이미 ID가 존재하거나 등록할 수 없는 데이터 입니다."
+            );
           }
           vm.nodeSelectList();
         })

       }
 
       if (COMMON_UTIL.isEmpty(this.node.lat) === false) {
-        alert("위도를 입력해주세요.")
+        alert("위도를 입력해주세요.");
         return false;
       }
 
       if (COMMON_UTIL.isEmpty(this.node.lon) === false) {
-        alert("경도를 입력해주세요.")
+        alert("경도를 입력해주세요.");
         return false;
       }
 

     },
 
     //노드 엑셀등록 양식다운로드
-    nodeInsertForm: function() {
+    nodeInsertForm: function () {
       const vm = this;
       axios({
         url: "/node/nodeExcelForm.json",

         herders: {
           "Content-Type": "application/json; charset=UTF-8",
         },
-        responseType: 'arraybuffer',
+        responseType: "arraybuffer",
       })
         .then(function (response) {
           console.log("errorExcel - response : ", response.data);
-          const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers["content-type"] }));
+          const url = window.URL.createObjectURL(
+            new Blob([response.data], {
+              type: response.headers["content-type"],
+            })
+          );
           const link = document.createElement("a");
           link.href = url;
           let today = COMMON_UTIL.today();
-          link.download = '[' + today + ']' + '노드등록양식';
+          link.download = "[" + today + "]" + "노드등록양식";
           link.click();
           window.URL.revokeObjectURL(url);
         })

       this.createMode = true;
       this.map_disabled = false;
       this.dong_fullName = null;
-    }
+    },
   },
   watch: {},
   computed: {},

   mounted() {
     console.log("Main4 mounted");
     this.nodeSelectList();
-    
   },
 };
 </script>

   height: auto;
   width: -webkit-fill-available;
 }
-.modalMap .chart {height:70%; margin: 0rem;}
+.modalMap .chart {
+  height: 70%;
+  margin: 0rem;
+}
 
 .modalMap {
   position: absolute;

 .txt-point {
   color: #13833b;
 }
-
 </style>

c60ead4

f659f41

package-lock.json

--- package-lock.json

+++ package-lock.json


 {
   "name": "crosswalk",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
+      "name": "crosswalk",
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
         "@amcharts/amcharts5": "^5.4.1",
         "@amcharts/amcharts5-geodata": "^5.1.1",

c60ead4

f659f41

yarn.lock

--- yarn.lock

+++ yarn.lock

This diff is too big to display.

Add a comment

Open 0
Closed 0

List

...	...	@@ -31,6 +31,10 @@
31	31	}
32	32	.s-btn {
33	33	width: 15rem;
	34	+ /* border: 1px solid red; */
	35	+}
	36	+.green-btn-s {
	37	+ background-color: red;
34	38	}
35	39	input[type="text"] {
36	40	height: 3rem;
...	...	@@ -287,6 +291,8 @@
287	291	background: #13833b;
288	292	border: 0;
289	293	border-radius: 5px;
	294	+ /* border: 1px solid red; */
	295	+
290	296	color: #fff;
291	297	}
292	298	.gr-btn {

...	...	@@ -18,14 +18,14 @@
18	18	<div>
19	19	<table>
20	20	<colgroup>
21		- <col style="width: 5%;">
22		- <col style="width: 10%;">
23		- <col style="width: 10%;">
24		- <col style="width: 20%;">
25		- <col style="width: 10%;">
26		- <col style="width: 10%;">
27		- <col style="width: 15%;">
28		- <col style="width: 20%;">
	21	+ <col style="width: 5%" />
	22	+ <col style="width: 10%" />
	23	+ <col style="width: 10%" />
	24	+ <col style="width: 20%" />
	25	+ <col style="width: 10%" />
	26	+ <col style="width: 10%" />
	27	+ <col style="width: 15%" />
	28	+ <col style="width: 20%" />
29	29	</colgroup>
30	30	<thead>
31	31	<tr>
...	...	@@ -76,41 +76,41 @@
76	76	<div>
77	77	<table>
78	78	<colgroup>
79		- <col style="width: 10%;">
80		- <col style="width: 10%;">
81		- <col style="width: 30%;">
82		- <col style="width: 20%;">
83		- <col style="width: 30%;">
	79	+ <col style="width: 10%" />
	80	+ <col style="width: 10%" />
	81	+ <col style="width: 30%" />
	82	+ <col style="width: 20%" />
	83	+ <col style="width: 30%" />
84	84	</colgroup>
85	85	<tbody>
86	86	<tr>
87	87	<th colspan="2">ID</th>
88		- <td><input type="text" class="full"></td>
	88	+ <td><input type="text" class="full" /></td>
89	89	<th>레이어</th>
90		- <td><input type="text" class="full"></td>
	90	+ <td><input type="text" class="full" /></td>
91	91	</tr>
92	92	<tr>
93	93	<th colspan="2">한글명</th>
94		- <td><input type="text" class="full"></td>
	94	+ <td><input type="text" class="full" /></td>
95	95	<th>등록일</th>
96	96	<td></td>
97	97	</tr>
98	98	<tr>
99	99	<th colspan="2">영문명</th>
100		- <td><input type="text" class="full"></td>
	100	+ <td><input type="text" class="full" /></td>
101	101	<th>수정일</th>
102	102	<td></td>
103	103	</tr>
104	104	<tr>
105	105	<th rowspan="2">좌표</th>
106	106	<th class="second">위도</th>
107		- <td><input type="text" class="full"></td>
	107	+ <td><input type="text" class="full" /></td>
108	108	<th>등록자</th>
109	109	<td></td>
110	110	</tr>
111	111	<tr>
112	112	<th class="second">경도</th>
113		- <td><input type="text" class="full"></td>
	113	+ <td><input type="text" class="full" /></td>
114	114	<th>수정자</th>
115	115	<td></td>
116	116	</tr>
...	...	@@ -118,8 +118,12 @@
118	118	</table>
119	119	</div>
120	120	<div class="btn-wrap">
121		- <button type="button" class="btn-2 gray-btn" @click="modal_2 = true">삭제</button>
122		- <button type="button" class="btn-2 green-btn" @click="modal_1 = true">저장</button>
	121	+ <button type="button" class="btn-2 gray-btn" @click="modal_2 = true">
	122	+ 삭제
	123	+ </button>
	124	+ <button type="button" class="btn-2 green-btn" @click="modal_1 = true">
	125	+ 저장
	126	+ </button>
123	127	</div>
124	128	</div>
125	129
...	...	@@ -130,17 +134,15 @@
130	134	<div>
131	135	<table>
132	136	<colgroup>
133		- <col style="width: 30%;">
134		- <col style="width: 70%;">
	137	+ <col style="width: 30%" />
	138	+ <col style="width: 70%" />
135	139	</colgroup>
136	140	<tbody>
137	141	<tr>
138	142	<th>ID</th>
139	143	<td class="txt-left">
140		- <input type="file" name="" id="fileBtn">
141		- <label for="fileBtn" class="btn-2 green-btn">
142		- 파일선택
143		- </label>
	144	+ <input type="file" name="" id="fileBtn" />
	145	+ <label for="fileBtn" class="btn-2 green-btn"> 파일선택 </label>
144	146	<button type="button" class="gray-btn">등록</button>
145	147	</td>
146	148	</tr>
...	...	@@ -155,29 +157,31 @@
155	157	</div>
156	158
157	159	<div class="modal-wrap" v-if="modal_1 == true">
158		- <div class="modal-bg">
159		- </div>
	160	+ <div class="modal-bg"></div>
160	161	<div class="modal">
161	162	<p>행정동을 <span class="txt-point">등록</span>하시겠습니까?</p>
162	163	<div class="btn-wrap">
163	164	<button type="button" class="green-btn">확인</button>
164		- <button type="button" class="gray-btn" @click="modal_1 = false">취소</button>
	165	+ <button type="button" class="gray-btn" @click="modal_1 = false">
	166	+ 취소
	167	+ </button>
165	168	</div>
166	169	</div>
167	170	</div>
168	171
169	172	<div class="modal-wrap" v-if="modal_2 == true">
170		- <div class="modal-bg">
171		- </div>
	173	+ <div class="modal-bg"></div>
172	174	<div class="modal">
173	175	<p>
174		- 해당 기능은 데이터 삭제 기능입니다.<br>
175		- 데이터 삭제 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br>
	176	+ 해당 기능은 데이터 삭제 기능입니다.<br />
	177	+ 데이터 삭제 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br />
176	178	삭제를 원하시면 아래 삭제 버튼을 눌러주세요.
177	179	</p>
178	180	<div class="btn-wrap">
179	181	<button type="button" class="green-btn">삭제</button>
180		- <button type="button" class="gray-btn" @click="modal_2 = false">취소</button>
	182	+ <button type="button" class="gray-btn" @click="modal_2 = false">
	183	+ 취소
	184	+ </button>
181	185	</div>
182	186	</div>
183	187	</div>
...	...	@@ -235,12 +239,12 @@
235	239	float: right;
236	240	}
237	241
238		-.sub-title-wrap>* {
	242	+.sub-title-wrap > * {
239	243	display: inline-block;
240	244	vertical-align: middle;
241	245	}
242	246
243		-.sub-title-wrap>*:not(:last-child) {
	247	+.sub-title-wrap > *:not(:last-child) {
244	248	margin-right: 2rem;
245	249	}
246	250
...	...	@@ -254,6 +258,7 @@
254	258
255	259	.txt-left .green-btn {
256	260	margin-right: 2rem;
	261	+ /* border: 1px solid red; */
257	262	}
258	263
259	264	.btn-2 {
...	...	@@ -272,7 +277,7 @@
272	277	clear: both;
273	278	}
274	279
275		-.search-wrap .float-right form>*:not(:last-child) {
	280	+.search-wrap .float-right form > *:not(:last-child) {
276	281	margin-right: 1rem;
277	282	}
278	283
...	...	@@ -342,7 +347,7 @@
342	347	margin-top: 15px;
343	348	}
344	349
345		-.btn-wrap>*:not(:last-child) {
	350	+.btn-wrap > *:not(:last-child) {
346	351	margin-right: 15px;
347	352	}
348	353
...	...	@@ -358,7 +363,7 @@
358	363	position: absolute;
359	364	width: 100%;
360	365	height: 100%;
361		- background-color: rgba(0, 0, 0, .6);
	366	+ background-color: rgba(0, 0, 0, 0.6);
362	367	}
363	368
364	369	.modal {
...	...	@@ -382,4 +387,4 @@
382	387	.txt-point {
383	388	color: #13833b;
384	389	}
385		-</style> (파일 끝에 줄바꿈 문자 없음)
	390	+</style>

...	...	@@ -7,20 +7,20 @@
7	7	<div>
8	8	<table>
9	9	<colgroup>
10		- <col style="width: 10%;">
11		- <col style="width: 10%;">
12		- <col style="width: 30%;">
13		- <col style="width: 20%;">
14		- <col style="width: 30%;">
	10	+ <col style="width: 10%" />
	11	+ <col style="width: 10%" />
	12	+ <col style="width: 30%" />
	13	+ <col style="width: 20%" />
	14	+ <col style="width: 30%" />
15	15	</colgroup>
16	16	<tbody>
17	17	<tr>
18	18	<th colspan="2">ID</th>
19		- <td><input type="text" v-model="node.node_id"></td>
	19	+ <td><input type="text" v-model="node.node_id" /></td>
20	20	</tr>
21	21	<tr>
22	22	<th colspan="2">노드명</th>
23		- <td><input type="text" v-model="node.node_name"></td>
	23	+ <td><input type="text" v-model="node.node_name" /></td>
24	24	</tr>
25	25	<tr>
26	26	<th colspan="2">읍/면/동</th>
...	...	@@ -28,54 +28,78 @@
28	28	<td>{{ dong_nm }}</td>
29	29	</tr>
30	30	<tr>
31		- <th rowspan="2">좌표 <button type="button" class="btn-2 gray-btn" @click="[map_open = true, openMap()]">좌표수정</button></th>
	31	+ <th rowspan="2">
	32	+ 좌표
	33	+ <button
	34	+ type="button"
	35	+ class="btn-2 gray-btn"
	36	+ @click="[(map_open = true), openMap()]"
	37	+ >
	38	+ 좌표수정
	39	+ </button>
	40	+ </th>
32	41	<th class="second">위도</th>
33	42	<td>{{ node.lat }}</td>
34	43	</tr>
35	44	<tr>
36	45	<th class="second">경도</th>
37	46	<td>{{ node.lon }}</td>
38		-
39	47	</tr>
40	48	</tbody>
41	49	</table>
42	50	</div>
43	51	<div class="btn-wrap">
44		- <button type="button" class="btn-2 green-btn" @click="nodeInsertCheck">등록</button>
45		- <button type="button" class="btn-2 gray-btn" @click="nodeSelectListPage">취소</button>
	52	+ <button type="button" class="btn-2 green-btn" @click="nodeInsertCheck">
	53	+ 등록
	54	+ </button>
	55	+ <button
	56	+ type="button"
	57	+ class="btn-2 gray-btn"
	58	+ @click="nodeSelectListPage"
	59	+ >
	60	+ 취소
	61	+ </button>
46	62	</div>
47	63	</div>
48		-
49	64	</div>
50	65	<div class="modal-wrap" v-if="modal_insert == true">
51		- <div class="modal-bg">
52		- </div>
	66	+ <div class="modal-bg"></div>
53	67	<div class="modal">
54	68	<p>노드를 <span class="txt-point">등록</span>하시겠습니까?</p>
55	69	<div class="btn-wrap">
56		- <button type="button" class="green-btn" @click="nodeInsert">확인</button>
57		- <button type="button" class="gray-btn" @click="modal_insert = false">취소</button>
	70	+ <button type="button" class="green-btn" @click="nodeInsert">
	71	+ 확인
	72	+ </button>
	73	+ <button type="button" class="gray-btn" @click="modal_insert = false">
	74	+ 취소
	75	+ </button>
58	76	</div>
59	77	</div>
60	78	</div>
61	79
62	80	<div class="modal-wrap" v-if="map_open">
63		- <div class="modal-bg">
64		- </div>
	81	+ <div class="modal-bg"></div>
65	82	<div class="modalMap">
66	83	<div class="search">
67	84	<h2>교차로 검색</h2>
68		- <dongSelectList @setDongCd="setDongCd" ref="parent" :nodeHiddenCk="true" :crslk_azHiddenCk="true"></dongSelectList>
69		- <!-- @siDoGunGuSelectF="siDoGunGuSelectF" @dongSelectF="dongSelectF" @nodeSelectF="nodeSelectF"></dongSelectList> -->
	85	+ <dongSelectList
	86	+ @setDongCd="setDongCd"
	87	+ ref="parent"
	88	+ :nodeHiddenCk="true"
	89	+ :crslk_azHiddenCk="true"
	90	+ ></dongSelectList>
	91	+ <!-- @siDoGunGuSelectF="siDoGunGuSelectF" @dongSelectF="dongSelectF" @nodeSelectF="nodeSelectF"></dongSelectList> -->
70	92	</div>
71	93	<button type="button" class="green-btn" @click="searchDong">검색</button>
72		- <OpenLayers ref="open_layers"/>
73		- <label>위도 : </label>
74		- <input style="width: 20rem" type="text" v-model="map_lat" disabled/>
75		- <label>경도 : </label>
76		- <input style="width: 20rem" type="text" v-model="map_lon" disabled/>
	94	+ <OpenLayers ref="open_layers" />
	95	+ <label>위도 : </label>
	96	+ <input style="width: 20rem" type="text" v-model="map_lat" disabled />
	97	+ <label>경도 : </label>
	98	+ <input style="width: 20rem" type="text" v-model="map_lon" disabled />
77	99	<div class="btn-wrap">
78		- <button type="button" class="green-btn" @click="selectCoordinate">선택</button>
	100	+ <button type="button" class="green-btn" @click="selectCoordinate">
	101	+ 선택
	102	+ </button>
79	103	<button type="button" class="gray-btn" @click="closeMap">취소</button>
80	104	</div>
81	105	</div>
...	...	@@ -83,8 +107,8 @@
83	107	</template>
84	108
85	109	<script>
86		-import axios from 'axios';
87		-import COMMON_UTIL from '../../../resources/js/commonUtil.ts';
	110	+import axios from "axios";
	111	+import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
88	112	import OpenLayers from "../../component/OpenLayers.vue";
89	113	import {
90	114	vworldBaseLayer,
...	...	@@ -93,12 +117,12 @@
93	117	vworldHybridLayer,
94	118	vworldSatelliteLayer,
95	119	} from "../../component/OpenLayersMap.vue";
96		-import {baseStyles} from '../../component/OpenLayersStyle.vue';
97		-import dongSelectList from '../../component/dongSelectList.vue';
98		-import { transform } from 'ol/proj';
	120	+import { baseStyles } from "../../component/OpenLayersStyle.vue";
	121	+import dongSelectList from "../../component/dongSelectList.vue";
	122	+import { transform } from "ol/proj";
99	123
100	124	export default {
101		- data:() => {
	125	+ data: () => {
102	126	return {
103	127	node: {
104	128	node_id: null,
...	...	@@ -106,8 +130,8 @@
106	130	node_type: null,
107	131	lat: null,
108	132	lon: null,
109		- // updatedate: null,
110		- dong_cd: '22',
	133	+ // updatedate: null,
	134	+ dong_cd: "22",
111	135	},
112	136	dong_nm: null,
113	137	address: {},
...	...	@@ -115,27 +139,32 @@
115	139	//modal
116	140	modal_insert: false,
117	141
118		- //좌표 modal
	142	+ //좌표 modal
119	143	map_open: false,
120	144	map_lat: null,
121	145	map_lon: null,
122		-
123	146	};
124	147	},
125	148	methods: {
126		-
127	149	//좌표수정 지도 열기
128	150	async openMap() {
129		- const vm = this;
	151	+ const vm = this;
130	152
131	153	//OpenLayers 랜더링 후 접근
132	154	await vm.$nextTick();
133	155	//기본맵 세팅
134	156	vm.$refs.open_layers.setBaseMap(vworldBaseLayer);
135		-
	157	+
136	158	//행정동 레이어
137		- //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');
138		- vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.node.dong_cd);
	159	+ //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');
	160	+ vm.$refs.open_layers.addVectorLayerByUrl(
	161	+ "/common/getDongsGeoJson.json",
	162	+ "nodeMap",
	163	+ "EPSG:5181",
	164	+ baseStyles["MultiPolygon"],
	165	+ "MultiPolygon",
	166	+ vm.node.dong_cd
	167	+ );
139	168	// vm.$refs.open_layers.setZoom(11);
140	169	},
141	170
...	...	@@ -170,22 +199,33 @@
170	199	},
171	200
172	201	//지도 클릭 이벤트
173		- childClick(prop,coordinate){
174		- const vm = this;
	202	+ childClick(prop, coordinate) {
	203	+ const vm = this;
175	204	console.log(prop);
176	205	console.log(coordinate);
177		-
	206	+
178	207	// 레이어 삭제
179		- vm.$refs.open_layers.removeLayer('nodePoint');
180		-
181		- // Icon 그리기
182		- vm.$refs.open_layers.createIcon(coordinate[1],coordinate[0],'/client/resources/images/icon/fin2.png',0.3, 'nodePoint','EPSG:5181');
183		-
	208	+ vm.$refs.open_layers.removeLayer("nodePoint");
	209	+
	210	+ // Icon 그리기
	211	+ vm.$refs.open_layers.createIcon(
	212	+ coordinate[1],
	213	+ coordinate[0],
	214	+ "/client/resources/images/icon/fin2.png",
	215	+ 0.3,
	216	+ "nodePoint",
	217	+ "EPSG:5181"
	218	+ );
	219	+
184	220	//클릭위치로 이동
185	221	// this.$refs.open_layers.setCenterPosition(coordinate[0],coordinate[1],'EPSG:5181');
186	222
187	223	//좌표계 변환
188		- var changeCoordinate = transform([coordinate[0],coordinate[1]],'EPSG:5181','EPSG:4326');
	224	+ var changeCoordinate = transform(
	225	+ [coordinate[0], coordinate[1]],
	226	+ "EPSG:5181",
	227	+ "EPSG:4326"
	228	+ );
189	229	vm.map_lat = changeCoordinate[1];
190	230	vm.map_lon = changeCoordinate[0];
191	231	},
...	...	@@ -193,91 +233,106 @@
193	233	//지도 휠 사용
194	234	childWheel(coordinate) {},
195	235
196		- //좌표 선택 완료
197		- selectCoordinate() {
198		- const vm = this;
	236	+ //좌표 선택 완료
	237	+ selectCoordinate() {
	238	+ const vm = this;
199	239	vm.node.lat = vm.map_lat;
200	240	vm.node.lon = vm.map_lon;
201	241	vm.map_open = false;
202		- },
	242	+ },
203	243
204		- // 좌표수정에서 교차로 검색시 동레이어, 노드좌표 찍어주기
205		- searchDong() {
	244	+ // 좌표수정에서 교차로 검색시 동레이어, 노드좌표 찍어주기
	245	+ searchDong() {
206	246	const vm = this;
207	247	//기존 레이어 삭제
208		- vm.$refs.open_layers.removeLayer('nodeMap');
209		- vm.$refs.open_layers.removeLayer('nodePoint');
	248	+ vm.$refs.open_layers.removeLayer("nodeMap");
	249	+ vm.$refs.open_layers.removeLayer("nodePoint");
210	250	//동 레이어 그리기
211		- vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.address.dong_cd);
	251	+ vm.$refs.open_layers.addVectorLayerByUrl(
	252	+ "/common/getDongsGeoJson.json",
	253	+ "nodeMap",
	254	+ "EPSG:5181",
	255	+ baseStyles["MultiPolygon"],
	256	+ "MultiPolygon",
	257	+ vm.address.dong_cd
	258	+ );
212	259	axios({
213		- url: '/dong/dongCenter.json',
214		- method: 'post',
	260	+ url: "/dong/dongCenter.json",
	261	+ method: "post",
215	262	headers: {
216		- 'Content-Type': "application/json; charset=UTF-8"
	263	+ "Content-Type": "application/json; charset=UTF-8",
217	264	},
218		- data: {'dong_cd' : vm.address.dong_cd}
219		- }).then(function (response) {
220		- console.log("searchNode response : ",response.data);
221		- if(vm.address.guGun_dong_cd === null) {
222		- vm.$refs.open_layers.setZoom(11);
223		- } else if(vm.address.dong_dong_cd === null) {
224		- vm.$refs.open_layers.setZoom(12.5);
225		- } else {
226		- vm.$refs.open_layers.setZoom(16);
227		- }
228		- vm.$refs.open_layers.setCenterPosition(response.data.dong_lat,response.data.dong_lon,'EPSG:5181');
229		- vm.dong_nm = response.data.dong_nm;
230		- console.log("vm.dong_nm : ", vm.dong_nm);
231		- }).catch(function (error) {
232		- console.log("serchNode error : ", error);
233		- alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");
	265	+ data: { dong_cd: vm.address.dong_cd },
234	266	})
235		- },
	267	+ .then(function (response) {
	268	+ console.log("searchNode response : ", response.data);
	269	+ if (vm.address.guGun_dong_cd === null) {
	270	+ vm.$refs.open_layers.setZoom(11);
	271	+ } else if (vm.address.dong_dong_cd === null) {
	272	+ vm.$refs.open_layers.setZoom(12.5);
	273	+ } else {
	274	+ vm.$refs.open_layers.setZoom(16);
	275	+ }
	276	+ vm.$refs.open_layers.setCenterPosition(
	277	+ response.data.dong_lat,
	278	+ response.data.dong_lon,
	279	+ "EPSG:5181"
	280	+ );
	281	+ vm.dong_nm = response.data.dong_nm;
	282	+ console.log("vm.dong_nm : ", vm.dong_nm);
	283	+ })
	284	+ .catch(function (error) {
	285	+ console.log("serchNode error : ", error);
	286	+ alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");
	287	+ });
	288	+ },
236	289
237	290	//노드 등록
238	291	nodeInsert() {
239	292	const vm = this;
240	293	vm.node.dong_cd = vm.address.dong_dong_cd;
241		-
	294	+
242	295	axios({
243		- url: '/node/nodeInsert.json',
244		- method: 'post',
	296	+ url: "/node/nodeInsert.json",
	297	+ method: "post",
245	298	headers: {
246		- 'Content-Type': "application/json; charset=UTF-8"
	299	+ "Content-Type": "application/json; charset=UTF-8",
247	300	},
248		- data: vm.node
249		- }).then(function (response) {
250		- console.log("nodeInsert - response : ", response.data);
251		- let result = response.data;
252		- if ( result > 0) {
253		- alert("노드 등록을 완료 하였습니다.")
254		- vm.modal_insert = false;
255		- vm.nodeSelectListPage();
256		- } else {
257		- alert("등록 실패, 관리자에게 문의해주세요.")
258		- vm.modal_insert = false;
259		- }
260		- }).catch(function (error) {
261		- console.log("nodeInsert - error : ", error);
262		- alert("노드등록 오류, 관리자에게 문의해주세요.")
263		- vm.modal_insert = false;
	301	+ data: vm.node,
264	302	})
	303	+ .then(function (response) {
	304	+ console.log("nodeInsert - response : ", response.data);
	305	+ let result = response.data;
	306	+ if (result > 0) {
	307	+ alert("노드 등록을 완료 하였습니다.");
	308	+ vm.modal_insert = false;
	309	+ vm.nodeSelectListPage();
	310	+ } else {
	311	+ alert("등록 실패, 관리자에게 문의해주세요.");
	312	+ vm.modal_insert = false;
	313	+ }
	314	+ })
	315	+ .catch(function (error) {
	316	+ console.log("nodeInsert - error : ", error);
	317	+ alert("노드등록 오류, 관리자에게 문의해주세요.");
	318	+ vm.modal_insert = false;
	319	+ });
265	320	},
266	321
267	322	//등록 유효성 검사
268		- nodeInsertCheck: function() {
	323	+ nodeInsertCheck: function () {
269	324	if (COMMON_UTIL.isEmpty(this.node.node_id) === false) {
270		- alert('노드ID를 입력해주세요.');
	325	+ alert("노드ID를 입력해주세요.");
271	326	return false;
272	327	}
273	328
274	329	if (COMMON_UTIL.isEmpty(this.node.node_name) === false) {
275		- alert("노드명을 입력해주세요.")
	330	+ alert("노드명을 입력해주세요.");
276	331	return false;
277	332	}
278	333
279	334	this.modal_insert = true;
280		- },
	335	+ },
281	336
282	337	//dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
283	338	setDongCd(value) {
...	...	@@ -290,14 +345,14 @@
290	345	},
291	346
292	347	nodeSelectListPage() {
293		- this.$router.push({ path: '/NodeManagement.page'})
294		- }
	348	+ this.$router.push({ path: "/NodeManagement.page" });
	349	+ },
295	350	},
296	351	watch: {},
297	352	computed: {},
298	353	components: {
299	354	OpenLayers: OpenLayers,
300		- dongSelectList: dongSelectList
	355	+ dongSelectList: dongSelectList,
301	356	},
302	357	mounted() {
303	358	console.log("Main4 mounted");
...	...	@@ -335,12 +390,12 @@
335	390	float: right;
336	391	}
337	392
338		-.sub-title-wrap>* {
	393	+.sub-title-wrap > * {
339	394	display: inline-block;
340	395	vertical-align: middle;
341	396	}
342	397
343		-.sub-title-wrap>*:not(:last-child) {
	398	+.sub-title-wrap > *:not(:last-child) {
344	399	margin-right: 2rem;
345	400	}
346	401
...	...	@@ -354,6 +409,7 @@
354	409
355	410	.txt-left .green-btn {
356	411	margin-right: 2rem;
	412	+ /* border: 1px solid red; */
357	413	}
358	414
359	415	.btn-2 {
...	...	@@ -372,7 +428,7 @@
372	428	clear: both;
373	429	}
374	430
375		-.search-wrap .float-right form>*:not(:last-child) {
	431	+.search-wrap .float-right form > *:not(:last-child) {
376	432	margin-right: 1rem;
377	433	}
378	434
...	...	@@ -387,7 +443,9 @@
387	443	border-left: none;
388	444	border-right: none;
389	445	}
390		-td input{width: -webkit-fill-available;}
	446	+td input {
	447	+ width: -webkit-fill-available;
	448	+}
391	449	table th {
392	450	padding: 15px;
393	451	color: #fff;
...	...	@@ -442,17 +500,15 @@
442	500	margin-top: 15px;
443	501	}
444	502
445		-.btn-wrap>*:not(:last-child) {
	503	+.btn-wrap > *:not(:last-child) {
446	504	margin-right: 15px;
447	505	}
448		-
449		-
450	506
451	507	.modal-bg {
452	508	position: absolute;
453	509	width: 100%;
454	510	height: 100%;
455		- background-color: rgba(0, 0, 0, .6);
	511	+ background-color: rgba(0, 0, 0, 0.6);
456	512	}
457	513	.modal {
458	514	position: absolute;
...	...	@@ -486,4 +542,4 @@
486	542	.txt-point {
487	543	color: #13833b;
488	544	}
489		-</style> (파일 끝에 줄바꿈 문자 없음)
	545	+</style>

...	...	@@ -1,11 +1,14 @@
1	1	<template>
2	2	<div class="wrap">
3		- <div >
4		-
5		- <h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">표준노드 관리</h2>
6		- <div style="margin-left: 2rem;" class="m-b3">시스템 관리 > <em class="green2 lined">표준노드 관리</em> </div>
7		-
8		- <!--
	3	+ <div>
	4	+ <h2 style="color: #10833b" class="flex gap">
	5	+ <img src="../../../resources/images/bar.png" alt="" />표준노드 관리
	6	+ </h2>
	7	+ <div style="margin-left: 2rem" class="m-b3">
	8	+ 시스템 관리 > <em class="green2 lined">표준노드 관리</em>
	9	+ </div>
	10	+
	11	+ <!--
9	12	<div class="search-wrap clear-fix">
10	13	<div class=" flex-end gap">
11	14	<select v-model="nodeListSearch.searchType">
...	...	@@ -30,27 +33,45 @@
30	33	</div>
31	34	-->
32	35
33		- <!-- 검색 -->
34		- <div class="de_Search" >
35		- <table class="troubleTable">
36		- <tbody>
37		- <tr>
38		- <th>검색</th>
39		- <td colspan="7" >
	36	+ <!-- 검색 -->
	37	+ <div class="de_Search">
	38	+ <table class="troubleTable">
	39	+ <tbody>
	40	+ <tr>
	41	+ <th>검색</th>
	42	+ <td colspan="7">
40	43	<select v-model="nodeListSearch.searchType">
41	44	<option value="null">검색조건</option>
42	45	<option value="node_id">ID</option>
43	46	<option value="node_nm">노드명</option>
44	47	</select>
45		- <input type="text" placeholder="검색어를 입력 해주세요." v-model="nodeListSearch.searchText" @keyup.enter="nodeSelectList" style="width: 78%;" />
46		- <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="nodeSelectList()">검색</button>
47		- </td>
48		- </tr>
49		- </tbody>
50		- </table>
51		- </div>
	48	+ <input
	49	+ type="text"
	50	+ placeholder="검색어를 입력 해주세요."
	51	+ v-model="nodeListSearch.searchText"
	52	+ @keyup.enter="nodeSelectList"
	53	+ style="width: 78%"
	54	+ />
	55	+ <button
	56	+ type="button"
	57	+ class="green-btn"
	58	+ style="
	59	+ margin-left: 5px;
	60	+ padding: 5px;
	61	+ width: 10rem;
	62	+ float: right;
	63	+ "
	64	+ @click="nodeSelectList()"
	65	+ >
	66	+ 검색
	67	+ </button>
	68	+ </td>
	69	+ </tr>
	70	+ </tbody>
	71	+ </table>
	72	+ </div>
52	73
53		- <div class="pc">
	74	+ <div class="pc">
54	75	<table>
55	76	<colgroup>
56	77	<col style="width: 5%" />
...	...	@@ -63,14 +84,14 @@
63	84	</colgroup>
64	85	<thead>
65	86	<tr>
66		- <th >순번</th>
67		- <th >ID</th>
68		- <th >노드위치</th>
69		- <th >노드명</th>
70		- <th >위도</th>
71		- <th >경도</th>
72		- <th >등록일</th>
73		- </tr>
	87	+ <th>순번</th>
	88	+ <th>ID</th>
	89	+ <th>노드위치</th>
	90	+ <th>노드명</th>
	91	+ <th>위도</th>
	92	+ <th>경도</th>
	93	+ <th>등록일</th>
	94	+ </tr>
74	95	</thead>
75	96	<tbody>
76	97	<tr
...	...	@@ -113,12 +134,14 @@
113	134	</div>
114	135	<div class="pc">
115	136	<div class="sub-title-wrap flex-between m-b">
116		- <h3 class="sub-title ">표준노드 정보관리</h3>
	137	+ <h3 class="sub-title">표준노드 정보관리</h3>
117	138	<!-- <button class="btn-2 green-btn" @click="nodeInsertPage">신규등록</button>-->
118		- <button class="btn-2 green-btn s-btn " @click="createNode()">신규등록</button>
	139	+ <button class="btn-2 green-btn s-btn" @click="createNode()">
	140	+ 신규등록
	141	+ </button>
119	142	</div>
120		- <div class="de_Search">
121		- <table class="troubleTable" style="margin-bottom:5px;">
	143	+ <div class="de_Search">
	144	+ <table class="troubleTable" style="margin-bottom: 5px">
122	145	<colgroup>
123	146	<col style="width: 10%" />
124	147	<col style="width: 10%" />
...	...	@@ -177,7 +200,7 @@
177	200	type="button"
178	201	class="btn-2 green-btn s-btn"
179	202	@click="modal_update = true"
180		- style="width:auto;"
	203	+ style="width: auto"
181	204	>
182	205	수정
183	206	</button>
...	...	@@ -186,7 +209,7 @@
186	209	type="button"
187	210	class="btn-2 green-btn s-btn"
188	211	@click="nodeInsertCheck"
189		- style="width:auto;"
	212	+ style="width: auto"
190	213	>
191	214	등록
192	215	</button>
...	...	@@ -194,7 +217,7 @@
194	217	type="button"
195	218	class="btn-2 gray-btn s-btn"
196	219	@click="modal_delete = true"
197		- style="width:auto;"
	220	+ style="width: auto"
198	221	>
199	222	삭제
200	223	</button>
...	...	@@ -215,17 +238,41 @@
215	238	<th>첨부파일</th>
216	239	<td class="txt-left flex gap">
217	240	<input type="file" name="" id="fileBtn" />
218		- <label for="fileBtn" class="btn-2 green-btn s-btn" style="height: 3rem; text-align: center; line-height: 3rem;"> 파일선택 </label>
219		- <button type="button" class="gray-btn s-btn" @click="nodeExcelInsert">
	241	+ <label
	242	+ for="fileBtn"
	243	+ class="btn-2 green-btn s-btn"
	244	+ style="height: 3rem; text-align: center; line-height: 3rem"
	245	+ >
	246	+ 파일선택
	247	+ </label>
	248	+ <button
	249	+ type="button"
	250	+ class="gray-btn s-btn"
	251	+ @click="nodeExcelInsert"
	252	+ >
220	253	등록
221	254	</button>
222	255	</td>
223	256	</tr>
224		- <tr>
	257	+ <tr style="position: relative">
225	258	<th>양식다운로드</th>
226	259	<td class="txt-left flex gap">
227		- <div>Excel을 이용한 노드등록은 양식에 따라 작성 후 등록해주시기 바랍니다.</div>
228		- <button type="button" class="btn-2 green-btn s-btn" @click="nodeInsertForm">양식다운로드</button>
	260	+ <div width="-webkit-fill-available" style="font-size: 13px">
	261	+ Excel을 이용한 노드등록은 양식에 따라 작성 후 등록해주시기
	262	+ 바랍니다.
	263	+ </div>
	264	+ <button
	265	+ type="button"
	266	+ class="btn-2 green-btn s-btn green-btn-s"
	267	+ style="
	268	+ width: 125px !important;
	269	+ position: absolute;
	270	+ right: -1rem;
	271	+ "
	272	+ @click="nodeInsertForm"
	273	+ >
	274	+ 양식다운로드
	275	+ </button>
229	276	</td>
230	277	</tr>
231	278	</tbody>
...	...	@@ -233,7 +280,6 @@
233	280	</div>
234	281	</div>
235	282	</div>
236		-
237	283
238	284	<div class="modal-wrap" v-if="modal_update == true">
239	285	<div class="modal-bg"></div>
...	...	@@ -299,26 +345,37 @@
299	345	</div>
300	346	</div>
301	347	-->
302		- <div class="modal-wrap" v-if="map_open" >
303		- <div class="modal-bg">
304		- </div>
305		- <div class="modalMap" style="min-width: 850px;">
306		- <div class="de_Search" >
	348	+ <div class="modal-wrap" v-if="map_open">
	349	+ <div class="modal-bg"></div>
	350	+ <div class="modalMap" style="min-width: 850px">
	351	+ <div class="de_Search">
307	352	<table class="troubleTable">
308		- <tbody>
309		- <tr>
310		- <th>검색</th>
311		- <td colspan="7" class="gap" >
312		- <dongSelectListSimple
313		- @setDongCd="setDongCd"
314		- ref="parent"
315		- :nodeHiddenCk="true"
316		- :crslk_azHiddenCk="true"
317		- ></dongSelectListSimple>
318		- <button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="searchDong">검색</button>
319		- </td>
	353	+ <tbody>
	354	+ <tr>
	355	+ <th>검색</th>
	356	+ <td colspan="7" class="gap">
	357	+ <dongSelectListSimple
	358	+ @setDongCd="setDongCd"
	359	+ ref="parent"
	360	+ :nodeHiddenCk="true"
	361	+ :crslk_azHiddenCk="true"
	362	+ ></dongSelectListSimple>
	363	+ <button
	364	+ type="button"
	365	+ class="green-btn"
	366	+ style="
	367	+ margin-left: 5px;
	368	+ padding: 5px;
	369	+ width: 10rem;
	370	+ float: right;
	371	+ "
	372	+ @click="searchDong"
	373	+ >
	374	+ 검색
	375	+ </button>
	376	+ </td>
320	377	</tr>
321		- </tbody>
	378	+ </tbody>
322	379	</table>
323	380	</div>
324	381
...	...	@@ -340,16 +397,21 @@
340	397	<div class="flex-between">
341	398	<div class="flex gap">
342	399	<label>위도 : </label>
343		- <input style="width: 20rem;margin-right:1rem;" type="text" v-model="map_lat" disabled />
	400	+ <input
	401	+ style="width: 20rem; margin-right: 1rem"
	402	+ type="text"
	403	+ v-model="map_lat"
	404	+ disabled
	405	+ />
344	406	<label>경도 : </label>
345	407	<input style="width: 20rem" type="text" v-model="map_lon" disabled />
346	408	</div>
347	409	</div>
348		- <div class="btn-wrap" style="margin-top: 4rem; text-align: center;">
	410	+ <div class="btn-wrap" style="margin-top: 4rem; text-align: center">
349	411	<button type="button" class="green-btn s-btn" @click="selectCoordinate">
350	412	선택
351	413	</button>
352		- <button type="button" class="gray-btn s-btn" @click="closeMap">
	414	+ <button type="button" class="gray-btn s-btn" @click="closeMap">
353	415	취소
354	416	</button>
355	417	</div>
...	...	@@ -440,21 +502,46 @@
440	502	await vm.$nextTick();
441	503	//수정 전 좌표 modal에서 보여주기
442	504	if (!vm.createMode) {
443		- console.log("위도경도 넣기!!!!!!!")
	505	+ console.log("위도경도 넣기!!!!!!!");
444	506	vm.map_lat = vm.node.lat;
445	507	vm.map_lon = vm.node.lon;
446	508	}
447	509	//기본맵 세팅
448	510	vm.$refs.open_layers.setBaseMap(vworldBaseLayer);
449		- //노드위치로 이동
450		- if(!vm.createMode){
451		- vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.node.dong_cd);
452		- vm.$refs.open_layers.setCenterPosition(vm.node.lat,vm.node.lon,'EPSG:4326');
453		- vm.$refs.open_layers.createIcon(vm.node.lat,vm.node.lon,'/client/resources/images/icon/fin2.png',0.3, 'nodePoint','EPSG:4326');
	511	+ //노드위치로 이동
	512	+ if (!vm.createMode) {
	513	+ vm.$refs.open_layers.addVectorLayerByUrl(
	514	+ "/common/getDongsGeoJson.json",
	515	+ "nodeMap",
	516	+ "EPSG:5181",
	517	+ baseStyles["MultiPolygon"],
	518	+ "MultiPolygon",
	519	+ vm.node.dong_cd
	520	+ );
	521	+ vm.$refs.open_layers.setCenterPosition(
	522	+ vm.node.lat,
	523	+ vm.node.lon,
	524	+ "EPSG:4326"
	525	+ );
	526	+ vm.$refs.open_layers.createIcon(
	527	+ vm.node.lat,
	528	+ vm.node.lon,
	529	+ "/client/resources/images/icon/fin2.png",
	530	+ 0.3,
	531	+ "nodePoint",
	532	+ "EPSG:4326"
	533	+ );
454	534	vm.$refs.open_layers.setZoom(19);
455		- }else{
456		- vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.address.dong_cd);
457		- }
	535	+ } else {
	536	+ vm.$refs.open_layers.addVectorLayerByUrl(
	537	+ "/common/getDongsGeoJson.json",
	538	+ "nodeMap",
	539	+ "EPSG:5181",
	540	+ baseStyles["MultiPolygon"],
	541	+ "MultiPolygon",
	542	+ vm.address.dong_cd
	543	+ );
	544	+ }
458	545	},
459	546
460	547	closeMap() {
...	...	@@ -506,38 +593,52 @@
506	593	searchDong() {
507	594	const vm = this;
508	595	//기존 레이어 삭제
509		- vm.$refs.open_layers.removeLayer('nodeMap');
510		- vm.$refs.open_layers.removeLayer('nodePoint');
	596	+ vm.$refs.open_layers.removeLayer("nodeMap");
	597	+ vm.$refs.open_layers.removeLayer("nodePoint");
511	598	//동 레이어 그리기
512		- vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.address.dong_cd);
	599	+ vm.$refs.open_layers.addVectorLayerByUrl(
	600	+ "/common/getDongsGeoJson.json",
	601	+ "nodeMap",
	602	+ "EPSG:5181",
	603	+ baseStyles["MultiPolygon"],
	604	+ "MultiPolygon",
	605	+ vm.address.dong_cd
	606	+ );
513	607	axios({
514		- url: '/dong/dongCenter.json',
515		- method: 'post',
	608	+ url: "/dong/dongCenter.json",
	609	+ method: "post",
516	610	headers: {
517		- 'Content-Type': "application/json; charset=UTF-8"
	611	+ "Content-Type": "application/json; charset=UTF-8",
518	612	},
519		- data: {'dong_cd' : vm.address.dong_cd}
520		- }).then(function (response) {
521		- console.log("searchNode response : ",response.data);
522		- if(vm.address.guGun_dong_cd === null) {
523		- vm.$refs.open_layers.setZoom(11);
524		- } else if(vm.address.dong_dong_cd === null) {
525		- vm.$refs.open_layers.setZoom(12.5);
526		- } else {
527		- vm.$refs.open_layers.setZoom(16);
528		- }
529		- vm.$refs.open_layers.setCenterPosition(response.data.dong_lat,response.data.dong_lon,'EPSG:5181');
530		- vm.dong_fullName = response.data.sido_nm +
531		- " " +
532		- response.data.sigungu_nm +
533		- " " +
534		- response.data.dong_nm;
535		- console.log("vm.dong_nm : ", vm.dongdong_fullName_nm);
536		- }).catch(function (error) {
537		- console.log("serchNode error : ", error);
538		- alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");
	613	+ data: { dong_cd: vm.address.dong_cd },
539	614	})
540		- },
	615	+ .then(function (response) {
	616	+ console.log("searchNode response : ", response.data);
	617	+ if (vm.address.guGun_dong_cd === null) {
	618	+ vm.$refs.open_layers.setZoom(11);
	619	+ } else if (vm.address.dong_dong_cd === null) {
	620	+ vm.$refs.open_layers.setZoom(12.5);
	621	+ } else {
	622	+ vm.$refs.open_layers.setZoom(16);
	623	+ }
	624	+ vm.$refs.open_layers.setCenterPosition(
	625	+ response.data.dong_lat,
	626	+ response.data.dong_lon,
	627	+ "EPSG:5181"
	628	+ );
	629	+ vm.dong_fullName =
	630	+ response.data.sido_nm +
	631	+ " " +
	632	+ response.data.sigungu_nm +
	633	+ " " +
	634	+ response.data.dong_nm;
	635	+ console.log("vm.dong_nm : ", vm.dongdong_fullName_nm);
	636	+ })
	637	+ .catch(function (error) {
	638	+ console.log("serchNode error : ", error);
	639	+ alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");
	640	+ });
	641	+ },
541	642
542	643	//노드 엑셀 업로드
543	644	nodeExcelInsert() {
...	...	@@ -557,10 +658,12 @@
557	658	.then(function (response) {
558	659	console.log("nodeExcelInsert - response : ", response.data);
559	660	let insert = response.data.insert;
560		- if (insert > 0 ) {
	661	+ if (insert > 0) {
561	662	alert(insert + "건의 노드 등록완료.");
562	663	} else {
563		- alert("업로드 파일의 모든 데이터는 이미 ID가 존재하거나 등록할 수 없는 데이터 입니다.");
	664	+ alert(
	665	+ "업로드 파일의 모든 데이터는 이미 ID가 존재하거나 등록할 수 없는 데이터 입니다."
	666	+ );
564	667	}
565	668	vm.nodeSelectList();
566	669	})
...	...	@@ -645,12 +748,12 @@
645	748	}
646	749
647	750	if (COMMON_UTIL.isEmpty(this.node.lat) === false) {
648		- alert("위도를 입력해주세요.")
	751	+ alert("위도를 입력해주세요.");
649	752	return false;
650	753	}
651	754
652	755	if (COMMON_UTIL.isEmpty(this.node.lon) === false) {
653		- alert("경도를 입력해주세요.")
	756	+ alert("경도를 입력해주세요.");
654	757	return false;
655	758	}
656	759
...	...	@@ -765,7 +868,7 @@
765	868	},
766	869
767	870	//노드 엑셀등록 양식다운로드
768		- nodeInsertForm: function() {
	871	+ nodeInsertForm: function () {
769	872	const vm = this;
770	873	axios({
771	874	url: "/node/nodeExcelForm.json",
...	...	@@ -773,15 +876,19 @@
773	876	herders: {
774	877	"Content-Type": "application/json; charset=UTF-8",
775	878	},
776		- responseType: 'arraybuffer',
	879	+ responseType: "arraybuffer",
777	880	})
778	881	.then(function (response) {
779	882	console.log("errorExcel - response : ", response.data);
780		- const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers["content-type"] }));
	883	+ const url = window.URL.createObjectURL(
	884	+ new Blob([response.data], {
	885	+ type: response.headers["content-type"],
	886	+ })
	887	+ );
781	888	const link = document.createElement("a");
782	889	link.href = url;
783	890	let today = COMMON_UTIL.today();
784		- link.download = '[' + today + ']' + '노드등록양식';
	891	+ link.download = "[" + today + "]" + "노드등록양식";
785	892	link.click();
786	893	window.URL.revokeObjectURL(url);
787	894	})
...	...	@@ -817,7 +924,7 @@
817	924	this.createMode = true;
818	925	this.map_disabled = false;
819	926	this.dong_fullName = null;
820		- }
	927	+ },
821	928	},
822	929	watch: {},
823	930	computed: {},
...	...	@@ -829,7 +936,6 @@
829	936	mounted() {
830	937	console.log("Main4 mounted");
831	938	this.nodeSelectList();
832		-
833	939	},
834	940	};
835	941	</script>
...	...	@@ -1012,7 +1118,10 @@
1012	1118	height: auto;
1013	1119	width: -webkit-fill-available;
1014	1120	}
1015		-.modalMap .chart {height:70%; margin: 0rem;}
	1121	+.modalMap .chart {
	1122	+ height: 70%;
	1123	+ margin: 0rem;
	1124	+}
1016	1125
1017	1126	.modalMap {
1018	1127	position: absolute;
...	...	@@ -1035,5 +1144,4 @@
1035	1144	.txt-point {
1036	1145	color: #13833b;
1037	1146	}
1038		-
1039	1147	</style>

...	...	@@ -1,9 +1,13 @@
1	1	{
2	2	"name": "crosswalk",
	3	+ "version": "1.0.0",
3	4	"lockfileVersion": 2,
4	5	"requires": true,
5	6	"packages": {
6	7	"": {
	8	+ "name": "crosswalk",
	9	+ "version": "1.0.0",
	10	+ "license": "MIT",
7	11	"dependencies": {
8	12	"@amcharts/amcharts5": "^5.4.1",
9	13	"@amcharts/amcharts5-geodata": "^5.1.1",

Delete comment