Merge branch 'develop' of http://192.168.11.14:51037/gitadmin/tuoheng_lc_web into wangmengqi

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" @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>
+      <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" @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>
+      <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/FireAlarm.vue

@@ -124,7 +124,8 @@ export default {
       airValue: 0,
       warningPic: null,
       recoedList: [],
-      warningShow: false
+      warningShow: false,
+      missionId: null
     })
 
     watch(() => props.data, (value) => {
@@ -149,7 +150,10 @@ export default {
 
       Promise.all([await getWarningInfo(value.id), await getWarningRecord({ warningId: value.id })])
         .then(([info, record]) => {
-          data.warningPic = info?.data?.fileMarkerUrl
+          // 分析后的图片
+          data.warningPic = info?.data?.fileMarkerUrl || null
+          // 任务id
+          data.missionId = info?.data?.missionId || null
           showUsableAirport(info)
           showWarningRecord(record)
         })
@@ -219,6 +223,7 @@ export default {
 
     const test = () => {
       handleExecute()
+      console.log(data.warningInfo)
     }
 
     // 忽略预警

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">
@@ -47,7 +47,10 @@
           </div>
         </div>
 
-        <ControlPanel />
+        <div class="control__panel">
+          <ControlPanel v-if="showControl" mode="camera" />
+          <ControlPanel v-if="showControl" mode="locus" />
+        </div>
       </div>
       <div ref="mapRef" class="warn__back">
         <Underlay />
@@ -61,7 +64,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'
 import Echarts from './Echarts.vue'
@@ -90,7 +93,10 @@ export default defineComponent({
     const videoRef = ref()
 
     const data = reactive({
-      hasChanged: false
+      hasChanged: false,
+      showControl: false,
+      operate: '悬停',
+      control: '手动控制'
     })
 
     /* 获取抽屉的信息 */
@@ -109,7 +115,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)
@@ -120,26 +125,57 @@ export default defineComponent({
         sideRef.value?.appendChild(videoRef.value)
       }
       data.hasChanged = !data.hasChanged
+      window.dispatchEvent(new Event('resize'))
     }
 
     watch(() => props.visible, (value) => {
       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
     }
   }
 })
@@ -206,6 +242,12 @@ export default defineComponent({
   }
 }
 
+.control__panel{
+  position: absolute;
+  bottom: 0;
+  display: flex;
+}
+
 ::v-deep(.side__control){
   .n-button{
     background: rgba(0, 119, 255, 0.3);