Skip to content

M
mmc-stl-vue2
提交 cb500af0 作者: 翁进城
操作

fix: 

1. 切换遥杆和自动时，模式切换失败
2. 键盘控制
3. 机库顶部实时信息展示
上级 78a7e4a6
正在显示 包含 523 行增加 和 170 行删除
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/index.vue
......@@ -4,12 +4,15 @@
<ControlLeft></ControlLeft>
<ControlBottom isHangar></ControlBottom>
<ControlRight></ControlRight>
<!-- 顶部信息 -->
<ControlTop></ControlTop>
</div>
</template>
<script>
import ControlLeft from "./components/controlLeft";
import ControlBottom from "../../../uavApplications/components/controlPanel/components/controlBottom";
import ControlTop from "../../../uavApplications/components/controlPanel/components/controlTop";
import ControlRight from "./components/controlRight";
import { mapState } from "vuex";
......@@ -19,6 +22,7 @@ export default {
ControlLeft,
ControlBottom,
ControlRight,
ControlTop
},
computed: {
...mapState("MMCFlightControlCenter/uav", ["uavRealTimeData", "uav"]),
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlBottom/components/keyControl/index.vue 0 → 100644
<template>
<div class="keyControl" :class="{'w423':activeMount}">
<div class="head">
<div class="tl title">机身控制</div>
<div class="tl title" v-if="activeMount" :title="activeMount.gimbalName">挂载控制</div>
<div class="tr f12 cp" @click="$emit('close')">关闭</div>
</div>
<div class="content">
<div>
<div>
<div
:class="{ active: keycode == 'q' }"
title="机身左转"
@mousedown="clickControl({ key: 'q' })"
@mouseup="cancelControl()"
>
<img src="./img/share.png" alt />
Q
</div>
<div
:class="{ active: keycode == 'w' }"
title="前进"
@mousedown="clickControl({ key: 'w' })"
@mouseup="cancelControl()"
>
<img src="./img/share2.png" alt />
W
</div>
<div
:class="{ active: keycode == 'e' }"
title="机身右转"
@mousedown="clickControl({ key: 'e' })"
@mouseup="cancelControl()"
>
<img src="./img/share3.png" alt />
E
</div>
<div
class="ml12"
:class="{ active: keycode == 'c' }"
title="上升"
@mousedown="clickControl({ key: 'c' })"
@mouseup="cancelControl()"
>
<img src="./img/share7.png" alt />
C
</div>
</div>
<div class="mt16">
<div
:class="{ active: keycode == 'a' }"
title="左飞"
@mousedown="clickControl({ key: 'a' })"
@mouseup="cancelControl()"
>
A
<img src="./img/share4.png" alt />
</div>
<div
:class="{ active: keycode == 's' }"
title="后退"
@mousedown="clickControl({ key: 's' })"
@mouseup="cancelControl()"
>
S
<img src="./img/share5.png" alt />
</div>
<div
:class="{ active: keycode == 'd' }"
title="右飞"
@mousedown="clickControl({ key: 'd' })"
@mouseup="cancelControl()"
>
D
<img src="./img/share6.png" alt />
</div>
<div
class="ml12"
:class="{ active: keycode == 'z' }"
title="下降"
@mousedown="clickControl({ key: 'z' })"
@mouseup="cancelControl()"
>
Z
<img src="./img/share8.png" alt />
</div>
</div>
</div>
<!-- <div class="ml12">
<div>
<div :class="{active: keycode == 'j'}" title="急停" @click="clickControl({key:'j'})">J</div>
</div>
</div>-->
<div v-show="activeMount" class="line ml12"></div>
<div v-show="activeMount" class="ml12">
<div class="c_t">
<div :class="{active: keycode == 'r'}" title="回中" @click="clickControl({key:'r'})">R</div>
<!-- MMC_Gimbal_ZT60R支持 MMC_Gimbal_ZT60支持 -->
<div
v-if="isShow"
:class="{active: keycode == 'g'}"
title="垂直向下"
@click="clickControl({key:'g'})"
>G</div>
</div>
</div>
<div v-show="activeMount" class="ml12">
<div>
<div
:class="{active: keycode == 'ArrowUp'}"
title="镜头向上"
@mousedown="clickControl({key:'ArrowUp'})"
@mouseup="cancelControl"
>
<img src="./img/向上.png" alt />
</div>
</div>
<div>
<div
:class="{active: keycode == 'ArrowLeft'}"
title="镜头向左"
@mousedown="clickControl({key:'ArrowLeft'})"
@mouseup="cancelControl"
>
<img src="./img/向左.png" alt />
</div>
<div
:class="{active: keycode == 'ArrowDown'}"
title="镜头向下"
@mousedown="clickControl({key:'ArrowDown'})"
@mouseup="cancelControl"
>
<img src="./img/向下.png" alt />
</div>
<div
:class="{active: keycode == 'ArrowRight'}"
title="镜头向右"
@mousedown="clickControl({key:'ArrowRight'})"
@mouseup="cancelControl"
>
<img src="./img/向右.png" alt />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as mountCtrlList from "../../../../../../../mount/utils.js";
import { mapState } from "vuex";
export default {
data() {
return {
mountCtrlList,
keycode: "",
isShow: false,
// 当前操作挂载
activeMount: null,
// 已适配高清变焦相机挂载
mount: [
"MMC_Gimbal_ZT60R",
"MMC_Gimbal_Z60R",
"MMC_Gimbal_ZT30N",
"MMC_Gimbal_Z30Pro",
"MMC_Gimbal_Z40",
"MMC_Gimbal_Z40N",
"MMC_Gimbal_Z40S",
"DJI_H20T",
"MMC_Gimbal_ZT1",
"MMC_Gimbal_Z33N",
"MMC_Gimbal_Z20",
"MMC_Gimbal_P20",
"MMC_Gimbal_P30",
],
speed: 100, //键盘响应速度控制
enable: true, //键盘是否可用
timeHandle: null, //定时器
};
},
computed: {
...mapState("MMCFlightControlCenter/uav", ["mountList", "selectMount"]),
},
mounted() {
this.keyControl();
let activeMount = this.mountList.filter((item) =>
this.mount.includes(item.gimbalName)
);
if (activeMount) {
this.activeMount = activeMount[0];
if (this.activeMount) {
if (
this.activeMount.gimbalName == "MMC_Gimbal_ZT60R" ||
this.activeMount.gimbalName == "MMC_Gimbal_Z60R"
) {
this.isShow = true;
} else {
this.isShow = false;
}
}
}
this.timeHandle = setInterval(() => {
this.enable = true;
}, this.speed);
},
beforeDestroy() {
clearInterval(this.timeHandle);
},
methods: {
keyControl() {
let data = null;
let num = 0;
document.addEventListener("keydown", (event) => {
this.clickControl(event);
});
document.addEventListener("keyup", (event) => {
this.stopGimbal();
});
},
controlMount() {
if (this.activeMount) {
let mount = this.mountCtrlList[this.activeMount.gimbalName];
let buffer = null;
// 垂直向下
if (event.key == "g" || event.keyCode == 71) {
buffer = mount.change_control_mode(2);
} else if (event.key == "r" || event.keyCode == 82) {
// 回中
buffer = mount.gimbal_mode_ctrl(2);
} else if (event.key == "" || event.keyCode == 32) {
} else if (event.key == "-" || event.keyCode == 109) {
// let nums = localStorage.getItem(this.device.deviceList[0].deviceHardId) || 5
if (nums >= 2) {
// this.$refs.mountRef.handle_zoom_reduce()
// this.$refs.mountRef.stopChange()
}
} else if (event.key == "+" || event.keyCode == 107) {
// let nums = localStorage.getItem(this.device.deviceList[0].deviceHardId) || 5
// if(nums <= 200){
// this.$refs.mountRef.handle_zoom_plus()
// this.$refs.mountRef.stopChange()
// }
} else if (event.keyCode === 37 || event.key === "ArrowLeft") {
// 适配 MMC_Gimbal_ZT60R
buffer = mount.gimbal_yaw_ctrl(-1);
} else if (event.keyCode === 38 || event.key === "ArrowUp") {
buffer = mount.gimbal_pitch_ctrl(1);
} else if (event.keyCode === 39 || event.key === "ArrowRight") {
buffer = mount.gimbal_yaw_ctrl(1);
} else if (event.keyCode === 40 || event.key === "ArrowDown") {
buffer = mount.gimbal_pitch_ctrl(-1);
}
if (buffer) {
this.$store.dispatch("MMCFlightControlCenter/uav/mountControl", {
mountId: this.activeMount.mountId,
payload: buffer,
callback: (isOk) => {
isOk && console.log("发出控制挂载指令", buffer);
},
});
}
}
},
clickControl(event) {
console.log(event.key);
let data = null;
//return
if (this.enable) {
this.enable = false;
if (event.key == "q" || event.keyCode == 81) {
data = {
leftTurn: 10,
};
} else if (event.key == "w" || event.keyCode == 87) {
data = {
front: 100,
};
} else if (event.key == "e" || event.keyCode == 69) {
data = {
rightTurn: 10,
};
} else if (event.key == "a" || event.keyCode == 65) {
data = {
left: 100,
};
} else if (event.key == "s" || event.keyCode == 83) {
data = {
back: 100,
};
} else if (event.key == "d" || event.keyCode == 68) {
data = {
right: 100,
};
} else if (event.key == "c" || event.keyCode == 67) {
data = {
up: 100,
};
} else if (event.key == "z" || event.keyCode == 90) {
data = {
down: 100,
};
}
if (data) {
this.$store.dispatch("MMCFlightControlCenter/uav/keyControl", data);
}
this.controlMount();
}
},
stopGimbal() {
if (this.activeMount) {
let mount = this.mountCtrlList[this.activeMount.gimbalName];
this.$store.dispatch("MMCFlightControlCenter/uav/mountControl", {
mountId: this.activeMount.mountId,
payload: mount.gimbal_yaw_ctrl(0),
callback: (isOk) => {
isOk && console.log("发出控制挂载指令");
},
});
this.$store.dispatch("MMCFlightControlCenter/uav/mountControl", {
mountId: this.activeMount.mountId,
payload: mount.gimbal_pitch_ctrl(0),
callback: (isOk) => {
isOk && console.log("发出控制挂载指令");
},
});
}
},
cancelControl() {
this.stopGimbal();
},
},
};
</script>
<style lang="scss" scoped>
.keyControl {
position: fixed;
right: -52px;
bottom: 56px;
display: flex;
flex-direction: column;
align-items: center;
// width: 210px;
height: 120px;
background: rgba(9, 32, 87, 0.7);
border-radius: 10px;
padding: 8px;
.head {
width: 100%;
color: #fff;
text-indent: 16px;
line-height: 32px;
display: flex;
justify-content: space-between;
.title {
color: #14faff;
line-height: 26px;
text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
background: linear-gradient(
135deg,
#e3aa77 0%,
#f5cda9 38%,
#f9ecd3 58%,
#fcdbb1 79%,
#edb07a 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: YouSheBiaoTiHei;
font-size: 18px;
}
}
.content {
display: flex;
align-items: center;
> div {
flex-direction: column;
display: flex;
align-items: center;
> div {
display: flex;
div {
background: rgba(9, 32, 87, 0);
width: 32px;
height: 32px;
font-family: MicrosoftYaHei;
font-size: 16px;
color: #ffffff;
font-style: normal;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.active {
background: #631cce;
}
}
}
.line {
width: 1px;
height: 60px;
border: 1px solid;
border-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
)
1 1;
}
}
}
</style>
\ No newline at end of file
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlBottom/index.vue
......@@ -42,167 +42,20 @@
</div>
</template>
<!-- 键盘控制 -->
<div class="key-control" v-if="controlType === 2">
<div class="head">
<div class="w200">机身控制</div>
<div>云台控制</div>
</div>
<div class="content">
<div>
<div>
<div
:class="{active: keycode == 'q'}"
title="机身左转"
@mousedown="clickControl({key:'q'})"
@mouseup="cancelControl"
>
<img src="../../assets/images/share.png" alt />
Q
</div>
<div
:class="{active: keycode == 'w'}"
title="前进"
@mousedown="clickControl({key:'w'})"
@mouseup="cancelControl"
>
<img src="../../assets/images/share2.png" alt />
W
</div>
<div
:class="{active: keycode == 'e'}"
title="机身右转"
@mousedown="clickControl({key:'e'})"
@mouseup="cancelControl"
>
<img src="../../assets/images/share3.png" alt />
E
</div>
<div
class="ml12"
:class="{active: keycode == 'c'}"
title="上升"
@mousedown="clickControl({key:'c'})"
@mouseup="cancelControl"
>
<img src="../../assets/images/share7.png" alt />
C
</div>
</div>
<div class="mt16">
<div
:class="{active: keycode == 'a'}"
title="左飞"
@mousedown="clickControl({key:'a'})"
@mouseup="cancelControl"
>
A
<img src="../../assets/images/share4.png" alt />
</div>
<div
:class="{active: keycode == 's'}"
title="后退"
@mousedown="clickControl({key:'s'})"
@mouseup="cancelControl"
>
S
<img src="../../assets/images/share5.png" alt />
</div>
<div
:class="{active: keycode == 'd'}"
title="右飞"
@mousedown="clickControl({key:'d'})"
@mouseup="cancelControl"
>
D
<img src="../../assets/images/share6.png" alt />
</div>
<div
class="ml12"
:class="{active: keycode == 'z'}"
title="下降"
@mousedown="clickControl({key:'z'})"
@mouseup="cancelControl"
>
Z
<img src="../../assets/images/share8.png" alt />
</div>
</div>
</div>
<div class="ml12">
<div>
<div :class="{active: keycode == 'j'}" title="急停" @click="clickControl({key:'j'})">J</div>
</div>
</div>
<div class="line ml12"></div>
<div class="ml12">
<div>
<div
:class="{active: keycode == 'ArrowUp'}"
title="镜头向上"
@mousedown="clickControl({key:'ArrowUp'})"
@mouseup="cancelControl"
>
<img src="../../assets/images/up.png" alt />
</div>
</div>
<div>
<div
:class="{active: keycode == 'ArrowLeft'}"
title="镜头向左"
@mousedown="clickControl({key:'ArrowLeft'})"
@mouseup="cancelControl"
>
<img src="../../assets/images/left.png" alt />
</div>
<div
:class="{active: keycode == 'ArrowDown'}"
title="镜头向下"
@mousedown="clickControl({key:'ArrowDown'})"
@mouseup="cancelControl"
>
<img src="../../assets/images/down.png" alt />
</div>
<div
:class="{active: keycode == 'ArrowRight'}"
title="镜头向右"
@mousedown="clickControl({key:'ArrowRight'})"
@mouseup="cancelControl"
>
<img src="../../assets/images/right.png" alt />
</div>
</div>
</div>
<div class="ml12">
<div>
<div
class="f24"
:class="{active: keycode == '-'}"
title="变焦减小"
@mousedown="clickControl({key:'-'})"
@mouseup="cancelControl"
>-</div>
</div>
<div class="mt16">
<div
class="f24"
:class="{active: keycode == '+' || keycode == '='}"
title="变焦增加"
@mousedown="clickControl({key:'+'})"
@mouseup="cancelControl"
>+</div>
</div>
</div>
</div>
</div>
<KeyControl v-if="controlType === 2" @close="onModeAuto"></KeyControl>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { flightTaskAPI, Control_API } from "../../../../../../api";
import KeyControl from "./components/keyControl";
export default {
name: "ControlBottom",
components: {
KeyControl,
},
inject: ["bus"],
props: {
// 是否是机库组件
......@@ -335,11 +188,7 @@ export default {
this.$message.warning("请先接管无人机");
return;
}
this.$store.dispatch("MMCFlightControlCenter/uav/modeKeyboard", {
callback: (isOk) => {
isOk && (this.controlType = 2);
},
});
this.controlType = 2;
},
/**
* 键盘控制
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlTop/components/takeOverRecords.vue 0 → 100644
<template>
<div class="dialog1027" v-interact>
<div class="dialog-header">
<img class="dialog-header__icon" src="../../../../../../../assets/images/mount_head.png" />
<div class="dialog-header__title">接管记录</div>
<div class="dialog-header__close" @click="$emit('close')">关闭</div>
</div>
<div class="dialog-content">
<el-table :data="list">
<el-table-column label="无人机名称" align="center" prop="name"></el-table-column>
<el-table-column label="无人机所属单位" align="center" prop="name"></el-table-column>
<el-table-column label="接管状态" align="center" prop="name"></el-table-column>
<el-table-column label="当前控制单位" align="center" prop="name"></el-table-column>
<el-table-column label="操作" align="center" prop="name">
<template slot-scope="scope">
<el-button @click="onExit" type="text" size="small">退出接管</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "TakeOverRecords",
data() {
return {
list: [],
};
},
methods: {
onExit() {},
},
};
</script>
<style lang="scss" scoped>
.dialog1027::v-deep {
width: 700px;
height: 180px;
position: absolute !important;
left: 50%;
top: calc(100% + 25px);
margin-left: -350px;
padding: 0 !important;
.el-table {
background-color: transparent;
* {
background-color: transparent;
color: #fff;
}
}
}
</style>
\ No newline at end of file
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlTop/index.vue
<template>
<div class="control-top">
<div class="ct-date">
<div class="ct-item ct-date">
<div>{{date}}</div>
<div>{{week}} {{time}}</div>
</div>
<div class="ct-weather">
<div class="ct-item ct-weather">
<img class="ctw-icon" src="./assets/images/weather/icon/day/00.png" />
<div class="ctw-wind">
<div class="ctww-line1">
......@@ -14,8 +14,8 @@
<div>0.2~0.6m/s</div>
</div>
</div>
<div class="ct-take-off">适宜起飞</div>
<div class="ct-info">
<div class="ct-item ct-take-off">适宜起飞</div>
<div class="ct-item ct-info">
<!-- 避障雷达 -->
<el-tooltip
class="item"
......@@ -43,7 +43,7 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="ct-info">
<div class="ct-item ct-info">
<!-- 降落伞 -->
<el-tooltip class="item" effect="dark" :content="parachuteState.content" placement="bottom">
<img :src="parachuteState.img" />
......@@ -60,10 +60,14 @@
</div>
</el-tooltip>
</div>
<div class="ct-info">
<div class="ct-item last ct-info">
<!-- 接管记录 -->
<el-tooltip class="item" effect="dark" content="接管记录" placement="bottom">
<img src="./assets/images/record.svg" />
<img
src="./assets/images/record.svg"
@click="showTakeOverRecords = !showTakeOverRecords"
v-hover
/>
</el-tooltip>
<!-- 遥控器连接状态 -->
<el-tooltip
......@@ -100,15 +104,20 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<TakeOverRecords v-if="showTakeOverRecords" @close="showTakeOverRecords = false"></TakeOverRecords>
</div>
</template>
<script>
import dayjs from "dayjs";
import { mapState } from "vuex";
import TakeOverRecords from "./components/takeOverRecords";
export default {
name: "ControlTop",
components: {
TakeOverRecords,
},
data() {
return {
date: "",
......@@ -150,6 +159,7 @@ export default {
4: "航向偏右",
"-4": "航向偏左",
},
showTakeOverRecords: false, // 显示接管记录
};
},
computed: {
......@@ -425,7 +435,7 @@ export default {
line-height: 21px;
padding: 0 4px;
> div {
.ct-item {
position: relative;
padding: 0 12px;
......@@ -444,11 +454,11 @@ export default {
rgba(255, 255, 255, 0) 100%
);
}
}
div:nth-last-child(1) {
&::after {
display: none;
&.last {
&::after {
display: none;
}
}
}
......
src/components/MMCFlightControlCenter/store/uav.js
......@@ -973,7 +973,7 @@ const actions = {
/**
* 挂载控制
*/
mounteControl({ state }, data) {
mountControl({ state }, data) {
console.log(
{
type: 514,
......@@ -1270,6 +1270,22 @@ const actions = {
callback() {},
});
},
// 键盘控制
keyControl({ state }, data) {
console.log(data, '键盘控制');
if (state.uav.network == 2) {
window.$mmc.$store.dispatch('MMCMQTT/publish', {
topic: 'PX4/OBTAIN/' + state.uav.deviceId,
data: {
type: 538,
data: data
},
callback() {
data.callback && data.callback(true);
}
});
}
},
};
export default {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论