更新二代机控制台和分享功能

chenyao

2025-03-15 e9c5da455e223c6463b8d64d5663221b19ceb297

更新二代机控制台和分享功能

 src/api/drone/drc.ts

@@ -68,7 +68,7 @@
    return resp.data;
}
// 取消返航
export async function returnHomeCancel(params:{dock_sn:''}) {
export async function returnHomeCancel(params:any) {
    const resp = await request.post(
        `/dp/home/${params.dock_sn}/drc/returnHomeCancel`,
        params,

 src/mqtt/config.ts

@@ -15,11 +15,11 @@
  resubscribe: true, // 断开重连后，再次订阅原订阅
  reconnectPeriod: 10000, // 重连间隔时间： 5s
  keepalive: 5, // 心跳间隔时间：1s
  clientId: window?.globalApiConfig?.mqttConfig?.clientId || 'DroneWeb',
  username: window?.globalApiConfig?.mqttConfig?.username || 'root',
  password: window?.globalApiConfig?.mqttConfig?.password || 'root',
  host: window?.globalApiConfig?.mqttConfig?.host || '139.196.74.78',
  protocol: window?.globalApiConfig?.mqttConfig?.protocol || 'wss',
  clientId: 'DroneWeb',
  username: 'root',
  password: 'root',
  host: 'dev.jxpskj.com',
  protocol: 'wss',
  // 8083
  port: window?.globalApiConfig?.mqttConfig?.port || 8084,
  port: 8084,
}

 src/mqtt/index.ts

@@ -34,6 +34,7 @@
      ...OPTIONS,
      ...this._options,
    })
    console.log('测试链接', this._client)
    this._hasInit = true
    if (this._client) {
      this._client.on('reconnect', this._onReconnect)

 src/types/drc.ts

@@ -1,5 +1,4 @@
import store from '@/store'
console.log('哒哒哒',store.state.airPortInfo)
export enum DRC_METHOD {
  HEART_BEAT = 'heart_beat',
  DRONE_CONTROL = (store.state.airPortInfo.deviceType == 1 && store.state.airPortInfo.subType == 0 && store.state.airPortInfo.domain == 3 )?'drone_control':'stick_control', // 飞行控制-摇杆

 src/views/DronePilotDetails.vue

@@ -65,11 +65,13 @@
import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
import { getWebsocketUrl } from '@/websocket/util/config'
import { EBizCode, ELocalStorageKey, ERouterName } from '@/types'
import VConsole from 'vconsole';
// import VConsole from 'vconsole';
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js'
import { initPointWayLine } from './hooks/initPointWayline'
import { initPlanarWayline } from './hooks/initPlanarWayline'
import { droneFly } from './hooks/droneFly'
import ClipboardJS from 'clipboard';

const { pointWayline } = initPointWayLine()
const { planarWayline } = initPlanarWayline()
const { initDock, getPhoneLocation, clickPhoneLocation } = droneFly()
@@ -83,7 +85,7 @@
  loadLAYER,
} = cesiumOperation()

const vConsole = new VConsole();
// const vConsole = new VConsole();

const showShare = ref(false)

@@ -560,12 +562,53 @@
const onSelectShare = () => {
  saveToken({ token: localStorage.getItem(ELocalStorageKey.Token), sbInfo: window.localStorage.getItem('sbInfo') }).then((res) => {
    // if (res.code !==0) return
    const shareUrl = `https://wrj.shuixiongit.com/pilot-h5/#/dronePilotShare?code=${Number(res.data)}`
    navigator.clipboard.writeText(shareUrl).then(() => {
      showNotify({ type: 'success', message: '复制成功' })
    }).catch(() => {
      showNotify({ type: 'warning', message: '复制失败' })
    });
    let shareUrl = `https://wrj.shuixiongit.com/pilot-h5/#/dronePilotShare?code=${Number(res.data)}`
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(shareUrl).then(() => {
        showNotify({ type: 'success', message: '复制成功' })
      }).catch(err => {
        showNotify({ type: 'warning', message: '复制失败' })
      });
    } else {
      const input = document.createElement('input');
      input.value = shareUrl;
      document.body.appendChild(input);
      input.select();
      try {
        const success = document.execCommand('copy');
        if (success) {
          showNotify({ type: 'success', message: '复制成功' })
        } else {
          showNotify({ type: 'warning', message: '复制失败' })
        }
      } catch (err) {
        showNotify({ type: 'warning', message: '请手动选择并复制地址' })
      } finally {
        document.body.removeChild(input);
      }
    }
    
    // 创建临时按钮用于复制
    // const tempButton = document.createElement('button')
    // tempButton.setAttribute('data-clipboard-text', shareUrl)
    
    // // 初始化 Clipboard
    // const clipboard = new ClipboardJS(tempButton)
    
    // // 复制成功回调
    // clipboard.on('success', () => {
    //   showNotify({ type: 'success', message: '复制成功' })
    //   clipboard.destroy() // 销毁实例
    // })
    
    // // 复制失败回调
    // clipboard.on('error', () => {
    //   showNotify({ type: 'warning', message: '复制失败' })
    //   clipboard.destroy() // 销毁实例
    // })
    
    // // 触发复制
    // tempButton.click()
    showShare.value = false
  });
}

 src/views/DronePilotList.vue

@@ -39,7 +39,7 @@
import { getRoot } from '../../root'
import { ERouterName } from '@/types'
import { useMyStore } from '@/store'
import VConsole from 'vconsole';
// import VConsole from 'vconsole';

const root = getRoot()


 src/views/DronePilotShare.vue

@@ -56,7 +56,7 @@
  import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
  import { getWebsocketUrl } from '@/websocket/util/config'
  import { EBizCode, ELocalStorageKey, ERouterName } from '@/types'
  import VConsole from 'vconsole';
  // import VConsole from 'vconsole';
  import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz.js'
  import { initPointWayLine } from './hooks/initPointWayline'
  import { initPlanarWayline } from './hooks/initPlanarWayline'
@@ -74,7 +74,7 @@
    loadLAYER,
  } = cesiumOperation()
  
  const vConsole = new VConsole();
  // const vConsole = new VConsole();
  
  let globalViewer = null
  

 src/views/components/controlConsole.vue

@@ -1,8 +1,13 @@
<template>
  <div class="control-console">
    <!-- <div class="control-btn">
      <van-button @click="onBackDock">返航</van-button>
      <van-button @click="notonBackDock">取消返航</van-button>
    </div> -->
    <div class="control" :class="isShowKzBtn?'actived-blue':''" @click="authenticationPwd">
      <img src="@/assets/images/open-close.png" />
    </div>
    
    <div class="control-left" v-show="isShowKzBtn">
      <div class="top"  @touchstart="handlePublish('xq')"><div class="xq">向前</div></div>
      <div class="left" @touchstart="handlePublish('xz')"><div class="xz">向左</div></div>
@@ -55,6 +60,7 @@
let flightMode = ref('自动控制')

let genPortOne = ref(false)
console.log(store.state.airPortInfo.deviceType,store.state.airPortInfo.subType,store.state.airPortInfo.domain)
if (store.state.airPortInfo.deviceType == 1 && store.state.airPortInfo.subType == 0 && store.state.airPortInfo.domain == 3) {
  genPortOne.value = true
}
@@ -144,7 +150,7 @@

// 返航
const onBackDock = () => {
  returnHome(props.sn).then((res) => {
  returnHome(props.osdVisible.dockSn).then((res) => {
    if (res.code === 0) {
      nowInReturnStatus.value = true
      flightMode.value = '自动控制'
@@ -186,21 +192,21 @@
  // if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' });}
  let params = ref({})
  if (str === 'xq') {
    params.value = genPortOne.value ? { x: SPEED.value,seq: seq.value++ } : { x: (1024+SPEED.value),seq: seq.value++ }
    params.value = genPortOne.value ? { x: SPEED.value,seq: seq.value++ } : { pitch: (1024+SPEED.value),seq: seq.value++ }
  } else if(str === 'xz') {
    params.value = genPortOne.value ? { y: -SPEED.value,seq: seq.value++ } : { y: (1024-SPEED.value),seq: seq.value++ }
    params.value = genPortOne.value ? { y: -SPEED.value,seq: seq.value++ } : { roll: (1024-SPEED.value),seq: seq.value++ }
  } else if(str === 'xx') {
    params.value = genPortOne.value ? { x: -SPEED.value,seq: seq.value++ } : { x: (1024-SPEED.value),seq: seq.value++ }
    params.value = genPortOne.value ? { x: -SPEED.value,seq: seq.value++ } : { pitch: (1024-SPEED.value),seq: seq.value++ }
  } else if(str === 'xy') {
    params.value = genPortOne.value ? { y: SPEED.value,seq: seq.value++ } :  { y: (1024+SPEED.value),seq: seq.value++ }
    params.value = genPortOne.value ? { y: SPEED.value,seq: seq.value++ } :  { roll: (1024+SPEED.value),seq: seq.value++ }
  } else if(str === 'ss') {
    params.value = genPortOne.value ? { h: HEIGHT.value,seq: seq.value++ } : { h: (1024+HEIGHT.value),seq: seq.value++ }
    params.value = genPortOne.value ? { h: HEIGHT.value,seq: seq.value++ } : { throttle: (1024+HEIGHT.value),seq: seq.value++ }
  } else if(str === 'zz') {
    params.value = genPortOne.value ? { w: -W_SPEED.value,seq: seq.value++ } : { w: (1024-W_SPEED.value),seq: seq.value++ }
    params.value = genPortOne.value ? { w: -W_SPEED.value,seq: seq.value++ } : { yaw: (1024-W_SPEED.value),seq: seq.value++ }
  } else if(str === 'xj') {
    params.value = genPortOne.value ? { h: -HEIGHT.value,seq: seq.value++ } :  { h: (1024-HEIGHT.value),seq: seq.value++ }
    params.value = genPortOne.value ? { h: -HEIGHT.value,seq: seq.value++ } :  { throttle: (1024-HEIGHT.value),seq: seq.value++ }
  } else if(str === 'yz') {
    params.value = genPortOne.value ? { w: W_SPEED.value,seq: seq.value++ } :  { w: (1024+W_SPEED.value),seq: seq.value++ }
    params.value = genPortOne.value ? { w: W_SPEED.value,seq: seq.value++ } :  { yaw: (1024+W_SPEED.value),seq: seq.value++ }
  }
  const body = { method: genPortOne.value?'drone_control':'stick_control', data: params.value}
  mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, {qos: 0})
@@ -214,6 +220,21 @@

<style lang="scss" scoped>
.control-console {
  // .control-btn {
  //   position: absolute;
  //   top: 0rem;
  //   right: 0.2rem;
  //   // width: 2rem;
  //   // height: 2rem;
  //   border-radius: 3px;
  //   background-color: rgba(0, 0, 0, 0.5);
  //   // display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   overflow: hidden;
  //   cursor: pointer;
  //   pointer-events: all;
  // }
  
  .control {
    position: absolute;