<!-- 任务详情 -->
|
<template>
|
<el-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">
|
<el-divider content-position="left">详情</el-divider>
|
<div class="infoBox">
|
<div class="itemBox" v-for="item in infoList">
|
<div class="itemTitle">{{ item.name }}：</div>
|
<div class="itemValue">{{ item.value }}</div>
|
</div>
|
</div>
|
<JobRelatedEvents v-if="isShow" />
|
<el-divider content-position="left">任务成果 xxx个</el-divider>
|
<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"
|
/>
|
</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: '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: 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 => {
|
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">
|
.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 {
|
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;
|
}
|
|
.itemTitle {
|
font-weight: bold;
|
color: #333;
|
}
|
|
.itemValue {
|
color: #666;
|
}
|
}
|
|
.imgListBox {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 0 10px;
|
|
.imgItem {
|
width: 200px;
|
height: 200px;
|
}
|
}
|
}
|
|
.contentRight {
|
width: 0;
|
flex-grow: 1;
|
background: #19ad8d;
|
}
|
}
|
</style>
|
