<template>
|
<div class="h-[60vh] relative" ref="mapContainerRef">
|
<!-- 原始地图容器 -->
|
<BasicMap
|
ref="mapRef"
|
:isFullscreen="isFullscreen"
|
class="h-full"
|
:data="data"
|
@markerClick="markerClick"
|
@closeInfoWindow="closeInfoWindow"
|
@toggleFullScreen="toggleFullScreen"
|
/>
|
|
<!-- Teleport 全屏地图 -->
|
<Teleport to=".layout-parent">
|
<Transition name="fullscreen">
|
<div v-if="isRenderFullscreen" v-show="isFullscreen" class="absolute inset-0 z-50 w-full h-full">
|
<div ref="fullscreenContainer" class="h-full"></div>
|
|
<div class="absolute bottom-0 w-full">
|
<EquipCurve
|
v-model:isShow="chartDlgIsShow"
|
class="opacity-90"
|
:data="equipCurveMapRow"
|
:quotaChartCol="data?.quota_chart?.col"
|
height="15rem"
|
:tableHeight="240"
|
/>
|
</div>
|
<SmallChat class="absolute bottom-0 right-[50%]" :olMap="olMap" />
|
</div>
|
</Transition>
|
</Teleport>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import 'ol/ol.css';
|
import { computed, nextTick, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
|
import EquipCurve from '../components/EquipCurve.vue';
|
import BasicMap from './BasicMap.vue';
|
import SmallChat from '/@/components/chat/smallChat/index.vue';
|
import { useCompRef } from '/@/utils/types';
|
|
const isRenderFullscreen = ref(false);
|
const isFullscreen = ref(false);
|
const props = defineProps(['data']);
|
const mapRef = useCompRef(BasicMap);
|
const fullscreenContainer = ref<HTMLElement>();
|
const emit = defineEmits(['equipClick', 'closeInfoWindow']);
|
const olMap = computed(() => mapRef.value?.olMap);
|
const markerClick = (row) => {
|
if (isFullscreen.value) {
|
showCurve(row);
|
} else {
|
emit('equipClick', row);
|
}
|
};
|
const closeInfoWindow = () => {
|
if (isFullscreen.value) {
|
closeChartDlg();
|
} else {
|
emit('closeInfoWindow');
|
}
|
};
|
const mapContainerRef = ref<HTMLDivElement>(null);
|
|
// 切换全屏
|
const toggleFullScreen = async () => {
|
closeInfoWindow();
|
isFullscreen.value = !isFullscreen.value;
|
await nextTick();
|
if (isFullscreen.value) {
|
if (!isRenderFullscreen.value) {
|
isRenderFullscreen.value = true;
|
await nextTick();
|
}
|
// 将地图组件移动到全屏容器
|
const mapEl = mapRef.value.$el;
|
fullscreenContainer.value.appendChild(mapEl);
|
// 更新地图大小
|
olMap.value?.updateSize();
|
closeInfoWindow();
|
} else {
|
// 将地图组件移回原位置
|
const mapEl = mapRef.value.$el;
|
mapContainerRef.value.appendChild(mapEl);
|
// 更新地图大小
|
olMap.value?.updateSize();
|
}
|
};
|
|
//#region ====================== 设备曲线 ======================
|
const chartDlgIsShow = ref(false);
|
const equipCurveMapRow = ref(null);
|
const showCurve = (row) => {
|
equipCurveMapRow.value = row;
|
chartDlgIsShow.value = true;
|
};
|
|
const closeChartDlg = () => {
|
chartDlgIsShow.value = false;
|
equipCurveMapRow.value = null;
|
};
|
//#endregion
|
|
// 添加 ESC 键监听函数
|
const handleEscKey = (event: KeyboardEvent) => {
|
if (event.key === 'Escape' && isFullscreen.value) {
|
toggleFullScreen();
|
}
|
};
|
|
onMounted(async () => {
|
// 添加 ESC 键监听
|
document.addEventListener('keydown', handleEscKey);
|
// toggleFullScreen();
|
});
|
|
onDeactivated(async () => {
|
if (isFullscreen.value) {
|
await toggleFullScreen();
|
}
|
});
|
|
// 在组件卸载时移除监听
|
onUnmounted(() => {
|
// 移除 ESC 键监听
|
document.removeEventListener('keydown', handleEscKey);
|
});
|
</script>
|
<style scoped lang="scss">
|
:deep(.amap-info-content) {
|
padding: 0;
|
}
|
|
// 全屏过渡动画
|
.fullscreen-enter-active,
|
.fullscreen-leave-active {
|
transition: all 0.3s ease;
|
}
|
|
.fullscreen-enter-from,
|
.fullscreen-leave-to {
|
opacity: 0;
|
transform: scale(0.95);
|
}
|
</style>
|
