- <template>
- <!-- 系统页面头部 -->
- <div class="headerPage">
- <hamburger :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
- <!-- 标题 等保之后名称显示 -->
- <!-- <img src="@/assets/images/login/login.png" alt="logo" class="logo" /> -->
- <!-- 标题 等保之前名称不显示显示 -->
- <img src="@/assets/images/login/loginNoName.png" alt="logo" class="logo" @click="goOneMap" />
- <!-- 菜单 -->
- <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="goNews" class="goNews" title="消息通知">
- <el-badge :value="NumPer" :max="99">
- <img :src="xiaoxi" alt="" />
- </el-badge>
- </div>
-
- <div @click="goOneMap" class="toOneMap" title="前往海绵一张图">
- <el-icon><HomeFilled /></el-icon>
- </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>
-
- <!-- 消息通知弹窗 -->
- <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
- <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
- <template>
- <div class="dialog-footer">
- <el-button @click="dialogClose">取 消</el-button>
- </div>
- </template>
- </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 newsDiaLOG from '@/views/system/user/profile/newsDiaLOG'; //消息通知
- import userImg from '@/assets/images/login/user.png'; //默认头像
- import xiaoxi from '@/assets/images/login/xiaoxi_icon.png';
- import { countUnread, projectNoticeUserPage } from '@/api/publicService/index';
- import bus from '@/utils/mitt';
- import { ElMessageBox } from 'element-plus';
- import usePermissionStore from '@/store/modules/permission';
- import { getUserProfile } from '@/api/system/user';
-
- const permissionStore = usePermissionStore();
- const { proxy } = getCurrentInstance();
- const dialogShow = ref(false);
- const dialogNews = ref(false);
- const appStore = useAppStore();
- const userStore = useUserStore();
- const menuList = ref([]);
- const menuList1 = ref([]);
- const tableData = ref({});
- const NumPer = ref('');
- const activeIndex = ref('FloodSys');
- const router = useRouter();
- // 加载对应子菜单
- function getSelfMenu(item) {
- console.log(item, 'itemitem');
- activeIndex.value = item.name;
- localStorage.setItem('routerPartKFC', item.name);
- localStorage.setItem('fromDoorKFC', 'chengguanweiScreen');
- 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('kaifeng-Token'); //清除token
- })
- .catch(() => {});
- }
-
- function goOneMap() {
- router.push({ path: '/chengguanweiScreen' });
- }
-
- // 消息弹框
- function goNews() {
- dialogNews.value = true;
- getDataListA();
- }
- /** 获取搜索数据列表 */
- const getDataListA = async () => {
- projectNoticeUserPage({ noticeUserId: Userid.value }).then(response => {
- tableData.value = response.data;
- });
- };
- /** 获取搜索人数 */
- function getDataListB() {
- countUnread().then(response => {
- NumPer.value = response.data;
- });
- }
- function handleClose() {
- // dialogNews.value = false;
- getDataListA();
- }
- function closed() {
- dialogNews.value = false;
- getDataListB();
- }
- const Userid = ref('');
- function getUser() {
- getUserProfile().then(response => {
- Userid.value = response.data.user.userId;
- });
- }
- onMounted(() => {
- // 动态获取路由返回子菜单
- permissionStore.sidebarRouters.map(item => {
- if (!!!item.meta) return;
- menuList.value.push({
- title: item.meta.title,
- name: item.name,
- });
- });
- 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('routerPartKFC'); //默认选中
- bus.on('closeUserCenter', e => {
- dialogShow.value = false;
- });
- bus.on('Refresh', e => {
- getDataListB();
- });
- getDataListB();
- getUser();
- });
- onBeforeUnmount(() => {
- bus.off('closeUserCenter');
- bus.off('Refresh');
- });
- </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;
- cursor: pointer;
- }
- .toOneMap {
- cursor: pointer;
- .el-icon {
- font-size: 28px;
- }
- }
- .goNews {
- width: 29px;
- height: 29px;
- text-align: center;
- padding-right: 8px;
- cursor: pointer;
- img {
- width: 22px;
- height: 22px;
- margin-top: 4px;
- }
- }
- .headerMenu {
- width: 1400px;
- height: 100%;
- display: flex;
- align-items: center;
- overflow: hidden;
- .part {
- background: url('@/assets/images/login/moren_img.png') no-repeat;
- // background: red;
- 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/login/xz_img.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>