<template>
|
<div class="toolBarRight animation-slide-top no-print-view">
|
<el-button v-for="item, index in btnGroup" :key="index" @click="btnClick(item)"
|
class="btn btn-link toolBarRight-btn">
|
<i :class="item.icon"></i>{{ item.name }}
|
</el-button>
|
</div>
|
|
<base-map v-show="currentComponent == 'map'" @close="closeBox"></base-map>
|
<layers-control :show="currentComponent == 'layers'" @close="closeBox"></layers-control>
|
<tool-list :moreToolShow="moreToolShow" @close="closeBox"></tool-list>
|
</template>
|
|
<script setup>
|
import baseMap from './scomponents/baseMap.vue'
|
import layersControl from './scomponents/layersControl.vue'
|
import toolList from './scomponents/toolList.vue'
|
|
import { useRouter } from 'vue-router'
|
const router = useRouter()
|
|
const currentComponent = ref('')
|
let moreToolShow = ref(false)
|
|
const btnGroup = [
|
{
|
name: '底图',
|
icon: 'fa fa-map',
|
key: 'map',
|
},
|
{
|
name: '图层',
|
icon: 'fa fa-tasks',
|
key: 'layers',
|
},
|
{
|
name: '工具',
|
icon: 'fa fa-cubes',
|
key: 'tool',
|
},
|
]
|
|
const btnClick = (item) => {
|
if (item.key == 'tool') {
|
moreToolShow.value = !moreToolShow.value
|
return
|
}
|
|
if (currentComponent.value == item.key) {
|
closeBox(item.key)
|
return
|
}
|
|
currentComponent.value = item.key
|
}
|
|
const closeBox = (type) => {
|
if (type == 'tool') {
|
moreToolShow.value = false
|
} else {
|
currentComponent.value = ''
|
}
|
}
|
|
watch(() => router.currentRoute.value.path,
|
(newPath, oldPath) => {
|
currentComponent.value = ''
|
moreToolShow.value = false
|
},
|
{ immediate: true }
|
)
|
</script>
|
|
<style lang="scss" scoped>
|
.toolBarRight {
|
display: flex;
|
flex-wrap: nowrap;
|
position: absolute;
|
right: 540px;
|
z-index: 99;
|
top: 110px;
|
|
border: 1px solid #4081CB;
|
border-radius: 4px;
|
background: rgba(135, 158, 199, 0.3);
|
box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
|
pointer-events: auto;
|
|
::v-deep(.el-button) {
|
margin-left: 0;
|
border: none;
|
border-radius: 0;
|
background: transparent;
|
|
&.btn {
|
padding: 4px 12px;
|
font-size: 14px;
|
line-height: 1.6;
|
-webkit-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
|
-o-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
|
transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
|
}
|
|
&.btn-link {
|
font-weight: 400;
|
color: #007bff;
|
text-decoration: none;
|
}
|
|
&.toolBarRight-btn {
|
list-style-type: none;
|
cursor: pointer;
|
border-right: solid 1px #2b2c2f;
|
color: #edffff;
|
}
|
|
&.toolBarRight-btn:last-child {
|
border-right: none;
|
}
|
|
i {
|
margin-right: 4px;
|
}
|
}
|
}
|
</style>
|
