From 1075860848d14e3d6d1506b91d9c9039433bf4cc Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 03 三月 2025 17:40:13 +0800
Subject: [PATCH] 合并附件和业务表格
---
src/components/chat/chatComponents/mapCom/MapCom.vue | 88 ++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 85 insertions(+), 3 deletions(-)
diff --git a/src/components/chat/chatComponents/mapCom/MapCom.vue b/src/components/chat/chatComponents/mapCom/MapCom.vue
index 5db16e9..299b2c7 100644
--- a/src/components/chat/chatComponents/mapCom/MapCom.vue
+++ b/src/components/chat/chatComponents/mapCom/MapCom.vue
@@ -1,20 +1,69 @@
<template>
- <div ref="containerRef" class="h-[70vh]"></div>
+ <div class="h-[70vh] 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>
+ <RecordSet v-if="chartIsShow" chartHeight="23vh" :data="CHART_DATA" class="mt-2" />
+ </div>
+ </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { chatComProps } from '../common';
+import RecordSet from '../summaryCom/components/recordSet/RecordSet.vue';
+import { CHART_DATA } from './TestData';
+import monitorPointPic from './img/monitor-point.svg';
import type { MapData } from './types';
import type { GaoDePosition, LabelMarkerData } from '/@/model/map/GaoDeMap';
import { GaoDeMap } from '/@/model/map/GaoDeMap';
-import monitorPointPic from './img/monitor-point.svg';
let gaoDeMap = new GaoDeMap();
const containerRef = ref<HTMLDivElement>(null);
const props = defineProps(chatComProps) as {
data: MapData;
};
+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>
+
+ </div>`;
+
+ // const dom = `<div class="w-32 bg-white p-1 flex flex-col border-blue-500 border-solid border">
+ // <div class="bg-[#ca0dab] flex-center py-1 text-white">
+ // 姘存湀浜�
+ // </div>
+ // <div class="flex flex-col mt-2">
+ // <div class="flex w-full text-blue-800">
+ // <div class="overflow-hidden text-nowrap overflow-ellipsis self-end flex-auto text-right">
+ // 0.72332
+ // </div>
+ // <div class="flex-0 ml-4">
+ // m
+ // </div>
+
+ // </div>
+
+ // </div>
+ // </div>`;
+ return dom;
+};
+
+const updateInfoWindow = (title: string) => {
+ const pointerTitle = infoWindow.dom.querySelector('.pointer-title');
+ pointerTitle.innerHTML = title +'';
+};
+
const addMarkerLayer = () => {
const dataList = (props.data?.values ?? []).map<LabelMarkerData>((item) => ({
position: [item.posx, item.posy],
@@ -28,21 +77,54 @@
url: monitorPointPic,
size: 30,
},
+ click(e, label) {
+ if (!bottomBarIsShow.value) {
+ bottomBarIsShow.value = true;
+ }
+ if (!chartIsShow.value) {
+ chartIsShow.value = true;
+ }
+ infoWindow.open(gaoDeMap.map, label.getPosition() as any);
+ const extData = label.getExtData();
+ updateInfoWindow(extData.title);
+
+ },
},
layerOpt: {
// allowCollision:false
},
});
};
+const bottomBarIsShow = ref(false);
+const chartIsShow = ref(true);
+const toggleShowChart = () => {
+ chartIsShow.value = !chartIsShow.value;
+};
+
+let infoWindow: AMap.InfoWindow;
+
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();
+ infoWindow = new AMap.InfoWindow({
+ content: createInfoWindow(),
+ offset: [3,-34],
+ closeWhenClickMap: true,
+ });
+
});
</script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+:deep(.amap-info-content) {
+ padding: 0;
+}
+</style>
--
Gitblit v1.9.3