feat: 飞行事件

罗广辉

2025-04-20 f4dc3ef6453334874ab4a10dcc8557d6d4a1bcbf

 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;
            }
         }
      }
   }