From bdc6d8733ae6eeb3a9762e77dbabe21441336474 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Thu, 13 Mar 2025 17:20:36 +0800
Subject: [PATCH] 更新分享

---
 src/views/DronePilotShare.vue                 |  638 ++++++++
 src/views/components/controlConsole-copy.vue  | 1138 ++++++++++++++
 package-lock.json                             |    6 
 src/views/DronePilotDetails.vue               |  113 
 src/store/index.ts                            |   19 
 src/api/http/request.ts                       |    9 
 src/types/enums.ts                            |    1 
 vite.config.ts                                |    4 
 src/views/DronePilotDetails-copy0303.vue      |  685 ++++++++
 src/views/components/controlConsole-copy1.vue | 1154 ++++++++++++++
 src/types/drc.ts                              |    4 
 tsconfig.json                                 |    2 
 src/api/manage.ts                             |   14 
 src/utils/mqtt/index.ts                       |   15 
 package.json                                  |    1 
 src/views/hooks/droneFly.ts                   |   23 
 src/router/index.ts                           |    5 
 src/views/DronePilotList.vue                  |    2 
 src/views/components/controlConsole.vue       |  848 ----------
 19 files changed, 3,803 insertions(+), 878 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe6f1ae..a4c055e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@turf/turf": "^6.5.0",
         "axios": "^0.21.1",
         "cesium": "^1.95.0",
+        "crypto-js": "^4.2.0",
         "element-plus": "^2.9.2",
         "eventemitter3": "^5.0.0",
         "flv.js": "^1.6.2",
@@ -4106,6 +4107,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
diff --git a/package.json b/package.json
index ea58a6f..5406762 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@turf/turf": "^6.5.0",
     "axios": "^0.21.1",
     "cesium": "^1.95.0",
+    "crypto-js": "^4.2.0",
     "element-plus": "^2.9.2",
     "eventemitter3": "^5.0.0",
     "flv.js": "^1.6.2",
diff --git a/src/api/http/request.ts b/src/api/http/request.ts
index 1bdf3a5..153b0a9 100644
--- a/src/api/http/request.ts
+++ b/src/api/http/request.ts
@@ -67,10 +67,8 @@
     url: string
     authorization: boolean
   }) => {
-    if(config.url.includes('h5')) {
-      config.url = '/drone-h5' + config.url
-    } else if (!config.url.includes('/blade-') && !config.url.includes('https://') && !config.url.includes('http://')) {
-      config.url = '/drone-yw' + config.url
+    if (!config.url.includes('/blade-') && !config.url.includes('https://') && !config.url.includes('http://')) {
+      config.url = '/drone-device-core' + config.url
     }
     const authorization = config.authorization === false
     if (!authorization) {
@@ -81,6 +79,9 @@
     const isToken = meta.isToken === false
     if (getToken() && !isToken) {
       config.headers[website.tokenHeader] = 'bearer ' + getToken()
+    } else {
+      // 为了兼容分享页面
+      config.headers[website.tokenHeader] = 'bearer ' + getAuthToken()
     }
     if (meta.noCookie) {
       delete config.headers.cookie
diff --git a/src/api/manage.ts b/src/api/manage.ts
index 6539e93..3107476 100644
--- a/src/api/manage.ts
+++ b/src/api/manage.ts
@@ -125,6 +125,20 @@
   return result.data
 }
 
+// 分享功能先保存token
+export const saveToken = async function (body:any): Promise<IWorkspaceResponse<any>> {
+  const url = `${HTTP_PREFIX_H5}/saveToken`
+  const result = await request.post(url,body)
+  return result.data
+}
+
+// 分享功能先保存code
+export const getTokenByCode = async function (code: string): Promise<IWorkspaceResponse<any>> {
+  const url = `${HTTP_PREFIX_H5}/getTokenByCode?code=${code}`
+  const result = await request.get(url)
+  return result.data
+}
+
 // Get User Info
 export const getUserInfo = async function (): Promise<IWorkspaceResponse<any>> {
   const url = `${HTTP_PREFIX}/users/current`
diff --git a/src/router/index.ts b/src/router/index.ts
index ee65479..05719a1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -44,6 +44,11 @@
     component: () => import('@/views/DronePilotDetails.vue')
   },
   {
+    path: '/dronePilotShare',
+    name: ERouterName.DRONEPILOTSHARE,
+    component: () => import('@/views/DronePilotShare.vue')
+  },
+  {
     path: '/' + ERouterName.DRONE,
     name: ERouterName.DRONE,
     component: () => import('@/views/drone/index.vue')
diff --git a/src/store/index.ts b/src/store/index.ts
index bdde78d..1ad14d8 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -74,6 +74,20 @@
     psdk_widget_values: {},
     speakerAudioPlayStartProgress: {},
   },
+  airPortInfo: {
+    sn: '',
+    workspaceId: '',
+    subType: 0,
+    name: '',
+    longitude: 0,
+    latitude: 0,
+    isOnline: false,
+    height: 0,
+    domain: 0,
+    dockSn: '',
+    deviceType: 0,
+    children: {}
+  }, // 保存机场信息
   osdVisible: { // osd 显示设备相关信息
     sn: '',
     callsign: '',
@@ -185,6 +199,10 @@
     state.osdVisible = Object.assign({}, info)
     window.localStorage.setItem('bs_osd', JSON.stringify(info))
   },
+  // 保存机场信息
+  SET_AIRPORT_INFO (state, info) {
+    state.airPortInfo = info
+  },
   SET_SELECT_WAYLINE_INFO (state, info) {
     state.waylineInfo = info
   },
@@ -241,7 +259,6 @@
   },
   // 设置视角
   SET_CURRENTANGLE (state, currentAngle) {
-    console.log('120')
     state.currentAngle = currentAngle
   }
 }
diff --git a/src/types/drc.ts b/src/types/drc.ts
index ae83404..a5d867b 100644
--- a/src/types/drc.ts
+++ b/src/types/drc.ts
@@ -1,6 +1,8 @@
+import store from '@/store'
+console.log('哒哒哒',store.state.airPortInfo)
 export enum DRC_METHOD {
   HEART_BEAT = 'heart_beat',
-  DRONE_CONTROL = 'drone_control', // 飞行控制-虚拟摇杆
+  DRONE_CONTROL = (store.state.airPortInfo.deviceType == 1 && store.state.airPortInfo.subType == 0 && store.state.airPortInfo.domain == 3 )?'drone_control':'stick_control', // 飞行控制-摇杆
   DRONE_EMERGENCY_STOP = 'drone_emergency_stop', // 急停
   OSD_INFO_PUSH = 'osd_info_push', // 高频osd信息上报
   HSI_INFO_PUSH = 'hsi_info_push', // 避障信息上报
diff --git a/src/types/enums.ts b/src/types/enums.ts
index 61452dc..2e7f39a 100644
--- a/src/types/enums.ts
+++ b/src/types/enums.ts
@@ -3,6 +3,7 @@
     LOGIN = 'login',
     DRONEPILOTLIST = 'dronePilotList',
     DRONEPILOTDETAILS = 'dronePilotDetails',
+    DRONEPILOTSHARE = 'dronePilotShare',
     DRONE = 'drone',
     PROJECT = 'project',
     ADD_PROJECT = 'add_project',
diff --git a/src/utils/mqtt/index.ts b/src/utils/mqtt/index.ts
index fa25eaa..71e5e2b 100644
--- a/src/utils/mqtt/index.ts
+++ b/src/utils/mqtt/index.ts
@@ -81,25 +81,22 @@
 
   // 心跳
   const heartBeatSeq = ref(0)
-  const state = reactive({
-    heartState: new Map<string, {
-      pingInterval: any;
-    }>(),
-  })
+  const state = reactive({heartState: new Map()})
 
   // 监听云控控制权
   watch(() => deviceTopicInfo, (val, oldVal) => {
     if (val.subTopic !== '') {
-      // 1.订阅topic
       subscribeMqtt(deviceTopicInfo.subTopic)
-      // 2.发心跳
       publishDrcPing(deviceTopicInfo.sn)
     } else {
-      clearInterval(state.heartState.get(deviceTopicInfo.sn)?.pingInterval)
+      const heartState = state.heartState.get(deviceTopicInfo.sn)
+      if (heartState && heartState.pingInterval) {
+        clearInterval(heartState.pingInterval)
+      }
       state.heartState.delete(deviceTopicInfo.sn)
       heartBeatSeq.value = 0
     }
-  }, { immediate: true, deep: true })
+}, { immediate: true, deep: true })
 
   function publishDrcPing (sn: string) {
     const body = {
diff --git a/src/views/DronePilotDetails-copy0303.vue b/src/views/DronePilotDetails-copy0303.vue
new file mode 100644
index 0000000..c723c4e
--- /dev/null
+++ b/src/views/DronePilotDetails-copy0303.vue
@@ -0,0 +1,685 @@
+<template>
+    <div class="drone-pilot-details" :style="{ width: screenWidth,height: screenHeight}">
+      <van-nav-bar
+        title="详情"
+        left-arrow
+        @click-left="onClickLogin"
+      />
+      <div id="landscapeBox" class="landscape-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px'}">
+        <div id="videoModule" class="l-video" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">
+          <video v-show="videoUrl" ref="videoPlayerBig" :style="{ width: screenWidthVideo + 'px', height: screenHeightVideo + 'px'}" controls autoplay muted playsinline style="text-align: left; object-fit: fill">
+            Your browser is too old which doesn't support HTML5 video.
+          </video>
+          <el-empty v-show="videoUrl == ''" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>
+          <div v-if="videoUrl" class="center-point"></div>
+          <div class="right-box">
+            <ptzControl :sn="sn" :osdVisible="sbInfo"/>
+            <controlConsole :sn="sn" :osdVisible="sbInfo" :cesiumViewe="globalViewer" />
+          </div>
+        </div>
+        <div class="l-map" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">
+          <div id="cesiumContainerBigMap"></div>
+          <div class="l-zp" id="lZp">
+            <comPass :cesiumViewe="globalViewer"/>
+          </div>
+          <div class="l-zoom" id="lZoom">
+            <div class="zoom">
+              <img src="@/assets/images/me.png" @touchstart="clickPhoneLocation" />
+            </div>
+            <div class="zoom" @touchstart="onChangeD">
+              <img v-if="is2d" src="@/assets/images/stand.png" />
+              <img v-else src="@/assets/images/satellite.png" />
+            </div>
+            <div class="zoom">
+              <img v-if="!isBigMap" src="@/assets/images/fang.png" @touchstart="changeModelMap" />
+              <img v-else src="@/assets/images/suo.png" @touchstart="changeModelMap" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
+  import { EDeviceTypeName, EHmsLevel } from '@/types/enums'
+  import { getRoot } from '../../root'
+  import { getWaylineFile, getLiveVideoUrl } from '@/api/manage'
+  import { CURRENT_CONFIG as config } from '@/api/http/config';
+  import { getLnglatDist, cartesian3Convert, getLnglatAltitude, createCircleBillboard } from '@/utils/cesium/mapUtil';
+  import cesiumOperation from '@/utils/cesium-tsa.js';
+  const { _init, viewerDestory } = cesiumOperation();
+  import { useMyStore } from '@/store'
+  import comPass from './components/comPass.vue'
+  import ptzControl from './components/ptzControl.vue'
+  import controlConsole from './components/controlConsole.vue'
+  import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
+  import { getWebsocketUrl } from '@/websocket/util/config'
+  import { EBizCode, ELocalStorageKey, ERouterName } from '@/types'
+  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'
+  const { pointWayline } = initPointWayLine()
+  const { planarWayline } = initPlanarWayline()
+  const { initDock, getPhoneLocation, clickPhoneLocation } = droneFly()
+  
+  const {
+    removeAllPoint,
+    removeAllDataSource,
+    globalCesium,
+    getEntityById,
+    removeById,
+    loadLAYER,
+  } = cesiumOperation()
+  
+  const vConsole = new VConsole();
+  
+  let globalViewer = null
+  
+  // 使用 ref 来存储屏幕宽度和高度
+  const screenWidth = ref(window.innerWidth);
+  const screenHeight = ref(window.innerHeight);
+  // 加了头部
+  const boxWidth = ref(window.innerWidth);
+  const boxHeight = ref(window.innerHeight - 46);
+  // 地图切换
+  const screenWidthMap = ref(boxWidth.value)// ref(((boxHeight.value)/2)*2)
+  const screenHeightMap = ref(((boxHeight.value)/2));
+  // 视频切换
+  const screenWidthVideo = ref(boxWidth.value);
+  const screenHeightVideo = ref(boxHeight.value/2);
+  const isBigMap = ref(false)
+  
+  // 显示高德地图矢量还是影像(2D/3D)
+  let is2d = ref(true)
+  
+  const onChangeD = () => {
+    is2d.value = !is2d.value
+    store.commit('SET_MAP_SETTING_MODE', is2d.value?2:3);
+    loadLAYER();
+  }
+  
+  const store = useMyStore()
+  // 获取路由
+  const root = getRoot()
+  
+  interface deviceInfo {
+    dockSn: string;
+    latitude?:number;// 机场经纬度
+    longitude?:number;
+    height?:number; // 机场高度
+    isOnline: boolean;
+    name: string; // 可选字段
+    sn: string;
+    workspaceId:string;
+    children?: {  };
+  }
+  // 获取机场/遥控器sn
+  let localData = ref<any>(window.localStorage.getItem('sbInfo'))
+  const sbInfo: deviceInfo = JSON.parse(localData.value) as deviceInfo;
+  
+  // 无人机sn 
+  const sn = ref<String>(sbInfo.sn)
+  // 机场sn 
+  const dockSn = ref<String>(sbInfo.dockSn)
+  
+  // 记录横竖屏模式
+  const isLandscape = ref(false);
+  
+  // 记录视频地址
+  const videoUrl = ref<String>('');
+  
+  // 设置图片地址
+  const imageUrl = new URL('@/assets/images/norecord.png', import.meta.url).href
+  
+  const imageMapSrc = new URL('@/assets/images/mapdock.png', import.meta.url).href
+  
+  const jgbMapSrc = new URL('@/assets/images/jgb.png', import.meta.url).href
+  
+  const mapswitching = new URL('@/assets/images/mapswitching.png', import.meta.url).href
+  
+  const videoWH = ref<any>(null)
+  
+  // 视频宽高
+  const drawCanvasWidth = ref<Number>(0)
+  const drawCanvasHeight = ref<Number>(0)
+  
+  const videoPlayerBig = ref<any>(null); // 视频播放器实例
+  let webrtcPlayerBig = null
+  
+  let player = null; // video.js 播放器
+  
+  // 无人机实时飞行链接
+  let ssLinePath = ref<String>(null)
+  
+  // 实时定位
+  let viewDroneInfo = {}
+  // 机场高度
+  let droneHeight = ref(0)
+  
+  // 监听
+  let connectWs = ref<any>(null)
+  
+  let workspaceId = ref<String>(sbInfo.workspaceId)
+  localStorage.setItem('bs_workspace_id', workspaceId.value)
+  
+  // RTCWEB 加载视频
+  const playBig = () => {
+    webrtcPlayerBig = new window.ZLMRTCClient.Endpoint({
+      element: videoPlayerBig.value, // video 标签
+      debug: true, // 是否打印日志
+      zlmsdpUrl: videoUrl.value, //流地址
+      simulecast: false,
+      useCamera: false,
+      audioEnable: true,
+      videoEnable: true,
+      recvOnly: true,
+      usedatachannel: false,
+    })
+    webrtcPlayerBig.on(
+      window.ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,
+      (e) => {
+        // ICE 协商出错
+        console.error('ICE 协商出错')
+        // this.eventcallbacK('ICE ERROR', 'ICE 协商出错')
+      },
+    )
+  
+    webrtcPlayerBig.on(
+      window.ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,
+      (e) => {
+        //获取到了远端流，可以播放
+        console.log('播放成功', e.streams)
+        // this.eventcallbacK('playing', '播放成功')
+      },
+    )
+  
+    webrtcPlayerBig.on(
+      window.ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
+      (e) => {
+        // offer anwser 交换失败
+        console.error('offer anwser 交换失败', e)
+        // this.eventcallbacK('OFFER ANSWER ERROR ', 'offer anwser 交换失败')
+        if (e.code == -400 && e.msg == '流不存在') {
+          console.log('流不存在')
+          timerBig = setTimeout(() => {
+            webrtcPlayerBig.close()
+            playBig()
+          }, 100)
+        }
+      },
+    )
+  
+    webrtcPlayerBig.on(
+      window.ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,
+      (s) => {
+        // 获取到了本地流
+  
+        // document.getElementById('selfVideo').srcObject=s;
+        // this.eventcallbacK('LOCAL STREAM', '获取到了本地流')
+      },
+    )
+  }
+  
+  
+  // 加载该设备的视频信息
+  const loadVideo = async () => {
+    await getLiveVideoUrl(sn.value).then((res) => {
+      if (res.data.code != 0) return
+      // 获取高度
+      if (videoWH.value) {
+        drawCanvasWidth.value = videoWH.value.offsetWidth;
+        drawCanvasHeight.value = videoWH.value.offsetHeight;
+      }
+      videoUrl.value =  res.data.data.rtcs_url
+      // 播放
+      playBig()
+    })
+  }
+  
+  //===============================
+  // 获取实时航线
+  const getWrjSsLx = () => {
+    if (window.cesiumViewer== null) return 
+    getWaylineFile(sbInfo.sn).then((res:any) => {
+      if (res.code != 200) return
+      ssLinePath.value = res.data
+      // globalViewer = window.cesiumViewer
+      // 先有航线，再飞行
+      generateCourse()
+    })
+  }
+  
+  // 生成航线轨迹
+  const generateCourse = async () => {
+    if (!ssLinePath.value) return
+    const { fileInfoObj } = await analyzeKmzFile(`${ssLinePath.value}?_t=${new Date().getTime()}`)
+    const xmlStr = await fileInfoObj['wpmz/template.kml']
+    const xmlJson = XMLToJSON(xmlStr)?.['Document']
+    const placemark = xmlJson.Folder.Placemark
+    if (placemark?.Polygon) {
+      // return 'planar'
+      planarWayline(ssLinePath.value, sbInfo.longitude, sbInfo.latitude)
+    } else {
+      // return 'point'
+      pointWayline(ssLinePath.value, sbInfo.longitude, sbInfo.latitude)
+    }
+  }
+  
+  // 无人机相关信息
+  // const droneInfo = ref({})
+  
+  // 监听ws
+  const messageHandler = async (payload: any) => {
+    // if (!payload) {
+    //   return
+    // }
+    switch (payload.biz_code) {
+      case EBizCode.GatewayOsd: { // 遥控器
+        store.commit('SET_GATEWAY_INFO', payload.data)
+        break
+      }
+      case EBizCode.DeviceOsd: { // 无人机的
+        store.commit('SET_DEVICE_INFO', payload.data)
+        store.commit('SET_WS_MESSAGE', payload)
+        getviewDrone(payload)
+        break
+      }
+      case EBizCode.DockOsd: { // 机场
+        store.commit('SET_DOCK_INFO', payload.data)
+        break
+      }
+      case EBizCode.DeviceOffline: {
+        store.commit('SET_DEVICE_OFFLINE', payload.data)
+        if (!payload.data.online_status) {
+          videoUrl.value = ''
+        }
+        break
+      }
+      case EBizCode.FlightTaskProgress: { // 获取进度
+        // 如果点击列表进入没有获取到航线文件，那么这里重新请求一次
+        if (!ssLinePath || !ssLinePath.value) {
+          getWrjSsLx()
+        }
+        break
+      }
+    }
+    
+  }
+  
+  const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId.value
+  // 监听ws 消息
+  useConnectWebSocket(messageHandler, webSorketUrl)
+  
+  // 定义方法直接监听机场消息
+  const getviewDrone = (newValue) => {
+    if (newValue.data.host) {
+      viewDroneInfo.longitude = newValue.data.host?.longitude
+      viewDroneInfo.latitude = newValue.data.host?.latitude
+      viewDroneInfo.elevation = Number(newValue.data.host?.elevation.toFixed(2)) + droneHeight.value
+    }
+  }
+  
+  
+  // let savedMapState = null; // 保存地图状态
+  // // 销毁之前先保存状态
+  // const destroyViewer = () => {
+  //   if ( window.cesiumViewer) {
+  //     // 保存当前地图状态（如相机位置）
+  //     // savedMapState = window.cesiumViewer.camera.view;
+  //     window.cesiumViewer.destroy();
+  //     window.cesiumViewer = null;
+  //   }
+  // }
+  
+  // 视频全屏切换
+  
+  // const changeModelVideo = (value:Boolean) => {
+  //   const videoModule = document.getElementById('videoModule');
+  //   // 不管是否竖/横屏都一样
+  //   if (value) { // 全屏
+  //     videoModule.style.width = `${screenWidth.value}px`
+  //     videoModule.style.height = `${screenHeight.value}px`
+  //   } else {
+  //     if (isLandscape.value) {
+  //       videoModule.style.width = `${screenWidth.value/2}px`
+  //       videoModule.style.height = `${screenHeight.value}px`
+  //     } else {
+  //       videoModule.style.height = `${screenHeight.value/2}px`
+  //       videoModule.style.width = `${screenWidth.value}px`
+  //     }
+  //   }
+  // }
+  
+  // 地图全屏切换
+  const changeModelMap = () => {
+    isBigMap.value = !isBigMap.value
+    const cesiumContainer = document.getElementById('cesiumContainerBigMap');
+    const lZp = document.getElementById('lZp');
+    // const lZoom = document.getElementById('lZoom');
+    if (isLandscape.value) { // 横屏
+      if (isBigMap.value) { // 全屏
+        cesiumContainer.style.position = 'fixed';
+        cesiumContainer.style.top = '46px';
+        cesiumContainer.style.left = '0';
+        cesiumContainer.style.width = `${boxWidth.value}px`
+        // cesiumContainer.style.height = `${screenHeightMap.value}px`
+        lZp.style.right = '40%';
+        // lZoom.style.left = '0';
+      } else { // 缩放
+        cesiumContainer.style.width = `${boxWidth.value/2}px`
+        // cesiumContainer.style.height = `${screenHeightMap.value}px`
+        cesiumContainer.style.position = 'static';
+        lZp.style.right = '16%';
+        // lZoom.style.left = '50%';
+        
+      }
+    } else {
+      if (isBigMap.value) { // 竖-全屏
+        cesiumContainer.style.position = 'fixed';
+        cesiumContainer.style.top = '46px';
+        cesiumContainer.style.left = '0';
+        // cesiumContainer.style.width = `${boxHeight.value}px`
+        cesiumContainer.style.height = `${boxHeight.value}px`
+        lZp.style.right = '30%';
+        // lZoom.style.right = '0';
+      } else { // 缩放
+        cesiumContainer.style.width = `${boxHeight.value}px`
+        cesiumContainer.style.height = `${boxHeight.value/2}px`
+        cesiumContainer.style.position = 'static';
+        lZp.style.right = '30%';
+        // lZoom.style.right = '0';
+        
+      }
+    }
+  }
+  
+  // 更新屏幕尺寸的函数
+  // const updateScreenSize = () => {
+  //   const cesiumContainer = document.getElementById('cesiumContainerBigMap');
+  //   screenWidth.value = window.innerWidth;
+  //   screenHeight.value = window.innerHeight;
+  //   console.log('屏幕自身宽度',window.innerWidth)
+  //   console.log('屏幕自身高度',window.innerHeight)
+  //   if (isLandscape.value) { //横屏
+  //     screenWidthMap.value = window.innerWidth/2
+  //     screenHeightMap.value = window.innerHeight
+  //     screenWidthVideo.value = window.innerWidth/2
+  //     screenHeightVideo.value = window.innerHeight
+  //     cesiumContainer.style.width = `${screenWidthMap.value}px`
+  //     cesiumContainer.style.height = `${screenHeightMap.value}px`
+  //   } else {//竖屏
+  //     screenWidthMap.value = window.innerHeight
+  //     screenHeightMap.value = (window.innerHeight/2)
+  //     screenWidthVideo.value = window.innerWidth
+  //     screenHeightVideo.value = (window.innerHeight/2)
+  //     // 重新给赋值宽高
+  //     cesiumContainer.style.width = `${screenWidthMap.value}px`
+  //     cesiumContainer.style.height = `${screenHeightMap.value}px`
+  //     console.log('切换竖屏宽度',screenWidthMap.value)
+  //     console.log('切换竖屏高度度',screenHeightMap.value)
+  //   }
+    
+  // };
+  
+  const checkOrientation = async () => {
+    boxWidth.value = window.innerWidth;
+    boxHeight.value = window.innerHeight - 46;
+    const landscapeBox = document.getElementById('landscapeBox');
+    let cesiumContainer = document.getElementById('cesiumContainerBigMap');
+    const lZp = document.getElementById('lZp');
+    const lZoom = document.getElementById('lZoom');
+  
+    if (window.innerWidth > window.innerHeight) {//横屏
+      screenWidthVideo.value = boxWidth.value/2
+      screenHeightVideo.value = boxHeight.value
+      isLandscape.value = true;
+      // updateScreenSize()
+      landscapeBox.style.display = 'flex';
+      lZp.style.right = '16%';
+      lZoom.style.position = 'fixed';
+      cesiumContainer.style.width = `${boxWidth.value/2}px`
+      cesiumContainer.style.height = `${boxHeight.value}px`
+      cesiumContainer.style.position = 'static'
+      cesiumContainer.style.right = '0'
+      cesiumContainer.style.marginLeft = '0%'
+    } else { //竖屏
+      isLandscape.value = false;
+      screenWidthVideo.value = boxWidth.value
+      screenHeightVideo.value = boxHeight.value/2
+      // updateScreenSize()
+      landscapeBox.style.display = 'inherit';
+      landscapeBox.style.overflow = 'hidden';
+      lZp.style.right = '32%';
+      cesiumContainer.style.width = `${boxHeight.value}px`
+      cesiumContainer.style.height = `${boxHeight.value/2}px`
+      // cesiumContainer.style.position = 'absolute'
+      cesiumContainer.style.marginLeft = '-32%'
+    }
+  };
+  
+  // 切换航线轨迹
+  const courseTrack = (data:any) => {
+    if (window.cesiumViewer== null) return 
+    const currentSn = dockSn.value
+    const longitude = data.dockInfo[currentSn]?.basic_osd?.longitude || null
+    const latitude = data.dockInfo[currentSn]?.basic_osd?.latitude || null
+    const height = data.dockInfo[currentSn]?.basic_osd?.height || null
+    let getLongOk = ref(0)
+    if (!getEntityById('drone_dock')) {
+      getLnglatAltitude(longitude, latitude,  window.cesiumViewer).then(res => {
+        removeById('drone_dock')
+         window.cesiumViewer.entities.add({
+          position: globalCesium.Cartesian3.fromDegrees(
+            longitude,
+            latitude,
+            res.height,
+          ),
+          id: 'drone_dock',
+          billboard: {
+            image: imageMapSrc,
+            outlineWidth: 0,
+            width: 36,
+            height: 36,
+            scale: 1.0,
+          }
+        })
+        window.cesiumViewer.scene.camera.setView({
+          destination: globalCesium.Cartesian3.fromDegrees(
+            Number(longitude),
+            Number(latitude),
+            10000.0,
+          ),
+        })
+        droneHeight.value = res.height
+      })
+    } else {
+      // 当机场坐标存在时，判断获取的位置与机场坐标位置是否一致，若不是，重新更新位置
+      let dornePoint = cartesian3Convert(getEntityById('drone_dock')._position._value, window.cesiumViewer,)
+      getLongOk = getLnglatDist(
+        dornePoint.longitude,
+        dornePoint.latitude,
+        longitude,
+        latitude,
+      )
+      if (getLongOk.value > 100) {
+        removeById('drone_dock')
+      }
+    }
+    if (getLongOk.value > 100) return
+    initDock(data, sn.value, dockSn.value, workspaceId.value, ssLinePath.value, viewDroneInfo)
+  }
+  
+  // 监听
+  watch(() => store.state.deviceState, (newValue, oldValue) => {
+    if (newValue) {
+      nextTick()
+      courseTrack(newValue)
+    }
+  }, {deep: true})
+  
+  // watch(() => store.state.wsMessage, (newValue, oldValue) => {
+  //   // 控制台报 Expected longitude to be typeof number, actual typeof was undefined 是因为这里没有及时拿到longitude数据
+  //   if (newValue) {
+  //     viewDroneInfo.longitude = newValue?.longitude
+  //     viewDroneInfo.latitude = newValue?.latitude
+  //     viewDroneInfo.elevation = Number(newValue?.elevation.toFixed(2)) + droneHeight.value
+  //   }
+  // }, {deep: true})
+  
+  
+  let intervalId = null;
+  
+  const onClickLogin = () => {
+    history.back();
+  }
+  
+  // 为组件赋值
+  const getGlobalViewer = () => {
+    globalViewer = window.cesiumViewer;
+  }
+  
+  onMounted(async () => {
+    window.addEventListener('orientationchange', checkOrientation);
+    window.addEventListener('resize', checkOrientation); // 兼容某些设备
+    checkOrientation(); // 初始化时检查一次
+    loadVideo()
+    await nextTick();
+    await _init('cesiumContainerBigMap');
+    await getGlobalViewer()
+    await getWrjSsLx();
+    // 判断是遥控器还是机场
+    let domain = sessionStorage.getItem('domain')
+    if (domain !== '0') {
+      await getPhoneLocation(workspaceId.value)
+    // // // 设置定时器，每隔 5 秒刷新一次数据
+      // intervalId = setInterval(()=> {
+      //   getPhoneLocation(workspaceId.value)
+      // }, 5000);
+    }
+  });
+  
+  onBeforeUnmount(() => {
+    window.removeEventListener('orientationchange', checkOrientation);
+    window.removeEventListener('resize', checkOrientation);
+  
+    // removeAllPoint()
+    // removeAllDataSource()
+    // 销毁地图实例
+    if (window.cesiumViewer && !window.cesiumViewer.isDestroyed()) {
+      window.cesiumViewer.destroy();
+    }
+    if (globalViewer && !globalViewer.isDestroyed()) {
+      globalViewer.destroy();
+    }
+    if (player) {
+      player.dispose();
+    }
+    // 组件卸载时清除定时器
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+  });
+  
+  
+  
+  </script>
+  
+  <style lang="scss" scoped>
+  .drone-pilot-details {
+    .landscape-box {
+      overflow: hidden;
+      // position: relative;
+      // display: flex;
+      .l-map {
+        .l-zp {
+          position: fixed;
+          right: 16%;
+          bottom: 0;
+        }
+        .l-zoom {
+          position: fixed;
+          bottom: 0;
+          right: 0;
+          .zoom {
+            width: 2rem;
+            height: 2rem;
+            margin: 0.2rem 0.4rem;
+            border-radius: 3px;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            cursor: pointer;
+            pointer-events: all;
+            img {
+              width: 1.6rem;
+              height: 1.6rem;
+            }
+          }
+        }
+      }
+    }
+    .l-video {
+      position: relative;
+      .el-empty {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        ::v-deep(.el-empty__image) {
+          width: 50%;
+          height: 50%;
+        }
+        ::v-deep(.el-empty__description) {
+          margin: 0;
+        }
+      }
+      .center-point {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0.4rem;
+        height: 0.4rem;
+        opacity: 0.5;
+        border-radius: 50%;
+        background-color: yellow;
+        transform: translate(-50%, -50%);
+        justify-content: center;
+      }
+      .right-box {}
+    }
+    #cesiumContainerBigMap {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+  
+      :deep() {
+        .cesium-viewer {
+          width: 100%;
+          height: 100%;
+  
+          .cesium-viewer-cesiumWidgetContainer {
+            width: 100%;
+            height: 100%;
+  
+            .cesium-widget {
+              width: 100%;
+              height: 100%;
+  
+              canvas {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+    
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/DronePilotDetails.vue b/src/views/DronePilotDetails.vue
index d13116a..50392e1 100644
--- a/src/views/DronePilotDetails.vue
+++ b/src/views/DronePilotDetails.vue
@@ -2,8 +2,10 @@
   <div class="drone-pilot-details" :style="{ width: screenWidth,height: screenHeight}">
     <van-nav-bar
       title="详情"
+      right-text="分享"
       left-arrow
       @click-left="onClickLogin"
+      @click-right="onClickShare"
     />
     <div id="landscapeBox" class="landscape-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px'}">
       <div id="videoModule" class="l-video" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">
@@ -37,14 +39,21 @@
         </div>
       </div>
     </div>
+    <van-share-sheet
+    v-model:show="showShare"
+    title="立即分享"
+    :options="shareOptions"
+    @select="onSelectShare"
+  />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
+import { showNotify } from 'vant';
 import { EDeviceTypeName, EHmsLevel } from '@/types/enums'
 import { getRoot } from '../../root'
-import { getWaylineFile, getLiveVideoUrl } from '@/api/manage'
+import { getWaylineFile, getLiveVideoUrl, saveToken } from '@/api/manage'
 import { CURRENT_CONFIG as config } from '@/api/http/config';
 import { getLnglatDist, cartesian3Convert, getLnglatAltitude, createCircleBillboard } from '@/utils/cesium/mapUtil';
 import cesiumOperation from '@/utils/cesium-tsa.js';
@@ -75,6 +84,10 @@
 } = cesiumOperation()
 
 const vConsole = new VConsole();
+
+const showShare = ref(false)
+
+const shareOptions = [ { name: '复制链接', icon: 'link' }]
 
 let globalViewer = null
 
@@ -152,7 +165,7 @@
 let player = null; // video.js 播放器
 
 // 无人机实时飞行链接
-let ssLinePath = ref(null)
+let ssLinePath = ref<String>(null)
 
 // 实时定位
 let viewDroneInfo = {}
@@ -425,40 +438,40 @@
 // };
 
 const checkOrientation = async () => {
-  boxWidth.value = window.innerWidth;
-  boxHeight.value = window.innerHeight - 46;
-  const landscapeBox = document.getElementById('landscapeBox');
-  let cesiumContainer = document.getElementById('cesiumContainerBigMap');
-  const lZp = document.getElementById('lZp');
-  const lZoom = document.getElementById('lZoom');
-
-  if (window.innerWidth > window.innerHeight) {//横屏
-    screenWidthVideo.value = boxWidth.value/2
-    screenHeightVideo.value = boxHeight.value
-    isLandscape.value = true;
-    // updateScreenSize()
-    landscapeBox.style.display = 'flex';
-    lZp.style.right = '16%';
-    lZoom.style.position = 'fixed';
-    cesiumContainer.style.width = `${boxWidth.value/2}px`
-    cesiumContainer.style.height = `${boxHeight.value}px`
-    cesiumContainer.style.position = 'static'
-    cesiumContainer.style.right = '0'
-    cesiumContainer.style.marginLeft = '0%'
-  } else { //竖屏
-    isLandscape.value = false;
-    screenWidthVideo.value = boxWidth.value
-    screenHeightVideo.value = boxHeight.value/2
-    // updateScreenSize()
-    landscapeBox.style.display = 'inherit';
-    landscapeBox.style.overflow = 'hidden';
-    lZp.style.right = '32%';
-    cesiumContainer.style.width = `${boxHeight.value}px`
-    cesiumContainer.style.height = `${boxHeight.value/2}px`
-    // cesiumContainer.style.position = 'absolute'
-    cesiumContainer.style.marginLeft = '-32%'
-  }
-};
+    boxWidth.value = window.innerWidth;
+    boxHeight.value = window.innerHeight - 46;
+    const landscapeBox = document.getElementById('landscapeBox');
+    let cesiumContainer = document.getElementById('cesiumContainerBigMap');
+    const lZp = document.getElementById('lZp');
+    const lZoom = document.getElementById('lZoom');
+  
+    if (window.innerWidth > window.innerHeight) {//横屏
+      screenWidthVideo.value = boxWidth.value/2
+      screenHeightVideo.value = boxHeight.value
+      isLandscape.value = true;
+      // updateScreenSize()
+      landscapeBox.style.display = 'flex';
+      lZp.style.right = '16%';
+      lZoom.style.position = 'fixed';
+      cesiumContainer.style.width = `${boxWidth.value/2}px`
+      cesiumContainer.style.height = `${boxHeight.value}px`
+      cesiumContainer.style.position = 'static'
+      cesiumContainer.style.right = '0'
+      cesiumContainer.style.marginLeft = '0%'
+    } else { //竖屏
+      isLandscape.value = false;
+      screenWidthVideo.value = boxWidth.value
+      screenHeightVideo.value = boxHeight.value/2
+      // updateScreenSize()
+      landscapeBox.style.display = 'inherit';
+      landscapeBox.style.overflow = 'hidden';
+      lZp.style.right = '32%';
+      cesiumContainer.style.width = `${boxHeight.value}px`
+      cesiumContainer.style.height = `${boxHeight.value/2}px`
+      // cesiumContainer.style.position = 'absolute'
+      cesiumContainer.style.marginLeft = '-32%'
+    }
+  };
 
 // 切换航线轨迹
 const courseTrack = (data:any) => {
@@ -514,7 +527,6 @@
 
 // 监听
 watch(() => store.state.deviceState, (newValue, oldValue) => {
-  // 试试
   if (newValue) {
     nextTick()
     courseTrack(newValue)
@@ -537,6 +549,27 @@
   history.back();
 }
 
+const onClickShare = () => {
+  showShare.value = true
+
+  // root.$router.push({
+  //   path:ERouterName.DRONEPILOTSHARE,
+  //   query: { workspaceId:workspaceId.value, token: localStorage.getItem(ELocalStorageKey.Token),sbInfo:window.localStorage.getItem('sbInfo') } });
+}
+// 复制链接
+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: '复制失败' })
+    });
+    showShare.value = false
+  });
+}
+
 // 为组件赋值
 const getGlobalViewer = () => {
   globalViewer = window.cesiumViewer;
@@ -554,7 +587,7 @@
   // 判断是遥控器还是机场
   let domain = sessionStorage.getItem('domain')
   if (domain !== '0') {
-    await getPhoneLocation(workspaceId.value)
+    // await getPhoneLocation(workspaceId.value)
   // // // 设置定时器，每隔 5 秒刷新一次数据
     // intervalId = setInterval(()=> {
     //   getPhoneLocation(workspaceId.value)
@@ -658,6 +691,10 @@
     margin: 0;
     padding: 0;
     overflow: hidden;
+    transform-origin: top left;
+    transition: none; // 防止切换时的动画效果
+    backface-visibility: hidden; // 提高性能
+    -webkit-backface-visibility: hidden; // 提高性能  
 
     :deep() {
       .cesium-viewer {
diff --git a/src/views/DronePilotList.vue b/src/views/DronePilotList.vue
index 46b74a7..d83fb70 100644
--- a/src/views/DronePilotList.vue
+++ b/src/views/DronePilotList.vue
@@ -84,6 +84,8 @@
     // 前端自己加的判断
     window.sessionStorage.setItem('domain', JSON.stringify(droneOrPilotTxt.value == 'drone'? 0 : 2));
     store.commit('SET_OSD_VISIBLE_INFO', osdVisible)
+    // 存储机场信息
+    store.commit('SET_AIRPORT_INFO', data)
     // 跳转操作屏幕
     root.$router.push({ path:ERouterName.DRONEPILOTDETAILS })
   }
diff --git a/src/views/DronePilotShare.vue b/src/views/DronePilotShare.vue
new file mode 100644
index 0000000..e2d14a3
--- /dev/null
+++ b/src/views/DronePilotShare.vue
@@ -0,0 +1,638 @@
+<template>
+    <div class="drone-pilot-details" :style="{ width: screenWidth,height: screenHeight}">
+      <van-nav-bar
+        title="详情"
+        left-arrow
+        @click-left="onClickLogin"
+      />
+      <div id="landscapeBox" class="landscape-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px'}">
+        <div id="videoModule" class="l-video" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">
+          <video v-show="videoUrl" ref="videoPlayerBig" :style="{ width: screenWidthVideo + 'px', height: screenHeightVideo + 'px'}" controls autoplay muted playsinline style="text-align: left; object-fit: fill">
+            Your browser is too old which doesn't support HTML5 video.
+          </video>
+          <el-empty v-show="videoUrl == ''" description="当前设备已关机，无法进行直播" :image="imageUrl"></el-empty>
+          <div v-if="videoUrl" class="center-point"></div>
+          <div class="right-box">
+            <!-- <ptzControl :sn="sn" :osdVisible="sbInfo"/> -->
+            <!-- <controlConsole :sn="sn" :osdVisible="sbInfo" :cesiumViewe="globalViewer" /> -->
+          </div>
+        </div>
+        <div class="l-map" :style="{ width: screenWidthVideo + 'px', height: (screenHeightVideo) + 'px'}">
+          <div id="cesiumContainerBigMap"></div>
+          <div class="l-zp" id="lZp">
+            <comPass :cesiumViewe="globalViewer"/>
+          </div>
+          <div class="l-zoom" id="lZoom">
+            <div class="zoom">
+              <img src="@/assets/images/me.png" @touchstart="clickPhoneLocation" />
+            </div>
+            <div class="zoom" @touchstart="onChangeD">
+              <img v-if="is2d" src="@/assets/images/stand.png" />
+              <img v-else src="@/assets/images/satellite.png" />
+            </div>
+            <div class="zoom">
+              <img v-if="!isBigMap" src="@/assets/images/fang.png" @touchstart="changeModelMap" />
+              <img v-else src="@/assets/images/suo.png" @touchstart="changeModelMap" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
+  import { EDeviceTypeName, EHmsLevel } from '@/types/enums'
+  import { getRoot } from '../../root'
+  import { getWaylineFile, getLiveVideoUrl,getTokenByCode } from '@/api/manage'
+  import { CURRENT_CONFIG as config } from '@/api/http/config';
+  import { getLnglatDist, cartesian3Convert, getLnglatAltitude, createCircleBillboard } from '@/utils/cesium/mapUtil';
+  import cesiumOperation from '@/utils/cesium-tsa.js';
+  const { _init, viewerDestory } = cesiumOperation();
+  import { useMyStore } from '@/store'
+  import comPass from './components/comPass.vue'
+  import ptzControl from './components/ptzControl.vue'
+  import controlConsole from './components/controlConsole.vue'
+  import { useConnectWebSocket } from '@/utils/websocket/connect-websocket'
+  import { getWebsocketUrl } from '@/websocket/util/config'
+  import { EBizCode, ELocalStorageKey, ERouterName } from '@/types'
+  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'
+  const { pointWayline } = initPointWayLine()
+  const { planarWayline } = initPlanarWayline()
+  const { initDock, getPhoneLocation, clickPhoneLocation } = droneFly()
+  
+  const {
+    removeAllPoint,
+    removeAllDataSource,
+    globalCesium,
+    getEntityById,
+    removeById,
+    loadLAYER,
+  } = cesiumOperation()
+  
+  const vConsole = new VConsole();
+  
+  let globalViewer = null
+  
+  // 使用 ref 来存储屏幕宽度和高度
+  const screenWidth = ref(window.innerWidth);
+  const screenHeight = ref(window.innerHeight);
+  // 加了头部
+  const boxWidth = ref(window.innerWidth);
+  const boxHeight = ref(window.innerHeight - 46);
+  // 地图切换
+  const screenWidthMap = ref(boxWidth.value)// ref(((boxHeight.value)/2)*2)
+  const screenHeightMap = ref(((boxHeight.value)/2));
+  // 视频切换
+  const screenWidthVideo = ref(boxWidth.value);
+  const screenHeightVideo = ref(boxHeight.value/2);
+  const isBigMap = ref(false)
+  
+  // 显示高德地图矢量还是影像(2D/3D)
+  let is2d = ref(true)
+  
+  const onChangeD = () => {
+    is2d.value = !is2d.value
+    store.commit('SET_MAP_SETTING_MODE', is2d.value?2:3);
+    loadLAYER();
+  }
+  
+  const store = useMyStore()
+  // 获取路由
+  const root = getRoot()
+  
+  interface deviceInfo {
+    dockSn: string;
+    latitude?:number;// 机场经纬度
+    longitude?:number;
+    height?:number; // 机场高度
+    isOnline: boolean;
+    name: string; // 可选字段
+    sn: string;
+    workspaceId:string;
+    children?: {  };
+  }
+    // 取值
+    let sbInfo: deviceInfo = {} as deviceInfo;
+    // 无人机sn 
+    let sn = ref<String>('')
+    // 机场sn 
+    let dockSn = ref<String>('')
+    // workspaceId
+    let workspaceId = ref<String>('')
+    // 获取实时航线
+    const getWrjSsLx = async () => {
+      if (window.cesiumViewer== null) return 
+      console.log('哒哒哒1111',sbInfo)
+      await getWaylineFile(sbInfo.sn).then((res:any) => {
+        if (res.code != 200) return
+        ssLinePath.value = res.data
+        // globalViewer = window.cesiumViewer
+        // 先有航线，再飞行
+        generateCourse()
+      })
+    }
+    const getTokenAndTbInfo = () => {
+      getTokenByCode(root.$route.query.code).then((res:any) => {
+        let tokenAndInfo = JSON.parse(res.data);
+        sbInfo = JSON.parse(tokenAndInfo.sbInfo);
+        store.commit('SET_TOKEN', tokenAndInfo.token);
+        sn.value = sbInfo.sn;
+        dockSn.value = sbInfo.dockSn;
+        workspaceId.value = sbInfo.workspaceId
+        // 监听ws
+        const messageHandler = async (payload: any) => {
+          if (!payload) return
+          switch (payload.biz_code) {
+            case EBizCode.GatewayOsd: { // 遥控器
+              store.commit('SET_GATEWAY_INFO', payload.data)
+              break
+            }
+            case EBizCode.DeviceOsd: { // 无人机的
+              store.commit('SET_DEVICE_INFO', payload.data)
+              store.commit('SET_WS_MESSAGE', payload)
+              getviewDrone(payload)
+              break
+            }
+            case EBizCode.DockOsd: { // 机场
+              store.commit('SET_DOCK_INFO', payload.data)
+              break
+            }
+            case EBizCode.DeviceOffline: {
+              store.commit('SET_DEVICE_OFFLINE', payload.data)
+              if (!payload.data.online_status) {
+                videoUrl.value = ''
+              }
+              break
+            }
+            case EBizCode.FlightTaskProgress: { // 获取进度
+              // 如果点击列表进入没有获取到航线文件，那么这里重新请求一次
+              if (!ssLinePath || !ssLinePath.value) {
+                getWrjSsLx()
+              }
+              break
+            }
+          }
+        }
+        
+        const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + workspaceId.value
+        // 监听ws 消息
+        useConnectWebSocket(messageHandler, webSorketUrl)
+        // 获取视频信息
+        loadVideo();
+        // 获取航线信息
+        getWrjSsLx();
+      })
+    }
+    getTokenAndTbInfo()
+    console.log('哒哒哒',sbInfo)
+  
+  
+  // 记录横竖屏模式
+  const isLandscape = ref(false);
+  
+  // 记录视频地址
+  const videoUrl = ref<String>('');
+  
+  // 设置图片地址
+  const imageUrl = new URL('@/assets/images/norecord.png', import.meta.url).href
+  
+  const imageMapSrc = new URL('@/assets/images/mapdock.png', import.meta.url).href
+  
+  const jgbMapSrc = new URL('@/assets/images/jgb.png', import.meta.url).href
+  
+  const mapswitching = new URL('@/assets/images/mapswitching.png', import.meta.url).href
+  
+  const videoWH = ref<any>(null)
+  
+  // 视频宽高
+  const drawCanvasWidth = ref<Number>(0)
+  const drawCanvasHeight = ref<Number>(0)
+  
+  const videoPlayerBig = ref<any>(null); // 视频播放器实例
+  let webrtcPlayerBig = null
+  
+  let player = null; // video.js 播放器
+  
+  // 无人机实时飞行链接
+  let ssLinePath = ref<String>(null)
+  
+  // 实时定位
+  let viewDroneInfo = {}
+  // 机场高度
+  let droneHeight = ref(0)
+  
+  // 监听
+  let connectWs = ref<any>(null)
+  
+  // RTCWEB 加载视频
+  const playBig = () => {
+    webrtcPlayerBig = new window.ZLMRTCClient.Endpoint({
+      element: videoPlayerBig.value, // video 标签
+      debug: true, // 是否打印日志
+      zlmsdpUrl: videoUrl.value, //流地址
+      simulecast: false,
+      useCamera: false,
+      audioEnable: true,
+      videoEnable: true,
+      recvOnly: true,
+      usedatachannel: false,
+    })
+    webrtcPlayerBig.on(
+      window.ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,
+      (e) => {
+        // ICE 协商出错
+        console.error('ICE 协商出错')
+        // this.eventcallbacK('ICE ERROR', 'ICE 协商出错')
+      },
+    )
+  
+    webrtcPlayerBig.on(
+      window.ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,
+      (e) => {
+        //获取到了远端流，可以播放
+        console.log('播放成功', e.streams)
+        // this.eventcallbacK('playing', '播放成功')
+      },
+    )
+  
+    webrtcPlayerBig.on(
+      window.ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
+      (e) => {
+        // offer anwser 交换失败
+        console.error('offer anwser 交换失败', e)
+        // this.eventcallbacK('OFFER ANSWER ERROR ', 'offer anwser 交换失败')
+        if (e.code == -400 && e.msg == '流不存在') {
+          console.log('流不存在')
+          timerBig = setTimeout(() => {
+            webrtcPlayerBig.close()
+            playBig()
+          }, 100)
+        }
+      },
+    )
+  
+    webrtcPlayerBig.on(
+      window.ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,
+      (s) => {
+        // 获取到了本地流
+  
+        // document.getElementById('selfVideo').srcObject=s;
+        // this.eventcallbacK('LOCAL STREAM', '获取到了本地流')
+      },
+    )
+  }
+  
+  
+  // 加载该设备的视频信息
+  const loadVideo = async () => {
+    await getLiveVideoUrl(sn.value).then((res) => {
+      if (res.data.code != 0) return
+      // 获取高度
+      if (videoWH.value) {
+        drawCanvasWidth.value = videoWH.value.offsetWidth;
+        drawCanvasHeight.value = videoWH.value.offsetHeight;
+      }
+      videoUrl.value =  res.data.data.rtcs_url
+      // 播放
+      playBig()
+    })
+  }
+  
+  
+  // 生成航线轨迹
+  const generateCourse = async () => {
+    if (!ssLinePath.value) return
+    const { fileInfoObj } = await analyzeKmzFile(`${ssLinePath.value}?_t=${new Date().getTime()}`)
+    const xmlStr = await fileInfoObj['wpmz/template.kml']
+    const xmlJson = XMLToJSON(xmlStr)?.['Document']
+    const placemark = xmlJson.Folder.Placemark
+    if (placemark?.Polygon) {
+      // return 'planar'
+      planarWayline(ssLinePath.value, sbInfo.longitude, sbInfo.latitude)
+    } else {
+      // return 'point'
+      pointWayline(ssLinePath.value, sbInfo.longitude, sbInfo.latitude)
+    }
+  }
+  
+  // 定义方法直接监听机场消息
+  const getviewDrone = (newValue:any) => {
+    if (newValue.data.host) {
+      viewDroneInfo.longitude = newValue.data.host?.longitude
+      viewDroneInfo.latitude = newValue.data.host?.latitude
+      viewDroneInfo.elevation = Number(newValue.data.host?.elevation.toFixed(2)) + droneHeight.value
+    }
+  }
+  
+  
+  // 地图全屏切换
+  const changeModelMap = () => {
+    isBigMap.value = !isBigMap.value
+    const cesiumContainer = document.getElementById('cesiumContainerBigMap');
+    const lZp = document.getElementById('lZp');
+    // const lZoom = document.getElementById('lZoom');
+    if (isLandscape.value) { // 横屏
+      if (isBigMap.value) { // 全屏
+        cesiumContainer.style.position = 'fixed';
+        cesiumContainer.style.top = '46px';
+        cesiumContainer.style.left = '0';
+        cesiumContainer.style.width = `${boxWidth.value}px`
+        // cesiumContainer.style.height = `${screenHeightMap.value}px`
+        lZp.style.right = '40%';
+        // lZoom.style.left = '0';
+      } else { // 缩放
+        cesiumContainer.style.width = `${boxWidth.value/2}px`
+        // cesiumContainer.style.height = `${screenHeightMap.value}px`
+        cesiumContainer.style.position = 'static';
+        lZp.style.right = '16%';
+        // lZoom.style.left = '50%';
+        
+      }
+    } else {
+      if (isBigMap.value) { // 竖-全屏
+        cesiumContainer.style.position = 'fixed';
+        cesiumContainer.style.top = '46px';
+        cesiumContainer.style.left = '0';
+        // cesiumContainer.style.width = `${boxHeight.value}px`
+        cesiumContainer.style.height = `${boxHeight.value}px`
+        lZp.style.right = '30%';
+        // lZoom.style.right = '0';
+      } else { // 缩放
+        cesiumContainer.style.width = `${boxHeight.value}px`
+        cesiumContainer.style.height = `${boxHeight.value/2}px`
+        cesiumContainer.style.position = 'static';
+        lZp.style.right = '30%';
+        // lZoom.style.right = '0';
+        
+      }
+    }
+  }
+  
+  const checkOrientation = async () => {
+      boxWidth.value = window.innerWidth;
+      boxHeight.value = window.innerHeight - 46;
+      const landscapeBox = document.getElementById('landscapeBox');
+      let cesiumContainer = document.getElementById('cesiumContainerBigMap');
+      const lZp = document.getElementById('lZp');
+      const lZoom = document.getElementById('lZoom');
+    
+      if (window.innerWidth > window.innerHeight) {//横屏
+        screenWidthVideo.value = boxWidth.value/2
+        screenHeightVideo.value = boxHeight.value
+        isLandscape.value = true;
+        // updateScreenSize()
+        landscapeBox.style.display = 'flex';
+        lZp.style.right = '16%';
+        lZoom.style.position = 'fixed';
+        cesiumContainer.style.width = `${boxWidth.value/2}px`
+        cesiumContainer.style.height = `${boxHeight.value}px`
+        cesiumContainer.style.position = 'static'
+        cesiumContainer.style.right = '0'
+        cesiumContainer.style.marginLeft = '0%'
+      } else { //竖屏
+        isLandscape.value = false;
+        screenWidthVideo.value = boxWidth.value
+        screenHeightVideo.value = boxHeight.value/2
+        // updateScreenSize()
+        landscapeBox.style.display = 'inherit';
+        landscapeBox.style.overflow = 'hidden';
+        lZp.style.right = '32%';
+        cesiumContainer.style.width = `${boxHeight.value}px`
+        cesiumContainer.style.height = `${boxHeight.value/2}px`
+        // cesiumContainer.style.position = 'absolute'
+        cesiumContainer.style.marginLeft = '-32%'
+      }
+    };
+  
+  // 切换航线轨迹
+  const courseTrack = (data:any) => {
+    if (window.cesiumViewer== null) return 
+    const currentSn = dockSn.value
+    const longitude = data.dockInfo[currentSn]?.basic_osd?.longitude || null
+    const latitude = data.dockInfo[currentSn]?.basic_osd?.latitude || null
+    const height = data.dockInfo[currentSn]?.basic_osd?.height || null
+    let getLongOk = ref(0)
+    if (!getEntityById('drone_dock')) {
+      getLnglatAltitude(longitude, latitude,  window.cesiumViewer).then(res => {
+        removeById('drone_dock')
+         window.cesiumViewer.entities.add({
+          position: globalCesium.Cartesian3.fromDegrees(
+            longitude,
+            latitude,
+            res.height,
+          ),
+          id: 'drone_dock',
+          billboard: {
+            image: imageMapSrc,
+            outlineWidth: 0,
+            width: 36,
+            height: 36,
+            scale: 1.0,
+          }
+        })
+        window.cesiumViewer.scene.camera.setView({
+          destination: globalCesium.Cartesian3.fromDegrees(
+            Number(longitude),
+            Number(latitude),
+            10000.0,
+          ),
+        })
+        droneHeight.value = res.height
+      })
+    } else {
+      // 当机场坐标存在时，判断获取的位置与机场坐标位置是否一致，若不是，重新更新位置
+      let dornePoint = cartesian3Convert(getEntityById('drone_dock')._position._value, window.cesiumViewer,)
+      getLongOk = getLnglatDist(
+        dornePoint.longitude,
+        dornePoint.latitude,
+        longitude,
+        latitude,
+      )
+      if (getLongOk.value > 100) {
+        removeById('drone_dock')
+      }
+    }
+    if (getLongOk.value > 100) return
+    initDock(data, sn.value, dockSn.value, workspaceId.value, ssLinePath.value, viewDroneInfo)
+  }
+  
+  // 监听
+  watch(() => store.state.deviceState, (newValue, oldValue) => {
+    if (newValue) {
+      nextTick()
+      courseTrack(newValue)
+    }
+  }, {deep: true})
+  
+  // watch(() => store.state.wsMessage, (newValue, oldValue) => {
+  //   // 控制台报 Expected longitude to be typeof number, actual typeof was undefined 是因为这里没有及时拿到longitude数据
+  //   if (newValue) {
+  //     viewDroneInfo.longitude = newValue?.longitude
+  //     viewDroneInfo.latitude = newValue?.latitude
+  //     viewDroneInfo.elevation = Number(newValue?.elevation.toFixed(2)) + droneHeight.value
+  //   }
+  // }, {deep: true})
+  
+  
+  let intervalId = null;
+  
+  const onClickLogin = () => {
+    history.back();
+  }
+  
+  // 为组件赋值
+  const getGlobalViewer = () => {
+    globalViewer = window.cesiumViewer;
+  }
+  
+  onMounted(async () => {
+    window.addEventListener('orientationchange', checkOrientation);
+    window.addEventListener('resize', checkOrientation); // 兼容某些设备
+    checkOrientation(); // 初始化时检查一次
+    // loadVideo();
+    await nextTick();
+    await _init('cesiumContainerBigMap');
+    await getGlobalViewer()
+    // await getWrjSsLx();
+    // 判断是遥控器还是机场
+    let domain = sessionStorage.getItem('domain')
+    if (domain !== '0') {
+      await getPhoneLocation(workspaceId.value)
+    // // // 设置定时器，每隔 5 秒刷新一次数据
+      // intervalId = setInterval(()=> {
+      //   getPhoneLocation(workspaceId.value)
+      // }, 5000);
+    }
+  });
+  
+  onBeforeUnmount(() => {
+    window.removeEventListener('orientationchange', checkOrientation);
+    window.removeEventListener('resize', checkOrientation);
+  
+    // removeAllPoint()
+    // removeAllDataSource()
+    // 销毁地图实例
+    if (window.cesiumViewer && !window.cesiumViewer.isDestroyed()) {
+      window.cesiumViewer.destroy();
+    }
+    if (globalViewer && !globalViewer.isDestroyed()) {
+      globalViewer.destroy();
+    }
+    if (player) {
+      player.dispose();
+    }
+    // 组件卸载时清除定时器
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+  });
+  
+  
+  
+  </script>
+  
+  <style lang="scss" scoped>
+  .drone-pilot-details {
+    .landscape-box {
+      overflow: hidden;
+      // position: relative;
+      // display: flex;
+      .l-map {
+        .l-zp {
+          position: fixed;
+          right: 16%;
+          bottom: 0;
+        }
+        .l-zoom {
+          position: fixed;
+          bottom: 0;
+          right: 0;
+          .zoom {
+            width: 2rem;
+            height: 2rem;
+            margin: 0.2rem 0.4rem;
+            border-radius: 3px;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            cursor: pointer;
+            pointer-events: all;
+            img {
+              width: 1.6rem;
+              height: 1.6rem;
+            }
+          }
+        }
+      }
+    }
+    .l-video {
+      position: relative;
+      .el-empty {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        ::v-deep(.el-empty__image) {
+          width: 50%;
+          height: 50%;
+        }
+        ::v-deep(.el-empty__description) {
+          margin: 0;
+        }
+      }
+      .center-point {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0.4rem;
+        height: 0.4rem;
+        opacity: 0.5;
+        border-radius: 50%;
+        background-color: yellow;
+        transform: translate(-50%, -50%);
+        justify-content: center;
+      }
+      .right-box {}
+    }
+    #cesiumContainerBigMap {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      transform-origin: top left;
+      transition: none; // 防止切换时的动画效果
+      backface-visibility: hidden; // 提高性能
+      -webkit-backface-visibility: hidden; // 提高性能  
+  
+      :deep() {
+        .cesium-viewer {
+          width: 100%;
+          height: 100%;
+  
+          .cesium-viewer-cesiumWidgetContainer {
+            width: 100%;
+            height: 100%;
+  
+            .cesium-widget {
+              width: 100%;
+              height: 100%;
+  
+              canvas {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+    
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/components/controlConsole-copy.vue b/src/views/components/controlConsole-copy.vue
new file mode 100644
index 0000000..9a8946d
--- /dev/null
+++ b/src/views/components/controlConsole-copy.vue
@@ -0,0 +1,1138 @@
+<template>
+    <div class="control-console">
+      <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({ x: SPEED })"><div class="xq">向前</div></div>
+        <div class="left" @touchstart="handlePublish({ y: -SPEED })"><div class="xz">向左</div></div>
+        <div class="bottom" @touchstart="handlePublish({ x: -SPEED })"><div class="xx">向下</div></div>
+        <div class="right" @touchstart="handlePublish({ y: SPEED })"><div class="xy">向右</div></div>
+      </div>
+      <div class="control-right" v-show="isShowKzBtn">
+        <div class="top"  @touchstart="handlePublish({ h: HEIGHT })"><div class="xq">上升</div></div>
+        <div class="left" @touchstart="handlePublish({ w: -W_SPEED })"><div class="xz">左转</div></div>
+        <div class="bottom" @touchstart="handlePublish({ h: -HEIGHT })"><div class="xx">下降</div></div>
+        <div class="right" @touchstart="handlePublish({ w: W_SPEED })" ><div class="xy">右转</div></div>
+      </div>
+      <van-dialog v-model:show="dialogVisible" title="确认是否接管?" show-cancel-button @confirm="sureJg"></van-dialog>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { showNotify } from 'vant';
+  import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
+  import { useMyStore } from '@/store'
+  import {exitController,droneController,returnHomeCancel,returnHome} from '@/api/drone/drc'
+  import { useConnectMqtt } from '@/utils/mqtt/connect-mqtt';
+  import { useMqtt, DeviceTopicInfo } from '@/utils/mqtt/index'
+  import { DRC_METHOD } from '@/types/drc'
+  
+  
+  const props = defineProps({
+    sn: {
+      type: String,
+      required: true,
+    },
+    osdVisible: {
+      type: Object,
+      required: true,
+    }
+  });
+  
+  const store = useMyStore()
+  // 显示控制和退出控制状态按钮
+  let isShowKzBtn = ref(false);
+  // 是否接管提示
+  let dialogVisible = ref(false);
+  // 面板提示
+  let hasPermission = ref(false);
+  // 是否返航状态
+  let nowInReturnStatus = ref(false);
+  // 返航状态点击
+  let nowInReturnStatusClick = ref(false)
+  // 控制状态
+  let flightMode = ref('自动控制')
+  
+  // 控制无人机速度
+  let droneSeepd = ref(5);
+  const SPEED = ref(droneSeepd.value || 5) //  check
+  const HEIGHT = ref(5) //  check
+  const W_SPEED = ref(20) // 机头角速度
+  
+  // A S D....按键
+  let deviceTopicInfo: DeviceTopicInfo = reactive({
+    sn: props.sn || '',
+    pubTopic: '',
+    subTopic: ''
+  })
+  
+  // 连接或断开drc
+  useConnectMqtt()
+  
+  // const clientId = computed(() => {
+  //   return localStorage.getItem('clientId') //store.state.clientId
+  // });
+  let clientId = ref(localStorage.getItem('client_id'))
+  
+  // {"0":"待机","1":"起飞准备","2":"起飞准备完毕","3":"手动飞行","4":"自动起飞","5":"航线飞行","6":"全景拍照","7":"智能跟随","8":"ADS-B 躲避","9":"自动返航","10":"自动降落","11":"强制降落","12":"三桨叶降落","13":"升级中","14":"未连接","15":"APAS","16":"虚拟摇杆状态","17":"指令飞行","18":"空中 RTK 收敛模式","19":"机场选址中"}
+  watch(() => store.state.wsMessage, (newValue, oldValue) => {
+    // console.log('监控值', newValue.mode_code)
+    hasPermission.value = false
+    if (newValue.mode_code == '5') {
+      hasPermission.value = true
+    }
+    if (newValue.mode_code && (newValue.mode_code == 9 || newValue.mode_code == 10) && !nowInReturnStatusClick.value) {
+      nowInReturnStatus.value = true
+      flightMode.value = '自动控制'
+    } else if (newValue.mode_code && (newValue.mode_code == 9 || newValue.mode_code == 10) && nowInReturnStatusClick.value) {
+      // 没电、强制返航
+      nowInReturnStatus.value = true
+      nowInReturnStatusClick.value = false
+    }
+  }, {deep:true})
+  
+  // 进行控制
+  const enterFlightControl = () => {
+    droneController({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
+      if (result.code != 0) { return }
+      if (result.data.sub && result.data.sub?.length > 0) {
+        deviceTopicInfo.subTopic = result.data.sub[0]
+      }
+      if (result.data.pub && result.data.pub?.length > 0) {
+        deviceTopicInfo.pubTopic = result.data.pub[0]
+      }
+      // 接管成功之后再显示
+      isShowKzBtn.value = true
+      flightMode.value = '人工控制'
+      // 控制成功之后：也可以操作了
+      hasPermission.value = true
+      nowInReturnStatus.value = true
+    })
+  }
+  
+  // 退出控制
+  const exitFlightCOntrol = () => {
+    exitController({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
+      deviceTopicInfo.subTopic = ''
+      deviceTopicInfo.pubTopic = ''
+      flightMode.value = '自动控制'
+    })
+  }
+  
+  const sureJg = () => {
+    dialogVisible.value = false
+    enterFlightControl()
+  }
+  
+  // 是否进行人工控制
+  const authenticationPwd = (value:any, str:String) => {
+    // 提示是否进行人工控制
+    if (!isShowKzBtn.value) {
+      if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' })}
+      dialogVisible.value = true
+    } else {
+      isShowKzBtn.value = false
+      exitFlightCOntrol()
+    }
+  }
+  
+  // 返航
+  const onBackDock = () => {
+    returnHome(props.sn).then((res) => {
+      if (res.code === 0) {
+        nowInReturnStatus.value = true
+        flightMode.value = '自动控制'
+        nowInReturnStatusClick.value = false
+      }
+    })
+  }
+  
+  // 取消返航
+  const notonBackDock = () => {
+    returnHomeCancel({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
+    if (result.code !== 0) return
+      nowInReturnStatus.value = false
+      // 取消返航时，退出飞行控制，进入人工控制
+      nowInReturnStatusClick.value = true       
+      flightMode.value = '人工控制'
+    })
+  }
+  
+  // 无人机速度控制
+  const onControlsDroneSpeed = (value:Boolean) => {
+    if (value) {
+      if (droneSeepd.value >= 15) {
+        return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
+      }
+      droneSeepd.value += 1
+    } else {
+      if (droneSeepd.value <= 0) {
+        return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
+      }
+      droneSeepd.value -= 1
+    }
+  }
+  
+  const mqttHooks =  useMqtt(deviceTopicInfo)
+  // 字母按键
+  const handlePublish = (params:Object) => {
+    if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' });}
+    const body = { method: DRC_METHOD.DRONE_CONTROL, data: params}
+    mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, {qos: 0})
+  }
+  
+  onMounted(async () => {
+    await nextTick()
+  })
+  
+  </script>
+  
+  <style lang="scss" scoped>
+  .control-console {
+    
+    .control {
+      position: absolute;
+      bottom: 12.8rem;
+      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;
+      img {
+        width: 1.6rem;
+        height: 1.6rem;
+      }
+    }
+    .actived-blue {
+      background-image: none;
+      background-color: rgba(23, 124, 198, 0.7);
+    }
+    .control-left {
+      left: 10%;
+    }
+    .control-right {
+      right: 10%;
+    }
+    .control-left, .control-right{
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      overflow: hidden;
+      // background-color: rgba(255, 255, 255, 0.5); /* 白色，50%透明度 */
+      // box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
+      background-color: rgba(0, 0, 0, 0.5);
+      padding: 20px; /* 内边距 */
+      position: absolute;
+      top: 30%;
+      .top,
+      .left,
+      .bottom,
+      .right {
+        width: 10px;
+        height: 10px;
+        position: absolute;
+        cursor: pointer;
+        z-index: 2;
+      }
+  
+      .top {
+        top: -2px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-top: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-left: 10px solid transparent;
+        border-bottom: 10px solid #fff;
+  
+        &:hover {
+          &~.blue-bgc {
+            border-top: 50px solid #fff;
+          }
+        }
+        .xq {
+          position: absolute;
+          top: 10px;
+          font-size: 10px;
+          width: 30px;
+          left: -9px;
+          color: #fff;
+        }
+      }
+  
+      .left {
+        top: 50%;
+        left: -2px;
+        transform: translateY(-50%);
+        border-top: 10px solid transparent;
+        border-right: 10px solid #fff;
+        border-left: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+  
+        &:hover {
+          &~.blue-bgc {
+            border-left: 50px solid #fff;
+          }
+        }
+        .xz {
+          position: absolute;
+          top: -7px;
+          font-size: 10px;
+          width: 30px;
+          left: 11px;
+          color: #fff;
+        }
+      }
+  
+      .bottom {
+        bottom: -2px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-top: 10px solid #fff;
+        border-right: 10px solid transparent;
+        border-left: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+  
+        &:hover {
+          &~.blue-bgc {
+            border-bottom: 50px solid #fff;
+          }
+        }
+        .xx {
+          position: absolute;
+          bottom: 8px;
+          font-size: 10px;
+          width: 30px;
+          left: -9px;
+          color: #fff;
+        }
+      }
+  
+      .right {
+        top: 50%;
+        right: -2px;
+        transform: translateY(-50%);
+        border-top: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-left: 10px solid #fff;
+        border-bottom: 10px solid transparent;
+  
+        &:hover {
+          &~.blue-bgc {
+            border-right: 50px solid #fff;
+          }
+        }
+        .xy {
+          position: absolute;
+          top: -8px;
+          font-size: 10px;
+          width: 30px;
+          right : 2px;
+          color: #fff;
+        }
+      }
+    }
+      // width: 100%;
+      // height: 200px;
+      // margin-top: 20px;
+      // margin: 0 auto;
+      // display: flex;
+      // align-items: center;
+      // justify-content: space-between;
+      // overflow-x: auto;
+      // overflow-y: hidden;
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
+      // color: #fff;
+      // font-weight: bold;
+    // .DroneOperation {
+    //   display: flex;
+    //   align-items: center;
+    //   height: 245px;
+    //   position: relative;
+    // }
+  
+    // .center {
+    //   display: flex;
+    //   align-items: center;
+  
+    //   &_left,
+    //   &_center,
+    //   .speed {
+    //     margin-right: 10px;
+    //   }
+  
+    //   .center_left {
+    //     .tubiaoshow {
+    //       height: 50px;
+    //       display: flex;
+    //       justify-content: center;
+    //       align-items: center;
+  
+    //       img {
+    //         width: 40px;
+    //         height: 50px;
+    //         cursor: pointer;
+    //       }
+    //     }
+  
+    //     .Airplanemode {
+    //       font-style: normal;
+    //       margin: 5px 0px;
+    //       text-align: center;
+    //     }
+  
+    //     .operatingjixufanhang {
+    //       display: flex;
+    //       justify-content: center;
+  
+    //       .el-button {
+    //         font-size: 16px;
+    //         background-color: rgba(0, 0, 0, 0.5);
+    //         color: white;
+    //         border-width: 0;
+    //         margin: 5px;
+    //       }
+    //     }
+    //   }
+  
+    //   .center_center {
+    //     width: 120px;
+  
+    //     padding: 0px 0px;
+  
+    //     .center {
+    //       height: 45px;
+  
+    //       p {
+    //         line-height: 50px;
+    //         color: #00ee8b;
+    //         font-size: 20px;
+    //         margin: 0 auto;
+    //       }
+    //     }
+  
+    //     .top,
+    //     .bottom {
+    //       background: rgba(0, 0, 0, 0.5);
+    //       border-radius: 5px;
+    //       display: flex;
+    //       height: 80px;
+    //       width: 100%;
+  
+    //       .Q,
+    //       .W,
+    //       .E {
+    //         flex: 1;
+    //         display: flex;
+    //         flex-direction: column;
+    //         align-items: center;
+    //         justify-content: center;
+    //         gap: 10px;
+  
+    //         img {
+    //           width: 20px;
+    //           height: 20px;
+    //           // margin-top: 5px;
+    //           // margin-top: 5px;
+    //         }
+  
+    //         .el-button {
+    //           padding: 4px;
+    //           font-size: 20px;
+    //           height: 30px;
+    //           background: #3c3c3c;
+    //           color: white;
+    //           -webkit-touch-callout: none;
+    //           -webkit-user-select: none;
+    //           -khtml-user-select: none;
+    //           -moz-user-select: none;
+    //           -ms-user-select: none;
+    //           user-select: none;
+    //         }
+    //       }
+  
+    //       .A,
+    //       .S,
+    //       .D {
+    //         flex: 1;
+    //         display: flex;
+    //         flex-direction: column;
+    //         align-items: center;
+    //         justify-content: center;
+  
+    //         img {
+    //           width: 20px;
+    //           height: 20px;
+    //         }
+  
+    //         .el-button {
+    //           padding: 4px;
+    //           font-size: 20px;
+    //           margin-bottom: 10px;
+    //           height: 30px;
+    //           background: #3c3c3c;
+    //           color: white;
+    //           -webkit-touch-callout: none;
+    //           -webkit-user-select: none;
+    //           -khtml-user-select: none;
+    //           -moz-user-select: none;
+    //           -ms-user-select: none;
+    //           user-select: none;
+    //         }
+    //       }
+    //     }
+  
+    //     .top {
+    //       // padding: 5px 2px 5px;
+    //       margin-bottom: 10px;
+    //     }
+  
+    //     .bottom {
+    //       padding: 5px 0px 0px 0px;
+    //     }
+    //   }
+  
+    //   .speed {
+    //     width: 43px;
+    //     height: 170px;
+    //     border-radius: 5px;
+    //     background-color: rgba(0, 0, 0, 0.5);
+  
+    //     &-content {
+    //       height: 100%;
+    //       display: flex;
+    //       flex-direction: column;
+  
+    //       .add-speed--button,
+    //       .sub-speed--button {
+    //         flex: 1;
+    //         display: flex;
+    //         justify-content: center;
+    //         align-items: center;
+    //         cursor: pointer;
+  
+    //         i {
+    //           font-size: 20px;
+    //           font-weight: bolder;
+    //         }
+    //       }
+  
+    //       .speed-text {
+    //         flex: 2;
+    //         display: flex;
+    //         flex-direction: column;
+    //         justify-content: center;
+    //         align-items: center;
+  
+    //         div:first-child {
+    //           font-size: 20px;
+    //           color: #00ee8b;
+    //           font-weight: bolder;
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+  
+    // .right {
+    //   .rightbutton {
+    //     // padding: 0px 0px;
+    //     // // width: 150px;
+    //     // margin-right: 0px;
+  
+    //     .center {
+    //       height: 45px;
+    //       margin: 5px 0px;
+    //       display: flex;
+    //       flex-direction: column;
+  
+    //       .top_in {
+    //         display: flex;
+    //         width: 100%;
+  
+    //         .top_in_left {
+    //           min-width: 70px;
+    //           text-align: right;
+    //           font-size: 22px;
+    //           color: #00ee8b;
+    //           margin-right: 5px;
+    //           margin-left: auto;
+    //         }
+  
+    //         .top_in_right {
+    //           p {
+    //             font-size: 14px;
+    //             line-height: 14px;
+    //             text-align: right;
+    //           }
+    //         }
+    //       }
+  
+    //       .top_in_ASL {
+    //         font-size: 12px;
+    //         line-height: 12px;
+    //         text-align: right;
+    //       }
+    //     }
+  
+    //     .top {
+    //       margin-left: auto;
+    //       width: 43px;
+    //       background: rgba(0, 0, 0, 0.5);
+    //       display: flex;
+    //       flex-direction: column;
+    //       border-radius: 5px;
+    //       height: 80px;
+    //       margin-bottom: 10px;
+  
+    //       img {
+    //         width: 25px;
+    //         height: 25px;
+    //         margin: 5px auto 0px;
+    //       }
+  
+    //       .el-button {
+    //         padding: 4px;
+    //         font-size: 16px;
+    //         background: #3c3c3c;
+    //         color: white;
+    //         width: 25px;
+    //         height: 30px;
+    //         margin: 10px auto 12px;
+    //         -webkit-touch-callout: none;
+    //         -webkit-user-select: none;
+    //         -khtml-user-select: none;
+    //         -moz-user-select: none;
+    //         -ms-user-select: none;
+    //         user-select: none;
+    //       }
+    //     }
+  
+    //     .bottom {
+    //       margin-left: auto;
+    //       width: 40px;
+    //       background: rgba(0, 0, 0, 0.5);
+    //       display: flex;
+    //       flex-direction: column;
+    //       border-radius: 5px;
+    //       height: 80px;
+  
+    //       img {
+    //         width: 25px;
+    //         height: 25px;
+    //         margin: 0px auto 5px;
+    //       }
+  
+    //       .el-button {
+    //         padding: 4px;
+    //         font-size: 20px;
+    //         background: #3c3c3c;
+    //         color: white;
+    //         width: 25px;
+    //         margin: 10px auto 10px;
+    //       }
+    //     }
+    //   }
+    // }
+  
+    // .instrument-panel {
+    //   position: relative;
+  
+    //   .title {
+    //     position: absolute;
+    //     font-size: 12px;
+    //     font-weight: 400;
+    //     top: -5px;
+    //     left: 10px;
+    //     color: #ffffff;
+    //     z-index: 1;
+    //   }
+    // }
+  
+    // .camera-load {
+  
+    //   // background: rgba(6, 25, 39, 0.5);
+    //   // height: 245px;
+    //   // padding: 10px;
+    //   // position: relative;
+    //   // border: 1px solid red;
+    //   .title {
+    //     position: absolute;
+    //     font-size: 12px;
+    //     font-weight: 400;
+    //     top: -5px;
+    //     left: 10px;
+    //     color: #ffffff;
+    //     z-index: 1;
+    //   }
+  
+    //   .camera-control {
+    //     width: 100%;
+    //     margin-bottom: 10px;
+    //     display: flex;
+    //     justify-content: center;
+  
+    //     .promptInformation {
+    //       position: absolute;
+    //       width: 30px;
+    //       height: 30px;
+    //       right: 10px;
+    //       top: 10px;
+    //     }
+  
+    //     .circle-box {
+    //       width: 90px;
+    //       height: 90px;
+    //       border-radius: 50%;
+    //       background-color: rgba(0, 0, 0, 0.5);
+    //       -webkit-mask-image: radial-gradient(circle,
+    //           transparent 35%,
+    //           white 35%);
+    //       mask-image: radial-gradient(circle, transparent 35%, white 35%);
+    //       position: relative;
+  
+    //       .top,
+    //       .left,
+    //       .bottom,
+    //       .right {
+    //         width: 10px;
+    //         height: 10px;
+    //         position: absolute;
+    //         cursor: pointer;
+    //         z-index: 2;
+    //       }
+  
+    //       .top {
+    //         top: -2px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid #fff;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-top: 45px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .left {
+    //         top: 50%;
+    //         left: -2px;
+    //         transform: translateY(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid #fff;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-left: 45px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .bottom {
+    //         bottom: -2px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //         border-top: 10px solid #fff;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-bottom: 45px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .right {
+    //         top: 50%;
+    //         right: -2px;
+    //         transform: translateY(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid #fff;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-right: 45px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .blue-bgc {
+    //         width: 90px;
+    //         height: 90px;
+    //         position: absolute;
+    //         top: 0;
+    //         left: 0;
+    //         z-index: 1;
+    //         border-top: 45px solid transparent;
+    //         border-right: 45px solid transparent;
+    //         border-left: 45px solid transparent;
+    //         border-bottom: 45px solid transparent;
+    //       }
+    //     }
+    //   }
+  
+    //   .camera-select {
+    //     display: flex;
+    //     display: flex;
+    //     justify-content: center;
+  
+    //     :deep() {
+    //       .el-select {
+    //         width: 250px;
+    //         height: 40px;
+    //         line-height: 40px;
+    //         background-color: rgba(0, 0, 0, 0.5);
+    //         border-radius: 5px;
+  
+    //         .el-input {
+    //           width: auto;
+    //           height: auto;
+  
+    //           .el-input__inner {
+    //             background-color: transparent;
+    //             box-shadow: none;
+    //             border: 0;
+    //             color: #fff;
+    //           }
+  
+    //           .el-input__suffix {
+    //             display: flex;
+    //             align-items: center;
+    //           }
+    //         }
+    //       }
+    //     }
+  
+    //     .load-button {
+    //       font-style: normal;
+    //       background: rgba(21, 138, 255, 0.5);
+    //       margin-left: 10px;
+    //       padding: 0 5px;
+  
+    //       &:hover {
+    //         color: #409eff;
+    //       }
+    //     }
+    //   }
+  
+    //   .btn-group {
+    //     display: flex;
+    //     flex-wrap: wrap;
+    //     margin-top: 10px;
+    //     width: 300px;
+    //     padding: 0px 20px;
+  
+    //     .btn-item {
+    //       display: flex;
+    //       // width: 140px;
+    //       box-sizing: border-box;
+    //       margin: 2px 10px;
+    //       cursor: pointer;
+  
+    //       img {
+    //         width: 30px;
+    //         height: 30px;
+    //         margin-right: 3px;
+    //       }
+  
+    //       div {
+    //         font-size: 18px;
+    //         font-style: normal;
+    //       }
+    //     }
+    //   }
+    // }
+  
+    // .payload-control {
+    //   height: 100%;
+    //   display: flex;
+    //   justify-content: center;
+    //   flex-direction: column;
+    //   gap: 15px;
+  
+    //   .left-box {
+    //     display: flex;
+    //     // flex-direction: column;
+    //     align-items: center;
+    //     justify-content: center;
+    //     gap: 10px;
+  
+    //     .circle-box {
+    //       width: 100px;
+    //       height: 100px;
+    //       border-radius: 50%;
+    //       overflow: hidden;
+    //       background-color: rgba(0, 0, 0, 0.5);
+    //       // -webkit-mask-image: radial-gradient(
+    //       //   circle,
+    //       //   transparent 35%,
+    //       //   white 35%
+    //       // );
+    //       // mask-image: radial-gradient(circle, transparent 35%, white 35%);
+    //       position: relative;
+    //       // border: 1px solid red;
+  
+    //       .top,
+    //       .left,
+    //       .bottom,
+    //       .right {
+    //         width: 10px;
+    //         height: 10px;
+    //         position: absolute;
+    //         cursor: pointer;
+    //         z-index: 2;
+    //       }
+  
+    //       .top {
+    //         top: -2px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid #fff;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-top: 50px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .left {
+    //         top: 50%;
+    //         left: -2px;
+    //         transform: translateY(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid #fff;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-left: 50px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .bottom {
+    //         bottom: -2px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //         border-top: 10px solid #fff;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-bottom: 50px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .right {
+    //         top: 50%;
+    //         right: -2px;
+    //         transform: translateY(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid #fff;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-right: 50px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .reset-center {
+    //         position: absolute;
+    //         width: 40%;
+    //         height: 40%;
+    //         left: 50%;
+    //         top: 50%;
+    //         transform: translate(-50%, -50%);
+    //         border-radius: 50%;
+    //         background-color: rgb(63, 66, 68);
+    //         z-index: 2;
+    //         cursor: pointer;
+    //         display: flex;
+    //         justify-content: center;
+    //         align-items: center;
+  
+    //         i {
+    //           color: #fff;
+    //           font-size: 20px;
+    //           font-weight: bolder;
+    //         }
+  
+    //         &:hover {
+    //           background-color: #409eff;
+    //         }
+    //       }
+  
+    //       .blue-bgc {
+    //         width: 100px;
+    //         height: 100px;
+    //         position: absolute;
+    //         top: 0;
+    //         left: 0;
+    //         z-index: 1;
+    //         border-top: 50px solid transparent;
+    //         border-right: 50px solid transparent;
+    //         border-left: 50px solid transparent;
+    //         border-bottom: 50px solid transparent;
+    //       }
+    //     }
+  
+    //     .payload-info {
+    //       font-size: 14px;
+    //     }
+  
+    //     .btn-group {
+    //       width: auto;
+    //       display: flex;
+    //       flex-wrap: wrap;
+    //       width: 200px;
+  
+    //       // flex-direction: column;
+    //       // justify-content: center;
+    //       .btn-item {
+    //         width: 100px;
+    //         display: flex;
+    //         box-sizing: border-box;
+    //         cursor: pointer;
+  
+    //         img {
+    //           width: 30px;
+    //           height: 30px;
+    //           margin-right: 3px;
+    //         }
+  
+    //         div {
+    //           height: 100%;
+    //           font-size: 17px;
+    //           line-height: 30px;
+    //           font-style: normal;
+    //         }
+    //       }
+    //     }
+    //   }
+  
+    //   .right-box {
+    //     position: relative;
+    //     flex-shrink: 0;
+    //     display: flex;
+  
+    //     // justify-content: center;
+    //     .btn-group {
+    //       width: auto;
+    //       display: flex;
+    //       flex-wrap: wrap;
+    //       width: 290px;
+    //       justify-content: center;
+  
+    //       .btn-item {
+    //         width: 140px;
+    //         display: flex;
+    //         box-sizing: border-box;
+    //         cursor: pointer;
+  
+    //         img {
+    //           width: 30px;
+    //           height: 30px;
+    //           margin-right: 3px;
+    //         }
+  
+    //         div {
+    //           width: 100px;
+    //           height: 100%;
+    //           font-size: 17px;
+    //           line-height: 30px;
+    //           font-style: normal;
+    //         }
+    //       }
+    //     }
+  
+    //     .payload-info {
+    //       font-size: 14px;
+  
+    //       .info-item {
+    //         display: flex;
+    //         align-items: center;
+    //         gap: 10px;
+    //         height: 25px;
+  
+    //         div:first-child {
+    //           width: 170px;
+    //         }
+  
+    //         div:nth-child(2) {
+    //           :deep() {
+    //             .el-input-number {
+    //               width: 70px;
+    //               height: 20px;
+  
+    //               &__decrease,
+    //               &__increase {
+    //                 width: 18px;
+    //                 height: 18px;
+    //                 line-height: 18px;
+    //                 background-color: transparent;
+    //                 border-right: 0;
+    //                 border-left: 0;
+  
+    //                 i {
+    //                   color: #fff;
+    //                   font-size: 17px;
+    //                   font-weight: bold;
+    //                 }
+    //               }
+  
+    //               .el-input {
+    //                 margin: 0;
+    //                 padding: 0;
+    //                 height: 18px;
+    //                 display: flex;
+    //                 justify-content: center;
+  
+    //                 &__inner {
+    //                   padding: 0;
+    //                 }
+  
+    //                 input {
+    //                   width: 80px;
+    //                   height: 18px;
+    //                   overflow: hidden;
+    //                   font-size: 14px;
+    //                   font-weight: bold;
+    //                 }
+    //               }
+    //             }
+    //           }
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/components/controlConsole-copy1.vue b/src/views/components/controlConsole-copy1.vue
new file mode 100644
index 0000000..e88eaba
--- /dev/null
+++ b/src/views/components/controlConsole-copy1.vue
@@ -0,0 +1,1154 @@
+<template>
+    <div class="control-console">
+      <div class="control" :class="isShowKzBtn?'actived-blue':''" @click="authenticationPwd">
+        <img src="@/assets/images/open-close.png" />
+      </div>
+      <div class="control-left">
+        <div class="top"  @touchstart="handlePublish('xq')"><div class="xq">向前</div></div>
+        <div class="left" @touchstart="handlePublish('xz')"><div class="xz">向左</div></div>
+        <div class="bottom" @touchstart="handlePublish('xx')"><div class="xx">向下</div></div>
+        <div class="right" @touchstart="handlePublish('xy')"><div class="xy">向右</div></div>
+      </div>
+      <div class="control-right">
+        <div class="top"  @touchstart="handlePublish('ss')"><div class="xq">上升</div></div>
+        <div class="left" @touchstart="handlePublish('xz')"><div class="xz">左转</div></div>
+        <div class="bottom" @touchstart="handlePublish('xj')"><div class="xx">下降</div></div>
+        <div class="right" @touchstart="handlePublish('yz')" ><div class="xy">右转</div></div>
+      </div>
+      <van-dialog v-model:show="dialogVisible" title="确认是否接管?" show-cancel-button @confirm="sureJg"></van-dialog>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { showNotify } from 'vant';
+  import { ref, onMounted, onBeforeUnmount, nextTick, reactive, computed, watch } from 'vue';
+  import { useMyStore } from '@/store'
+  import {exitController,droneController,returnHomeCancel,returnHome} from '@/api/drone/drc'
+  import { useConnectMqtt } from '@/utils/mqtt/connect-mqtt';
+  import { useMqtt, DeviceTopicInfo } from '@/utils/mqtt/index'
+  import { DRC_METHOD } from '@/types/drc'
+  
+  
+  const props = defineProps({
+    sn: {
+      type: String,
+      required: true,
+    },
+    osdVisible: {
+      type: Object,
+      required: true,
+    }
+  });
+  
+  const store = useMyStore()
+  // 显示控制和退出控制状态按钮
+  let isShowKzBtn = ref(false);
+  // 是否接管提示
+  let dialogVisible = ref(false);
+  // 面板提示
+  let hasPermission = ref(false);
+  // 是否返航状态
+  let nowInReturnStatus = ref(false);
+  // 返航状态点击
+  let nowInReturnStatusClick = ref(false)
+  // 控制状态
+  let flightMode = ref('自动控制')
+  // 判断机型是1代还是其他机型 适配替换的api
+  let genPortOne = ref(false)
+  // 判断机型是1代还是其他机型 适配替换的api
+  if (store.state.airPortInfo.deviceType == 1 && store.state.airPortInfo.subType == 0 && store.state.airPortInfo.domain == 3) {
+    genPortOne.value = true
+  }
+  
+  // 控制无人机速度
+  let droneSeepd = ref(5);
+  const SPEED = genPortOne.value ? ref(droneSeepd.value || 5) : ref(500); //  check
+  const HEIGHT = genPortOne.value ? ref(5) : ref(500); //  check
+  const W_SPEED = genPortOne.value ? ref(20) : ref(500) // 机头角速度
+  
+  // A S D....按键
+  let deviceTopicInfo: DeviceTopicInfo = reactive({
+    sn: props.sn || '',
+    pubTopic: '',
+    subTopic: ''
+  })
+  
+  // 连接或断开drc
+  useConnectMqtt()
+  
+  // const clientId = computed(() => {
+  //   return localStorage.getItem('clientId') //store.state.clientId
+  // });
+  let clientId = ref(localStorage.getItem('client_id'))
+  
+  // {"0":"待机","1":"起飞准备","2":"起飞准备完毕","3":"手动飞行","4":"自动起飞","5":"航线飞行","6":"全景拍照","7":"智能跟随","8":"ADS-B 躲避","9":"自动返航","10":"自动降落","11":"强制降落","12":"三桨叶降落","13":"升级中","14":"未连接","15":"APAS","16":"虚拟摇杆状态","17":"指令飞行","18":"空中 RTK 收敛模式","19":"机场选址中"}
+  watch(() => store.state.wsMessage, (newValue, oldValue) => {
+    // console.log('监控值', newValue.mode_code)
+    hasPermission.value = false
+    if (newValue.mode_code == '5' || newValue.mode_code == '17') {
+      hasPermission.value = true
+    }
+    if (newValue.mode_code && (newValue.mode_code == 9 || newValue.mode_code == 10) && !nowInReturnStatusClick.value) {
+      nowInReturnStatus.value = true
+      flightMode.value = '自动控制'
+    } else if (newValue.mode_code && (newValue.mode_code == 9 || newValue.mode_code == 10) && nowInReturnStatusClick.value) {
+      // 没电、强制返航
+      nowInReturnStatus.value = true
+      nowInReturnStatusClick.value = false
+    }
+  }, {deep:true})
+  
+  // 进行控制
+  const enterFlightControl = () => {
+    droneController({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
+      if (result.code != 0) { return }
+      if (result.data.sub && result.data.sub?.length > 0) {
+        deviceTopicInfo.subTopic = result.data.sub[0]
+      }
+      if (result.data.pub && result.data.pub?.length > 0) {
+        deviceTopicInfo.pubTopic = result.data.pub[0]
+      }
+      // 接管成功之后再显示
+      isShowKzBtn.value = true
+      flightMode.value = '人工控制'
+      // 控制成功之后：也可以操作了
+      hasPermission.value = true
+      nowInReturnStatus.value = true
+    })
+  }
+  
+  // 退出控制
+  const exitFlightCOntrol = () => {
+    exitController({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
+      deviceTopicInfo.subTopic = ''
+      deviceTopicInfo.pubTopic = ''
+      flightMode.value = '自动控制'
+    })
+  }
+  
+  const sureJg = () => {
+    dialogVisible.value = false
+    enterFlightControl()
+  }
+  
+  // 是否进行人工控制
+  const authenticationPwd = (value:any, str:String) => {
+    // 提示是否进行人工控制
+    if (!isShowKzBtn.value) {
+      if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' })}
+      dialogVisible.value = true
+    } else {
+      isShowKzBtn.value = false
+      exitFlightCOntrol()
+    }
+  }
+  
+  // 返航
+  const onBackDock = () => {
+    returnHome(props.sn).then((res) => {
+      if (res.code === 0) {
+        nowInReturnStatus.value = true
+        flightMode.value = '自动控制'
+        nowInReturnStatusClick.value = false
+      }
+    })
+  }
+  
+  // 取消返航
+  const notonBackDock = () => {
+    returnHomeCancel({ client_id: clientId.value, dock_sn: props.osdVisible.dockSn}).then((result:any) => {
+    if (result.code !== 0) return
+      nowInReturnStatus.value = false
+      // 取消返航时，退出飞行控制，进入人工控制
+      nowInReturnStatusClick.value = true       
+      flightMode.value = '人工控制'
+    })
+  }
+  
+  // 无人机速度控制
+  const onControlsDroneSpeed = (value:Boolean) => {
+    if (value) {
+      if (droneSeepd.value >= 15) {
+        return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
+      }
+      droneSeepd.value += 1
+    } else {
+      if (droneSeepd.value <= 0) {
+        return showNotify({ type: 'warning', message: '无人机速度范围应处于0~15m/s之间' })
+      }
+      droneSeepd.value -= 1
+    }
+  }
+  
+  const mqttHooks =  useMqtt(deviceTopicInfo)
+  // 字母按键
+  const handlePublish = (str:String) => {
+    console.log('哒哒哒',DRC_METHOD.DRONE_CONTROL)
+    // if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' });}
+    let params = ref({})
+    if (str == 'xq') {params.value = genPortOne.value?{ x: SPEED.value}:{ pitch: 1024+SPEED.value}}
+    else if (str == 'xz') {params.value = genPortOne.value?{ y: -SPEED.value}:{ roll: 1024-SPEED.value}}
+    else if (str == 'xx') {params.value = genPortOne.value?{ x: -SPEED.value}:{ pitch: 1024-SPEED.value}}
+    else if (str == 'xy') {params.value = genPortOne.value?{ y: SPEED.value}:{ roll: 1024+SPEED.value}}
+    else if (str == 'ss') {params.value = genPortOne.value?{ h: HEIGHT.value}:{ throttle: 1024+HEIGHT.value}}
+    else if (str == 'xj') {params.value = genPortOne.value?{ w: -W_SPEED.value}:{ yaw: 1024-W_SPEED.value}}
+    else if (str == 'yz') {params.value = genPortOne.value?{ h: -HEIGHT.value}:{ throttle: 1024+HEIGHT.value}}
+    else if (str == 'xz') {params.value = genPortOne.value?{ w: W_SPEED.value}:{ yaw: 1024+W_SPEED.value}}
+    const body = { method: 'stick_control', data: params.value}
+    mqttHooks?.publishMqtt(deviceTopicInfo.pubTopic, body, {qos: 0})
+  }
+  
+  onMounted(() => {
+    
+  })
+  
+  </script>
+  
+  <style lang="scss" scoped>
+  .control-console {
+    
+    .control {
+      position: absolute;
+      bottom: 12.8rem;
+      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;
+      img {
+        width: 1.6rem;
+        height: 1.6rem;
+      }
+    }
+    .actived-blue {
+      background-image: none;
+      background-color: rgba(23, 124, 198, 0.7);
+    }
+    .control-left {
+      left: 10%;
+    }
+    .control-right {
+      right: 10%;
+    }
+    .control-left, .control-right{
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      overflow: hidden;
+      // background-color: rgba(255, 255, 255, 0.5); /* 白色，50%透明度 */
+      // box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
+      background-color: rgba(0, 0, 0, 0.5);
+      padding: 20px; /* 内边距 */
+      position: absolute;
+      top: 30%;
+      .top,
+      .left,
+      .bottom,
+      .right {
+        width: 10px;
+        height: 10px;
+        position: absolute;
+        cursor: pointer;
+        z-index: 2;
+      }
+  
+      .top {
+        top: -2px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-top: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-left: 10px solid transparent;
+        border-bottom: 10px solid #fff;
+  
+        &:hover {
+          &~.blue-bgc {
+            border-top: 50px solid #fff;
+          }
+        }
+        .xq {
+          position: absolute;
+          top: 10px;
+          font-size: 10px;
+          width: 30px;
+          left: -9px;
+          color: #fff;
+        }
+      }
+  
+      .left {
+        top: 50%;
+        left: -2px;
+        transform: translateY(-50%);
+        border-top: 10px solid transparent;
+        border-right: 10px solid #fff;
+        border-left: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+  
+        &:hover {
+          &~.blue-bgc {
+            border-left: 50px solid #fff;
+          }
+        }
+        .xz {
+          position: absolute;
+          top: -7px;
+          font-size: 10px;
+          width: 30px;
+          left: 11px;
+          color: #fff;
+        }
+      }
+  
+      .bottom {
+        bottom: -2px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-top: 10px solid #fff;
+        border-right: 10px solid transparent;
+        border-left: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+  
+        &:hover {
+          &~.blue-bgc {
+            border-bottom: 50px solid #fff;
+          }
+        }
+        .xx {
+          position: absolute;
+          bottom: 8px;
+          font-size: 10px;
+          width: 30px;
+          left: -9px;
+          color: #fff;
+        }
+      }
+  
+      .right {
+        top: 50%;
+        right: -2px;
+        transform: translateY(-50%);
+        border-top: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-left: 10px solid #fff;
+        border-bottom: 10px solid transparent;
+  
+        &:hover {
+          &~.blue-bgc {
+            border-right: 50px solid #fff;
+          }
+        }
+        .xy {
+          position: absolute;
+          top: -8px;
+          font-size: 10px;
+          width: 30px;
+          right : 2px;
+          color: #fff;
+        }
+      }
+    }
+      // width: 100%;
+      // height: 200px;
+      // margin-top: 20px;
+      // margin: 0 auto;
+      // display: flex;
+      // align-items: center;
+      // justify-content: space-between;
+      // overflow-x: auto;
+      // overflow-y: hidden;
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
+      // color: #fff;
+      // font-weight: bold;
+    // .DroneOperation {
+    //   display: flex;
+    //   align-items: center;
+    //   height: 245px;
+    //   position: relative;
+    // }
+  
+    // .center {
+    //   display: flex;
+    //   align-items: center;
+  
+    //   &_left,
+    //   &_center,
+    //   .speed {
+    //     margin-right: 10px;
+    //   }
+  
+    //   .center_left {
+    //     .tubiaoshow {
+    //       height: 50px;
+    //       display: flex;
+    //       justify-content: center;
+    //       align-items: center;
+  
+    //       img {
+    //         width: 40px;
+    //         height: 50px;
+    //         cursor: pointer;
+    //       }
+    //     }
+  
+    //     .Airplanemode {
+    //       font-style: normal;
+    //       margin: 5px 0px;
+    //       text-align: center;
+    //     }
+  
+    //     .operatingjixufanhang {
+    //       display: flex;
+    //       justify-content: center;
+  
+    //       .el-button {
+    //         font-size: 16px;
+    //         background-color: rgba(0, 0, 0, 0.5);
+    //         color: white;
+    //         border-width: 0;
+    //         margin: 5px;
+    //       }
+    //     }
+    //   }
+  
+    //   .center_center {
+    //     width: 120px;
+  
+    //     padding: 0px 0px;
+  
+    //     .center {
+    //       height: 45px;
+  
+    //       p {
+    //         line-height: 50px;
+    //         color: #00ee8b;
+    //         font-size: 20px;
+    //         margin: 0 auto;
+    //       }
+    //     }
+  
+    //     .top,
+    //     .bottom {
+    //       background: rgba(0, 0, 0, 0.5);
+    //       border-radius: 5px;
+    //       display: flex;
+    //       height: 80px;
+    //       width: 100%;
+  
+    //       .Q,
+    //       .W,
+    //       .E {
+    //         flex: 1;
+    //         display: flex;
+    //         flex-direction: column;
+    //         align-items: center;
+    //         justify-content: center;
+    //         gap: 10px;
+  
+    //         img {
+    //           width: 20px;
+    //           height: 20px;
+    //           // margin-top: 5px;
+    //           // margin-top: 5px;
+    //         }
+  
+    //         .el-button {
+    //           padding: 4px;
+    //           font-size: 20px;
+    //           height: 30px;
+    //           background: #3c3c3c;
+    //           color: white;
+    //           -webkit-touch-callout: none;
+    //           -webkit-user-select: none;
+    //           -khtml-user-select: none;
+    //           -moz-user-select: none;
+    //           -ms-user-select: none;
+    //           user-select: none;
+    //         }
+    //       }
+  
+    //       .A,
+    //       .S,
+    //       .D {
+    //         flex: 1;
+    //         display: flex;
+    //         flex-direction: column;
+    //         align-items: center;
+    //         justify-content: center;
+  
+    //         img {
+    //           width: 20px;
+    //           height: 20px;
+    //         }
+  
+    //         .el-button {
+    //           padding: 4px;
+    //           font-size: 20px;
+    //           margin-bottom: 10px;
+    //           height: 30px;
+    //           background: #3c3c3c;
+    //           color: white;
+    //           -webkit-touch-callout: none;
+    //           -webkit-user-select: none;
+    //           -khtml-user-select: none;
+    //           -moz-user-select: none;
+    //           -ms-user-select: none;
+    //           user-select: none;
+    //         }
+    //       }
+    //     }
+  
+    //     .top {
+    //       // padding: 5px 2px 5px;
+    //       margin-bottom: 10px;
+    //     }
+  
+    //     .bottom {
+    //       padding: 5px 0px 0px 0px;
+    //     }
+    //   }
+  
+    //   .speed {
+    //     width: 43px;
+    //     height: 170px;
+    //     border-radius: 5px;
+    //     background-color: rgba(0, 0, 0, 0.5);
+  
+    //     &-content {
+    //       height: 100%;
+    //       display: flex;
+    //       flex-direction: column;
+  
+    //       .add-speed--button,
+    //       .sub-speed--button {
+    //         flex: 1;
+    //         display: flex;
+    //         justify-content: center;
+    //         align-items: center;
+    //         cursor: pointer;
+  
+    //         i {
+    //           font-size: 20px;
+    //           font-weight: bolder;
+    //         }
+    //       }
+  
+    //       .speed-text {
+    //         flex: 2;
+    //         display: flex;
+    //         flex-direction: column;
+    //         justify-content: center;
+    //         align-items: center;
+  
+    //         div:first-child {
+    //           font-size: 20px;
+    //           color: #00ee8b;
+    //           font-weight: bolder;
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+  
+    // .right {
+    //   .rightbutton {
+    //     // padding: 0px 0px;
+    //     // // width: 150px;
+    //     // margin-right: 0px;
+  
+    //     .center {
+    //       height: 45px;
+    //       margin: 5px 0px;
+    //       display: flex;
+    //       flex-direction: column;
+  
+    //       .top_in {
+    //         display: flex;
+    //         width: 100%;
+  
+    //         .top_in_left {
+    //           min-width: 70px;
+    //           text-align: right;
+    //           font-size: 22px;
+    //           color: #00ee8b;
+    //           margin-right: 5px;
+    //           margin-left: auto;
+    //         }
+  
+    //         .top_in_right {
+    //           p {
+    //             font-size: 14px;
+    //             line-height: 14px;
+    //             text-align: right;
+    //           }
+    //         }
+    //       }
+  
+    //       .top_in_ASL {
+    //         font-size: 12px;
+    //         line-height: 12px;
+    //         text-align: right;
+    //       }
+    //     }
+  
+    //     .top {
+    //       margin-left: auto;
+    //       width: 43px;
+    //       background: rgba(0, 0, 0, 0.5);
+    //       display: flex;
+    //       flex-direction: column;
+    //       border-radius: 5px;
+    //       height: 80px;
+    //       margin-bottom: 10px;
+  
+    //       img {
+    //         width: 25px;
+    //         height: 25px;
+    //         margin: 5px auto 0px;
+    //       }
+  
+    //       .el-button {
+    //         padding: 4px;
+    //         font-size: 16px;
+    //         background: #3c3c3c;
+    //         color: white;
+    //         width: 25px;
+    //         height: 30px;
+    //         margin: 10px auto 12px;
+    //         -webkit-touch-callout: none;
+    //         -webkit-user-select: none;
+    //         -khtml-user-select: none;
+    //         -moz-user-select: none;
+    //         -ms-user-select: none;
+    //         user-select: none;
+    //       }
+    //     }
+  
+    //     .bottom {
+    //       margin-left: auto;
+    //       width: 40px;
+    //       background: rgba(0, 0, 0, 0.5);
+    //       display: flex;
+    //       flex-direction: column;
+    //       border-radius: 5px;
+    //       height: 80px;
+  
+    //       img {
+    //         width: 25px;
+    //         height: 25px;
+    //         margin: 0px auto 5px;
+    //       }
+  
+    //       .el-button {
+    //         padding: 4px;
+    //         font-size: 20px;
+    //         background: #3c3c3c;
+    //         color: white;
+    //         width: 25px;
+    //         margin: 10px auto 10px;
+    //       }
+    //     }
+    //   }
+    // }
+  
+    // .instrument-panel {
+    //   position: relative;
+  
+    //   .title {
+    //     position: absolute;
+    //     font-size: 12px;
+    //     font-weight: 400;
+    //     top: -5px;
+    //     left: 10px;
+    //     color: #ffffff;
+    //     z-index: 1;
+    //   }
+    // }
+  
+    // .camera-load {
+  
+    //   // background: rgba(6, 25, 39, 0.5);
+    //   // height: 245px;
+    //   // padding: 10px;
+    //   // position: relative;
+    //   // border: 1px solid red;
+    //   .title {
+    //     position: absolute;
+    //     font-size: 12px;
+    //     font-weight: 400;
+    //     top: -5px;
+    //     left: 10px;
+    //     color: #ffffff;
+    //     z-index: 1;
+    //   }
+  
+    //   .camera-control {
+    //     width: 100%;
+    //     margin-bottom: 10px;
+    //     display: flex;
+    //     justify-content: center;
+  
+    //     .promptInformation {
+    //       position: absolute;
+    //       width: 30px;
+    //       height: 30px;
+    //       right: 10px;
+    //       top: 10px;
+    //     }
+  
+    //     .circle-box {
+    //       width: 90px;
+    //       height: 90px;
+    //       border-radius: 50%;
+    //       background-color: rgba(0, 0, 0, 0.5);
+    //       -webkit-mask-image: radial-gradient(circle,
+    //           transparent 35%,
+    //           white 35%);
+    //       mask-image: radial-gradient(circle, transparent 35%, white 35%);
+    //       position: relative;
+  
+    //       .top,
+    //       .left,
+    //       .bottom,
+    //       .right {
+    //         width: 10px;
+    //         height: 10px;
+    //         position: absolute;
+    //         cursor: pointer;
+    //         z-index: 2;
+    //       }
+  
+    //       .top {
+    //         top: -2px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid #fff;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-top: 45px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .left {
+    //         top: 50%;
+    //         left: -2px;
+    //         transform: translateY(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid #fff;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-left: 45px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .bottom {
+    //         bottom: -2px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //         border-top: 10px solid #fff;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-bottom: 45px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .right {
+    //         top: 50%;
+    //         right: -2px;
+    //         transform: translateY(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid #fff;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-right: 45px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .blue-bgc {
+    //         width: 90px;
+    //         height: 90px;
+    //         position: absolute;
+    //         top: 0;
+    //         left: 0;
+    //         z-index: 1;
+    //         border-top: 45px solid transparent;
+    //         border-right: 45px solid transparent;
+    //         border-left: 45px solid transparent;
+    //         border-bottom: 45px solid transparent;
+    //       }
+    //     }
+    //   }
+  
+    //   .camera-select {
+    //     display: flex;
+    //     display: flex;
+    //     justify-content: center;
+  
+    //     :deep() {
+    //       .el-select {
+    //         width: 250px;
+    //         height: 40px;
+    //         line-height: 40px;
+    //         background-color: rgba(0, 0, 0, 0.5);
+    //         border-radius: 5px;
+  
+    //         .el-input {
+    //           width: auto;
+    //           height: auto;
+  
+    //           .el-input__inner {
+    //             background-color: transparent;
+    //             box-shadow: none;
+    //             border: 0;
+    //             color: #fff;
+    //           }
+  
+    //           .el-input__suffix {
+    //             display: flex;
+    //             align-items: center;
+    //           }
+    //         }
+    //       }
+    //     }
+  
+    //     .load-button {
+    //       font-style: normal;
+    //       background: rgba(21, 138, 255, 0.5);
+    //       margin-left: 10px;
+    //       padding: 0 5px;
+  
+    //       &:hover {
+    //         color: #409eff;
+    //       }
+    //     }
+    //   }
+  
+    //   .btn-group {
+    //     display: flex;
+    //     flex-wrap: wrap;
+    //     margin-top: 10px;
+    //     width: 300px;
+    //     padding: 0px 20px;
+  
+    //     .btn-item {
+    //       display: flex;
+    //       // width: 140px;
+    //       box-sizing: border-box;
+    //       margin: 2px 10px;
+    //       cursor: pointer;
+  
+    //       img {
+    //         width: 30px;
+    //         height: 30px;
+    //         margin-right: 3px;
+    //       }
+  
+    //       div {
+    //         font-size: 18px;
+    //         font-style: normal;
+    //       }
+    //     }
+    //   }
+    // }
+  
+    // .payload-control {
+    //   height: 100%;
+    //   display: flex;
+    //   justify-content: center;
+    //   flex-direction: column;
+    //   gap: 15px;
+  
+    //   .left-box {
+    //     display: flex;
+    //     // flex-direction: column;
+    //     align-items: center;
+    //     justify-content: center;
+    //     gap: 10px;
+  
+    //     .circle-box {
+    //       width: 100px;
+    //       height: 100px;
+    //       border-radius: 50%;
+    //       overflow: hidden;
+    //       background-color: rgba(0, 0, 0, 0.5);
+    //       // -webkit-mask-image: radial-gradient(
+    //       //   circle,
+    //       //   transparent 35%,
+    //       //   white 35%
+    //       // );
+    //       // mask-image: radial-gradient(circle, transparent 35%, white 35%);
+    //       position: relative;
+    //       // border: 1px solid red;
+  
+    //       .top,
+    //       .left,
+    //       .bottom,
+    //       .right {
+    //         width: 10px;
+    //         height: 10px;
+    //         position: absolute;
+    //         cursor: pointer;
+    //         z-index: 2;
+    //       }
+  
+    //       .top {
+    //         top: -2px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid #fff;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-top: 50px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .left {
+    //         top: 50%;
+    //         left: -2px;
+    //         transform: translateY(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid #fff;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-left: 50px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .bottom {
+    //         bottom: -2px;
+    //         left: 50%;
+    //         transform: translateX(-50%);
+    //         border-top: 10px solid #fff;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid transparent;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-bottom: 50px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .right {
+    //         top: 50%;
+    //         right: -2px;
+    //         transform: translateY(-50%);
+    //         border-top: 10px solid transparent;
+    //         border-right: 10px solid transparent;
+    //         border-left: 10px solid #fff;
+    //         border-bottom: 10px solid transparent;
+  
+    //         &:hover {
+    //           &~.blue-bgc {
+    //             border-right: 50px solid #409eff;
+    //           }
+    //         }
+    //       }
+  
+    //       .reset-center {
+    //         position: absolute;
+    //         width: 40%;
+    //         height: 40%;
+    //         left: 50%;
+    //         top: 50%;
+    //         transform: translate(-50%, -50%);
+    //         border-radius: 50%;
+    //         background-color: rgb(63, 66, 68);
+    //         z-index: 2;
+    //         cursor: pointer;
+    //         display: flex;
+    //         justify-content: center;
+    //         align-items: center;
+  
+    //         i {
+    //           color: #fff;
+    //           font-size: 20px;
+    //           font-weight: bolder;
+    //         }
+  
+    //         &:hover {
+    //           background-color: #409eff;
+    //         }
+    //       }
+  
+    //       .blue-bgc {
+    //         width: 100px;
+    //         height: 100px;
+    //         position: absolute;
+    //         top: 0;
+    //         left: 0;
+    //         z-index: 1;
+    //         border-top: 50px solid transparent;
+    //         border-right: 50px solid transparent;
+    //         border-left: 50px solid transparent;
+    //         border-bottom: 50px solid transparent;
+    //       }
+    //     }
+  
+    //     .payload-info {
+    //       font-size: 14px;
+    //     }
+  
+    //     .btn-group {
+    //       width: auto;
+    //       display: flex;
+    //       flex-wrap: wrap;
+    //       width: 200px;
+  
+    //       // flex-direction: column;
+    //       // justify-content: center;
+    //       .btn-item {
+    //         width: 100px;
+    //         display: flex;
+    //         box-sizing: border-box;
+    //         cursor: pointer;
+  
+    //         img {
+    //           width: 30px;
+    //           height: 30px;
+    //           margin-right: 3px;
+    //         }
+  
+    //         div {
+    //           height: 100%;
+    //           font-size: 17px;
+    //           line-height: 30px;
+    //           font-style: normal;
+    //         }
+    //       }
+    //     }
+    //   }
+  
+    //   .right-box {
+    //     position: relative;
+    //     flex-shrink: 0;
+    //     display: flex;
+  
+    //     // justify-content: center;
+    //     .btn-group {
+    //       width: auto;
+    //       display: flex;
+    //       flex-wrap: wrap;
+    //       width: 290px;
+    //       justify-content: center;
+  
+    //       .btn-item {
+    //         width: 140px;
+    //         display: flex;
+    //         box-sizing: border-box;
+    //         cursor: pointer;
+  
+    //         img {
+    //           width: 30px;
+    //           height: 30px;
+    //           margin-right: 3px;
+    //         }
+  
+    //         div {
+    //           width: 100px;
+    //           height: 100%;
+    //           font-size: 17px;
+    //           line-height: 30px;
+    //           font-style: normal;
+    //         }
+    //       }
+    //     }
+  
+    //     .payload-info {
+    //       font-size: 14px;
+  
+    //       .info-item {
+    //         display: flex;
+    //         align-items: center;
+    //         gap: 10px;
+    //         height: 25px;
+  
+    //         div:first-child {
+    //           width: 170px;
+    //         }
+  
+    //         div:nth-child(2) {
+    //           :deep() {
+    //             .el-input-number {
+    //               width: 70px;
+    //               height: 20px;
+  
+    //               &__decrease,
+    //               &__increase {
+    //                 width: 18px;
+    //                 height: 18px;
+    //                 line-height: 18px;
+    //                 background-color: transparent;
+    //                 border-right: 0;
+    //                 border-left: 0;
+  
+    //                 i {
+    //                   color: #fff;
+    //                   font-size: 17px;
+    //                   font-weight: bold;
+    //                 }
+    //               }
+  
+    //               .el-input {
+    //                 margin: 0;
+    //                 padding: 0;
+    //                 height: 18px;
+    //                 display: flex;
+    //                 justify-content: center;
+  
+    //                 &__inner {
+    //                   padding: 0;
+    //                 }
+  
+    //                 input {
+    //                   width: 80px;
+    //                   height: 18px;
+    //                   overflow: hidden;
+    //                   font-size: 14px;
+    //                   font-weight: bold;
+    //                 }
+    //               }
+    //             }
+    //           }
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/components/controlConsole.vue b/src/views/components/controlConsole.vue
index 461f7f9..d695bbf 100644
--- a/src/views/components/controlConsole.vue
+++ b/src/views/components/controlConsole.vue
@@ -4,16 +4,16 @@
       <img src="@/assets/images/open-close.png" />
     </div>
     <div class="control-left" v-show="isShowKzBtn">
-      <div class="top"  @touchstart="handlePublish({ x: SPEED })"><div class="xq">向前</div></div>
-      <div class="left" @touchstart="handlePublish({ y: -SPEED })"><div class="xz">向左</div></div>
-      <div class="bottom" @touchstart="handlePublish({ x: -SPEED })"><div class="xx">向下</div></div>
-      <div class="right" @touchstart="handlePublish({ y: SPEED })"><div class="xy">向右</div></div>
+      <div class="top"  @touchstart="handlePublish('xq')"><div class="xq">向前</div></div>
+      <div class="left" @touchstart="handlePublish('xz')"><div class="xz">向左</div></div>
+      <div class="bottom" @touchstart="handlePublish('xx')"><div class="xx">向下</div></div>
+      <div class="right" @touchstart="handlePublish('xy')"><div class="xy">向右</div></div>
     </div>
     <div class="control-right" v-show="isShowKzBtn">
-      <div class="top"  @touchstart="handlePublish({ h: HEIGHT })"><div class="xq">上升</div></div>
-      <div class="left" @touchstart="handlePublish({ w: -W_SPEED })"><div class="xz">左转</div></div>
-      <div class="bottom" @touchstart="handlePublish({ h: -HEIGHT })"><div class="xx">下降</div></div>
-      <div class="right" @touchstart="handlePublish({ w: W_SPEED })" ><div class="xy">右转</div></div>
+      <div class="top"  @touchstart="handlePublish('ss')"><div class="xq">上升</div></div>
+      <div class="left" @touchstart="handlePublish('zz')"><div class="xz">左转</div></div>
+      <div class="bottom" @touchstart="handlePublish('xj')"><div class="xx">下降</div></div>
+      <div class="right" @touchstart="handlePublish('yz')" ><div class="xy">右转</div></div>
     </div>
     <van-dialog v-model:show="dialogVisible" title="确认是否接管?" show-cancel-button @confirm="sureJg"></van-dialog>
   </div>
@@ -54,11 +54,16 @@
 // 控制状态
 let flightMode = ref('自动控制')
 
+let genPortOne = ref(false)
+if (store.state.airPortInfo.deviceType == 1 && store.state.airPortInfo.subType == 0 && store.state.airPortInfo.domain == 3) {
+  genPortOne.value = true
+}
+
 // 控制无人机速度
 let droneSeepd = ref(5);
-const SPEED = ref(droneSeepd.value || 5) //  check
-const HEIGHT = ref(5) //  check
-const W_SPEED = ref(20) // 机头角速度
+const SPEED = genPortOne.value ? ref(droneSeepd.value || 5) : ref(500); //  check
+const HEIGHT = genPortOne.value ? ref(5) : ref(500); //  check
+const W_SPEED = genPortOne.value ? ref(20) : ref(500); // 机头角速度
 
 // A S D....按键
 let deviceTopicInfo: DeviceTopicInfo = reactive({
@@ -175,10 +180,29 @@
 }
 
 const mqttHooks =  useMqtt(deviceTopicInfo)
+let seq = ref(0)
 // 字母按键
-const handlePublish = (params:Object) => {
-  if (!hasPermission.value) { return showNotify({ type: 'warning', message: '暂无无人机控制权限' });}
-  const body = { method: DRC_METHOD.DRONE_CONTROL, data: params}
+const handlePublish = (str:String) => {
+  // 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++ }
+  } else if(str === 'xz') {
+    params.value = genPortOne.value ? { y: -SPEED.value,seq: seq.value++ } : { y: (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++ }
+  } else if(str === 'xy') {
+    params.value = genPortOne.value ? { y: SPEED.value,seq: seq.value++ } :  { y: (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++ }
+  } else if(str === 'zz') {
+    params.value = genPortOne.value ? { w: -W_SPEED.value,seq: seq.value++ } : { w: (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++ }
+  } else if(str === 'yz') {
+    params.value = genPortOne.value ? { w: W_SPEED.value,seq: seq.value++ } :  { w: (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})
 }
 
@@ -338,801 +362,5 @@
       }
     }
   }
-    // width: 100%;
-    // height: 200px;
-    // margin-top: 20px;
-    // margin: 0 auto;
-    // display: flex;
-    // align-items: center;
-    // justify-content: space-between;
-    // overflow-x: auto;
-    // overflow-y: hidden;
-    // background-repeat: no-repeat;
-    // background-size: 100% 100%;
-    // color: #fff;
-    // font-weight: bold;
-  // .DroneOperation {
-  //   display: flex;
-  //   align-items: center;
-  //   height: 245px;
-  //   position: relative;
-  // }
-
-  // .center {
-  //   display: flex;
-  //   align-items: center;
-
-  //   &_left,
-  //   &_center,
-  //   .speed {
-  //     margin-right: 10px;
-  //   }
-
-  //   .center_left {
-  //     .tubiaoshow {
-  //       height: 50px;
-  //       display: flex;
-  //       justify-content: center;
-  //       align-items: center;
-
-  //       img {
-  //         width: 40px;
-  //         height: 50px;
-  //         cursor: pointer;
-  //       }
-  //     }
-
-  //     .Airplanemode {
-  //       font-style: normal;
-  //       margin: 5px 0px;
-  //       text-align: center;
-  //     }
-
-  //     .operatingjixufanhang {
-  //       display: flex;
-  //       justify-content: center;
-
-  //       .el-button {
-  //         font-size: 16px;
-  //         background-color: rgba(0, 0, 0, 0.5);
-  //         color: white;
-  //         border-width: 0;
-  //         margin: 5px;
-  //       }
-  //     }
-  //   }
-
-  //   .center_center {
-  //     width: 120px;
-
-  //     padding: 0px 0px;
-
-  //     .center {
-  //       height: 45px;
-
-  //       p {
-  //         line-height: 50px;
-  //         color: #00ee8b;
-  //         font-size: 20px;
-  //         margin: 0 auto;
-  //       }
-  //     }
-
-  //     .top,
-  //     .bottom {
-  //       background: rgba(0, 0, 0, 0.5);
-  //       border-radius: 5px;
-  //       display: flex;
-  //       height: 80px;
-  //       width: 100%;
-
-  //       .Q,
-  //       .W,
-  //       .E {
-  //         flex: 1;
-  //         display: flex;
-  //         flex-direction: column;
-  //         align-items: center;
-  //         justify-content: center;
-  //         gap: 10px;
-
-  //         img {
-  //           width: 20px;
-  //           height: 20px;
-  //           // margin-top: 5px;
-  //           // margin-top: 5px;
-  //         }
-
-  //         .el-button {
-  //           padding: 4px;
-  //           font-size: 20px;
-  //           height: 30px;
-  //           background: #3c3c3c;
-  //           color: white;
-  //           -webkit-touch-callout: none;
-  //           -webkit-user-select: none;
-  //           -khtml-user-select: none;
-  //           -moz-user-select: none;
-  //           -ms-user-select: none;
-  //           user-select: none;
-  //         }
-  //       }
-
-  //       .A,
-  //       .S,
-  //       .D {
-  //         flex: 1;
-  //         display: flex;
-  //         flex-direction: column;
-  //         align-items: center;
-  //         justify-content: center;
-
-  //         img {
-  //           width: 20px;
-  //           height: 20px;
-  //         }
-
-  //         .el-button {
-  //           padding: 4px;
-  //           font-size: 20px;
-  //           margin-bottom: 10px;
-  //           height: 30px;
-  //           background: #3c3c3c;
-  //           color: white;
-  //           -webkit-touch-callout: none;
-  //           -webkit-user-select: none;
-  //           -khtml-user-select: none;
-  //           -moz-user-select: none;
-  //           -ms-user-select: none;
-  //           user-select: none;
-  //         }
-  //       }
-  //     }
-
-  //     .top {
-  //       // padding: 5px 2px 5px;
-  //       margin-bottom: 10px;
-  //     }
-
-  //     .bottom {
-  //       padding: 5px 0px 0px 0px;
-  //     }
-  //   }
-
-  //   .speed {
-  //     width: 43px;
-  //     height: 170px;
-  //     border-radius: 5px;
-  //     background-color: rgba(0, 0, 0, 0.5);
-
-  //     &-content {
-  //       height: 100%;
-  //       display: flex;
-  //       flex-direction: column;
-
-  //       .add-speed--button,
-  //       .sub-speed--button {
-  //         flex: 1;
-  //         display: flex;
-  //         justify-content: center;
-  //         align-items: center;
-  //         cursor: pointer;
-
-  //         i {
-  //           font-size: 20px;
-  //           font-weight: bolder;
-  //         }
-  //       }
-
-  //       .speed-text {
-  //         flex: 2;
-  //         display: flex;
-  //         flex-direction: column;
-  //         justify-content: center;
-  //         align-items: center;
-
-  //         div:first-child {
-  //           font-size: 20px;
-  //           color: #00ee8b;
-  //           font-weight: bolder;
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-
-  // .right {
-  //   .rightbutton {
-  //     // padding: 0px 0px;
-  //     // // width: 150px;
-  //     // margin-right: 0px;
-
-  //     .center {
-  //       height: 45px;
-  //       margin: 5px 0px;
-  //       display: flex;
-  //       flex-direction: column;
-
-  //       .top_in {
-  //         display: flex;
-  //         width: 100%;
-
-  //         .top_in_left {
-  //           min-width: 70px;
-  //           text-align: right;
-  //           font-size: 22px;
-  //           color: #00ee8b;
-  //           margin-right: 5px;
-  //           margin-left: auto;
-  //         }
-
-  //         .top_in_right {
-  //           p {
-  //             font-size: 14px;
-  //             line-height: 14px;
-  //             text-align: right;
-  //           }
-  //         }
-  //       }
-
-  //       .top_in_ASL {
-  //         font-size: 12px;
-  //         line-height: 12px;
-  //         text-align: right;
-  //       }
-  //     }
-
-  //     .top {
-  //       margin-left: auto;
-  //       width: 43px;
-  //       background: rgba(0, 0, 0, 0.5);
-  //       display: flex;
-  //       flex-direction: column;
-  //       border-radius: 5px;
-  //       height: 80px;
-  //       margin-bottom: 10px;
-
-  //       img {
-  //         width: 25px;
-  //         height: 25px;
-  //         margin: 5px auto 0px;
-  //       }
-
-  //       .el-button {
-  //         padding: 4px;
-  //         font-size: 16px;
-  //         background: #3c3c3c;
-  //         color: white;
-  //         width: 25px;
-  //         height: 30px;
-  //         margin: 10px auto 12px;
-  //         -webkit-touch-callout: none;
-  //         -webkit-user-select: none;
-  //         -khtml-user-select: none;
-  //         -moz-user-select: none;
-  //         -ms-user-select: none;
-  //         user-select: none;
-  //       }
-  //     }
-
-  //     .bottom {
-  //       margin-left: auto;
-  //       width: 40px;
-  //       background: rgba(0, 0, 0, 0.5);
-  //       display: flex;
-  //       flex-direction: column;
-  //       border-radius: 5px;
-  //       height: 80px;
-
-  //       img {
-  //         width: 25px;
-  //         height: 25px;
-  //         margin: 0px auto 5px;
-  //       }
-
-  //       .el-button {
-  //         padding: 4px;
-  //         font-size: 20px;
-  //         background: #3c3c3c;
-  //         color: white;
-  //         width: 25px;
-  //         margin: 10px auto 10px;
-  //       }
-  //     }
-  //   }
-  // }
-
-  // .instrument-panel {
-  //   position: relative;
-
-  //   .title {
-  //     position: absolute;
-  //     font-size: 12px;
-  //     font-weight: 400;
-  //     top: -5px;
-  //     left: 10px;
-  //     color: #ffffff;
-  //     z-index: 1;
-  //   }
-  // }
-
-  // .camera-load {
-
-  //   // background: rgba(6, 25, 39, 0.5);
-  //   // height: 245px;
-  //   // padding: 10px;
-  //   // position: relative;
-  //   // border: 1px solid red;
-  //   .title {
-  //     position: absolute;
-  //     font-size: 12px;
-  //     font-weight: 400;
-  //     top: -5px;
-  //     left: 10px;
-  //     color: #ffffff;
-  //     z-index: 1;
-  //   }
-
-  //   .camera-control {
-  //     width: 100%;
-  //     margin-bottom: 10px;
-  //     display: flex;
-  //     justify-content: center;
-
-  //     .promptInformation {
-  //       position: absolute;
-  //       width: 30px;
-  //       height: 30px;
-  //       right: 10px;
-  //       top: 10px;
-  //     }
-
-  //     .circle-box {
-  //       width: 90px;
-  //       height: 90px;
-  //       border-radius: 50%;
-  //       background-color: rgba(0, 0, 0, 0.5);
-  //       -webkit-mask-image: radial-gradient(circle,
-  //           transparent 35%,
-  //           white 35%);
-  //       mask-image: radial-gradient(circle, transparent 35%, white 35%);
-  //       position: relative;
-
-  //       .top,
-  //       .left,
-  //       .bottom,
-  //       .right {
-  //         width: 10px;
-  //         height: 10px;
-  //         position: absolute;
-  //         cursor: pointer;
-  //         z-index: 2;
-  //       }
-
-  //       .top {
-  //         top: -2px;
-  //         left: 50%;
-  //         transform: translateX(-50%);
-  //         border-top: 10px solid transparent;
-  //         border-right: 10px solid transparent;
-  //         border-left: 10px solid transparent;
-  //         border-bottom: 10px solid #fff;
-
-  //         &:hover {
-  //           &~.blue-bgc {
-  //             border-top: 45px solid #409eff;
-  //           }
-  //         }
-  //       }
-
-  //       .left {
-  //         top: 50%;
-  //         left: -2px;
-  //         transform: translateY(-50%);
-  //         border-top: 10px solid transparent;
-  //         border-right: 10px solid #fff;
-  //         border-left: 10px solid transparent;
-  //         border-bottom: 10px solid transparent;
-
-  //         &:hover {
-  //           &~.blue-bgc {
-  //             border-left: 45px solid #409eff;
-  //           }
-  //         }
-  //       }
-
-  //       .bottom {
-  //         bottom: -2px;
-  //         left: 50%;
-  //         transform: translateX(-50%);
-  //         border-top: 10px solid #fff;
-  //         border-right: 10px solid transparent;
-  //         border-left: 10px solid transparent;
-  //         border-bottom: 10px solid transparent;
-
-  //         &:hover {
-  //           &~.blue-bgc {
-  //             border-bottom: 45px solid #409eff;
-  //           }
-  //         }
-  //       }
-
-  //       .right {
-  //         top: 50%;
-  //         right: -2px;
-  //         transform: translateY(-50%);
-  //         border-top: 10px solid transparent;
-  //         border-right: 10px solid transparent;
-  //         border-left: 10px solid #fff;
-  //         border-bottom: 10px solid transparent;
-
-  //         &:hover {
-  //           &~.blue-bgc {
-  //             border-right: 45px solid #409eff;
-  //           }
-  //         }
-  //       }
-
-  //       .blue-bgc {
-  //         width: 90px;
-  //         height: 90px;
-  //         position: absolute;
-  //         top: 0;
-  //         left: 0;
-  //         z-index: 1;
-  //         border-top: 45px solid transparent;
-  //         border-right: 45px solid transparent;
-  //         border-left: 45px solid transparent;
-  //         border-bottom: 45px solid transparent;
-  //       }
-  //     }
-  //   }
-
-  //   .camera-select {
-  //     display: flex;
-  //     display: flex;
-  //     justify-content: center;
-
-  //     :deep() {
-  //       .el-select {
-  //         width: 250px;
-  //         height: 40px;
-  //         line-height: 40px;
-  //         background-color: rgba(0, 0, 0, 0.5);
-  //         border-radius: 5px;
-
-  //         .el-input {
-  //           width: auto;
-  //           height: auto;
-
-  //           .el-input__inner {
-  //             background-color: transparent;
-  //             box-shadow: none;
-  //             border: 0;
-  //             color: #fff;
-  //           }
-
-  //           .el-input__suffix {
-  //             display: flex;
-  //             align-items: center;
-  //           }
-  //         }
-  //       }
-  //     }
-
-  //     .load-button {
-  //       font-style: normal;
-  //       background: rgba(21, 138, 255, 0.5);
-  //       margin-left: 10px;
-  //       padding: 0 5px;
-
-  //       &:hover {
-  //         color: #409eff;
-  //       }
-  //     }
-  //   }
-
-  //   .btn-group {
-  //     display: flex;
-  //     flex-wrap: wrap;
-  //     margin-top: 10px;
-  //     width: 300px;
-  //     padding: 0px 20px;
-
-  //     .btn-item {
-  //       display: flex;
-  //       // width: 140px;
-  //       box-sizing: border-box;
-  //       margin: 2px 10px;
-  //       cursor: pointer;
-
-  //       img {
-  //         width: 30px;
-  //         height: 30px;
-  //         margin-right: 3px;
-  //       }
-
-  //       div {
-  //         font-size: 18px;
-  //         font-style: normal;
-  //       }
-  //     }
-  //   }
-  // }
-
-  // .payload-control {
-  //   height: 100%;
-  //   display: flex;
-  //   justify-content: center;
-  //   flex-direction: column;
-  //   gap: 15px;
-
-  //   .left-box {
-  //     display: flex;
-  //     // flex-direction: column;
-  //     align-items: center;
-  //     justify-content: center;
-  //     gap: 10px;
-
-  //     .circle-box {
-  //       width: 100px;
-  //       height: 100px;
-  //       border-radius: 50%;
-  //       overflow: hidden;
-  //       background-color: rgba(0, 0, 0, 0.5);
-  //       // -webkit-mask-image: radial-gradient(
-  //       //   circle,
-  //       //   transparent 35%,
-  //       //   white 35%
-  //       // );
-  //       // mask-image: radial-gradient(circle, transparent 35%, white 35%);
-  //       position: relative;
-  //       // border: 1px solid red;
-
-  //       .top,
-  //       .left,
-  //       .bottom,
-  //       .right {
-  //         width: 10px;
-  //         height: 10px;
-  //         position: absolute;
-  //         cursor: pointer;
-  //         z-index: 2;
-  //       }
-
-  //       .top {
-  //         top: -2px;
-  //         left: 50%;
-  //         transform: translateX(-50%);
-  //         border-top: 10px solid transparent;
-  //         border-right: 10px solid transparent;
-  //         border-left: 10px solid transparent;
-  //         border-bottom: 10px solid #fff;
-
-  //         &:hover {
-  //           &~.blue-bgc {
-  //             border-top: 50px solid #409eff;
-  //           }
-  //         }
-  //       }
-
-  //       .left {
-  //         top: 50%;
-  //         left: -2px;
-  //         transform: translateY(-50%);
-  //         border-top: 10px solid transparent;
-  //         border-right: 10px solid #fff;
-  //         border-left: 10px solid transparent;
-  //         border-bottom: 10px solid transparent;
-
-  //         &:hover {
-  //           &~.blue-bgc {
-  //             border-left: 50px solid #409eff;
-  //           }
-  //         }
-  //       }
-
-  //       .bottom {
-  //         bottom: -2px;
-  //         left: 50%;
-  //         transform: translateX(-50%);
-  //         border-top: 10px solid #fff;
-  //         border-right: 10px solid transparent;
-  //         border-left: 10px solid transparent;
-  //         border-bottom: 10px solid transparent;
-
-  //         &:hover {
-  //           &~.blue-bgc {
-  //             border-bottom: 50px solid #409eff;
-  //           }
-  //         }
-  //       }
-
-  //       .right {
-  //         top: 50%;
-  //         right: -2px;
-  //         transform: translateY(-50%);
-  //         border-top: 10px solid transparent;
-  //         border-right: 10px solid transparent;
-  //         border-left: 10px solid #fff;
-  //         border-bottom: 10px solid transparent;
-
-  //         &:hover {
-  //           &~.blue-bgc {
-  //             border-right: 50px solid #409eff;
-  //           }
-  //         }
-  //       }
-
-  //       .reset-center {
-  //         position: absolute;
-  //         width: 40%;
-  //         height: 40%;
-  //         left: 50%;
-  //         top: 50%;
-  //         transform: translate(-50%, -50%);
-  //         border-radius: 50%;
-  //         background-color: rgb(63, 66, 68);
-  //         z-index: 2;
-  //         cursor: pointer;
-  //         display: flex;
-  //         justify-content: center;
-  //         align-items: center;
-
-  //         i {
-  //           color: #fff;
-  //           font-size: 20px;
-  //           font-weight: bolder;
-  //         }
-
-  //         &:hover {
-  //           background-color: #409eff;
-  //         }
-  //       }
-
-  //       .blue-bgc {
-  //         width: 100px;
-  //         height: 100px;
-  //         position: absolute;
-  //         top: 0;
-  //         left: 0;
-  //         z-index: 1;
-  //         border-top: 50px solid transparent;
-  //         border-right: 50px solid transparent;
-  //         border-left: 50px solid transparent;
-  //         border-bottom: 50px solid transparent;
-  //       }
-  //     }
-
-  //     .payload-info {
-  //       font-size: 14px;
-  //     }
-
-  //     .btn-group {
-  //       width: auto;
-  //       display: flex;
-  //       flex-wrap: wrap;
-  //       width: 200px;
-
-  //       // flex-direction: column;
-  //       // justify-content: center;
-  //       .btn-item {
-  //         width: 100px;
-  //         display: flex;
-  //         box-sizing: border-box;
-  //         cursor: pointer;
-
-  //         img {
-  //           width: 30px;
-  //           height: 30px;
-  //           margin-right: 3px;
-  //         }
-
-  //         div {
-  //           height: 100%;
-  //           font-size: 17px;
-  //           line-height: 30px;
-  //           font-style: normal;
-  //         }
-  //       }
-  //     }
-  //   }
-
-  //   .right-box {
-  //     position: relative;
-  //     flex-shrink: 0;
-  //     display: flex;
-
-  //     // justify-content: center;
-  //     .btn-group {
-  //       width: auto;
-  //       display: flex;
-  //       flex-wrap: wrap;
-  //       width: 290px;
-  //       justify-content: center;
-
-  //       .btn-item {
-  //         width: 140px;
-  //         display: flex;
-  //         box-sizing: border-box;
-  //         cursor: pointer;
-
-  //         img {
-  //           width: 30px;
-  //           height: 30px;
-  //           margin-right: 3px;
-  //         }
-
-  //         div {
-  //           width: 100px;
-  //           height: 100%;
-  //           font-size: 17px;
-  //           line-height: 30px;
-  //           font-style: normal;
-  //         }
-  //       }
-  //     }
-
-  //     .payload-info {
-  //       font-size: 14px;
-
-  //       .info-item {
-  //         display: flex;
-  //         align-items: center;
-  //         gap: 10px;
-  //         height: 25px;
-
-  //         div:first-child {
-  //           width: 170px;
-  //         }
-
-  //         div:nth-child(2) {
-  //           :deep() {
-  //             .el-input-number {
-  //               width: 70px;
-  //               height: 20px;
-
-  //               &__decrease,
-  //               &__increase {
-  //                 width: 18px;
-  //                 height: 18px;
-  //                 line-height: 18px;
-  //                 background-color: transparent;
-  //                 border-right: 0;
-  //                 border-left: 0;
-
-  //                 i {
-  //                   color: #fff;
-  //                   font-size: 17px;
-  //                   font-weight: bold;
-  //                 }
-  //               }
-
-  //               .el-input {
-  //                 margin: 0;
-  //                 padding: 0;
-  //                 height: 18px;
-  //                 display: flex;
-  //                 justify-content: center;
-
-  //                 &__inner {
-  //                   padding: 0;
-  //                 }
-
-  //                 input {
-  //                   width: 80px;
-  //                   height: 18px;
-  //                   overflow: hidden;
-  //                   font-size: 14px;
-  //                   font-weight: bold;
-  //                 }
-  //               }
-  //             }
-  //           }
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/hooks/droneFly.ts b/src/views/hooks/droneFly.ts
index 4990445..3cfebf3 100644
--- a/src/views/hooks/droneFly.ts
+++ b/src/views/hooks/droneFly.ts
@@ -80,11 +80,11 @@
             ssLinePath
           )
           let domain = sessionStorage.getItem('domain')
-          if (domain !== '0') {
-            addFlyLaser(
-              deviceInfo.payloads[0]
-            )
-          }
+          // if (domain !== '0') {
+          //   addFlyLaser(
+          //     deviceInfo.payloads[0]
+          //   )
+          // }
           setelCamera(
             viewDroneInfo.longitude,
             viewDroneInfo.latitude,
@@ -109,7 +109,6 @@
         }
       } else {
         if (deviceInfo.mode_code && [3, 4, 5, 9, 10, 17].includes(deviceInfo.mode_code)) {
-          // 暂时把视锥代码注释掉
           initCreateFrustum(deviceInfo, viewDroneInfo)
           addFlyGltf(
             viewDroneInfo.longitude,
@@ -122,11 +121,11 @@
             ssLinePath
           )
           let domain = sessionStorage.getItem('domain')
-          if (domain !== '0') {
-            addFlyLaser(
-              deviceInfo.payloads[0]
-            )
-          }
+          // if (domain !== '0') {
+          //   addFlyLaser(
+          //     deviceInfo.payloads[0]
+          //   )
+          // }
         }
       }
       const imgRightBlue = new URL('@/assets/images/arrow-right-pink.png', import.meta.url).href
@@ -149,7 +148,7 @@
         })
       }
       
-      if (data.deviceInfo[data.currentSn].mode_code && [3, 4, 5, 9, 10, 17].includes(deviceInfo.mode_code)) {
+      if (data.deviceInfo[data.currentSn].mode_code && [3, 4, 5, 9, 10].includes(deviceInfo.mode_code)) {
         if (switchSaving) return (switchSaving = false)
         const newPositions = globalCesium.Cartesian3.fromDegrees(
           data.deviceInfo[data.currentSn].longitude,
diff --git a/tsconfig.json b/tsconfig.json
index aea4801..8a1e4db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,7 @@
       "dom",
     ],
     "paths": {
-      "/@/*": [
+      "@/*": [
         "src/*"
       ],
     }
diff --git a/vite.config.ts b/vite.config.ts
index 455268f..8d9d12b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,8 +20,8 @@
   },
   server: {
     open: true,
-    // host: '192.168.1.79',
-    // port: 5173,
+    host: '192.168.1.178',
+    port: 5173,
     proxy: {
       '/index/api': {
         target: 'https://wrj.shuixiongit.com/index/api',

--
Gitblit v1.9.3