508 lines
15 KiB
Vue
508 lines
15 KiB
Vue
<template>
|
||
<div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''">
|
||
<div v-if="showTitle" class="homeNavIcon" @click="goToRootPage">
|
||
<img src="../../assets/img/cnbm.png" alt="">
|
||
<span>
|
||
{{ 'title' | i18nFilter }}
|
||
</span>
|
||
</div>
|
||
|
||
<div v-if="showhome" style="display:flex; align-items: center;">
|
||
<hamburger
|
||
id="hamburger-container"
|
||
:is-active="sidebar.opened"
|
||
class="hamburger-container"
|
||
@toggleClick="toggleSideBar"
|
||
/>
|
||
|
||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||
</div>
|
||
|
||
<div class="right-menu">
|
||
<div class="right-menu-back" @click="toHome">
|
||
<svg-icon
|
||
class="item-icon"
|
||
:icon-class="showTitle ? 'home' : 'homeb'"
|
||
style="height: calc(24px * var(--beilv)); width: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv)); margin-right: 2px;"
|
||
/>
|
||
<!-- <span v-if="showhome">
|
||
{{ 'navbar.homepage' | i18nFilter }}
|
||
</span> -->
|
||
</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=" margin: 0 10px; "
|
||
@click.native="handleAlarm"
|
||
>
|
||
<svg-icon
|
||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-4px * var(--beilv))"
|
||
class="item-icon"
|
||
:icon-class="showTitle ? 'alarm' : 'alarmb'"
|
||
/>
|
||
</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: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||
: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: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||
icon-class="download"
|
||
/>
|
||
</a>
|
||
</div>
|
||
<div class="right-menu-back">
|
||
<a href="google.exe">
|
||
<svg-icon
|
||
:style="showTitle ? 'color: #fff' : ''"
|
||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||
:icon-class="showTitle ? 'chrome' : 'chromeb'"
|
||
/>
|
||
</a>
|
||
</div>
|
||
<!-- <div class="right-menu-back" style="color: #fff" @click="$router.push({name: 'VisualCreate'})">
|
||
可视化配置
|
||
</div> -->
|
||
<!-- <div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
|
||
<svg-icon class="item-icon" icon-class="ntp" />
|
||
{{ showDay }}
|
||
{{ showTime }}
|
||
</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">{{ username }}</div>
|
||
<div class="avatar-roles" :title="roles.join(',')">{{ roles.length > 0 ? roles[0] : '' }}</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">
|
||
<el-tooltip class="item" effect="dark" placement="top">
|
||
<div slot="content">
|
||
{{ 'navbar.copyright' | i18nFilter }}<br>
|
||
{{ 'navbar.versionNum' | i18nFilter }}：v3.0
|
||
</div>
|
||
<el-button type="text">
|
||
<svg-icon icon-class="black-info" />
|
||
</el-button>
|
||
</el-tooltip>
|
||
</div> -->
|
||
<!-- <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 :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 { getAlarmNum, getEqAlarmNum, getMESAlarmNum } from '@/api/team-manage/team'
|
||
// import { downLoadTime } from '@/api/user'
|
||
import Breadcrumb from '@/components/Breadcrumb'
|
||
import Hamburger from '@/components/Hamburger'
|
||
import LangSelect from '@/components/LangSelect'
|
||
import moment from 'moment'
|
||
import Cookie from 'js-cookie'
|
||
|
||
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: {
|
||
goToRootPage() {
|
||
// 11月演示，去到入口首页
|
||
const username = Cookie.get('account')
|
||
const password = Cookie.get('password')
|
||
|
||
if (username && password) {
|
||
window.location = `http://zs.main.picaiba.com/#/?username=${username}&password=${password}`
|
||
// window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
|
||
}
|
||
},
|
||
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() {
|
||
if (this.showhome) {
|
||
this.$store.dispatch('app/setChoicepart')
|
||
this.$router.push('/')
|
||
} else {
|
||
this.goToRootPage()
|
||
}
|
||
},
|
||
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>
|
||
.navbar {
|
||
height: calc(48px * var(--beilv));
|
||
// height: calc(100vh / 1600 * 80);
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: #fff;
|
||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||
// padding-right: calc(100vw / 2560 * 32);
|
||
padding-right: calc(24px * var(--beilv));
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.homeNavIcon {
|
||
cursor: pointer;
|
||
color: #fff;
|
||
line-height: 1;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
// font-size: calc(100vw / 2560 * 28);
|
||
// letter-spacing: calc(100vw / 2560 * 2);
|
||
// padding-left: calc(100vw / 2560 * 32);
|
||
font-size: calc(24px * var(--beilv));
|
||
letter-spacing: calc(1px * var(--beilv));
|
||
padding-left: calc(24px * var(--beilv));
|
||
|
||
img {
|
||
width: calc(24px * var(--beilv));
|
||
height: calc(24px * var(--beilv));
|
||
margin-right: calc(12px * var(--beilv));
|
||
// width: calc(100vw / 2560 * 32);
|
||
// height: calc(100vw / 2560 * 32);
|
||
// margin-right: calc(100vw / 2560 * 16);
|
||
// width: 26px;
|
||
// height: 26px;
|
||
// marginright: 14px;
|
||
}
|
||
}
|
||
|
||
.hamburger-container {
|
||
// line-height: calc(48px * var(--beilv));
|
||
height: 100%;
|
||
float: left;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
|
||
&:hover {
|
||
background: rgba(0, 0, 0, 0.025);
|
||
}
|
||
}
|
||
|
||
.breadcrumb-container {
|
||
float: left;
|
||
}
|
||
|
||
.errLog-container {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.right-menu {
|
||
float: right;
|
||
height: 100%;
|
||
line-height: calc(48px * var(--beilv));
|
||
position: relative;
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.right-menu-back {
|
||
display: inline-block;
|
||
vertical-align: text-bottom;
|
||
font-size: calc(14px * var(--beilv));
|
||
padding: 0 calc(8px * var(--beilv));
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.right-menu-item {
|
||
display: inline-block;
|
||
padding: 0 calc(8px * var(--beilv));
|
||
height: 100%;
|
||
font-size: calc(18px * var(--beilv));
|
||
color: #5a5e66;
|
||
vertical-align: text-bottom;
|
||
|
||
&.hover-effect {
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
|
||
&:hover {
|
||
background: rgba(0, 0, 0, 0.025);
|
||
}
|
||
}
|
||
}
|
||
.verticalBar {
|
||
height: calc(32px * var(--beilv));
|
||
width: 0;
|
||
opacity: 0.49;
|
||
padding: 0;
|
||
border-right: 1px solid #fff;
|
||
position: relative;
|
||
top: calc(-1 * 8px * var(--beilv));
|
||
}
|
||
.avatar-container {
|
||
.avatar-wrapper {
|
||
padding-top: calc(9px * var(--beilv));
|
||
position: relative;
|
||
width: calc(140px * var(--beilv));
|
||
height: calc(48px * var(--beilv));
|
||
.user-avatar {
|
||
cursor: pointer;
|
||
width: calc(32px * var(--beilv));
|
||
height: calc(32px * var(--beilv));
|
||
border-radius: calc(16px * var(--beilv));
|
||
}
|
||
.avatar-username {
|
||
width: calc(80px * var(--beilv));
|
||
text-align: center;
|
||
position: absolute;
|
||
font-size: calc(14px * var(--beilv));
|
||
right: calc(13px * var(--beilv));
|
||
top: calc(3px * var(--beilv));
|
||
line-height: calc(25px * var(--beilv));
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
.avatar-roles {
|
||
width: calc(80px * var(--beilv));
|
||
text-align: center;
|
||
position: absolute;
|
||
font-size: calc(14px * var(--beilv));
|
||
top: calc(20px * var(--beilv));
|
||
right: calc(13px * var(--beilv));
|
||
line-height: calc(25px * var(--beilv));
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
opacity: 0.64;
|
||
}
|
||
.el-icon-caret-bottom {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: calc(-1 * 20px * var(--beilv));
|
||
top: calc(25px * var(--beilv));
|
||
font-size: calc(12px * var(--beilv));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dropdown-badge {
|
||
background: #ff4949;
|
||
color: #fff;
|
||
line-height: calc(16px * var(--beilv));
|
||
border-radius: calc(8px * var(--beilv));
|
||
padding: 0 calc(8px * var(--beilv));
|
||
float: right;
|
||
margin-left: calc(5px * var(--beilv));
|
||
position: relative;
|
||
top: calc(7px * var(--beilv));
|
||
}
|
||
.navbar-alarmbox {
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|