2022-10-19 17:01:55 +08:00
|
|
|
|
<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">
|
|
|
|
|
|
|
2022-11-03 10:19:19 +08:00
|
|
|
|
<!-- <div v-if="showhome" class="right-menu-back" @click="toHome">
|
2022-10-19 17:01:55 +08:00
|
|
|
|
<svg-icon class="item-icon" icon-class="home" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" />
|
|
|
|
|
|
{{ 'navbar.homepage' | i18nFilter }}
|
2022-11-03 10:19:19 +08:00
|
|
|
|
</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>
|
2022-10-19 17:01:55 +08:00
|
|
|
|
<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() {
|
2022-11-03 10:19:19 +08:00
|
|
|
|
// 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
|
|
|
|
|
|
}
|
2022-10-19 17:01:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
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>
|
