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 >
<h2 style="color: #10833b" class="flex gap"><img src="../../../resources/images/bar.png" alt="">표준노드 관리</h2>
<div style="margin-left: 2rem;" class="m-b3">시스템 관리 > <em class="green2 lined">표준노드 관리</em> </div>
<!--
<div class="search-wrap clear-fix">
<div class=" flex-end gap">
<select v-model="nodeListSearch.searchType">
<option value="null">검색조건</option>
<option value="node_id">ID</option>
<option value="node_nm">노드명</option>
</select>
<input
type="search"
placeholder="검색어를 입력 해주세요."
v-model="nodeListSearch.searchText"
@keyup.enter="nodeSelectList"
/>
<button
type="button"
class="btn-2 green-btn"
@click="nodeSelectList()"
>
검색
</button>
</div>
</div>
-->
<!-- 검색 -->
<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>
<div class="pc">
<table>
<colgroup>
<col style="width: 5%" />
<col style="width: 15%" />
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 10%" />
<col style="width: 10%" />
<col style="width: 20%" />
</colgroup>
<thead>
<tr>
<th >순번</th>
<th >ID</th>
<th >노드위치</th>
<th >노드명</th>
<th >위도</th>
<th >경도</th>
<th >등록일</th>
</tr>
</thead>
<tbody>
<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 v-if="item.sigungu_nm === null" data-titel="노드위치">
{{ item.sido_nm }}
</td>
<td v-else-if="item.dong_nm === null" data-titel="노드위치">
{{ item.sido_nm + " " + item.sigungu_nm }}
</td>
<td v-else data-titel="노드위치">
{{ 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="등록날짜">{{ yyyymmdd(item.reg_dt) }}</td>
</tr>
</tbody>
</table>
</div>
<div class="mobile flex gap" style="font-size: 20px">
<img src="../../../resources/images/warning.png" alt="" />PC에서 확인할
수 있습니다.
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="nodeListSearch.currentPage"
:per-page="nodeListSearch.perPage"
:total-count="nodeListCount"
:max-range="5"
:click="nodeSelectList"
/>
</div>
</div>
<div class="pc">
<div class="sub-title-wrap flex-between m-b">
<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>
</div>
<div class="de_Search">
<table class="troubleTable" style="margin-bottom:5px;">
<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 v-if="!createMode">{{ node.node_id }}</td>
<td v-else><input type="text" v-model="node.node_id" /></td>
<th>등록일</th>
<td>{{ yyyymmdd(node.reg_dt) }}</td>
</tr>
<tr>
<th colspan="2">노드명</th>
<td><input type="text" v-model="node.node_name" /></td>
<th>수정일</th>
<td>{{ yyyymmdd(node.mdfcn_dt) }}</td>
</tr>
<tr>
<th colspan="2">노드위치</th>
<!-- <td><input type="text" v-model="node.node_type"></td> -->
<td>{{ dong_fullName }}</td>
<th>등록자</th>
<td>{{ nullHyphen(node.rgtr_id) }}</td>
</tr>
<tr>
<th rowspan="2">
좌표
<button
type="button"
class="btn-2 gray-btn s-btn"
:disabled="map_disabled"
@click="[(map_open = true), openMap()]"
>
좌표수정
</button>
</th>
<th class="second">위도</th>
<td><input type="text" v-model="node.lat" /></td>
<th>수정자</th>
<td>{{ nullHyphen(node.mdfr_id) }}</td>
</tr>
<tr>
<th class="second">경도</th>
<td><input type="text" v-model="node.lon" /></td>
</tr>
</tbody>
</table>
</div>
<div class="btn-wrap flex-center">
<button
v-if="!createMode"
type="button"
class="btn-2 green-btn s-btn"
@click="modal_update = true"
style="width:auto;"
>
수정
</button>
<button
v-else
type="button"
class="btn-2 green-btn s-btn"
@click="nodeInsertCheck"
style="width:auto;"
>
등록
</button>
<button
type="button"
class="btn-2 gray-btn s-btn"
@click="modal_delete = true"
style="width:auto;"
>
삭제
</button>
</div>
</div>
<div class="pc">
<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>첨부파일</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">
등록
</button>
</td>
</tr>
<tr>
<th>양식다운로드</th>
<td class="txt-left flex gap">
<div>Excel을 이용한 노드등록은 양식에 따라 작성 후 등록해주시기 바랍니다.</div>
<button type="button" class="btn-2 green-btn s-btn" @click="nodeInsertForm">양식다운로드</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-wrap" v-if="modal_update == true">
<div class="modal-bg"></div>
<div class="modal">
<p v-if="!createMode">
수정하신 정보를 <span class="txt-point">저장</span>하시겠습니까?
</p>
<p v-else>
작성하신 정보를 <span class="txt-point">등록</span>하시겠습니까?
</p>
<div class="btn-wrap">
<button
v-if="!createMode"
type="button"
class="green-btn"
@click="nodeUpdate"
>
확인
</button>
<button v-else type="button" class="green-btn" @click="nodeInsert">
확인
</button>
<button type="button" class="gray-btn" @click="modal_update = false">
취소
</button>
</div>
</div>
</div>
<div class="modal-wrap" v-if="modal_delete == true">
<div class="modal-bg"></div>
<div class="modal">
<p>
해당 기능은 데이터 삭제 기능입니다.<br />
데이터 삭제 후, 조회에서 해당 데이터를 확인할 수 없습니다.<br />
삭제를 원하시면 아래 삭제 버튼을 눌러주세요.
</p>
<div class="btn-wrap">
<button type="button" class="green-btn" @click="nodeDelete">
삭제
</button>
<button type="button" class="gray-btn" @click="modal_delete = false">
취소
</button>
</div>
</div>
</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>
-->
<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>
</tr>
</tbody>
</table>
</div>
<!--
<div class="search flex-center gap" style="gap:2rem;">
<h2>교차로 검색</h2>
<dongSelectList
@setDongCd="setDongCd"
ref="parent"
:nodeHiddenCk="true"
:crslk_azHiddenCk="true"
></dongSelectList>
<button type="button" class="green-btn s-btn" @click="searchDong">
검색
</button>
</div>
-->
<div class="chart"><OpenLayers ref="open_layers" /></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 />
<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;">
<button type="button" class="green-btn s-btn" @click="selectCoordinate">
선택
</button>
<button type="button" class="gray-btn s-btn" @click="closeMap">
취소
</button>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
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 dongSelectListSimple from "../../component/dongSelectListSimple.vue";
import { transform } from "ol/proj";
export default {
data: () => {
return {
// 검색 객체
nodeListSearch: {
currentPage: 1,
perPage: 10,
searchType: null,
searchText: null,
createMode: false,
},
// 선택된 노드
node: {
node_id: null,
node_name: null,
node_type: null,
lat: null,
lon: null,
reg_dt: null,
rgtr_id: null,
mdfcn_dt: null,
mdfr_id: null,
dong_cd: null,
},
// 디폴트 노드 정보
node_default: {
node_id: null,
node_name: null,
node_type: null,
lat: null,
lon: null,
reg_dt: null,
rgtr_id: null,
mdfcn_dt: null,
mdfr_id: null,
dong_cd: null,
dong_nm: null,
sido_nm: null,
sigungu_nm: null,
},
// 주소
address: {},
nodeListCount: 0,
nodeList: [],
nodeIdx: 0,
dong_fullName: null,
//modal
modal_update: false,
modal_delete: false,
//좌표 modal
map_disabled: true,
map_open: false,
map_lat: null,
map_lon: null,
};
},
methods: {
//좌표수정 지도 열기
async openMap() {
const vm = this;
//OpenLayers 랜더링 후 접근
await vm.$nextTick();
//수정 전 좌표 modal에서 보여주기
if (!vm.createMode) {
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');
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);
}
},
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"
);
//좌표계 변환
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_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() {
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;
if (insert > 0 ) {
alert(insert + "건의 노드 등록완료.");
} else {
alert("업로드 파일의 모든 데이터는 이미 ID가 존재하거나 등록할 수 없는 데이터 입니다.");
}
vm.nodeSelectList();
})
.catch(function (error) {
console.log("nodeExcelInsert - error", error);
alert("파일 등록 오류, 관리자에게 문의해주세요.");
});
},
//노드목록 조회
nodeSelectList() {
const vm = this;
axios({
url: "/node/nodeSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.nodeListSearch,
})
.then(function (response) {
console.log("nodeSelectList - response : ", response.data);
vm.nodeListCount = response.data.nodeListCount;
vm.nodeList = response.data.nodeList;
vm.nodeIdx =
vm.nodeListCount -
(vm.nodeListSearch.currentPage - 1) * vm.nodeListSearch.perPage;
})
.catch(function (error) {
console.log("nodeSelectList - error : ", error);
alert("노드 목록 조회 오류, 관리자에게 문의해주세요.");
});
},
//노드 등록
nodeInsert() {
const vm = this;
vm.node.dong_cd = vm.address.dong_dong_cd;
console.log(vm.node);
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_update = false;
vm.nodeSelectList();
vm.node = Object.assign({}, vm.node_default);
vm.dong_fullName = null;
vm.id_disabled = false;
} else {
alert("등록 실패, 관리자에게 문의해주세요.");
vm.modal_insert = false;
}
})
.catch(function (error) {
console.log("nodeInsert - error : ", error);
alert("노드등록 오류, 관리자에게 문의해주세요.");
vm.modal_update = 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;
}
if (COMMON_UTIL.isEmpty(this.node.lat) === false) {
alert("위도를 입력해주세요.")
return false;
}
if (COMMON_UTIL.isEmpty(this.node.lon) === false) {
alert("경도를 입력해주세요.")
return false;
}
this.modal_update = true;
},
//노드 수정
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) {
let result = response.data;
if (result > 0) {
alert("노드 수정을 완료 하였습니다.");
vm.modal_update = false;
vm.nodeSelectList();
vm.node = Object.assign({}, vm.node_default);
vm.dong_fullName = null;
vm.id_disabled = false;
} else {
alert("수정 실패, 관리자에게 문의해주세요.");
vm.modal_update = false;
}
})
.catch(function (error) {
console.log("nodeUpdate - error : ", error);
alert("노드수정 오류, 관리자에게 문의해주세요.");
vm.modal_update = false;
});
},
//노드 삭제
nodeDelete() {
const vm = this;
axios({
url: "/node/nodeDelete.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.node,
})
.then(function (response) {
console.log("nodeDelete - response : ", response.data);
let result = response.data;
if (result > 0) {
alert("노드 삭제를 완료 하였습니다.");
vm.modal_delete = false;
vm.nodeSelectList();
vm.node = Object.assign({}, vm.node_default);
vm.dong_fullName = null;
} else {
alert("삭제 실패, 관리자에게 문의해주세요.");
vm.modal_delete = false;
}
})
.catch(function (error) {
console.log("nodeDelete - error : ", error);
alert("노드삭제 오류, 관리자에게 문의해주세요.");
vm.modal_delete = false;
});
},
//노드 상세 조회
nodeSelectOne(nodeOne) {
const vm = this;
// 신규정보 등록중일때
if (this.createMode) {
if (
!confirm("등록중인 노드정보는 삭제됩니다. 계속진행 하시겠습니까?")
) {
return false;
}
this.createMode = false;
}
axios({
url: "/node/nodeSelectOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: nodeOne,
})
.then(function (response) {
console.log("nodeSelectOne - response : ", response.data);
vm.node = response.data;
vm.map_disabled = false;
vm.dong_fullName =
response.data.sido_nm +
" " +
response.data.sigungu_nm +
" " +
response.data.dong_nm;
})
.catch(function (error) {
console.log("nodeSelectOne - error : ", error);
});
},
//노드 엑셀등록 양식다운로드
nodeInsertForm: function() {
const vm = this;
axios({
url: "/node/nodeExcelForm.json",
method: "post",
herders: {
"Content-Type": "application/json; charset=UTF-8",
},
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 link = document.createElement("a");
link.href = url;
let today = COMMON_UTIL.today();
link.download = '[' + today + ']' + '노드등록양식';
link.click();
window.URL.revokeObjectURL(url);
})
.catch(function (error) {
console.log("errorExcel - error : ", error);
alert("양식다운로드 오류, 관리자에게 문의해주세요.");
});
},
//dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
setDongCd(value) {
console.log("value : ", value);
this.address = value;
},
//날짜에 '-' 넣기
yyyymmdd(date) {
return COMMON_UTIL.yyyymmdd(date);
},
//null값 '-' 치환
nullHyphen(data) {
return COMMON_UTIL.nullHyphen(data);
},
nodeInsertPage() {
this.$router.push({ path: "/NodeAddForm.page" });
},
// 노드정보 추가
createNode: function () {
this.node = Object.assign({}, this.node_default);
this.createMode = true;
this.map_disabled = false;
this.dong_fullName = null;
}
},
watch: {},
computed: {},
components: {
PaginationButton: PaginationButton,
OpenLayers: OpenLayers,
dongSelectListSimple: dongSelectListSimple,
},
mounted() {
console.log("Main4 mounted");
this.nodeSelectList();
},
};
</script>
<style scoped>
@media (max-width: 479px) {
.mobile {
display: flex !important;
margin: 3rem 0;
}
.main-warp > div {
display: block !important;
padding: 1rem;
}
}
.wrap {
width: 80%;
margin: 25px auto;
}
.wrap h2 {
font-size: 2.5rem;
}
.search-wrap {
margin-bottom: 30px;
}
.search-wrap input,
.search-wrap select {
height: 22.5px;
border-radius: 3px;
border: 1px solid #949292;
}
.float-left {
font-size: 20px;
}
.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: #f3f3f3;
}
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: 2rem;
z-index: 2;
background-color: #fff;
border-radius: 1rem;
text-align: center;
}
.modalMap .search {
height: auto;
width: -webkit-fill-available;
}
.modalMap .chart {height:70%; margin: 0rem;}
.modalMap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 65%;
padding-bottom: 0px !important;
height: 80%;
padding: 5rem;
z-index: 2;
background-color: #fff;
border-radius: 1rem;
}
.modal .btn-wrap {
text-align: center;
}
.txt-point {
color: #13833b;
}
</style>