From a7c0c52ed984e5dbae736a469fdac701d1a68a7f Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 29 十一月 2024 10:35:48 +0800
Subject: [PATCH] 选中改颜色
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue | 106 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 82 insertions(+), 24 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 a1e06e5..19d9ce3 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
@@ -1,7 +1,7 @@
<template>
- <div class="h-[70vh] relative bg-red-200">
+ <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 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"
@@ -11,36 +11,68 @@
:class="{ 'ywicon-zuoyoujiantou': chartIsShow, 'ywicon-zuoyoujiantou1': !chartIsShow }"
></div>
</div>
- </div>
+ </div> -->
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
-import monitorPointPic from './img/monitor-point.svg';
+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 props = defineProps(['data']);
-const createInfoWindow = () => {
- const dom = `<div class="w-48 bg-white p-1 flex flex-col border-blue-500 border-solid border">
- <div class="bg-[#ca0dab] flex py-1 text-white px-5">
- <div class="pointer-title text-nowrap overflow-hidden text-ellipsis mx-auto"></div>
- </div>
+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 updateInfoWindow = (title: string) => {
- const pointerTitle = infoWindow.dom.querySelector('.pointer-title');
- pointerTitle.innerHTML = title + '';
-};
+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;
@@ -59,26 +91,30 @@
gaoDeMap.addMarkerLayer(dataList, {
markerOpt: {
icon: {
- url: monitorPointPic,
+ url: equipPic,
size: 30,
+ selectUrl: equipSelectPic,
},
click(e, label) {
- if (!bottomBarIsShow.value) {
- bottomBarIsShow.value = true;
- }
- if (!chartIsShow.value) {
- chartIsShow.value = true;
- }
+ // if (!bottomBarIsShow.value) {
+ // bottomBarIsShow.value = true;
+ // }
+ // if (!chartIsShow.value) {
+ // chartIsShow.value = true;
+ // }
+
+ curMarkerLabel && curMarkerLabel !== label && restoreLabel();
+ curMarkerLabel = label;
infoWindow.open(gaoDeMap.map, label.getPosition() as any);
const extData = label.getExtData();
- updateInfoWindow(extData[1]);
+ emit('equipClick', extData);
+ updateInfoWindow(extData);
},
},
layerOpt: {
// allowCollision:false
},
});
-
};
const bottomBarIsShow = ref(false);
@@ -88,7 +124,12 @@
};
let infoWindow: AMap.InfoWindow;
-
+const restoreLabel = () => {
+ // 鍏抽棴鎭㈠鍥剧墖
+ curMarkerLabel?.setIcon({
+ image: equipPic,
+ });
+};
onMounted(async () => {
await gaoDeMap.init({
container: containerRef.value,
@@ -100,14 +141,31 @@
// 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],
+ // offset: [3, -34],
+ anchor: 'top-left',
closeWhenClickMap: true,
});
+ (infoWindow as any).on('close', (...a) => {
+ restoreLabel();
+ curMarkerLabel = null;
+
+ 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();
+ });
+
});
</script>
<style scoped lang="scss">
--
Gitblit v1.9.3