<template>
|
<div class="avue-top">
|
<div class="top-bar__title">
|
<img :src="logoUrl" alt="">
|
<span>低空飞行监管子系统</span>
|
</div>
|
|
<div class="top-bar__right">
|
<div class="top-user">
|
<div class="icon-box">
|
<img class="gateway" @click="jumpMH" src="@/assets/images/mh.png" alt="进入门户" title="进入门户">
|
</div>
|
|
<el-dropdown popper-class="command-custom-dropdown">
|
<span class="el-dropdown-link">
|
<img class="top-bar__img" :src="userInfo.avatar" alt="" />
|
</span>
|
|
<template #dropdown>
|
<el-dropdown-menu>
|
<!-- <el-dropdown-item>
|
<router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
|
</el-dropdown-item>-->
|
<!-- <el-dropdown-item>
|
<router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
|
</el-dropdown-item> -->
|
<el-dropdown-item @click="logout" divided>{{ $t('navbar.logOut') }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<top-setting></top-setting>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import logo from '@/assets/images/topContainer/logo.png'
|
|
import { mapGetters } from 'vuex'
|
import topLock from './top-lock.vue'
|
import topMenu from './top-menu.vue'
|
import topSearch from './top-search.vue'
|
import topTheme from './top-theme.vue'
|
import topLogs from './top-logs.vue'
|
import topColor from './top-color.vue'
|
import topLang from './top-lang.vue'
|
import topFull from './top-full.vue'
|
import topQna from './top-qna.vue'
|
import topSetting from '../setting.vue'
|
|
export default {
|
components: {
|
topLock,
|
topMenu,
|
topSearch,
|
topTheme,
|
topLogs,
|
topColor,
|
topLang,
|
topFull,
|
topQna,
|
topSetting,
|
},
|
name: 'top',
|
data () {
|
return {
|
logoUrl: logo,
|
}
|
},
|
filters: {},
|
created () { },
|
computed: {
|
...mapGetters([
|
'setting',
|
'userInfo',
|
'tagWel',
|
'bsTagList',
|
'tag',
|
'logsLen',
|
'logsFlag',
|
]),
|
},
|
methods: {
|
logout () {
|
ElMessageBox.confirm(`是否退出系统, 是否继续?`, '提示', {
|
type: 'warning',
|
customClass: 'command-page-view-message-box',
|
confirmButtonClass: 'command-message-box-confirm',
|
cancelButtonClass: 'command-message-box-cancel',
|
}).then(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
const env = import.meta.env.VITE_APP_ENV
|
const adminUrl = import.meta.env.VITE_APP_DASHBOARD_URL
|
this.$router.push({ path: '/login' })
|
// env === 'development' ? this.$router.push({ path: '/login' }) : window.location.replace(`${adminUrl}#/login`)
|
})
|
})
|
},
|
jumpMH () {
|
// const adminUrl = import.meta.env.VITE_APP_DASHBOARD_URL
|
// window.location.href = `${adminUrl}#/gatewayPage`
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.avue-top {
|
display: flex;
|
justify-content: space-between;
|
height: 100%;
|
background: url('@/assets/images/topContainer/top-bg.png') center / 100% 100% no-repeat !important;
|
pointer-events: none;
|
}
|
|
.top-bar__left {
|
flex: 0 0 auto;
|
}
|
|
.top-bar__title {
|
margin-top: 16px;
|
margin-left: 30px;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
height: pxToVh(48);
|
|
img {
|
margin-right: 17px;
|
width: 36.15px;
|
height: 28px;
|
}
|
|
span {
|
width: 353px;
|
height: 43px;
|
font-family: PangMen;
|
font-weight: 400;
|
font-size: 36px;
|
color: #FFFFFF;
|
letter-spacing: 3px;
|
text-shadow: 3px 3px 0px rgba(0, 13, 42, 0.27);
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
}
|
|
.top-bar__right {
|
margin-right: 28px;
|
padding-top: 16px;
|
flex: 0 0 auto;
|
display: flex !important;
|
align-items: flex-start;
|
height: 100%;
|
pointer-events: auto;
|
box-sizing: border-box;
|
|
.icon-box {
|
margin-top: 6px;
|
margin-right: 30px;
|
display: flex;
|
align-items: center;
|
gap: 0 20px;
|
|
.gateway {
|
width: 21px;
|
height: 18px;
|
}
|
|
>* {
|
cursor: pointer;
|
}
|
}
|
}
|
|
.top-bar__item {
|
margin-right: 15px;
|
display: inline-block !important;
|
}
|
|
.top-user {
|
display: flex;
|
align-items: center;
|
}
|
|
.top-bar__img {
|
margin-top: 5px;
|
width: 20px;
|
height: 20px;
|
border: 2px solid #383874;
|
border-radius: 50%;
|
}
|
|
.el-dropdown-link {
|
cursor: pointer;
|
color: #606266;
|
}
|
|
.el-dropdown-link:hover {
|
color: #409EFF;
|
}
|
</style>
|
