feat: 飞行事件

罗广辉

2025-04-20 f4dc3ef6453334874ab4a10dcc8557d6d4a1bcbf

feat: 飞行事件

 src/assets/images/aiNowFly/event/hover.png

 src/assets/images/aiNowFly/event/startRecord.png

 src/assets/images/aiNowFly/event/takePhoto.png

 src/components/CurrentTaskDetails/RealTimeMap.vue

@@ -25,7 +25,7 @@
const taskDetailsViewer = inject('taskDetailsViewer')

const taskDetails = inject('taskDetails')
const deviceOsdInfo = inject('deviceOsdInfo')
const wsInfo = inject('wsInfo')

const initMap = () => {
    taskDetailsViewer.value = new Viewer('currentTaskMap', {
@@ -56,7 +56,7 @@
        destination: Cartesian3.fromDegrees(115.763819, 28.787374, 5000),
    })

    initTaskWayline(taskDetailsViewer.value, deviceOsdInfo, taskDetails)
    initTaskWayline(taskDetailsViewer.value, wsInfo, taskDetails)
}

const removeMap = () => {

 src/components/CurrentTaskDetails/TaskDetailsRight.vue

@@ -7,7 +7,10 @@
        <div class="taskInfo">
            <div v-for="item in list" class="itemBox">
                <div class="itemName">{{ item.name }}：</div>
                <div class="itemValue">{{ item.value }}</div>
                <div class="itemValue" v-if="item.name !== '飞行事件'">{{ item.value }}</div>
                <div class="flightEvents" v-else>
                    <img v-for="item in flightEvents" alt="" :src="item.img" :title="item.name"></img>
                </div>
            </div>
        </div>

@@ -17,6 +20,7 @@
<script setup>
import droneImg from '@/assets/images/taskManagement/taskIntermediateContent/droneImg.png'
import BaseControl from '@/components/CurrentTaskDetails/ControlPanel/BaseControl.vue'
import { droneEventList } from '@/const/drc'

const taskDetails = inject('taskDetails')
const workspace_id = inject('workspace_id')
@@ -32,7 +36,8 @@
    { name: '关联算法', value: '', field: 'ai_type_str' },
    { name: '任务描述', value: '', field: 'remark' },
])
// takePhoto，hover
const flightEvents = ref([])

watch(
    taskDetails,
    () => {
@@ -44,7 +49,9 @@
            }
            if (item.name === '飞行事件') {
                const { action_modes = [] } = taskDetails?.value || {}
                // todo item.value = action_modes.
                flightEvents.value = action_modes.flatMap(({ actionActuatorFunc }) =>
                    droneEventList.filter(({ value }) => actionActuatorFunc === value)
                )
            }
        })
    },
@@ -93,7 +100,7 @@
    }

    .taskInfo {
        width: 220px;
        width: 230px;
        height: 520px;
        display: flex;
        overflow: auto;
@@ -115,8 +122,18 @@
            .itemValue {
                font-weight: bold;
                color: #ffffff;
                word-break: break-all;     /* 强制在任意字符断行 */
                white-space: normal;       /* 允许正常换行 */
                word-break: break-all; /* 强制在任意字符断行 */
                white-space: normal; /* 允许正常换行 */
            }

            .flightEvents{
                display: flex;
                flex-wrap: wrap;
                gap: 10px 10px;
                img {
                    width: 30px;
                    height: 30px;
                }
            }
        }
    }

 src/const/drc.js

@@ -29,3 +29,12 @@
    { min: 315, max: 360, value: '北偏西' },
    { min: 360, max: 360, value: '正北' }
];

import hoverImg from '@/assets/images/aiNowFly/event/hover.png'
import startRecordImg from '@/assets/images/aiNowFly/event/startRecord.png'
import takePhotoImg from '@/assets/images/aiNowFly/event/takePhoto.png'
export const droneEventList = [
    {name:'开始录像',value:'startRecord',img:startRecordImg},
    {name:'悬停',value:'hover',img:hoverImg},
    {name:'拍照',value:'takePhoto',img:takePhotoImg},
]

 src/views/Home/AINowFly.vue

@@ -16,14 +16,14 @@
            <!--            todo-->
            <el-form-item label="飞行事件">
                <div class="event">
                    <img src="@/assets/images/aiNowFly/picture-recording.png" alt="">
                    <img src="../../assets/images/aiNowFly/event/startRecord.png" alt="">
                    <div class="img-close" v-show="isPhoto">
                        <img @click="isPhoto=false" class="close" src="@/assets/images/aiNowFly/close.png" alt="">
                        <img src="@/assets/images/aiNowFly/photo.png" alt="">
                        <img src="../../assets/images/aiNowFly/event/takePhoto.png" alt="">
                    </div>
                    <div class="img-close" v-show="isStop">
                        <img @click="isStop=false" class="close" src="@/assets/images/aiNowFly/close.png" alt="">
                        <img src="@/assets/images/aiNowFly/stop.png" alt="">
                        <img src="../../assets/images/aiNowFly/event/hover.png" alt="">
                    </div>
                    <div class="add-event" @click="isShowEvent = !isShowEvent">+
                        <div class="event-select" v-show="isShowEvent">
@@ -159,7 +159,7 @@
      label: {
        text: `预计${item.minute}分钟`,
                font: 'bold 16px Source Han Sans CN',  // 加粗并增大字号
              // fillColor: new Cesium.Color(27/255, 179/255, 255/255, 1.0), 
              // 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,
@@ -354,12 +354,12 @@
    :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;
@@ -440,7 +440,7 @@
            white-space: nowrap;
        }
    }
	

    .btn-submit {
        cursor: pointer;
        margin-left: 88px;