Skip to content

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

fix: 

1. 切换遥杆和自动时，模式切换失败
2. 键盘控制
3. 机库顶部实时信息展示
上级 78a7e4a6
正在显示 包含 106 行增加 和 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/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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论