<template> <!-- 系统页面头部 --> <div class="headerPage"> <hamburger :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <img src="@/assets/images/login/login1.png" alt="logo" class="logo" /> <!-- 菜单 --> <div class="headerMenu"> <p :class="['part', activeIndex == item.name ? 'active' : '']" v-for="item in menuList1" :key="item.name" @click="getSelfMenu(item)"> {{ item.title }} </p> </div> <div @click="withdraw">返回</div> <!-- 全屏+个人中心 --> <div class="right-menu"> <template v-if="appStore.device !== 'mobile'"> <screenfull id="screenfull" class="right-menu-item hover-effect" /> </template> <div class="avatar-container"> <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> <div class="avatar-wrapper"> <img :src="userStore.userInfo.avatar ? userStore.userInfo.avatar : userImg" class="user-avatar" /> <el-icon><caret-bottom /></el-icon> </div> <template #dropdown> <el-dropdown-menu> <el-dropdown-item @click="dialogShow = true">个人中心</el-dropdown-item> <el-dropdown-item @click="getSelfMenu({ name: 'System', title: '系统管理' })">系统管理</el-dropdown-item> <el-dropdown-item command="logout"> <span>退出登录</span> </el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </div> <!-- 个人中心弹窗 --> <el-dialog v-model="dialogShow" title="个人中心" width="1100px" append-to-body> <UserCenter></UserCenter> </el-dialog> </div> </template> <script setup name="headerPage"> import Hamburger from '@/components/Hamburger'; import Screenfull from '@/components/Screenfull'; import useAppStore from '@/store/modules/app'; import useUserStore from '@/store/modules/user'; import UserCenter from '@/views/system/user/profile/index'; //个人中心 import userImg from '@/assets/images/login/user.png'; //默认头像 import bus from '@/utils/mitt'; import { ElMessageBox } from 'element-plus'; import usePermissionStore from '@/store/modules/permission'; const permissionStore = usePermissionStore(); const { proxy } = getCurrentInstance(); const dialogShow = ref(false); const appStore = useAppStore(); const userStore = useUserStore(); const menuList = ref([]); const menuList1 = ref([]); const activeIndex = ref('FloodSys'); const router = useRouter(); // 加载对应子菜单 function getSelfMenu(item) { console.log(item, 'itemitem'); activeIndex.value = item.name; localStorage.setItem('routerPartXG', item.name); localStorage.setItem('fromDoorXG', 'door'); bus.emit('selfMenuXG', item); } // 菜单展开收起 function toggleSideBar() { bus.emit('toggleSideBarClick', appStore.sidebar.opened); //操作展开收起 appStore.toggleSideBar(); if (window.newfiberMapbox && newfiberMapbox.map) { let newniberMapContainer = newfiberMapbox.map.getContainer(); let newniberMapCanvas = newfiberMapbox.map.getCanvas(); newniberMapCanvas.style.width = newniberMapContainer.style.width; } } // 个人中心下拉 function handleCommand(command) { switch (command) { case 'setLayout': setLayout(); break; case 'logout': logout(); break; default: break; } } // 退出登录 function logout() { ElMessageBox.confirm('确定注销并退出系统吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }) .then(() => { userStore.logOut().then(() => { location.href = '/'; }); Cookies.remove('xiaogan-Token'); //清除token }) .catch(() => {}); } function withdraw() { router.push({ path: '/chengguanweiScreen' }); } onMounted(() => { // 动态获取路由返回子菜单 permissionStore.sidebarRouters.map(item => { if (!!!item.meta) return; menuList.value.push({ title: item.meta.title, name: item.name, }); console.log(menuList.value, ' menuList1.value'); }); menuList.value = menuList.value.filter(item => item.name != 'System'); //不显示系统管理 menuList.value = menuList.value.filter(item => item.name != 'SponeScreen'); //不显示一张图 menuList1.value = menuList.value; activeIndex.value = localStorage.getItem('routerPartXG'); //默认选中 getSelfMenu({ name: 'FloodSys', title: '排水管理子系统' }); //默认选中第一个菜单 bus.on('closeUserCenter', e => { dialogShow.value = false; }); }); onBeforeUnmount(() => { bus.off('closeUserCenter'); }); </script> <style lang="scss"> .headerPage { width: 100%; height: 65px; background: #00456d; display: flex; align-items: center; .hamburger-container { cursor: pointer; } .logo { width: 393px; height: 44px; } .headerMenu { width: 1500px; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; .part { background: url('@/assets/images/setting/headBg.png') no-repeat; background-size: 100% 100%; font-size: 18px; font-weight: 400; padding: 8px 15px; cursor: pointer; margin-left: 15px; &:hover { color: #fff; } } .active { background: url('@/assets/images/setting/headBgAct.png') no-repeat; background-size: 100% 100%; color: #fff; } } .right-menu { width: 120px; height: 100%; display: flex; align-items: center; &:focus { outline: none; } .iconReturn { margin-top: 10px; cursor: pointer; } .right-menu-item { display: inline-block; padding: 0 8px; font-size: 18px; vertical-align: text-bottom; &.hover-effect { cursor: pointer; transition: background 0.3s; &:hover { background: rgba(0, 0, 0, 0.025); } } } .avatar-container { margin-right: 20px; .avatar-wrapper { position: relative; .user-avatar { cursor: pointer; width: 40px; height: 40px; border-radius: 10px; } i { cursor: pointer; position: absolute; right: -20px; top: 25px; font-size: 12px; } } } } } </style>