From 6a475521b957b2c3a68ee950704f8f1948bd6cf9 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 09 一月 2025 18:28:59 +0800
Subject: [PATCH] 最新值查询修改
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue | 170 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 137 insertions(+), 33 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
index 45f49ea..c97f4cd 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
@@ -1,31 +1,54 @@
<template>
<div class="h-[60vh] relative">
- <div ref="containerRef" class="h-full"></div>
- <!-- <div v-if="bottomBarIsShow" class="absolute w-full bottom-0 bg-white border-gray-300 border border-solid">
- <div
- class="w-28 h-5 absolute left-1/2 -translate-x-1/2 -translate-y-[100%] cursor-pointer bg-[#4974f3] rounded-t-lg flex-center"
- @click="toggleShowChart"
- >
- <div
- class="ywifont -rotate-90 text-white !text-[13px]"
- :class="{ 'ywicon-zuoyoujiantou': chartIsShow, 'ywicon-zuoyoujiantou1': !chartIsShow }"
- ></div>
- </div>
- </div> -->
+ <!-- 鍘熷鍦板浘瀹瑰櫒 -->
+ <div v-show="!isFullscreen" ref="containerRef" class="h-full"></div>
+
+ <!-- 鍏ㄥ睆鎸夐挳 -->
+ <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="isFullscreen" class="absolute inset-0 z-50 w-full h-full">
+ <div ref="fullscreenContainerRef" class="w-full h-full"></div>
+ <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>
+ </div>
+ </Transition>
+ </Teleport>
</div>
</template>
<script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, nextTick, onDeactivated, onUnmounted } from 'vue';
import equipPic from './img/equip.svg';
import equipSelectPic from './img/equip-select.svg';
import type { GaoDePosition, LabelMarkerData } from '/@/model/map/GaoDeMap';
import { GaoDeMap } from '/@/model/map/GaoDeMap';
-
+import EquipCurve from '../components/EquipCurve.vue';
let gaoDeMap = new GaoDeMap();
const containerRef = ref<HTMLDivElement>(null);
+const fullscreenContainerRef = ref<HTMLDivElement>(null);
+const isFullscreen = ref(false);
const props = defineProps(['data']);
const emit = defineEmits(['equipClick', 'closeInfoWindow']);
@@ -100,7 +123,11 @@
curMarkerLabel = label;
infoWindow.open(gaoDeMap.map, label.getPosition() as any);
const extData = label.getExtData();
- emit('equipClick', extData);
+ if (isFullscreen.value) {
+ showCurve(extData);
+ } else {
+ emit('equipClick', extData);
+ }
label.setRank(999);
updateInfoWindow(extData);
@@ -126,32 +153,23 @@
});
curMarkerLabel?.setRank(1);
};
-onMounted(async () => {
- await gaoDeMap.init({
- container: containerRef.value,
- aMapOption: {
- resizeEnable: true,
- },
- });
- // const southWest: GaoDePosition = [props.data.minx, props.data.miny];
- // const northEast: GaoDePosition = [props.data.maxx, props.data.maxy];
- // gaoDeMap.zoomToRect(southWest, northEast);
- gaoDeMap.applyBasicPlugins();
- addMarkerLayer();
- gaoDeMap.map.setFitView();
-
+// 鍒濆鍖栦俊鎭獥鍙�
+const initInfoWindow = () => {
infoWindow = new AMap.InfoWindow({
content: createInfoWindow(),
- // offset: [3, -34],
anchor: 'top-left',
closeWhenClickMap: true,
});
- (infoWindow as any).on('close', (...a) => {
+
+ (infoWindow as any).on('close', () => {
restoreLabel();
curMarkerLabel = null;
-
- emit('closeInfoWindow');
+ if (isFullscreen.value) {
+ closeChartDlg();
+ } else {
+ emit('closeInfoWindow');
+ }
});
// 鑷甫鍏抽棴鍘绘帀锛岃嚜甯﹀叧闂洃鍚� close 浼氬娆¤Е鍙� close 浜嬩欢
@@ -161,10 +179,96 @@
myCloseBtn.addEventListener('click', () => {
infoWindow.close();
});
+};
+
+// 鍒囨崲鍏ㄥ睆
+const toggleFullScreen = async () => {
+ isFullscreen.value = !isFullscreen.value;
+
+ // 绛夊緟 DOM 鏇存柊瀹屾垚
+ await nextTick();
+ // 閲嶆柊鍒濆鍖栧湴鍥�
+ if (isFullscreen.value) {
+ await initMap(fullscreenContainerRef.value);
+ } else {
+ // await initMap(containerRef.value);
+ }
+};
+
+// 鍒濆鍖栧湴鍥�
+const initMap = async (container: HTMLDivElement) => {
+ // 閿�姣佹棫瀹炰緥
+ // gaoDeMap.map?.destroy();
+ gaoDeMap = new GaoDeMap();
+
+ // 鍒濆鍖栨柊瀹炰緥
+ await gaoDeMap.init({
+ container,
+ aMapOption: {
+ resizeEnable: true,
+ },
+ });
+
+ gaoDeMap.applyBasicPlugins();
+ addMarkerLayer();
+ gaoDeMap.map.setFitView();
+
+ // 鍒濆鍖栦俊鎭獥鍙�
+ initInfoWindow();
+};
+//#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 () => {
+ await initMap(containerRef.value);
+ // 娣诲姞 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>
--
Gitblit v1.9.3