From f996c7437b0a7d4e7bafeb7c71b7c86b7170c8bd Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 27 二月 2025 17:15:13 +0800
Subject: [PATCH] 地图图标展示
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue | 282 ++++++++++++++++++++++++++------------------------------
1 files changed, 130 insertions(+), 152 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..8c57cec 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
@@ -1,170 +1,148 @@
<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 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 { onMounted, ref } from 'vue';
+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';
-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';
-
-let gaoDeMap = new GaoDeMap();
-const containerRef = ref<HTMLDivElement>(null);
+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 createInfoWindow = () => {
- // title
- // <div class="title flex-center bg-[#ca0dab] text-white py-0.5 mb-2 w-full over-ellipsis">
- // 缃楁眽楸�
- // </div>
- const dom = `<div class="rounded-md text-nowrap flex flex-col w-fit border border-solid border-blue-600 relative" style="padding: 12px">
- <span class="guanbi absolute ywifont ywicon-guanbi right-[4px] top-[-2px] font-bold text-[#c3c3c3] cursor-pointer" ></span>
-
- <div class="space-x-4 flex w-full">
- <div class="flex flex-col w-1/2 key-list">
-
- </div>
-
- <div class="flex flex-col w-1/2 value-list">
-
- </div>
- </div>
- </div>`;
-
- return dom;
+const olMap = computed(() => mapRef.value?.olMap);
+const markerClick = (row) => {
+ if (isFullscreen.value) {
+ showCurve(row);
+ } else {
+ emit('equipClick', row);
+ }
};
-
-const updateInfoWindow = (item) => {
- const cellHeight = '20px';
- const keyListDom = infoWindow.dom.querySelector('.key-list');
- const valueListDom = infoWindow.dom.querySelector('.value-list');
-
- const colsArray = props.data.cols ?? [];
- const keyItemHtml = colsArray
- .map((col) => {
- return `<span class="flex-items-center justify-start text-gray-600" style="height:${cellHeight}">${col.title ?? ''}</span>`;
- })
- .join('');
-
- const valueItemHtml = colsArray
- .map((col, index) => {
- return `<span class="flex-items-center justify-end text-black" style="height:${cellHeight}">${item[index] ?? ''}</span>`;
- })
- .join('');
-
- keyListDom.innerHTML = keyItemHtml;
- valueListDom.innerHTML = valueItemHtml;
-};
-let curMarkerLabel: AMap.LabelMarker;
-const addMarkerLayer = () => {
- const map = props.data.map;
- if (map.pos_x == null && map.pos_y == null) return;
-
- const dataList = (props.data?.values ?? []).map((item) => {
- const x = item[map.pos_x];
- const y = item[map.pos_y];
-
- return {
- position: [x, y],
- // textColor: item.color,
- extData: item,
- title: item.title,
- };
- });
- gaoDeMap.addMarkerLayer(dataList, {
- markerOpt: {
- icon: {
- url: equipPic,
- size: 30,
- selectUrl: equipSelectPic,
- },
- click(e, label) {
- curMarkerLabel && curMarkerLabel !== label && restoreLabel();
- curMarkerLabel = label;
- infoWindow.open(gaoDeMap.map, label.getPosition() as any);
- const extData = label.getExtData();
- emit('equipClick', extData);
- label.setRank(999);
-
- updateInfoWindow(extData);
- },
- },
- layerOpt: {
- // allowCollision:false
- },
- });
-};
-
-const bottomBarIsShow = ref(false);
-const chartIsShow = ref(true);
-const toggleShowChart = () => {
- chartIsShow.value = !chartIsShow.value;
-};
-
-let infoWindow: AMap.InfoWindow;
-const restoreLabel = () => {
- // 鍏抽棴鎭㈠鍥剧墖
- curMarkerLabel?.setIcon({
- image: equipPic,
- });
- 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();
-
- infoWindow = new AMap.InfoWindow({
- content: createInfoWindow(),
- // offset: [3, -34],
- anchor: 'top-left',
- closeWhenClickMap: true,
- });
- (infoWindow as any).on('close', (...a) => {
- restoreLabel();
- curMarkerLabel = null;
-
+const closeInfoWindow = () => {
+ if (isFullscreen.value) {
+ closeChartDlg();
+ } else {
emit('closeInfoWindow');
- });
+ }
+};
+const mapContainerRef = ref<HTMLDivElement>(null);
- // 鑷甫鍏抽棴鍘绘帀锛岃嚜甯﹀叧闂洃鍚� close 浼氬娆¤Е鍙� close 浜嬩欢
- const closeBtnDom = infoWindow.dom.querySelector('.amap-info-close');
- closeBtnDom.remove();
- const myCloseBtn = infoWindow.dom.querySelector('.guanbi');
- myCloseBtn.addEventListener('click', () => {
- infoWindow.close();
- });
+// 鍒囨崲鍏ㄥ睆
+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>
--
Gitblit v1.9.3