From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
src/layout/Header.vue | 116 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 98 insertions(+), 18 deletions(-)
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
index 5aac0d4..fad0241 100644
--- a/src/layout/Header.vue
+++ b/src/layout/Header.vue
@@ -1,38 +1,96 @@
<template>
<div class="header">
<div class="h-left">
- <div class="left-item active">首页</div>
- <div class="left-item">集群调度</div>
- <div class="left-item">任务管理</div>
- <div class="left-item">航线规划</div>
+ <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 class="right-item">AI识别分析</div>
- <div class="right-item">综合分析</div>
- <div class="right-item">数据中心</div>
- <div class="right-item">系统运维</div>
+ <div
+ v-for="(item, index) in rightList"
+ :key="index"
+ class="right-item"
+ :class="{ active: item.active }"
+ @click="handleClick(item)"
+ >
+ {{ item.name }}
+ </div>
</div>
</div>
- <div :style="{ background: '#2bc03f', height: hToV(50), width: wToR(50) }">test</div>
</template>
-<script>
-import { hToV, wToR } from '@/utils/pxConver';
+<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';
-export default {
- methods: { wToR, hToV },
- mounted() {
- },
+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: 38px;
+ padding-top: 30px;
display: flex;
justify-content: space-between;
+ // position: relative;
.h-left {
display: flex;
@@ -45,7 +103,7 @@
background: url(@/assets/images/header-left.png) no-repeat;
background-size: 100% 100%;
margin-right: 3px;
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
font-weight: 400;
font-size: 18px;
color: #ffffff;
@@ -53,12 +111,33 @@
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 {
@@ -72,7 +151,7 @@
background: url(@/assets/images/header-right.png) no-repeat;
background-size: 100% 100%;
margin-right: 3px;
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
font-weight: 400;
font-size: 18px;
color: #ffffff;
@@ -80,6 +159,7 @@
text-align: center;
font-style: normal;
text-transform: none;
+ cursor: pointer;
}
}
}
--
Gitblit v1.9.3