<template>
|
<!-- 头部 -->
|
<el-header v-if="show">
|
<!-- 左侧菜单 -->
|
<div class="header-left">
|
<div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)">
|
<span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span>
|
</div>
|
</div>
|
<!-- 右侧菜单 -->
|
<div class="header-right">
|
<div class="menu-right__item search"></div>
|
<!-- 登录用户 -->
|
<div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false">
|
<el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar>
|
<el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else>
|
</el-avatar>
|
<span style="padding: 0 5px;">{{ user.user.username }}</span>
|
<i class="el-icon-arrow-down"></i>
|
<!-- 用户操作 -->
|
<div class="user-card" v-if="flag.user" @mouseleave="flag.user = false">
|
<el-card class="box-card">
|
<div class="user-card__item" @click="updatePassword()">修改密码</div>
|
<div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">基本信息</div>
|
</el-card>
|
</div>
|
</div>
|
<!-- 消息 -->
|
<div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false">
|
<el-tooltip effect="dark" content="消息中心" placement="bottom-end" :hide-after="600">
|
<el-badge :value="messageCounts" class="item">
|
<i @click="getMessage" class="el-icon-message-solid"></i>
|
</el-badge>
|
</el-tooltip>
|
<!-- 消息操作 -->
|
<div class="message-card" v-if="flag.message" @mouseleave="flag.message = false">
|
<el-card class="box-card">
|
<div class="card-header">
|
<span>消息中心</span>
|
<el-button type="text">接收设置</el-button>
|
</div>
|
<div v-for="item in menuMessageList" :key="item.id" class="message-card__item">
|
<router-link to='/home/operate/message/messageIndex'>
|
<span class="label">{{ item.columnName }}</span>
|
</router-link>
|
<span>({{ item.messageNumber }})</span>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
<!-- 退出登录 -->
|
<div class="menu-right__item btn" @click="loginout">
|
<el-tooltip effect="dark" content="退出登录" placement="bottom-end" :hide-after="1000">
|
<i class="el-icon-switch-button"></i>
|
</el-tooltip>
|
</div>
|
<el-dialog :visible.sync="updatePasswordDialog" width="40%" title="修改密码" v-if="updatePasswordDialog"
|
:before-close="handleClose">
|
<updatePassword />
|
</el-dialog>
|
<el-dialog :visible.sync="baseInformationVisible" width="35%" title="基本信息" v-if="baseInformationVisible"
|
>
|
<el-form :model="info" class="info" label-width="6vw">
|
<el-form-item label="用户ID" min-width="6">
|
<el-input v-model="info.id"></el-input>
|
</el-form-item>
|
<el-form-item prop="nickName" label="用户名称" min-width="10">
|
<el-input v-model="info.nickName"></el-input>
|
</el-form-item>
|
<el-form-item prop="nickName" label="所属姓名" min-width="8">
|
<el-input v-model="info.username"></el-input>
|
</el-form-item>
|
<el-form-item prop="mobile" label="联系方式" min-width="7">
|
<el-input v-model="info.mobile"></el-input>
|
</el-form-item>
|
<el-form-item prop="jobTitle" label="所属职务" min-width="8">
|
<el-input v-model="info.jobTitle"></el-input>
|
</el-form-item>
|
<el-form-item prop="createTime" label="创建时间" min-width="10">
|
<el-input v-model="info.createTime"></el-input>
|
</el-form-item>
|
</el-form>
|
|
</el-dialog>
|
</div>
|
</el-header>
|
</template>
|
|
<script>
|
import updatePassword from "./updatePassword";
|
import users from "@/api/users";
|
|
export default {
|
components: {
|
updatePassword
|
},
|
data() {
|
return {
|
baseInformationVisible: false,
|
updatePasswordDialog: false,
|
menuLeftList: [
|
{
|
label: '驾驶舱',
|
checked: true,
|
url: '',
|
id: '1f'
|
},
|
{
|
label: '视频巡查',
|
checked: true,
|
url: '',
|
id: '2f'
|
},
|
{
|
label: '执法管理',
|
checked: true,
|
url: '',
|
if: '3f',
|
},
|
],
|
flag: {
|
user: false,
|
message: false
|
},
|
user: '',
|
menuMessageList: [],
|
messageCounts: 0,
|
keyword: '',
|
info: null,
|
show: false
|
};
|
},
|
created() {
|
this.setLoginInfo();
|
},
|
methods: {
|
baseInfo() {
|
this.baseInformationVisible = true;
|
const name = sessionStorage.getItem('name');
|
this.$axios({
|
method: 'get',
|
url: 'sccg/admin/info?name=' + name,
|
})
|
.then(res => {
|
sessionStorage.setItem('user', JSON.stringify(res.data));
|
this.info = res.data.user;
|
})
|
},
|
handleClose(done) {
|
this.$confirm("确认关闭？")
|
.then((_) => {
|
this.dialogUpload = false;
|
done();
|
})
|
.catch((_) => { });
|
},
|
//修改密码
|
updatePassword() {
|
this.updatePasswordDialog = true;
|
},
|
// 退出功能
|
loginout() {
|
this.$confirm('退出系统确认', '确认提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
sessionStorage.clear();
|
this.$router.push({ path: "/login" })
|
}).catch(err => {
|
})
|
},
|
// 改变选中状态
|
changeActive(idx) {
|
this.menuLeftList.forEach((item, index) => {
|
item.checked = index === idx;
|
})
|
},
|
// 设置用户基本信息
|
async setLoginInfo() {
|
const info = JSON.parse(sessionStorage.getItem('user'));
|
if (info) {
|
this.user = info;
|
} else {
|
this.user = await this.getLoginInfo();
|
}
|
this.getMessage();
|
this.show = true
|
},
|
// 获取登录用户信息
|
async getLoginInfo() {
|
const name = sessionStorage.getItem('name');
|
let res = await this.$axios({
|
method: 'get',
|
url: 'sccg/admin/info?name=' + name,
|
})
|
sessionStorage.setItem('user', JSON.stringify(res.data));
|
return res.data;
|
},
|
getMessage() {
|
const userInfo = JSON.parse(sessionStorage.getItem('user'));
|
users.getMessageAuditList({ userId: userInfo.user.id })
|
.then(res => {
|
this.menuMessageList = res;
|
this.menuMessageList.forEach(item => {
|
this.messageCounts += item.messageNumber;
|
})
|
})
|
.catch(err => this.$message.error(`${err}`))
|
},
|
menuChange(data) {
|
if (data.id === '1f') {
|
window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank');
|
}
|
if (data.id === '2f') {
|
this.$router.push({path: "/home/video"})
|
}
|
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-form {
|
padding: 3vh 5vw;
|
|
.el-form-item__label {
|
color: #4b9bb7;
|
}
|
}
|
|
.el-header {
|
background-color: #071a38;
|
text-align: center;
|
line-height: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 20px;
|
color: #4b9bb7;
|
|
.header-left {
|
display: flex;
|
flex: 1;
|
|
.menu-left__item {
|
width: 120px;
|
|
span {
|
display: block;
|
line-height: 40px;
|
width: 100%;
|
|
&:hover {
|
cursor: pointer;
|
color: #fff;
|
}
|
}
|
}
|
|
.my-active {
|
border-radius: 20px;
|
color: #fff;
|
background-color: #092c4a;
|
}
|
}
|
|
.header-right {
|
display: flex;
|
padding-left: 10vw;
|
flex: 1;
|
|
.item {
|
width: 100%;
|
position: relative;
|
|
:deep(.is-fixed) {
|
width: 20px;
|
height: 20px;
|
padding: 0;
|
top: 20px;
|
right: 30px;
|
border-radius: 50%;
|
position: absolute;
|
}
|
}
|
|
.search {
|
flex: 3;
|
}
|
|
.user {
|
margin-left: 20px;
|
flex: 2;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
.user-card {
|
position: absolute;
|
top: 60px;
|
width: 120px;
|
z-index: 3000;
|
|
.user-card__item {
|
padding: 5px 0;
|
|
&:hover {
|
color: #fff;
|
background-color: #071a38;
|
}
|
}
|
|
:deep(.el-card) {
|
background-color: #092c4a;
|
border: 1px solid #17324c;
|
color: #4b9bb7;
|
}
|
|
:deep(.el-card__body) {
|
line-height: 20px;
|
padding: 10px;
|
}
|
}
|
}
|
|
.btn {
|
flex: 1;
|
font-size: 20px;
|
position: relative;
|
|
.message-card {
|
position: absolute;
|
top: 60px;
|
width: 180px;
|
left: -50px;
|
z-index: 3000;
|
|
:deep(.el-card__body) {
|
padding: 0;
|
}
|
|
:deep(.el-card) {
|
background-color: #092c4a;
|
border: 1px solid #17324c;
|
color: #4b9bb7;
|
}
|
|
.card-header {
|
padding: 0 20px;
|
line-height: 40px;
|
font-size: 14px;
|
display: flex;
|
border-bottom: 1px solid #17324c;
|
justify-content: space-between;
|
}
|
|
.message-card__item {
|
line-height: 30px;
|
font-size: 14px;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 20px;
|
|
.label:hover {
|
cursor: pointer;
|
color: #fff;
|
}
|
}
|
}
|
}
|
|
.user:hover,
|
.btn:hover {
|
background-color: #092c4a;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
