<template>
|
<div class="header">
|
<div class="header-left">
|
<div class="logoDiv" @click="gobackIndex">
|
<el-image class="logo-img" fit="contain" :src="url" />
|
</div>
|
|
<div class="logo-title">
|
<!-- <el-icon v-show="!iconShow" class="title-menu" :size="30" @click="changeMenuCollapse(true)">
|
<Fold />
|
</el-icon>
|
<el-icon v-show="iconShow" class=" title-menu" :size="30" @click="changeMenuCollapse(false)">
|
<Expand />
|
</el-icon> -->
|
<!-- <h1>欢迎{{ headerTitle }}进入产业数字化资源能力平台</h1>-->
|
<h1 class="title">产业数字化资源能力平台</h1>
|
<p class="sub-title">Industrial digital resource capability platform</p>
|
</div>
|
</div>
|
<div class="header-right">
|
<!-- <div class="right-btn" @click="handlerScreenBI">-->
|
<!-- <el-tooltip class="box-item" effect="light" width="auto"-->
|
<!-- content="三维" placement="top">-->
|
<!-- <el-icon :size="18">-->
|
<!-- <Monitor/>-->
|
<!-- </el-icon>-->
|
<!-- </el-tooltip>-->
|
|
<!-- </div>-->
|
<div class="right-btn" @click="handleFullscreenchange" title="全屏">
|
<el-icon :size="18">
|
<FullScreen color="#fff" />
|
</el-icon>
|
</div>
|
<div class="right-btn" @click="goToScreen" title="跳转门户">
|
<el-icon :size="18">
|
<Monitor color="#fff" />
|
</el-icon>
|
</div>
|
<!-- 个人信息操作下拉 -->
|
<el-dropdown @command="handleCommand">
|
<span class="el-dropdown-link">
|
{{ userName }}
|
<el-icon class="el-icon--right">
|
<arrow-down color="#fff" />
|
</el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
|
<el-dropdown-item command="changePsw">修改密码</el-dropdown-item>
|
<el-dropdown-item command="logout">账号退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
<!-- 修改信息弹窗 -->
|
<el-dialog
|
v-model="updateDialogVisible"
|
:title="dialogTitle"
|
center
|
destroy-on-close
|
width="30%"
|
>
|
<template v-if="dialogType == 'userInfo'">
|
<!-- 修改个人信息 -->
|
<updateUserInfo :userInfo="state.userInfoForm" @save="saveUserInfo" />
|
</template>
|
<template v-else>
|
<!-- 修改密码 -->
|
<updatePassword @savePassword="savePassword" />
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
// 依赖注入
|
import { logout } from '@/api/login'
|
import { queryUserDetail, updateUserDetail, updatePassw } from '@/api/userInfo'
|
import router from '@/router'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import { ElNotification } from 'element-plus'
|
import screenfull from 'screenfull'
|
import { getAssetsImages } from '@/utils/common'
|
// 组件注入
|
import updateUserInfo from './userManage/updateUserInfo.vue' // 修改个人信息
|
import updatePassword from './userManage/updatePassword.vue' // 修改密码
|
import { useMenu } from '@/stores/modules/menu'
|
import { useNavTabs } from '@/stores/modules/navTabs' // 标签导航
|
const userInfoStore = useUserInfo()
|
const default_login_URL = import.meta.env.VITE_BASE_LOGIN_URL as string;
|
const navTabsStore = useNavTabs()
|
interface userInfoType {
|
username: string
|
name: string
|
email: string
|
phone: string | number
|
}
|
const menuStore = useMenu()
|
|
const userStore = useUserInfo() // 用户相关的状态管理器
|
// 子组件与父组件的通信方法
|
const emits = defineEmits(['menuCollapse'])
|
let url = getAssetsImages('logo3.png') // logo地址
|
// let url = getAssetsImages('jinzoulogo.png') // logo地址
|
let headerTitle = ref<string>('超级管理员') // 头部标题
|
let userName = ref<string>('超级管理员') // 登录用户名称、昵称
|
let updateDialogVisible = ref<boolean>(false) // 控制啊弹窗的显示
|
let dialogTitle = ref<string>('修改个人信息') // 弹窗标题
|
// 用户表单
|
interface State {
|
userInfoForm: userInfoType
|
}
|
|
const state = reactive<State>({
|
userInfoForm: {
|
username: '',
|
name: '',
|
email: '',
|
phone: '',
|
},
|
})
|
const isCollapse = computed((): boolean => menuStore.isCollapse);
|
|
let dialogType = ref<string>('userInfo') // 弹窗内容类型
|
let iconShow = ref<boolean>(false)
|
|
// 是否全屏
|
const isFullscreen = ref(false)
|
|
// 切换左侧菜单列表的展开收起
|
const changeMenuCollapse = (state: boolean) => {
|
// iconShow.value = state
|
// emits('menuCollapse', state)
|
}
|
|
// 返回首页
|
const gobackIndex = () => {
|
// router.push({ path: '/' })
|
const Biurl = import.meta.env.VITE_BI_URL as string
|
const token = userStore.getAdminToken
|
window.open(
|
`${Biurl}/mddleware?token=${token}`
|
)
|
}
|
|
// 监听变化
|
const change = () => {
|
isFullscreen.value = screenfull.isFullscreen
|
}
|
// 切换全屏/窗口
|
const handleFullscreenchange = () => {
|
screenfull.toggle()
|
}
|
const goToScreen=()=>{
|
const screenUrl = import.meta.env.VITE_BI_URL as string;
|
const token = userInfoStore.getAdminToken;
|
if (!token) {
|
window.location.href=default_login_URL
|
return;
|
}
|
const goPage = `${screenUrl}/mddleware?token=${token}`;
|
window.open(goPage);
|
}
|
// 设置侦听器
|
onMounted(() => {
|
screenfull.on('change', change)
|
})
|
|
// 删除侦听器
|
onUnmounted(() => {
|
screenfull.off('change', change)
|
})
|
|
// 跳转消息中心
|
const goToMessageCenter = () => {
|
}
|
|
// 个人信息
|
const handleCommand = (command: string | number | object) => {
|
switch (command) {
|
case 'userInfo':
|
updateDialogVisible.value = true
|
dialogType.value = 'userInfo'
|
dialogTitle.value = '修改个人信息'
|
// checkUserInfo()
|
break
|
case 'changePsw':
|
updateDialogVisible.value = true
|
dialogType.value = 'changePsw'
|
dialogTitle.value = '修改密码'
|
break
|
case 'logout':
|
exit()
|
break
|
}
|
}
|
|
// 退出登录
|
const exit = () => {
|
logout().then((res: any) => {
|
if (res.code) {
|
// 移除token
|
userStore.removeToken()
|
// 移除菜单缓存数据
|
userStore.removeMenuList()
|
userStore.removeUserDetail()
|
navTabsStore.removeTabs()
|
window.location.href = default_login_URL
|
}
|
})
|
}
|
|
// 查看个人信息
|
const checkUserInfo = () => {
|
queryUserDetail().then((res: any) => {
|
if (res.code == 200) {
|
state.userInfoForm = { ...res.data }
|
headerTitle.value = res.data.name
|
userName.value = res.data.name
|
userStore.updateUserDetail(res.data)
|
}
|
}).catch((error) => {
|
console.warn('获取用户信息失败:', error)
|
// 如果获取用户信息失败，使用默认值
|
headerTitle.value = userStore.getUserDetail || '用户'
|
userName.value = userStore.getUserDetail || '用户'
|
})
|
}
|
|
// 页面加载时获取个人信息
|
checkUserInfo()
|
|
// 保存个人信息修改
|
const saveUserInfo = (userData: userInfoType | undefined) => {
|
if (!userData) return
|
updateUserDetail(userData).then((res: any) => {
|
if (res.code == 200) {
|
updateDialogVisible.value = false
|
ElNotification({
|
title: '提示',
|
message: res.msg,
|
type: 'success',
|
})
|
}
|
})
|
}
|
|
// 保存密码
|
const savePassword = (data: object | undefined) => {
|
if (!data) return
|
updatePassw(data).then((res: any) => {
|
if (res.code == 200) {
|
updateDialogVisible.value = false
|
ElNotification({
|
title: '提示',
|
message: res.msg,
|
type: 'success',
|
})
|
}
|
})
|
}
|
</script>
|
<style lang="scss" scoped>
|
.header {
|
width: 100%;
|
height: 70px;
|
display: flex;
|
justify-content: space-between;
|
background: #374768;
|
}
|
|
.header-left {
|
display: flex;
|
justify-content: flex-start;
|
cursor: pointer;
|
|
.logo-img {
|
height: 80%;
|
margin: auto;
|
//background: #051223;
|
border-bottom: 0px solid #666;
|
padding: 1px 1px;
|
}
|
|
.logo-title {
|
width: 400px;
|
display: flex;
|
flex-direction: column;
|
text-align: left;
|
color: #fff;
|
margin-top: 15px;
|
position: relative;
|
.title {
|
font-size: 20px;
|
font-weight: bold;
|
}
|
.sub-title {
|
font-size: 12px;
|
color: #e6edf5;
|
}
|
&:before {
|
content: '';
|
width: 1px;
|
height: 30px;
|
background: #6390bf;
|
margin-top: 5px;
|
left: -15px;
|
position: absolute;
|
}
|
}
|
|
// .header-right {
|
// display: flex;
|
// justify-content: flex-end;
|
// align-items: center;
|
// padding-right: 15px;
|
|
// .right-btn {
|
// margin-right: 20px;
|
// cursor: pointer;
|
// }
|
// }
|
}
|
|
.header-right {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
padding-right: 15px;
|
|
.right-btn {
|
margin-right: 15px;
|
cursor: pointer;
|
}
|
}
|
|
.logoDiv {
|
width: 205px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
background-color: #374768;
|
}
|
.el-dropdown-link {
|
color: #fff;
|
font-size: 15px;
|
margin-top: -3px;
|
}
|
.menu-control {
|
margin: auto 10px auto 0px;
|
display: flex;
|
justify-content: center;
|
font-size: 20px;
|
cursor: pointer;
|
color: #fff;
|
}
|
</style>
|
