385 lines
11 KiB
Vue
385 lines
11 KiB
Vue
<template>
|
||
<div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''" style="padding-right: 23px;">
|
||
<hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||
|
||
<div v-if="showTitle" style="color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 5px">
|
||
<img src="../../assets/img/cnbm.png" style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px" 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" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" />
|
||
{{ 'navbar.homepage' | i18nFilter }}
|
||
</div> -->
|
||
<div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back" @click="toHome">
|
||
<svg-icon class="item-icon" icon-class="home" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" /></div>
|
||
<el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="avatar-container right-menu-item hover-effect" trigger="click">
|
||
<el-badge :hidden="alarmNum>0?false:true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm">
|
||
<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
|
||
</el-badge>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item>暂无数据</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
|
||
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'countdown' : 'countdown2'" />
|
||
{{ formatTime }}
|
||
</div>
|
||
<template>
|
||
<lang-select :style="showTitle ? 'color: #fff' : ''" class="right-menu-item hover-effect" :is-show="showTitle" />
|
||
</template>
|
||
<div class="right-menu-back">
|
||
<a href="Lodap.zip"><svg-icon :style="showTitle ? 'color: #fff' : ''" style="width: 24px; height: 24px; vertical-align: -7px" icon-class="download" /></a>
|
||
</div>
|
||
<div class="right-menu-back">
|
||
<a href="google.exe"><svg-icon :style="showTitle ? 'color: #fff' : ''" style="width: 24px; height: 24px; vertical-align: -7px" icon-class="chrome" /></a>
|
||
</div>
|
||
<el-dropdown :style="showTitle ? 'color: #fff' : 'color: #000'" 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" :title="username">管理员</div>
|
||
<div class="avatar-roles" :title="roles.join(',')">超级管理员</div>
|
||
</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 :style="showTitle ? 'borderColor: #fff' : 'borderColor: #979797'" class="right-menu-back verticalBar" />
|
||
<div :style="showTitle ? 'color: #fff' : 'color: red'" class="right-menu-back">
|
||
<el-tooltip class="item" effect="dark" placement="bottom-end">
|
||
<div slot="content">{{ 'copyright.copyright' | i18nFilter }}：{{ 'copyright.company' | i18nFilter }} <br>{{ 'copyright.version' | i18nFilter }}：3.0</div>
|
||
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'introduce' : 'introduce2'" />
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios'
|
||
import { mapGetters } from 'vuex'
|
||
import Breadcrumb from '@/components/Breadcrumb'
|
||
import Hamburger from '@/components/Hamburger'
|
||
import LangSelect from '@/components/LangSelect'
|
||
import moment from 'moment'
|
||
|
||
let logoutInterval = null
|
||
const timeInterval = null
|
||
|
||
export default {
|
||
components: {
|
||
Breadcrumb,
|
||
Hamburger,
|
||
LangSelect
|
||
},
|
||
props: {
|
||
showhome: {
|
||
type: Boolean,
|
||
default: () => {
|
||
return true
|
||
}
|
||
},
|
||
showTitle: {
|
||
type: Boolean,
|
||
default: () => {
|
||
return false
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
logoutTime: 1800000,
|
||
alarmNum: 0,
|
||
eqAlarmNum: 0,
|
||
MESAlarmNum: 0,
|
||
blurTime: null,
|
||
time: 30,
|
||
showTime: '',
|
||
showDay: '',
|
||
m: '',
|
||
s: '',
|
||
h: ''
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'sidebar',
|
||
'avatar',
|
||
'username',
|
||
'choicepart',
|
||
'roles'
|
||
]),
|
||
formatTime() {
|
||
return moment(this.logoutTime - 28800000).format('HH:mm:ss')
|
||
}
|
||
},
|
||
watch: {
|
||
logoutTime: function(val) {
|
||
if (val <= 0) {
|
||
this.logout()
|
||
}
|
||
},
|
||
$route: function() {
|
||
this.getAlarm()
|
||
}
|
||
},
|
||
created() {
|
||
// this.getTime()
|
||
},
|
||
mounted() {
|
||
this.getAlarm()
|
||
logoutInterval = setInterval(() => {
|
||
this.logoutTime -= 1000
|
||
}, 1000)
|
||
addEventListener('click', this.logoutTimeReset)
|
||
addEventListener('keydown', this.logoutTimeReset)
|
||
addEventListener('visibilitychange', this.visibilitychangeListener)
|
||
},
|
||
destroyed() {
|
||
clearInterval(logoutInterval)
|
||
clearInterval(timeInterval)
|
||
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 = this.time * 60000
|
||
},
|
||
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('/')
|
||
if (localStorage.getItem('param')) {
|
||
const param = JSON.parse(window.atob(localStorage.getItem('param')))
|
||
window.location = 'https://www.baidu.com/?' + param
|
||
}
|
||
},
|
||
handleAlarm() {},
|
||
getAlarm() {
|
||
// getAlarmNum().then(response => {
|
||
// if (response.data) {
|
||
// this.alarmNum = response.data.alarmNum
|
||
// } else {
|
||
// this.alarmNum = 0
|
||
// }
|
||
// })
|
||
// getEqAlarmNum().then(response => {
|
||
// if (response.data) {
|
||
// this.eqAlarmNum = response.data.alarmNum
|
||
// } else {
|
||
// this.eqAlarmNum = 0
|
||
// }
|
||
// })
|
||
// getMESAlarmNum().then(response => {
|
||
// if (response.data) {
|
||
// this.MESAlarmNum = response.data.alarmNum
|
||
// } else {
|
||
// this.MESAlarmNum = 0
|
||
// }
|
||
// })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.time-menu {
|
||
display: inline-block;
|
||
}
|
||
.navbar {
|
||
height: 48px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: #fff;
|
||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||
|
||
.hamburger-container {
|
||
line-height: 48px;
|
||
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: 48px;
|
||
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;
|
||
}
|
||
|
||
.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)
|
||
}
|
||
}
|
||
}
|
||
.verticalBar {
|
||
height: 32px;
|
||
width: 0;
|
||
opacity: 0.49;
|
||
padding: 0;
|
||
border-right: 1px solid #fff;
|
||
position: relative;
|
||
top: -8px;
|
||
}
|
||
.avatar-container {
|
||
.avatar-wrapper {
|
||
padding-top: 9px;
|
||
position: relative;
|
||
width: 140px;
|
||
height: 48px;
|
||
.user-avatar {
|
||
cursor: pointer;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 16px;
|
||
}
|
||
.avatar-username {
|
||
width: 80px;
|
||
text-align: center;
|
||
position: absolute;
|
||
font-size: 14px;
|
||
right: 13px;
|
||
top: 3px;
|
||
line-height: 25px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
.avatar-roles{
|
||
width: 80px;
|
||
text-align: center;
|
||
position: absolute;
|
||
font-size: 14px;
|
||
top: 20px;
|
||
right: 13px;
|
||
line-height: 25px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
opacity: 0.64;
|
||
}
|
||
.el-icon-caret-bottom {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: -20px;
|
||
top: 25px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dropdown-badge {
|
||
background: #ff4949;
|
||
color: #fff;
|
||
line-height: 16px;
|
||
border-radius: 8px;
|
||
padding: 0 8px;
|
||
float: right;
|
||
margin-left: 5px;
|
||
position: relative;
|
||
top: 7px;
|
||
}
|
||
.navbar-alarmbox {
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|