From 84167d13f951358315d13609de426ebb318a3c9a Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期日, 09 二月 2025 23:19:34 +0800
Subject: [PATCH] 面板样式调整
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue | 241 +++++++++++++----------------------------------
1 files changed, 68 insertions(+), 173 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 c97f4cd..949e851 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
@@ -1,25 +1,43 @@
<template>
<div class="h-[60vh] relative">
<!-- 鍘熷鍦板浘瀹瑰櫒 -->
- <div v-show="!isFullscreen" ref="containerRef" class="h-full"></div>
-
+ <BasicMap
+ ref="normalMapRef"
+ v-show="!isFullscreen"
+ :isFullscreen="false"
+ class="h-full"
+ :data="data"
+ @markerClick="markerClick"
+ @closeInfoWindow="closeInfoWindow"
+ @toggleFullScreen="toggleFullScreen"
+
+ />
<!-- 鍏ㄥ睆鎸夐挳 -->
- <div class="absolute right-2 top-2 cursor-pointer" @click="toggleFullScreen">
+ <!-- <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>
+ <div class="ywifont !text-[20px] text-black rounded-lg ywicon-fullscreen"></div>
</el-tooltip>
- </div>
+ </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">
+ <div v-if="isRenderFullscreen" v-show="isFullscreen" class="absolute inset-0 z-50 w-full h-full">
+ <BasicMap
+ ref="fullScreenMapRef"
+ :config="fullScreenMapConfig"
+ :isFullscreen="true"
+ class="h-full"
+ :data="data"
+ @markerClick="markerClick"
+ @closeInfoWindow="closeInfoWindow"
+ @toggleFullScreen="toggleFullScreen"
+ />
+ <!-- <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>
+ <div class="ywifont !text-[20px] text-black rounded-lg ywicon-tuichuquanping"></div>
</el-tooltip>
- </div>
+ </div> -->
<div class="absolute bottom-0 w-full">
<EquipCurve
v-model:isShow="chartDlgIsShow"
@@ -30,6 +48,7 @@
:tableHeight="240"
/>
</div>
+ <SmallChat class="absolute bottom-0 right-[50%] " :olMap="fullScreenOlMap" />
</div>
</Transition>
</Teleport>
@@ -37,185 +56,61 @@
</template>
<script setup lang="ts">
-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 'ol/ol.css';
+import { computed, nextTick, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
import EquipCurve from '../components/EquipCurve.vue';
-let gaoDeMap = new GaoDeMap();
-const containerRef = ref<HTMLDivElement>(null);
-const fullscreenContainerRef = ref<HTMLDivElement>(null);
+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 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 markerClick = (row) => {
+ if (isFullscreen.value) {
+ showCurve(row);
+ } else {
+ emit('equipClick', row);
+ }
+};
+const closeInfoWindow = () => {
+ if (isFullscreen.value) {
+ closeChartDlg();
+ } else {
+ emit('closeInfoWindow');
+ }
};
-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();
- if (isFullscreen.value) {
- showCurve(extData);
- } else {
- 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);
-};
-
-// 鍒濆鍖栦俊鎭獥鍙�
-const initInfoWindow = () => {
- infoWindow = new AMap.InfoWindow({
- content: createInfoWindow(),
- anchor: 'top-left',
- closeWhenClickMap: true,
- });
-
- (infoWindow as any).on('close', () => {
- restoreLabel();
- curMarkerLabel = null;
- if (isFullscreen.value) {
- closeChartDlg();
- } else {
- emit('closeInfoWindow');
- }
- });
-
- // 鑷甫鍏抽棴鍘绘帀锛岃嚜甯﹀叧闂洃鍚� close 浼氬娆¤Е鍙� close 浜嬩欢
- const closeBtnDom = infoWindow.dom.querySelector('.amap-info-close');
- closeBtnDom.remove();
- const myCloseBtn = infoWindow.dom.querySelector('.guanbi');
- myCloseBtn.addEventListener('click', () => {
- infoWindow.close();
- });
-};
-
+const fullScreenMapConfig = ref({
+ sourceType: GaoDeSourceType.Vector,
+ markerIsVisible: true,
+});
// 鍒囨崲鍏ㄥ睆
const toggleFullScreen = async () => {
isFullscreen.value = !isFullscreen.value;
- // 绛夊緟 DOM 鏇存柊瀹屾垚
await nextTick();
- // 閲嶆柊鍒濆鍖栧湴鍥�
if (isFullscreen.value) {
- await initMap(fullscreenContainerRef.value);
+ const config = normalMapRef.value.olMap.getConfig();
+ if (!isRenderFullscreen.value) {
+ fullScreenMapConfig.value = config;
+ isRenderFullscreen.value = true;
+ } else {
+ // fullScreenMapRef.value.olMap.setConfig(config);
+ }
+ closeInfoWindow();
} else {
- // await initMap(containerRef.value);
+ const config = fullScreenMapRef.value.olMap.getConfig();
+ // normalMapRef.value.olMap.setConfig(config);
}
};
-// 鍒濆鍖栧湴鍥�
-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);
@@ -238,9 +133,9 @@
};
onMounted(async () => {
- await initMap(containerRef.value);
// 娣诲姞 ESC 閿洃鍚�
document.addEventListener('keydown', handleEscKey);
+ toggleFullScreen();
});
onDeactivated(async () => {
--
Gitblit v1.9.3