add panel

src/views/dashboard/components/ControlPanel.vue

@@ -44,10 +44,10 @@
       <DoubleRightOutlined />
     </n-icon>
     <div class="crcle__panel">
-      <div class="pannel__item item-1" />
-      <div class="pannel__item item-2" />
-      <div class="pannel__item item-3" />
-      <div class="pannel__item item-4" />
+      <div class="pannel__item item-1" @click="handleClick(1)" />
+      <div class="pannel__item item-2" @click="handleClick(1)" />
+      <div class="pannel__item item-3" @click="handleClick(1)" />
+      <div class="pannel__item item-4" @click="handleClick(1)" />
       <n-icon class="top" size="24" color="#fff">
         <UpOutlined />
       </n-icon>
@@ -62,10 +62,10 @@
       </n-icon>
     </div>
     <div class="crcle__panel">
-      <div class="pannel__item item-1" />
-      <div class="pannel__item item-2" />
-      <div class="pannel__item item-3" />
-      <div class="pannel__item item-4" />
+      <div class="pannel__item item-1" @click="handleClick(1)" />
+      <div class="pannel__item item-2" @click="handleClick(1)" />
+      <div class="pannel__item item-3" @click="handleClick(1)" />
+      <div class="pannel__item item-4" @click="handleClick(1)" />
       <n-icon class="top" size="24" color="#fff">
         <UpOutlined />
       </n-icon>
@@ -154,7 +154,7 @@ export default defineComponent({
 </script>
 <style scoped lang='scss'>
 .control__container{
-  position: absolute;
+  position: relative;
   z-index: 99;
   height: 220px;
   background: rgba(0, 0, 0, 1);

src/views/dashboard/components/WarningDrawer.vue

@@ -10,9 +10,9 @@
           <div class="side__control">
             <n-button>抛投</n-button>
             <n-button>喊话</n-button>
-            <n-button>悬停</n-button>
-            <n-button>手动控制</n-button>
-            <n-button class="control__special" round>返航</n-button>
+            <n-button @click="handleOperate">{{ operate }}</n-button>
+            <n-button @click="handleControl">{{ control }}</n-button>
+            <n-button class="control__special" round @click="handleBack">返航</n-button>
           </div>
           <p class="side__title">基本信息</p>
           <div class="side__basic">
@@ -48,10 +48,8 @@
         </div>
 
         <div class="control__panel">
-          <ControlPanel mode="camera" />
-        </div>
-        <div class="control__panel">
-          <ControlPanel mode="locus" />
+          <ControlPanel v-if="showControl" mode="camera" />
+          <ControlPanel v-if="showControl" mode="locus" />
         </div>
       </div>
       <div ref="mapRef" class="warn__back">
@@ -65,7 +63,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, reactive, toRefs, computed, onMounted, watch, nextTick } from 'vue'
+import { defineComponent, ref, reactive, toRefs, computed, watch, nextTick } from 'vue'
 import Underlay from './Underlay.vue'
 import ControlPanel from './ControlPanel.vue'
 export default defineComponent({
@@ -93,7 +91,10 @@ export default defineComponent({
     const videoRef = ref()
 
     const data = reactive({
-      hasChanged: false
+      hasChanged: false,
+      showControl: false,
+      operate: '悬停',
+      control: '手动控制'
     })
 
     /* 获取抽屉的信息 */
@@ -112,7 +113,6 @@ export default defineComponent({
     const handleChange = () => {
       if (!data.hasChanged) {
         containerRef.value?.appendChild(videoRef.value)
-        // container__back
         videoRef.value.classList.add('container__back')
         mapRef.value.classList.remove('container__back')
         sideRef.value?.appendChild(mapRef.value)
@@ -130,20 +130,50 @@ export default defineComponent({
       if (value) {
         nextTick(() => {
           data.hasChanged = false
+          data.showControl = false
+          data.operate = '悬停'
+          data.control = '手动控制'
           containerRef.value?.appendChild(mapRef.value)
           sideRef.value?.appendChild(videoRef.value)
         })
       }
     })
 
+    const handleOperate = () => {
+      data.operate = data.operate === '悬停' ? '继续飞行' : '悬停'
+    }
+
+    const handleControl = () => {
+      data.control = data.control === '手动控制' ? '关闭控制' : '手动控制'
+      data.showControl = !data.showControl
+    }
+
+    const handleBack = () => {
+      $dialog.confirm(
+        {
+          type: 'success',
+          title: '提示',
+          showIcon: false,
+          content: `是否返航`,
+          confirm: () => {
+            emit('update:visible', false)
+          }
+        }
+      )
+    }
+
     return {
       containerRef,
       sideRef,
       mapRef,
       videoRef,
+      ...toRefs(data),
       getDrawerOptions,
       handleDrawerColse,
-      handleChange
+      handleChange,
+      handleOperate,
+      handleControl,
+      handleBack
     }
   }
 })
@@ -212,6 +242,8 @@ export default defineComponent({
 
 .control__panel{
   position: absolute;
+  bottom: 0;
+  display: flex;
 }
 
 ::v-deep(.side__control){