<!--当前任务详情-->
|
<template>
|
<el-dialog
|
modal-class="current-task-details"
|
v-model="isShow"
|
title="当前任务详情"
|
:width="pxToRem(1500)"
|
:close-on-click-modal="false"
|
:destroy-on-close="true">
|
<div class="content-container" v-if="isShow">
|
<!-- 视频直播 -->
|
<div class="video-container">
|
<LiveVideo :videoUrl="machineNestUrl"/>
|
</div>
|
<!-- 展示地图 -->
|
<RealTimeMap />
|
</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 RealTimeMap from '@/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/RealTimeMap.vue'
|
import { getWebsocketUrl } from '@/websocket/util/config'
|
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
|
|
|
const isShow = defineModel('show');
|
const props = defineProps({
|
rowData: { // 任务列表row数据
|
type: Object,
|
default: () => ({})
|
}
|
});
|
let taskDetails = ref({})
|
const machineNestUrl = ref('');
|
provide('taskDetails', taskDetails);
|
|
// 获取机巢直播地址
|
const getVideoUrl = (deviceSn) => {
|
liveStart(deviceSn).then(res => {
|
if (res.data.code !== 0) return;
|
machineNestUrl.value = res.data.data.rtcs_url;
|
});
|
};
|
// 获取任务详情获取航线文件
|
const getTaskDetails = () => {
|
getJobDetails({ wayLineJobInfoId: props.rowData.id }).then(res => {
|
taskDetails.value = res.data.data
|
getVideoUrl(taskDetails.value.device_sns[0]);
|
console.log('taskDetails', taskDetails.value)
|
createWsConnect(taskDetails.value.way_lines[0].workspace_id)
|
})
|
}
|
const messageHandler = (result) => {
|
let payload = JSON.parse(result) // 为了兼容聊天消息
|
console.log('result,6666666', payload)
|
}
|
let connectWs
|
const createWsConnect = (workspaceId) => {
|
let webSocketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId;
|
// 监听ws 消息
|
connectWs = useConnectWebSocket(messageHandler, webSocketUrl);
|
};
|
|
|
// 监听 rowData 变化
|
watch(isShow, (newVal) => {
|
if (newVal) {
|
getTaskDetails();
|
}else{
|
connectWs?.close();
|
}
|
});
|
|
onBeforeUnmount(() => {
|
connectWs?.close();
|
})
|
|
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;
|
}
|
}
|
|
}
|
</style>
|
