From 31b028f962e1cfe4c1ef91c706a90fd3aa983533 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 07 Jan 2026 18:03:12 +0800
Subject: [PATCH] feat:数据驾驶舱基础页面搭建
---
applications/drone-command/src/views/dataCockpit/components/RightContainer.vue | 6
applications/drone-command/src/page/index/top/index.vue | 2
applications/drone-command/src/styles/sidebar.scss | 3
applications/drone-command/src/assets/images/dataCockpit/equipment.png | 0
applications/drone-command/src/assets/images/dataCockpit/warning.png | 0
applications/drone-command/src/views/dataCockpit/components/LeftContainer.vue | 6
applications/drone-command/src/views/dataCockpit/index.vue | 47 ++++++++
applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue | 188 +++++++++++++++++++++++++++++++++++++
8 files changed, 243 insertions(+), 9 deletions(-)
diff --git a/applications/drone-command/src/assets/images/dataCockpit/equipment.png b/applications/drone-command/src/assets/images/dataCockpit/equipment.png
new file mode 100644
index 0000000..afae523
--- /dev/null
+++ b/applications/drone-command/src/assets/images/dataCockpit/equipment.png
Binary files differ
diff --git a/applications/drone-command/src/assets/images/dataCockpit/warning.png b/applications/drone-command/src/assets/images/dataCockpit/warning.png
new file mode 100644
index 0000000..a1af17e
--- /dev/null
+++ b/applications/drone-command/src/assets/images/dataCockpit/warning.png
Binary files differ
diff --git a/applications/drone-command/src/page/index/top/index.vue b/applications/drone-command/src/page/index/top/index.vue
index be12e2b..8554741 100644
--- a/applications/drone-command/src/page/index/top/index.vue
+++ b/applications/drone-command/src/page/index/top/index.vue
@@ -117,6 +117,7 @@
justify-content: space-between;
height: 100%;
background: url('@/assets/images/topContainer/top-bg.png') center / 100% 100% no-repeat !important;
+ pointer-events: none;
}
.top-bar__left {
@@ -157,6 +158,7 @@
display: flex !important;
align-items: center;
height: 100%;
+ pointer-events: auto;
.icon-box {
display: flex;
diff --git a/applications/drone-command/src/styles/sidebar.scss b/applications/drone-command/src/styles/sidebar.scss
index 1065933..2b39cc4 100644
--- a/applications/drone-command/src/styles/sidebar.scss
+++ b/applications/drone-command/src/styles/sidebar.scss
@@ -83,9 +83,10 @@
top: 0;
left: 0;
bottom: 0;
- width: 4px;
+ width: 2px;
background: #0041FF;
position: absolute;
+ border-right: 1px solid #1D56FF;
}
background-color: rgba(0, 0, 0, .8);
diff --git a/applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue b/applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue
index f59947f..3545362 100644
--- a/applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/CenterContainer.vue
@@ -1,13 +1,199 @@
<template>
- <div>
+ <div class="center-container">
+ <div class="left-box">
+ <div class="logo">
+ <img :src="warningLogo" alt="">
+ </div>
+ <div class="list">
+ <div class="item" v-for="item, ind in warningList" :key="ind">
+ <div class="val" @click="warningTypeClick(item.type)">
+ {{ item.value }}
+ </div>
+
+ <div class="name">
+ {{ item.title }}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="right-box">
+ <div class="logo">
+ <img :src="equipmentLogo" alt="">
+ </div>
+
+ <div class="list">
+ <div class="item" v-for="item, ind in equipmentList" :key="ind">
+ <div class="val" :class="{highlight: item.isHighlight}" @click="equipmentClick(item.isHighlight)">
+ {{ item.value }}
+ </div>
+
+ <div class="name">
+ {{ item.title }}
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
<script setup>
+import warningLogo from '@/assets/images/dataCockpit/warning.png'
+import equipmentLogo from '@/assets/images/dataCockpit/equipment.png'
+
+let warningList = ref([
+ {
+ title: '实时告警',
+ value: 56,
+ type: 1
+ },
+ {
+ title: '设备告警',
+ value: 127,
+ type: 2
+ },
+ {
+ title: '历史告警',
+ value: 619,
+ type: 3
+ },
+])
+
+let equipmentList = ref([
+ {
+ title: '设备统计',
+ value: 18,
+ isHighlight: true,
+ },
+ {
+ title: '无线电',
+ value: 9,
+ },
+ {
+ title: '光电',
+ value: 6,
+ },
+ {
+ title: '雷达',
+ value: 3,
+ }
+])
+
+const warningTypeClick = (type) => {
+ console.log('点击了告警类型：', type);
+}
+
+const equipmentClick = (isHighlight) => {
+ if (isHighlight) {
+ console.log('点击了设备统计');
+ }
+}
</script>
<style lang="scss" scoped>
+.center-container {
+ display: flex;
+ position: absolute;
+ top: 75px;
+ left: 465px;
+ z-index: 9;
+ pointer-events: none;
+ .left-box {
+ width: 356px;
+
+ .list {
+ .item {
+ .val {
+ color: #FF4444;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ .right-box {
+ margin-left: 20px;
+ width: 455px;
+
+ .list {
+ .item {
+ .val.highlight {
+ color: #6382FF;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ .left-box,
+ .right-box {
+ padding: 17px 20px;
+ display: flex;
+ align-items: center;
+ height: 100px;
+ background: #05050F;
+ box-sizing: border-box;
+ border-radius: 16px 16px 16px 16px;
+ pointer-events: auto;
+
+ .logo {
+ img {
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ .list {
+ width: 0;
+ flex: 1;
+ height: 100%;
+ display: flex;
+
+ .item {
+ width: 0;
+ flex: 1;
+ position: relative;
+ padding-left: 20px;
+ color: #fff;
+
+ .name {
+ font-family: Open Sans, Open Sans;
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .val {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: bold;
+ font-size: 30px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 1px;
+ height: 100%;
+ width: 1px;
+ background: #333355;
+ }
+
+ &:last-child::after {
+ display: none;
+ }
+ }
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/applications/drone-command/src/views/dataCockpit/components/LeftContainer.vue b/applications/drone-command/src/views/dataCockpit/components/LeftContainer.vue
index f59947f..25fb897 100644
--- a/applications/drone-command/src/views/dataCockpit/components/LeftContainer.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/LeftContainer.vue
@@ -1,6 +1,8 @@
<template>
- <div>
-
+ <div class="left-container">
+ <div class="wrapper">
+
+ </div>
</div>
</template>
diff --git a/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue b/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
index f59947f..4811ccb 100644
--- a/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/RightContainer.vue
@@ -1,6 +1,8 @@
<template>
- <div>
-
+ <div class="right-container">
+ <div class="wrapper">
+
+ </div>
</div>
</template>
diff --git a/applications/drone-command/src/views/dataCockpit/index.vue b/applications/drone-command/src/views/dataCockpit/index.vue
index 2d1cf1d..f813e63 100644
--- a/applications/drone-command/src/views/dataCockpit/index.vue
+++ b/applications/drone-command/src/views/dataCockpit/index.vue
@@ -2,7 +2,7 @@
* @Author : yuan
* @Date : 2026-01-06 16:35:50
* @LastEditors : yuan
- * @LastEditTime : 2026-01-07 15:20:14
+ * @LastEditTime : 2026-01-07 17:33:02
* @FilePath : \applications\drone-command\src\views\dataCockpit\index.vue
* @Description :
* Copyright 2026 OBKoro1, All Rights Reserved.
@@ -11,8 +11,8 @@
<template>
<div class="page-container">
<MapContainer />
- <LeftContainer />
- <RightContainer />
+ <LeftContainer class="left-container" />
+ <RightContainer class="right-container" />
<CenterContainer />
</div>
</template>
@@ -30,4 +30,45 @@
width: 100%;
height: 100%;
}
+
+ .left-container,
+ .right-container {
+ position: absolute;
+ top: 96px;
+ bottom: 0;
+ width: 401px;
+ z-index: 9;
+ backdrop-filter: blur(5px);
+
+ ::v-deep(.wrapper) {
+ position: absolute;
+ top: 17px;
+ bottom: 20px;
+ padding: 20px;
+ width: 300px;
+ background: rgba(0,0,0,0.3);
+ border-radius: 10px 10px 10px 10px;
+ }
+ }
+
+ .left-container {
+ top: 96px;
+ left: 0;
+ background: linear-gradient( 270deg, rgba(17,23,34,0) 0%, rgba(17,23,34,0.56) 50%, rgba(17,23,34,0.96) 100%);
+
+ ::v-deep(.wrapper) {
+ left: 17px;
+ }
+ }
+
+ .right-container {
+ top: 54px;
+ right: 0;
+ background: linear-gradient( 270deg, rgba(17,23,34,0.96) 0.16%, rgba(17,23,34,0.56) 57.57%, rgba(4,30,37,0) 100%);
+
+ ::v-deep(.wrapper) {
+ top: 21px;
+ right: 17px;
+ }
+ }
</style>
--
Gitblit v1.9.3