<!--
|
* @Author : yuan
|
* @Date : 2026-01-17 14:51:39
|
* @LastEditors : yuan
|
* @LastEditTime : 2026-01-31 16:03:51
|
* @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 detect-area"></span>
|
<span class="legend-text" data-text="侦测区">侦测区</span>
|
</div>
|
<div class="legend-item">
|
<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="无人机" />
|
<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'
|
import offlineEquipmentIcon from '@/assets/images/dataCockpit/legend/offline-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.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;
|
display: block;
|
}
|
|
.legend-icon.drone {
|
width: 30px;
|
height: 30px;
|
display: block;
|
}
|
</style>
|
