<!-- 飞行活动申请 -->
|
<template>
|
<view class="flightApplication-add">
|
<view class="title">
|
基本信息
|
</view>
|
<u-form labelPosition="top" :model="formParams" :rules="rules" ref="formRef">
|
<u-form-item
|
label="飞行计划"
|
labelWidth="200rpx"
|
prop="flightPlanName"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.flightPlanName" border="none" placeholder="请输入飞行计划名称"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="任务类型"
|
labelWidth="230rpx"
|
prop="flightTaskType"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.flightTaskType"
|
disabled
|
disabledColor="#ffffff"
|
placeholder="请选择任务类型"
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行规则"
|
labelWidth="230rpx"
|
prop="flightRule"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.flightRule"
|
disabled
|
disabledColor="#ffffff"
|
placeholder="请选择飞行规则"
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行方式"
|
labelWidth="200rpx"
|
prop="flightMode"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.flightMode"
|
disabled
|
disabledColor="#ffffff"
|
placeholder="请选择飞行方式"
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行活动开始日期"
|
labelWidth="260rpx"
|
prop="flightStartTime"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.flightStartTime" border="none" placeholder="请选择日期" suffixIcon="calendar"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行活动结束日期"
|
labelWidth="260rpx"
|
prop="flightEndTime"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.flightEndTime" border="none" placeholder="请选择日期" suffixIcon="calendar"></u-input>
|
</u-form-item>
|
|
<u-form-item
|
label="计划类型"
|
labelWidth="200rpx"
|
prop="planType"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.planType"
|
disabled
|
disabledColor="#ffffff"
|
placeholder="请选择计划类型"
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="联系人"
|
labelWidth="200rpx"
|
prop="contactPerson"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.contactPerson" border="none" placeholder="请输入"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="联系电话"
|
labelWidth="200rpx"
|
prop="contactPhone"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.contactPhone" border="none" placeholder="请输入"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="承办人"
|
labelWidth="200rpx"
|
prop="undertaker"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.undertaker" border="none" placeholder="请输入"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="承办人联系电话"
|
labelWidth="300rpx"
|
prop="undertakerPhone"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.undertakerPhone" border="none" placeholder="请输入"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="临时空域批件"
|
labelWidth="200rpx"
|
prop="aircraftName"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.tempAirspaceApproval" border="none" readonly></u-input>
|
</u-form-item>
|
<u-form-item
|
label="气象条件"
|
labelWidth="200rpx"
|
prop="weatherCondition"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.weatherCondition"
|
border="none"
|
placeholder="请输入"
|
></u-input>
|
</u-form-item>
|
<view class="title form-title">飞行器/飞手</view>
|
<u-form-item
|
label="飞行器"
|
labelWidth="230rpx"
|
prop="aircraftId"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.aircraftId"
|
disabled
|
disabledColor="#ffffff"
|
placeholder="请选择飞行器"
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞手"
|
labelWidth="230rpx"
|
prop="pilotId"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.pilotId"
|
disabled
|
disabledColor="#ffffff"
|
placeholder="请选择飞手"
|
border="none"
|
></u-input>
|
</u-form-item>
|
<view class="title form-title">空域/航线/场点</view>
|
<u-form-item
|
label="空域"
|
labelWidth="230rpx"
|
prop="airspaceId"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.airspaceId"
|
disabled
|
disabledColor="#ffffff"
|
placeholder="请选择空域"
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="航线"
|
labelWidth="230rpx"
|
prop="routeId"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.routeId"
|
disabled
|
disabledColor="#ffffff"
|
placeholder="请选择航线"
|
border="none"
|
></u-input>
|
</u-form-item>
|
</u-form>
|
</view>
|
</template>
|
<script setup>
|
import { flightPlanSaveApi,
|
flightRoutePageInfoApi,
|
aircraftInfoPageInfoOfMyApi,
|
pilotInfoPageInfoOfMyApi,
|
flightAirspacePageInfoApi,
|
uploadFileApi,
|
flightTaskApi,flightRulesApi,flightModeApi,flightPlanApi,flightPlanDetailsApi
|
} from '@/api/index'
|
import { ref, computed, onMounted } from 'vue'
|
import dayjs from 'dayjs'
|
|
const formRef = ref(null);
|
const formParams = ref({})
|
const rules = ref({})
|
// 任务类型
|
const isShowFlightTaskType = ref(false)
|
const actionsFlightTaskType = ref([])
|
|
|
// 飞行规则
|
const isShowFlightRule = ref(false)
|
const actionsFlightRule = ref([])
|
|
// 飞行方式
|
const isShowFlightMode = ref(false)
|
const actionsFlightMode = ref([])
|
|
// 计划类型
|
const isShowPlanType = ref(false)
|
const actionsPlanType = ref([])
|
|
// 是否显示开始时间选择器
|
const isShowStartTime = ref(false)
|
// 是否显示结束时间选择器
|
const isShowEndTime = ref(false)
|
const startTime = ref(Date.now()); // 设置默认值为当前时间戳
|
const endTime = ref(Date.now()); // 设置默认值为当前时间戳
|
|
const onConfirmStartTime = (e) => {
|
formParams.value.flightStartTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
isShowStartTime.value = false
|
}
|
const onConfirmEndTime = (e) => {
|
formParams.value.flightEndTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
isShowEndTime.value = false
|
}
|
|
|
|
// 获取飞行器信息
|
const isShowAircraftInfo = ref(false)
|
const aircraftInfoList = ref([])
|
function getAircraftInfo() {
|
aircraftInfoPageInfoOfMyApi({
|
current: 1,
|
size: 1000,
|
}).then(res => {
|
aircraftInfoList.value = res.data.data.records.map(item => ({
|
label: item.name || '暂无',
|
value: item.id,
|
}))
|
})
|
}
|
const onPickerAircraftInfo = (e) => {
|
const selected = e.value[0]
|
formParams.value.aircraftId = selected.value
|
formParams.value.aircraftText = selected.label
|
isShowAircraftInfo.value = false
|
}
|
// 获取飞手信息
|
const isShowPilotInfo = ref(false)
|
const pilotInfoList = ref([])
|
function getPilotInfo() {
|
pilotInfoPageInfoOfMyApi({
|
current: 1,
|
size: 1000,
|
}).then(res => {
|
pilotInfoList.value = res.data.data.records.map(item => ({
|
label: item.name || '暂无',
|
value: item.id,
|
}))
|
})
|
}
|
// 获取空域信息
|
const isShowAirspaceInfo = ref(false)
|
const airspaceInfoList = ref([])
|
function getAirspaceInfo() {
|
flightAirspacePageInfoApi({
|
current: 1,
|
size: 1000,
|
}).then(res => {
|
airspaceInfoList.value = res.data.data.records.map(item => ({
|
label: item.airspaceName || '暂无',
|
value: item.id,
|
}))
|
})
|
}
|
// 获取航线信息
|
const isShowFlightRouteInfo = ref(false)
|
const flightRouteInfoList = ref([])
|
function getFlightRouteInfo() {
|
flightRoutePageInfoApi({
|
current: 1,
|
size: 1000,
|
}).then(res => {
|
flightRouteInfoList.value = res.data.data.records.map(item => ({
|
label: item.name,
|
value: item.id,
|
}))
|
})
|
}
|
|
// 获取任务类型
|
function getTaskType() {
|
flightTaskApi().then(res => {
|
actionsFlightTaskType.value = res.data.data.map(item => ({
|
...item,
|
label: item.dictLabel || '暂无',
|
value: item.dictCode || '暂无',
|
}))
|
})
|
}
|
// 获取飞行模式
|
function getFlightMode() {
|
flightModeApi().then(res => {
|
actionsFlightMode.value = res.data.data.map(item => ({
|
...item,
|
label: item.dictLabel || '暂无',
|
value: item.dictCode || '暂无',
|
}))
|
})
|
}
|
// 获取飞行规则
|
function getFlightRules() {
|
flightRulesApi().then(res => {
|
actionsFlightRule.value = res.data.data.map(item => ({
|
...item,
|
label: item.dictLabel || '暂无',
|
value: item.dictCode || '暂无',
|
}))
|
})
|
}
|
// 获取飞行计划
|
function getFlightPlan() {
|
flightPlanApi().then(res => {
|
actionsPlanType.value = res.data.data.map(item => ({
|
...item,
|
label: item.dictLabel || '暂无',
|
value: item.dictCode || '暂无',
|
}))
|
})
|
}
|
|
onLoad((options) => {
|
flightPlanDetailsApi(options.id).then(res => {
|
console.log(res.data.data, '789')
|
// return
|
formParams.value = res.data.data
|
formParams.value.routeId = res.data.data.routeInfo.name
|
formParams.value.airspaceId = res.data.data.airspaceInfo.taskName
|
formParams.value.aircraftId = res.data.data.airspaceInfo.aircraftInfoList.map(item => item.name).join(',')
|
formParams.value.pilotId = res.data.data.operatorInfoList.map(item => item.name).join(',')
|
formParams.value.flightRule = actionsFlightRule.value.find(item => item.dictValue === res.data.data.flightRule)?.dictLabel || ''
|
formParams.value.flightMode = actionsFlightMode.value.find(item => item.dictValue === res.data.data.flightMode)?.dictLabel || ''
|
formParams.value.planType = actionsPlanType.value.find(item => item.dictValue === res.data.data.planType)?.dictLabel || ''
|
formParams.value.flightTaskType = actionsFlightTaskType.value.find(item => item.dictValue === res.data.data.flightTaskType)?.dictLabel || ''
|
})
|
})
|
onMounted(() => {
|
getTaskType()
|
getFlightMode()
|
getFlightRules()
|
getFlightPlan()
|
// getAircraftInfo()
|
// getPilotInfo()
|
// getAirspaceInfo()
|
// getFlightRouteInfo()
|
})
|
</script>
|
<style scoped lang="scss">
|
.flightApplication-add {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.title {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 17px;
|
color: #222324;
|
padding-left: 24rpx;
|
}
|
.form-title {
|
margin-bottom: 24rpx;
|
padding-left: 0rpx !important;
|
}
|
:deep(.u-button) {
|
width: 80%;
|
padding: 28rpx;
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
margin-bottom: 20rpx;
|
}
|
.attention {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 12px;
|
color: #1D6FE9;
|
// margin-top: 24rpx;
|
text-align: center;
|
}
|
.select-wrapper {
|
position: relative;
|
width: 100%;
|
|
.select-icon {
|
position: absolute;
|
right: 20rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
color: #999;
|
font-size: 24rpx;
|
pointer-events: none;
|
}
|
}
|
|
.upload {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 15px;
|
color: #1D6FE9;
|
}
|
:deep(.u-form) {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
overflow-y: auto;
|
box-sizing: border-box;
|
padding: 24rpx;
|
}
|
.submit-button-wrapper {
|
padding: 28rpx;
|
// width: 80%;
|
// height: 100rpx;
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
}
|
:deep(.u-form-item) {
|
margin-bottom: 40rpx;
|
padding: 16rpx 24rpx 18rpx 24rpx;
|
border-radius: 6px 6px 6px 6px;
|
background: white;
|
:deep(.u-line) {
|
border-bottom: 1px solid #EFEFEF;
|
}
|
:deep(.u-input) {
|
width: 100%;
|
height: 80rpx;
|
border-radius: 8rpx;
|
padding: 0 20rpx;
|
background-color: #f5f5f5;
|
|
&::placeholder {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #D2D2D2;
|
}
|
}
|
|
.clickable-input {
|
width: 100%;
|
cursor: pointer;
|
}
|
|
:deep(.u-form-item__label) {
|
margin-bottom: 20rpx;
|
// font-weight: bold;
|
// color: #333;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222324;
|
}
|
|
:deep(.u-form-item__required) {
|
color: #FF2600;
|
margin-right: 8rpx;
|
}
|
}
|
}
|
</style>
|
