From 1dee40ea46601f2ee5d10aa0190625ebf03bdc4e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 02 Dec 2024 17:02:19 +0800
Subject: [PATCH] 1
---
src/pages/map/components/scomponents/toolList.vue | 134 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 134 insertions(+), 0 deletions(-)
diff --git a/src/pages/map/components/scomponents/toolList.vue b/src/pages/map/components/scomponents/toolList.vue
new file mode 100644
index 0000000..627db72
--- /dev/null
+++ b/src/pages/map/components/scomponents/toolList.vue
@@ -0,0 +1,134 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2024-10-29 14:20:49
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2024-11-27 15:34:16
+ * @FilePath: \bigScreen\src\pages\layout\components\scomponents\toolList.vue
+ * @Description:
+ *
+ * Copyright (c) 2024 by shuishen, All Rights Reserved.
+-->
+<template>
+ <ul v-show="moreToolShow" class="tool-list-box">
+ <li @click="showComponent(item.component)" v-for="(item, index) in components" :key="index">
+ <i :class="item.icon"></i> {{ item.title }}
+ </li>
+ </ul>
+
+ <component :is="currentComponent" v-if="currentComponent" @closeChild="closeComponent" />
+</template>
+
+<script setup>
+const { moreToolShow } = defineProps({
+ moreToolShow: {
+ type: Boolean, //参数类型
+ default: false, //默认值
+ required: true, //是否必须传递
+ }
+})
+import location from './tool/location.vue'
+import curtain from './tool/curtain.vue'
+import measure from './tool/measure.vue'
+import exportScene from './tool/exportScene.vue'
+import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
+const emit = defineEmits(['close'])
+
+let currentComponent = shallowRef(null)
+const components = [
+ {
+ icon: 'fa fa-calculator',
+ title: '图上量算',
+ component: measure,
+ },
+ // {
+ // icon: 'fa fa-bar-chart',
+ // title: '空间分析',
+ // },
+ {
+ name: 'location',
+ icon: 'fa fa-map-pin',
+ title: '坐标定位',
+ component: location
+ },
+ // {
+ // icon: 'fa fa-paper-plane',
+ // title: '地区导航',
+ // },
+ // {
+ // icon: 'fa fa-edit',
+ // title: '我的标记',
+ // },
+ // {
+ // icon: 'fa fa-tags',
+ // title: '视角书签',
+ // },
+ {
+ name: 'exportScene',
+ icon: 'fa fa-download',
+ title: '场景导出',
+ component: exportScene
+ },
+ // {
+ // icon: 'fa fa-object-group',
+ // title: '图上标绘',
+ // },
+ // {
+ // icon: 'fa fa-helicopter',
+ // title: '飞行漫游',
+ // },
+ // {
+ // icon: 'fa fa-level-up',
+ // title: '路线导航',
+ // },
+ // {
+ // icon: 'fa fa-columns',
+ // title: '卷帘对比',
+ // component: curtain
+ // },
+ // {
+ // icon: 'fa fa-window-restore',
+ // title: '分屏对比',
+ // },
+]
+
+const showComponent = (component) => {
+ currentComponent.value = component
+ emit('close', 'tool')
+}
+
+const closeComponent = () => {
+ currentComponent.value = null
+}
+</script>
+
+<style lang="scss" scoped>
+.tool-list-box {
+ position: absolute;
+ right: 540px;
+ z-index: 101;
+ top: 152px;
+ background: rgba(63, 72, 84, .7);
+ pointer-events: auto;
+
+ li {
+ padding: 6px 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #fff;
+ cursor: pointer;
+
+ i {
+ margin-right: 5px;
+ }
+ }
+
+ li:hover {
+ background: #4db3ff;
+ }
+
+ li:first-child {
+ margin-top: 0;
+ }
+}
+</style>
--
Gitblit v1.9.3