init
This commit is contained in:
316
src/layout/components/Navbar.vue
Normal file
316
src/layout/components/Navbar.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
|
||||
<div v-if="showTitle" style="font-size: 20px; float: left; font-weight: bold; padding-left: 20px; color: #606266">
|
||||
<img src="../../assets/img/cnbm.png" style="width: 1.6em; height: 1.6em; position: relative; top: .4em" alt="">
|
||||
{{ 'title' | i18nFilter }}
|
||||
</div>
|
||||
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||||
|
||||
<div class="right-menu">
|
||||
|
||||
<div v-if="showhome" class="right-menu-back" @click="toHome">
|
||||
<svg-icon class="item-icon" icon-class="home" />
|
||||
{{ 'navbar.homepage' | i18nFilter }}
|
||||
</div>
|
||||
<div class="right-menu-back">
|
||||
<el-badge :value="alarmList.length" class="item" style="line-height: 0; margin: 0 10px;" @click.native="toAlarm">
|
||||
<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<template>
|
||||
<lang-select class="right-menu-item hover-effect" />
|
||||
</template>
|
||||
<div v-if="showhome" class="right-menu-back">
|
||||
<a href="Lodap.zip"><i class="el-icon-download" /></a>
|
||||
</div>
|
||||
<div class="right-menu-back">
|
||||
<i class="el-icon-alarm-clock" />
|
||||
{{ formatTime }}
|
||||
</div>
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="require('@/assets/img/head.png')" class="user-avatar">
|
||||
<div class="avatar-username">{{ username }}</div>
|
||||
<!-- <i class="el-icon-caret-bottom" /> -->
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link to="/profile/index">
|
||||
<el-dropdown-item>
|
||||
<svg-icon class="item-icon" icon-class="user" />
|
||||
{{ 'navbar.profile' | i18nFilter }}
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<el-dropdown-item @click.native="toHome">
|
||||
<svg-icon class="item-icon" icon-class="help" />
|
||||
{{ 'navbar.help' | i18nFilter }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="logout">
|
||||
<svg-icon class="item-icon" icon-class="logout" />
|
||||
{{ 'navbar.logOut' | i18nFilter }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<!-- <div class="right-menu-back" @click="toHome">
|
||||
<svg-icon class="item-icon" icon-class="help" />
|
||||
{{ 'navbar.help' | i18nFilter }}
|
||||
</div>
|
||||
|
||||
<div class="right-menu-back" @click="logout">
|
||||
<svg-icon class="item-icon" icon-class="logout" />
|
||||
{{ 'navbar.logOut' | i18nFilter }}
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { alarmInfoList } from '@/api/basicData/AlarmManagement/alarmInfo'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import LangSelect from '@/components/LangSelect'
|
||||
import moment from 'moment'
|
||||
|
||||
let logoutInterval = null
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
Hamburger,
|
||||
LangSelect
|
||||
},
|
||||
props: {
|
||||
showhome: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return true
|
||||
}
|
||||
},
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logoutTime: 1800000,
|
||||
alarmList: [],
|
||||
blurTime: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
'username',
|
||||
'choicepart'
|
||||
]),
|
||||
formatTime() {
|
||||
return moment(this.logoutTime - 28800000).format('HH:mm:ss')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
logoutTime: function(val) {
|
||||
if (val <= 0) {
|
||||
this.logout()
|
||||
}
|
||||
},
|
||||
$route: function() {
|
||||
this.getAlarm()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAlarm()
|
||||
logoutInterval = setInterval(() => {
|
||||
this.logoutTime -= 1000
|
||||
}, 1000)
|
||||
addEventListener('click', this.logoutTimeReset)
|
||||
addEventListener('keydown', this.logoutTimeReset)
|
||||
addEventListener('visibilitychange', this.visibilitychangeListener)
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(logoutInterval)
|
||||
removeEventListener('click', this.logoutTimeReset)
|
||||
removeEventListener('keydown', this.logoutTimeReset)
|
||||
removeEventListener('visibilitychange', this.visibilitychangeListener)
|
||||
},
|
||||
methods: {
|
||||
// 浏览器失去焦点
|
||||
winBlur() {
|
||||
this.blurTime = new Date()
|
||||
clearInterval(logoutInterval)
|
||||
},
|
||||
// 浏览器获取焦点
|
||||
winFocus() {
|
||||
if (this.logoutTime - (new Date() - this.blurTime).valueOf() <= 0) {
|
||||
this.logout()
|
||||
} else {
|
||||
this.logoutTime -= (new Date() - this.blurTime).valueOf()
|
||||
logoutInterval = setInterval(() => {
|
||||
this.logoutTime -= 1000
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
// 重置退出时间
|
||||
logoutTimeReset() {
|
||||
this.logoutTime = 1800000
|
||||
},
|
||||
visibilitychangeListener() {
|
||||
if (document.hidden) {
|
||||
this.winBlur()
|
||||
} else {
|
||||
this.winFocus()
|
||||
}
|
||||
},
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
async logout() {
|
||||
console.log("sessionStorage.getItem('loginspc')", sessionStorage.getItem('loginspc'))
|
||||
if (sessionStorage.getItem('loginspc') === 'login') {
|
||||
const spcUrl = `/spc/upms/userinfo/logoutUser?account=${'ZJCadmin'}`
|
||||
axios.get(spcUrl).then(res => {
|
||||
if (res.data.code !== 'OK') {
|
||||
this.$message.error(this.$t('module.quality.spc.error'))
|
||||
}
|
||||
sessionStorage.setItem('loginspc', 'logout')
|
||||
})
|
||||
}
|
||||
await this.$store.dispatch('user/logout')
|
||||
console.log('`/login?redirect=${this.$route.fullPath}`', `/login?redirect=${this.$route.fullPath}`)
|
||||
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
||||
clearInterval(logoutInterval)
|
||||
},
|
||||
async toHome() {
|
||||
this.$store.dispatch('app/setChoicepart')
|
||||
this.$router.push('/')
|
||||
},
|
||||
getAlarm() {
|
||||
alarmInfoList({
|
||||
current: 1,
|
||||
size: 1000,
|
||||
alarmType: '',
|
||||
code: '',
|
||||
alarmGrade: ''
|
||||
}).then(response => {
|
||||
if (response.data.records) {
|
||||
this.alarmList = response.data.records
|
||||
} else {
|
||||
this.alarmList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
toAlarm() {
|
||||
this.$router.push('/AlarmManagement/AlarmInfo')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 46px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.errLog-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.right-menu-back{
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
font-size: 14px;
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
color: #5a5e66;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 20px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.avatar-username {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -14px;
|
||||
}
|
||||
|
||||
.el-icon-caret-bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user