Merge branch 'master' of http://139.196.74.78:10010/r/drone/pilot-h5

zhongrj

2025-03-28 4ff3eee77b41466d08117970970d01be6e48ffe1

 src/views/components/controlConsole.vue

@@ -1,117 +1,31 @@
<template>
  <div class="control-console">
    <!-- <div class="control-btn">
      <van-button @click="onBackDock">返航</van-button>
      <van-button @click="notonBackDock">取消返航</van-button>
    </div> -->
    <div class="control" :class="isShowKzBtn?'actived-blue':''" @click="authenticationPwd">
      <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>
    <el-dialog
      v-model="dialogVisible"
      title="提示"
      width="500">
      <span>确认是否接管?</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sureJg">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- <div class="DroneOperation">
      <div class="center">
        <div class="center_left">
          <div class="tubiaoshow">
            <el-tooltip effect="dark" content="控制开关" placement="top">
              <img ref="controllerRef" v-show="!isShowKzBtn" src="@/assets/images/notTurnoffcontrol.png" @click="authenticationPwd(1, '开')" />
              <img ref="controllerRef" v-show="isShowKzBtn" src="@/assets/images/Turnoffcontrol.png" @click="authenticationPwd(1, '关')" />
            </el-tooltip>
          </div>
          <p class="Airplanemode">
            <span>飞行模式：</span>
            <span ref="flightModeRef">{{ flightMode }}</span>
          </p>
          <p class="operatingjixufanhang">
            <el-button size="mini" @click="!nowInReturnStatus ? onBackDock() : notonBackDock()">
              {{ !nowInReturnStatus ? '返航' : '取消返航' }}
            </el-button>
            <el-button size="mini" @click="authenticationPwd(2, '关')">继续任务</el-button>
          </p>
        </div>
        <div class="center_center">
          <div class="top">
            <div class="Q">
              <img src="/public/images/turnleft-drone.png" class="img" />
              <el-button type="info" size="mini" @click="handlePublish({ w: -W_SPEED })">Q</el-button>
            </div>
            <div class="W">
              <img src="/public/images/up-drone.png" class="img" />
              <el-button type="info" size="mini" @click="handlePublish({ x: SPEED })">W</el-button>
            </div>
            <div class="E">
              <img src="/public/images/turnright-drone.png" class="img"/>
              <el-button type="info" size="mini" @click="handlePublish({ w: W_SPEED })">E</el-button>
            </div>
          </div>
          <div class="bottom">
            <div class="A">
              <el-button type="info" size="mini"  @click="handlePublish({ y: -SPEED })">A</el-button>
              <img src="/public/images/left-drone.png"/>
            </div>
            <div class="S">
              <el-button type="info" size="mini"  @click="handlePublish({ x: -SPEED })">S</el-button>
              <img src="/public/images/down-drone.png"/>
            </div>
            <div class="D">
              <el-button type="info" size="mini"  @click="handlePublish({ y: SPEED })">D</el-button>
              <img src="/public/images/right-drone.png"/>
            </div>
          </div>
        </div>
        <div class="speed">
          <div class="speed-content">
            <div class="add-speed--button" @click="onControlsDroneSpeed(true)">
              <i class="el-icon-plus"></i>
            </div>
            <div class="speed-text">
              <div>{{ droneSeepd }}</div>
              <div>m/s</div>
            </div>
            <div class="sub-speed--button" @click="onControlsDroneSpeed(false)">
              <i class="el-icon-minus"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="rightbutton">
          <div class="top">
            <img src="/public/images/zbottom-drone.png"/>
            <el-button size="mini" @click="handlePublish({ h: HEIGHT })">C</el-button>
          </div>
          <div class="bottom">
            <el-button size="mini"  @click="handlePublish({ h: -HEIGHT })">Z</el-button>
            <img src="/public/images/ctop-drone.png"/>
          </div>
        </div>
      </div>
    </div> -->
    <van-dialog v-model:show="dialogVisible" title="确认是否接管?" show-cancel-button @confirm="sureJg"></van-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { showNotify } from 'vant';
import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
import { useMyStore } from '@/store'
import {exitController,droneController,returnHomeCancel,returnHome} from '@/api/drone/drc'
@@ -145,11 +59,17 @@
// 控制状态
let flightMode = ref('自动控制')

let genPortOne = ref(false)
console.log(store.state.airPortInfo.deviceType,store.state.airPortInfo.subType,store.state.airPortInfo.domain)
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({
@@ -164,7 +84,7 @@
// const clientId = computed(() => {
//   return localStorage.getItem('clientId') //store.state.clientId
// });
let clientId = ref(localStorage.getItem('clientId'))
let clientId = ref(localStorage.getItem('client_id'))

// {"0":"待机","1":"起飞准备","2":"起飞准备完毕","3":"手动飞行","4":"自动起飞","5":"航线飞行","6":"全景拍照","7":"智能跟随","8":"ADS-B 躲避","9":"自动返航","10":"自动降落","11":"强制降落","12":"三桨叶降落","13":"升级中","14":"未连接","15":"APAS","16":"虚拟摇杆状态","17":"指令飞行","18":"空中 RTK 收敛模式","19":"机场选址中"}
watch(() => store.state.wsMessage, (newValue, oldValue) => {
@@ -220,7 +140,7 @@
const authenticationPwd = (value:any, str:String) => {
  // 提示是否进行人工控制
  if (!isShowKzBtn.value) {
    if (!hasPermission.value) { return ElMessage.warning('暂无无人机控制权限')}
    if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' })}
    dialogVisible.value = true
  } else {
    isShowKzBtn.value = false
@@ -230,7 +150,7 @@

// 返航
const onBackDock = () => {
  returnHome(props.sn).then((res) => {
  returnHome(props.osdVisible.dockSn).then((res) => {
    if (res.code === 0) {
      nowInReturnStatus.value = true
      flightMode.value = '自动控制'
@@ -254,22 +174,41 @@
const onControlsDroneSpeed = (value:Boolean) => {
  if (value) {
    if (droneSeepd.value >= 15) {
      return ElMessage.warning('无人机速度范围应处于0~15m/s之间')
      return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
    }
    droneSeepd.value += 1
  } else {
    if (droneSeepd.value <= 0) {
      return ElMessage.warning('无人机速度范围应处于0~15m/s之间')
      return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
    }
    droneSeepd.value -= 1
  }
}

const mqttHooks =  useMqtt(deviceTopicInfo)
let seq = ref(0)
// 字母按键
const handlePublish = (params:Object) => {
  // if (!hasPermission.value) { return ElMessage.warning('暂无无人机控制权限')}
  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++ } : { pitch: (1024+SPEED.value),seq: seq.value++ }
  } else if(str === 'xz') {
    params.value = genPortOne.value ? { y: -SPEED.value,seq: seq.value++ } : { roll: (1024-SPEED.value),seq: seq.value++ }
  } else if(str === 'xx') {
    params.value = genPortOne.value ? { x: -SPEED.value,seq: seq.value++ } : { pitch: (1024-SPEED.value),seq: seq.value++ }
  } else if(str === 'xy') {
    params.value = genPortOne.value ? { y: SPEED.value,seq: seq.value++ } :  { roll: (1024+SPEED.value),seq: seq.value++ }
  } else if(str === 'ss') {
    params.value = genPortOne.value ? { h: HEIGHT.value,seq: seq.value++ } : { throttle: (1024+HEIGHT.value),seq: seq.value++ }
  } else if(str === 'zz') {
    params.value = genPortOne.value ? { w: -W_SPEED.value,seq: seq.value++ } : { yaw: (1024-W_SPEED.value),seq: seq.value++ }
  } else if(str === 'xj') {
    params.value = genPortOne.value ? { h: -HEIGHT.value,seq: seq.value++ } :  { throttle: (1024-HEIGHT.value),seq: seq.value++ }
  } else if(str === 'yz') {
    params.value = genPortOne.value ? { w: W_SPEED.value,seq: seq.value++ } :  { yaw: (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})
}

@@ -281,10 +220,25 @@

<style lang="scss" scoped>
.control-console {
  // .control-btn {
  //   position: absolute;
  //   top: 0rem;
  //   right: 0.2rem;
  //   // width: 2rem;
  //   // height: 2rem;
  //   border-radius: 3px;
  //   background-color: rgba(0, 0, 0, 0.5);
  //   // display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   overflow: hidden;
  //   cursor: pointer;
  //   pointer-events: all;
  // }
  
  .control {
    position: fixed;
    top: 0.2rem;
    position: absolute;
    bottom: 12.8rem;
    right: 0.2rem;
    width: 2rem;
    height: 2rem;
@@ -429,801 +383,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>