汉化无人机飞行控制

Web/src/components/airport/components/InfoModal.vue

@@ -154,10 +154,9 @@
             </div>
             <div class="content-aircraft-head-right-bottom-icon">
               <a-tooltip title="操作">
-                <!-- <img :src="aircraftSelectedSrc" @click="state.droneControlPanelVisible = false"
+                <img :src="aircraftSelectedSrc" @click="state.droneControlPanelVisible = false"
                   v-if="state.droneControlPanelVisible">
-                <img :src="aircraftSrc" @click="state.droneControlPanelVisible = true" v-else> -->
-                <img style="cursor: not-allowed;" :src="aircraftSrc">
+                <img :src="aircraftSrc" @click="state.droneControlPanelVisible = true" v-else>
               </a-tooltip>
             </div>
           </div>

Web/src/components/g-map/DroneControlPanel.vue

@@ -1,163 +1,189 @@
 <template>
   <div class="drone-control-wrapper">
-    <div class="drone-control-header">Drone Flight Control</div>
-    <div class="drone-control-box">
-      <div class="box">
-        <div class="row">
-          <div class="drone-control"><Button :ghost="!flightController" size="small" @click="onClickFightControl">{{
-            flightController ? 'Exit Remote Control' : 'Enter Remote Control' }}</Button></div>
-        </div>
-        <div class="row">
-          <div class="drone-control-direction">
-            <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_Q)" @onmouseup="onMouseUp">
-              <template #icon>
-                <UndoOutlined />
-              </template><span class="word">Q</span>
-            </Button>
-            <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_W)" @onmouseup="onMouseUp">
-              <template #icon>
-                <UpOutlined />
-              </template><span class="word">W</span>
-            </Button>
-            <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_E)" @onmouseup="onMouseUp">
-              <template #icon>
-                <RedoOutlined />
-              </template><span class="word">E</span>
-            </Button>
-            <Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_UP)" @onmouseup="onMouseUp">
-              <template #icon>
-                <ArrowUpOutlined />
-              </template>
-            </Button>
-            <br />
-            <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_A)" @onmouseup="onMouseUp">
-              <template #icon>
-                <LeftOutlined />
-              </template><span class="word">A</span>
-            </Button>
-            <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_S)" @onmouseup="onMouseUp">
-              <template #icon>
-                <DownOutlined />
-              </template><span class="word">S</span>
-            </Button>
-            <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_D)" @onmouseup="onMouseUp">
-              <template #icon>
-                <RightOutlined />
-              </template><span class="word">D</span>
-            </Button>
-            <Button size="small" ghost @mousedown="onMouseDown(KeyCode.ARROW_DOWN)" @onmouseup="onMouseUp">
-              <template #icon>
-                <ArrowDownOutlined />
-              </template>
-            </Button>
+    <div class="drone-control-header">
+      无人机飞行控制
+    </div>
+    <div class="drone-control-button">
+      <Button style="margin-right: 10px;" :ghost="!flightController" size="small" @click="onClickFightControl">
+        {{ flightController ? '退出远程控制' : '进入远程控制' }}
+      </Button>
+      <Button type="primary" size="small" danger ghost @click="handleEmergencyStop">
+        <template #icon>
+          <PauseCircleOutlined />
+        </template>
+        <span>中止</span>
+      </Button>
+    </div>
+    <div class="drone-control-more">
+      <a-tooltip title="左旋转">
+        <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_Q)" @onmouseup="onMouseUp">
+          <template #icon>
+            <UndoOutlined />
+          </template>
+          <span class="word">Q</span>
+        </Button>
+      </a-tooltip>
+      <a-tooltip title="前进">
+        <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_W)" @onmouseup="onMouseUp">
+          <template #icon>
+            <UpOutlined />
+          </template>
+          <span class="word">W</span>
+        </Button>
+      </a-tooltip>
+      <a-tooltip title="右旋转">
+        <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_E)" @onmouseup="onMouseUp">
+          <template #icon>
+            <RedoOutlined />
+          </template>
+          <span class="word">E</span>
+        </Button>
+      </a-tooltip>
+      <a-tooltip title="上升">
+        <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_C)" @onmouseup="onMouseUp">
+          <template #icon>
+            <ArrowUpOutlined />
+          </template>
+          <span class="word">C</span>
+        </Button>
+      </a-tooltip>
+    </div>
+    <div class="drone-control-more">
+      <a-tooltip title="左平移">
+        <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_A)" @onmouseup="onMouseUp">
+          <template #icon>
+            <LeftOutlined />
+          </template>
+          <span class="word">A</span>
+        </Button>
+      </a-tooltip>
+      <a-tooltip title="后退">
+        <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_S)" @onmouseup="onMouseUp">
+          <template #icon>
+            <DownOutlined />
+          </template>
+          <span class="word">S</span>
+        </Button>
+      </a-tooltip>
+      <a-tooltip title="右平移">
+        <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_D)" @onmouseup="onMouseUp">
+          <template #icon>
+            <RightOutlined />
+          </template>
+          <span class="word">D</span>
+        </Button>
+      </a-tooltip>
+      <a-tooltip title="下降">
+        <Button size="small" ghost @mousedown="onMouseDown(KeyCode.KEY_Z)" @onmouseup="onMouseUp">
+          <template #icon>
+            <ArrowDownOutlined />
+          </template>
+          <span class="word">Z</span>
+        </Button>
+      </a-tooltip>
+    </div>
+    <Button style="margin-right: 10px;" size="small" ghost @click="onShowTakeoffToPointPopover">
+      <span>一键起飞</span>
+    </Button>
+    <DroneControlPopover :visible="flyToPointPopoverData.visible" :loading="flyToPointPopoverData.loading"
+      @confirm="($event) => onFlyToConfirm(true)" @cancel="($event) => onFlyToConfirm(false)">
+      <template #formContent>
+        <div class="form-content">
+          <div>
+            <span class="form-label">latitude:</span>
+            <a-input-number v-model:value="flyToPointPopoverData.latitude" />
+          </div>
+          <div>
+            <span class="form-label">longitude:</span>
+            <a-input-number v-model:value="flyToPointPopoverData.longitude" />
+          </div>
+          <div>
+            <span class="form-label">height(m):</span>
+            <a-input-number v-model:value="flyToPointPopoverData.height" />
           </div>
-          <Button type="primary" size="small" danger ghost @click="handleEmergencyStop">
-            <template #icon>
-              <PauseCircleOutlined />
-            </template><span>Break</span>
-          </Button>
         </div>
-        <div class="row">
-          <DroneControlPopover :visible="flyToPointPopoverData.visible" :loading="flyToPointPopoverData.loading"
-            @confirm="($event) => onFlyToConfirm(true)" @cancel="($event) => onFlyToConfirm(false)">
-            <template #formContent>
-              <div class="form-content">
-                <div>
-                  <span class="form-label">latitude:</span>
-                  <a-input-number v-model:value="flyToPointPopoverData.latitude" />
-                </div>
-                <div>
-                  <span class="form-label">longitude:</span>
-                  <a-input-number v-model:value="flyToPointPopoverData.longitude" />
-                </div>
-                <div>
-                  <span class="form-label">height(m):</span>
-                  <a-input-number v-model:value="flyToPointPopoverData.height" />
-                </div>
-              </div>
-            </template>
-            <Button size="small" ghost @click="onShowFlyToPopover">
-              <span>Fly to</span>
-            </Button>
-          </DroneControlPopover>
-          <Button size="small" ghost @click="onStopFlyToPoint">
-            <span>Stop Fly to</span>
-          </Button>
-          <DroneControlPopover :visible="takeoffToPointPopoverData.visible" :loading="takeoffToPointPopoverData.loading"
-            @confirm="($event) => onTakeoffToPointConfirm(true)" @cancel="($event) => onTakeoffToPointConfirm(false)">
-            <template #formContent>
-              <div class="form-content">
-                <div>
-                  <span class="form-label">latitude:</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.latitude" />
-                </div>
-                <div>
-                  <span class="form-label">longitude:</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.longitude" />
-                </div>
-                <div>
-                  <span class="form-label">height(m):</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.height" />
-                </div>
-                <div>
-                  <span class="form-label">Safe Takeoff Altitude(m):</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.securityTakeoffHeight" />
-                </div>
-                <div>
-                  <span class="form-label">Return-to-Home Altitude(m):</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.rthAltitude" />
-                </div>
-                <div>
-                  <span class="form-label">Lost Action:</span>
-                  <a-select v-model:value="takeoffToPointPopoverData.rcLostAction" style="width: 120px"
-                    :options="LostControlActionInCommandFLightOptions"></a-select>
-                </div>
-                <div>
-                  <span class="form-label">Wayline Lost Action:</span>
-                  <a-select v-model:value="takeoffToPointPopoverData.exitWaylineWhenRcLost" style="width: 120px"
-                    :options="WaylineLostControlActionInCommandFlightOptions"></a-select>
-                </div>
-                <div>
-                  <span class="form-label">Return-to-Home Mode:</span>
-                  <a-select v-model:value="takeoffToPointPopoverData.rthMode" style="width: 120px"
-                    :options="RthModeInCommandFlightOptions"></a-select>
-                </div>
-                <div>
-                  <span class="form-label">Commander Mode Lost Action:</span>
-                  <a-select v-model:value="takeoffToPointPopoverData.commanderModeLostAction" style="width: 120px"
-                    :options="CommanderModeLostActionInCommandFlightOptions"></a-select>
-                </div>
-                <div>
-                  <span class="form-label">Commander Flight Mode:</span>
-                  <a-select v-model:value="takeoffToPointPopoverData.commanderFlightMode" style="width: 120px"
-                    :options="CommanderFlightModeInCommandFlightOptions"></a-select>
-                </div>
-                <div>
-                  <span class="form-label">Commander Flight Height(m):</span>
-                  <a-input-number v-model:value="takeoffToPointPopoverData.commanderFlightHeight" />
-                </div>
-              </div>
-            </template>
-            <Button size="small" ghost @click="onShowTakeoffToPointPopover">
-              <span>Take off</span>
-            </Button>
-            <div v-for="(cmdItem) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
-              <Button :loading="cmdItem.loading" size="small" ghost @click="sendControlCmd(cmdItem, 0)">
-                {{ cmdItem.operateText }}
-              </Button>
+      </template>
+      <Button size="small" ghost @click="onShowFlyToPopover">
+        <span>飞向目标点</span>
+      </Button>
+    </DroneControlPopover>
+    <Button style="margin-left: 10px;" size="small" ghost @click="onStopFlyToPoint">
+      <span>中止飞向目标点</span>
+    </Button>
+    <div style="margin-top: 10px;">
+      <DroneControlPopover :visible="takeoffToPointPopoverData.visible" :loading="takeoffToPointPopoverData.loading"
+        @confirm="($event) => onTakeoffToPointConfirm(true)" @cancel="($event) => onTakeoffToPointConfirm(false)">
+        <template #formContent>
+          <div class="form-content">
+            <div>
+              <span class="form-label">latitude:</span>
+              <a-input-number v-model:value="takeoffToPointPopoverData.latitude" />
             </div>
             <div>
-              <Button size="small" ghost @click="openLivestreamAgora">
-                <span>Agora Live</span>
-              </Button>
-              <Button size="small" ghost @click="openLivestreamOthers">
-                <span>RTMP/GB28181 Live</span>
-              </Button>
+              <span class="form-label">longitude:</span>
+              <a-input-number v-model:value="takeoffToPointPopoverData.longitude" />
             </div>
-          </DroneControlPopover>
-        </div>
-      </div>
-      <!-- <div class="box">
+            <div>
+              <span class="form-label">height(m):</span>
+              <a-input-number v-model:value="takeoffToPointPopoverData.height" />
+            </div>
+            <div>
+              <span class="form-label">Safe Takeoff Altitude(m):</span>
+              <a-input-number v-model:value="takeoffToPointPopoverData.securityTakeoffHeight" />
+            </div>
+            <div>
+              <span class="form-label">Return-to-Home Altitude(m):</span>
+              <a-input-number v-model:value="takeoffToPointPopoverData.rthAltitude" />
+            </div>
+            <div>
+              <span class="form-label">Lost Action:</span>
+              <a-select v-model:value="takeoffToPointPopoverData.rcLostAction" style="width: 120px"
+                :options="LostControlActionInCommandFLightOptions"></a-select>
+            </div>
+            <div>
+              <span class="form-label">Wayline Lost Action:</span>
+              <a-select v-model:value="takeoffToPointPopoverData.exitWaylineWhenRcLost" style="width: 120px"
+                :options="WaylineLostControlActionInCommandFlightOptions"></a-select>
+            </div>
+            <div>
+              <span class="form-label">Return-to-Home Mode:</span>
+              <a-select v-model:value="takeoffToPointPopoverData.rthMode" style="width: 120px"
+                :options="RthModeInCommandFlightOptions"></a-select>
+            </div>
+            <div>
+              <span class="form-label">Commander Mode Lost Action:</span>
+              <a-select v-model:value="takeoffToPointPopoverData.commanderModeLostAction" style="width: 120px"
+                :options="CommanderModeLostActionInCommandFlightOptions"></a-select>
+            </div>
+            <div>
+              <span class="form-label">Commander Flight Mode:</span>
+              <a-select v-model:value="takeoffToPointPopoverData.commanderFlightMode" style="width: 120px"
+                :options="CommanderFlightModeInCommandFlightOptions"></a-select>
+            </div>
+            <div>
+              <span class="form-label">Commander Flight Height(m):</span>
+              <a-input-number v-model:value="takeoffToPointPopoverData.commanderFlightHeight" />
+            </div>
+          </div>
+        </template>
+        <span v-for="(cmdItem) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
+          <Button style="margin-right: 10px;" :loading="cmdItem.loading" size="small" ghost
+            @click="sendControlCmd(cmdItem, 0)">
+            {{ cmdItem.operateText }}
+          </Button>
+        </span>
+      </DroneControlPopover>
+    </div>
+    <!-- <div>
+      <Button size="small" ghost @click="openLivestreamAgora">
+        <span>Agora Live</span>
+      </Button>
+      <Button size="small" ghost @click="openLivestreamOthers">
+        <span>RTMP/GB28181 Live</span>
+      </Button>
+    </div> -->
+    <!-- <div class="drone-control-box">
+      <div class="box">
         <div class="row">
           <Select v-model:value="payloadSelectInfo.value" style="width: 110px; marginRight: 5px"
             :options="payloadSelectInfo.options" @change="handlePayloadChange" />
@@ -244,8 +270,8 @@
             </Button>
           </DroneControlPopover>
         </div>
-      </div> -->
-    </div>
+      </div>
+    </div> -->
     <!-- 信息提示 -->
     <!-- <DroneControlInfoPanel :message="drcInfo"></DroneControlInfoPanel> -->
   </div>
@@ -749,61 +775,36 @@ watch(() => errorInfo, (errorInfo) => {
 
 <style lang='scss' scoped>
 .drone-control-wrapper {
-  // border-bottom: 1px solid #515151;
+  padding: 10px 10px 20px;
+  border-top: 1px solid #515151;
 
   .drone-control-header {
     font-size: 14px;
     font-weight: 600;
-    padding: 10px 10px 0px;
+    margin-bottom: 10px;
   }
 
-  .drone-control-box {
-    display: flex;
-    flex-wrap: 1;
-
-    .box {
-      width: 50%;
-      padding: 5px;
-      border: 0.5px solid rgba(255, 255, 255, 0.3);
-
-      .row {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 2px;
-
-        +.row {
-          margin-bottom: 6px;
-        }
-
-        :deep(.ant-btn) {
-          font-size: 12px;
-          padding: 0px 4px;
-          margin-right: 5px;
-        }
-      }
-
-      .drone-control {
-        :deep(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
-          padding: 0 2px;
-
-        }
-      }
+  .drone-control-button {
+    margin-bottom: 10px;
+  }
 
-      .drone-control-direction {
-        margin-right: 10px;
+  .drone-control-more {
+    width: 48%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
 
-        .ant-btn {
-          margin-right: 0;
-        }
+    .ant-btn {
+      margin-right: 0;
+      height: 32px;
+    }
 
-        .word {
-          width: 12px;
-          margin-left: 2px;
-          font-size: 12px;
-          color: #aaa;
-        }
-      }
+    .word {
+      width: 14px;
+      margin-left: 2px;
+      font-size: 14px;
+      color: #aaa;
     }
   }
 }
-</style>
+</style>

Web/src/components/g-map/use-manual-control.ts

@@ -23,15 +23,17 @@ export enum KeyCode {
   KEY_D = 'KeyD',
   KEY_Q = 'KeyQ',
   KEY_E = 'KeyE',
+  KEY_C = 'KeyC',
+  KEY_Z = 'KeyZ',
   ARROW_UP = 'ArrowUp',
   ARROW_DOWN = 'ArrowDown',
 }
 
-export function useManualControl (deviceTopicInfo: DeviceTopicInfo, isCurrentFlightController: Ref<boolean>) {
+export function useManualControl(deviceTopicInfo: DeviceTopicInfo, isCurrentFlightController: Ref<boolean>) {
   const activeCodeKey = ref(null) as Ref<KeyCode | null>
   const mqttHooks = useMqtt(deviceTopicInfo)
   let seq = 0
-  function handlePublish (params: DroneControlProtocol) {
+  function handlePublish(params: DroneControlProtocol) {
     const body = {
       method: DRC_METHOD.DRONE_CONTROL,
       data: params,
@@ -45,7 +47,9 @@ export function useManualControl (deviceTopicInfo: DeviceTopicInfo, isCurrentFli
     }, 50)
   }
 
-  function handleKeyup (keyCode: KeyCode) {
+  function handleKeyup(keyCode: KeyCode) {
+    console.log(213);
+
     if (!deviceTopicInfo.pubTopic) {
       message.error('请确保已经建立DRC链路')
       return
@@ -75,24 +79,24 @@ export function useManualControl (deviceTopicInfo: DeviceTopicInfo, isCurrentFli
         handlePublish({ y: SPEED })
         activeCodeKey.value = keyCode
         break
-      case 'ArrowUp':
+      case 'KeyQ':
         if (activeCodeKey.value === keyCode) return
-        handlePublish({ h: HEIGHT })
+        handlePublish({ w: -W_SPEED })
         activeCodeKey.value = keyCode
         break
-      case 'ArrowDown':
+      case 'KeyE':
         if (activeCodeKey.value === keyCode) return
-        handlePublish({ h: -HEIGHT })
+        handlePublish({ w: W_SPEED })
         activeCodeKey.value = keyCode
         break
-      case 'KeyQ':
+      case 'KeyC':
         if (activeCodeKey.value === keyCode) return
-        handlePublish({ w: -W_SPEED })
+        handlePublish({ h: HEIGHT })
         activeCodeKey.value = keyCode
         break
-      case 'KeyE':
+      case 'KeyZ':
         if (activeCodeKey.value === keyCode) return
-        handlePublish({ w: W_SPEED })
+        handlePublish({ h: -HEIGHT })
         activeCodeKey.value = keyCode
         break
       default:
@@ -100,31 +104,31 @@ export function useManualControl (deviceTopicInfo: DeviceTopicInfo, isCurrentFli
     }
   }
 
-  function handleClearInterval () {
+  function handleClearInterval() {
     clearInterval(myInterval)
     myInterval = undefined
   }
 
-  function resetControlState () {
+  function resetControlState() {
     activeCodeKey.value = null
     seq = 0
     handleClearInterval()
   }
 
-  function onKeyup () {
+  function onKeyup() {
     resetControlState()
   }
 
-  function onKeydown (e: KeyboardEvent) {
+  function onKeydown(e: KeyboardEvent) {
     handleKeyup(e.code as KeyCode)
   }
 
-  function startKeyboardManualControl () {
+  function startKeyboardManualControl() {
     window.addEventListener('keydown', onKeydown)
     window.addEventListener('keyup', onKeyup)
   }
 
-  function closeKeyboardManualControl () {
+  function closeKeyboardManualControl() {
     resetControlState()
     window.removeEventListener('keydown', onKeydown)
     window.removeEventListener('keyup', onKeyup)
@@ -142,7 +146,7 @@ export function useManualControl (deviceTopicInfo: DeviceTopicInfo, isCurrentFli
     closeKeyboardManualControl()
   })
 
-  function handleEmergencyStop () {
+  function handleEmergencyStop() {
     if (!deviceTopicInfo.pubTopic) {
       message.error('请确保已经建立DRC链路')
       return

Web/src/types/device-cmd.ts

@@ -42,17 +42,17 @@ export interface DeviceCmdItem {
 }
 export const noDebugCmdList: DeviceCmdItem[] = [
   {
-    label: 'Return Home',
+    label: '一键返航',
     status: '--',
-    operateText: 'Return Home',
+    operateText: '一键返航',
     cmdKey: DeviceCmd.ReturnHome,
     func: 'returnHome',
     loading: false,
   },
   {
-    label: 'Return Home Cancel',
+    label: '中止一键返航',
     status: '--',
-    operateText: 'Return Home Cancel',
+    operateText: '中止一键返航',
     cmdKey: DeviceCmd.ReturnHomeCancel,
     func: 'returnHomeCancel',
     loading: false,