<template>
|
<div class="avue-top">
|
<div class="top-bar__left">
|
<div
|
v-if="showCollapse"
|
:class="[{ 'avue-breadcrumb--active': isCollapse }]"
|
class="avue-breadcrumb">
|
<i
|
class="icon-navicon"
|
@click="setCollapse"/>
|
</div>
|
</div>
|
<div class="top-bar__title top-bar__title_tag">
|
<tags/>
|
</div>
|
<div class="top-bar__right">
|
<!-- <el-tooltip
|
v-if="showLock"
|
effect="dark"
|
content="主题设置"
|
placement="bottom">
|
<div class="top-bar__item">
|
<top-theme></top-theme>
|
</div>
|
</el-tooltip> -->
|
<el-tooltip
|
v-if="showLock"
|
effect="dark"
|
content="工作台"
|
placement="bottom">
|
<router-link to="/workstationoperate-form">
|
<div class="top-bar__item">
|
<i class="fa fa-desktop"/>
|
</div>
|
</router-link>
|
</el-tooltip>
|
<el-tooltip
|
v-if="showLock"
|
effect="dark"
|
content="锁屏"
|
placement="bottom">
|
<div class="top-bar__item">
|
<top-lock/>
|
</div>
|
</el-tooltip>
|
<el-tooltip
|
v-if="showFullScreen"
|
:content="isFullScreen?'退出全屏':'全屏'"
|
effect="dark"
|
placement="bottom">
|
<div class="top-bar__item">
|
<i
|
:class="isFullScreen?'fa fa-compress':'fa fa-expand'"
|
@click="handleScreen"/>
|
</div>
|
</el-tooltip>
|
<el-tooltip
|
v-if="userInfo.avatar"
|
effect="dark"
|
content="用户头像"
|
placement="bottom">
|
<!-- <img
|
id="thumbnail"
|
class="el-tooltip top-bar__img"> -->
|
</el-tooltip>
|
<div class="top-user-info">
|
<span>
|
{{ userInfo.username }}
|
</span>
|
<el-divider direction="vertical" v-if="userInfo.staffName"></el-divider>
|
|
<div class="top-staff-post" v-if="userInfo.staffName && userInfo.post">
|
{{userInfo.staffName}} - {{userInfo.post}}
|
</div>
|
<div class="top-staff-post" v-else-if="userInfo.staffName" >
|
{{userInfo.staffName}}
|
</div>
|
</div>
|
<el-dropdown>
|
<span class="el-dropdown-link">
|
<i class="el-icon-arrow-down el-icon--right"/>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item divided>
|
<router-link to="/">首页</router-link>
|
</el-dropdown-item>
|
<el-dropdown-item divided>
|
<router-link to="/info/index">个人信息</router-link>
|
</el-dropdown-item>
|
<el-dropdown-item
|
divided
|
@click.native="$refs.seting.open()">界面设置
|
</el-dropdown-item>
|
<el-dropdown-item
|
divided
|
@click.native="logout">退出系统
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<top-setting ref="seting" />
|
</div>
|
</div>
|
</template>
|
<script>
|
import {mapGetters, mapState} from 'vuex'
|
import {fullscreenToggel, handleImg, listenfullscreen, setTheme} from '@/util/util'
|
import topLock from './top-lock'
|
import topMenu from './top-menu'
|
import topTheme from './top-theme'
|
import topLogs from './top-logs'
|
import topColor from './top-color'
|
import topSetting from './top-setting'
|
import tags from '../tags'
|
|
export default {
|
name: 'Top',
|
components: {
|
topLock,
|
topMenu,
|
topTheme,
|
topLogs,
|
topColor,
|
topSetting,
|
tags
|
},
|
filters: {},
|
data() {
|
return {}
|
},
|
computed: {
|
...mapState({
|
showDebug: state => state.common.showDebug,
|
showTheme: state => state.common.showTheme,
|
showLock: state => state.common.showLock,
|
showFullScreen: state => state.common.showFullScreen,
|
showCollapse: state => state.common.showCollapse,
|
showMenu: state => state.common.showMenu,
|
showColor: state => state.common.showColor
|
}),
|
...mapGetters([
|
'userInfo',
|
'isFullScreen',
|
'tagWel',
|
'tagList',
|
'isCollapse',
|
'tag',
|
'logsLen',
|
'logsFlag'
|
])
|
},
|
created() {
|
handleImg(this.userInfo.avatar, 'thumbnail')
|
},
|
mounted() {
|
listenfullscreen(this.setScreen);
|
this.initTopTheme();
|
},
|
methods: {
|
initTopTheme() {
|
this.$store.commit('SET_THEME_NAME', 'default');
|
setTheme('default');
|
},
|
handleScreen() {
|
fullscreenToggel()
|
},
|
setCollapse() {
|
this.$store.commit('SET_COLLAPSE')
|
},
|
setScreen() {
|
this.$store.commit('SET_FULLSCREEN')
|
},
|
logout() {
|
this.$confirm('是否退出系统, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnClickModal: false,
|
type: 'warning'
|
}).then(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
this.$router.push({path: '/login'})
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.top-bar__title_tag {
|
padding: 0px 325px 0px 40px !important;
|
}
|
|
.top-bar__title_tag .el-tabs__nav-prev, .top-bar__title_tag .el-tabs__nav-next {
|
line-height: 50px !important;
|
}
|
|
.top-bar__title_tag .el-tabs--card > .el-tabs__header .el-tabs__item {
|
height: 50px !important;
|
line-height: 50px !important;
|
}
|
|
.top-bar__title_tag .avue-tags__box {
|
padding-right: 0px;
|
}
|
|
.top-bar__left, .top-bar__right {
|
height: 50px !important;
|
}
|
|
.top-user-info {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
align-items: center;
|
height: 50px;
|
font-size: 14px;
|
}
|
|
.top-staff-post{
|
background-color: #48243e;
|
border-radius: 25px;
|
padding: 4px 10px;
|
font-size: 12px;
|
}
|
|
.avue-top {
|
height: 60px !important;
|
}
|
|
.top-bar__left i {
|
line-height: 50px !important;
|
}
|
|
.avue-logo {
|
height: 60px !important;
|
// line-height: 80px !important;
|
}
|
|
.avue-logo .el-image__inner{
|
vertical-align: middle !important;
|
}
|
|
.top-bar__item .el-badge__content.is-fixed {
|
top: 17px !important;
|
}
|
</style>
|
