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"
></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 />
<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",
"nodeMap",
"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;
}
this.modal_insert = true;
},
//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;
/* border: 1px solid red; */
}
.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, 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>