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 @@ ...@@ -4,12 +4,15 @@
<ControlLeft></ControlLeft> <ControlLeft></ControlLeft>
<ControlBottom isHangar></ControlBottom> <ControlBottom isHangar></ControlBottom>
<ControlRight></ControlRight> <ControlRight></ControlRight>
<!-- 顶部信息 -->
<ControlTop></ControlTop>
</div> </div>
</template> </template>
<script> <script>
import ControlLeft from "./components/controlLeft"; import ControlLeft from "./components/controlLeft";
import ControlBottom from "../../../uavApplications/components/controlPanel/components/controlBottom"; import ControlBottom from "../../../uavApplications/components/controlPanel/components/controlBottom";
import ControlTop from "../../../uavApplications/components/controlPanel/components/controlTop";
import ControlRight from "./components/controlRight"; import ControlRight from "./components/controlRight";
import { mapState } from "vuex"; import { mapState } from "vuex";
...@@ -19,6 +22,7 @@ export default { ...@@ -19,6 +22,7 @@ export default {
ControlLeft, ControlLeft,
ControlBottom, ControlBottom,
ControlRight, ControlRight,
ControlTop
}, },
computed: { computed: {
...mapState("MMCFlightControlCenter/uav", ["uavRealTimeData", "uav"]), ...mapState("MMCFlightControlCenter/uav", ["uavRealTimeData", "uav"]),
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlBottom/index.vue
...@@ -42,167 +42,20 @@ ...@@ -42,167 +42,20 @@
</div> </div>
</template> </template>
<!-- 键盘控制 --> <!-- 键盘控制 -->
<div class="key-control" v-if="controlType === 2"> <KeyControl v-if="controlType === 2" @close="onModeAuto"></KeyControl>
<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>
</div> </div>
</template> </template>
<script> <script>
import { mapState, mapActions } from "vuex"; import { mapState, mapActions } from "vuex";
import { flightTaskAPI, Control_API } from "../../../../../../api"; import { flightTaskAPI, Control_API } from "../../../../../../api";
import KeyControl from "./components/keyControl";
export default { export default {
name: "ControlBottom", name: "ControlBottom",
components: {
KeyControl,
},
inject: ["bus"], inject: ["bus"],
props: { props: {
// 是否是机库组件 // 是否是机库组件
...@@ -335,11 +188,7 @@ export default { ...@@ -335,11 +188,7 @@ export default {
this.$message.warning("请先接管无人机"); this.$message.warning("请先接管无人机");
return; return;
} }
this.$store.dispatch("MMCFlightControlCenter/uav/modeKeyboard", { this.controlType = 2;
callback: (isOk) => {
isOk && (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> <template>
<div class="control-top"> <div class="control-top">
<div class="ct-date"> <div class="ct-item ct-date">
<div>{{date}}</div> <div>{{date}}</div>
<div>{{week}} {{time}}</div> <div>{{week}} {{time}}</div>
</div> </div>
<div class="ct-weather"> <div class="ct-item ct-weather">
<img class="ctw-icon" src="./assets/images/weather/icon/day/00.png" /> <img class="ctw-icon" src="./assets/images/weather/icon/day/00.png" />
<div class="ctw-wind"> <div class="ctw-wind">
<div class="ctww-line1"> <div class="ctww-line1">
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
<div>0.2~0.6m/s</div> <div>0.2~0.6m/s</div>
</div> </div>
</div> </div>
<div class="ct-take-off">适宜起飞</div> <div class="ct-item ct-take-off">适宜起飞</div>
<div class="ct-info"> <div class="ct-item ct-info">
<!-- 避障雷达 --> <!-- 避障雷达 -->
<el-tooltip <el-tooltip
class="item" class="item"
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<div class="ct-info"> <div class="ct-item ct-info">
<!-- 降落伞 --> <!-- 降落伞 -->
<el-tooltip class="item" effect="dark" :content="parachuteState.content" placement="bottom"> <el-tooltip class="item" effect="dark" :content="parachuteState.content" placement="bottom">
<img :src="parachuteState.img" /> <img :src="parachuteState.img" />
...@@ -60,10 +60,14 @@ ...@@ -60,10 +60,14 @@
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="ct-info"> <div class="ct-item last ct-info">
<!-- 接管记录 --> <!-- 接管记录 -->
<el-tooltip class="item" effect="dark" content="接管记录" placement="bottom"> <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>
<!-- 遥控器连接状态 --> <!-- 遥控器连接状态 -->
<el-tooltip <el-tooltip
...@@ -100,15 +104,20 @@ ...@@ -100,15 +104,20 @@
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<TakeOverRecords v-if="showTakeOverRecords" @close="showTakeOverRecords = false"></TakeOverRecords>
</div> </div>
</template> </template>
<script> <script>
import dayjs from "dayjs"; import dayjs from "dayjs";
import { mapState } from "vuex"; import { mapState } from "vuex";
import TakeOverRecords from "./components/takeOverRecords";
export default { export default {
name: "ControlTop", name: "ControlTop",
components: {
TakeOverRecords,
},
data() { data() {
return { return {
date: "", date: "",
...@@ -150,6 +159,7 @@ export default { ...@@ -150,6 +159,7 @@ export default {
4: "航向偏右", 4: "航向偏右",
"-4": "航向偏左", "-4": "航向偏左",
}, },
showTakeOverRecords: false, // 显示接管记录
}; };
}, },
computed: { computed: {
...@@ -425,7 +435,7 @@ export default { ...@@ -425,7 +435,7 @@ export default {
line-height: 21px; line-height: 21px;
padding: 0 4px; padding: 0 4px;
> div { .ct-item {
position: relative; position: relative;
padding: 0 12px; padding: 0 12px;
...@@ -444,11 +454,11 @@ export default { ...@@ -444,11 +454,11 @@ export default {
rgba(255, 255, 255, 0) 100% rgba(255, 255, 255, 0) 100%
); );
} }
}
div:nth-last-child(1) { &.last {
&::after { &::after {
display: none; display: none;
}
} }
} }
......
src/components/MMCFlightControlCenter/store/uav.js
...@@ -973,7 +973,7 @@ const actions = { ...@@ -973,7 +973,7 @@ const actions = {
/** /**
* 挂载控制 * 挂载控制
*/ */
mounteControl({ state }, data) { mountControl({ state }, data) {
console.log( console.log(
{ {
type: 514, type: 514,
...@@ -1270,6 +1270,22 @@ const actions = { ...@@ -1270,6 +1270,22 @@ const actions = {
callback() {}, 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 { export default {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论