From 9b178c3f200efa15fbfee7aa67d09177bca84d47 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 28 Mar 2025 17:09:43 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/layout/Header.vue | 89 +++++++++++++++--
src/assets/images/home/homeRight/operate1.png | 0
src/assets/images/home/searchBox/searchBg2.png | 0
src/assets/images/home/searchBox/searchBg3.png | 0
src/assets/images/home/searchBox/searchBg1.png | 0
src/assets/images/home/homeRight/operate3.png | 0
src/views/Home/components/HomeRight/UserOperate.vue | 25 +++++
src/assets/images/home/homeRight/operate2.png | 0
src/views/Home/components/HomeRight/HomeRight.vue | 2
src/views/Home/Home.vue | 21 ++--
src/views/Home/SearchBox.vue | 132 +++++++++++++++++++++++++
11 files changed, 241 insertions(+), 28 deletions(-)
diff --git a/src/assets/images/home/homeRight/operate1.png b/src/assets/images/home/homeRight/operate1.png
new file mode 100644
index 0000000..61bafef
--- /dev/null
+++ b/src/assets/images/home/homeRight/operate1.png
Binary files differ
diff --git a/src/assets/images/home/homeRight/operate2.png b/src/assets/images/home/homeRight/operate2.png
new file mode 100644
index 0000000..654de74
--- /dev/null
+++ b/src/assets/images/home/homeRight/operate2.png
Binary files differ
diff --git a/src/assets/images/home/homeRight/operate3.png b/src/assets/images/home/homeRight/operate3.png
new file mode 100644
index 0000000..27a3722
--- /dev/null
+++ b/src/assets/images/home/homeRight/operate3.png
Binary files differ
diff --git a/src/assets/images/home/searchBox/searchBg1.png b/src/assets/images/home/searchBox/searchBg1.png
new file mode 100644
index 0000000..9d02ed1
--- /dev/null
+++ b/src/assets/images/home/searchBox/searchBg1.png
Binary files differ
diff --git a/src/assets/images/home/searchBox/searchBg2.png b/src/assets/images/home/searchBox/searchBg2.png
new file mode 100644
index 0000000..983f8c2
--- /dev/null
+++ b/src/assets/images/home/searchBox/searchBg2.png
Binary files differ
diff --git a/src/assets/images/home/searchBox/searchBg3.png b/src/assets/images/home/searchBox/searchBg3.png
new file mode 100644
index 0000000..e0402f2
--- /dev/null
+++ b/src/assets/images/home/searchBox/searchBg3.png
Binary files differ
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
index 99e667b..1f8d39b 100644
--- a/src/layout/Header.vue
+++ b/src/layout/Header.vue
@@ -1,23 +1,82 @@
<template>
<div class="header">
<div class="h-left">
- <div class="left-item active" @click="router.push('/')">首页</div>
- <div class="left-item">集群调度</div>
- <div class="left-item" @click="router.push('/taskManage')">任务管理</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>
</template>
<script setup>
-const router = useRouter()
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { Message } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+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)) return ElMessage.warning('正在开发中');
+ // 更新 leftList 的 active 状态
+ leftList.value.forEach(item => {
+ item.active = item.router === path;
+ });
+
+ // 更新 rightList 的 active 状态
+ rightList.value.forEach(item => {
+ item.active = item.router === path;
+ });
+ console.log(path);
+ // 跳转到指定页面
+ router.push(path);
+};
+
+onMounted(() => {
+ // 初始化 leftList 的 active 状态
+ const currentPath = route.path;
+ leftList.value.forEach(item => {
+ item.active = item.router === currentPath;
+ });
+
+ // 初始化 rightList 的 active 状态
+ rightList.value.forEach(item => {
+ item.active = item.router === currentPath;
+ });
+});
</script>
<style scoped lang="scss">
@@ -40,7 +99,7 @@
background: url(@/assets/images/header-left.png) no-repeat;
background-size: 100% 100%;
margin-right: 3px;
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei,serif;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
font-weight: 400;
font-size: 18px;
color: #ffffff;
@@ -48,6 +107,7 @@
text-align: center;
font-style: normal;
text-transform: none;
+ cursor: pointer;
}
.active {
@@ -55,6 +115,7 @@
background-size: 100% 100%;
}
}
+
.big-title {
position: relative;
top: -12px;
@@ -63,14 +124,16 @@
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-weight: 400;
font-size: 45px;
- color: #FFFFFF;
+ color: #ffffff;
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-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;
}
+
.h-right {
display: flex;
justify-content: space-between;
@@ -82,7 +145,7 @@
background: url(@/assets/images/header-right.png) no-repeat;
background-size: 100% 100%;
margin-right: 3px;
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei,serif;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
font-weight: 400;
font-size: 18px;
color: #ffffff;
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 8c17d8f..efd6de6 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -1,22 +1,21 @@
<template>
- <HomeLeft></HomeLeft>
- <!-- <div>中间搜索</div> -->
- <HomeRight></HomeRight>
+ <HomeLeft></HomeLeft>
+ <!-- <div>中间搜索</div> -->
+ <HomeRight></HomeRight>
+
+ <SearchBox />
</template>
<script setup>
import HomeRight from './components/HomeRight/HomeRight.vue';
import HomeLeft from '@/views/Home/components/HomeLeft/HomeLeft.vue';
import { getAggregation } from '@/views/Home/aggregation';
+import SearchBox from '@/views/Home/SearchBox.vue';
onMounted(() => {
nextTick(() => {
- getAggregation()
- })
-})
-
-
-
+ getAggregation();
+ });
+});
</script>
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/views/Home/SearchBox.vue b/src/views/Home/SearchBox.vue
index aca7698..591231a 100644
--- a/src/views/Home/SearchBox.vue
+++ b/src/views/Home/SearchBox.vue
@@ -1,13 +1,137 @@
<script setup>
+const input3 = ref('');
+const value = ref('Option1');
+const value2 = ref('Optio44n1');
+
+const options = [
+ {
+ value: 'Option1',
+ label: '机巢',
+ },
+ {
+ value: 'Optio44n1',
+ label: '事件',
+ },
+];
+
+const options1 = [
+ {
+ value: 'Option1',
+ label: '南昌市',
+ },
+ {
+ value: 'Optio44n1',
+ label: '抚州市',
+ },
+];
</script>
-
<template>
- <div>
+ <div class="searchBox">
+ <div class="searchInput">
+ <el-select v-model="value" placeholder="请选择查询">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
- </div>
+ <el-input v-model="input3" placeholder="请输入搜索关键字"></el-input>
+ </div>
+ <div class="searchBtn"></div>
+ <div class="region">
+ <el-select v-model="value2" placeholder="请选择查询">
+ <el-option
+ v-for="item in options1"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ </div>
</template>
-
<style scoped lang="scss">
+.searchBox {
+ width: 420px;
+ height: 43px;
+ position: absolute;
+ top: 145px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ .el-select {
+ width: 130px;
+ height: 100%;
+
+ :deep() {
+ .el-select__wrapper {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ height: 100%;
+ padding-left: 20px;
+ }
+
+ .el-select__selected-item {
+ font-family: Source Han Sans CN, Source Han Sans CN, serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ line-height: 18px;
+ }
+ }
+ }
+
+ .searchInput {
+ width: 243px;
+ height: 100%;
+ background: url('@/assets/images/home/searchBox/searchBg1.png') no-repeat center / 100% 100%;
+ display: flex;
+
+ .el-input {
+ height: 100%;
+
+ :deep() {
+ .el-input__wrapper {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ height: 100%;
+ }
+
+ .el-input__inner {
+ font-family: Source Han Sans CN, Source Han Sans CN, serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ line-height: 18px;
+ }
+ }
+ }
+ }
+
+ .searchBtn {
+ width: 67px;
+ height: 100%;
+ background: url('@/assets/images/home/searchBox/searchBg2.png') no-repeat center / 100% 100%;
+ cursor: pointer;
+ }
+
+ .region {
+ width: 0;
+ flex-grow: 1;
+ background: url('@/assets/images/home/searchBox/searchBg3.png') no-repeat center / 100% 100%;
+
+ :deep() {
+ .el-select__wrapper {
+ width: 100px;
+ padding-left: 20px;
+ }
+ }
+ }
+}
</style>
diff --git a/src/views/Home/components/HomeRight/HomeRight.vue b/src/views/Home/components/HomeRight/HomeRight.vue
index 06ac641..180e997 100644
--- a/src/views/Home/components/HomeRight/HomeRight.vue
+++ b/src/views/Home/components/HomeRight/HomeRight.vue
@@ -1,5 +1,6 @@
<template>
<div class="home-right">
+ <UserOperate/>
<Synergy />
<TaskAchievements />
<EventOverview />
@@ -10,6 +11,7 @@
import Synergy from '@/views/Home/components/HomeRight/Synergy.vue';
import TaskAchievements from '@/views/Home/components/HomeRight/TaskAchievements.vue';
import EventOverview from '@/views/Home/components/HomeRight/EventOverview.vue';
+import UserOperate from '@/views/Home/components/HomeRight/UserOperate.vue';
</script>
<style scoped lang="scss">
diff --git a/src/views/Home/components/HomeRight/UserOperate.vue b/src/views/Home/components/HomeRight/UserOperate.vue
new file mode 100644
index 0000000..6e11799
--- /dev/null
+++ b/src/views/Home/components/HomeRight/UserOperate.vue
@@ -0,0 +1,25 @@
+<script setup></script>
+
+<template>
+ <div class="userOperate">
+ <img alt="" src="@/assets/images/home/homeRight/operate1.png" />
+ <img alt="" src="@/assets/images/home/homeRight/operate2.png" />
+ <img alt="" src="@/assets/images/home/homeRight/operate3.png" />
+ </div>
+</template>
+
+<style scoped lang="scss">
+.userOperate {
+ position: absolute;
+ right: 27px;
+ top: -30px;
+ width: 132px;
+ height: 38px;
+ display: flex;
+ justify-content: space-between;
+
+ > img {
+ cursor: pointer;
+ }
+}
+</style>
--
Gitblit v1.9.3