吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
uniapps/work-wx/src/subPackages/flightApplication/index.vue
@@ -1,40 +1,55 @@
<template>
<view class="flightApplication">
    <u-grid :col="2" :border="true" class="grid" @click="gridClick">
        <u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
            <u-image :src="baseListItem.src" :width="26" :height="26"></u-image>
            <text class="grid-text">{{baseListItem.title}}</text>
        </u-grid-item>
    </u-grid>
    <u-search :show-action="true" actionText="搜索" :animation="true"></u-search>
    <view class="title">
        审批记录
    </view>
    <view class="approvalRecord" v-for="(approvalRecord,approvalRecordIndex) in approvalRecords" :key="approvalRecordIndex">
        <view class="name-status">
            <view>{{approvalRecord.name}}</view>
            <view>{{approvalRecord.status}}</view>
    <view class="header-top">
        <view class="ht-content">
            <view class="item" @click="gridClick(0)">
                <image :src="fxsqSvg" class="icon"></image>
                <view class="txt">飞行申请</view>
            </view>
            <view class="item" @click="gridClick(1)">
                <image :src="mysbSvg" class="icon"></image>
                <view class="txt">我的设备</view>
            </view>
        </view>
        <view>飞行设备:{{approvalRecord.device}}</view>
        <view>行政区划:{{approvalRecord.area}}</view>
        <view>飞行时间:{{approvalRecord.time}}</view>
    </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>
            <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>
</template>
<script setup>
    import lbPng from '@/static/images/lb.png'
import { ref } from 'vue'
    import spSvg from '@/static/images/sp.png'
    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 { aircraftInfoPageInfoOfMyApi } from '@/api/index'
const baseList = ref([
    {
        src: lbPng,
        title: '飞行申请',
    },
    {
        src: lbPng,
        title: '我的设备',
    },
])
    // 获取store中的数据 字典
    import { useAppStore, useUserStore } from "@/store";
    const appStore = useAppStore()
function gridClick(index) {
    // 跳转设备管理 /pages/equipmentManagement/index
@@ -42,56 +57,287 @@
        uni.switchTab({
            url: '/pages/equipmentManagement/index',
        })
        return
    } else {
        uni.navigateTo({
            url: '/subPackages/flightApplication/add',
        })
    }
}
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([
    {
        name: '飞行需求名称',
        status: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        name: '飞行需求名称',
        status: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        name: '飞行需求名称',
        status: '申请中',
        device: '大疆无人机',
        area: '吉州区',
        time: '2026/01/07至2026/01/08',
    },
    {
        name: '飞行需求名称',
        status: '申请中',
        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(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 || '无'
        })
        // 如果是第一页,直接替换数据;否则追加数据
        if (formParams.value.current === 1) {
            approvalRecords.value = newData
        } else {
            approvalRecords.value = approvalRecords.value.concat(newData)
        }
    } catch (error) {
        uni.showToast({
            title: error.message,
            icon: 'none',
            duration: 2000,
        })
    }
}
// 搜索处理
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>
.title {
    font-size: 32rpx;
    font-weight: bold;
    color: #1D6FE9;
    margin: 32rpx 0 24rpx 0;
}
.approvalRecord {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 24rpx;
}
.name-status {
<style scoped lang="scss">
.flightApplication {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    overflow-y: hidden;
    .header-top {
        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;
            width: 100%;
            height: 166rpx;
            padding: 0 40rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 60rpx;
            box-sizing: border-box;
            .item {
                flex: 1;
                max-width: 350rpx;
                height: 166rpx;
                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;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                .icon {
                    width: 128rpx;
                    height: 128rpx;
                }
                .txt {
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: bold;
                    font-size: 16px;
                    color: #222324;
                }
            }
        }
    }
     :deep(.u-search) {
        padding: 10px 20px;
        height: 68rpx;
        margin-top: 50rpx !important;
    }
    .content {
        background: white;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        padding: 0 40rpx 40rpx 40rpx;
        overflow-y: auto;
        box-sizing: border-box;
        border-radius: 12px 12px 6px 6px;
        .sp-title {
            font-weight: bold;
            font-size: 32rpx;
            color: #222324;
            padding: 40rpx 0 0rpx 0;
        }
    }
    .approvalRecord {
        font-family: Source Han Sans CN, Source Han Sans CN;
        // display: flex;
        // justify-content: space-between;
        border-bottom: 1px solid #EBEEF3;
        padding: 40rpx 0 20rpx 0;
        // margin-bottom: 20rpx;
        width: 100%;
        box-sizing: border-box;
    }
    .name-status {
        display: flex;
        // justify-content: space-between;
        margin-bottom: 20rpx;
        .name-image {
            width: calc(100% - 120rpx);
            display: flex;
            align-items: center;
            .u-image {
                width: 32rpx;
                height: 32rpx;
            }
            .name {
                font-weight: bold;
                font-size: 32rpx;
                color: #1D2129;
                margin-left: 6rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .status {
            width: 100rpx;
            text-align: center;
            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>