주소 지도 추가
This commit is contained in:
yoon
parent
cd5d525575
commit
99d95cf5a1
@ -26,25 +26,57 @@
|
||||
</div>
|
||||
<!-- 주소 -->
|
||||
<div class="d-flex flex-column flex-sm-row align-items-center pb-2">
|
||||
<i class="bx bxs-map"></i>
|
||||
<div class="ms-2">주소</div>
|
||||
<div class="ms-12">{{ address }}</div>
|
||||
<div class="d-flex" @click.stop="isPopoverVisible = !isPopoverVisible">
|
||||
<i
|
||||
class="bx bxs-map cursor-pointer"
|
||||
ref="mapIconRef"
|
||||
></i>
|
||||
<div class="ms-2">주소</div>
|
||||
</div>
|
||||
<div class="ms-12 position-relative">
|
||||
{{ address }} {{ addressdtail }}
|
||||
<!-- 팝오버 -->
|
||||
<div
|
||||
v-if="isPopoverVisible"
|
||||
class="position-absolute w-100 map text-end"
|
||||
>
|
||||
<button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
|
||||
<div class="card">
|
||||
<div class="card-body p-1">
|
||||
<KakaoMap
|
||||
v-if="coordinates"
|
||||
:lat="coordinates.lat"
|
||||
:lng="coordinates.lng"
|
||||
:draggable="false"
|
||||
class="w-100 h-px-200"
|
||||
>
|
||||
<KakaoMapMarker
|
||||
:lat="coordinates.lat"
|
||||
:lng="coordinates.lng"
|
||||
/>
|
||||
</KakaoMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctCol} !important;`" @click.stop="openModal">log</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CenterModal :display="isModalOpen" @close="closeModal" >
|
||||
<CenterModal :display="isModalOpen" @close="closeModal">
|
||||
<template #title> Log </template>
|
||||
<template #body>
|
||||
<div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData">
|
||||
<div class="ms-4 mt-2 border p-3" v-if="logData">
|
||||
<p class="mb-1">{{ logData.createDate }}</p>
|
||||
<strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
|
||||
<strong>[{{ logData.creator }}] 프로젝트 등록</strong>
|
||||
</div>
|
||||
|
||||
<div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData?.updateDate">
|
||||
<p class="mb-1">{{ logData.updateDate }}</p>
|
||||
<strong>[{{ logData.updater }}] 프로젝트 수정</strong>
|
||||
<div class="log-item" v-if="logData?.updateDate">
|
||||
<div class="ms-4 mt-2 border p-3">
|
||||
<p class="mb-1">{{ logData.updateDate }}</p>
|
||||
<strong>[{{ logData.updater }}] 프로젝트 수정</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -55,10 +87,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref } from 'vue';
|
||||
import { defineProps, onMounted, ref } from 'vue';
|
||||
import UserList from '@c/user/UserList.vue';
|
||||
import CenterModal from '@c/modal/CenterModal.vue';
|
||||
import $api from '@api';
|
||||
import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
@ -83,6 +116,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
addressdtail: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
projctSeq: {
|
||||
type: Number,
|
||||
required: false
|
||||
@ -98,13 +135,13 @@ defineEmits(['click']);
|
||||
const isModalOpen = ref(false);
|
||||
const logData = ref(null);
|
||||
|
||||
const isPopoverVisible = ref(false);
|
||||
const mapIconRef = ref(null);
|
||||
const coordinates = ref(null);
|
||||
|
||||
const fetchLogData = async () => {
|
||||
try {
|
||||
const response = await $api.get(`project/log/${props.projctSeq}`);
|
||||
logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
|
||||
} catch (error) {
|
||||
console.error('로그 정보 조회 실패:', error);
|
||||
}
|
||||
const response = await $api.get(`project/log/${props.projctSeq}`);
|
||||
logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
|
||||
};
|
||||
|
||||
const openModal = async () => {
|
||||
@ -116,5 +153,32 @@ const closeModal = () => {
|
||||
isModalOpen.value = false;
|
||||
};
|
||||
|
||||
|
||||
// 주소를 좌표로 변환하는 함수
|
||||
const convertAddressToCoordinates = () => {
|
||||
const geocoder = new window.kakao.maps.services.Geocoder();
|
||||
|
||||
geocoder.addressSearch(props.address, (result, status) => {
|
||||
if (status === window.kakao.maps.services.Status.OK) {
|
||||
coordinates.value = {
|
||||
lat: parseFloat(result[0].y),
|
||||
lng: parseFloat(result[0].x)
|
||||
};
|
||||
} else {
|
||||
// 기본 좌표 설정 (본사)
|
||||
coordinates.value = {
|
||||
lat: 37.2108651707078,
|
||||
lng: 127.089445559923
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 컴포넌트 마운트 시 주소 변환
|
||||
onMounted(() => {
|
||||
convertAddressToCoordinates();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -17,7 +17,8 @@
|
||||
:description="post.PROJCTDES"
|
||||
:strdate="post.PROJCTSTR"
|
||||
:enddate="post.PROJCTEND"
|
||||
:address="post.PROJCTARR + ' ' + post.PROJCTDTL"
|
||||
:address="post.PROJCTARR"
|
||||
:addressdtail="post.PROJCTDTL"
|
||||
:projctSeq="post.PROJCTSEQ"
|
||||
:projctCol="post.projctcolor"
|
||||
/>
|
||||
@ -258,6 +259,7 @@ const handleAddressUpdate = addressData => {
|
||||
postcode.value = addressData.postcode;
|
||||
};
|
||||
|
||||
// 프로젝트 등록
|
||||
const handleCreate = async () => {
|
||||
nameAlert.value = name.value.trim() === '';
|
||||
addressAlert.value = address.value.trim() === '';
|
||||
@ -330,6 +332,7 @@ const updateAddress = (addressData) => {
|
||||
};
|
||||
};
|
||||
|
||||
// 프로젝트 수정
|
||||
const handleUpdate = () => {
|
||||
if (!hasChanges.value) {
|
||||
toastStore.onToast('변경된 내용이 없습니다.', 'e');
|
||||
@ -345,7 +348,7 @@ const handleUpdate = () => {
|
||||
projctZip: selectedProject.value.PROJCTZIP,
|
||||
projctStr: selectedProject.value.PROJCTSTR,
|
||||
projctEnd: selectedProject.value.PROJCTEND || null,
|
||||
projctDes: selectedProject.value.PROJCTDES,
|
||||
projctDes: selectedProject.value.PROJCTDES || null,
|
||||
projctUmb: user.value.name,
|
||||
originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
|
||||
}).then(res => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user