383 lines
10 KiB
Vue
383 lines
10 KiB
Vue
<template>
|
|
<div class="navbar">
|
|
<hamburger
|
|
id="hamburger-container"
|
|
:is-active="sidebar.opened"
|
|
class="hamburger-container"
|
|
@toggleClick="toggleSideBar"
|
|
/>
|
|
|
|
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
|
|
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
|
|
<div class="right-menu">
|
|
<template v-if="device !== 'mobile'">
|
|
<el-tooltip
|
|
content="大屏"
|
|
effect="dark"
|
|
placement="bottom"
|
|
v-if="$store.state.user.userType === '00' || $store.state.user.userType === '0'"
|
|
>
|
|
<img
|
|
src="@/assets/icons/screen_btn.png"
|
|
id="screenBtn"
|
|
style="margin-top: 17px"
|
|
class="right-menu-item hover-effect"
|
|
@click="openPage(1)"
|
|
/>
|
|
</el-tooltip>
|
|
<div
|
|
style="height: 30px; margin-top: 10px"
|
|
v-if="
|
|
$store.state.user.userType === '00' ||
|
|
$store.state.user.userType === '01' ||
|
|
$store.state.user.userType === '02'
|
|
"
|
|
>
|
|
<el-tooltip content="通知公告" effect="dark" placement="bottom">
|
|
<el-badge is-dot class="item" v-if="noticeNum > 0">
|
|
<img
|
|
src="@/assets/icons/notice.png"
|
|
id="toDo"
|
|
class="right-menu-item hover-effect"
|
|
@click="openPage(2)"
|
|
/>
|
|
</el-badge>
|
|
<img
|
|
v-else
|
|
src="@/assets/icons/notice.png"
|
|
id="toDo"
|
|
class="right-menu-item hover-effect"
|
|
@click="openPage(2)"
|
|
/>
|
|
</el-tooltip>
|
|
<el-tooltip content="我的待办" effect="dark" placement="bottom" v-if="isShowToDo">
|
|
<el-badge :value="toDoNum" :max="99" class="item" v-if="toDoNum > 0">
|
|
<img
|
|
src="@/assets/icons/toDo.png"
|
|
id="notice"
|
|
class="right-menu-item hover-effect"
|
|
@click="openPage(3)"
|
|
/>
|
|
</el-badge>
|
|
<img
|
|
v-if="toDoNum == 0"
|
|
src="@/assets/icons/toDo.png"
|
|
title="我的待办"
|
|
id="screenBtn"
|
|
class="right-menu-item hover-effect"
|
|
@click="openPage(3)"
|
|
/>
|
|
</el-tooltip>
|
|
</div>
|
|
<div style="height: 30px; margin-top: 10px">
|
|
<el-tooltip content="我的随手拍" effect="dark" placement="bottom">
|
|
<img
|
|
src="@/assets/icons/takephoto.png"
|
|
title="我的随手拍"
|
|
id="notice"
|
|
class="right-menu-item hover-effect"
|
|
@click="openPage(4)"
|
|
/>
|
|
</el-tooltip>
|
|
</div>
|
|
<el-select
|
|
v-model="project"
|
|
placeholder="工程"
|
|
@change="changePro"
|
|
v-if="this.$store.state.user.userType !== '00'"
|
|
class="underline-select"
|
|
>
|
|
<el-option
|
|
v-for="dict in proItems"
|
|
:key="dict.value"
|
|
:label="dict.label.length > 28 ? dict.label.substring(0, 25) + '...' : dict.label"
|
|
:value="dict.value"
|
|
:title="dict.label"
|
|
/>
|
|
</el-select>
|
|
<search id="header-search" class="right-menu-item" />
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
|
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
<size-select id="size-select" class="right-menu-item hover-effect" />
|
|
</el-tooltip>
|
|
</template>
|
|
|
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
<div class="avatar-wrapper">
|
|
<img :src="avatar" class="user-avatar" />
|
|
<i class="el-icon-caret-bottom" />
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<router-link to="/user/profile">
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
</router-link>
|
|
<el-dropdown-item @click.native="setting = true">
|
|
<span>布局设置</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item divided @click.native="logout">
|
|
<span>退出登录</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
import TopNav from '@/components/TopNav'
|
|
import Hamburger from '@/components/Hamburger'
|
|
import Screenfull from '@/components/Screenfull'
|
|
import SizeSelect from '@/components/SizeSelect'
|
|
import Search from '@/components/HeaderSearch'
|
|
import bonusGit from '@/components/bonus/Git'
|
|
import bonusDoc from '@/components/bonus/Doc'
|
|
import { getNoticeNum, getToDoNum } from '@/api/system/notice'
|
|
|
|
export default {
|
|
components: {
|
|
Breadcrumb,
|
|
TopNav,
|
|
Hamburger,
|
|
Screenfull,
|
|
SizeSelect,
|
|
Search,
|
|
bonusGit,
|
|
bonusDoc,
|
|
},
|
|
data() {
|
|
return {
|
|
project: this.$store.state.user.thisIds.proName,
|
|
uuid: '',
|
|
noticeNum: this.$store.state.user.noticeNum,
|
|
toDoNum: this.$store.state.user.toDoNum,
|
|
isShowToDo: false,
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.user.noticeNum'(val) {
|
|
this.noticeNum = val
|
|
},
|
|
'$store.state.user.toDoNum'(val) {
|
|
this.toDoNum = val
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.$store.state.user.thisIds.intoStatus === '3') {
|
|
this.isShowToDo = true
|
|
this.getToDoNum()
|
|
} else {
|
|
this.isShowToDo = false
|
|
}
|
|
this.getNoticeNum()
|
|
},
|
|
computed: {
|
|
...mapGetters(['sidebar', 'avatar', 'device', 'proItems']),
|
|
setting: {
|
|
get() {
|
|
return this.$store.state.settings.showSettings
|
|
},
|
|
set(val) {
|
|
this.$store.dispatch('settings/changeSetting', {
|
|
key: 'showSettings',
|
|
value: val,
|
|
})
|
|
},
|
|
},
|
|
topNav: {
|
|
get() {
|
|
return this.$store.state.settings.topNav
|
|
},
|
|
},
|
|
proItems: {
|
|
get() {
|
|
console.log(this.$store.state.user.proItems)
|
|
return this.$store.state.user.proItems
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
getToDoNum() {
|
|
getToDoNum().then(response => {
|
|
console.log(response)
|
|
this.$store.commit('SET_TO_DO_NUM', response.msg)
|
|
this.toDoNum = response.msg
|
|
})
|
|
},
|
|
getNoticeNum() {
|
|
getNoticeNum().then(response => {
|
|
console.log(response)
|
|
this.$store.commit('SET_NOTICE_NUM', response.msg)
|
|
this.noticeNum = response.msg
|
|
})
|
|
},
|
|
openPage(type) {
|
|
if (type === 1) window.open(process.env.VUE_APP_ENV === 'testing' ? '/nxdt/screen' : '/screen', '_blank')
|
|
if (type === 2) this.$router.push({ path: '/notice/noticeAnnouncement' })
|
|
if (type === 3) this.$router.push({ path: '/myToDoList/myToDoList' })
|
|
if (type === 4) this.$router.push({ path: '/takePhoto/takePhoto' })
|
|
},
|
|
toggleSideBar() {
|
|
this.$store.dispatch('app/toggleSideBar')
|
|
},
|
|
async logout() {
|
|
this.$confirm('确定注销并退出系统吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
// location.href = '/index'
|
|
location.href = process.env.VUE_APP_ENV === 'testing' ? '/nxdt/index' : 'index'
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
},
|
|
changePro(index) {
|
|
for (let i = 0; i < this.$store.state.user.sysIds.length; i++) {
|
|
if (this.$store.state.user.sysIds[i].proId === index) {
|
|
this.$store.state.user.thisIds = this.$store.state.user.sysIds[i]
|
|
this.uuid = this.$store.state.user.sysIds[i].uuid
|
|
localStorage.setItem('oldProId', this.$store.state.user.sysIds[i].proId)
|
|
localStorage.setItem('uuid', this.$store.state.user.sysIds[i].uuid)
|
|
localStorage.setItem('proName', this.$store.state.user.sysIds[i].proName)
|
|
break
|
|
}
|
|
}
|
|
this.$store.dispatch('changeRoles')
|
|
//关闭所有页面
|
|
this.$tab.closeAllPage()
|
|
// 跳转到首页
|
|
this.$router.push({ path: '/index', query: { result: 1, uuid: this.uuid } })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.navbar {
|
|
height: 64px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #fff;
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
|
|
.hamburger-container {
|
|
line-height: 60px;
|
|
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;
|
|
}
|
|
|
|
.topmenu-container {
|
|
position: absolute;
|
|
left: 50px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.errLog-container {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.right-menu {
|
|
float: right;
|
|
height: 100%;
|
|
line-height: 64px;
|
|
display: flex;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.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 0.3s;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.025);
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 30px;
|
|
|
|
.avatar-wrapper {
|
|
margin-top: 5px;
|
|
position: relative;
|
|
|
|
.user-avatar {
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.el-icon-caret-bottom {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 25px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hamburger[data-v-4e6f274c] {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 20px;
|
|
height: 60px !important;
|
|
}
|
|
|
|
::v-deep .underline-select .el-input__inner {
|
|
border: none !important; /* Remove border */
|
|
border-bottom: 1px solid #c5c2c2 !important; /* Add underline */
|
|
box-shadow: none !important; /* Remove any box shadow */
|
|
}
|
|
|
|
#screenBtn {
|
|
width: 50px;
|
|
height: 30px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
fill: #5a5e66;
|
|
margin-top: 7px;
|
|
}
|
|
#notice,
|
|
#toDo {
|
|
width: 50px;
|
|
height: 30px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
fill: #5a5e66;
|
|
}
|
|
.item {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
</style>
|