Skip to content

M
mmc-stl-vue2
提交 677b1f49 作者: 温凯
操作

fix:摇杆控制更改

上级 fdf72e82
正在显示 包含 133 行增加 和 73 行删除
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlBottom/index.vue
......@@ -21,7 +21,7 @@
<img src="./assets/images/auto.svg" />
<span class="dib">自动</span>
</div>
<div v-else-if="controlType === 1" class="control-bottom-item" @click="onModeKeyboard">
<div v-else-if="controlType === 1" :class="manualControlStatus? 'active control-bottom-item':'control-bottom-item'" @click="onModeKeyboard">
<img src="./assets/images/manual.svg" />
<span class="dib">摇杆</span>
</div>
......@@ -68,11 +68,33 @@ export default {
},
data() {
return {
// 摇杆手动控制状态
manualControlStatus:false,
controlType: 0, //控制类型, 0: 自动 1: 摇杆 2: 键盘
};
},
watch: {
// 状态改变时摇杆会切换为手动模式
"onModeManualState":{
handler(val) {
if(val){
this.onModeManual()
}
}
},
"manualControlStatus": {
handler(val) {
this.$store.commit("MMCFlightControlCenter/joystick/setState", {
key: "manualControlStatus",
value: val,
});
},
},
immediate: true,
},
computed: {
...mapState("MMCFlightControlCenter/uav", ["uav", "airlineData"]),
...mapState("MMCFlightControlCenter/joystick", ["onModeManualState"]),
},
methods: {
/**
......@@ -245,6 +267,9 @@ export default {
transform: scale(1.1);
}
}
.active{
background-color: #0cc81f;
}
}
.key-control {
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/components/controlList/index.vue
......@@ -2,7 +2,10 @@
<div>
<div class="nset_control_box dialog1027" v-if="show">
<div class="dialog-header">
<img class="dialog-header__icon" src="../../assets/images/mount_head.png" />
<img
class="dialog-header__icon"
src="../../assets/images/mount_head.png"
/>
<div class="dialog-header__title">操作区域</div>
<div class="dialog-header__close" @click="$emit('exit')">关闭</div>
</div>
......@@ -32,11 +35,19 @@
<SymbolIcon icon="yunhangrizhi2" />
<span class="txt">运行日志</span>
</div>
<div class="item" @click="guideFlight" v-if="uav && uav.network === 2">
<div
class="item"
@click="guideFlight"
v-if="uav && uav.network === 2"
>
<SymbolIcon icon="tiaozhuandaozuobiao" />
<span class="txt">指点飞行</span>
</div>
<div class="item" @click="onInfieldControl" v-if="uav && uav.network === 2">
<div
class="item"
@click="onInfieldControl"
v-if="uav && uav.network === 2"
>
<img class="dib mt3" src="./assets/images/1.svg" alt />
<span class="txt">内场控制</span>
</div>
......@@ -52,7 +63,9 @@
>
<div class="endrenwu">
<div class="tishiyu">紧急迫降</div>
<div class="queding">无人机即将原地降落，请确认无人机下方是否安全！</div>
<div class="queding">
无人机即将原地降落，请确认无人机下方是否安全！
</div>
<div class="btn_kuang">
<div class="btn btn_lan" @click="safetyNotice = false">取消</div>
<div style="width: 20px"></div>
......@@ -66,15 +79,19 @@
:visible.sync="showInfieldControlDialog"
width="30%"
:append-to-body="true"
custom-class="mmc"
style="margin-top: 20vh"
>
<div class="endrenwu">
<div class="tishiyu">温馨提示</div>
<div class="queding" v-if="!isAcceleratorMedian">
当前油门值为
<span style="color:red">{{uavRealTimeData.rcChannelState.toFixed(2)||0}}</span>,请调到中位(470-530)
<span style="color: red">{{ throttleValue.toFixed(2) || 0 }}</span
>,请调到中位(470-530)
</div>
<div class="queding" v-if="isAcceleratorMedian">
摇杆已处于中位，即将切换内场权限
</div>
<div class="queding" v-if="isAcceleratorMedian">摇杆已处于中位，即将切换内场权限</div>
</div>
</el-dialog>
<el-dialog
......@@ -92,8 +109,11 @@
<div class="queding">位置获取成功，请确认是否进行指点模式飞行</div>
<div class="fleSpeed">
指点飞行速度：
<el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="flySpeed"></el-input>
<span style="opacity: 0;">1</span>(米/秒)
<el-input
oninput="value=value.replace(/[^0-9.]/g,'')"
v-model="flySpeed"
></el-input>
<span style="opacity: 0">1</span>(米/秒)
</div>
<div class="red" v-if="maxSpeed">指点飞行最大速度为8米/秒</div>
<div class="btn_kuang">
......@@ -161,9 +181,16 @@ export default {
"uavRealTimeData",
]),
...mapState("MMCFlightControlCenter", ["userInfo", "cesiumViewer"]),
...mapState("MMCFlightControlCenter/joystick", [
"throttleValue",
"manualControlStatus",
]),
},
watch: {
"uavRealTimeData.rcChannelState"(val) {
throttleValue(val) {
if (val == -1) {
this.showInfieldControlDialog = true;
}
// 判断是否为外场权限
if (this.uavRealTimeData.rcState == 0) {
// 判断油门是否处于中位
......@@ -180,7 +207,14 @@ export default {
);
setTimeout(() => {
if (this.uavRealTimeData.rcState == 1) {
// 摇杆切换为手动模式
if (!this.manualControlStatus) {
this.$message.success("已切换内场权限，摇杆即将切换为手动模式！");
this.changeModeManualState();
}else{
this.$message.success("已切换内场权限，请使用摇杆控制！");
}
this.showInfieldControlDialog = false;
} else {
// this.$message.error("摇杆权限切换失败");
......@@ -208,13 +242,13 @@ export default {
"routeControl",
"isTakeOver",
]),
isTakeOverHangar(){
isTakeOverHangar() {
return this.$store.dispatch("MMCFlightControlCenter/hangar/isTakeOver");
},
async isTake() {
// 判断是否已接管
let isTakeOver = this.isTakeOver;
if(this.isHangar){
if (this.isHangar) {
isTakeOver = this.isTakeOverHangar;
}
if (!(await isTakeOver())) {
......@@ -229,7 +263,7 @@ export default {
async onSwitchAirline() {
// 判断是否已接管
let isTakeOver = this.isTakeOver;
if(this.isHangar){
if (this.isHangar) {
isTakeOver = this.isTakeOverHangar;
}
if (!(await isTakeOver())) {
......@@ -279,6 +313,12 @@ export default {
this.safetyNotice = false;
this.land();
},
changeModeManualState() {
this.$store.commit("MMCFlightControlCenter/joystick/setState", {
key: "onModeManualState",
value: new Date().getTime(),
});
},
/**
* 内场控制
*/
......@@ -293,7 +333,14 @@ export default {
if (this.uavRealTimeData.rcState == 1) {
this.$message.success("当前处于内场模式，请使用摇杆控制！");
} else {
this.showInfieldControlDialog = true;
// 如果摇杆是手动模式，则展示油门弹窗
if (this.manualControlStatus) {
this.showInfieldControlDialog = true;
} else {
this.$message.success("摇杆即将切换为手动模式,请稍等！");
// onModeKeyboard
this.changeModeManualState();
}
}
},
/**
......@@ -325,15 +372,15 @@ export default {
* 指点飞行
*/
async guideFlight() {
// 判断是否已接管
if (!(await this.isTake())) {
return;
}
if (this.uav.online === 0)
return this.$message.warning("处于离线状态，不可操作！");
if (!this.guideFlightDone) {
return this.$message.warning("指点飞行操作中！");
}
// // 判断是否已接管
// if (!(await this.isTake())) {
// return;
// }
// if (this.uav.online === 0)
// return this.$message.warning("处于离线状态，不可操作！");
// if (!this.guideFlightDone) {
// return this.$message.warning("指点飞行操作中！");
// }
let viewer = this.cesiumViewer;
// 指点飞行 wgs84
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/components/mount/index.vue
......@@ -2,10 +2,15 @@
<div class="mountBox">
<div class="main" v-if="show">
<div v-if="mountList.length > 0" class="list">
<div class="mount-item pr mt6" :class="{
active:
(selectMount && selectMount.gimbalName) === item.gimbalName,
}" v-for="(item, index) in mountList" :key="index">
<div
class="mount-item pr mt6"
:class="{
active:
(selectMount && selectMount.gimbalName) === item.gimbalName,
}"
v-for="(item, index) in mountList"
:key="index"
>
<div class="icon-box" @click="onSelectMount(item)">
<img class :src="item.icon" />
</div>
......@@ -13,15 +18,23 @@
</div>
</div>
<template v-if="selectMount">
<component :is="selectMount.gimbalName" v-if="selectMount" class="mount-panel" :keyFlag="nxNormal"
:payload_data="selectMountPayload" @directive="mountDirective" @take_photo="mountTakePhoto"
@record="mountRecord" @close="mountClose" />
<component
:is="selectMount.gimbalName"
v-if="selectMount"
class="mount-panel"
:keyFlag="nxNormal"
:payload_data="selectMountPayload"
@directive="mountDirective"
@take_photo="mountTakePhoto"
@record="mountRecord"
@close="mountClose"
/>
</template>
</div>
</template>
<script>
// import API from "@/api";
import { mapState, mapGetters, mapActions } from "vuex";
import { mapState, mapGetters } from "vuex";
import mount from "../../../../../../../../../MMCMount";
// 所有的挂载组件
const mountComponents = {};
......@@ -35,11 +48,6 @@ export default {
...mountComponents,
},
props: {
// 是否机库页面使用
isHangar: {
type: Boolean,
default: false,
},
show: {
type: Boolean,
default: false,
......@@ -52,10 +60,6 @@ export default {
type: Boolean,
default: () => false,
},
isHangar: {
type: Boolean,
default: false,
},
},
data() {
return {};
......@@ -71,36 +75,18 @@ export default {
]),
...mapGetters("MMCFlightControlCenter/uav", ["selectMountPayload"]),
nxNormal() {
return this.uavRealTimeData?.healthData?.NX?.code === "0x2110000";
return this.uavRealTimeData?.healthData?.NX?.warningLevel === "NORMAL";
},
},
created() { },
mounted() { },
beforeDestroy() { },
created() {},
mounted() {},
beforeDestroy() {},
methods: {
...mapActions("MMCFlightControlCenter/uav", ["isTakeOver"]),
isTakeOverHangar() {
return this.$store.dispatch("MMCFlightControlCenter/hangar/isTakeOver");
},
async isTake() {
// 判断是否已接管
let isTakeOver = this.isTakeOver;
if (this.isHangar) {
isTakeOver = this.isTakeOverHangar;
}
if (!(await isTakeOver())) {
this.$message.warning("请先接管设备");
return false;
}
return true;
},
async onSelectMount(item) {
if (await this.isTake()) {
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "selectMount",
value: item,
});
}
onSelectMount(item) {
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "selectMount",
value: item,
});
},
/**
* 挂载指令事件
......
src/components/MMCFlightControlCenter/mixins/joystick.js
......@@ -32,7 +32,7 @@ export default {
type: 513,
data: val,
},
callback() {},
callback() { },
});
},
},
......@@ -50,7 +50,7 @@ export default {
let topic = `${uavCate}/OBTAIN/${this.uav.deviceId}`;
this.wsJoystick = new WebSocket("ws://127.0.0.1:8802");
this.wsJoystick.onopen = () => {
console.log("joystick.js 连接上 ws://127.0.0.1:8802");
console.log("joystick.js 连接上 ws://127.0.0.1:8802 1112222");
this.wsJoystick.send(
JSON.stringify({
type: 2003,
......@@ -72,9 +72,8 @@ export default {
if (obj.type == 518) {
}
let data = JSON.parse(event.currentTarget.result).data;
window.$log("joystick.js message", data);
let y = data.channel03; //油门值 0-1000
this.keyboardFlag = true
// console.log(data.channel03,data,"yyyyyyyy");
if (y || y == 0) {
this.$store.commit("MMCFlightControlCenter/joystick/setState", {
......@@ -180,6 +179,7 @@ export default {
return;
}
this.cameraMountCtr("stop", this.lastMountCtrl);
this.keyboardFlag = false
setTimeout(() => {
this.wsJoystick.send(JSON.stringify({ type: 2010, data: {} }));
this.wsJoystick && this.wsJoystick.close();
......@@ -248,7 +248,7 @@ export default {
payload: buffer,
},
},
callback() {},
callback() { },
});
},
},
......
src/components/MMCFlightControlCenter/store/joystick.js
const state = {
throttleValue: 0, //油门值
manualControlStatus: false, //是否手动控制
onModeManualState:null, //状态改变时摇杆会切换为手动模式
};
const mutations = {
......@@ -25,7 +27,7 @@ const getters = {
* @param {*} state
* @returns
*/
isThrottleCenter(state){
isThrottleCenter(state) {
if (state.throttleValue >= 470 && state.throttleValue <= 530) {
return true;
} else {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论