From 48718702d8b296954382d67d074e76a3cdd6e8c2 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 11 Apr 2025 14:10:48 +0800
Subject: [PATCH] feat:完善智引即飞功能

---
 src/api/home/task.js                                                   |    2 
 src/assets/images/aiNowFly/picture-recording.png                       |    0 
 src/assets/images/aiNowFly/starting.png                                |    0 
 src/assets/images/aiNowFly/ending-high.png                             |    0 
 src/assets/images/aiNowFly/ai-fly-bg.png                               |    0 
 src/views/SignMachineNest/MachineRight/MachineStatus/MachineStatus.vue |    5 
 src/views/TaskManage/TaskIntermediateContent/TaskTable.vue             |    6 
 src/views/Home/AINowFly.vue                                            |  220 +++++++++++++++++++++++++++++++++++++++++++-----------
 src/assets/images/aiNowFly/ending.png                                  |    0 
 src/assets/images/aiNowFly/fly.png                                     |    0 
 10 files changed, 181 insertions(+), 52 deletions(-)

diff --git a/src/api/home/task.js b/src/api/home/task.js
index a862db2..151a127 100644
--- a/src/api/home/task.js
+++ b/src/api/home/task.js
@@ -88,7 +88,7 @@
 // 获取可飞行机巢列表
 export const getFlyingNestBy = (data,page) => {
 	return request({
-		url: `/drone-device-core/manage/api/v1/devices/getFlyingNestBy?current=${page.page}&size=${page.size}`,
+		url: `/drone-device-core/manage/api/v1/devices/getFlyingNestBy?current=${page.current}&size=${page.size}`,
 		method: 'post',
 		data: data,
 	})
diff --git a/src/assets/images/aiNowFly/ai-fly-bg.png b/src/assets/images/aiNowFly/ai-fly-bg.png
new file mode 100644
index 0000000..146779f
--- /dev/null
+++ b/src/assets/images/aiNowFly/ai-fly-bg.png
Binary files differ
diff --git a/src/assets/images/aiNowFly/ending-high.png b/src/assets/images/aiNowFly/ending-high.png
new file mode 100644
index 0000000..87370a5
--- /dev/null
+++ b/src/assets/images/aiNowFly/ending-high.png
Binary files differ
diff --git a/src/assets/images/aiNowFly/ending.png b/src/assets/images/aiNowFly/ending.png
new file mode 100644
index 0000000..90c5995
--- /dev/null
+++ b/src/assets/images/aiNowFly/ending.png
Binary files differ
diff --git a/src/assets/images/aiNowFly/fly.png b/src/assets/images/aiNowFly/fly.png
new file mode 100644
index 0000000..e354e46
--- /dev/null
+++ b/src/assets/images/aiNowFly/fly.png
Binary files differ
diff --git a/src/assets/images/aiNowFly/picture-recording.png b/src/assets/images/aiNowFly/picture-recording.png
new file mode 100644
index 0000000..1f4700f
--- /dev/null
+++ b/src/assets/images/aiNowFly/picture-recording.png
Binary files differ
diff --git a/src/assets/images/aiNowFly/starting.png b/src/assets/images/aiNowFly/starting.png
new file mode 100644
index 0000000..e8eaa93
--- /dev/null
+++ b/src/assets/images/aiNowFly/starting.png
Binary files differ
diff --git a/src/views/Home/AINowFly.vue b/src/views/Home/AINowFly.vue
index 6cbaf78..80ab045 100644
--- a/src/views/Home/AINowFly.vue
+++ b/src/views/Home/AINowFly.vue
@@ -1,33 +1,35 @@
 <template>
 	<div class="AINowFly">
-		<div>智引即飞</div>
+		<div class="title">指点飞行</div>
 		<el-form ref="ruleFormRef" :model="params" :rules="rules" label-width="auto" size="small" status-icon>
 			<el-form-item label="任务名称" prop="name">
 				<el-input v-model="params.name" />
 			</el-form-item>
 			<el-form-item label="关联算法" prop="ai_types">
-				<el-select v-model="params.ai_types" placeholder="请选择" multiple>
+				<el-select v-model="params.ai_types" placeholder="请选择" multiple collapse-tags collapse-tags-tooltip>
 					<el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
 				</el-select>
 			</el-form-item>
 			<el-form-item label="地址">
-				<el-input disabled type="text" v-model="di" />
+				<el-input disabled type="text" v-model="di" placeholder="地名&经纬度"/>
 			</el-form-item>
 			<!--			todo-->
 			<el-form-item label="事件">
-				<div>默认拍照</div>
+				<div class="event">
+					<img src="@/assets/images/aiNowFly/picture-recording.png" alt="">
+				</div>
 			</el-form-item>
 		</el-form>
 
-		<div>可用机巢列表</div>
-		<el-table :data="list" @selection-change="handleSelectionChange">
-			<el-table-column type="selection" width="55" />
-			<el-table-column type="index" label="序号" />
+		<div class="title-list">可飞行机巢列表:</div>
+		<el-table :data="list" height="120" @selection-change="handleSelectionChange">
+			<el-table-column type="selection" width="40" />
+			<!-- <el-table-column type="index" label="序号" /> -->
 			<el-table-column prop="nickname" label="机巢名称" />
-			<el-table-column prop="minute" label="预计飞行时长(分钟)" />
-			<el-table-column prop="exe_distance" label="预计飞行距离(m)" />
+			<el-table-column prop="minute" label="可飞行时间" />
+			<el-table-column prop="exe_distance" label="可飞行距离" />
 		</el-table>
-		<el-button type="primary" @click="nowFly">迅速起飞</el-button>
+		<div class="btn-submit" @click="nowFly"><img src="@/assets/images/aiNowFly/fly.png" alt=""></div>
 	</div>
 </template>
 <script setup>
@@ -37,6 +39,9 @@
 import { cartesian3Convert } from '@/utils/cesium/mapUtil'
 import { Cartesian3 } from 'cesium'
 import uavImg from '@/assets/images/home/useUavHome/uavImg.png'
+import endingImg from '@/assets/images/aiNowFly/ending.png'
+import endingHighImg from '@/assets/images/aiNowFly/ending-high.png'
+import startingImg from '@/assets/images/aiNowFly/starting.png'
 import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
 import lineImg from '@/assets/images/arrow-right-blue.png'
 import _ from 'lodash'
@@ -100,18 +105,35 @@
 		const start = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude))
 		const end = Cartesian3.fromDegrees(Number(longitude), Number(latitude))
 		const positionsList = [start, end]
+		// 计算中点位置
+    const midpoint = Cartesian3.midpoint(start, end, new Cartesian3())
+		// 计算线段方向
+		const direction = Cartesian3.subtract(end, start, new Cartesian3())
+		Cartesian3.normalize(direction, direction)
 		// 线
+		// 添加中点文字标签
+    viewer.entities.add({
+      id: `AINow-time-${index}`,
+      position: midpoint,
+      label: {
+        text: `预计${item.minute}分钟`,
+				font: 'bold 16px Source Han Sans CN',  // 加粗并增大字号
+  			fillColor: new Cesium.Color(27/255, 179/255, 255/255, 1.0), 
+				fillColor: Cesium.Color.WHITE,
+				style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+				verticalOrigin: Cesium.VerticalOrigin.CENTER,
+				horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+				eyeOffset: new Cesium.Cartesian3(0, 0, -10),
+				pixelOffset: new Cesium.Cartesian2(0, -10),
+				rotation: Math.atan2(direction.y, direction.x)
+      }
+    })
 		viewer.entities.add({
 			id: `AINow-line-${index}`,
 			polyline: {
 				width: 4,
 				positions: positionsList,
-				material: new ImageTrailMaterial({
-					color: { alpha: 1, blue: 1, green: 1, red: 1 },
-					speed: 20,
-					image: lineImg,
-					repeat: { x: Math.floor(40), y: 1 },
-				}),
+				material: new Cesium.Color(27/255, 179/255, 255/255, 1.0),
 				clampToGround: false,
 			},
 		})
@@ -119,20 +141,20 @@
 		viewer.entities.add({
 			id: `AINow-point-${index}`,
 			position: start,
-			label: {
-				text: item.nickname,
-				font: '12pt Source Han Sans CN',
-				fillColor: Cesium.Color.WHITE,
-				outlineColor: Cesium.Color.BLACK,
-				outlineWidth: 2,
-				style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-				verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-				pixelOffset: new Cesium.Cartesian2(0, -9),
-			},
+			// label: {
+			// 	text: item.nickname,
+			// 	font: '12pt Source Han Sans CN',
+			// 	fillColor: Cesium.Color.WHITE,
+			// 	outlineColor: Cesium.Color.BLACK,
+			// 	outlineWidth: 2,
+			// 	style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+			// 	verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+			// 	pixelOffset: new Cesium.Cartesian2(0, -9),
+			// },
 			billboard: {
-				image: new Cesium.ConstantProperty(uavImg),
-				width: 24,
-				height: 24,
+				image: new Cesium.ConstantProperty(index === 0 ? endingHighImg : endingImg),
+				width: 40,
+				height: 40,
 			},
 			properties: {
 				customData: {
@@ -157,12 +179,11 @@
 	viewer.entities.add({
 		position: earthPosition,
 		id: `AINow-event-0`,
-		point: {
-			pixelSize: 10,
-			color: Cesium.Color.RED,
-			outlineColor: Cesium.Color.WHITE,
-			outlineWidth: 2,
-		},
+		billboard: {
+			image: new Cesium.ConstantProperty(startingImg),
+			width: 40,
+			height: 40,
+		}
 	})
 	const { longitude, latitude } = cartesian3Convert(earthPosition, viewer)
 	eventPoint = { longitude, latitude }
@@ -179,11 +200,19 @@
 	})
 }
 
+let pagingParams = ref({
+  current: 1,
+  size: 10
+});
+
 // 获取飞机列表
 const getFJList = async () => {
-	params.value.dock_sns = []
-	const getListParams = { ...eventPoint, page: 1, limit: 9999, type: 1 }
-	const res = await getFlyingNestBy(getListParams)
+	let pageParams = ref({
+		...eventPoint,
+		type: 1,
+	});
+	params.value.dock_sns = [];
+	const res = await getFlyingNestBy(pageParams.value, pagingParams.value)
 	list.value = (res.data?.data || []).map(item => ({
 		...item,
 		minute: _.round(item.estimated_arrival_time / 60, 0),
@@ -217,12 +246,111 @@
 <style scoped lang="scss">
 .AINowFly {
 	position: absolute;
-	top: 200px;
-	right: 0;
-	width: 400px;
-	height: 700px;
-	background: white;
-	color: black;
-	font-size: 20px;
+	top: 263px;
+	right: 74px;
+	width: 320px;
+	height: 518.6px;
+	font-size: 14px;
+	color: #FFFFFF;
+	background: url('@/assets/images/aiNowFly/ai-fly-bg.png') no-repeat center / 100% 100%;
+	.title {
+		height: 50px;
+		line-height: 50px;
+		margin-left: 20px;
+		font-family: Segoe UI, Segoe UI;
+		font-weight: bold;
+		font-size: 20px;
+		letter-spacing: 2px;
+		background: linear-gradient(180deg, #FFFFFF 50%, #35D0FF 100%);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+	}
+	.el-form {
+		padding: 20px 16px 13px 11px;
+		:deep(.el-form-item__label) {
+			color: #FFFFFF;
+		}
+		:deep(.el-input__wrapper),
+    :deep(.el-select),
+    :deep(.el-select__wrapper) {
+      background-color: #021740;
+      box-shadow: 0 0 0 1px #026AD6;
+      
+      &.is-focus {
+        box-shadow: 0 0 0 1px #026AD6;
+      }
+    }
+    
+    :deep(.el-input__wrapper.is-disabled) {
+      background-color: #021740;
+      box-shadow: 0 0 0 1px #026AD6;
+    }
+		.event {
+			img {
+				width: 40px;
+				height: 34px;
+			}
+		}
+	}
+	.title-list {
+		padding: 0 0 14px 11px;
+	}
+	.el-table {
+		width: 300px;
+		height: 120px;
+		margin: 0 0 0 11px;
+		:deep(.el-table__header-wrapper) {
+			th {
+				font-size: 12px;
+				color: #D3E9FF;
+				background-color: #122348;
+				font-weight: normal;
+				border-bottom: none;
+			}
+		}
+		:deep(.el-table__empty-block) {
+			background-color: #0A1734;
+			
+			.el-table__empty-text {
+				color: #FFFFFF;
+			}
+		}
+		:deep(.el-table__body) {
+			background-color: #0A1734;
+			tr {
+				background-color: #0A1734 !important;
+				color: #FFFFFF;
+				
+				&:hover > td {
+					background-color: #0A1734 !important;
+				}
+			}
+		}
+		:deep(.el-scrollbar) {
+			background-color: #0A1734;
+		}
+	}
+	.btn-submit {
+		cursor: pointer;
+		margin-left: 88px;
+		margin-top: 12px;
+		img { width: 138px; height: 38px; }
+	}
+	:deep(.el-table__inner-wrapper) {
+    border: 1px dashed #2F497D;
+    
+    &::before {
+      display: none;
+    }
+  }
+  
+  :deep(.el-table__cell) {
+    border: none;
+  }
+  
+  :deep(.el-table__border) {
+    display: none;
+  }
 }
 </style>
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineStatus.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineStatus.vue
index 07e6569..00dd6b4 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineStatus.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineStatus.vue
@@ -137,8 +137,9 @@
 
 // 监听实时信息
 watch(store.state.home.wsMessage, (newValue) => {
-    if (newValue || newValue.mode_code === 14) return
-    if (Object.keys(newValue).length === 0) return
+    // if (newValue || newValue.mode_code === 14) return
+    // if (Object.keys(newValue).length === 0) return
+    console.log(newValue,'咋没数据呀');
     detailInfo.value.longitudee = newValue?.longitude.toFixed(6) || '--';
 		detailInfo.value.latitude = newValue?.latitude.toFixed(6) || '--';
     getLnglatAltitude(newValue?.longitude,newValue?.latitude).then((res) => {
diff --git a/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue b/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
index 9129de8..6d1b608 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/TaskTable.vue
@@ -56,7 +56,7 @@
   polygon: [],
 });
 let pagingParams = ref({
-  page: 1,
+  current: 1,
   size: 10
 });
 // 获取可用机巢列表数据
@@ -77,14 +77,14 @@
 
 // 页码改变
 const handleCurrentChange = (val) => {
-  pagingParams.value.page = val;
+  pagingParams.value.current = val;
   getNestList();
 };
 
 // 刷新数据
 const refreshData = () => {
   tableData.value = [];
-  pagingParams.value.page = 1;
+  pagingParams.value.current = 1;
   getNestList();
 };
 

--
Gitblit v1.9.3