forked from drone/command-center-dashboard

chenyao
2025-04-11 48718702d8b296954382d67d074e76a3cdd6e8c2
feat:完善智引即飞功能
4 files modified
6 files added
233 ■■■■ changed files
src/api/home/task.js 2 ●●● patch | view | raw | blame | history
src/assets/images/aiNowFly/ai-fly-bg.png patch | view | raw | blame | history
src/assets/images/aiNowFly/ending-high.png patch | view | raw | blame | history
src/assets/images/aiNowFly/ending.png patch | view | raw | blame | history
src/assets/images/aiNowFly/fly.png patch | view | raw | blame | history
src/assets/images/aiNowFly/picture-recording.png patch | view | raw | blame | history
src/assets/images/aiNowFly/starting.png patch | view | raw | blame | history
src/views/Home/AINowFly.vue 220 ●●●● patch | view | raw | blame | history
src/views/SignMachineNest/MachineRight/MachineStatus/MachineStatus.vue 5 ●●●●● patch | view | raw | blame | history
src/views/TaskManage/TaskIntermediateContent/TaskTable.vue 6 ●●●● patch | view | raw | blame | history
src/api/home/task.js
@@ -88,7 +88,7 @@
// 获取可飞行机巢列表
export const getFlyingNestBy = (data,page) => {
    return request({
        url: `/drone-device-core/manage/api/v1/devices/getFlyingNestBy?current=${page.page}&size=${page.size}`,
        url: `/drone-device-core/manage/api/v1/devices/getFlyingNestBy?current=${page.current}&size=${page.size}`,
        method: 'post',
        data: data,
    })
src/assets/images/aiNowFly/ai-fly-bg.png
src/assets/images/aiNowFly/ending-high.png
src/assets/images/aiNowFly/ending.png
src/assets/images/aiNowFly/fly.png
src/assets/images/aiNowFly/picture-recording.png
src/assets/images/aiNowFly/starting.png
src/views/Home/AINowFly.vue
@@ -1,33 +1,35 @@
<template>
    <div class="AINowFly">
        <div>智引即飞</div>
        <div class="title">指点飞行</div>
        <el-form ref="ruleFormRef" :model="params" :rules="rules" label-width="auto" size="small" status-icon>
            <el-form-item label="任务名称" prop="name">
                <el-input v-model="params.name" />
            </el-form-item>
            <el-form-item label="关联算法" prop="ai_types">
                <el-select v-model="params.ai_types" placeholder="请选择" multiple>
                <el-select v-model="params.ai_types" placeholder="请选择" multiple collapse-tags collapse-tags-tooltip>
                    <el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
                </el-select>
            </el-form-item>
            <el-form-item label="地址">
                <el-input disabled type="text" v-model="di" />
                <el-input disabled type="text" v-model="di" placeholder="地名&经纬度"/>
            </el-form-item>
            <!--            todo-->
            <el-form-item label="事件">
                <div>默认拍照</div>
                <div class="event">
                    <img src="@/assets/images/aiNowFly/picture-recording.png" alt="">
                </div>
            </el-form-item>
        </el-form>
        <div>可用机巢列表</div>
        <el-table :data="list" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" />
        <div class="title-list">可飞行机巢列表:</div>
        <el-table :data="list" height="120" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" />
            <!-- <el-table-column type="index" label="序号" /> -->
            <el-table-column prop="nickname" label="机巢名称" />
            <el-table-column prop="minute" label="预计飞行时长(分钟)" />
            <el-table-column prop="exe_distance" label="预计飞行距离(m)" />
            <el-table-column prop="minute" label="可飞行时间" />
            <el-table-column prop="exe_distance" label="可飞行距离" />
        </el-table>
        <el-button type="primary" @click="nowFly">迅速起飞</el-button>
        <div class="btn-submit" @click="nowFly"><img src="@/assets/images/aiNowFly/fly.png" alt=""></div>
    </div>
</template>
<script setup>
@@ -37,6 +39,9 @@
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import { Cartesian3 } from 'cesium'
import uavImg from '@/assets/images/home/useUavHome/uavImg.png'
import endingImg from '@/assets/images/aiNowFly/ending.png'
import endingHighImg from '@/assets/images/aiNowFly/ending-high.png'
import startingImg from '@/assets/images/aiNowFly/starting.png'
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
import lineImg from '@/assets/images/arrow-right-blue.png'
import _ from 'lodash'
@@ -100,18 +105,35 @@
        const start = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude))
        const end = Cartesian3.fromDegrees(Number(longitude), Number(latitude))
        const positionsList = [start, end]
        // 计算中点位置
    const midpoint = Cartesian3.midpoint(start, end, new Cartesian3())
        // 计算线段方向
        const direction = Cartesian3.subtract(end, start, new Cartesian3())
        Cartesian3.normalize(direction, direction)
        // 线
        // 添加中点文字标签
    viewer.entities.add({
      id: `AINow-time-${index}`,
      position: midpoint,
      label: {
        text: `预计${item.minute}分钟`,
                font: 'bold 16px Source Han Sans CN',  // 加粗并增大字号
              fillColor: new Cesium.Color(27/255, 179/255, 255/255, 1.0),
                fillColor: Cesium.Color.WHITE,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                eyeOffset: new Cesium.Cartesian3(0, 0, -10),
                pixelOffset: new Cesium.Cartesian2(0, -10),
                rotation: Math.atan2(direction.y, direction.x)
      }
    })
        viewer.entities.add({
            id: `AINow-line-${index}`,
            polyline: {
                width: 4,
                positions: positionsList,
                material: new ImageTrailMaterial({
                    color: { alpha: 1, blue: 1, green: 1, red: 1 },
                    speed: 20,
                    image: lineImg,
                    repeat: { x: Math.floor(40), y: 1 },
                }),
                material: new Cesium.Color(27/255, 179/255, 255/255, 1.0),
                clampToGround: false,
            },
        })
@@ -119,20 +141,20 @@
        viewer.entities.add({
            id: `AINow-point-${index}`,
            position: start,
            label: {
                text: item.nickname,
                font: '12pt Source Han Sans CN',
                fillColor: Cesium.Color.WHITE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 2,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(0, -9),
            },
            // label: {
            //     text: item.nickname,
            //     font: '12pt Source Han Sans CN',
            //     fillColor: Cesium.Color.WHITE,
            //     outlineColor: Cesium.Color.BLACK,
            //     outlineWidth: 2,
            //     style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            //     pixelOffset: new Cesium.Cartesian2(0, -9),
            // },
            billboard: {
                image: new Cesium.ConstantProperty(uavImg),
                width: 24,
                height: 24,
                image: new Cesium.ConstantProperty(index === 0 ? endingHighImg : endingImg),
                width: 40,
                height: 40,
            },
            properties: {
                customData: {
@@ -157,12 +179,11 @@
    viewer.entities.add({
        position: earthPosition,
        id: `AINow-event-0`,
        point: {
            pixelSize: 10,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
        },
        billboard: {
            image: new Cesium.ConstantProperty(startingImg),
            width: 40,
            height: 40,
        }
    })
    const { longitude, latitude } = cartesian3Convert(earthPosition, viewer)
    eventPoint = { longitude, latitude }
@@ -179,11 +200,19 @@
    })
}
let pagingParams = ref({
  current: 1,
  size: 10
});
// 获取飞机列表
const getFJList = async () => {
    params.value.dock_sns = []
    const getListParams = { ...eventPoint, page: 1, limit: 9999, type: 1 }
    const res = await getFlyingNestBy(getListParams)
    let pageParams = ref({
        ...eventPoint,
        type: 1,
    });
    params.value.dock_sns = [];
    const res = await getFlyingNestBy(pageParams.value, pagingParams.value)
    list.value = (res.data?.data || []).map(item => ({
        ...item,
        minute: _.round(item.estimated_arrival_time / 60, 0),
@@ -217,12 +246,111 @@
<style scoped lang="scss">
.AINowFly {
    position: absolute;
    top: 200px;
    right: 0;
    width: 400px;
    height: 700px;
    background: white;
    color: black;
    font-size: 20px;
    top: 263px;
    right: 74px;
    width: 320px;
    height: 518.6px;
    font-size: 14px;
    color: #FFFFFF;
    background: url('@/assets/images/aiNowFly/ai-fly-bg.png') no-repeat center / 100% 100%;
    .title {
        height: 50px;
        line-height: 50px;
        margin-left: 20px;
        font-family: Segoe UI, Segoe UI;
        font-weight: bold;
        font-size: 20px;
        letter-spacing: 2px;
        background: linear-gradient(180deg, #FFFFFF 50%, #35D0FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .el-form {
        padding: 20px 16px 13px 11px;
        :deep(.el-form-item__label) {
            color: #FFFFFF;
        }
        :deep(.el-input__wrapper),
    :deep(.el-select),
    :deep(.el-select__wrapper) {
      background-color: #021740;
      box-shadow: 0 0 0 1px #026AD6;
      &.is-focus {
        box-shadow: 0 0 0 1px #026AD6;
      }
    }
    :deep(.el-input__wrapper.is-disabled) {
      background-color: #021740;
      box-shadow: 0 0 0 1px #026AD6;
    }
        .event {
            img {
                width: 40px;
                height: 34px;
            }
        }
    }
    .title-list {
        padding: 0 0 14px 11px;
    }
    .el-table {
        width: 300px;
        height: 120px;
        margin: 0 0 0 11px;
        :deep(.el-table__header-wrapper) {
            th {
                font-size: 12px;
                color: #D3E9FF;
                background-color: #122348;
                font-weight: normal;
                border-bottom: none;
            }
        }
        :deep(.el-table__empty-block) {
            background-color: #0A1734;
            .el-table__empty-text {
                color: #FFFFFF;
            }
        }
        :deep(.el-table__body) {
            background-color: #0A1734;
            tr {
                background-color: #0A1734 !important;
                color: #FFFFFF;
                &:hover > td {
                    background-color: #0A1734 !important;
                }
            }
        }
        :deep(.el-scrollbar) {
            background-color: #0A1734;
        }
    }
    .btn-submit {
        cursor: pointer;
        margin-left: 88px;
        margin-top: 12px;
        img { width: 138px; height: 38px; }
    }
    :deep(.el-table__inner-wrapper) {
    border: 1px dashed #2F497D;
    &::before {
      display: none;
    }
  }
  :deep(.el-table__cell) {
    border: none;
  }
  :deep(.el-table__border) {
    display: none;
  }
}
</style>
src/views/SignMachineNest/MachineRight/MachineStatus/MachineStatus.vue
@@ -137,8 +137,9 @@
// 监听实时信息
watch(store.state.home.wsMessage, (newValue) => {
    if (newValue || newValue.mode_code === 14) return
    if (Object.keys(newValue).length === 0) return
    // if (newValue || newValue.mode_code === 14) return
    // if (Object.keys(newValue).length === 0) return
    console.log(newValue,'咋没数据呀');
    detailInfo.value.longitudee = newValue?.longitude.toFixed(6) || '--';
        detailInfo.value.latitude = newValue?.latitude.toFixed(6) || '--';
    getLnglatAltitude(newValue?.longitude,newValue?.latitude).then((res) => {
src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
@@ -56,7 +56,7 @@
  polygon: [],
});
let pagingParams = ref({
  page: 1,
  current: 1,
  size: 10
});
// 获取可用机巢列表数据
@@ -77,14 +77,14 @@
// 页码改变
const handleCurrentChange = (val) => {
  pagingParams.value.page = val;
  pagingParams.value.current = val;
  getNestList();
};
// 刷新数据
const refreshData = () => {
  tableData.value = [];
  pagingParams.value.page = 1;
  pagingParams.value.current = 1;
  getNestList();
};