更新分享

chenyao

2025-03-13 bdc6d8733ae6eeb3a9762e77dbabe21441336474

 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>