forked from drone/command-center-dashboard

罗广辉
2025-04-07 da2a4e58ecc7c5da0a3ec726708a16c21e7f60e3
src/views/SignMachineNest/MachineRight/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetails.vue
@@ -21,10 +21,19 @@
            <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>
         <DeviceJobDetailsMap class="contentRight" :detailsData="detailsData"/>
      </div>
   </el-dialog>
</template>
@@ -32,31 +41,65 @@
<script setup>
import { pxToRem } from '@/utils/rem'
import JobRelatedEvents from './JobRelatedEvents.vue'
import { getJobDetails, getJobInfoFiles } from '@/api/home/task'
import DeviceJobDetailsMap from './DeviceJobDetailsMap.vue'
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' },
])
onMounted(() => {})
const detailsData = ref({
   id: null,
   remark: null,
   is_monitoring: null,
   industry_type_str: null,
   area_code: null,
   ai_type_str: null,
   begin_time: null,
   end_time: null,
   device_names: null,
   create_time: null,
   name: null,
   event_number: null,
   creator_name: null,
   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) {
      getDetails()
      getAchievement()
   }
})
</script>
<style lang="scss">
@@ -113,6 +156,8 @@
      .imgListBox {
         display: flex;
         flex-wrap: wrap;
         gap: 0 10px;
         .imgItem {
            width: 200px;