118 lines
2.6 KiB
Vue
118 lines
2.6 KiB
Vue
<template>
|
|
<div class="flightoperation-top">
|
|
<div class="select-item">
|
|
<img src="@/assets/images/flightoperation/project.png" alt="" />
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="selectVal.project"
|
|
style="width: 120px"
|
|
:options="optionsArr.projectOptions"
|
|
placeholder="项目选择"
|
|
@change="handleChange"
|
|
/>
|
|
</div>
|
|
<div class="select-item">
|
|
<img src="@/assets/images/flightoperation/equipment.png" alt="" />
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="selectVal.equipment"
|
|
style="width: 120px"
|
|
:options="optionsArr.equipmentOptions"
|
|
placeholder="设备选择"
|
|
@change="handleChange"
|
|
/>
|
|
</div>
|
|
<div class="select-item">
|
|
<img src="@/assets/images/flightoperation/airport.png" alt="" />
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="selectVal.airport"
|
|
style="width: 120px"
|
|
:options="optionsArr.airportOptions"
|
|
placeholder="机场选择"
|
|
@change="handleChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
|
|
const emits = defineEmits(['selectChange']);
|
|
const selectVal = reactive({
|
|
project: null,
|
|
equipment: null,
|
|
airport: null,
|
|
});
|
|
const optionsArr = reactive({
|
|
projectOptions: [
|
|
{
|
|
label: '项目1',
|
|
value: 1,
|
|
},
|
|
],
|
|
equipmentOptions: [
|
|
{
|
|
label: '无人机',
|
|
value: '1581F8HGX254V00A0BUY',
|
|
},
|
|
],
|
|
airportOptions: [
|
|
{
|
|
label: '机场',
|
|
value: '8UUXN5400A079H',
|
|
},
|
|
],
|
|
});
|
|
const handleChange = () => {
|
|
console.log(selectVal);
|
|
emits('selectChange', selectVal);
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.flightoperation-top {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.select-item {
|
|
width: 160px;
|
|
height: 38px;
|
|
margin-left: 10px;
|
|
background: #3a57e8;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
::v-deep .ant-select-selector {
|
|
background: #3a57e8;
|
|
border: none;
|
|
color: #fff;
|
|
.ant-select-selection-placeholder {
|
|
color: #fff;
|
|
}
|
|
}
|
|
::v-deep .ant-select-arrow {
|
|
color: #fff;
|
|
}
|
|
img {
|
|
width: 20px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
.select-item:nth-child(2) {
|
|
background: #08b1ba;
|
|
::v-deep .ant-select-selector {
|
|
background: #08b1ba;
|
|
}
|
|
}
|
|
.select-item:nth-child(3) {
|
|
background: #1aa053;
|
|
::v-deep .ant-select-selector {
|
|
background: #1aa053;
|
|
}
|
|
}
|
|
</style>
|