hrms-bangkok/hrms-checkin
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fixed code

Browse source
This commit is contained in:
Warunee Tamkoo 2026-04-30 16:15:46 +07:00
parent 0a6fc4a974
commit 4d821b0ab6
1 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/AscGISMap.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
computed,
ref, ref,
shallowRef, shallowRef,
onBeforeUnmount, onBeforeUnmount,
@ -51,6 +52,9 @@ const poiPlaceName = ref<string>(props.initialPOI || '') // ชื่อพื
const mapView = shallowRef<any>(null) // Store mapView reference for cleanup (use shallowRef to avoid reactivity issues) const mapView = shallowRef<any>(null) // Store mapView reference for cleanup (use shallowRef to avoid reactivity issues)
const desktopMapContainerRef = ref<HTMLElement | null>(null) const desktopMapContainerRef = ref<HTMLElement | null>(null)
const mobileMapContainerRef = ref<HTMLElement | null>(null) const mobileMapContainerRef = ref<HTMLElement | null>(null)
const isMapVisible = computed(
() => !!mapView.value && !mapView.value.destroyed && isMapInitialized.value
)
// Unique container ID for each component instance to avoid conflicts // Unique container ID for each component instance to avoid conflicts
const mapContainerId = `mapViewDisplay_${Math.random() const mapContainerId = `mapViewDisplay_${Math.random()
@ -596,8 +600,8 @@ defineExpose({
</script> </script>
<template> <template>
<!-- Loading skeleton - show while map is initializing --> <!-- Loading skeleton - show until map is visible -->
<div v-if="isInitializing && !isMapInitialized" class="col-12"> <div v-if="!isMapVisible" class="col-12">
<q-skeleton <q-skeleton
:height="$q.screen.gt.xs ? '35vh' : '45px'" :height="$q.screen.gt.xs ? '35vh' : '45px'"
width="100%" width="100%"
@ -610,6 +614,7 @@ defineExpose({
bordered bordered
flat flat
class="col-12 bg-grey-2 shadow-0" class="col-12 bg-grey-2 shadow-0"
:class="{ 'map-hidden': !isMapVisible }"
:style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'" :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
> >
<div v-if="$q.screen.gt.xs"> <div v-if="$q.screen.gt.xs">
@ -679,4 +684,8 @@ defineExpose({
.expanAS.q-item__section--avatar { .expanAS.q-item__section--avatar {
min-width: 40px !important; min-width: 40px !important;
} }
.map-hidden {
visibility: hidden;
}
</style> </style>