<!--当前任务详情-->
|
<template>
|
<el-dialog
|
modal-class="current-task-details"
|
v-model="isShowCurrentTaskDetails"
|
title="当前任务详情"
|
:width="pxToRem(1500)"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
@opened="handleDialogOpened">
|
<div class="content-container">
|
<!-- 视频直播 -->
|
<div class="video-container">
|
<LiveVideo />
|
</div>
|
<!-- 展示地图 -->
|
<div id="CurrentTaskMap" class="map-container"></div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { pxToRem } from '@/utils/rem';
|
import LiveVideo from '@/components/LiveVideo.vue';
|
import { liveStart } from '@/api/home/machineNest';
|
import { getJobDetails } from '@/api/home/task';
|
import cesiumOperation from '@/utils/cesium-tsa';
|
import { useStore } from 'vuex';
|
|
import { initPointWayline } from './initPointWayline';
|
|
const { parsingFiles } = initPointWayline()
|
|
const { _init, viewerDestory } = cesiumOperation()
|
|
|
const isShowCurrentTaskDetails = defineModel('show');
|
const props = defineProps({
|
rowData: { // 任务列表row数据
|
type: Object,
|
default: () => ({})
|
}
|
});
|
|
// 获取直播地址
|
const getVideoUrl = () => {
|
liveStart(props.rowData.deviceSns).then(res => {
|
if (res.data.code !== 0) return;
|
airPortUrl.value = res.data.data.rtcs_url;
|
});
|
};
|
|
// 获取任务详情获取航线文件
|
const getTaskDetails = () => {
|
getJobDetails({ wayLineJobInfoId: props.rowData.id }).then(res => {
|
if (res.data.data.way_lines && res.data.data.way_lines.length === 1) {
|
// console.log(window.$viewer,'顶顶顶顶')
|
parsingFiles(res.data.data.way_lines[0].url, window.$viewer);
|
}
|
})
|
}
|
|
const handleDialogOpened = () => {
|
nextTick(() => {
|
_init('CurrentTaskMap');
|
});
|
};
|
|
// 监听 rowData 变化
|
watch(() => props.rowData, (newVal) => {
|
if (newVal && Object.keys(newVal).length) {
|
// getVideoUrl();
|
getTaskDetails();
|
}
|
}, { deep: true, immediate: true });
|
|
onUnmounted(() => {
|
viewerDestory();
|
});
|
|
onMounted(() => {
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.current-task-details {
|
display: flex;
|
justify-content: space-between;
|
.content-container {
|
display: flex;
|
// gap: 20px;
|
height: 600px;
|
|
.video-container {
|
width: 50%;
|
padding-right: 10px;
|
}
|
|
.map-container {
|
width: 50%;
|
padding-left: 10px;
|
height: 100%;
|
}
|
}
|
#CurrentTaskMap {
|
:deep() {
|
.cesium-viewer {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
|
.cesium-viewer-cesiumWidgetContainer {
|
width: 100%;
|
height: 100%;
|
|
.cesium-widget {
|
width: 100%;
|
height: 100%;
|
|
canvas {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
.cesium-viewer-bottom {
|
display: none;
|
}
|
}
|
}
|
}
|
</style>
|
