From af8d4c8fb7b9a81bbcd18b078ebaab40885c94a3 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 31 Jan 2026 16:07:58 +0800
Subject: [PATCH] feat:数据驾驶舱，离线设备增加图例
---
applications/drone-command/src/views/dataCockpit/components/LegendBar.vue | 39 ++++++++++++++++++++++++++++++---------
1 files changed, 30 insertions(+), 9 deletions(-)
diff --git a/applications/drone-command/src/views/dataCockpit/components/LegendBar.vue b/applications/drone-command/src/views/dataCockpit/components/LegendBar.vue
index 52535aa..3ca1b15 100644
--- a/applications/drone-command/src/views/dataCockpit/components/LegendBar.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/LegendBar.vue
@@ -2,7 +2,7 @@
* @Author : yuan
* @Date : 2026-01-17 14:51:39
* @LastEditors : yuan
- * @LastEditTime : 2026-01-17 15:13:50
+ * @LastEditTime : 2026-01-31 16:03:51
* @FilePath : \applications\drone-command\src\views\dataCockpit\components\LegendBar.vue
* @Description :
* Copyright 2026 OBKoro1, All Rights Reserved.
@@ -12,12 +12,16 @@
<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>
+ <span class="legend-color detect-area"></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>
+ <span class="legend-color alarm-area"></span>
+ <span class="legend-text" data-text="报警区">报警区</span>
+ </div>
+ <div class="legend-item">
+ <span class="legend-color key-control-area"></span>
+ <span class="legend-text" data-text="重点管制区">重点管制区</span>
</div>
<div class="legend-item">
<img class="legend-icon drone" :src="droneIcon" alt="无人机" />
@@ -31,6 +35,11 @@
<img class="legend-icon" :src="equipmentIcon" alt="设备" />
<span class="legend-text" data-text="设备">设备</span>
</div>
+
+ <div class="legend-item">
+ <img class="legend-icon" :src="offlineEquipmentIcon" alt="告警设备" />
+ <span class="legend-text" data-text="告警设备">告警设备</span>
+ </div>
</div>
</template>
@@ -38,6 +47,7 @@
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'
+import offlineEquipmentIcon from '@/assets/images/dataCockpit/legend/offline-equipment.png'
</script>
<style scoped lang="scss">
@@ -84,16 +94,27 @@
border-radius: 0;
}
-.legend-color.defense {
- background: radial-gradient(50% 50% at 50% 50%, rgba(114, 243, 255, 0.45) 0%, rgba(10, 124, 136, 0.55) 100%);
- border: 1px solid rgba(114, 243, 255, 0.85);
-}
.legend-color.partition {
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 215, 114, 0.5) 0%, rgba(168, 107, 0, 0.6) 100%);
border: 1px solid rgba(255, 215, 114, 0.9);
}
+.legend-color.detect-area {
+ background-color: rgba(25, 178, 230, 0.5);
+ border: 1px solid rgb(0, 251, 255);
+}
+
+.legend-color.alarm-area {
+ background-color: rgba(255, 235, 59, 0.5);
+ border: 1px solid rgb(255, 235, 59);
+}
+
+.legend-color.key-control-area {
+ background-color: rgba(247, 20, 20, 0.5);
+ border: 1px solid rgb(255, 0, 0);
+}
+
.legend-icon {
width: 30px;
height: 42px;
--
Gitblit v1.9.3