最新值查询修改

wujingjing

2025-01-09 6a475521b957b2c3a68ee950704f8f1948bd6cf9

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue

@@ -1,31 +1,54 @@
<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 v-show="!isFullscreen" ref="containerRef" class="h-full"></div>

      <!-- 全屏按钮 -->
      <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>

      <!-- 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">
                  <el-tooltip content="退出全屏（Esc）" placement="top">
                     <div class="ywifont text-[20px] text-black rounded-lg ywicon-tuichuquanping"></div>
                  </el-tooltip>
               </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>
            </div>
         </Transition>
      </Teleport>
   </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
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 EquipCurve from '../components/EquipCurve.vue';
let gaoDeMap = new GaoDeMap();
const containerRef = ref<HTMLDivElement>(null);
const fullscreenContainerRef = ref<HTMLDivElement>(null);
const isFullscreen = ref(false);
const props = defineProps(['data']);

const emit = defineEmits(['equipClick', 'closeInfoWindow']);
@@ -100,7 +123,11 @@
            curMarkerLabel = label;
            infoWindow.open(gaoDeMap.map, label.getPosition() as any);
            const extData = label.getExtData();
            emit('equipClick', extData);
            if (isFullscreen.value) {
               showCurve(extData);
            } else {
               emit('equipClick', extData);
            }
            label.setRank(999);

            updateInfoWindow(extData);
@@ -126,32 +153,23 @@
   });
   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();

// 初始化信息窗口
const initInfoWindow = () => {
   infoWindow = new AMap.InfoWindow({
      content: createInfoWindow(),
      // offset: [3, -34],
      anchor: 'top-left',
      closeWhenClickMap: true,
   });
   (infoWindow as any).on('close', (...a) => {

   (infoWindow as any).on('close', () => {
      restoreLabel();
      curMarkerLabel = null;

      emit('closeInfoWindow');
      if (isFullscreen.value) {
         closeChartDlg();
      } else {
         emit('closeInfoWindow');
      }
   });

   // 自带关闭去掉，自带关闭监听 close 会多次触发 close 事件
@@ -161,10 +179,96 @@
   myCloseBtn.addEventListener('click', () => {
      infoWindow.close();
   });
};

// 切换全屏
const toggleFullScreen = async () => {
   isFullscreen.value = !isFullscreen.value;

   // 等待 DOM 更新完成
   await nextTick();
   // 重新初始化地图
   if (isFullscreen.value) {
      await initMap(fullscreenContainerRef.value);
   } else {
      // await initMap(containerRef.value);
   }
};

// 初始化地图
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);
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 () => {
   await initMap(containerRef.value);
   // 添加 ESC 键监听
   document.addEventListener('keydown', handleEscKey);
});

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>