<!-- 历史任务详情 -->
|
<template>
|
<el-dialog class="ztzf-dialog" append-to-body modal-class="detailsOfHistoricalTasks" v-model="isShow" title="历史任务详情"
|
:width="pxToRem(1700)" :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" class="itemCon">
|
<div class="itemBox">
|
<div class="itemTitle">{{ item.name }}：</div>
|
<div truncated class="itemValue" v-if="item.name !== '飞行事件' && item.name !== '任务执行次数'">{{
|
item.value ? item.value : '--' }}</div>
|
<div class="itemValue" v-if="item.name === '任务执行次数'">{{ item.value ? item.value : '0'
|
}}次</div>
|
<!-- 飞行事件 -->
|
<div class="flightEvents" v-if="item.name === '飞行事件'">
|
<template v-if="flightEvents.length">
|
<img v-for="(item, index) in flightEvents" alt="" :src="item.img"
|
:title="item.name" :key="index"></img>
|
</template>
|
<div class="itemValue" v-else>--</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<JobRelatedEvents :jobTimes="jobTimes" :batchNo="batchNo" />
|
<div class="devicetitle" v-if="isShow">
|
<p>
|
成果数据
|
<span>{{ total }}</span>
|
个
|
</p>
|
<p class="more" @click="jumpMore">更多</p>
|
</div>
|
<div class="imgListBox">
|
<!-- 图片显示 -->
|
<!-- :preview-src-list="achievementList.map(i => i.url)" -->
|
<template v-for="(item, index) in achievementList" :key="index">
|
<el-image v-if="item.result_type === 0" class="imgItem" :src="getSmallImg(item.url)"
|
:preview-src-list="achievementList.map(i => i.url)" show-progress preview-teleported
|
:initial-index="index" fit="cover" />
|
<div v-if="item.result_type === 1" class="videotime">
|
<video ref="videoRef" class="videoDisplay" :src="item.url"></video>
|
<img @click="enterFullScreen(index)" class="videobutton"
|
src="@/assets/images/task/videoshow.png" alt="">
|
</div>
|
<el-dialog class="ztzf-dialog " append-to-body modal-class="detailsOfHistoricalTasks"
|
v-model="VideoShow" width="1600" :close-on-click-modal="false"
|
:destroy-on-close="true">
|
<div class="fullscreen">
|
|
<video ref="fullscreenVideo" class="fullscreen-video" :src="currentVideoUrl"
|
:style="{ width: 1600, height: '80vh' }" controls autoplay></video>
|
</div>
|
|
</el-dialog>
|
</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 { getEventMediaListApi, getJobDetails, getJobInfoFiles } from '@/api/job/task'
|
import DeviceJobDetailsMap from './DeviceJobDetailsMap.vue'
|
import { droneEventList } from '../const/drc'
|
import { ElMessage } from 'element-plus'
|
const isShow = defineModel('show')
|
const VideoShow = ref(false)
|
const infoList = ref([
|
{ name: '任务编号', value: '', field: 'job_info_num' },
|
{ name: '任务名称', value: '', field: 'name' },
|
{ name: '任务类型', value: '', field: 'industry_type_str' },
|
{ name: '飞行事件', value: '', field: 'event_number' },
|
{ name: '所属机巢', value: '', field: 'device_names' },
|
{ name: '所属单位', value: '', field: 'dept_name' },
|
{ name: '任务时间', value: '', field: 'cycle_time_value' },
|
{ name: '关联算法', value: '', field: 'ai_type_str' },
|
{ name: '任务描述', value: '', field: 'remark' },
|
// { name: '任务执行次数', value: '', field: 'job_num' },
|
])
|
// 机巢状态
|
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 total = ref(0)
|
const achievementList = ref([])
|
const props = defineProps(['wayLineJodInfoId', 'waylineJobId', 'batchNo'])
|
const wayLineJodInfoId = computed(() => props.wayLineJodInfoId)
|
provide('wayLineJodInfoId', wayLineJodInfoId)
|
const getAchievement = () => {
|
if (!props.wayLineJodInfoId) return
|
const params = {
|
"way_line_jod_info_id": props.wayLineJodInfoId,
|
"batch_no": props.batchNo
|
}
|
getEventMediaListApi(params).then(res => {
|
achievementList.value = res.data.data.slice(0, 5)
|
total.value = res.data.data.length
|
})
|
}
|
const jumpMore = () => {
|
ElMessage.warning('正在加急开发中...')
|
}
|
const getSmallImg = url => {
|
return url ? url.substring(0, url.lastIndexOf('.')) + '_small' + url.substring(url.lastIndexOf('.')) : ''
|
}
|
const flightEvents = ref([])
|
const jobTimes = ref([])
|
const getDetails = () => {
|
const params = {
|
wayLineJobInfoId: props.wayLineJodInfoId,
|
waylineJobId: props.waylineJobId,
|
batchNo: props.batchNo
|
}
|
getJobDetails(params).then(res => {
|
detailsData.value = res.data.data
|
jobTimes.value = res.data.data.job_times
|
|
infoList.value.forEach(item => {
|
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] || '--'
|
}
|
if (item.name === '飞行事件') {
|
const { action_modes = [] } = detailsData?.value || {}
|
flightEvents.value = action_modes.flatMap(({ actionActuatorFunc }) =>
|
droneEventList.filter(({ value }) => actionActuatorFunc === value)
|
)
|
}
|
})
|
// flystatus.value = res.data.data.ai_type_str
|
})
|
}
|
// 播放
|
const videoRef = ref(null);
|
const currentVideoIndex = ref(-1)
|
const fullscreenVideo = ref(null)
|
const enterFullScreen = (index) => {
|
currentVideoIndex.value = index
|
VideoShow.value = true
|
}
|
// 计算当前视频URL
|
const currentVideoUrl = computed(() => {
|
return achievementList.value[currentVideoIndex.value]?.url || ''
|
})
|
// 关闭弹窗处理
|
const handleClose = () => {
|
if (fullscreenVideo.value) {
|
fullscreenVideo.value.pause()
|
fullscreenVideo.value.currentTime = 0
|
}
|
}
|
|
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: 1150px;
|
overflow: auto;
|
|
.machineTableDetailsTitle {
|
margin-bottom: 10px;
|
background: url('/src/assets/images/task/detailtitle.png') no-repeat center;
|
background-size: 100% 100%;
|
|
span {
|
display: inline-block;
|
margin-left: 30px;
|
font-size: 16px;
|
color: #0282ff;
|
line-height: 20px;
|
text-align: left;
|
margin-bottom: 8px;
|
}
|
}
|
|
.devicetitle {
|
margin-bottom: 16px;
|
background: url('/src/assets/images/task/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: #363636;
|
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);
|
column-gap: 10px;
|
/* 只设置列间距 */
|
row-gap: 0;
|
/* 取消行间距 */
|
padding: 10px;
|
font-size: 14px;
|
|
.itemBox {
|
display: flex;
|
align-items: center;
|
background: #fff;
|
height: 43px;
|
border-top: 2px solid #EFEFEF;
|
|
}
|
|
}
|
|
.itemCon:nth-last-child(-n+2) {
|
border-bottom: 2px solid #EFEFEF;
|
}
|
|
.itemBox:nth-last-child(-n+2) .itemTitle {
|
border-bottom: 1px solid #EFEFEF;
|
}
|
|
.itemTitle {
|
color: #0B1D38;
|
width: 26%;
|
text-align: right;
|
background: #F3F6FF;
|
height: 43px;
|
line-height: 43px;
|
padding-right: 10px;
|
border-top: 1px solid #EFEFEF;
|
}
|
|
.itemValue {
|
font-size: 14px;
|
color: #747e91;
|
text-align: center;
|
width: 74%;
|
|
}
|
|
.flightEvents {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px 10px;
|
width: 74%;
|
justify-content: center;
|
|
img {
|
width: 30px;
|
height: 30px;
|
}
|
}
|
|
}
|
|
.imgListBox {
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
gap: 10px;
|
margin-bottom: 49px;
|
}
|
|
.videoDisplay {
|
display: flex;
|
flex-wrap: wrap;
|
width: 200px;
|
height: 200px;
|
|
}
|
|
.videotime {
|
position: relative;
|
}
|
|
// .videobutton {
|
// position: absolute;
|
// top: 40%;
|
// left: 45%;
|
// transform: translate(-50%);
|
// cursor: pointer;
|
// width: 40px;
|
// height: 40px;
|
// display: inline-block;
|
// }
|
|
}
|
.contentRight {
|
width: 0;
|
flex-grow: 1;
|
background: #19ad8d;
|
margin-right: 17px;
|
}
|
}
|
</style>
|
