显示label

wujingjing

2025-02-19 382631e067c6c402d86e163cbd8e7d50a4c17933

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/index.vue

@@ -1,43 +1,94 @@
<template>
   <div class="flex shadow">
   <div class="flex">
      <!-- <div class="size-2 border border-solid " >
                <span class="ywifont ywicon ywicon-liebiao"></span>
            </div> -->

      <div
         class="size-8 rounded flex-center cursor-pointer border border-solid border-[#494949] bg-[#fcfcfc]"
         :class="{
            'bg-[#1676fd]': MapPanelTool.Property === activeMapToolPanel,
            'text-white': MapPanelTool.Property === activeMapToolPanel,
            'hover:text-[#1676fd]': MapPanelTool.Property !== activeMapToolPanel,
            'hover:border-[#1676fd]': MapPanelTool.Property !== activeMapToolPanel,
            '!hidden': activeMapToolPanel === MapPanelTool.Property,
         }"
         :title="mapPanelToolMap[MapPanelTool.Property]"
         @click="mapToolPanelClick(MapPanelTool.Property)"
      >
         <span class="ywifont ywicon ywicon-liebiao"></span>
      </div>
      <div class="flex flex-col mt-20">
         <div class="flex gap-2 flex-col">
            <div
               v-for="item in Object.keys(mapPanelToolMap)"
               :key="item"
               class="size-8 rounded flex-center cursor-pointer border border-solid border-[#494949] bg-[#fcfcfc]"
               :class="{
                  '!bg-[#1676fd]': item === activeMapToolPanel,
                  'text-white': item === activeMapToolPanel,
                  'hover:text-[#1676fd]': item !== activeMapToolPanel,
                  'hover:border-[#1676fd]': item !== activeMapToolPanel,
               }"
               :title="mapPanelToolMap[item]"
               @click="mapToolPanelClick(item as any)"
            >
               <span class="ywifont ywicon" :class="[`ywicon-${mapPanelToolMapIcon[item].name}`]"></span>
            </div>
         </div>

      <PropertyPanel
         ref="propertyPanelRef"
         v-show="activeMapToolPanel === MapPanelTool.Property"
         @close="propertyPanelClose"
         :propertyMap = propertyMap
         :propertyConfigMap="propertyConfigMap"
      ></PropertyPanel>
         <div class="mt-auto mb-32 flex gap-2 flex-col">
            <div
               class="size-8 rounded flex-center cursor-pointer bg-[#fcfcfc] font-thin"
               :title="fullScreenTitle"
               @click="toggleFullScreen"
            >
               <span class="ywifont ywicon !text-[26px]" :class="[`ywicon-${fullScreenIcon}`]"></span>
            </div>
            <div class="size-8 rounded flex-center cursor-pointer bg-[#fcfcfc] font-thin" title="定位您的位置" @click="locationCurrent">
               <span v-if="locationLoading" class="ywifont ywicon !text-[26px] ywicon-loading1 animate-spin"></span>
               <span v-else class="ywifont ywicon !text-[26px] ywicon-dangqianweizhi"></span>
            </div>
            <div
               class="size-8 rounded flex-center cursor-pointer bg-[#fcfcfc] font-thin"
               title="适应窗口"
               @click="olMap.zoomToLayers"
            >
               <span class="ywifont ywicon !text-[22px] ywicon-zishiying"></span>
            </div>

         </div>
      </div>
      <div class="shadow h-full">
         <PropertyPanel
            ref="propertyPanelRef"
            v-show="activeMapToolPanel === MapPanelTool.Property"
            @close="propertyPanelClose"
            :propertyMap="propertyMap"
            :propertyConfigMap="propertyConfigMap"
            class="p-3 w-[280px] h-full gap-1.5"
         ></PropertyPanel>

         <LayerControl
            class="p-3 w-[280px] h-full gap-1.5"
            v-show="activeMapToolPanel === MapPanelTool.Layer"
            :olMap="olMap"
            @close="propertyPanelClose"
         ></LayerControl>
         <ThemeControl
            class="p-3 w-[280px] h-full gap-1.5"
            v-show="activeMapToolPanel === MapPanelTool.Theme"
            :olMap="olMap"
            @close="propertyPanelClose"
         ></ThemeControl>
      </div>
      <div class="flex flex-col gap-2 translate-y-60"></div>
   </div>
</template>

<script setup lang="ts" name="PanelTool">
import type { CollapseModelValue } from 'element-plus';
import { ref } from 'vue';
import { computed, ref } from 'vue';
import { useTextOverflow } from '/@/hooks/useOverflow';
import PropertyPanel from './PropertyPanel.vue';
import { MapPanelTool, mapPanelToolMap } from '../types';
import { MapPanelTool, mapPanelToolMap, mapPanelToolMapIcon } from '../types';
import { useCompRef } from '/@/utils/types';
const props = defineProps(['propertyMap','propertyConfigMap'])
import ThemeControl from './ThemeControl.vue';

import LayerControl from './LayerControl.vue';
import { getCurrentPosition } from '/@/utils/brower';
const props = defineProps(['propertyMap', 'propertyConfigMap', 'olMap', 'isFullscreen']);
const activeMapToolPanel = ref<MapPanelTool>();

const fullScreenTitle = computed(() => (props.isFullscreen ? '退出全屏（Esc）' : '全屏展开'));
const fullScreenIcon = computed(() => (props.isFullscreen ? 'tuichuquanping' : 'fullscreen'));

const emit = defineEmits(['toggleFullScreen']);
const mapToolPanelClick = (type: MapPanelTool) => {
   activeMapToolPanel.value = activeMapToolPanel.value === type ? null : type;
   switch (type) {
@@ -47,6 +98,10 @@
      default:
         break;
   }
};

const toggleFullScreen = () => {
   emit('toggleFullScreen');
};
const propertyPanelRef = useCompRef(PropertyPanel);

@@ -59,8 +114,20 @@
   propertyPanelRef.value?.featureClick(feature);
};

const setActivePanel = (type: MapPanelTool) => {
   activeMapToolPanel.value = type;
};

const locationLoading = ref(false);
const locationCurrent = async () => {
   locationLoading.value = true;
   await props.olMap.locationCurrent().finally(() => {
      locationLoading.value = false;
   });
};
defineExpose({
   featureClick,
   setActivePanel,
});
</script>
<style scoped lang="scss"></style>