<!-- 历史任务详情 -->
|
<template>
|
<el-dialog
|
class="ztzf-dialog"
|
append-to-body
|
modal-class="detailsOfHistoricalTasks"
|
v-model="isShow"
|
title="历史任务详情"
|
:width="pxToRem(1500)"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
>
|
<div class="content">
|
<div class="contentLeft">
|
<div class="machineTableDetailsTitle"><span>详情</span></div>
|
<div class="infoBox">
|
<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="props.wayLineJodInfoId" />
|
<div class="devicetitle" v-if="isShow">
|
<p>
|
任务成果
|
<span>{{ total }}</span>
|
个
|
</p>
|
<p class="more">更多</p>
|
</div>
|
<div class="imgListBox">
|
<!-- 图片显示 -->
|
<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" />
|
</div>
|
</el-dialog>
|
</template>
|
|
<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 infoList = ref([
|
{ name: '任务编号', value: '', field: 'job_info_num' },
|
{ name: '任务所属机巢', value: '', field: 'device_names' },
|
{ name: '任务名称', value: '', field: 'name' },
|
{ name: '所属单位', value: '', field: 'dept_name' },
|
{ name: '任务类型', value: '', field: 'industry_type_str' },
|
{ name: '任务时间', value: '', field: 'cycle_time_value' },
|
{ name: '飞行事件', value: '', field: 'event_number' },
|
{ name: '任务频次', value: '', field: 'rep_rule_type rep_rule_val' },
|
{ name: '任务描述', value: '', field: 'remark' },
|
])
|
// 机巢状态
|
const flystatus = ref('')
|
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 mediaType = ref('')
|
const total = ref(0)
|
const achievementList = ref([])
|
|
const props = defineProps(['wayLineJodInfoId'])
|
const wayLineJodInfoId = computed(() => props.wayLineJodInfoId)
|
provide('wayLineJodInfoId', 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 => {
|
// if (item.name === '任务时间') {
|
// item.value = detailsData.value.begin_time.slice(0, 10) + '-' + detailsData.value.end_time.slice(0, 10)
|
// } else
|
if (item.name === '任务频次') {
|
const { rep_rule_type = '', rep_rule_val = '' } = detailsData?.value || {}
|
item.value = rep_rule_type + ' -- ' + rep_rule_val
|
} else {
|
item.value = detailsData.value?.[item.field] || '--'
|
}
|
})
|
flystatus.value = res.data.data.ai_type_str
|
})
|
}
|
|
onMounted(() => {
|
getDetails()
|
getAchievement()
|
})
|
</script>
|
|
<style lang="scss">
|
.detailsOfHistoricalTasks {
|
.el-dialog {
|
--el-dialog-margin-top: 5vh;
|
}
|
|
.el-pagination {
|
justify-content: center;
|
padding: 20px;
|
}
|
|
.el-dialog__body {
|
height: 80vh;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.content {
|
display: flex;
|
height: 100%;
|
|
.contentLeft {
|
margin-left: 35px;
|
margin-right: 24px;
|
width: 900px;
|
overflow: auto;
|
.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;
|
}
|
}
|
.itemBoxLeft > :last-child:nth-child(odd) {
|
grid-column: 1 / -1;
|
}
|
.itemTitle {
|
color: #fff;
|
}
|
|
.itemValue {
|
font-weight: bold;
|
color: #fff;
|
}
|
.itemBoxRight {
|
width: 262px;
|
display: flex;
|
}
|
}
|
|
.imgListBox {
|
// display: flex;
|
// flex-wrap: wrap;
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
gap: 10px;
|
margin-bottom: 49px;
|
// .imgItem {
|
// width: 200px;
|
// height: 200px;
|
// }
|
}
|
}
|
|
.contentRight {
|
width: 0;
|
flex-grow: 1;
|
background: #19ad8d;
|
margin-right: 17px;
|
}
|
}
|
</style>
|
