From f6b7078aeb7a4b56ad70a6f954963fa6ea68fa2b Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Thu, 10 Apr 2025 15:23:24 +0800
Subject: [PATCH] feat: 修改列表状态颜色
---
src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails.vue | 117 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 114 insertions(+), 3 deletions(-)
diff --git a/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails.vue b/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails.vue
index 107d7e1..6e2d512 100644
--- a/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails.vue
@@ -6,15 +6,126 @@
title="当前任务详情"
:width="pxToRem(1500)"
:close-on-click-modal="false"
- :destroy-on-close="true">
- <div class=""></div>
+ :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';
+
+const { _init, viewerDestory } = cesiumOperation()
+const store = useStore();
+
const isShowCurrentTaskDetails = defineModel('show');
+const props = defineProps({
+ rowData: { // 任务列表row数据
+ type: Object,
+ default: () => ({})
+ }
+});
+
+// 获取直播地址
+const getVideoUrl = () => {
+ console.log(props.rowData, '当前任务详情');
+ 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 => {
+ console.log(res.data.data, '顶顶顶');
+ if (res.data.data.way_lines && res.data.data.way_lines.length === 1) {
+ const line = res.data.data.way_lines[0].url
+ }
+ })
+}
+
+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 {}
+.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>
\ No newline at end of file
--
Gitblit v1.9.3