File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="wrap">
<div>
<div class="sub-title-wrap">
<h3 class="sub-title">표준노드 등록</h3>
</div>
<div>
<table>
<colgroup>
<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>
</tr>
<tr>
<th colspan="2">노드명</th>
<td><input type="text" v-model="node.node_name"></td>
</tr>
<tr>
<th colspan="2">읍/면/동</th>
<!-- <td><input type="text" v-model="node.node_type"></td> -->
<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 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>
</div>
</div>
</div>
<div class="modal-wrap" v-if="modal_insert == true">
<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>
</div>
</div>
</div>
<div class="modal-wrap" v-if="map_open">
<div class="modal-bg">
</div>
<div class="modalMap">
<div class="search">
<h2>교차로 검색</h2>
<dongSelectList @setDongCd="setDongCd" ref="parent" :nodeHiddenCk="true" :crslk_azHiddenCk="true"
@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/>
<div class="btn-wrap">
<button type="button" class="green-btn" @click="selectCoordinate">선택</button>
<button type="button" class="gray-btn" @click="closeMap">취소</button>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../resources/js/commonUtil.ts';
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';
export default {
data:() => {
return {
node: {
node_id: null,
node_name: null,
node_type: null,
lat: null,
lon: null,
// updatedate: null,
dong_cd: '22',
},
dong_nm: null,
address: {},
//modal
modal_insert: false,
//좌표 modal
map_open: false,
map_lat: null,
map_lon: null,
};
},
methods: {
//좌표수정 지도 열기
async openMap() {
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','multPolygonLayer','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon',vm.node.dong_cd);
// vm.$refs.open_layers.setZoom(11);
},
//시/도/군/구 Select 선택시 바로 위치 이동
siDoGunGuSelectF: function (event) {
//기존 layer 지우기
this.$refs.open_layers.removeLayerAll();
//기본 지도 layer 그리기 + 해당 위치로 이동
this.$refs.open_layers.setBaseMap(vworldBaseLayer,event.target.value);
this.$refs.open_layers.setZoom(this.address.zoomLevel);
//polygon 그리기
this.$refs.open_layers.addVectorLayerByUrl('/common/getDongsGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
},
//행정동 Select 선택시 바로 위치 이동
dongSelectF: function (event) {
//기존 layer 지우기
this.$refs.open_layers.removeLayerAll();
//기본 지도 layer 그리기 + 해당 위치로 이동
this.$refs.open_layers.setBaseMap(vworldBaseLayer,event.target.value);
this.$refs.open_layers.setZoom(this.address.zoomLevel);
//polygon 그리기
this.$refs.open_layers.addVectorLayerByUrl('/common/getDongGeoJson.json', 'multPolygonLayer', 'EPSG:5181', baseStyles['MultiPolygon'], 'MultiPolygon', this.address.dong_cd);
},
closeMap() {
const vm = this;
vm.$refs.open_layers.removeLayerAll();
vm.dong_nm = null;
vm.map_open = false;
},
//지도 클릭 이벤트
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');
//클릭위치로 이동
// 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];
},
//지도 휠 사용
childWheel(coordinate) {},
//좌표 선택 완료
selectCoordinate() {
const vm = this;
vm.node.lat = vm.map_lat;
vm.node.lon = vm.map_lon;
vm.map_open = false;
},
// 좌표수정에서 교차로 검색시 동레이어, 노드좌표 찍어주기
searchDong() {
const vm = this;
//기존 레이어 삭제
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);
axios({
url: '/dong/dongCenter.json',
method: 'post',
headers: {
'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("검색에 실패 하였습니다. 관리자에게 문의하세요.");
})
},
//노드 등록
nodeInsert() {
const vm = this;
vm.node.dong_cd = vm.address.dong_dong_cd;
axios({
url: '/node/nodeInsert.json',
method: 'post',
headers: {
'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;
})
},
//등록 유효성 검사
nodeInsertCheck: function() {
if (COMMON_UTIL.isEmpty(this.node.node_id) === false) {
alert('노드ID를 입력해주세요.');
return false;
}
if (COMMON_UTIL.isEmpty(this.node.node_name) === false) {
alert("노드명을 입력해주세요.")
return false;
}
},
//dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
setDongCd(value) {
this.address = value;
},
//날짜에 '-' 넣기
dateHyphen(date) {
return COMMON_UTIL.dateHyphen(date);
},
nodeSelectListPage() {
this.$router.push({ path: '/NodeManagement.page'})
}
},
watch: {},
computed: {},
components: {
OpenLayers: OpenLayers,
dongSelectList: dongSelectList
},
mounted() {
console.log("Main4 mounted");
},
};
</script>
<style scoped>
.wrap {
width: 155rem;
margin: 100px auto;
}
.search-wrap {
margin-bottom: 30px;
}
.search-wrap input,
.search-wrap select {
height: 22.5px;
border-radius: 3px;
border: 1px solid #949292;
}
.float-left {
float: left;
}
.float-left .sub-title,
.sub-title-wrap .sub-title {
font-size: 20px;
}
.float-right {
float: right;
}
.sub-title-wrap>* {
display: inline-block;
vertical-align: middle;
}
.sub-title-wrap>*:not(:last-child) {
margin-right: 2rem;
}
.full {
width: 100%;
}
.txt-left {
text-align: left;
}
.txt-left .green-btn {
margin-right: 2rem;
}
.btn-2 {
display: inline-block;
padding: 0.3rem 2rem;
font-size: 13.333px;
}
label.btn-2 {
cursor: pointer;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
}
.search-wrap .float-right form>*:not(:last-child) {
margin-right: 1rem;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
th,
td {
border-left: none;
border-right: none;
}
td input{width: -webkit-fill-available;}
table th {
padding: 15px;
color: #fff;
background-color: #13833b;
border-bottom: 1px solid #e5e5dd;
}
table td {
padding: 10px;
border-bottom: 1px solid #e5e5dd;
}
table tbody th.second {
background-color: #31a257;
}
table tr:nth-child(odd) {
background-color: #f7f6f6;
}
table tr:nth-child(even) {
background-color: #fdfdf2;
}
.bottom-wrap {
position: relative;
padding: 1rem 0;
}
.pg-wrap {
text-align: center;
}
.pg-item {
display: inline-block;
padding: 10px;
color: #949292;
}
.pg-item.prev,
.pg-item.next,
.pg-item.active {
color: #13833b;
}
#fileBtn::file-selector-button {
display: none;
}
.btn-wrap {
text-align: right;
margin-top: 15px;
}
.btn-wrap>*:not(:last-child) {
margin-right: 15px;
}
.modal-bg {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 350px;
padding: 5rem;
z-index: 2;
background-color: #fff;
border-radius: 1rem;
text-align: center;
}
.modalMap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
padding: 5rem;
z-index: 2;
background-color: #fff;
border-radius: 1rem;
}
.modal .btn-wrap {
text-align: center;
}
.txt-point {
color: #13833b;
}
</style>