DiKongGanZhiPingTai/src/views/demo/workmanagement/workplan/components/aircraft.vue

<template>
    <div class="container">
        <div class="title" @click="closeAirCraft()">
            <div style="flex:1;">
                <LeftOutlined @click="checkAriLine(null);"/> &nbsp; 选择飞行器
            </div>
        </div>
        <div class="filter-container">
            <div>
                <a-select
                    ref="select"
                    style="width: 140px"
                    placeholder="全部机型"
                    >
                    <a-select-option value="jack">全部机型</a-select-option>
                    <a-select-option value="lucy">经纬 M30 系列</a-select-option>
                    <a-select-option value="disabled">Mavic 3 行业系列</a-select-option>
                    <a-select-option value="Yiminghe">Matrice 3D 系列</a-select-option>
                </a-select>
            </div>


            <div class="filter-buttons">
                <a-input-search
                    v-model:value="pageQuery.key"
                    @keyup.enter="getList()"
                    placeholder="输入飞行器名称"
                />
            </div>
        </div>
 

        <div class="routers-container">
            
            <div class="routers-list">
                <div class="ari-line" v-for="(item,index) in ariLineList" :key="index" @click="checkAriLine(item)">
                    <div class="type" >
                        <img src="/public/iocn/uav.png" alt="">
                        {{item.name}}
                    </div>
                    <div class="time">无人机型号：{{item.typeId}}</div>
                </div> 
            </div>
        </div>
    </div>    
</template>
<script lang="ts" setup>

    import { PlusOutlined,FileAddOutlined,LeftOutlined,ImportOutlined,MoreOutlined,EditOutlined } from '@ant-design/icons-vue';
    import {ref,defineEmits} from 'vue'
    import { getUavPageList,getPortList } from '@/api/sys/workplan';
    
    const emit = defineEmits(["checkAriLine","closeAirCraft"])

    const checkAriLine = (item)=> {
        emit("checkAriLine",item);
    }

    const closeAirCraft = () => {
        emit("closeAirCraft");
    }

    const ariLineList = ref([])
    
    const pageQuery = ref({
        page:1,
        limit:10,
        key:null,
    })

    const getList = async ()=>{
        let res = await getPortList(pageQuery.value);
        ariLineList.value = res.items;
    }

    getList();

</script>
<style scoped>
.container{
    width:100%;
    height:100%;
    background: #0D0E15;
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
    border-radius: 6px;
}
.title{
    padding:15px;
    color:#fff;
    font-size:14px;
    display:flex;
    cursor:pointer;
}
.filter-container{
    padding:0px 15px;
    display:flex;
    gap:8px;
}
.search-container{
    width: calc( 100% -  30px);
    border-radius: 3px;
    margin: 15px;
    border:1px solid #3a57e890;
}
.filter-buttons{
    display:flex;
    gap:8px;
    text-align: center;
    
}
.filter-button{
    width:32px;
    height:32px;
    border-radius: 3px;
    padding-top:4px;
    background: #3F4150;
    cursor:pointer;
}
.routers-container{
    display:flex;
    gap:10px;
    font-size:14px;
}

.file-container{
    width:220px;
    border-right: 1px solid rgba(204, 204, 204, 0.496) ;
    padding:15px
}
.file-container .tip{
    display: flex;
    color:#fff;
    padding:8px 0px;
}

.file-container .tip .info{
    flex:1;
}
.routers-list{
    flex:1;
    padding:15px;
}

.routers-list .tip{
    display: flex;
    color:#fff;
    padding:8px 0px;
}
.routers-list .tip .info{
    flex:1;
}
.ari-line{
    color:#fff;
    padding:5px 10px;
    margin-bottom:10px;
    position:relative;
    font-size: 13px;
    border-radius: 3px;
    background: linear-gradient( 132deg, #323D62 0%, #525F83 100%);
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
    border-radius: 10px;
}

.ari-line::before{
    content:"";
    width:2px;
    height:18px;
    position:absolute;
    top:10px;
    left:0px;
    background:#3A57E8;
}

.ari-line .title{
    width: 100%;
    line-height: 28px;
    padding:2px 0px;
    border-bottom:1px solid #4E5778;
    display: flex;
}

.ari-line .type{
    padding:12px 0px;

}

.ari-line .type img{
    width:16px;
}



.ari-line .time{
    font-size: 12px;
    color:#ccc;
}


::v-deep .ant-select-selector{
    border:none!important;
    color:#fff!important;
    background:#3F4150!important ;
    border-radius: 3px!important;
}


::v-deep .ant-select-selection-placeholder {
    color:rgba(255, 255, 255, 0.533)!important;
  }
::v-deep .ant-select-arrow {
    color:rgba(255, 255, 255, 0.533)!important;
  }
::v-deep .ant-select-selection-search-input::placeholder{
    color:rgba(255, 255, 255, 0.933)!important;
}


::v-deep .ant-tree {
    background:none!important;
    color:#fff!important;
}

::v-deep .ant-tree-treenode-selected{
    background:#3a57e877!important;
}

::v-deep .ant-tree-treenode-selected::before{
    background:none!important;
}

::v-deep .ant-tree-treenode-selected::after{
    content:"";
    height:28px;
    width:4px;
    background:#3A57E8;
    position:absolute;
    top:0px;
    left:0px;
}

::v-deep .ant-input{
    background:#3F4150!important ;
    border:none!important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}

::v-deep .ant-input::placeholder{
    color:rgba(255, 255, 255, 0.533)!important;
}


::v-deep .ant-btn-default{
    background:none!important;
    border:none!important;
    outline:none!important;
    color:#fff!important;
    height:30px !important;
    background:#3F4150!important ;
}


::v-deep .ant-input{
    background:#3c3c3c!important ;
    border:none!important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
    color:#fff!important;
}

::v-deep .ant-input::placeholder{
    color:rgba(255, 255, 255, 0.533)!important;
}
</style>