feat: 历史任务详情40%

罗广辉

2025-04-07 dd1af3b519ef3ea616c0424a331927fc21e9587e

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

@@ -1,7 +1,7 @@
<!-- 任务详情 -->
<template>
   <el-dialog
    append-to-body
      append-to-body
      modal-class="detailsOfHistoricalTasks"
      v-model="isShow"
      title="历史任务详情"
@@ -21,7 +21,16 @@
            <JobRelatedEvents v-if="isShow" />
            <el-divider content-position="left">任务成果 xxx个</el-divider>
            <div class="imgListBox">
               <div v-for="item in imgList" class="imgItem">xxx图片</div>
               <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"
               />
            </div>
         </div>
         <div class="contentRight">map</div>
@@ -32,30 +41,64 @@
<script setup>
import { pxToRem } from '@/utils/rem'
import JobRelatedEvents from './JobRelatedEvents.vue'
import { getJobDetails, getJobInfoFiles } from '@/api/home/task'

const isShow = defineModel('show')


const imgList = ref([
   { name: '图片1', url: 'xxx' },
   { name: '图片1', url: 'xxx' },
   { name: '图片1', url: 'xxx' },
   { name: '图片1', url: 'xxx' },
])

const infoList = ref([
   { name: '任务编号', value: 'xxx' },
   { name: '任务所属机巢', value: 'xxx' },
   { name: '关联算法', value: 'xxx' },
   { name: '任务名称', value: 'xxx' },
   { name: '所属单位', value: 'xxx' },
   { name: '任务类型', value: 'xxx' },
   { name: '任务周期', value: 'xxx' },
   { name: '飞行事件', value: 'xxx' },
   { name: '任务频次', value: 'xxx' },
   { name: '任务描述', value: 'xxx' },
   { name: '任务编号', value: '', field: 'id' },
   { 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: 'event_number' },
   { name: '任务周期', value: '', field: 'rep_rule_val' },
   { name: '任务频次', value: '', field: 'rep_fre_val' },
   { name: '任务描述', value: '', field: 'remark' },
])

const detailsData = ref({
   id: 19,
   remark: '测试测试',
   is_monitoring: 0,
   industry_type_str: '综合类、公安类',
   area_code: '360103',
   ai_type_str: '识别火情、车牌识别',
   begin_time: '2025/04/02 16:00',
   end_time: '2025/04/01 15:59',
   device_names: '赣县-夏潭机场',
   create_time: '2025-04-01T07:35:19.000+00:00',
   name: '夏弹机场测试',
   event_number: 2,
   creator_name: '管理员',
   way_lines: [],
})

const achievementList = ref([])

const wayLineJodInfoId = inject('wayLineJodInfoId')
const getAchievement = () => {
   getJobInfoFiles({ jobInfoId: wayLineJodInfoId.value }).then(res => {
      achievementList.value = res.data.data
   })
}
const getDetails = () => {
   getJobDetails({ wayLineJobInfoId: wayLineJodInfoId.value }).then(res => {
      console.log(res.data.data, 666)
      detailsData.value = res.data.data
      infoList.value.forEach(item => {
         item.value = detailsData.value?.[item.field] || ''
      })
   })
}

watch(isShow, (newValue, oldValue) => {
   if (newValue) {
      getAchievement()
      getDetails()
   }
})
</script>

<style lang="scss">
@@ -112,6 +155,8 @@

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

         .imgItem {
            width: 200px;