From 4e04b16f7bf497502508101c45ef6ff0209b13e2 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 17 一月 2025 11:07:39 +0800
Subject: [PATCH] 尝试合并配置
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue | 156 ++++++++++-----------------------------------------
1 files changed, 31 insertions(+), 125 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 d278978..a7d0384 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
@@ -1,53 +1,26 @@
<template>
<div class="h-[60vh] relative">
<!-- 鍘熷鍦板浘瀹瑰櫒 -->
- <div v-show="!isFullscreen" ref="containerRef" class="h-full"></div>
-
+ <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>
- <div ref="infoWindowRef" v-show="infoWindowIsShow">
- <div
- class="bg-white rounded-md text-nowrap flex flex-col w-fit border border-solid border-blue-600 relative z-[1]"
- style="padding: 12px"
- >
- <span
- @click="closeInfoWindow"
- 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">
- <span
- v-for="(col, index) in colsArray"
- :key="index"
- class="flex-items-center justify-start text-gray-600"
- style="height: 20px"
- >{{ col.title ?? '' }}</span
- >
- </div>
-
- <div class="flex flex-col w-1/2 value-list" v-if="infoWindowMapRow">
- <span
- v-for="(col, index) in colsArray"
- :key="index"
- class="flex-items-center justify-end text-black"
- style="height: 20px"
- >{{ infoWindowMapRow[index] ?? '' }}</span
- >
- </div>
- </div>
- </div>
- </div>
<!-- Teleport 鍏ㄥ睆鍦板浘 -->
<Teleport to=".layout-parent">
<Transition name="fullscreen">
- <div v-show="isFullscreen" class="absolute inset-0 z-50 w-full h-full">
- <div ref="fullscreenContainerRef" class="w-full h-full"></div>
+ <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>
@@ -71,50 +44,25 @@
<script setup lang="ts">
import 'ol/ol.css';
-import { computed, nextTick, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
-import equipSelectPic from './img/equip-select.svg';
-import equipPic from './img/equip.svg';
-import { OLMap } from '/@/model/map/OLMap';
-
-import type Overlay from 'ol/Overlay';
+import { nextTick, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
import EquipCurve from '../components/EquipCurve.vue';
-import { GaoDeMap } from '/@/model/map/GaoDeMap';
-let gaoDeMap = new GaoDeMap();
-const containerRef = ref<HTMLDivElement>(null);
-const fullscreenContainerRef = ref<HTMLDivElement>(null);
+import BasicMap from './BasicMap.vue';
+import { useCompRef } from '/@/utils/types';
+import { GaoDeSourceType } from '/@/model/map/OLMap';
+const isRenderFullscreen = ref(false);
+
const isFullscreen = ref(false);
const props = defineProps(['data']);
-
+const normalMapRef = useCompRef(BasicMap);
+const fullScreenMapRef = useCompRef(BasicMap);
const emit = defineEmits(['equipClick', 'closeInfoWindow']);
-const colsArray = computed(() => {
- return props.data.cols ?? [];
-});
-
-const infoWindowRef = ref<HTMLDivElement>(null);
-const infoWindowIsShow = ref(false);
-const infoWindowMapRow = ref(null);
-let olMap: OLMap;
-let infoWindowOverlay: Overlay;
-let lastOverlay: Overlay;
-const setMarkerIcon = (overlay, icon: string) => {
- if (!overlay) return;
- const ele = overlay.getElement() as HTMLImageElement;
- if (!ele) return;
- ele.src = icon;
-};
-const showInfoWindow = (overlay, row, position) => {
- lastOverlay && setMarkerIcon(lastOverlay, equipPic);
+const markerClick = (row) => {
if (isFullscreen.value) {
showCurve(row);
} else {
emit('equipClick', row);
}
- infoWindowIsShow.value = true;
- infoWindowOverlay.setPosition(position);
- infoWindowMapRow.value = row;
- setMarkerIcon(overlay, equipSelectPic);
- lastOverlay = overlay;
};
const closeInfoWindow = () => {
if (isFullscreen.value) {
@@ -122,71 +70,30 @@
} else {
emit('closeInfoWindow');
}
- infoWindowIsShow.value = false;
- infoWindowMapRow.value = null;
- setMarkerIcon(lastOverlay, equipPic);
};
-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,
- };
- });
- olMap.addMarkerLayer(dataList, {
- markerOpt: {
- icon: {
- url: equipPic,
- size: 30,
- selectUrl: equipSelectPic,
- },
- click(e, label, item, position) {
- const extData = item.extData;
-
- showInfoWindow(label, extData, position);
- },
- },
- layerOpt: {
- // allowCollision:false
- },
- });
-};
-// 鍒濆鍖栧湴鍥�
-const initMap = async (container: HTMLDivElement) => {
- olMap = new OLMap({
- container,
- });
- addMarkerLayer();
- infoWindowOverlay = olMap.createEleOverlay(infoWindowRef.value);
- olMap.map.addOverlay(infoWindowOverlay);
-};
-let hasInitFullscreen = false;
+const fullScreenMapConfig = ref({
+ sourceType: GaoDeSourceType.Vector,
+ markerIsVisible: true,
+});
// 鍒囨崲鍏ㄥ睆
const toggleFullScreen = async () => {
isFullscreen.value = !isFullscreen.value;
- // 绛夊緟 DOM 鏇存柊瀹屾垚
await nextTick();
- // 閲嶆柊鍒濆鍖栧湴鍥�
if (isFullscreen.value) {
- closeInfoWindow();
- if (!hasInitFullscreen) {
- await initMap(fullscreenContainerRef.value);
- hasInitFullscreen = true;
+ const config = normalMapRef.value.olMap.getConfig();
+ if (!isRenderFullscreen.value) {
+ fullScreenMapConfig.value = config;
+ isRenderFullscreen.value = true;
} else {
- olMap.map.addOverlay(infoWindowOverlay);
+ // fullScreenMapRef.value.olMap.setConfig(config);
}
+ closeInfoWindow();
} else {
- olMap.map.addOverlay(infoWindowOverlay);
+ const config = fullScreenMapRef.value.olMap.getConfig();
+ // normalMapRef.value.olMap.setConfig(config);
}
};
@@ -212,7 +119,6 @@
};
onMounted(async () => {
- initMap(containerRef.value);
// 娣诲姞 ESC 閿洃鍚�
document.addEventListener('keydown', handleEscKey);
});
--
Gitblit v1.9.3