<template>
|
<el-dialog
|
class="work-dialog-video playback-dialog"
|
v-model="isShow"
|
append-to-body
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
:show-close="false"
|
>
|
<template #header>
|
<div class="title">视频回放</div>
|
|
<div class="close" @click="isShow = false"></div>
|
</template>
|
|
<div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.7)">
|
<div class="mpa-container">
|
<MapContainer ref="mapContainerEle" />
|
</div>
|
|
<div class="video-player-container">
|
<VideoPlayer ref="videoPlayerEle" />
|
</div>
|
|
<div v-show="photoEleShow" class="photo-list-container">
|
<PhotoList ref="photoListEle" />
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import PhotoList from '@/components/PlaybackVideo/components/PhotoList.vue'
|
import VideoPlayer from '@/components/PlaybackVideo/components/VideoPlayer.vue'
|
import MapContainer from '@/components/PlaybackVideo/components/MapContainer.vue'
|
import { getWaylinejobLiveRecordPage, findFlightLogInfoByJobId, aiImagesPage } from '@/api/playback/'
|
const isShow = defineModel('show', {
|
type: Boolean,
|
default: true,
|
})
|
|
const detailData = defineModel('detailData', {
|
type: Object,
|
default: () => ({}),
|
})
|
|
const props = defineProps(['detailsData'])
|
|
const loading = ref(true)
|
const photoEleShow = ref(false)
|
|
const positionData = ref(null)
|
const attachmentData = ref(null)
|
|
const mapContainerEle = ref(null)
|
const videoPlayerEle = ref(null)
|
const photoListEle = ref(null)
|
|
const jobId = inject('jobId')
|
|
provide('videoData', detailData)
|
provide('positionData', positionData)
|
provide('attachmentData', attachmentData)
|
|
watch(isShow, newVal => {
|
if (newVal) {
|
init()
|
}
|
})
|
|
const init = async () => {
|
loading.value = true
|
await nextTick()
|
|
Promise.all([
|
findFlightLogInfoByJobId({ jobId: jobId.value }),
|
aiImagesPage({ size: 30, current: 1 }, { size: 30, current: 1, wayLineJobId: jobId.value, resultTypes: [0, 2] }),
|
]).then(([positionDetails, attachmentDetails]) => {
|
let arr = positionDetails.data.data.filter(item => {
|
return item.create_time >= detailData.value.start_time && item.create_time <= detailData.value.end_time
|
})
|
|
positionData.value = arr.sort((a, b) => a.create_time - b.create_time)
|
|
attachmentData.value =
|
attachmentDetails.data.data.records
|
.filter(item => {
|
return (
|
item.metadata.createdTime >= detailData.value.start_time &&
|
item.metadata.createdTime <= detailData.value.end_time
|
)
|
})
|
.map(item => ({
|
...item,
|
metadata: {
|
...item.metadata,
|
createdTime: item.metadata.createdTime,
|
},
|
})) || []
|
|
photoEleShow.value = attachmentData.value.length > 0
|
|
videoPlayerEle.value.init(detailData.value, attachmentData.value)
|
mapContainerEle.value.init(positionData.value, props.detailsData, props.taskData)
|
photoListEle.value.init(detailData.value, attachmentData.value)
|
|
loading.value = false
|
})
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.mpa-container {
|
position: absolute;
|
top: 58px;
|
left: 10px;
|
width: 338px;
|
height: 206px;
|
z-index: 1;
|
border-radius: 8px;
|
overflow: hidden;
|
}
|
|
.video-player-container {
|
width: 100%;
|
height: 100%;
|
}
|
|
.photo-list-container {
|
position: absolute;
|
top: 58px;
|
right: 10px;
|
width: 338px;
|
height: calc(100% - 116px);
|
z-index: 1;
|
border-radius: 8px;
|
background: rgba(2, 2, 2, 0.6);
|
overflow: hidden;
|
backdrop-filter: blur(13.7px);
|
}
|
</style>
|
