feat:倾斜航线加载通用1~5航线切换组件处理

shuishen

2025-06-11 85cd9a9b9b529285034f6e649821c3889bf31a6d

feat:倾斜航线加载通用1~5航线切换组件处理

 src/components/PlanarRouteLineList/PlanarRouteLineList.vue

New file
@@ -0,0 +1,77 @@
<!--
 * @Author       : yuan
 * @Date         : 2025-06-10 15:34:31
 * @LastEditors  : yuan
 * @LastEditTime : 2025-06-10 15:53:47
 * @FilePath     : \src\components\PlanarRouteLineList\PlanarRouteLineList.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-06-10 15:34:31
-->
<template>
    <div class="route-line-list" :class="customClass" v-show="props.curRouteLineData.templateType === 'mapping3d'">
        <div :class="{ active: item.select }" v-for="(item, index) in props.curRouteLineData.data" :key="index"
            @click="emit('routeLineListClick', item)">
            {{ index + 1 }}
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    curRouteLineData: {
        type: Object,
        default: {
            data: [],
            polygonList: '',
            templateType: '',
            startPoint: '',
            execute_height_mode: '',
            auto_flight_speed: '',
            wayline_type: '',
        },
    },

    customClass: {
        type: String,
        value: '',
    },
})

const emit = defineEmits(['routeLineListClick'])
</script>

<style lang="scss" scoped>
.route-line-list {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0, -50%);

    display: flex;
    flex-direction: column;

    background: rgba(255, 255, 255, 1);
    border-radius: 4px 4px 4px 4px;

    div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: #676767;
        cursor: pointer;
    }

    div.active {
        color: #fff;
        background: #409EFF;
        backdrop-filter: blur(4px);
    }
}

.airline-list {
    left: 440px;
}
</style>