From 4ff3eee77b41466d08117970970d01be6e48ffe1 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Fri, 28 Mar 2025 19:02:30 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/pilot-h5

---
 src/views/components/controlConsole.vue |  896 ++++-------------------------------------------------------
 1 files changed, 66 insertions(+), 830 deletions(-)

diff --git a/src/views/components/controlConsole.vue b/src/views/components/controlConsole.vue
index bed1403..620e88b 100644
--- a/src/views/components/controlConsole.vue
+++ b/src/views/components/controlConsole.vue
@@ -1,39 +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>
+    <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'
@@ -67,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({
@@ -86,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) => {
@@ -142,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
@@ -152,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 = '自动控制'
@@ -176,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})
 }
 
@@ -203,6 +220,21 @@
 
 <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: absolute;
@@ -351,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>
\ No newline at end of file

--
Gitblit v1.9.3