|
|
@@ -1,14 +1,8 @@
|
|
|
<template>
|
|
|
<div class="header_user_container">
|
|
|
<!-- 菜单 -->
|
|
|
- <el-menu
|
|
|
- :default-active="'/'"
|
|
|
- :unique-opened="true"
|
|
|
- :active-text-color="'#134BEA'"
|
|
|
- :collapse-transition="false"
|
|
|
- mode="horizontal"
|
|
|
- class="header_menu"
|
|
|
- >
|
|
|
+ <el-menu :default-active="'/'" :unique-opened="true" :active-text-color="'#134BEA'" :collapse-transition="false"
|
|
|
+ mode="horizontal" class="header_menu">
|
|
|
<!-- #TODO 目前写死 后面再改 -->
|
|
|
<!-- 根据 sidebarRouters 路由,生成菜单 -->
|
|
|
<!-- <sidebar-item
|
|
|
@@ -42,9 +36,9 @@
|
|
|
<!-- 时间 -->
|
|
|
<div class="time_box">
|
|
|
<!-- #TODO 动态获取实时变化 -->
|
|
|
- <span class="time_day">{{fmtTime?fmtTime[0]:null}}</span>
|
|
|
- <span class="time_weekday">星期{{weekday}}</span>
|
|
|
- <span class="time_date">{{fmtTime?fmtTime[1]:null}}</span>
|
|
|
+ <span class="time_day">{{ fmtTime ? fmtTime[0] : null }}</span>
|
|
|
+ <span class="time_weekday">星期{{ weekday }}</span>
|
|
|
+ <span class="time_date">{{ fmtTime ? fmtTime[1] : null }}</span>
|
|
|
</div>
|
|
|
<div class="header_user_line">|</div>
|
|
|
<!-- 图标 -->
|
|
|
@@ -57,22 +51,24 @@
|
|
|
<i class="el-icon-user-solid"></i>
|
|
|
<span>username</span>
|
|
|
<div class="header_user_line">/</div>
|
|
|
- <i class="el-icon-switch-button" style="margin-right: 2rem"></i>
|
|
|
+ <i class="el-icon-switch-button" style="margin-right: 2rem" @click="outUser"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { formatDate } from "@/utils/common";
|
|
|
+import { loginOut } from "@/api/login/login"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 当前时间
|
|
|
- fmtTime :[],
|
|
|
+ fmtTime: [],
|
|
|
// 星期数
|
|
|
- weekday:'',
|
|
|
+ weekday: '',
|
|
|
// 定时器
|
|
|
- timer:''
|
|
|
+ timer: '',
|
|
|
+ userToken: "",//用户token
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -81,11 +77,12 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
this.getTime();
|
|
|
}, 1);
|
|
|
- this.timer = setInterval(()=>{
|
|
|
+ this.timer = setInterval(() => {
|
|
|
this.getTime();
|
|
|
- },1000)
|
|
|
+ }, 1000)
|
|
|
+ this.getToken()
|
|
|
},
|
|
|
- beforeDestroy(){
|
|
|
+ beforeDestroy() {
|
|
|
// 组件销毁前清除定时器
|
|
|
clearInterval(timer)
|
|
|
},
|
|
|
@@ -98,6 +95,20 @@ export default {
|
|
|
this.weekday = ["日", "一", "二", "三", "四", "五", "六"][thisDay]
|
|
|
this.fmtTime = formatDate(time).split(' ')
|
|
|
},
|
|
|
+ async outUser() {
|
|
|
+ let res = await loginOut({sessionid:this.userToken})
|
|
|
+ if(res ==='ok'){
|
|
|
+ this.$router.push("/login")
|
|
|
+ localStorage.removeItem('userInfo')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getToken() {
|
|
|
+ let userInfo = localStorage.getItem('userInfo')
|
|
|
+ if (userInfo) {
|
|
|
+ userInfo = JSON.parse(userInfo)
|
|
|
+ this.userToken = userInfo.sessionid
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -106,19 +117,23 @@ export default {
|
|
|
.header_user_container {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.time_box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: default;
|
|
|
font-size: 1.4rem;
|
|
|
color: #516380;
|
|
|
+
|
|
|
.time_day {
|
|
|
font-family: DS4Font;
|
|
|
width: 8rem;
|
|
|
}
|
|
|
+
|
|
|
.time_weekday {
|
|
|
margin: 0 1rem;
|
|
|
}
|
|
|
+
|
|
|
.time_date {
|
|
|
font-family: DS4Font;
|
|
|
margin-right: 2rem;
|
|
|
@@ -126,19 +141,23 @@ export default {
|
|
|
letter-spacing: 0.3rem;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.icon_box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
i {
|
|
|
font-size: 1.8rem;
|
|
|
color: #00cefb;
|
|
|
margin-right: 0.5rem;
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
font-size: 1.4rem;
|
|
|
color: #516380;
|
|
|
}
|
|
|
+
|
|
|
.header_user_line {
|
|
|
font-size: 1.33rem;
|
|
|
margin: 0 2rem;
|
|
|
@@ -147,15 +166,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.header_menu {
|
|
|
height: 5rem;
|
|
|
}
|
|
|
+
|
|
|
.header_user_line {
|
|
|
font-size: 1.33rem;
|
|
|
margin-right: 2rem;
|
|
|
color: #7a13e1;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .el-menu-item {
|
|
|
height: 5rem !important;
|
|
|
font-size: 1.33rem !important;
|
|
|
@@ -164,6 +186,7 @@ export default {
|
|
|
padding: 0 !important;
|
|
|
margin-right: 2rem !important;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .is-active {
|
|
|
border-bottom: 4px solid #134bea !important;
|
|
|
}
|