406 lines
9.6 KiB
Vue
406 lines
9.6 KiB
Vue
<template>
|
|
<div class="header-container">
|
|
<div class="header-left" :class="{'header-height': projectName != 'gzt'}">
|
|
<img class="logo" :src="logo" alt=""/>
|
|
<div class="header-title">
|
|
<div class="main-title">{{ titleMain || '西安智慧应急' }}</div>
|
|
<template v-if="subTitle">
|
|
<div class="subtitle">{{ subTitle }}</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="menu-conten" v-if="projectName == 'gzt'">
|
|
<el-dropdown v-for="(item, index) in MyApplocation" :key="index" size="large">
|
|
<span class="el-dropdown-link">
|
|
<span class="profile-name fs-base">{{ item.name }}</span>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu :class="`menuTop-list${index} menuTop-public`">
|
|
<template v-for="(childItem, childIndex) in item.list">
|
|
<div :class="`menuTop-list${index}-item menuTop-public-item`" @click="handleGO(childItem)">
|
|
<img :src="childItem.avatar" alt=""/>
|
|
<div class="menuTop-item-text ccw fs-base" :title="childItem.name">{{ childItem.name }}</div>
|
|
</div>
|
|
</template>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
|
|
<div class="menu-conten" v-if="topMenuList[projectName].length">
|
|
<div class="menu-conten-item" v-for="(item, index) in topMenuList[projectName]" :key="index" :title="item.name"
|
|
@click="handleTo(item)" :class="{ isActive: item.path == topActive }">
|
|
<span>
|
|
{{ item.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="right-profile">
|
|
<span class="zyt" @click="skipPage"><i>综合执法一张图</i></span>
|
|
<i class="iconfont icon-zngzt_zfdc" v-if="projectName == 'gzt'" title="编辑桌面"></i>
|
|
<i class="iconfont icon-zngzt_syfw" v-if="projectName != 'gzt'" @click="handleTo({ path: 'gzt' })" title="首页"></i>
|
|
<NotificationBell/>
|
|
<public-full-screen></public-full-screen>
|
|
<i class="iconfont icon-zngzt_tcdl" @click="handleLogout" title="退出"></i>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import {onMounted, reactive, toRefs, watch} from 'vue'
|
|
import {useRouter} from 'vue-router'
|
|
import {useUserStore} from '@/stores/modules/user'
|
|
import {ElLoading, ElMessage} from 'element-plus'
|
|
import PublicFullScreen from '@/components/PublicFullScreen/index.vue'
|
|
import NotificationBell from './NotificationBell.vue'
|
|
|
|
import logo from '@/assets/image/logo.png'
|
|
import {useRouteStore} from '@/stores/modules/router'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
const routerStore = useRouteStore()
|
|
const currentPageURL = window.location.href
|
|
const urlParts = currentPageURL.split('/')
|
|
const projectName = urlParts[3]
|
|
const baseURL = import.meta.env.VITE_BASE_URL
|
|
|
|
const state = reactive({
|
|
topActive: '',
|
|
topMenuList: userStore.topMenu,
|
|
titleMain: import.meta.env.VITE_APP_TITLE,
|
|
subTitle: import.meta.env.VITE_APP_SUB_TITLE,
|
|
version: import.meta.env.VITE_APP_VERSION,
|
|
MyApplocation: userStore.myAppLocations,
|
|
username: userStore.username,
|
|
userAvatar: userStore.userAvatar
|
|
})
|
|
|
|
const {topActive, topMenuList, titleMain, subTitle, version, MyApplocation, username, userAvatar} = toRefs(state)
|
|
|
|
const handleGO = (data) => {
|
|
console.log(data)
|
|
if (data.isTrue) {
|
|
window.open(data.url)
|
|
} else if (data.isImg) {
|
|
userStore.imageIndex = data.url
|
|
window.open(data.url)
|
|
|
|
} else {
|
|
ElMessage.error('对不起，您没有该应用权限。')
|
|
}
|
|
}
|
|
|
|
const handleTo = (data) => {
|
|
topActive.value = data.path
|
|
if (data.router) {
|
|
router.push({
|
|
path: data.path,
|
|
})
|
|
} else {
|
|
window.open(`${baseURL}/${data.path}/index.html#/`)
|
|
}
|
|
}
|
|
|
|
const handleEdit = () => {
|
|
userStore.isDraggable = true
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
await userStore.logout()
|
|
}
|
|
|
|
const skipPage = () => {
|
|
router.push('/big-screen')
|
|
}
|
|
|
|
watch(
|
|
() => router.currentRoute.value.path,
|
|
(val) => {
|
|
if (val) {
|
|
topActive.value = router.currentRoute.value.path
|
|
}
|
|
},
|
|
{immediate: true}
|
|
)
|
|
|
|
onMounted(() => {
|
|
window.document.documentElement.setAttribute('data-theme', 'whiteblueTheme')
|
|
})
|
|
</script>
|
|
<style lang="scss">
|
|
.menuTop-public {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 896px;
|
|
padding: 15px !important;
|
|
|
|
.menuTop-public-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(25% - 56px) !important;
|
|
height: 45px;
|
|
padding: 16px;
|
|
margin: 12px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.MyApplocation-item-text {
|
|
margin-left: 16px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* .menuTop-list0 {
|
|
width: 896px;
|
|
.menuTop-list0-item {
|
|
width: calc(25% - 56px) !important;
|
|
}
|
|
}
|
|
|
|
.menuTop-list4 {
|
|
width: 1120px;
|
|
flex-wrap: nowrap;
|
|
.menuTop-list4-item {
|
|
width: calc(20% - 56px) !important;
|
|
}
|
|
} */
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.header-container {
|
|
position: relative;
|
|
display: flex;
|
|
height: 100%;
|
|
|
|
.header-left {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
height: 100%;
|
|
|
|
.logo {
|
|
height: 30px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.header-title {
|
|
height: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
font-size: 24px;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-family: 'AlimamaShuHeiTi-Bold';
|
|
}
|
|
|
|
.version {
|
|
margin-left: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 14px;
|
|
margin-top: 0px; /* 减小与主标题的间距 */
|
|
text-align: center;
|
|
line-height: 1; /* 减小行高 */
|
|
}
|
|
|
|
.main-title {
|
|
text-align: center;
|
|
line-height: 1.2; /* 减小行高 */
|
|
margin-bottom: 0; /* 移除底部边距 */
|
|
padding-bottom: 0; /* 移除底部内边距 */
|
|
}
|
|
|
|
.logo-right {
|
|
position: absolute;
|
|
right: -15px;
|
|
bottom: 6px;
|
|
width: 58px;
|
|
height: 10px;
|
|
background-image: url('@/assets/image/logobg.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.menu-conten {
|
|
width: calc(85% - 460px);
|
|
display: flex;
|
|
margin-left: 50px;
|
|
color: #fff;
|
|
|
|
.el-dropdown {
|
|
align-items: center;
|
|
padding: 0 30px;
|
|
|
|
.el-dropdown-link {
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.menu-conten-item {
|
|
// min-width: 80px;
|
|
min-width: auto;
|
|
padding: 0 18px;
|
|
line-height: 56px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 2px;
|
|
|
|
span {
|
|
/* 使用flex布局确保文本居中 */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 为悬浮和选中状态准备的样式 */
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
background: linear-gradient(to top, rgba(255, 255, 255, 0.4), transparent) !important;
|
|
color: #fff !important;
|
|
|
|
span {
|
|
font-weight: 700;
|
|
font-family: 'OPlusSans3-Bold';
|
|
}
|
|
|
|
/* 悬浮时显示底部装饰线 */
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 15%;
|
|
width: 70%;
|
|
height: 4px;
|
|
background-color: #fff;
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-conten-item.isActive {
|
|
background: linear-gradient(to top, rgba(255, 255, 255, 0.4), transparent) !important;
|
|
color: #fff !important;
|
|
|
|
span {
|
|
font-weight: 700;
|
|
font-family: 'OPlusSans3-Bold';
|
|
}
|
|
|
|
/* 选中状态显示底部装饰线 */
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 15%;
|
|
width: 70%;
|
|
height: 4px;
|
|
background-color: #fff;
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-profile {
|
|
position: absolute;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
width: 26%;
|
|
height: 100%;
|
|
|
|
.profile-name {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
width: auto;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.system {
|
|
margin-right: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 34px;
|
|
height: 34px;
|
|
margin-right: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
> .iconfont {
|
|
margin-right: 14px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 22px;
|
|
color: #ADD8E6; // 修改图标颜色为淡蓝色
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.right-profile .zyt {
|
|
display: flex;
|
|
margin: 6px 64px 0px 0px;
|
|
width: 207px;
|
|
height: 43px;
|
|
background-image: url('@/assets/image/yztan.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.right-profile .zyt i {
|
|
display: flex;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
transform: none;
|
|
justify-content: center;
|
|
line-height: 40px;
|
|
position: absolute;
|
|
left: 6.5%;
|
|
}
|
|
|
|
.right-profile .el-dropdown-link {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 30px;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
</style>
|