From 7d9fb50b4e444ba3afec098ad031e93b4e9ee9ee Mon Sep 17 00:00:00 2001
From: GuLiMmo <2820890765@qq.com>
Date: Wed, 29 Nov 2023 10:20:26 +0800
Subject: [PATCH] 航线库修改/api打包后可修改
---
src/mqtt/config.ts | 14 +-
src/api/http/request.ts | 4
env/.env.dev | 9 +
public/apiConfig.js | 28 +++++
src/api/wayline.ts | 5
src/pages/page-web/projects/wayline.vue | 149 ++++++++++++++++++++++++++++-
src/components/MediaPanel.vue | 5
index.html | 7
src/websocket/util/config.ts | 4
package.json | 2
src/vite-env.d.ts | 6 +
src/store/index.ts | 12 +-
12 files changed, 215 insertions(+), 30 deletions(-)
diff --git a/env/.env.dev b/env/.env.dev
index 629bab3..86fcb0e 100644
--- a/env/.env.dev
+++ b/env/.env.dev
@@ -1,4 +1,9 @@
-VITE_API_URL = 'http://192.168.1.133:6789'
-VITE_WS_API_URL = 'ws://192.168.1.133:6789/api/v1/ws'
+# VITE_API_URL = 'http://192.168.1.133:6789'
+# VITE_WS_API_URL = 'ws://192.168.1.133:6789/api/v1/ws'
+# VITE_APP_ENVIRONMENT=DEV
+# VITE_BASE_API = '/drone-api'
+
+VITE_API_URL = 'http://171.34.76.171:8880/drone'
+VITE_WS_API_URL = 'ws://171.34.76.171:8882/ws'
VITE_APP_ENVIRONMENT=DEV
VITE_BASE_API = '/drone-api'
\ No newline at end of file
diff --git a/index.html b/index.html
index c9a93e0..0e433d2 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
<!--
* @Author: husq 931347610@qq.com
* @Date: 2023-08-22 09:55:39
- * @LastEditors: husq 931347610@qq.com
- * @LastEditTime: 2023-09-18 10:47:02
- * @FilePath: \Cloud-API-Demo-Web\index.html
+ * @LastEditors: GuLiMmo 2820890765@qq.com
+ * @LastEditTime: 2023-11-27 13:55:34
+ * @FilePath: /drone-web/index.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
@@ -16,6 +16,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>无人机操作系统</title>
<script src="./jessibuca/jessibuca.js"></script>
+ <script src="./apiConfig.js"></script>
</head>
<body>
<div id="demo-app"></div>
diff --git a/package.json b/package.json
index 377d342..95be0ea 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,9 @@
"lint": "eslint --fix"
},
"dependencies": {
- "@turf/turf": "^6.5.0",
"@amap/amap-jsapi-loader": "^1.0.1",
"@ant-design/icons-vue": "^6.0.1",
+ "@turf/turf": "^6.5.0",
"@vitejs/plugin-legacy": "^1.6.2",
"agora-rtc-sdk-ng": "^4.12.1",
"ant-design-vue": "^2.2.8",
diff --git a/public/apiConfig.js b/public/apiConfig.js
new file mode 100644
index 0000000..eea848d
--- /dev/null
+++ b/public/apiConfig.js
@@ -0,0 +1,28 @@
+
+/**
+ * @description: 可修改api，如果为空则是默认api
+ */
+const baseUrl = {
+ // 基础请求接口
+ apiBaseUrl: '',
+ // websocket请求接口
+ wsBaseUrl: '',
+ // MediaPanel请求接口
+ mediaPanelPrefix: ''
+}
+/**
+ * @description: 可修改mqtt配置，如果为空则是默认配置
+ */
+const mqttConfig = {
+ clientId: '',
+ username: '',
+ password: '',
+ host: '',
+ protocol: '',
+ port: ''
+}
+
+window.globalApiConfig = {
+ baseUrl,
+ mqttConfig
+}
diff --git a/src/api/http/request.ts b/src/api/http/request.ts
index 2c57cc5..b66b2a9 100644
--- a/src/api/http/request.ts
+++ b/src/api/http/request.ts
@@ -7,6 +7,8 @@
import { ELocalStorageKey, ERouterName, EUserType } from '/@/types/enums'
export * from './type'
+const { baseUrl: { apiBaseUrl } } = window.globalApiConfig
+
const REQUEST_ID = 'X-Request-Id'
function getAuthToken () {
return localStorage.getItem(ELocalStorageKey.Token)
@@ -16,7 +18,7 @@
headers: {
'Content-Type': 'application/json',
},
- baseURL: import.meta.env.VITE_BASE_API,
+ baseURL: apiBaseUrl || import.meta.env.VITE_BASE_API,
// timeout: 12000,
})
diff --git a/src/api/wayline.ts b/src/api/wayline.ts
index 0a4c80f..7d92683 100644
--- a/src/api/wayline.ts
+++ b/src/api/wayline.ts
@@ -221,9 +221,8 @@
distance?:number
}
-export const flyByArea = async function (sn:string,dockPoint:Point,jsonPath:any,radius:number,deviceSn:string,payloadIndex:string): Promise<IWorkspaceResponse<any>> {
+export const flyByArea = async function (sn:string, dockPoint:Point, jsonPath:any, radius:number, deviceSn:string, payloadIndex:string): Promise<IWorkspaceResponse<any>> {
const url = `${HTTP_PREFIX}/workspaces/${sn}/jobs/${deviceSn}/flyByArea`
- const result = await request.post(url,{dockPoint:dockPoint,jsonPath:jsonPath,radius:radius,payloadIndex:payloadIndex})
+ const result = await request.post(url, { dockPoint: dockPoint, jsonPath: jsonPath, radius: radius, payloadIndex: payloadIndex })
return result.data
}
-
diff --git a/src/components/MediaPanel.vue b/src/components/MediaPanel.vue
index f9e5d7d..e00294d 100644
--- a/src/components/MediaPanel.vue
+++ b/src/components/MediaPanel.vue
@@ -118,12 +118,15 @@
type Key = ColumnProps['key'];
+const { baseUrl: { mediaPanelPrefix } } = window.globalApiConfig
+
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
const loading = ref(false)
const showVideo = ref(false)
const videoPlayerId = ref('videoPlayerId')
// 文件前缀
-const prefix = 'https://dev.jxpskj.com:8026/cloud-bucket'
+// const prefix = 'https://dev.jxpskj.com:8026/cloud-bucket'
+const prefix = mediaPanelPrefix || 'https://dev.jxpskj.com:8026/cloud-bucket'
// 搜索栏配置项
const searchPanelOptions = reactive({
size: 'large',
diff --git a/src/mqtt/config.ts b/src/mqtt/config.ts
index 7f91a74..0ca8331 100644
--- a/src/mqtt/config.ts
+++ b/src/mqtt/config.ts
@@ -2,16 +2,18 @@
IClientOptions,
} from 'mqtt'
+const { mqttConfig: { clientId, username, password, host, protocol, port } } = window.globalApiConfig
+
export const OPTIONS: IClientOptions = {
clean: true, // true: 清除会话, false: 保留会话
connectTimeout: 10000, // mqtt 超时时间
resubscribe: true, // 断开重连后，再次订阅原订阅
reconnectPeriod: 10000, // 重连间隔时间： 5s
keepalive: 5, // 心跳间隔时间：1s
- clientId: 'DroneWeb',
- username: 'root',
- password: 'root',
- host: '182.106.212.58',
- protocol: 'ws',
- port: 35675,
+ clientId: clientId || 'DroneWeb',
+ username: username || 'root',
+ password: password || 'root',
+ host: host || '182.106.212.58',
+ protocol: protocol || 'ws',
+ port: port || 35675,
}
diff --git a/src/pages/page-web/projects/wayline.vue b/src/pages/page-web/projects/wayline.vue
index ce64863..8dad990 100644
--- a/src/pages/page-web/projects/wayline.vue
+++ b/src/pages/page-web/projects/wayline.vue
@@ -100,15 +100,19 @@
<span>返回上一页</span>
</div>
<li
- v-for="(position, index) in tragetPointArr"
+ v-for="(item, index) in tragetPointArr"
:key="index"
:class="{ selectedColor : index === selectedPoint }"
- @click="tragetPointClick(position, index)">
+ @click="tragetPointClick(item.position, index)">
<div class="graph">
<div class="left" :style="{borderTopColor: index === selectedPoint ? '#FF9900' : '#2D8CF0'}"></div>
<div class="right">{{ index + 1 }}</div>
</div>
- <div class="graph-right"></div>
+ <div class="graph-right">
+ <div v-for="(event, index) in item.eventList" :key="index" class="s-event-icon">
+ <img :src="event.icon" alt="icon" />
+ </div>
+ </div>
</li>
</ul>
</a-spin>
@@ -132,7 +136,14 @@
import { getRoot } from '/@/root'
import * as Cesium from 'cesium'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
-import { stat } from 'fs'
+import axios from 'axios'
+import JSZIP from 'jszip'
+// 初始化jszip
+const JsZip = new JSZIP()
+
+const getResource = (name: string) => {
+ return new URL(`/src/assets/icons/${name}`, import.meta.url).href
+}
const projectWayLine = ref<HTMLDivElement>()
@@ -164,8 +175,69 @@
const { removeById, addClickEvent, getEntityById } = cesiumOperation()
const isPointListOpen = ref<boolean>(false)
-const tragetPointArr = ref<Cesium.Cartesian3[]>([])
+const tragetPointArr = ref<{
+ position: Cesium.Cartesian3,
+ eventList: string[]
+}[]>([])
const selectedPoint = ref<number | null>(null)
+
+// 对应事件
+const eventList: any = reactive<{
+ key: string,
+ name: string,
+ icon?: string
+}[]>([
+ {
+ key: 'takePhoto',
+ name: '单拍',
+ icon: getResource('waylinetool/camera.png'),
+ },
+ {
+ key: 'startRecord',
+ name: '开始录像',
+ icon: getResource('waylinetool/camera-on.png'),
+ },
+ {
+ key: 'stopRecord',
+ name: '结束录像',
+ icon: getResource('waylinetool/camera-off.png'),
+ },
+ {
+ key: 'focus',
+ name: '对焦'
+ },
+ {
+ key: 'zoom',
+ name: '变焦',
+ icon: getResource('waylinetool/fd.png'),
+ },
+ {
+ key: 'customDirName',
+ name: '创建新文件夹',
+ icon: getResource('waylinetool/create-file.png'),
+ },
+ {
+ key: 'gimbalRotate',
+ name: '旋转云台'
+ },
+ {
+ key: 'rotateYaw',
+ name: '飞行器偏航'
+ },
+ {
+ key: 'hover',
+ name: '悬停等待',
+ icon: getResource('waylinetool/xt.png'),
+ },
+ {
+ key: 'gimbalEvenlyRotate',
+ name: '航段间均匀转动云台pitch角'
+ },
+ {
+ key: 'orientedShoot',
+ name: '精准复拍动作'
+ }
+])
onMounted(() => {
const parent = document.getElementsByClassName('scrollbar').item(0)?.parentNode as HTMLDivElement
@@ -253,6 +325,7 @@
getWayLineFile(workspaceId.value, wayline.id).then(res => {
store.commit('SET_SELECT_WAYLINE_INFO', wayline)
initKmlFile(res.data)
+ store.commit('SET_WAYLINE_KMZPATH', res.data)
}).finally(() => {
loading.value = false
})
@@ -302,9 +375,13 @@
outlineColor: Cesium.Color.BLACK,
})
cartesianArr.push(entity.position._value)
+ tragetPointArr.value[i] = {
+ position: entity.position._value,
+ eventList: []
+ }
}
- tragetPointArr.value = cartesianArr
- const stripe = createStripe()
+ // tragetPointArr.value = cartesianArr
+ // const stripe = createStripe()
const lineEntity = global.$viewer.entities.add({
name: 'entityLine',
id: 'kmzLine',
@@ -319,9 +396,13 @@
global.$viewer.flyTo(lineEntity, {
offset: new Cesium.HeadingPitchRange(0, -90, 8000)
})
+
+ // 解析kmz文件
+ readKmzFile(file)
})
}
+// 点击目标点
function tragetPointClick (position: Cesium.Cartesian3, index: number) {
selectedPoint.value = index
store.commit('SET_WAYLINE_INFO', {
@@ -448,6 +529,47 @@
return stripe
}
+/**
+ * @description: 获取kmz文件中的内容
+ * @param {*} kmzPath kmz文件地址
+ * @return {*} void
+ */
+const readKmzFile = (kmzPath: string) => {
+ // 使用axios读取文件
+ return axios.get(kmzPath, { responseType: 'arraybuffer' })
+ .then(fileRes => fileRes.data)
+ .then(kmzData => JsZip.loadAsync(kmzData)) // 解压kmz文件
+ .then(kmzZip => {
+ // 通过文件名找到 KML 文件
+ const kmlFile = kmzZip.file(/\.kml$/i)[0]
+ return kmlFile.async('text')
+ }).then(kml => {
+ // 查找航点标签reg
+ const regx = /<Placemark>([\s\S]*?)<\/Placemark>/g
+ // 查找事件组reg
+ const actionGroupReg = /<wpml:actionGroup>([\s\S]*?)<\/wpml:actionGroup>/g
+ // 查找单个事件reg
+ const actionRegx = /<wpml:action>([\s\S]*?)<\/wpml:action>/g
+ // 当前kmz文件航点
+ const kmlPoints = kml.match(regx)
+ kmlPoints?.forEach((point: string, index: number) => {
+ // 当前点的事件组
+ const ponitAction = point.match(actionGroupReg)
+ const eventArr: string[] = []
+ if (ponitAction) {
+ // 当前事件
+ const actions = ponitAction[0].match(actionRegx)
+ actions?.forEach(action => {
+ eventList.forEach((item: any) => {
+ action.includes(item.key) && eventArr.push(item)
+ })
+ })
+ tragetPointArr.value[index].eventList = eventArr
+ }
+ })
+ })
+}
+
const openEditModal = (wayline: any) => {
currentWayLine.value = wayline
editVisible.value = true
@@ -525,7 +647,20 @@
}
.graph-right {
width: calc(100% - 40px);
+ height: 30px;
border-bottom: 1px solid #4f4f4f;
+ display: flex;
+ align-items: center;
+ .s-event-icon {
+ width: 25px;
+ height: 25px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ img {
+ width: 70%;
+ }
+ }
}
&:hover {
background-color: #3C3C3C;
diff --git a/src/store/index.ts b/src/store/index.ts
index 50fbb76..0eb84ff 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -99,7 +99,8 @@
clientId: '', // mqtt 连接 唯一客户端id,
waylineTool: {
isShow: false as boolean,
- wayline: {} as any
+ wayline: {} as any,
+ kmzPath: '' as string
}
})
@@ -210,10 +211,11 @@
},
// 设置wayline中的信息
SET_WAYLINE_INFO (state, { isShow, wayline }) {
- state.waylineTool = {
- isShow,
- wayline
- }
+ state.waylineTool.isShow = isShow
+ state.waylineTool.wayline = wayline
+ },
+ SET_WAYLINE_KMZPATH (state, kmzPath) {
+ state.waylineTool.kmzPath = kmzPath
}
}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..62c0f45 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,7 @@
/// <reference types="vite/client" />
+export {}
+declare global {
+ interface Window {
+ globalApiConfig: any
+ }
+}
diff --git a/src/websocket/util/config.ts b/src/websocket/util/config.ts
index a8ab912..12fa799 100644
--- a/src/websocket/util/config.ts
+++ b/src/websocket/util/config.ts
@@ -1,11 +1,13 @@
import { ELocalStorageKey } from '/@/types/enums'
import { CURRENT_CONFIG } from '/@/api/http/config'
+const { baseUrl: { wsBaseUrl } } = window.globalApiConfig
+
const user = localStorage.getItem('user_info')
export function getWebsocketUrl () {
const token: string = localStorage.getItem(ELocalStorageKey.Token) || '' as string
// const url = CURRENT_CONFIG.websocketURL
- const url = import.meta.env.VITE_WS_API_URL + '?x-auth-token=' + encodeURI(token)
+ const url = (wsBaseUrl || import.meta.env.VITE_WS_API_URL) + '?x-auth-token=' + encodeURI(token)
return url
}
--
Gitblit v1.9.3