fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/components/CurrentTaskDetails/TaskDetailsRight.vue

@@ -1,30 +1,29 @@
<template>
   <div class="task-details-right-container">
      <div  class="titleImg">
      <div class="titleImg">
         <img :src="droneImg" alt="" />
      </div>

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

      <BaseControl v-if="taskDetails.workspace_id"/>
      <BaseControl v-if="workspace_id" />
   </div>
</template>
<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')

watch(taskDetails, () => {
   list.value.forEach(item => {
      item.value = taskDetails?.value?.[item.field] || ''
   })
})
const workspace_id = inject('workspace_id')

const list = ref([
   { name: '任务编号', value: '', field: 'job_info_num' },
@@ -37,6 +36,30 @@
   { name: '关联算法', value: '', field: 'ai_type_str' },
   { name: '任务描述', value: '', field: 'remark' },
])
const flightEvents = ref([])

watch(
   taskDetails,
   () => {
      list.value.forEach(item => {
         item.value = taskDetails?.value?.[item.field] || ''
         if (item.name === '任务频次') {
            const { rep_rule_type = '', rep_rule_val = '' } = taskDetails?.value || {}
            item.value = rep_rule_type + ' -- ' + rep_rule_val
         }
         if (item.name === '飞行事件') {
            const { action_modes = [] } = taskDetails?.value || {}
            flightEvents.value = action_modes.flatMap(({ actionActuatorFunc }) =>
               droneEventList.filter(({ value }) => actionActuatorFunc === value)
            )
         }
      })
   },
   {
      immediate: true,
      deep: true,
   }
)
</script>

<style scoped lang="scss">
@@ -47,14 +70,15 @@
   top: 0;
   width: 297px;
   height: 1002px;
   background: rgba(31, 31, 31, 0.15);
   background: rgba(31, 31, 31, 0.5);
   backdrop-filter: blur(0.5rem);
   border-radius: 0px 40px 40px 0px;
   display: flex;
   flex-direction: column;
   gap: 25px 0;
   align-items: center;

   .manualControl{
   .manualControl {
      background: transparent !important;
   }

@@ -68,14 +92,15 @@
      display: flex;
      align-items: center;
      justify-content: center;
      img{

      img {
         width: 100px;
         height: 68px;
      }
   }

   .taskInfo {
      width: 220px;
      width: 230px;
      height: 520px;
      display: flex;
      overflow: auto;
@@ -86,16 +111,29 @@
         display: flex;
         font-family: Segoe UI, Segoe UI;
         font-size: 14px;

         .itemName {
            flex-shrink: 0;
            font-weight: 400;

            color: #D3D3D3;
            color: #d3d3d3;
         }

         .itemValue {
            font-weight: bold;
            color: #ffffff;
            word-break: break-all; /* 强制在任意字符断行 */
            white-space: normal; /* 允许正常换行 */
         }

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