吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
uniapps/work-wx/src/subPackages/flightApplication/index.vue
@@ -12,24 +12,30 @@
            </view>
        </view>
    </view>
    <u-search :bgColor="'white'" :show-action="true" actionText="搜索" :animation="true"></u-search>
    <view class="content">
        <view class="sp-title">
            审批记录
        </view>
        <view class="approvalRecord" v-for="(approvalRecord,approvalRecordIndex) in approvalRecords" :key="approvalRecordIndex">
            <view class="name-status">
                <view class="name-image">
                    <u-image :src="spSvg" class="icon" width="16" height="16"></u-image>
                    <view class="name">{{approvalRecord.flightPlanName}}</view>
                </view>
                <view class="status">{{approvalRecord.planStatus || '无状态'}}</view>
    <!-- <view class="search-content"> -->
        <u-search v-model="formParams.flightPlanName" :bgColor="'white'" :show-action="true" actionText="搜索" :animation="true" @custom="handleSearch"></u-search>
        <view class="content">
            <view class="sp-title">
                审批记录
            </view>
            <view class="txt">飞行设备:{{approvalRecord.device || '无设备'}}</view>
            <view class="txt">行政区划:{{approvalRecord.area || '无行政区划'}}</view>
            <view class="txt">飞行时间:{{approvalRecord.time || '无飞行时间'}}</view>
            <u-list :style="{ height: 'calc(100vh - 240rpx)' }" @scrolltolower="scrolltolower" :lower-threshold="50">
                <view class="approvalRecord" v-for="(approvalRecord,approvalRecordIndex) in approvalRecords" :key="approvalRecordIndex" @click="handleClick(approvalRecord)">
                    <view class="name-status">
                        <view class="name-image">
                            <u-image :src="spSvg" class="icon" width="16" height="16"></u-image>
                            <view class="name">{{approvalRecord.flightPlanName}}</view>
                        </view>
                    </view>
                     <view class="txt">审批状态: <span :class="getStatusClass(approvalRecord.planApprovalStatus)">{{approvalRecord.planApprovalStatusLabel || ''}}</span></view>
                    <view class="txt">计划起飞状态:<span :class="getPlanStatusClass(approvalRecord.planStatus)">{{approvalRecord.flyActivityTakeoffStatusLabel || ''}}</span></view>
                    <view class="txt">飞行器:{{approvalRecord.spacecraftLabel || '无'}}</view>
                    <view class="txt">飞行任务:{{approvalRecord.flightTaskTypeLabel || ''}}</view>
                    <view class="txt">飞行起飞时间:{{approvalRecord.flightStartTime || ''}}</view>
                    <view class="txt">飞行降落时间:{{approvalRecord.flightEndTime || ''}}</view>
                </view>
            </u-list>
        </view>
    </view>
    <!-- </view> -->
</view>
</template>
<script setup>
@@ -37,7 +43,12 @@
    import { flightPlanPageInfoApi } from '@/api/index.js'
    import fxsqSvg from '@/static/images/fly-apply.png'
    import mysbSvg from '@/static/images/my-sb.png'
import { ref } from 'vue'
    import { ref } from 'vue'
    import { aircraftInfoPageInfoOfMyApi } from '@/api/index'
    // 获取store中的数据 字典
    import { useAppStore, useUserStore } from "@/store";
    const appStore = useAppStore()
function gridClick(index) {
@@ -53,66 +64,89 @@
    }
}
const getStatusClass = (status) => {
    switch (status) {
        case '0':
            return 'Sorange'
        case '99':
            return 'Sgreen'
        case '-1':
            return 'Sred'
        case '1':
            return 'Sblue'
        default:
            return ''
    }
}
const getPlanStatusClass = (status) => {
    switch (status) {
        case '0':
            return 'Sred'
        case '1':
            return 'Ssqz'
        case '2':
            return 'Sjz'
        case '3':
            return 'SOrange'
            case '99':
            return 'Syzz'
            case '-1':
            return 'Ssqbh'
            case '-2':
            return 'Sysx'
        default:
            return ''
    }
}
// 获取飞行器信息
const aircraftInfoList = ref([])
async function getAircraftInfo() {
    try {
        const res = await aircraftInfoPageInfoOfMyApi({
            current: 1,
            size: 1000,
        })
        aircraftInfoList.value = res.data.data.records.map(item => ({
            label: item.name,
            value: item.id,
        }))
    } catch (error) {
        console.error('获取飞行器信息失败:', error)
    }
}
// 审批记录是很多条
const approvalRecords = ref([
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        flightPlanName: '飞行需求名称',
        planStatus: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
])
const approvalRecords = ref([])
const formParams = ref({
    current: 1,
    size: 10,
    flightPlanName: '',
})
// 申请审批列表
const getApprovalRecords = async () => {
    try {
        const res = await flightPlanPageInfoApi({
            current: 1,
            size: 10,
        const res = await flightPlanPageInfoApi(formParams.value)
        const newData = res.data.data.records || []
        // 处理字典数据
        newData.forEach(item => {
            item.spacecraftLabel = aircraftInfoList?.value.filter(info => item.spacecraftId?.split(',').includes(info.value)).map(info => info.label).join('、') || '无'
            // 审批状态
            item.planApprovalStatusLabel = appStore.flyActivityStatus.find(status => status.dictValue === item.planApprovalStatus)?.dictLabel || '无'
            // 计划起飞状态
            item.flyActivityTakeoffStatusLabel = appStore.flyActivityTakeoffStatus.find(status => status.dictValue === item.planStatus)?.dictLabel || '无'
            // 飞行任务
            item.flightTaskTypeLabel = appStore.taskType.find(type => type.dictValue === item.flightTaskType)?.dictLabel || '无'
        })
        approvalRecords.value = res.data.data.records || []
        // 如果是第一页,直接替换数据;否则追加数据
        if (formParams.value.current === 1) {
            approvalRecords.value = newData
        } else {
            approvalRecords.value = approvalRecords.value.concat(newData)
        }
    } catch (error) {
        uni.showToast({
            title: error.message,
@@ -121,19 +155,47 @@
        })
    }
}
onMounted(() => {
// 搜索处理
const handleSearch = () => {
  // 搜索时重置为第一页
  formParams.value.current = 1
  formParams.value.flightPlanName = formParams.value.flightPlanName.trim()
  getApprovalRecords()
}
// 触底加载
function scrolltolower() {
    formParams.value.current++
    // 停止不刷新
    if (approvalRecords.value.length < formParams.value.size) {
        return
    }
    getApprovalRecords()
}
// 点击审批记录跳转详情页
function handleClick(item) {
    uni.navigateTo({
        url: '/subPackages/flightApplication/details?id=' + item.id,
    })
}
onMounted(async () => {
    await getAircraftInfo()
    getApprovalRecords()
})
</script>
<style scoped lang="scss">
.flightApplication {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    .header-top {
        width: 100%;
        height: 350rpx;
        background: url('@/static/images/fxsq-bg.png') no-repeat center;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        height: 480rpx;
        background: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/images/fxsq-bg.png")  no-repeat ;
        background-size: 100%;
        position: relative;
        .ht-content {
            position: absolute;
            bottom: -40rpx;
@@ -149,7 +211,7 @@
                flex: 1;
                max-width: 350rpx;
                height: 166rpx;
                background: rgba(251,253,255,0.39);
                background: rgba(251,253,255,0.8);
                box-shadow: inset 0px 0px 7px 0px rgba(64,156,230,0.14), 0px 1px 3px 0px rgba(35,49,96,0.11);
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #fff;
@@ -171,18 +233,11 @@
        }
    }
     :deep(.u-search) {
        position: absolute;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        top: 340rpx !important;
        padding: 10px 20px;
        height: 68rpx;
        flex: 0;
        margin-top: 50rpx !important;
    }
    .content {
        position: absolute;
        top: 450rpx !important;
        bottom: 0;
        background: white;
        width: 100%;
        display: flex;
@@ -211,12 +266,11 @@
    }
    .name-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // justify-content: space-between;
        margin-bottom: 20rpx;
        .name-image {
            width: calc(100% - 120rpx);
            display: flex;
            justify-content: center;
            align-items: center;
            .u-image {
                width: 32rpx;
@@ -227,24 +281,63 @@
                font-size: 32rpx;
                color: #1D2129;
                margin-left: 6rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .status {
            width: 100rpx;
            text-align: center;
            line-height: 40rpx;
            background: #FF9604;
            line-height: 44rpx;
            height: 44rpx;
            border-radius: 2px 2px 2px 2px;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            padding: 0 6rpx;
        }
    }
    .txt {
        font-weight: 400;
        font-size: 12px;
        color: #86909C;
        margin-bottom: 14rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .Sorange {
        color: #FF9604;
    }
    .Sred {
        color: #F8422A;
    }
    .Sgreen {
        color: #17A836;
    }
    .Sblue {
        color: #1D6FE9;
    }
    .Sjz {
        color: #0088FF;
    }
    .Syzz {
        color: #002BFF;
    }
    .Ssqbh {
        color: #FF383C;
    }
    .Sysx {
        color:#414141;
    }
    .Ssqz {
        color: #FF9500;
    }
}
</style>