From 82ca342142a31dc3cc20659d4bf964fd337cb710 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 17 Jan 2026 15:18:58 +0800
Subject: [PATCH] feat:数据驾驶舱页面调整
---
applications/drone-command/src/components/map-container/device-map-container.vue | 5 +
applications/drone-command/src/assets/images/dataCockpit/legend/drone.png | 0
applications/drone-command/src/assets/images/dataCockpit/legend/equipment.png | 0
applications/drone-command/src/assets/images/dataCockpit/map/command-post.png | 0
applications/drone-command/src/views/dataCockpit/components/LegendBar.vue | 108 ++++++++++++++++++++++++++++++++++++
applications/drone-command/src/assets/images/dataCockpit/legend/command-post.png | 0
applications/drone-command/src/assets/images/dataCockpit/map/equipment.png | 0
applications/drone-command/src/views/dataCockpit/index.vue | 10 +++
8 files changed, 121 insertions(+), 2 deletions(-)
diff --git a/applications/drone-command/src/assets/images/dataCockpit/legend/command-post.png b/applications/drone-command/src/assets/images/dataCockpit/legend/command-post.png
new file mode 100644
index 0000000..dca43d0
--- /dev/null
+++ b/applications/drone-command/src/assets/images/dataCockpit/legend/command-post.png
Binary files differ
diff --git a/applications/drone-command/src/assets/images/dataCockpit/legend/drone.png b/applications/drone-command/src/assets/images/dataCockpit/legend/drone.png
new file mode 100644
index 0000000..130cf04
--- /dev/null
+++ b/applications/drone-command/src/assets/images/dataCockpit/legend/drone.png
Binary files differ
diff --git a/applications/drone-command/src/assets/images/dataCockpit/legend/equipment.png b/applications/drone-command/src/assets/images/dataCockpit/legend/equipment.png
new file mode 100644
index 0000000..ec33491
--- /dev/null
+++ b/applications/drone-command/src/assets/images/dataCockpit/legend/equipment.png
Binary files differ
diff --git a/applications/drone-command/src/assets/images/dataCockpit/map/command-post.png b/applications/drone-command/src/assets/images/dataCockpit/map/command-post.png
new file mode 100644
index 0000000..1d090e2
--- /dev/null
+++ b/applications/drone-command/src/assets/images/dataCockpit/map/command-post.png
Binary files differ
diff --git a/applications/drone-command/src/assets/images/dataCockpit/map/equipment.png b/applications/drone-command/src/assets/images/dataCockpit/map/equipment.png
index f07291b..99f9bd2 100644
--- a/applications/drone-command/src/assets/images/dataCockpit/map/equipment.png
+++ b/applications/drone-command/src/assets/images/dataCockpit/map/equipment.png
Binary files differ
diff --git a/applications/drone-command/src/components/map-container/device-map-container.vue b/applications/drone-command/src/components/map-container/device-map-container.vue
index b54ab6d..938bdfe 100644
--- a/applications/drone-command/src/components/map-container/device-map-container.vue
+++ b/applications/drone-command/src/components/map-container/device-map-container.vue
@@ -257,8 +257,9 @@
position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0),
billboard: {
image: equipmentIcon,
- width: 40.34,
- height: 40.34,
+ width: 40,
+ height: 56,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
})
})
diff --git a/applications/drone-command/src/views/dataCockpit/components/LegendBar.vue b/applications/drone-command/src/views/dataCockpit/components/LegendBar.vue
new file mode 100644
index 0000000..d115225
--- /dev/null
+++ b/applications/drone-command/src/views/dataCockpit/components/LegendBar.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Author : yuan
+ * @Date : 2026-01-17 14:51:39
+ * @LastEditors : yuan
+ * @LastEditTime : 2026-01-17 15:13:50
+ * @FilePath : \applications\drone-command\src\views\dataCockpit\components\LegendBar.vue
+ * @Description :
+ * Copyright 2026 OBKoro1, All Rights Reserved.
+ * 2026-01-17 14:51:39
+-->
+<template>
+ <div class="legend-bar">
+ <div class="legend-title" data-text="图例">图例</div>
+ <div class="legend-item">
+ <span class="legend-color defense"></span>
+ <span class="legend-text" data-text="防区">防区</span>
+ </div>
+ <div class="legend-item">
+ <span class="legend-color partition"></span>
+ <span class="legend-text" data-text="区域">区域</span>
+ </div>
+ <div class="legend-item">
+ <img class="legend-icon drone" :src="droneIcon" alt="无人机" />
+ <span class="legend-text" data-text="无人机">无人机</span>
+ </div>
+ <div class="legend-item">
+ <img class="legend-icon" :src="commandPostIcon" alt="指挥点" />
+ <span class="legend-text" data-text="指挥点">指挥点</span>
+ </div>
+ <div class="legend-item">
+ <img class="legend-icon" :src="equipmentIcon" alt="设备" />
+ <span class="legend-text" data-text="设备">设备</span>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import droneIcon from '@/assets/images/dataCockpit/legend/drone.png'
+import commandPostIcon from '@/assets/images/dataCockpit/legend/command-post.png'
+import equipmentIcon from '@/assets/images/dataCockpit/legend/equipment.png'
+</script>
+
+<style scoped lang="scss">
+.legend-bar {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 10px 16px;
+
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-size: 14px;
+ color: #FFFFFF;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+}
+
+.legend-title {
+ font-weight: 800;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 12px;
+}
+
+.legend-title,
+.legend-text {
+ position: relative;
+ white-space: nowrap;
+
+ text-shadow:
+ -1px -1px 0 black,
+ 1px -1px 0 black,
+ -1px 1px 0 black,
+ 1px 1px 0 black;
+}
+
+.legend-color {
+ width: 30px;
+ height: 30px;
+ border-radius: 0;
+}
+
+.legend-color.defense {
+ background: radial-gradient(50% 50% at 50% 50%, #2aedbf 0%, #012b11 100%);
+ border: 1px solid #19d266;
+}
+
+.legend-color.partition {
+ background: radial-gradient(50% 50% at 50% 50%, #ffc609 0%, #583300 100%);
+ border: 1px solid #ffcd2a;
+}
+
+.legend-icon {
+ width: 30px;
+ height: 42px;
+ display: block;
+}
+
+.legend-icon.drone {
+ width: 30px;
+ height: 30px;
+ display: block;
+}
+</style>
diff --git a/applications/drone-command/src/views/dataCockpit/index.vue b/applications/drone-command/src/views/dataCockpit/index.vue
index 0568cef..7f44448 100644
--- a/applications/drone-command/src/views/dataCockpit/index.vue
+++ b/applications/drone-command/src/views/dataCockpit/index.vue
@@ -18,6 +18,7 @@
<LeftContainer class="left-container" v-model:activeId="leftActiveId" v-model:collapsed="leftCollapsed" />
<RightContainer class="right-container" v-model:collapsed="rightCollapsed" v-model:onlineDevices="onlineDevices" />
<CenterContainer @select-warning="onSelectWarning" @select-equipment="onSelectEquipment" />
+ <LegendBar class="legend-container" />
</div>
</template>
@@ -26,6 +27,7 @@
import LeftContainer from './components/LeftContainer.vue';
import RightContainer from './components/RightContainer.vue';
import CenterContainer from './components/CenterContainer.vue';
+ import LegendBar from './components/LegendBar.vue';
const leftActiveId = ref(1);
const leftCollapsed = ref(false);
@@ -85,4 +87,12 @@
right: 17px;
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%);
}
+
+ .legend-container {
+ position: absolute;
+ left: 50%;
+ bottom: 22px;
+ transform: translateX(-50%);
+ z-index: 9;
+ }
</style>
--
Gitblit v1.9.3