<script setup>
|
import { ref } from "vue";
|
import { useRouter, useRoute } from "vue-router";
|
import { storeToRefs } from "pinia";
|
import { useUserStore } from "@/stores/user.js";
|
|
const userStore = useUserStore();
|
const { uid, uname } = storeToRefs(userStore);
|
|
const $router = useRouter();
|
const platformName = ref("锂电系统");
|
function commandClick(name) {
|
switch (name) {
|
case "outSystem":
|
outSystem();
|
break;
|
case "passwordChange":
|
passwordChange();
|
break;
|
}
|
}
|
function outSystem() {
|
sessionStorage.removeItem("uname");
|
sessionStorage.removeItem("uid");
|
$router.push("/login");
|
}
|
function passwordChange(params) {
|
pwdVisible.value = true;
|
}
|
</script>
|
|
<template>
|
<div class="page-header">
|
<div class="page-header-container">
|
<div class="page-header-left">
|
<!-- <img class="header-first-logo" :src="logoUrl" v-if="logoConfig.value" /> -->
|
<!-- <span class="header-carve-up" v-if="logoConfig.value"></span> -->
|
<span>{{ platformName }}</span>
|
<!-- <span class="sys-version">{{ version }}</span> -->
|
</div>
|
<div class="page-header-content"></div>
|
<div class="page-header-right">
|
<el-dropdown trigger="click" @command="commandClick">
|
<div class="user-wraper">
|
<el-icon class="icon" :size="24" color="#0ff">
|
<Avatar />
|
</el-icon>
|
<div class="user-name">{{ uname }}</div>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="passwordChange"
|
>密码修改</el-dropdown-item
|
>
|
<el-dropdown-item command="outSystem">安全退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
|
<!-- 密码修改 -->
|
<!-- <el-dialog
|
title="密码修改"
|
width="400px"
|
:v-model="pwd.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<pwd-change
|
v-if="pwd.show"
|
:v-model="pwd.show"
|
:name="username"
|
></pwd-change>
|
</el-dialog> -->
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.page-header-container {
|
height: 70px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
color: #0ff;
|
}
|
.user-wraper {
|
display: flex;
|
align-items: center;
|
padding-right: 6px;
|
color: #0ff;
|
.user-name {
|
margin-left: 0.4em;
|
}
|
}
|
|
.page-header-content {
|
position: relative;
|
height: 100%;
|
overflow: hidden;
|
padding-top: 5px;
|
box-sizing: border-box;
|
}
|
|
.page-header-left {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
padding-right: 130px;
|
min-width: 12em;
|
}
|
|
.page-header-left img {
|
height: 40px;
|
vertical-align: middle;
|
}
|
|
.page-header-left span {
|
font-size: 33px;
|
font-weight: bold;
|
letter-spacing: 4px;
|
}
|
|
.page-header-left span.sys-version {
|
font-size: 24px;
|
margin-left: 4px;
|
font-weight: normal;
|
padding-top: 8px;
|
}
|
|
.data-totals {
|
padding-left: 18px;
|
}
|
|
.data-totals-item {
|
margin-right: 18px;
|
}
|
|
.header-info-list {
|
padding-left: 18px;
|
display: flex;
|
align-items: center;
|
}
|
|
.header-info-item {
|
display: inline-block;
|
min-width: 85px;
|
padding-top: 4px;
|
padding-bottom: 2px;
|
}
|
|
.info-banner {
|
display: inline-block;
|
color: #ffffff;
|
background-color: blue;
|
}
|
|
.info-banner-text {
|
display: inline-block;
|
padding-top: 8px;
|
padding-bottom: 8px;
|
}
|
|
.hdw-avatar {
|
display: inline-block;
|
margin-top: 10px;
|
margin-right: 16px;
|
cursor: pointer;
|
color: #e4e3e3;
|
}
|
|
.hdw-avatar:hover {
|
color: #ffffff;
|
}
|
|
.hdw-avatar:hover .el-icon-arrow-down {
|
transform: rotate(180deg);
|
}
|
|
.hdw-avatar-icon {
|
display: inline-flex;
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
justify-content: center;
|
background-color: #4ba1fa;
|
align-items: center;
|
color: #032c8f;
|
}
|
|
.hdw-avatar-icon .iconfont {
|
font-size: 16px;
|
}
|
|
.hdw-avatar-text {
|
color: #4ba1fa;
|
margin-left: 8px;
|
}
|
|
.hdw-avatar-text .el-icon-arrow-down {
|
margin-left: 4px;
|
}
|
|
.fuguang-logo {
|
height: 45px;
|
margin-left: 8px;
|
vertical-align: middle;
|
}
|
|
.header-first-logo {
|
margin-left: 20px;
|
}
|
|
.header-carve-up {
|
display: inline-block;
|
height: 28px;
|
width: 1px;
|
background-color: #00feff;
|
margin-left: 12px;
|
margin-right: 12px;
|
}
|
|
.system-tools {
|
position: absolute;
|
top: 8px;
|
right: 8px;
|
}
|
|
.tools-item {
|
display: inline-block;
|
padding: 8px;
|
border-radius: 50%;
|
background-color: #4ba1fa;
|
}
|
|
.system-tools .iconfont {
|
font-size: 20px;
|
color: #041f6c;
|
}
|
|
.term-date {
|
display: inline-block;
|
margin-left: 16px;
|
font-size: 12px;
|
padding: 2px 8px;
|
}
|
|
.term-date-value {
|
display: inline-block;
|
text-align: center;
|
padding: 0 8px;
|
font-size: 14px;
|
border-radius: 6px;
|
margin-right: 8px;
|
}
|
|
.drag-box-content {
|
width: 85px;
|
height: 41px;
|
background-image: url("./images/drag_img.png");
|
background-size: 100% 100%;
|
font-size: 14px;
|
padding-left: 40px;
|
box-sizing: border-box;
|
white-space: nowrap;
|
text-overflow-ellipsis: ellipsis;
|
cursor: pointer;
|
}
|
|
.dragging-box {
|
position: absolute;
|
top: 180px;
|
right: -55px;
|
z-index: 998;
|
}
|
|
.dragging-box:hover {
|
right: 0;
|
}
|
|
.dialog-mac :deep(.el-dialog__body) {
|
background: #02195c;
|
}
|
</style>
|
