| | |
| | | <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 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> |
| | | </div> |
| | | <div class="shadow"> |
| | | <PropertyPanel |
| | | ref="propertyPanelRef" |
| | | v-show="activeMapToolPanel === MapPanelTool.Property" |
| | | @close="propertyPanelClose" |
| | | :propertyMap="propertyMap" |
| | | :propertyConfigMap="propertyConfigMap" |
| | | ></PropertyPanel> |
| | | |
| | | <PropertyPanel |
| | | ref="propertyPanelRef" |
| | | v-show="activeMapToolPanel === MapPanelTool.Property" |
| | | @close="propertyPanelClose" |
| | | :propertyMap = propertyMap |
| | | :propertyConfigMap="propertyConfigMap" |
| | | ></PropertyPanel> |
| | | <LayerControl v-show="activeMapToolPanel === MapPanelTool.Layer" :olMap="olMap"></LayerControl> |
| | | <ThemeControl v-show="activeMapToolPanel === MapPanelTool.Theme" :olMap="olMap"></ThemeControl> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts" name="PanelTool"> |
| | | import type { CollapseModelValue } from 'element-plus'; |
| | | import { 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'; |
| | | const props = defineProps(['propertyMap', 'propertyConfigMap', 'olMap']); |
| | | const activeMapToolPanel = ref<MapPanelTool>(); |
| | | |
| | | const mapToolPanelClick = (type: MapPanelTool) => { |
| | | activeMapToolPanel.value = activeMapToolPanel.value === type ? null : type; |
| | | switch (type) { |