显示label

wujingjing

2025-02-19 382631e067c6c402d86e163cbd8e7d50a4c17933

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

@@ -4,40 +4,76 @@
                <span class="ywifont ywicon ywicon-liebiao"></span>
            </div> -->

      <div class="flex flex-col gap-2 translate-y-20">
         <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 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>

         <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">
      <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 v-show="activeMapToolPanel === MapPanelTool.Layer" :olMap="olMap"></LayerControl>
         <ThemeControl v-show="activeMapToolPanel === MapPanelTool.Theme" :olMap="olMap"></ThemeControl>
         <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 { ref } from 'vue';
import { computed, ref } from 'vue';
import { useTextOverflow } from '/@/hooks/useOverflow';
import PropertyPanel from './PropertyPanel.vue';
import { MapPanelTool, mapPanelToolMap, mapPanelToolMapIcon } from '../types';
@@ -45,9 +81,14 @@
import ThemeControl from './ThemeControl.vue';

import LayerControl from './LayerControl.vue';
const props = defineProps(['propertyMap', 'propertyConfigMap', 'olMap']);
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) {
@@ -57,6 +98,10 @@
      default:
         break;
   }
};

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

@@ -69,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>