Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

shuishen

2025-04-16 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf

 src/views/TaskManage/TaskIntermediateContent/CurrentTaskDetails/ControlPanel/BaseControl.vue

New file
@@ -0,0 +1,156 @@
<template>
   <div class="manualControl">
      <div class="manualControlBg">
         <div class="manualControlBorder">
            <div class="manualControlCenter">
               <img :src="controlCenterImg" alt="" />
            </div>
         </div>
         <div
            v-for="item in list3"
            :style="item.style"
            class="operateBtn"
            :title="item.name"
            :class="item.active ? 'active' : ''"
            @click="item.handle"
         ></div>
         <SvgIcon
            v-for="(item, index) in list3"
            :name="item.svg"
            :class="`${'btnIcon-' + index} btnIcon ${item.active ? 'active' : ''}`"
            :style="item.imgStyle"
         />
      </div>
   </div>
</template>

<script setup>
import controlCenterImg from '@/assets/images/taskManagement/taskIntermediateContent/controlCenter.png'
import SvgIcon from '@/components/SvgIcon.vue'
import EventBus from '@/event-bus'

const isAutoControl = inject('isAutoControl')

const list3 = computed(() => [
   { name: '自动控制', svg: 'autoControl', style: { top: '-70%' }, active: isAutoControl.value, handle: autoControl },
   { name: '继续任务', svg: 'continueTask', style: { left: '70%' }, active: false, handle: autoControl },
   {
      name: '手动控制',
      svg: 'manualControl',
      style: { top: '70%' },
      active: !isAutoControl.value,
      handle: manualControl,
   },
   { name: '返航/取消返航', svg: 'turnBack', style: { left: '-70%' }, active: false, handle: turnBack },
])

function autoControl() {
   isAutoControl.value = true
   EventBus.emit('controlPanel-cancelControl')
}

function manualControl() {
   EventBus.emit('controlPanel-control')
}

function turnBack() {
   EventBus.emit('controlPanel-returnOrCancelReturn')
}
</script>

<style scoped lang="scss">
.manualControl {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 188px;
   height: 188px;
   background: rgb(0, 0, 0, 0.4); /* 半透明背景 */
   border-radius: 40px 40px 40px 40px;

   .manualControlBg {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      width: 165px;
      height: 165px;
      border-radius: 50%;
      position: relative;
      background: radial-gradient(circle, #5d5c5e 0%, #514f52 50%, #3d3b3d 100%);

      .operateBtn {
         position: absolute;
         width: 100%;
         height: 100%;
         transform: rotate(45deg);

         &:hover {
            cursor: pointer;
            box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
         }
      }

      .btnIcon {
         position: absolute;
         font-size: 24px;
         pointer-events: none;
         color: #8e8e8f;

         &.active {
            color: #fff;
         }

         &-0 {
            left: 50%;
            top: 20px;
            transform: translateX(-50%);
         }

         &-1 {
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
         }

         &-2 {
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
         }

         &-3 {
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
         }
      }

      .manualControlBorder {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 135px;
         height: 135px;
         border-radius: 50%;
         border: 2px solid #ffffff;

         .manualControlCenter {
            z-index: 5;
            width: 50px;
            height: 50px;
            background: #404040;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
               width: 18px;
               height: 18px;
            }
         }
      }
   }
}
</style>