From bdc6d8733ae6eeb3a9762e77dbabe21441336474 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Thu, 13 Mar 2025 17:20:36 +0800
Subject: [PATCH] 更新分享
---
src/views/components/controlConsole.vue | 848 ++------------------------------------------------------
1 files changed, 38 insertions(+), 810 deletions(-)
diff --git a/src/views/components/controlConsole.vue b/src/views/components/controlConsole.vue
index 461f7f9..d695bbf 100644
--- a/src/views/components/controlConsole.vue
+++ b/src/views/components/controlConsole.vue
@@ -4,16 +4,16 @@
<img src="@/assets/images/open-close.png" />
</div>
<div class="control-left" v-show="isShowKzBtn">
- <div class="top" @touchstart="handlePublish({ x: SPEED })"><div class="xq">向前</div></div>
- <div class="left" @touchstart="handlePublish({ y: -SPEED })"><div class="xz">向左</div></div>
- <div class="bottom" @touchstart="handlePublish({ x: -SPEED })"><div class="xx">向下</div></div>
- <div class="right" @touchstart="handlePublish({ y: SPEED })"><div class="xy">向右</div></div>
+ <div class="top" @touchstart="handlePublish('xq')"><div class="xq">向前</div></div>
+ <div class="left" @touchstart="handlePublish('xz')"><div class="xz">向左</div></div>
+ <div class="bottom" @touchstart="handlePublish('xx')"><div class="xx">向下</div></div>
+ <div class="right" @touchstart="handlePublish('xy')"><div class="xy">向右</div></div>
</div>
<div class="control-right" v-show="isShowKzBtn">
- <div class="top" @touchstart="handlePublish({ h: HEIGHT })"><div class="xq">上升</div></div>
- <div class="left" @touchstart="handlePublish({ w: -W_SPEED })"><div class="xz">左转</div></div>
- <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 class="top" @touchstart="handlePublish('ss')"><div class="xq">上升</div></div>
+ <div class="left" @touchstart="handlePublish('zz')"><div class="xz">左转</div></div>
+ <div class="bottom" @touchstart="handlePublish('xj')"><div class="xx">下降</div></div>
+ <div class="right" @touchstart="handlePublish('yz')" ><div class="xy">右转</div></div>
</div>
<van-dialog v-model:show="dialogVisible" title="确认是否接管?" show-cancel-button @confirm="sureJg"></van-dialog>
</div>
@@ -54,11 +54,16 @@
// 控制状态
let flightMode = ref('自动控制')
+let genPortOne = ref(false)
+if (store.state.airPortInfo.deviceType == 1 && store.state.airPortInfo.subType == 0 && store.state.airPortInfo.domain == 3) {
+ genPortOne.value = true
+}
+
// 控制无人机速度
let droneSeepd = ref(5);
-const SPEED = ref(droneSeepd.value || 5) // check
-const HEIGHT = ref(5) // check
-const W_SPEED = ref(20) // 机头角速度
+const SPEED = genPortOne.value ? ref(droneSeepd.value || 5) : ref(500); // check
+const HEIGHT = genPortOne.value ? ref(5) : ref(500); // check
+const W_SPEED = genPortOne.value ? ref(20) : ref(500); // 机头角速度
// A S D....按键
let deviceTopicInfo: DeviceTopicInfo = reactive({
@@ -175,10 +180,29 @@
}
const mqttHooks = useMqtt(deviceTopicInfo)
+let seq = ref(0)
// 字母按键
-const handlePublish = (params:Object) => {
- if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' });}
- const body = { method: DRC_METHOD.DRONE_CONTROL, data: params}
+const handlePublish = (str:String) => {
+ // if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' });}
+ let params = ref({})
+ if (str === 'xq') {
+ params.value = genPortOne.value ? { x: SPEED.value,seq: seq.value++ } : { x: (1024+SPEED.value),seq: seq.value++ }
+ } else if(str === 'xz') {
+ params.value = genPortOne.value ? { y: -SPEED.value,seq: seq.value++ } : { y: (1024-SPEED.value),seq: seq.value++ }
+ } else if(str === 'xx') {
+ params.value = genPortOne.value ? { x: -SPEED.value,seq: seq.value++ } : { x: (1024-SPEED.value),seq: seq.value++ }
+ } else if(str === 'xy') {
+ params.value = genPortOne.value ? { y: SPEED.value,seq: seq.value++ } : { y: (1024+SPEED.value),seq: seq.value++ }
+ } else if(str === 'ss') {
+ params.value = genPortOne.value ? { h: HEIGHT.value,seq: seq.value++ } : { h: (1024+HEIGHT.value),seq: seq.value++ }
+ } else if(str === 'zz') {
+ params.value = genPortOne.value ? { w: -W_SPEED.value,seq: seq.value++ } : { w: (1024-W_SPEED.value),seq: seq.value++ }
+ } else if(str === 'xj') {
+ params.value = genPortOne.value ? { h: -HEIGHT.value,seq: seq.value++ } : { h: (1024-HEIGHT.value),seq: seq.value++ }
+ } else if(str === 'yz') {
+ params.value = genPortOne.value ? { w: W_SPEED.value,seq: seq.value++ } : { w: (1024+W_SPEED.value),seq: seq.value++ }
+ }
+ const body = { method: genPortOne.value?'drone_control':'stick_control', data: params.value}
mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, {qos: 0})
}
@@ -338,801 +362,5 @@
}
}
}
- // width: 100%;
- // height: 200px;
- // margin-top: 20px;
- // margin: 0 auto;
- // display: flex;
- // align-items: center;
- // justify-content: space-between;
- // overflow-x: auto;
- // overflow-y: hidden;
- // background-repeat: no-repeat;
- // background-size: 100% 100%;
- // color: #fff;
- // font-weight: bold;
- // .DroneOperation {
- // display: flex;
- // align-items: center;
- // height: 245px;
- // position: relative;
- // }
-
- // .center {
- // display: flex;
- // align-items: center;
-
- // &_left,
- // &_center,
- // .speed {
- // margin-right: 10px;
- // }
-
- // .center_left {
- // .tubiaoshow {
- // height: 50px;
- // display: flex;
- // justify-content: center;
- // align-items: center;
-
- // img {
- // width: 40px;
- // height: 50px;
- // cursor: pointer;
- // }
- // }
-
- // .Airplanemode {
- // font-style: normal;
- // margin: 5px 0px;
- // text-align: center;
- // }
-
- // .operatingjixufanhang {
- // display: flex;
- // justify-content: center;
-
- // .el-button {
- // font-size: 16px;
- // background-color: rgba(0, 0, 0, 0.5);
- // color: white;
- // border-width: 0;
- // margin: 5px;
- // }
- // }
- // }
-
- // .center_center {
- // width: 120px;
-
- // padding: 0px 0px;
-
- // .center {
- // height: 45px;
-
- // p {
- // line-height: 50px;
- // color: #00ee8b;
- // font-size: 20px;
- // margin: 0 auto;
- // }
- // }
-
- // .top,
- // .bottom {
- // background: rgba(0, 0, 0, 0.5);
- // border-radius: 5px;
- // display: flex;
- // height: 80px;
- // width: 100%;
-
- // .Q,
- // .W,
- // .E {
- // flex: 1;
- // display: flex;
- // flex-direction: column;
- // align-items: center;
- // justify-content: center;
- // gap: 10px;
-
- // img {
- // width: 20px;
- // height: 20px;
- // // margin-top: 5px;
- // // margin-top: 5px;
- // }
-
- // .el-button {
- // padding: 4px;
- // font-size: 20px;
- // height: 30px;
- // background: #3c3c3c;
- // color: white;
- // -webkit-touch-callout: none;
- // -webkit-user-select: none;
- // -khtml-user-select: none;
- // -moz-user-select: none;
- // -ms-user-select: none;
- // user-select: none;
- // }
- // }
-
- // .A,
- // .S,
- // .D {
- // flex: 1;
- // display: flex;
- // flex-direction: column;
- // align-items: center;
- // justify-content: center;
-
- // img {
- // width: 20px;
- // height: 20px;
- // }
-
- // .el-button {
- // padding: 4px;
- // font-size: 20px;
- // margin-bottom: 10px;
- // height: 30px;
- // background: #3c3c3c;
- // color: white;
- // -webkit-touch-callout: none;
- // -webkit-user-select: none;
- // -khtml-user-select: none;
- // -moz-user-select: none;
- // -ms-user-select: none;
- // user-select: none;
- // }
- // }
- // }
-
- // .top {
- // // padding: 5px 2px 5px;
- // margin-bottom: 10px;
- // }
-
- // .bottom {
- // padding: 5px 0px 0px 0px;
- // }
- // }
-
- // .speed {
- // width: 43px;
- // height: 170px;
- // border-radius: 5px;
- // background-color: rgba(0, 0, 0, 0.5);
-
- // &-content {
- // height: 100%;
- // display: flex;
- // flex-direction: column;
-
- // .add-speed--button,
- // .sub-speed--button {
- // flex: 1;
- // display: flex;
- // justify-content: center;
- // align-items: center;
- // cursor: pointer;
-
- // i {
- // font-size: 20px;
- // font-weight: bolder;
- // }
- // }
-
- // .speed-text {
- // flex: 2;
- // display: flex;
- // flex-direction: column;
- // justify-content: center;
- // align-items: center;
-
- // div:first-child {
- // font-size: 20px;
- // color: #00ee8b;
- // font-weight: bolder;
- // }
- // }
- // }
- // }
- // }
-
- // .right {
- // .rightbutton {
- // // padding: 0px 0px;
- // // // width: 150px;
- // // margin-right: 0px;
-
- // .center {
- // height: 45px;
- // margin: 5px 0px;
- // display: flex;
- // flex-direction: column;
-
- // .top_in {
- // display: flex;
- // width: 100%;
-
- // .top_in_left {
- // min-width: 70px;
- // text-align: right;
- // font-size: 22px;
- // color: #00ee8b;
- // margin-right: 5px;
- // margin-left: auto;
- // }
-
- // .top_in_right {
- // p {
- // font-size: 14px;
- // line-height: 14px;
- // text-align: right;
- // }
- // }
- // }
-
- // .top_in_ASL {
- // font-size: 12px;
- // line-height: 12px;
- // text-align: right;
- // }
- // }
-
- // .top {
- // margin-left: auto;
- // width: 43px;
- // background: rgba(0, 0, 0, 0.5);
- // display: flex;
- // flex-direction: column;
- // border-radius: 5px;
- // height: 80px;
- // margin-bottom: 10px;
-
- // img {
- // width: 25px;
- // height: 25px;
- // margin: 5px auto 0px;
- // }
-
- // .el-button {
- // padding: 4px;
- // font-size: 16px;
- // background: #3c3c3c;
- // color: white;
- // width: 25px;
- // height: 30px;
- // margin: 10px auto 12px;
- // -webkit-touch-callout: none;
- // -webkit-user-select: none;
- // -khtml-user-select: none;
- // -moz-user-select: none;
- // -ms-user-select: none;
- // user-select: none;
- // }
- // }
-
- // .bottom {
- // margin-left: auto;
- // width: 40px;
- // background: rgba(0, 0, 0, 0.5);
- // display: flex;
- // flex-direction: column;
- // border-radius: 5px;
- // height: 80px;
-
- // img {
- // width: 25px;
- // height: 25px;
- // margin: 0px auto 5px;
- // }
-
- // .el-button {
- // padding: 4px;
- // font-size: 20px;
- // background: #3c3c3c;
- // color: white;
- // width: 25px;
- // margin: 10px auto 10px;
- // }
- // }
- // }
- // }
-
- // .instrument-panel {
- // position: relative;
-
- // .title {
- // position: absolute;
- // font-size: 12px;
- // font-weight: 400;
- // top: -5px;
- // left: 10px;
- // color: #ffffff;
- // z-index: 1;
- // }
- // }
-
- // .camera-load {
-
- // // background: rgba(6, 25, 39, 0.5);
- // // height: 245px;
- // // padding: 10px;
- // // position: relative;
- // // border: 1px solid red;
- // .title {
- // position: absolute;
- // font-size: 12px;
- // font-weight: 400;
- // top: -5px;
- // left: 10px;
- // color: #ffffff;
- // z-index: 1;
- // }
-
- // .camera-control {
- // width: 100%;
- // margin-bottom: 10px;
- // display: flex;
- // justify-content: center;
-
- // .promptInformation {
- // position: absolute;
- // width: 30px;
- // height: 30px;
- // right: 10px;
- // top: 10px;
- // }
-
- // .circle-box {
- // width: 90px;
- // height: 90px;
- // border-radius: 50%;
- // background-color: rgba(0, 0, 0, 0.5);
- // -webkit-mask-image: radial-gradient(circle,
- // transparent 35%,
- // white 35%);
- // mask-image: radial-gradient(circle, transparent 35%, white 35%);
- // position: relative;
-
- // .top,
- // .left,
- // .bottom,
- // .right {
- // width: 10px;
- // height: 10px;
- // position: absolute;
- // cursor: pointer;
- // z-index: 2;
- // }
-
- // .top {
- // top: -2px;
- // left: 50%;
- // transform: translateX(-50%);
- // border-top: 10px solid transparent;
- // border-right: 10px solid transparent;
- // border-left: 10px solid transparent;
- // border-bottom: 10px solid #fff;
-
- // &:hover {
- // &~.blue-bgc {
- // border-top: 45px solid #409eff;
- // }
- // }
- // }
-
- // .left {
- // top: 50%;
- // left: -2px;
- // transform: translateY(-50%);
- // border-top: 10px solid transparent;
- // border-right: 10px solid #fff;
- // border-left: 10px solid transparent;
- // border-bottom: 10px solid transparent;
-
- // &:hover {
- // &~.blue-bgc {
- // border-left: 45px solid #409eff;
- // }
- // }
- // }
-
- // .bottom {
- // bottom: -2px;
- // left: 50%;
- // transform: translateX(-50%);
- // border-top: 10px solid #fff;
- // border-right: 10px solid transparent;
- // border-left: 10px solid transparent;
- // border-bottom: 10px solid transparent;
-
- // &:hover {
- // &~.blue-bgc {
- // border-bottom: 45px solid #409eff;
- // }
- // }
- // }
-
- // .right {
- // top: 50%;
- // right: -2px;
- // transform: translateY(-50%);
- // border-top: 10px solid transparent;
- // border-right: 10px solid transparent;
- // border-left: 10px solid #fff;
- // border-bottom: 10px solid transparent;
-
- // &:hover {
- // &~.blue-bgc {
- // border-right: 45px solid #409eff;
- // }
- // }
- // }
-
- // .blue-bgc {
- // width: 90px;
- // height: 90px;
- // position: absolute;
- // top: 0;
- // left: 0;
- // z-index: 1;
- // border-top: 45px solid transparent;
- // border-right: 45px solid transparent;
- // border-left: 45px solid transparent;
- // border-bottom: 45px solid transparent;
- // }
- // }
- // }
-
- // .camera-select {
- // display: flex;
- // display: flex;
- // justify-content: center;
-
- // :deep() {
- // .el-select {
- // width: 250px;
- // height: 40px;
- // line-height: 40px;
- // background-color: rgba(0, 0, 0, 0.5);
- // border-radius: 5px;
-
- // .el-input {
- // width: auto;
- // height: auto;
-
- // .el-input__inner {
- // background-color: transparent;
- // box-shadow: none;
- // border: 0;
- // color: #fff;
- // }
-
- // .el-input__suffix {
- // display: flex;
- // align-items: center;
- // }
- // }
- // }
- // }
-
- // .load-button {
- // font-style: normal;
- // background: rgba(21, 138, 255, 0.5);
- // margin-left: 10px;
- // padding: 0 5px;
-
- // &:hover {
- // color: #409eff;
- // }
- // }
- // }
-
- // .btn-group {
- // display: flex;
- // flex-wrap: wrap;
- // margin-top: 10px;
- // width: 300px;
- // padding: 0px 20px;
-
- // .btn-item {
- // display: flex;
- // // width: 140px;
- // box-sizing: border-box;
- // margin: 2px 10px;
- // cursor: pointer;
-
- // img {
- // width: 30px;
- // height: 30px;
- // margin-right: 3px;
- // }
-
- // div {
- // font-size: 18px;
- // font-style: normal;
- // }
- // }
- // }
- // }
-
- // .payload-control {
- // height: 100%;
- // display: flex;
- // justify-content: center;
- // flex-direction: column;
- // gap: 15px;
-
- // .left-box {
- // display: flex;
- // // flex-direction: column;
- // align-items: center;
- // justify-content: center;
- // gap: 10px;
-
- // .circle-box {
- // width: 100px;
- // height: 100px;
- // border-radius: 50%;
- // overflow: hidden;
- // background-color: rgba(0, 0, 0, 0.5);
- // // -webkit-mask-image: radial-gradient(
- // // circle,
- // // transparent 35%,
- // // white 35%
- // // );
- // // mask-image: radial-gradient(circle, transparent 35%, white 35%);
- // position: relative;
- // // border: 1px solid red;
-
- // .top,
- // .left,
- // .bottom,
- // .right {
- // width: 10px;
- // height: 10px;
- // position: absolute;
- // cursor: pointer;
- // z-index: 2;
- // }
-
- // .top {
- // top: -2px;
- // left: 50%;
- // transform: translateX(-50%);
- // border-top: 10px solid transparent;
- // border-right: 10px solid transparent;
- // border-left: 10px solid transparent;
- // border-bottom: 10px solid #fff;
-
- // &:hover {
- // &~.blue-bgc {
- // border-top: 50px solid #409eff;
- // }
- // }
- // }
-
- // .left {
- // top: 50%;
- // left: -2px;
- // transform: translateY(-50%);
- // border-top: 10px solid transparent;
- // border-right: 10px solid #fff;
- // border-left: 10px solid transparent;
- // border-bottom: 10px solid transparent;
-
- // &:hover {
- // &~.blue-bgc {
- // border-left: 50px solid #409eff;
- // }
- // }
- // }
-
- // .bottom {
- // bottom: -2px;
- // left: 50%;
- // transform: translateX(-50%);
- // border-top: 10px solid #fff;
- // border-right: 10px solid transparent;
- // border-left: 10px solid transparent;
- // border-bottom: 10px solid transparent;
-
- // &:hover {
- // &~.blue-bgc {
- // border-bottom: 50px solid #409eff;
- // }
- // }
- // }
-
- // .right {
- // top: 50%;
- // right: -2px;
- // transform: translateY(-50%);
- // border-top: 10px solid transparent;
- // border-right: 10px solid transparent;
- // border-left: 10px solid #fff;
- // border-bottom: 10px solid transparent;
-
- // &:hover {
- // &~.blue-bgc {
- // border-right: 50px solid #409eff;
- // }
- // }
- // }
-
- // .reset-center {
- // position: absolute;
- // width: 40%;
- // height: 40%;
- // left: 50%;
- // top: 50%;
- // transform: translate(-50%, -50%);
- // border-radius: 50%;
- // background-color: rgb(63, 66, 68);
- // z-index: 2;
- // cursor: pointer;
- // display: flex;
- // justify-content: center;
- // align-items: center;
-
- // i {
- // color: #fff;
- // font-size: 20px;
- // font-weight: bolder;
- // }
-
- // &:hover {
- // background-color: #409eff;
- // }
- // }
-
- // .blue-bgc {
- // width: 100px;
- // height: 100px;
- // position: absolute;
- // top: 0;
- // left: 0;
- // z-index: 1;
- // border-top: 50px solid transparent;
- // border-right: 50px solid transparent;
- // border-left: 50px solid transparent;
- // border-bottom: 50px solid transparent;
- // }
- // }
-
- // .payload-info {
- // font-size: 14px;
- // }
-
- // .btn-group {
- // width: auto;
- // display: flex;
- // flex-wrap: wrap;
- // width: 200px;
-
- // // flex-direction: column;
- // // justify-content: center;
- // .btn-item {
- // width: 100px;
- // display: flex;
- // box-sizing: border-box;
- // cursor: pointer;
-
- // img {
- // width: 30px;
- // height: 30px;
- // margin-right: 3px;
- // }
-
- // div {
- // height: 100%;
- // font-size: 17px;
- // line-height: 30px;
- // font-style: normal;
- // }
- // }
- // }
- // }
-
- // .right-box {
- // position: relative;
- // flex-shrink: 0;
- // display: flex;
-
- // // justify-content: center;
- // .btn-group {
- // width: auto;
- // display: flex;
- // flex-wrap: wrap;
- // width: 290px;
- // justify-content: center;
-
- // .btn-item {
- // width: 140px;
- // display: flex;
- // box-sizing: border-box;
- // cursor: pointer;
-
- // img {
- // width: 30px;
- // height: 30px;
- // margin-right: 3px;
- // }
-
- // div {
- // width: 100px;
- // height: 100%;
- // font-size: 17px;
- // line-height: 30px;
- // font-style: normal;
- // }
- // }
- // }
-
- // .payload-info {
- // font-size: 14px;
-
- // .info-item {
- // display: flex;
- // align-items: center;
- // gap: 10px;
- // height: 25px;
-
- // div:first-child {
- // width: 170px;
- // }
-
- // div:nth-child(2) {
- // :deep() {
- // .el-input-number {
- // width: 70px;
- // height: 20px;
-
- // &__decrease,
- // &__increase {
- // width: 18px;
- // height: 18px;
- // line-height: 18px;
- // background-color: transparent;
- // border-right: 0;
- // border-left: 0;
-
- // i {
- // color: #fff;
- // font-size: 17px;
- // font-weight: bold;
- // }
- // }
-
- // .el-input {
- // margin: 0;
- // padding: 0;
- // height: 18px;
- // display: flex;
- // justify-content: center;
-
- // &__inner {
- // padding: 0;
- // }
-
- // input {
- // width: 80px;
- // height: 18px;
- // overflow: hidden;
- // font-size: 14px;
- // font-weight: bold;
- // }
- // }
- // }
- // }
- // }
- // }
- // }
- // }
- // }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3