feat:事件弹窗显示调整

shuishen

2025-04-16 a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue

@@ -1,6 +1,7 @@
<!-- 任务详情 -->
<!-- 历史任务详情 -->
<template>
   <el-dialog
      class="ztzf-dialog"
      append-to-body
      modal-class="detailsOfHistoricalTasks"
      v-model="isShow"
@@ -11,29 +12,52 @@
   >
      <div class="content">
         <div class="contentLeft">
            <el-divider content-position="left">详情</el-divider>
            <div class="machineTableDetailsTitle"><span>详情</span></div>
            <div class="infoBox">
               <div class="itemBox" v-for="item in infoList">
                  <div class="itemTitle">{{ item.name }}：</div>
                  <div class="itemValue">{{ item.value }}</div>
               <div class="itemBoxLeft">
                  <div v-for="(item, index) in infoList" :key="index">
                     <div class="itemBox">
                        <div class="itemTitle">{{ item.name }}：</div>
                        <div class="itemValue">{{ item.value ? item.value : '' }}</div>
                     </div>
                  </div>
               </div>
               <div class="itemBoxRight">
                  <div class="itemTitle">关联算法：</div>
                  <div class="itemValue">{{ flystatus ? flystatus :'' }}</div>
               </div>
            </div>
            <JobRelatedEvents v-if="isShow" />
            <el-divider content-position="left">任务成果 xxx个</el-divider>
            <div class="devicetitle" v-if="isShow">
               <p>
                  任务成果
                  <span>{{ total }}</span>
                  个
               </p>
               <p class="more">更多</p>
            </div>
            <div class="imgListBox">
               <el-image
                  class="imgItem"
                  v-for="(item, index) in achievementList"
                  :src="item.url"
                  :preview-src-list="achievementList.map(i => i.url)"
                  show-progress
                  preview-teleported
                  :initial-index="index"
                  fit="cover"
               />
               <!-- 图片显示 -->
               <template v-if="mediaType === 'image'">
                  <el-image
                     class="imgItem"
                     v-for="(item, index) in achievementList"
                     :key="index"
                     :src="item.url"
                     :preview-src-list="achievementList.map(i => i.url)"
                     show-progress
                     preview-teleported
                     :initial-index="index"
                     fit="cover"
                  />
               </template>
               <!-- 视频显示 -->
               <template v-else-if="mediaType === 'video'">
                  <video v-for="(item, index) in achievementList" :key="index" :src="item.url" controls></video>
               </template>
            </div>
         </div>
         <DeviceJobDetailsMap v-if="isShow" class="contentRight" :detailsData="detailsData"/>
         <DeviceJobDetailsMap v-if="isShow" class="contentRight" :detailsData="detailsData" />
      </div>
   </el-dialog>
</template>
@@ -43,22 +67,20 @@
import JobRelatedEvents from './JobRelatedEvents.vue'
import { getJobDetails, getJobInfoFiles } from '@/api/home/task'
import DeviceJobDetailsMap from './DeviceJobDetailsMap.vue'

const isShow = defineModel('show')

const infoList = ref([
   { name: '任务编号', value: '', field: 'id' },
   { name: '任务编号', value: '', field: 'job info num' },
   { name: '任务所属机巢', value: '', field: 'device_names' },
   { name: '关联算法', value: '', field: 'ai_type_str' },
   { name: '任务名称', value: '', field: 'name' },
   { name: '所属单位', value: '', field: 'dept_name' },
   { name: '任务类型', value: '', field: 'industry_type_str' },
   { name: '任务时间', value: '', field: 'begin_time' + ' - ' + 'end_time' },
   { name: '飞行事件', value: '', field: 'event_number' },
   { name: '任务周期', value: '', field: 'rep_rule_val' },
   { name: '任务频次', value: '', field: 'rep_fre_val' },
   { name: '任务频次', value: '', field: 'rep_rule_type' + ' - ' + 'rep_rule_val' },
   { name: '任务描述', value: '', field: 'remark' },
])

// 机巢状态
const flystatus = ref('')
const detailsData = ref({
   id: null,
   remark: null,
@@ -75,21 +97,38 @@
   creator_name: null,
   way_lines: [],
})

// 任务成果
const mediaType = ref('')
const total = ref(0)
const achievementList = ref([])

const wayLineJodInfoId = inject('wayLineJodInfoId')
const getAchievement = () => {
   getJobInfoFiles({ jobInfoId: wayLineJodInfoId.value }).then(res => {
      for (let i = 0; i < res.data.data.length; i++) {
         const url = res.data.data[i].url || ''
         const ext = String(url)?.split('.')?.pop().toLowerCase() || ''
         const images = ['jpg', 'jpeg', 'png', 'gif', 'webp']
         const videos = ['mp4', 'webm', 'ogg', 'mov']
         mediaType.value = images.includes(ext) ? 'image' : videos.includes(ext) ? 'video' : ''
      }

      achievementList.value = res.data.data
      total.value = res.data.data.length
   })
}
const getDetails = () => {
   getJobDetails({ wayLineJobInfoId: wayLineJodInfoId.value }).then(res => {
      detailsData.value = res.data.data
      infoList.value.forEach(item => {
         item.value = detailsData.value?.[item.field] || ''
         if (item.name === '任务时间') {
            item.value = detailsData.value.begin_time.slice(0, 10) + '-' + detailsData.value.end_time.slice(0, 10)
         } else if (item.name === '任务频次') {
            item.value ===undefined ? '' : detailsData.value.rep_rule_type + ' -- ' + detailsData.value.rep_rule_val
         } else {
            item.value = detailsData.value?.[item.field] || ''
         }
      })
      flystatus.value = res.data.data.ai_type_str
   })
}

@@ -124,44 +163,93 @@
   height: 100%;

   .contentLeft {
      margin-left: 35px;
      margin-right: 24px;
      width: 900px;
      overflow: auto;

      .infoBox {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 10px; // 列之间的间距
         padding: 10px;

         .itemBox {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
      .machineTableDetailsTitle {
         margin-bottom: 16px;
         background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
         background-size: 100% 100%;
         span {
            display: inline-block;
            margin-left: 30px;
            font-size: 16px;
            color: #ddf0ff;
            line-height: 20px;
            text-align: left;
            margin-bottom: 8px;
         }

      }
      .devicetitle {
         margin-bottom: 16px;
         background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
         background-size: 100% 100%;
         display: flex;
         justify-content: space-between;
         align-content: center;
         p {
            display: inline-block;
            margin-left: 30px;
            font-size: 16px;
            color: #ddf0ff;
            line-height: 20px;
            text-align: left;
            margin-bottom: 8px;
            span {
               font-size: 26px;
               color: #0282ff;
               font-weight: bold;
            }
         }
         .more {
            color: #2f9dff;
            font-size: 14px;
            padding-top: 5px;
            cursor: pointer;
         }
      }
      .infoBox {
         display: flex;
         justify-content: space-between;
         .itemBoxLeft {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px; // 列之间的间距
            padding: 10px;
            font-size: 14px;
            .itemBox {
               display: flex;
               align-items: center;
               margin-bottom: 24px;
            }
         }
         .itemTitle {
            font-weight: bold;
            color: #333;
            color: #fff;
         }

         .itemValue {
            color: #666;
            font-weight: bold;
            color: #fff;
         }
         .itemBoxRight {
            width: 262px;
            display: flex;
         }
      }

      .imgListBox {
         display: flex;
         flex-wrap: wrap;
         gap: 0 10px;

         .imgItem {
            width: 200px;
            height: 200px;
         }
         // display: flex;
         // flex-wrap: wrap;
         display: grid;
         grid-template-columns: repeat(5, 1fr);
         gap: 10px;
         margin-bottom: 49px;
         // .imgItem {
         //    width: 200px;
         //    height: 200px;
         // }
      }
   }

@@ -169,6 +257,7 @@
      width: 0;
      flex-grow: 1;
      background: #19ad8d;
      margin-right: 17px;
   }
}
</style>