Merge branch 'zhangtao' of gitadmin/tuoheng_lc_web into develop

src/views/dashboard/components/ControlPanel.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="control__container" :class="[isCollpase ? 'open': 'closed']">
-    <n-icon class="control__close" size="20" color="#fff" @click="isCollpase = true">
+  <div v-if="getMode.includes('camera')" class="control__container camera__panel" :class="[cameraShow ? 'open': 'closed']">
+    <n-icon class="control__close" size="20" color="#fff" @click="cameraShow = true">
       <DoubleLeftOutlined />
     </n-icon>
-    <n-icon class="control__open" size="20" color="#fff" @click="isCollpase = false">
+    <n-icon class="control__open" size="20" color="#fff" @click="cameraShow = false">
       <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(2)" />
+      <div class="pannel__item item-3" @click="handleClick(3)" />
+      <div class="pannel__item item-4" @click="handleClick(4)" />
       <n-icon class="top" size="24" color="#fff">
         <CaretUpFilled />
       </n-icon>
@@ -33,6 +33,59 @@
         <LineOutlined />
       </n-icon>
     </div>
+    <div class="panel__title">云台控制</div>
+  </div>
+
+  <div v-if="getMode.includes('locus')" class="control__container locus__panel" :class="[locusShow ? 'open': 'closed']">
+    <n-icon class="control__close" size="20" color="#fff" @click="locusShow = true">
+      <DoubleLeftOutlined />
+    </n-icon>
+    <n-icon class="control__open" size="20" color="#fff" @click="locusShow = false">
+      <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" />
+      <n-icon class="top" size="24" color="#fff">
+        <UpOutlined />
+      </n-icon>
+      <n-icon class="right" size="24" color="#fff">
+        <RedoOutlined />
+      </n-icon>
+      <n-icon class="bottom" size="24" color="#fff">
+        <DownOutlined />
+      </n-icon>
+      <n-icon class="left" size="24" color="#fff">
+        <UndoOutlined />
+      </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" />
+      <n-icon class="top" size="24" color="#fff">
+        <UpOutlined />
+      </n-icon>
+      <n-icon class="right" size="24" color="#fff">
+        <RightOutlined />
+      </n-icon>
+      <n-icon class="bottom" size="24" color="#fff">
+        <DownOutlined />
+      </n-icon>
+      <n-icon class="left" size="24" color="#fff">
+        <LeftOutlined />
+      </n-icon>
+    </div>
+    <div class="config__panel">
+      <div v-for="(item,index) in configList" :key="index" class="config__item">
+        <span>{{ item.label }}</span>
+        <n-input-number v-model:value="config[item.key]" :show-button="false" />
+      </div>
+    </div>
+    <div class="panel__title">飞行控制</div>
   </div>
 </template>
 
@@ -45,25 +98,55 @@ import {
   CaretDownFilled,
   CaretLeftFilled,
   PlusOutlined,
-  LineOutlined
+  LineOutlined,
+  UpOutlined,
+  RightOutlined,
+  DownOutlined,
+  LeftOutlined,
+  RedoOutlined,
+  UndoOutlined
 } from '@vicons/antd'
-import { defineComponent, reactive, toRefs } from 'vue'
+import { defineComponent, reactive, toRefs, computed } from 'vue'
+import { isArray } from '@/utils/is.js'
 export default defineComponent({
   name: 'ControlPanel',
-  components: { DoubleLeftOutlined, DoubleRightOutlined, CaretUpFilled, CaretRightFilled, CaretDownFilled, CaretLeftFilled, PlusOutlined, LineOutlined },
+  components: { DoubleLeftOutlined, DoubleRightOutlined, CaretUpFilled, CaretRightFilled, CaretDownFilled, CaretLeftFilled, PlusOutlined, LineOutlined, UpOutlined, RightOutlined, DownOutlined, LeftOutlined, RedoOutlined, UndoOutlined },
   props: {
     mode: {
       type: [Array, String],
       default: () => ['camera', 'locus']
     }
   },
-  setup() {
+  setup(props, { emit }) {
     const camera = reactive({
-      isCollpase: false
+      cameraShow: true,
+      locusShow: true,
+      config: {
+        up: 100,
+        down: 20,
+        move: 180,
+        redo: 65
+      },
+      configList: [
+        { label: '上升', key: 'up' },
+        { label: '下降', key: 'down' },
+        { label: '平移', key: 'move' },
+        { label: '自旋', key: 'redo' }
+      ]
     })
 
+    const getMode = computed(() => {
+      return isArray(props.mode) ? props.mode : [props.mode]
+    })
+
+    const handleClick = (num) => {
+      console.log(num)
+    }
+
     return {
-      ...toRefs(camera)
+      ...toRefs(camera),
+      getMode,
+      handleClick
     }
   }
 })
@@ -73,10 +156,9 @@ export default defineComponent({
 .control__container{
   position: relative;
   z-index: 99;
-  width: 300px;
   height: 220px;
   background: rgba(0, 0, 0, 1);
-  padding: 10px;
+  padding: 10px 15px 10px 10px;
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -95,6 +177,7 @@ export default defineComponent({
     }
     @for $i from 1 through 4{
       .item-#{$i}{
+        cursor: pointer;
         transform: rotate(90deg * ($i) - 45deg);
       }
     }
@@ -136,17 +219,44 @@ export default defineComponent({
   }
   &.open{
     transition: width 1s;
-    .control__close{
+    .control__close,.panel__title{
       display: none;
     }
   }
   &.closed{
     width: 70px;
     transition: width 1s;
-    .square__panel,.crcle__panel,.control__open{
+    .square__panel,.crcle__panel,.control__open,.config__panel{
       display: none;
     }
   }
+  .panel__title{
+    width: 16px;
+    color: rgba(255, 255, 255, 1);
+  }
+}
+.camera__panel{
+  width: 300px;
+}
+.locus__panel{
+  width: 600px;
+}
+.config__panel{
+  height: 160px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .config__item{
+    display: flex;
+    align-items: center;
+    span{
+      margin-right: 10px;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+  .n-input-number{
+    width: 100px;
+  }
 }
 
 .n-icon{

src/views/dashboard/components/WarningDrawer.vue

@@ -47,7 +47,12 @@
           </div>
         </div>
 
-        <ControlPanel />
+        <div class="control__panel">
+          <ControlPanel mode="camera" />
+        </div>
+        <div class="control__panel">
+          <ControlPanel mode="locus" />
+        </div>
       </div>
       <div ref="mapRef" class="warn__back">
         <Underlay />
@@ -204,6 +209,10 @@ export default defineComponent({
   }
 }
 
+.control__panel{
+  position: absolute;
+}
+
 ::v-deep(.side__control){
   .n-button{
     background: rgba(0, 119, 255, 0.3);