<!-- 飞行活动申请 -->
|
<template>
|
<view class="flightApplication-add">
|
<u-form labelPosition="top" :model="formParams" :rules="rules" ref="formRef">
|
<view class="title form-title">基本信息</view>
|
<u-form-item
|
label="飞行计划"
|
labelWidth="200rpx"
|
prop="flightPlanName"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.flightPlanName" readonly border="none"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="任务类型"
|
labelWidth="230rpx"
|
prop="flightTaskType"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.flightTaskType"
|
readonly
|
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"
|
readonly
|
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"
|
readonly
|
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" readonly 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" readonly border="none" 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"
|
readonly
|
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" readonly border="none"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="联系电话"
|
labelWidth="200rpx"
|
prop="contactPhone"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.contactPhone" readonly border="none"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="承办人"
|
labelWidth="200rpx"
|
prop="undertaker"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.undertaker" readonly border="none"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="承办人联系电话"
|
labelWidth="300rpx"
|
prop="undertakerPhone"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.undertakerPhone" readonly border="none"></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"
|
readonly
|
border="none"
|
></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"
|
readonly
|
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"
|
readonly
|
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"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="航线"
|
labelWidth="230rpx"
|
prop="selectedRouteId"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.selectedRouteId"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-popup :show="applyShow" :round="10" mode="center" @close="close" :closeable="true" :mask-close-able="true">
|
<u-form labelPosition="top" :model="formParamsTime" :rules="rulesTime" ref="formTimeRef">
|
<u-form-item
|
label="计划申请起飞时间"
|
labelWidth="260rpx"
|
prop="takeOffStartTime"
|
:borderBottom="true"
|
ref="item1"
|
@click="isShowStartTime = true"
|
required
|
>
|
<u-input v-model="formParamsTime.takeOffStartTime" border="none" placeholder="请选择" suffixIcon="calendar"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="计划申请结束时间"
|
labelWidth="260rpx"
|
prop="takeOffEndTime"
|
:borderBottom="true"
|
ref="item1"
|
@click="isShowEndTime = true"
|
required
|
>
|
<u-input v-model="formParamsTime.takeOffEndTime" border="none" placeholder="请选择" suffixIcon="calendar"></u-input>
|
</u-form-item>
|
|
<u-datetime-picker
|
:show="isShowStartTime"
|
v-model="startTime"
|
mode="datetime"
|
:min-date="minDate"
|
:formatter="formatter"
|
@confirm="onConfirmStartTime"
|
@cancel="isShowStartTime = false">
|
</u-datetime-picker>
|
<u-datetime-picker
|
:show="isShowEndTime"
|
v-model="endTime"
|
mode="datetime"
|
:min-date="minDate"
|
:formatter="formatter"
|
@confirm="onConfirmEndTime"
|
@cancel="isShowEndTime = false">
|
</u-datetime-picker>
|
</u-form>
|
<u-button @click="submitSure" color="#1D6FE9">确定</u-button>
|
</u-popup>
|
</u-form>
|
<u-button v-if="formParams.planApprovalStatus === '99' && (formParams.planStatus === '0')" @click="submitApply" color="#1D6FE9">申请</u-button>
|
</view>
|
</template>
|
<script setup>
|
import {
|
flightPlanDetailsApi,
|
flightRoutePageInfoApi,
|
aircraftInfoPageInfoOfMyApi,
|
pilotInfoPageInfoOfMyApi,
|
flightAirspacePageInfoApi,
|
flightApprovalApi
|
} from '@/api/index'
|
import { ref, computed, onMounted } from 'vue'
|
import dayjs from 'dayjs'
|
|
// 获取store中的数据 字典
|
import { useAppStore, useUserStore } from "@/store";
|
const appStore = useAppStore()
|
|
const formRef = ref(null);
|
const formTimeRef = ref(null);
|
const formParams = ref({})
|
const rules = ref({})
|
const formParamsTime = ref({
|
id: '',
|
takeOffStartTime: '',
|
takeOffEndTime: '',
|
planStatus: '1',
|
})
|
const rulesTime = ref({
|
takeOffStartTime: [{ required: true, message: '请选择计划申请起飞时间', trigger: ['blur'] }],
|
takeOffEndTime: [{ required: true, message: '请选择计划申请结束时间', trigger: ['blur'] }],
|
})
|
|
// 任务类型
|
const actionsFlightTaskType = ref(appStore.getTaskType)
|
|
// 飞行规则
|
const actionsFlightRule = ref(appStore.getFlightRules)
|
|
// 飞行方式
|
const actionsFlightMode = ref(appStore.getFlightMode)
|
|
// 计划类型
|
const actionsPlanType = ref(appStore.getFlightPlan)
|
|
// 是否显示开始时间选择器
|
const isShowStartTime = ref(false)
|
// 是否显示结束时间选择器
|
const isShowEndTime = ref(false)
|
const minDate = ref(Date.now()); // 设置最小日期为当前时间戳
|
const startTime = ref(Date.now()); // 设置默认值为当前时间戳
|
const endTime = ref(Date.now()); // 设置默认值为当前时间戳
|
|
const onConfirmStartTime = (e) => {
|
formParamsTime.value.takeOffStartTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
isShowStartTime.value = false
|
}
|
const onConfirmEndTime = (e) => {
|
formParamsTime.value.takeOffEndTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
isShowEndTime.value = false
|
}
|
|
|
const formatter = (type, value) => {
|
if (type === 'year') return `${value}年`;
|
if (type === 'month') return `${value}月`;
|
if (type === 'day') return `${value}日`;
|
if (type === 'hour') return `${value}时`;
|
if (type === 'minute') return `${value}分`;
|
return value;
|
};
|
|
|
|
// 获取飞行器信息
|
// 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 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 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 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,
|
}))
|
})
|
}
|
|
// 申请
|
const applyShow = ref(false)
|
function submitApply() {
|
applyShow.value = true
|
}
|
|
async function submitSure() {
|
// 校验时间
|
await formTimeRef.value.validate()
|
formParamsTime.value.id = formParams.value.id
|
flightApprovalApi(formParamsTime.value).then(res => {
|
if (res.data.code === 200) {
|
uni.showToast({
|
title: '操作成功',
|
icon: 'success',
|
})
|
// 跳转申请列表页
|
uni.navigateTo({
|
url: '/subPackages/flightApplication/index',
|
})
|
}
|
})
|
}
|
|
function close() {
|
// 清空时间
|
formParamsTime.value.takeOffStartTime = ''
|
formParamsTime.value.takeOffEndTime = ''
|
applyShow.value = false
|
}
|
|
onLoad((options) => {
|
flightPlanDetailsApi(options.id).then(res => {
|
// return
|
const result = res.data.data
|
formParams.value = result
|
// 字典
|
formParams.value.flightRule = actionsFlightRule.value.find(item => item.dictValue === result.flightRule)?.dictLabel || '无'
|
formParams.value.flightMode = actionsFlightMode.value.find(item => item.dictValue === result.flightMode)?.dictLabel || '无'
|
formParams.value.planType = actionsPlanType.value.find(item => item.dictValue === result.planType)?.dictLabel || '无'
|
formParams.value.flightTaskType = actionsFlightTaskType.value.find(item => item.dictValue === result.flightTaskType)?.dictLabel || '无'
|
// 数据
|
// 航线
|
formParams.value.selectedRouteId = result?.routeInfo?.name || '无'
|
// 空域
|
formParams.value.airspaceId = result?.airspaceInfo?.taskName || '无'
|
// 飞行器
|
formParams.value.aircraftId = result?.aircraftInfoList?.map(item => item.name).join(',') || '无'
|
// 飞手
|
formParams.value.pilotId = result?.operatorInfoList?.map(item => item.name).join(',') || '无'
|
|
// 日期赋值
|
formParamsTime.value.takeOffStartTime = dayjs(result.flightStartTime).format('YYYY-MM-DD HH:mm:ss')
|
formParamsTime.value.takeOffEndTime = dayjs(result.flightEndTime).format('YYYY-MM-DD HH:mm:ss')
|
|
})
|
})
|
onMounted(() => {
|
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: 20rpx;
|
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>
|
