407 lines
7.9 KiB
Vue
407 lines
7.9 KiB
Vue
<template>
|
||
<header>
|
||
<div id="topnavbar">
|
||
<div class="logo logo2 cursor">
|
||
<img src="../../../static/images/logo.png" alt="">
|
||
</div>
|
||
<div id="topnanv" v-show="!collapse || navShow">
|
||
<nav>
|
||
<ul class="content clearfix">
|
||
<li class="dropdown" v-for="(item,index) in menu" :key="index">
|
||
<a href="javascript:void(0);" @click="routerTurn(item.path)">{{item.name}}<img v-show="item.children.length" src="../../../static/images/arrow-down.png" alt=""></a>
|
||
<ul class="sub-menu" v-show="item.children.length">
|
||
<li v-for="(item1,index1) in item.children" :key="index1">
|
||
<a href="javascript:void(0);" @click="routerTurn(item1.path)">{{item1.name}}</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<el-dropdown trigger="click">
|
||
<span class="el-dropdown-link userClass">
|
||
<a href="javascript:void(0);">admin<img src="../../../static/images/arrow-down.png" alt=""></a>
|
||
</span>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item>
|
||
<a href="javascript:void(0);" @click="routerTurn('personalCenter')">个人中心</a>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<div class="menu2" >
|
||
<i class="el-icon-menu" @click="handleMenu"></i>
|
||
</div>
|
||
<div class="fr">
|
||
<i v-if="loginStatuss" class="logOut" @click="loginOut">logOut</i>
|
||
</div>
|
||
<!-- <div class="fr loginReg ovh">
|
||
<div v-if="loginStatuss"FV>
|
||
<span>welcome！</span>
|
||
<el-tooltip v-if="loginStatuss.length>5" :content="loginStatuss" placement="bottom" effect="dark">
|
||
<span class="ellCu">{{ loginStatuss }}</span>
|
||
</el-tooltip>
|
||
<span v-else class="ellCu">
|
||
{{ $store.state.app.cu }}
|
||
</span>
|
||
</div>
|
||
<div v-else class="login cursor" @click="loginIn"> <img src="../../../static/images/形状 1@2x.png" alt=""> LOGIN | REGISTER</div>
|
||
</div> -->
|
||
</div>
|
||
</header>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
logoutCas
|
||
} from '@/utils/logoutCas' // get token from cookie
|
||
import {
|
||
removeToken
|
||
} from '@/utils/auth' // get token from cookie
|
||
export default {
|
||
name: 'headers',
|
||
props: {
|
||
msg: String
|
||
},
|
||
data(){
|
||
return {
|
||
collapse:true,
|
||
loginStatuss: '',
|
||
menu:[
|
||
{
|
||
name:"首页",
|
||
path:"home",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"数据检索",
|
||
path:"",
|
||
children:[
|
||
{
|
||
name:"数据检索",
|
||
path:"dataSearch",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"航次详情",
|
||
path:"voyagedetail",
|
||
children:[]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name:"统计分析",
|
||
path:"analyse",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"数据资源",
|
||
path:"",
|
||
children:[
|
||
{
|
||
name:"海洋地球物理与物理海洋信息库",
|
||
path:"physicalIndex",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"海洋生物样品信息库",
|
||
path:"biologyIndex",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"深海海洋视频音像信息库",
|
||
path:"phoneVideoIndex",
|
||
children:[]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name:"数据汇交",
|
||
path:"voyageDelivery",
|
||
children:[
|
||
{
|
||
name:"航次数据汇交",
|
||
path:"voyageDelivery",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"数据样品信息汇交",
|
||
path:"sampleRemitt",
|
||
children:[]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name:"字典管理",
|
||
children:[
|
||
{
|
||
name:"数据样品类型",
|
||
path:"dataSampleType",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"设备类型",
|
||
path:"docType",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"平台类型",
|
||
path:"platformType",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"参航单位",
|
||
path:"visitorUnit",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"共享单位",
|
||
path:"sharedUnit",
|
||
children:[]
|
||
},
|
||
]
|
||
},
|
||
{
|
||
name:"系统管理",
|
||
children:[
|
||
{
|
||
name:"用户管理",
|
||
path:"userManage",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"角色管理",
|
||
path:"roleManage",
|
||
children:[]
|
||
},
|
||
{
|
||
name:"单位管理",
|
||
path:"unitManage",
|
||
children:[]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name:"关于我们",
|
||
path:"",
|
||
children:[]
|
||
},
|
||
// {
|
||
// name:"个人中心",
|
||
// path:"personalCenter",
|
||
// children:[]
|
||
// },
|
||
// {
|
||
// name:"登录",
|
||
// path:"login",
|
||
// children:[]
|
||
// },
|
||
|
||
],
|
||
nowPathName: '',
|
||
navShow:false,
|
||
}
|
||
},
|
||
created() {
|
||
this.loginStatuss = this.$store.state.app.cu
|
||
// this.loginStatuss = 'test_jisjf'
|
||
|
||
},
|
||
mounted(){
|
||
$('.dropdown').hover(
|
||
function () {
|
||
$(this).children('.sub-menu').slideDown(200);
|
||
},
|
||
function () {
|
||
$(this).children('.sub-menu').slideUp(200);
|
||
}
|
||
);
|
||
this.changeClass()
|
||
//浏览器的窗口大小发生改变时执行
|
||
window.onresize = () => {
|
||
return (() => {
|
||
this.changeClass();
|
||
})()
|
||
}
|
||
this.nowPathName = this.$route.name
|
||
|
||
},
|
||
methods:{
|
||
//当屏幕小于1400时添加一个属性，大于的时候删除属性
|
||
changeClass() {
|
||
let ww = document.body.clientWidth;
|
||
if( ww > 1300 ){
|
||
this.navShow=true
|
||
} else{
|
||
this.navShow=false
|
||
|
||
}
|
||
},
|
||
handleMenu(){
|
||
this.collapse=!this.collapse
|
||
},
|
||
activeMethod(item){
|
||
if(this.nowPathName==item.path){
|
||
return 'activeClass'
|
||
}else{
|
||
return ''
|
||
}
|
||
},
|
||
routerTurn(name){
|
||
this.nowPathName = name
|
||
if(name!=this.$route.name && name){
|
||
// debugger
|
||
this.$router.push({name:name})
|
||
this.collapse=true
|
||
}
|
||
},
|
||
// 中英文切换
|
||
handleCommand(value) {
|
||
localStorage.setItem('user_lang', value)
|
||
this.$i18n.locale = value// 改变当前语言
|
||
location.reload()
|
||
},
|
||
handleClick() {
|
||
console.log(this.activeName)
|
||
},
|
||
loginIn() {
|
||
window.location.href = process.env.VUE_APP_CAS_LOGIN_FRONT
|
||
},
|
||
loginOut() {
|
||
this.$confirm('Are you sure you want to log out?', 'hint', {
|
||
confirmButtonText: 'Sure',
|
||
cancelButtonText: 'Cancel',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
removeToken()
|
||
this.loginStatuss = ''
|
||
window.sessionStorage.setItem('cu', '')
|
||
window.sessionStorage.setItem('userID', '')
|
||
logoutCas(process.env.VUE_APP_CAS_LOGOUT_URL_FRONT, true)
|
||
}).catch(() => {
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.fr {
|
||
float: right;
|
||
}
|
||
.loginReg {
|
||
height: 32px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
margin-top: 24px;
|
||
}
|
||
.topic {
|
||
width: 100%;
|
||
height: 50px;
|
||
position: relative;
|
||
background: #1d2a73;
|
||
// padding: 0 20px;
|
||
overflow: hidden;
|
||
}
|
||
.loginReg .login{
|
||
color:white;
|
||
|
||
// text-decoration: underline;
|
||
}
|
||
.loginReg img{
|
||
width:13px;
|
||
padding-right:10px;
|
||
margin-bottom:-2px;
|
||
}
|
||
.topic .fr i{
|
||
font-style: normal;
|
||
color:white;
|
||
width: 56px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
margin-top: 9px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
}
|
||
.ellCu{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width:40px;
|
||
|
||
}
|
||
.loginReg>div{
|
||
display: inline-block;
|
||
width:148px;
|
||
}
|
||
.loginReg>div span{
|
||
float:left;
|
||
}
|
||
.el-icon-menu{
|
||
float:right;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.el-icon-menu:hover{
|
||
color:red;
|
||
}
|
||
.menu2{
|
||
width:25%;
|
||
display: none;
|
||
}
|
||
|
||
// .menu>li>a
|
||
@media (max-width: 1300px){
|
||
.container_a{
|
||
padding-top:0;
|
||
}
|
||
.menu2{
|
||
display: block;
|
||
}
|
||
header{
|
||
position: relative;
|
||
}
|
||
header #topnanv{
|
||
width: 50%;
|
||
margin:0 auto;
|
||
left: 22%;
|
||
top: 90px;
|
||
position: absolute;
|
||
z-index: 45;
|
||
|
||
nav>ul{
|
||
background: #253340;
|
||
}
|
||
nav>ul>li{
|
||
text-align: left;
|
||
display: block;
|
||
float:none;
|
||
line-height: 60px;
|
||
}
|
||
nav a{
|
||
margin: -3px 35px;
|
||
}
|
||
nav>ul li>ul{
|
||
width:87%;
|
||
left: 34px;
|
||
top: 50px;
|
||
}
|
||
}
|
||
}
|
||
.userClass{
|
||
color:white;
|
||
font-size: 15px;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
|
||
|