<template>
|
<div class="header">
|
<div class="h-left">
|
<div
|
v-for="(item, index) in leftList"
|
:key="index"
|
class="left-item"
|
:class="{ active: item.active }"
|
@click="handleClick(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
<div class="big-title">西湖区指挥调度平台</div>
|
<div class="h-right">
|
<div
|
v-for="(item, index) in rightList"
|
:key="index"
|
class="right-item"
|
:class="{ active: item.active }"
|
@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';
|
|
const router = useRouter();
|
const route = useRoute();
|
|
const leftList = ref([
|
{ name: '首页', active: true, path: '/index' },
|
{ name: '集群调度', active: false, path: '/clusterScheduling' },
|
{ name: '任务管理', active: false, path: '/taskManage' },
|
{ name: '航线规划', active: false, path: '/routePlanning' },
|
]);
|
|
const rightList = ref([
|
{ name: 'AI识别分析', active: false, path: '/aiAnalysis' },
|
{ name: '综合分析', active: false, path: '/comprehensiveAnalysis' },
|
{ name: '数据中心', active: false, path: '/dataCenter' },
|
{ name: '系统运维', active: false, path: '/systemMaintenance' },
|
]);
|
|
const handleClick = ({ path, name }) => {
|
if (['系统运维'].includes(name)) {
|
window.open(import.meta.env.VITE_APP_ADMIN_URL, '_blank');
|
return;
|
}
|
if (!['首页', '任务管理'].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);
|
};
|
|
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;
|
});
|
});
|
</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;
|
width: 500px;
|
height: 58px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 45px;
|
line-height: 53px;
|
letter-spacing: 11px;
|
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;
|
}
|
}
|
}
|
</style>
|
