无人机控制展示功能样式修改

husq

2023-10-16 4c7c5b721be0c61b7de5d19f0b0007b5aeb825c5

无人机控制展示功能样式修改

 src/components/GMap.vue

@@ -449,9 +449,6 @@
              }}</a-col>
            <a-col span="15">
              <div style="width:100%;padding:0 5px;background-color: #5d5f61;color: #fff;font-size: 10px;">{{deviceInfo.device?.mode_code == 14 || !deviceInfo.device ? 'N/A' : '当前正常'}}</div>
              <!-- <a-select :showArrow="false" v-model:value="aircraSelected" :bordered="false" :options="aircraftList"
                :placeholder="aircraftList.length == 0 ? 'N/A' : '请选择'" :disabled="aircraftList.length == 0 ? true : false"
                size="small" style="width:100%;background-color: #5d5f61;color: #fff;" @change="selectChange"></a-select> -->
            </a-col>
          </a-row>
          <a-row align="middle" justify="center">
@@ -478,7 +475,10 @@
            <a-col span="24">
              <a-button :class="[openDroneControl ? 'active-color' : 'unactive-color']" class="width-100" type="primary"
                size="small" @click="openDeviceSetting">
                飞行控制
                飞行控制(<DesktopOutlined v-if="controlStatus === 'A'" /> <RobotFilled v-else />{{  controlStatus === 'A' ? 'A控' : 'B控'}}
                <!-- <template #icon> -->
                  )
                <!-- </template> -->
              </a-button>
            </a-col>
          </a-row>
@@ -737,7 +737,8 @@
import {
  BorderOutlined, LineOutlined, CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
  ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
  FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined
  FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined,
  DesktopOutlined
} from '@ant-design/icons-vue'
import { EDeviceTypeName } from '../types'
import DockControlPanel from './g-map/DockControlPanel.vue'
@@ -767,7 +768,8 @@
    DockControlPanel,
    DroneControlPanel,
    CarryOutOutlined,
    RocketOutlined
    RocketOutlined,
    DesktopOutlined
  },
  name: 'GMap',
  props: {},
@@ -1029,13 +1031,6 @@
          airPortUrl.value = res.data.url
        })
    }
    // 下拉框选择变化
    const selectChange = async (e) => {
      // await closeFly()
      // setTimeout(async () => {
      await flyOnStart()
      // }, 500)
    }
    // 关闭设备直播
    const onClose = async () => {
      const videoId = droneList.value[droneIndex.value].value + '/' + cameraList.value[cameraIndex.value].value + '/' + videoList.value[videoIndex.value].value
@@ -1099,6 +1094,8 @@
      airPortOption.value = false
      openDroneControl.value = !openDroneControl.value
    }
    // 飞行控制状态
    const controlStatus = computed(() => store.state.common.droneControlSource)
    watch(() => store.state.deviceStatusEvent,
      data => {
        if (Object.keys(data.deviceOnline).length !== 0) {
@@ -1420,7 +1417,6 @@
      aircraftUrl,
      aircraftList,
      aircraSelected,
      selectChange,
      closeOperate,
      closeOsdWindow,
      openDroneControl,
@@ -1429,7 +1425,8 @@
      airTimeout,
      flyTimeout,
      aircrafIndex,
      airPortOption
      airPortOption,
      controlStatus
    }
  }
})
@@ -1473,6 +1470,9 @@
      display: none;
    }
  }
  &:deep(.ant-btn > .anticon + span, .ant-btn > span + .anticon, .ant-btn > .anticon + span, .ant-btn > span + .anticon) {
    margin-left: 5px !important;
  }
}

.osd-panel {

 src/components/g-map/use-drone-control-ws-event.ts

@@ -1,8 +1,8 @@
import {message, notification} from 'ant-design-vue'
import {onBeforeUnmount, onMounted, ref} from 'vue'
import { message, notification } from 'ant-design-vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import EventBus from '/@/event-bus/'
import {EBizCode, EBizCodeMessage} from '/@/types'
import {ControlSource} from '/@/types/device'
import { EBizCode, EBizCodeMessage } from '/@/types'
import { ControlSource } from '/@/types/device'
import {
  ControlSourceChangeInfo,
  ControlSourceChangeType,
@@ -11,9 +11,10 @@
  FlyToPointMessage,
  TakeoffToPointMessage
} from '/@/types/drone-control'

import { useMyStore } from '/@/store'
export interface UseDroneControlWsEventParams {
}
const store = useMyStore()

export function useDroneControlWsEvent (sn: string, payloadSn: string, funcs?: UseDroneControlWsEventParams) {
  const droneControlSource = ref(ControlSource.A)
@@ -21,7 +22,8 @@
  function onControlSourceChange (data: ControlSourceChangeInfo) {
    if (data.type === ControlSourceChangeType.Flight && data.sn === sn) {
      droneControlSource.value = data.control_source
      message.info(`飞行控制改为 ${droneControlSource.value}`)
      store.commit('SET_DRONE_CONTROL_SOURCE', droneControlSource.value)
      // message.info(`飞行控制改为 ${droneControlSource.value}`)
      return
    }
    if (data.type === ControlSourceChangeType.Payload && data.sn === payloadSn) {
@@ -88,6 +90,7 @@
  }

  onMounted(() => {
    console.log('弹窗初始化触发？')
    EventBus.on('droneControlWs', handleDroneControlWsEvent)
  })


 src/store/common.ts

@@ -1,4 +1,5 @@
import { MutationTree } from 'vuex'
import { ControlSource } from '/@/types/device'

const state = () => ({
  projectId: null as string | null,
@@ -10,6 +11,7 @@
    mode: 0, // 0为标准地图, 1为卫星地图
    roadLine: true,
  },
  droneControlSource: ControlSource.A
})
export type RootStateType = ReturnType<typeof state>
const mutations: MutationTree<RootStateType> = {
@@ -34,6 +36,10 @@
  // 设置地图路网
  SET_MAP_SETTING_ROAD_LINE (state, roadLine: boolean) {
    state.mapSetting.roadLine = roadLine
  },
  // 设置飞行控制
  SET_DRONE_CONTROL_SOURCE (state, droneControlSource: ControlSource) {
    state.droneControlSource = droneControlSource
  }
}
export default {