feat:数据驾驶舱页面调整

shuishen

2026-01-17 82ca342142a31dc3cc20659d4bf964fd337cb710

feat:数据驾驶舱页面调整

 applications/drone-command/src/assets/images/dataCockpit/legend/command-post.png

 applications/drone-command/src/assets/images/dataCockpit/legend/drone.png

 applications/drone-command/src/assets/images/dataCockpit/legend/equipment.png

 applications/drone-command/src/assets/images/dataCockpit/map/command-post.png

 applications/drone-command/src/assets/images/dataCockpit/map/equipment.png

 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,
            },
        })
    })

 applications/drone-command/src/views/dataCockpit/components/LegendBar.vue

New file
@@ -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>

 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>