<template>
|
<div class="h-[60vh] relative">
|
<!-- 原始地图容器 -->
|
<BasicMap
|
ref="normalMapRef"
|
v-show="!isFullscreen"
|
class="h-full"
|
:data="data"
|
@markerClick="markerClick"
|
@closeInfoWindow="closeInfoWindow"
|
/>
|
<!-- 全屏按钮 -->
|
<div class="absolute right-2 top-2 cursor-pointer" @click="toggleFullScreen">
|
<el-tooltip content="全屏展开" placement="top">
|
<div class="ywifont !text-[20px] text-black rounded-lg ywicon-fullscreen"></div>
|
</el-tooltip>
|
</div>
|
|
<!-- 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">
|
<BasicMap
|
ref="fullScreenMapRef"
|
:config="fullScreenMapConfig"
|
class="h-full"
|
:data="data"
|
@markerClick="markerClick"
|
@closeInfoWindow="closeInfoWindow"
|
/>
|
<div class="absolute right-2 top-2 cursor-pointer" @click="toggleFullScreen">
|
<el-tooltip content="退出全屏（Esc）" placement="top">
|
<div class="ywifont !text-[20px] text-black rounded-lg ywicon-tuichuquanping"></div>
|
</el-tooltip>
|
</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-0" :olMap="fullScreenOlMap" />
|
</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 { GaoDeSourceType } from '/@/model/map/OLMap';
|
import { useCompRef } from '/@/utils/types';
|
const isRenderFullscreen = ref(false);
|
|
const isFullscreen = ref(false);
|
const props = defineProps(['data']);
|
const normalMapRef = useCompRef(BasicMap);
|
const fullScreenMapRef = useCompRef(BasicMap);
|
const fullScreenOlMap = computed(() => fullScreenMapRef.value?.olMap);
|
const emit = defineEmits(['equipClick', 'closeInfoWindow']);
|
|
const markerClick = (row) => {
|
if (isFullscreen.value) {
|
showCurve(row);
|
} else {
|
emit('equipClick', row);
|
}
|
};
|
const closeInfoWindow = () => {
|
if (isFullscreen.value) {
|
closeChartDlg();
|
} else {
|
emit('closeInfoWindow');
|
}
|
};
|
|
const fullScreenMapConfig = ref({
|
sourceType: GaoDeSourceType.Vector,
|
markerIsVisible: true,
|
});
|
// 切换全屏
|
const toggleFullScreen = async () => {
|
isFullscreen.value = !isFullscreen.value;
|
|
await nextTick();
|
if (isFullscreen.value) {
|
const config = normalMapRef.value.olMap.getConfig();
|
if (!isRenderFullscreen.value) {
|
fullScreenMapConfig.value = config;
|
isRenderFullscreen.value = true;
|
} else {
|
// fullScreenMapRef.value.olMap.setConfig(config);
|
}
|
closeInfoWindow();
|
} else {
|
const config = fullScreenMapRef.value.olMap.getConfig();
|
// normalMapRef.value.olMap.setConfig(config);
|
}
|
};
|
|
//#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);
|
});
|
|
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>
|
