<!--
|
* @Author : yuan
|
* @Date : 2025-06-13 09:42:10
|
* @LastEditors : yuan
|
* @LastEditTime : 2025-06-13 11:23:40
|
* @FilePath : \src\layout\Header.vue
|
* @Description :
|
* Copyright 2025 OBKoro1, All Rights Reserved.
|
* 2025-06-13 09:42:10
|
-->
|
<template>
|
<div class="header">
|
<div class="h-left">
|
<div
|
v-for="(item, index) in leftList"
|
:key="index"
|
class="left-item"
|
:class="{ active: item.active, 'dom-visibility': item.hidden }"
|
@click="handleClick(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
<div class="big-title">{{ baseHeaderTitle }}</div>
|
<div class="h-right">
|
<div
|
v-for="(item, index) in rightList"
|
:key="index"
|
class="right-item"
|
:class="{ active: item.active, 'dom-visibility': item.hidden }"
|
@click="handleClick(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { useRouter, useRoute } from 'vue-router'
|
import { Message } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import { ELocalStorageKey } from '@/utils/http/enums'
|
import { useStore } from 'vuex'
|
|
import getBaseConfig from '@/buildConfig/config'
|
import { getConfigApi } from '@/api/home'
|
|
const { menuLeftList, meneRightList, headerTitle } = getBaseConfig()
|
|
const router = useRouter()
|
const route = useRoute()
|
|
const store = useStore()
|
|
const baseHeaderTitle = ref(headerTitle)
|
|
const leftList = ref(menuLeftList)
|
|
const rightList = ref(meneRightList)
|
|
const handleClick = ({ path, name }) => {
|
const adminUrl = import.meta.env.VITE_APP_ADMIN_URL
|
if (['系统运维'].includes(name)) {
|
window.open(`${adminUrl}wel/index`, '_blank')
|
return
|
}
|
// if (!['首页', '任务管理', '集群调度', '航线规划', 'AI识别分析', '数据中心'].includes(name))
|
// return ElMessage.warning('正在加急开发中...')
|
// 更新 leftList 的 active 状态
|
leftList.value.forEach(item => {
|
item.active = item.path === path
|
})
|
|
// 更新 rightList 的 active 状态
|
rightList.value.forEach(item => {
|
item.active = item.path === path
|
})
|
// 跳转到指定页面
|
router.push(path)
|
}
|
// 重置所有菜单项的active状态
|
const updateActiveMenu = path => {
|
leftList.value.forEach(item => {
|
item.active = item.path === path
|
})
|
rightList.value.forEach(item => {
|
item.active = item.path === path
|
})
|
}
|
// 监听跳转到数据中心
|
watch(
|
[() => store.state.dataCenter?.jumpDataCenter, () => route.path],
|
([jumpVal, currentPath], [oldJumpVal, oldPath]) => {
|
// 跳转数据中心逻辑
|
if (jumpVal) {
|
updateActiveMenu('/dataCenter')
|
}
|
|
// 路由变化时恢复状态
|
if (currentPath !== oldPath) {
|
if (currentPath !== '/dataCenter') {
|
store.commit('setJumpDataCenter', null)
|
}
|
updateActiveMenu(currentPath)
|
}
|
},
|
{ immediate: true }
|
)
|
// 监听从巡检任务概况提交的数据
|
watch(
|
[() => store.state.task.jumpTask, () => route.path],
|
([newVal, newPath], [oldVal, oldPath]) => {
|
if (newVal) {
|
const currentPath = '/taskManage'
|
leftList.value.forEach(item => {
|
item.active = item.path === currentPath
|
})
|
}
|
|
if (newPath !== oldPath) {
|
if (newPath !== '/taskManage') {
|
store.commit('setJumpTask', {})
|
}
|
}
|
leftList.value.forEach(item => {
|
item.active = item.path === newPath
|
})
|
},
|
{ deep: true, immediate: true }
|
)
|
|
// 获取系统配置
|
function getConfig() {
|
getConfigApi().then(res => {
|
const title = res?.data?.data?.name
|
if (title){
|
baseHeaderTitle.value = title
|
}
|
})
|
}
|
onMounted(() => {
|
// 初始化 leftList 的 active 状态
|
const currentPath = route.path
|
leftList.value.forEach(item => {
|
item.active = item.path === currentPath
|
})
|
|
// 初始化 rightList 的 active 状态
|
rightList.value.forEach(item => {
|
item.active = item.path === currentPath
|
})
|
getConfig()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.header {
|
width: calc(100% - 57px - 59px);
|
margin-left: 57px;
|
padding-top: 30px;
|
display: flex;
|
justify-content: space-between;
|
// position: relative;
|
|
.h-left {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.left-item {
|
width: 105px;
|
height: 39px;
|
background: url(@/assets/images/header-left.png) no-repeat;
|
background-size: 100% 100%;
|
margin-right: 3px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
|
font-weight: 400;
|
font-size: 18px;
|
color: #ffffff;
|
line-height: 42px;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
cursor: pointer;
|
}
|
|
.active {
|
background: url(@/assets/images/header-active.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
.big-title {
|
position: relative;
|
top: -12px;
|
left: 8px;
|
// border: 1px solid red;
|
width: 710px;
|
height: 58px;
|
line-height: 58px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 48px;
|
line-height: 53px;
|
letter-spacing: 3px;
|
text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66), 0px 0px 18px rgba(130, 165, 255, 0.4),
|
inset 0px 0px 2px rgba(255, 255, 255, 0.8);
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
background: linear-gradient(180deg, #ffffff 23%, #e9f8ff 46%, #77baff 76%);
|
-webkit-background-clip: text;
|
color: transparent;
|
background-clip: text;
|
}
|
|
.h-right {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.right-item {
|
width: 105px;
|
height: 39px;
|
background: url(@/assets/images/header-right.png) no-repeat;
|
background-size: 100% 100%;
|
margin-right: 3px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
|
font-weight: 400;
|
font-size: 18px;
|
color: #ffffff;
|
line-height: 42px;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
cursor: pointer;
|
}
|
|
.active {
|
background: url(@/assets/images/header-active-right.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
|
.dom-visibility {
|
visibility: hidden;
|
}
|
</style>
|
