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 ++++++++++++++++++++++++++++
src/views/TaskManage/TaskTop/TaskTime.vue | 14 ++-
src/components/LiveVideo.vue | 9 +
src/utils/cesium-tsa.js | 1
src/views/Home/HomeLeft/OverviewNext.vue | 14 ++-
src/api/home/task.js | 2
src/views/TaskManage/TaskTop/TaskEvent.vue | 12 ++
src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue | 2
src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue | 6 +
src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue | 4
src/views/TaskManage/TaskIntermediateContent/initPlanarWayline.js | 0
src/views/TaskManage/TaskIntermediateContent/initPointWayline.js | 39 +++++++++
12 files changed, 200 insertions(+), 20 deletions(-)
diff --git a/src/api/home/task.js b/src/api/home/task.js
index c9d2aa5..a862db2 100644
--- a/src/api/home/task.js
+++ b/src/api/home/task.js
@@ -43,7 +43,7 @@
// 任务列表
export const jobList = data => {
return request({
- url: '/drone-device-core/wayline/waylineJobInfo/jobList?current=' + data.page + '&size=' + data.size,
+ url: '/drone-device-core/wayline/waylineJobInfo/jobList?current=' + data.current + '&size=' + data.size,
method: 'post',
data: data.searchParams,
})
diff --git a/src/components/LiveVideo.vue b/src/components/LiveVideo.vue
index 69031ef..77a7c5d 100644
--- a/src/components/LiveVideo.vue
+++ b/src/components/LiveVideo.vue
@@ -1,7 +1,7 @@
<!--视频直播-->
<template>
<div class="live-video" ref="JessibucaContainer">
- <video ref="liveVideoRef" controls autoplay muted playsinline>
+ <video ref="liveVideoRef" class="video-player" controls autoplay muted playsinline>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
@@ -102,10 +102,15 @@
});
</script>
-<style scoped>
+<style lang="scss" scoped>
.live-video{
width: 100%;
height: 100%;
color: #fff;
+ .video-player {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/utils/cesium-tsa.js b/src/utils/cesium-tsa.js
index c8bc0dd..7d61703 100644
--- a/src/utils/cesium-tsa.js
+++ b/src/utils/cesium-tsa.js
@@ -151,6 +151,7 @@
minimumLevel: 3,
})
const _init = async id => {
+ console.log(id,'顶顶顶')
Cesium.Camera.DEFAULT_VIEW_FACTOR = -0.45
// 西南东北，默认显示中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(66, 4, 135, 53.55)
diff --git a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue
index 1a5a818..d16606a 100644
--- a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue
+++ b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue
@@ -145,7 +145,7 @@
chart = echarts.init(chartRef.value)
// 监听窗口大小变化
window.addEventListener('resize', () => {
- chart.resize()
+ chart?.resize()
})
getTotalJobNum().then(res => {
total.value = res.data?.data || 0
diff --git a/src/views/Home/HomeLeft/OverviewNext.vue b/src/views/Home/HomeLeft/OverviewNext.vue
index c208113..21fdc80 100644
--- a/src/views/Home/HomeLeft/OverviewNext.vue
+++ b/src/views/Home/HomeLeft/OverviewNext.vue
@@ -19,7 +19,10 @@
<img width="13" height="15" src="../../../assets/images/home/homeLeft/table-icon.png" alt="" />
{{ item.nickname }}
</div>
- <div class="status" :class="item.status==='WORKING'?'atcive':''" @click="signMachineNestClick(item)">
+ <div class="status" :class="{
+ 'active': item.status === 'WORKING',
+ 'idle-active': item.status === 'LEISURE'
+ }" @click="signMachineNestClick(item)">
{{ item.status==='OFFLINE'?'离线中':(item.status==='WORKING'?'作业中':'空闲中') }}
</div>
</div>
@@ -151,13 +154,16 @@
left: 10px;
}
.status {
- color: #6fc3ff;
+ color: #fff;
cursor: pointer;
}
- .atcive {
- color: #04f020;
+ .active {
+ color: #8EFFAC;
background: linear-gradient( 90deg, rgba(12,45,92,1) 0%, #154671 50%, rgba(12,45,92,1) 100%), linear-gradient( 90deg, rgba(12,45,92,1) 0%, rgba(12,45,92,1) 50%, rgba(12,45,92,1) 100%);
}
+ .idle-active {
+ color: #FFA768;
+ }
}
.custom-empty {
margin: 16px 0;
diff --git a/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue b/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
index 7131337..150515b 100644
--- a/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
+++ b/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
@@ -198,8 +198,8 @@
chart= echarts.init(chartRef.value);
pieChart = echarts.init(pieRef.value);
window.addEventListener('resize', () => {
- chart.resize();
- pieChart.resize();
+ chart?.resize();
+ pieChart?.resize();
});
getData(newTime.value, 'TODAY');
});
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
diff --git a/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue b/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
index b7c13ed..299a8f3 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
@@ -43,7 +43,7 @@
<!-- 添加任务 -->
<AddTask v-model:show="isShowAddTask" @refresh="searchClick"/>
<!-- 当前任务详情 -->
- <CurrentTaskDetails v-model:show="isShowCurrentTaskDetails"/>
+ <CurrentTaskDetails v-model:show="isShowCurrentTaskDetails" :rowData="rowData"/>
</template>
<script setup>
@@ -80,10 +80,12 @@
return statusMap[status] || '-';
};
-// 查看当前任务详情
+// 查看当前任务详情 如果是一台机则显示详情 如果是多台机则进入集群调度(暂未开发)
let isShowCurrentTaskDetails = ref(false);
+let rowData = ref({});
const handleDetail = (row) => {
isShowCurrentTaskDetails.value = true;
+ rowData.value = row? row : {};
};
// 分页大小改变
diff --git a/src/views/TaskManage/TaskIntermediateContent/initPlanarWayline.js b/src/views/TaskManage/TaskIntermediateContent/initPlanarWayline.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/TaskManage/TaskIntermediateContent/initPlanarWayline.js
diff --git a/src/views/TaskManage/TaskIntermediateContent/initPointWayline.js b/src/views/TaskManage/TaskIntermediateContent/initPointWayline.js
new file mode 100644
index 0000000..fcabe59
--- /dev/null
+++ b/src/views/TaskManage/TaskIntermediateContent/initPointWayline.js
@@ -0,0 +1,39 @@
+import * as Cesium from 'cesium';
+import cesiumOperation from '@/utils/cesium-tsa';
+import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js'
+import { cartesian3Convert, getCenterPoint, getLnglatDist } from '@/utils/cesium/mapUtil.js'
+import { getLnglatAltitude, getPositionsHeight } from '@/utils/cesium/mapUtil'
+
+const {
+ addPoint,
+ getEntityById,
+ removeById,
+ removeAllPoint,
+ addLeftClickEvent,
+ removeLeftClickEvent,
+ addRightClickEvent,
+ removeRightClickEvent,
+ flyTo,
+ pointInitEvent,
+ pointUnInitEvent
+} = cesiumOperation()
+/**
+ *
+ * @param { 单点航线 相关功能} url
+ */
+export const initPointWayline = (url) => {
+ const { viewer } = cesiumOperation();
+
+ // 解析kmz文件
+ const parsingFiles = async (url) => {
+ const { fileInfoObj } = analyzeKmzFile(`${url}?_t=${new Date().getTime()}`);
+ const xmlStr = fileInfoObj['wpmz/template.kml']
+ const xmlJson = XMLToJSON(xmlStr)?.['Document']
+ if (xmlJson.Folder.Placemark.length) return;
+ drawWayline(xmlJson)
+ };
+ // 在地图上画线
+ const drawWayline = (xmlJson) => {
+ const { Folder } = xmlJson
+ };
+};
\ No newline at end of file
diff --git a/src/views/TaskManage/TaskTop/TaskEvent.vue b/src/views/TaskManage/TaskTop/TaskEvent.vue
index 349d1ab..59c695e 100644
--- a/src/views/TaskManage/TaskTop/TaskEvent.vue
+++ b/src/views/TaskManage/TaskTop/TaskEvent.vue
@@ -112,12 +112,22 @@
return colors[Math.floor(Math.random() * colors.length)];
};
+onBeforeUnmount(() => {
+ if (chart) {
+ chart.dispose();
+ chart = null;
+ }
+ window.removeEventListener('resize', handleResize);
+});
+
onMounted(() => {
chart = echarts.init(chartRef.value);
getJobEventBar(newTime.value, 'CURRENT_YEAR');
window.addEventListener('resize', () => {
- chart?.resize();
+ if (chart && !chart.isDisposed()) {
+ chart.resize();
+ }
});
});
diff --git a/src/views/TaskManage/TaskTop/TaskTime.vue b/src/views/TaskManage/TaskTop/TaskTime.vue
index 6de6d35..efea1b5 100644
--- a/src/views/TaskManage/TaskTop/TaskTime.vue
+++ b/src/views/TaskManage/TaskTop/TaskTime.vue
@@ -86,14 +86,20 @@
});
};
-
+onBeforeUnmount(() => {
+ if (chart) {
+ chart.dispose();
+ chart = null;
+ }
+ window.removeEventListener('resize', handleResize);
+});
onMounted(() => {
chart = echarts.init(chartRef.value);
getJobNumBar(newTime.value, 'CURRENT_YEAR');
- window.addEventListener('resize', () => {
- chart?.resize();
- });
+ if (chart && !chart.isDisposed()) {
+ chart.resize();
+ }
});
onUnmounted(() => {
--
Gitblit v1.9.3