From 31b7e874bac09e8a82c938c75e36452580dfddd6 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Wed, 26 Feb 2025 17:41:00 +0800
Subject: [PATCH] 统一换成Vant组件和修改列表点击事件范围
---
src/api/media.ts | 4
src/api/drone-control/payload.ts | 8 +-
src/views/components/use-payload-control.ts | 18 +++---
src/views/DronePilotDetails.vue | 17 +++--
src/utils/websocket/drone-ws-control.ts | 6 +-
src/api/http/request.ts | 14 ++--
src/views/components/ptzControl.vue | 32 ++++------
src/api/pilot-bridge.ts | 5 -
src/api/wayline.ts | 4
src/store/user.ts | 4
src/views/components/ptzControl-copy.vue | 2
src/views/DronePilotList.vue | 8 +-
src/views/components/controlConsole.vue | 27 ++------
13 files changed, 68 insertions(+), 81 deletions(-)
diff --git a/src/api/drone-control/payload.ts b/src/api/drone-control/payload.ts
index 2c84cd1..18823d8 100644
--- a/src/api/drone-control/payload.ts
+++ b/src/api/drone-control/payload.ts
@@ -8,7 +8,7 @@
* Copyright (c) 2024 by GuLiMmo, All Rights Reserved.
*/
import request from '@/api/http/request';
-import { ElMessage } from 'element-plus';
+import { showNotify } from 'vant';
const API_PREFIX = '/control/api/v1';
@@ -72,7 +72,7 @@
data: data,
});
if (code === 0) {
- ElMessage.success('万向节复位成功');
+ showNotify({ type: 'success', message: '万向节复位成功' })
}
}
@@ -83,8 +83,8 @@
data: data,
});
if (isZoom) {
- ElMessage.success('放大成功');
+ showNotify({ type: 'success', message: '放大成功' })
} else {
- ElMessage.success('缩小成功');
+ showNotify({ type: 'success', message: '缩小成功' })
}
}
diff --git a/src/api/http/request.ts b/src/api/http/request.ts
index 6488409..1bdf3a5 100644
--- a/src/api/http/request.ts
+++ b/src/api/http/request.ts
@@ -11,7 +11,7 @@
import router from '@/router';
import { serialize } from '@/utils/common'
import { getToken } from '@/utils/auth';
-import { ElMessage } from 'element-plus';
+import { showNotify } from 'vant';
import website from '@/config/website';
import { Base64 } from 'js-base64'
// import NProgress from 'nprogress';
@@ -126,7 +126,7 @@
return Promise.reject(new Error(message))
}
if (message === '缺失令牌,鉴权失败') {
- ElMessage.warning('登录信息已过期，请重新登录')
+ showNotify({ type: 'warning', message: '登录信息已过期，请重新登录' })
}
if (
![
@@ -138,7 +138,7 @@
'缺失令牌,鉴权失败',
].includes(message)
) {
- ElMessage.warning(message)
+ showNotify({ type: 'warning', message: message })
}
return Promise.reject(new Error(message))
}
@@ -162,16 +162,16 @@
description = err.response.data.result.message
}
if (!err.response || !err.response.status) {
- ElMessage.error('网络异常，请检查后端服务后重试')
+ showNotify({ type: 'danger', message: '网络异常，请检查后端服务后重试' })
return
}
if (err.response?.status !== 200) {
if (err.response.data?.msg) {
- ElMessage.error(err.response.data?.msg)
+ showNotify({ type: 'danger', message: err.response.data?.msg })
} else if (err.response.data?.error_description) {
- ElMessage.error(err.response.data?.error_description)
+ showNotify({ type: 'danger', message: err.response.data?.error_description })
} else {
- ElMessage.error(`错误码: ${err.response?.status}`)
+ showNotify({ type: 'danger', message: `错误码: ${err.response?.status}` })
}
}
if (err.response?.status == 401) {
diff --git a/src/api/media.ts b/src/api/media.ts
index 5280c89..5e90875 100644
--- a/src/api/media.ts
+++ b/src/api/media.ts
@@ -1,4 +1,4 @@
-import { ElMessage } from 'element-plus';
+import { showNotify } from 'vant';
import request, { IPage, IWorkspaceResponse } from '@/api/http/request'
const HTTP_PREFIX = '/media/api/v1'
@@ -33,7 +33,7 @@
reader.onload = function (e) {
const text = reader.result as string
const result = JSON.parse(text)
- ElMessage.error(result.message)
+ showNotify({ type: 'warning', message: result.message })
}
reader.readAsText(result.data, 'utf-8')
} else {
diff --git a/src/api/pilot-bridge.ts b/src/api/pilot-bridge.ts
index c1776ad..feaa014 100644
--- a/src/api/pilot-bridge.ts
+++ b/src/api/pilot-bridge.ts
@@ -1,4 +1,4 @@
-import { ElMessage } from 'element-plus';
+import { showNotify } from 'vant';
import { EComponentName, ELocalStorageKey, EPhotoType, ERouterName } from '../types'
import { CURRENT_CONFIG } from './http/config'
import { EVideoPublishType, LiveStreamStatus } from '@/types/live-stream'
@@ -68,8 +68,7 @@
function errorHint (response: JsResponse): boolean {
if (response.code !== 0) {
- ElMessage.error(response.message)
- console.error(response.message)
+ showNotify({ type: 'warning', message: response.message })
return false
}
return true
diff --git a/src/api/wayline.ts b/src/api/wayline.ts
index d33ae1f..f61052c 100644
--- a/src/api/wayline.ts
+++ b/src/api/wayline.ts
@@ -1,4 +1,4 @@
-import { ElMessage } from 'element-plus';
+import { showNotify } from 'vant';
import request, { IPage, IWorkspaceResponse, IListWorkspaceResponse } from '@/api/http/request'
import { TaskType, TaskStatus, OutOfControlAction } from '@/types/task'
import { WaylineType } from '@/types/wayline'
@@ -21,7 +21,7 @@
reader.onload = function (e) {
const text = reader.result as string
const result = JSON.parse(text)
- ElMessage.error(result.message)
+ showNotify({ type: 'warning', message: result.message })
}
reader.readAsText(result.data, 'utf-8')
} else {
diff --git a/src/store/user.ts b/src/store/user.ts
index fd32d00..8aa4cf8 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -22,7 +22,7 @@
import { setStore, getStore } from '@/utils/store'
import { validatenull } from '@/utils/validate'
import md5 from 'js-md5'
-import { ElMessage } from 'element-plus';
+import { showNotify } from 'vant';
import { setToken, setRefreshToken, removeToken, removeRefreshToken } from '@/utils/auth'
const user = {
@@ -59,7 +59,7 @@
.then((res) => {
const data = res.data
if (data.error_description) {
- ElMessage.error(data.error_description)
+ showNotify({ type: 'danger', message: data.error_description })
} else {
commit('SET_LOGIN_FLAG', true)
commit('SET_TOKEN', data.access_token)
diff --git a/src/utils/websocket/drone-ws-control.ts b/src/utils/websocket/drone-ws-control.ts
index 6dff57e..9ff7cef 100644
--- a/src/utils/websocket/drone-ws-control.ts
+++ b/src/utils/websocket/drone-ws-control.ts
@@ -1,4 +1,4 @@
-import { ElMessage } from 'element-plus';
+import { showNotify } from 'vant';
import { onBeforeUnmount, onMounted, ref } from 'vue'
import EventBus from '@/event-bus/'
import { EBizCode, EBizCodeMessage } from '@/types'
@@ -34,9 +34,9 @@
function handleProgress (key: string, message: string, error: number) {
if (error !== 0) {
- ElMessage.error(key)
+ showNotify({ type: 'danger', message: key })
} else {
- ElMessage.info(key)
+ showNotify({ type: 'danger', message: key })
}
}
diff --git a/src/views/DronePilotDetails.vue b/src/views/DronePilotDetails.vue
index 59bd095..bd1e781 100644
--- a/src/views/DronePilotDetails.vue
+++ b/src/views/DronePilotDetails.vue
@@ -7,11 +7,11 @@
/>
<div id="landscapeBox" class="landscape-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px'}">
<div id="videoModule" class="l-video" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">
- <video v-show="videoUrl" ref="videoPlayerBig" :style="{ width: screenWidthVideo + 'px', height: screenHeightVideo + 'px'}" controls autoplay muted playsinline style="text-align: left; object-fit: fill">
+ <video v-show="videoUrl && droneInfo.mode_code != 14" ref="videoPlayerBig" :style="{ width: screenWidthVideo + 'px', height: screenHeightVideo + 'px'}" controls autoplay muted playsinline style="text-align: left; object-fit: fill">
Your browser is too old which doesn't support HTML5 video.
</video>
- <el-empty v-show="videoUrl == ''" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>
- <div v-if="videoUrl" class="center-point"></div>
+ <el-empty v-show="videoUrl == ''&& droneInfo.mode_code == 14" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>
+ <div v-if="videoUrl && droneInfo.mode_code != 14" class="center-point"></div>
<div class="right-box">
<ptzControl :sn="sn" :osdVisible="sbInfo"/>
<controlConsole :sn="sn" :osdVisible="sbInfo" :cesiumViewe="globalViewer" />
@@ -286,6 +286,9 @@
}
}
+// 无人机相关信息
+const droneInfo = ref({})
+
// 监听ws
const messageHandler = async (payload: any) => {
// if (!payload) {
@@ -299,6 +302,8 @@
case EBizCode.DeviceOsd: {
store.commit('SET_DEVICE_INFO', payload.data)
store.commit('SET_WS_MESSAGE', payload)
+ // console.log('对对对', payload.data.host.mode_code)
+ droneInfo.value = payload.data.host
getviewDrone(payload)
break
}
@@ -308,9 +313,9 @@
}
case EBizCode.FlightTaskProgress: { // 获取进度
// 如果点击列表进入没有获取到航线文件，那么这里重新请求一次
- // if (!ssLinePath || !ssLinePath.value) {
- // getWrjSsLx()
- // }
+ if (!ssLinePath || !ssLinePath.value) {
+ getWrjSsLx()
+ }
break
}
}
diff --git a/src/views/DronePilotList.vue b/src/views/DronePilotList.vue
index ed47927..46b74a7 100644
--- a/src/views/DronePilotList.vue
+++ b/src/views/DronePilotList.vue
@@ -8,18 +8,18 @@
<div class="drone-pilot-list">
<template v-if="droneOrPilotTxt == 'drone'">
<div class="box-info" v-for="item in cardList" :key="item.sn">
- <div class="info-title">
+ <div class="info-title" @touchstart="infoClick(item)">
<div class="nike-name">{{ item.name }}</div>
- <div @touchstart="infoClick(item)" :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
+ <div :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
</div>
<div class="info-contain"></div>
</div>
</template>
<template v-if="droneOrPilotTxt == 'pilot'">
<div class="box-info" v-for="item in ykqList" :key="item.sn">
- <div class="info-title">
+ <div class="info-title" @touchstart="infoClick(item)">
<div class="nike-name">{{ item.name }}</div>
- <div @touchstart="infoClick(item)" :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
+ <div :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
</div>
<div class="info-contain"></div>
</div>
diff --git a/src/views/components/controlConsole.vue b/src/views/components/controlConsole.vue
index bed1403..461f7f9 100644
--- a/src/views/components/controlConsole.vue
+++ b/src/views/components/controlConsole.vue
@@ -15,25 +15,12 @@
<div class="bottom" @touchstart="handlePublish({ h: -HEIGHT })"><div class="xx">下降</div></div>
<div class="right" @touchstart="handlePublish({ w: W_SPEED })" ><div class="xy">右转</div></div>
</div>
- <el-dialog
- v-model="dialogVisible"
- title="提示"
- width="500">
- <span>确认是否接管?</span>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="dialogVisible = false">取消</el-button>
- <el-button type="primary" @click="sureJg">
- 确定
- </el-button>
- </div>
- </template>
- </el-dialog>
+ <van-dialog v-model:show="dialogVisible" title="确认是否接管?" show-cancel-button @confirm="sureJg"></van-dialog>
</div>
</template>
<script lang="ts" setup>
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { showNotify } from 'vant';
import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
import { useMyStore } from '@/store'
import {exitController,droneController,returnHomeCancel,returnHome} from '@/api/drone/drc'
@@ -86,7 +73,7 @@
// const clientId = computed(() => {
// return localStorage.getItem('clientId') //store.state.clientId
// });
-let clientId = ref(localStorage.getItem('clientId'))
+let clientId = ref(localStorage.getItem('client_id'))
// {"0":"待机","1":"起飞准备","2":"起飞准备完毕","3":"手动飞行","4":"自动起飞","5":"航线飞行","6":"全景拍照","7":"智能跟随","8":"ADS-B 躲避","9":"自动返航","10":"自动降落","11":"强制降落","12":"三桨叶降落","13":"升级中","14":"未连接","15":"APAS","16":"虚拟摇杆状态","17":"指令飞行","18":"空中 RTK 收敛模式","19":"机场选址中"}
watch(() => store.state.wsMessage, (newValue, oldValue) => {
@@ -142,7 +129,7 @@
const authenticationPwd = (value:any, str:String) => {
// 提示是否进行人工控制
if (!isShowKzBtn.value) {
- if (!hasPermission.value) { return ElMessage.warning('暂无无人机控制权限')}
+ if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' })}
dialogVisible.value = true
} else {
isShowKzBtn.value = false
@@ -176,12 +163,12 @@
const onControlsDroneSpeed = (value:Boolean) => {
if (value) {
if (droneSeepd.value >= 15) {
- return ElMessage.warning('无人机速度范围应处于0~15m/s之间')
+ return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
}
droneSeepd.value += 1
} else {
if (droneSeepd.value <= 0) {
- return ElMessage.warning('无人机速度范围应处于0~15m/s之间')
+ return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
}
droneSeepd.value -= 1
}
@@ -190,7 +177,7 @@
const mqttHooks = useMqtt(deviceTopicInfo)
// 字母按键
const handlePublish = (params:Object) => {
- // if (!hasPermission.value) { return ElMessage.warning('暂无无人机控制权限')}
+ if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' });}
const body = { method: DRC_METHOD.DRONE_CONTROL, data: params}
mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, {qos: 0})
}
diff --git a/src/views/components/ptzControl-copy.vue b/src/views/components/ptzControl-copy.vue
index 62b818d..b6d011b 100644
--- a/src/views/components/ptzControl-copy.vue
+++ b/src/views/components/ptzControl-copy.vue
@@ -45,7 +45,7 @@
</template>
<script lang="ts" setup>
-import { ElMessage } from 'element-plus'
+import { showNotify } from 'vant';
import { Refresh } from '@element-plus/icons-vue';
import { ControlSource, EModeCode } from '@/types/device'
import { CameraMode } from '@/types/live-stream'
diff --git a/src/views/components/ptzControl.vue b/src/views/components/ptzControl.vue
index 458f8c0..e8bead5 100644
--- a/src/views/components/ptzControl.vue
+++ b/src/views/components/ptzControl.vue
@@ -38,7 +38,7 @@
</template>
<script lang="ts" setup>
-import { ElMessage } from 'element-plus'
+import { showNotify } from 'vant';
import { Refresh } from '@element-plus/icons-vue';
import { ControlSource, EModeCode } from '@/types/device'
import { CameraMode } from '@/types/live-stream'
@@ -49,7 +49,6 @@
import { useDroneControlWsEvent } from '@/utils/websocket/drone-ws-control'
import cesiumOperation from '@/utils/cesium-tsa.js';
import { useMyStore } from '@/store'
-import { fa } from 'element-plus/es/locale';
const { loadLAYER } = cesiumOperation()
@@ -163,11 +162,11 @@
}
if (isActionComplete.value) {
- ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
+ showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
return
}
if (payloadSelectInfo.camera?.recording_state) {
- ElMessage.warning('当前摄像头正在录制视频，请先结束视频录制！！')
+ showNotify({ type: 'warning', message: '当前摄像头正在录制视频，请先结束视频录制' })
return
}
@@ -191,7 +190,7 @@
const curTaskCameraPhoto = (time:any) => {
isActionComplete.value = true
- ElMessage({
+ showNotify({
message: '请稍后，正在拍摄中。。。',
duration: 2000,
})
@@ -231,9 +230,9 @@
authPayload(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex).then(
(payloadRes:any) => {
if (payloadRes.code !== 0)
- return ElMessage.error('获得有效载荷控制失败，请稍后重试！！')
+ return showNotify({ type: 'danger', message: '获得有效载荷控制失败，请稍后重试！' })
payloadControlSource.value = ControlSource.A
- ElMessage.success('成功获得有效载荷控制')
+ showNotify({ type: 'success', message: '成功获得有效载荷控制' })
},
)
}
@@ -243,14 +242,12 @@
return
}
if (isActionComplete.value) {
- ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
+ showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
return
}
if (payloadSelectInfo.camera?.recording_state) {
- return ElMessage.warning(
- '当前摄像头正在录制视频，请勿重复点击！！',
- )
+ return showNotify({ type: 'warning', message: '当前摄像头正在录制视频，请勿重复点击！' })
}
if (payloadSelectInfo.camera?.camera_mode !== CameraMode.Video) {
@@ -273,7 +270,7 @@
const curStartCameraRecording = (time:any) => {
isActionComplete.value = true
- ElMessage({
+ showNotify({
message: '请稍后，正在开启视频录制。。。',
duration: 2000,
})
@@ -282,8 +279,8 @@
startCameraRecording(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex)
.then((res) => {
if (res.code !== 0)
- return ElMessage.warning('开始录制失败，请稍后重试！！')
- ElMessage.success('开始录制成功')
+ return showNotify({ type: 'warning', message: '开始录制失败，请稍后重试！' })
+ showNotify({ type: 'success', message: '开始录制成功！' })
// 开始录像
isCameraRecording.value = true
isActionComplete.value = false
@@ -299,15 +296,15 @@
return
}
if (isActionComplete.value) {
- ElMessage.warning('当前相机动作暂未完成，请勿点击！！')
+ showNotify({ type: 'warning', message: '当前相机动作暂未完成，请勿点击！' })
return
}
isActionComplete.value = true
stopCameraRecording(props.osdVisible.dockSn, payloadSelectInfo.payloadIndex)
.then((res) => {
if (res.code !== 0)
- return ElMessage.warning('停止录制失败，请稍后重试！！')
- ElMessage.success('停止录制成功')
+ return showNotify({ type: 'warning', message: '停止录制失败，请稍后重试！' })
+ showNotify({ type: 'success', message: '停止录制成功' })
// 停止录像
isCameraRecording.value = false
isActionComplete.value = false
@@ -330,7 +327,6 @@
if (zoom_factor.value <= 2) {
zoom_factor.value = 2
}
- console.log('9999', zoom_factor.value)
}
switchLivestream({
video_id: `${props.osdVisible.dockSn}/${payloadSelectInfo.payloadIndex}/normal-0`,
diff --git a/src/views/components/use-payload-control.ts b/src/views/components/use-payload-control.ts
index 89b222b..c23de71 100644
--- a/src/views/components/use-payload-control.ts
+++ b/src/views/components/use-payload-control.ts
@@ -1,4 +1,4 @@
-import { ElMessage } from 'element-plus';
+import { showNotify } from 'vant';
import {
postPayloadAuth,
postPayloadCommands,
@@ -14,7 +14,7 @@
function checkPayloadAuth(controlSource?: ControlSource) {
if (controlSource !== ControlSource.A) {
// Message.error('Get Payload Control first')
- ElMessage.error('请先获取负载控制');
+ showNotify({ type: 'danger', message: '请先获取负载控制' })
return false;
}
return true;
@@ -32,7 +32,7 @@
data: data,
});
if (code === 0) {
- ElMessage.success('万向节复位成功');
+ showNotify({ type: 'success', message: '万向节复位成功' })
}
}
@@ -44,7 +44,7 @@
if (code === 0) {
return true;
} else {
- ElMessage.warning('拍照或者录像失败，请重试！！');
+ showNotify({ type: 'warning', message: '拍照或者录像失败，请重试！' })
return false;
}
}
@@ -58,10 +58,10 @@
},
});
if (code === 0) {
- ElMessage.success('拍照成功');
+ showNotify({ type: 'success', message: '拍照成功' })
return true;
} else {
- ElMessage.warning('拍照失败，请重试！！');
+ showNotify({ type: 'warning', message: '拍照失败，请重试！' })
return false;
}
}
@@ -92,9 +92,9 @@
if (strZoom == '复原' || strZoom == '变焦复原') {
// ElMessage.success('切换成功');
} else if (isZoom) {
- ElMessage.success('放大成功');
+ showNotify({ type: 'success', message: '放大成功' })
} else {
- ElMessage.success('缩小成功');
+ showNotify({ type: 'success', message: '缩小成功' })
}
}
@@ -104,7 +104,7 @@
data: data,
});
if (code === 0) {
- ElMessage.success('缩放目标成功');
+ showNotify({ type: 'success', message: '缩放目标成功' })
}
}
--
Gitblit v1.9.3