171 lines
3.9 KiB
Vue
171 lines
3.9 KiB
Vue
<template>
|
|
<div class="setTool">
|
|
<div v-for="(item, i) of setList2" :key="item.id" class="set_item" @click="item.callback">
|
|
<svg-icon :icon-class="item.icon" :class-name="['air', 'header_public']"></svg-icon>
|
|
<div class="airList" v-show="airShow">
|
|
<div class="airList_item" v-for="item in list" :key="item.value" @click="handleCommand(item.value)">
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="set_item" :title="$t('headerTitles.iconTitle.' + item.icon)" v-for="(item, i) of setList" :key="item.id"
|
|
@click="item.callback(item)" @dblclick="item.dbcallback ? item.dbcallback(item) : ''">
|
|
<svg-icon :icon-class="item.icon" :class-name="[
|
|
item.icon,
|
|
item.className,
|
|
LocateCurrent && item.icon == 'locate' ? 'selected' : '',
|
|
item.icon == 'locate' && (isSuccess ? '' : 'satelliteFail'),
|
|
]"></svg-icon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import mixins from "./js/setTool";
|
|
|
|
export default {
|
|
name: "setTool",
|
|
mixins: [mixins],
|
|
data() {
|
|
return {
|
|
list: [
|
|
{
|
|
label: "机场",
|
|
value: "dock",
|
|
},
|
|
// {
|
|
// label: "遥控器",
|
|
// value: "remote",
|
|
// },
|
|
],
|
|
setList2: [
|
|
// {
|
|
// id: 6,
|
|
// index: 6,
|
|
// icon: "air",
|
|
// className: "header_public",
|
|
// dbcallback: null,
|
|
// callback: this.hhhhhh, //this.airLine
|
|
// },
|
|
],
|
|
setList: [
|
|
//北斗图标
|
|
// 标准版本
|
|
// {
|
|
// id: 0,
|
|
// index: 0,
|
|
// icon: "locate",
|
|
// className: "header_public",
|
|
// dbcallback: this.flyTo,
|
|
// callback: this.locate,
|
|
// },
|
|
{
|
|
id: 1,
|
|
index: 1,
|
|
icon: "reset",
|
|
className: "header_public",
|
|
dbcallback: null,
|
|
callback: this.resetShow,
|
|
},
|
|
{
|
|
id: 2,
|
|
index: 2,
|
|
icon: "fullScreen",
|
|
className: "header_public",
|
|
dbcallback: null,
|
|
callback: this.fullScreen,
|
|
},
|
|
// 青海海东excel文件预览
|
|
// {
|
|
// id: 5,
|
|
// index: 5,
|
|
// icon: "excel",
|
|
// className: "header_public",
|
|
// dbcallback: null,
|
|
// callback: this.tableSet,
|
|
// },
|
|
{
|
|
id: 3,
|
|
index: 3,
|
|
icon: "set",
|
|
className: "header_public",
|
|
dbcallback: null,
|
|
callback: this.setShow,
|
|
},
|
|
// {id: 4, index: 2, icon: 'layerTitleBg', className: 'header_public', callback: this.setShow},
|
|
{
|
|
id: 4,
|
|
index: 4,
|
|
icon: "logout",
|
|
className: "header_public",
|
|
dbcallback: null,
|
|
callback: this.logout,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.setTool {
|
|
height: 36px;
|
|
position: absolute;
|
|
right: 70px;
|
|
top: 7%;
|
|
border-radius: 5px;
|
|
background: var(--svg-headColorbg);
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid var(--svg-headColor3);
|
|
padding: 10px 0;
|
|
|
|
>div {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
::v-deep .el-dialog__body {
|
|
padding: 10px;
|
|
}
|
|
|
|
.airList {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 0;
|
|
width: 80px;
|
|
height: 100px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border: 1px solid rgba(0, 255, 255, 0.5);
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
text-align: center;
|
|
|
|
.airList_item {
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-dropdown-menu {
|
|
background-color: rgba(0, 0, 0, 1);
|
|
border-color: rgba(0, 255, 255, 0.5);
|
|
border-width: 2px;
|
|
}
|
|
|
|
.el-dropdown-menu__item {
|
|
color: #fff;
|
|
}
|
|
|
|
.el-dropdown-menu__item:focus,
|
|
.el-dropdown-menu__item:not(.is-disabled):hover {
|
|
background: rgba(0, 255, 255, 0.2);
|
|
color: rgba(0, 255, 255, 1);
|
|
}
|
|
|
|
.el-popper[x-placement^="bottom"] .popper__arrow {
|
|
display: none;
|
|
}
|
|
</style>
|