-/**

- * @author : 최정우

- * @since : 2022.09.20

- * @dscription : React를 활용한 Client단 구현의 시작점(Index) Component 입니다.

- */

-

- import React from 'react';

- import ReactDOM from 'react-dom/client';

- 

- //Application Root component

- import App from './pages/App.jsx';

- 

- const root = ReactDOM.createRoot(document.getElementById('root'));

- root.render(<App/>);

- 

- 

- (No newline at end of file)

-import React from 'react';

-

-function Footer () {

-    return (

-        <div>푸터입니다.</div>

-    )

-}

-

-export default Footer;(No newline at end of file)

-import React from 'react';

-

-function Header () {

-

-    const [headerData, setHeaderData] = React.useState(0);

-    console.log('Header headerData : ', headerData);

-

-    function headerDataChange () {

-        for (let i = 0; i < 10; i++) {

-            setHeaderData(headerData + 1);

-        }

-        console.log('function headerDataChange headerData : ', headerData);

-    }

-

-    

-

-    return (

-        <div>

-            헤더입니다.

-            <button onClick={headerDataChange}>+1</button>

-        </div>

-    )

-}

-

-export default Header;(No newline at end of file)

-        </li>

-        <li style="color: #3fb52d"><router-link to="/Mypage.page">

-          마이페이지

-        </router-link></li>

-            <li style="color: #3fb52d"><router-link to="/Login.page">

-      <div class="sub_menu">

-        <router-link to="/Mypage.page">

-          <span>마이페이지</span>

-        </router-link>

-

-  <!-- 가로 467px 일때 실행되는 template 평소엔 display:none -->

-

-  <!-- <div class="submenu" v-show="showSubmenu">/// -->

-  <!-- <ul class="submenu" >

-      <li>

-        <router-link to="/Introduction.page">

-            <a href="#">플랫폼 소개<i class="fa fa-chevron-down"></i></a>

-          </router-link>

-          <ul>

-            <li>스마트 횡단보도란?</li>

-          </ul>

-        </li>

-        <li>

-          <router-link to="/Analysis.page">

-            <a href="#">현황관제<i class="fa fa-chevron-down"></i></a>

-          </router-link>

-          <ul>

-            <li>실시간 현황관제</li>

-            <li>상황발생 정보조회</li>

-            <li>장애 발생 정보조회</li>

-            <li>횡단보도 목록조회</li>

-          </ul>

-        </li>

-        <li>

-          <router-link to="/Analysis.page">

-            <a href="#">통계분석<i class="fa fa-chevron-down"></i></a>

-          </router-link>

-          <ul>

-            <li>통계분석</li>

-          </ul>

-        </li>

-        <li>

-          <router-link to="/CrosswalkInsert.page">

-            <a href="#">횡단보도 관리<i class="fa fa-chevron-down"></i></a>

-          </router-link>

-          <ul>

-            <li>횡단보도 등록</li>

-            <li>횡단보도 조회</li>

-          </ul>

-        </li>

-        <li>

-          <router-link to="/UserManagement.page">

-            <a href="#">시스템 관리<i class="fa fa-chevron-down"></i></a>

-          </router-link>

-          <ul>

-            <li>사용자 관리</li>

-            <li>유지보수 담당자 관리</li>

-            <li>표준노드 관리</li>

-            <li>행정동 관리</li>

-            <li>데이터 수집기록</li>

-          </ul>

-        </li>

-        <li>

-          <router-link to="/Mypage.page"> 마이페이지 </router-link>

-        </li>

-        <li>

-          <router-link to="/Login.page">

-            <a href="#">로그인</a>

-          </router-link>

-        </li>

-      </ul> -->

-import React from 'react';

-import { BrowserRouter, Link } from 'react-router-dom';

-

-function Menu () {

-    return (

-        <>

-            <div>

-                <BrowserRouter>

-                    <Link to="/">Home</Link>

-                </BrowserRouter>

-            </div>

-        </>

-        

-    )

-}

-

-export default Menu;(No newline at end of file)

-/**

- * @author : 최정우

- * @since : 2022.09.20

- * @dscription : React를 활용한 Client단 구현 대상인 Application의 시작점(Index) Component 입니다.

- */

- import React from 'react';

-

- //Application의 Route 정보를 관리하는 Component

- import AppRoute from './AppRoute.jsx';

- 

- //Test Layout

- import Header from '../layout/Header.jsx';

- import Menu from '../layout/Menu.jsx';

- import Footer from '../layout/Footer.jsx';

- 

- function App() {

-     return (

-         <div id="App">

-             <Header></Header>

-             <Menu></Menu>

-             <div id="pages">

-                 <AppRoute/>

-             </div>

-             <Footer></Footer>

-         </div>

-     )

- }

- 

- export default App;(No newline at end of file)

-            axios({

-            });

-    Footer: Footer,

-        //vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)

-        this.$router.beforeEach((to, from, next) => {

-            this.loginUserSelectOne(function (store) {

-                //로그인 유무(로그인 정보가 있으면 True, 없으면 False)

-                let isLogin = (store.loginUser != null && store.loginUser['user_id'] != null);

-                //로그인 상태 일 때

-                if (isLogin == true) {

-                    //로그인 페이지 이동은 못하게 함

-                    if (to.path == '/Login.page') {

-                        next(false);

-                    } else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함

-                        next();

-                    }

-                } else {//로그인 상태가 아닐 때

-                    //로그인 페이지에서 다른 페이지로 이동하려고 할 때, 이동 못하게 함

-                    if (from.path == '/Login.page') {

-                        next(false);

-                    } else {//로그인 페이지 이외의 페이지에서, 페이지 이동을 하려고 할 때

-                        //로그인 페이지로 이동은 무조건 가능

-                        if (to.path == "/Login.page") {

-                            next();

-                        } else {//로그인 페이지로 무조건 이동

-                            next("/Login.page");

-                        }

-                    }

-                }

-                /* if (to.path == "/") {

-                    if (isLogin == true) {

-                        next();

-                    } else {

-                        next("/login.page");

-                    }

-                } else {

-                    if (isLogin == true) {

-                        if (to.path == "/login.page") {

-                            next(from.path);

-                        } else {

-                            next();

-                        }

-                    } else {

-                        if (to.path == "/login.page") {

-                            next();

-                        } else {

-                            next("/login.page");

-                        }

-                    }

-                } */

-            });

-        });

-/**

- * @author : 최정우

- * @since : 2022.09.20

- * @dscription : Application의 Route 정보를 관리하는 Component 입니다.

- */

- import React from 'react';

- //react router 라이브러리 import

- import { BrowserRouter, Routes, Route } from 'react-router-dom';

- 

- import Main from './main/Main.jsx';

- 

- function AppRoute () {

-     return (

-         <BrowserRouter>

-             <Routes>

-                 <Route path="/" element={<Main/>}></Route>

-             </Routes>

-         </BrowserRouter>

-     )

- }

- 

- export default AppRoute;(No newline at end of file)

-          <h3 class="sub-title">표준노드 목록</h3>

-          <select v-model="nodeListSearch.searchType">

-            <option value="node_id">ID</option>

-            <option value="node_nm">노드명</option>

-          <input type="search" placeholder="검색어를 입력 해주세요." v-model="nodeListSearch.searchText" @keyup.enter="nodeSelectList"/>

-          <button type="button" class="btn-2 green-btn" @click="nodeSelectList()">검색</button>

-      <div>

-            <col style="width: 15%;">

-            <col style="width: 10%;">

-            <col style="width: 20%;">

-              <th rowspan="2">순번</th>

-              <th rowspan="2">ID</th>

-              <th rowspan="2">노드위치</th>

-              <th rowspan="2">노드명</th>

-              <th colspan="2">좌표</th>

-            <!-- <th rowspan="2">등록일</th> --> 

-            </tr>

-            <tr>

-              <th>위도</th>

-              <th>경도</th>

-            <tr v-for="(item, idx) in nodeList" :key="idx" @click="nodeSelectOne(item)">

-              <td data-title="NO">{{ nodeIdx - idx }}</td>

-              <td data-title="ID">{{ item.node_id }}</td>

-              <td data-title="노드위치">{{ item.sido_nm + " " + item.sigungu_nm + " " + item.dong_nm }}</td>

-              <td data-title="노드명">{{ item.node_name }}</td>

-              <td data-title="위도">{{ item.lat }}</td>

-              <td data-title="경도">{{ item.lon }}</td>

-             <!-- <td data-title="등록날짜">{{ dateHyphen(item.updatedate) }}</td> --> 

-        v-model:currentPage="nodeListSearch.currentPage"

-        :per-page="nodeListSearch.perPage" :total-count="nodeListCount" :max-range="5"

-        :click="nodeSelectList" />

-      <div class="sub-title-wrap">

-        <h3 class="sub-title">표준노드 정보관리</h3>

-        <button class="btn-2 green-btn" @click="nodeInsertPage">신규등록</button>

-      <div>

-          <tbody>

-              <th colspan="2">ID</th>

-              <td>{{ node.node_id }}</td>

-              <td>{{ node.updatedate }}</td>

-              <th colspan="2">노드명</th>

-              <td><input type="text" v-model="node.node_name"></td>

-              <th>수정일</th>

-              <td></td>

-              <th colspan="2">노드위치</th>

-              <td>{{ dong_fullName }}</td>

-              <th>등록자</th>

-            </tr>

-            <tr>

-              <th rowspan="2">좌표  <button type="button" class="btn-2 gray-btn" :disabled=" map_disabled === true" @click="[map_open = true, openMap()]">좌표수정</button></th>

-              <th class="second">위도</th>

-              <td>{{ node.lat }}</td>

-              <th>수정자</th>

-              <td></td>

-            </tr>

-            <tr>

-              <th class="second">경도</th>

-              <td>{{ node.lon }}</td>

-             

-            </tr>

-        <button type="button" class="btn-2 green-btn" @click="modal_update = true">수정</button>

-        <button type="button" class="btn-2 gray-btn" @click="modal_delete = true">삭제</button>

-      </div>

-    </div>

-

-    <div>

-      <div class="sub-title-wrap">

-        <h3 class="sub-title">파일 업로드</h3>

-      </div>

-      <div>

-        <table>

-          <colgroup>

-            <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>

-                <button type="button" class="gray-btn" @click="nodeExcelInsert">등록</button>

-              </td>

-            </tr>

-            <tr>

-              <th>양식다운로드</th>

-              <td></td>

-            </tr>

-          </tbody>

-        </table>

-  </div>

-

-  <div class="modal-wrap" v-if="map_open">

-    <div class="modal-bg">

-    </div>

-    <div class="modalMap">

-        <h2>좌표 선택</h2>

-        <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/>

-          <label>노드명 : </label>

-          <input style="width: 20rem" type="text" v-model="node.node_name" disabled/>

-          <button type="button" class="green-btn" @click="selectCoordinate">선택</button>

-        <button type="button" class="gray-btn" @click="closeMap">취소</button>

-      <OpenLayers  ref="open_layers"/>

-    </div>

-  </div>

-import OpenLayers from "../../component/OpenLayers.vue";

-import {

-  vworldBaseLayer,

-  vworldGrayLayer,

-  vworldMidnightLayer,

-  vworldHybridLayer,

-  vworldSatelliteLayer,

-} from "../../component/OpenLayersMap.vue";

-import {baseStyles} from '../../component/OpenLayersStyle.vue';

-import dongSelectList from '../../component/dongSelectList.vue';

-import { transform } from 'ol/proj';

-      nodeListSearch: {

-        searchText: null

-

-        lon: null,

-      //  updatedate: null,

-

-      nodeList: [],

-

-

-    //좌표수정 지도 열기

-    async openMap() {

-      const vm  = this;

-

-      //OpenLayers 랜더링 후 접근

-      await vm.$nextTick();

-      //수정 전 좌표 modal에서 보여주기

-      vm.map_lat = vm.node.lat;

-      vm.map_lon = vm.node.lon;

-      //기본맵 세팅

-      vm.$refs.open_layers.setBaseMap(vworldBaseLayer);

-      

-      //행정동 레이어

-      //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label');    

-      vm.$refs.open_layers.addVectorLayerByUrl('/node/getNodeGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.node.dong_cd);

-

-      //노드위치로 이동

-      vm.$refs.open_layers.removeLayer('nodePoint');

-      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/fin.png',0.3, 'nodePoint','EPSG:4326');

-      vm.$refs.open_layers.setZoom(19);

-    },

-    

-

-    closeMap() {

-      const vm = this;

-      vm.$refs.open_layers.removeLayerAll();

-      vm.map_open = false;

-    },

-

-    //지도 클릭 이벤트

-    childClick(prop,coordinate){        

-      const vm = this; 

-      console.log(prop);

-      console.log("coordinate",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');

-      

-      //클릭위치로 이동

-      //  this.$refs.open_layers.setCenterPosition(coordinate[0],coordinate[1],'EPSG:5181');

-

-      //좌표계 변환

-      var changeCoordinate = transform([coordinate[0],coordinate[1]],'EPSG:5181','EPSG:4326');

-      vm.map_lat = changeCoordinate[1];

-      vm.map_lon = changeCoordinate[0];

-    },

-

-     //좌표 선택 완료

-     selectCoordinate() {

-      const vm = this; 

-      vm.node.lat = vm.map_lat;

-      vm.node.lon = vm.map_lon;

-      vm.map_open = false;

-     },

-

-     // 좌표수정에서 교차로 검색시 동레이어, 노드좌표 찍어주기

-    //  searchNode() {

-    //   const vm = this;

-    //   //기존 레이어 삭제

-    //   vm.$refs.open_layers.removeLayer('nodeMap');

-    //   vm.$refs.open_layers.removeLayer('nodePoint');

-    //   //동 레이어 그리기

-    //   vm.$refs.open_layers.addVectorLayerByUrl('/common/getDongGeoJson.json','nodeMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.address.dong_dong_cd);

-    //   axios({

-    //     url: '/node/nodeSelectOne.json',

-    //     method: 'post',

-    //     headers: {

-    //       'Content-Type': "application/json; charset=UTF-8"

-    //     },

-    //     data: {'node_id' : vm.address.node_id}

-    //   }).then(function (response) {

-    //     console.log("searchNode response : ",response.data);

-    //     vm.$refs.open_layers.createIcon(response.data.lat,response.data.lon,'/client/resources/images/icon/fin2.png',0.3, 'nodePoint','EPSG:4326');

-    //     vm.$refs.open_layers.setCenterPosition(response.data.lat,response.data.lon,'EPSG:4326');

-    //     vm.$refs.open_layers.zoomChange(19);

-

-    //   }).catch(function (error) {

-    //     console.log("serchNode error : ", error);

-    //     alert("검색에 실패 하였습니다. 관리자에게 문의하세요.");

-    //   })

-    //  },

-

-    //노드 엑셀 업로드

-    nodeExcelInsert() {

-      const vm = this;

-      var form = new FormData();

-      var file = document.getElementById("fileBtn");;

-      console.log(file.files[0]);

-      form.append("file", file.files[0]);

-      axios({

-        url: '/node/nodeExcelRead.json',

-        method: 'post',

-        hearders: {

-          'Content-Type': "multipart/form-data",

-        },

-        data: form

-      }).then(function (response) {

-        console.log("nodeExcelInsert - response : ", response.data);

-        let insert = response.data.insert;

-        let error = response.data.error;

-        if (insert > 0 && error > 0) {

-          alert(insert + "건의 노드 등록완료, " + error + "건은 이미 ID가 존재하는 데이터 입니다.")

-          vm.nodeSelectList();

-        } else if(insert === 0) {

-          alert("업로드 파일의 모든 데이터(" + error + "건)는 이미 ID가 존재하는 데이터 입니다.")

-          vm.nodeSelectList();

-        } else if(insert > 0 && error === 0) {

-          alert(insert + "건의 노드 등록완료.")

-          vm.nodeSelectList();

-        }

-      }).catch(function (error) {

-        console.log("nodeExcelInsert - error", error);

-        alert("파일 등록 오류, 관리자에게 문의해주세요.")

-      })

-    },

-

-    nodeSelectList() {

-        url: '/node/nodeSelectList.json',

-        method: 'post',

-        data: vm.nodeListSearch

-      }).then(function (response) {

-        vm.nodeListCount = response.data.nodeListCount;

-        vm.nodeList = response.data.nodeList;

-        vm.nodeIdx = vm.nodeListCount-(vm.nodeListSearch.currentPage-1)*vm.nodeList.length;

-    //노드 수정

-    nodeUpdate() {

-      const vm = this;

-      if(vm.address.dong_dong_cd != null) {

-        vm.node.dong_cd = vm.address.dong_dong_cd

-      };

-      axios({

-        url: '/node/nodeUpdate.json',

-        method: 'post',

-        headers: {

-          'Content-Type': "application/json; charset=UTF-8"

-        },

-        data: vm.node

-      }).then(function (response) {

-        console.log("nodeUpdate - response : ", response.data);

-        let result = response.data;

-        if( result > 0) {

-          alert("노드 수정을 완료 하였습니다.");

-          vm.modal_update = false;

-          vm.nodeSelectList();

-          vm.node = {

-            node_id: null,

-            node_name: null,

-            node_type: null,

-            lat: null,

-            lon: null,

-          //  updatedate: null,