无人机管理后台前端(已迁走)
shuishen
2025-04-15 df42fa7e97c4a93caa17b2aed5aecdc768d8bbd7
src/views/device/components/DockControlPanel.vue
@@ -9,13 +9,14 @@
      <div class="control-cmd-header">
        远程调试
        <el-switch
          v-model:checked="debugStatus"
          v-model="debugStatus"
          @change="onDeviceStatusChange"
          active-text="开"
          inactive-text="关"
          class="debug-btn"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
        <el-divider />
      </div>
      <div class="control-cmd-box">
        <div v-for="(cmdItem, index) in cmdList" :key="cmdItem.cmdKey" class="control-cmd-item">
@@ -45,19 +46,18 @@
import { EBizCode, ELocalStorageKey, ERouterName } from '@/types';
import { useConnectWebSocket } from '@/hooks/use-connect-websocket';
import { getWebsocketUrl } from '@/websocket/util/config';
import { defineProps, ref, watch } from 'vue';
import { cmdList as baseCmdList } from '@/types/device-cmd';
import { useDockControl } from './use-dock-control';
import { EDockModeCode } from '@/types/device';
import { updateDeviceCmdInfoByOsd, updateDeviceCmdInfoByExecuteInfo } from '@/utils/device-cmd';
import Store from '@/store';
const props = defineProps(['sn', 'deviceInfo']);
const initCmdList = baseCmdList.map(cmdItem => Object.assign({}, cmdItem));
const cmdList = ref(initCmdList);
// dock 控制指令
const debugStatus = ref(props.deviceInfo.mode_code == EDockModeCode.Remote_Debugging);
// 根据机场指令执行状态更新信息
watch(
  () => Store.getters.devicesCmdExecuteInfo,
@@ -74,10 +74,16 @@
// 根据设备osd信息更新信息
watch(
  () => props.deviceInfo,
  () => Store.getters.deviceState,
  value => {
    updateDeviceCmdInfoByOsd(cmdList.value, value);
    // console.log('deviceInfo', value)
    if (props.sn && (value.currentSn===props.deviceInfo.child_sn || value.currentSn===props.deviceInfo.device_sn)) {
      debugStatus.value = value.dockInfo[props.deviceInfo.device_sn]?.basic_osd?.mode_code === EDockModeCode.Remote_Debugging
      const devices = {}
      devices['device'] = value.deviceInfo[props.deviceInfo.child_sn]
      devices['dock'] = value.dockInfo[props.deviceInfo.device_sn]
      devices['gateway'] = value.gatewayInfo
      updateDeviceCmdInfoByOsd(cmdList.value, devices);
    }
  },
  {
    immediate: true,
@@ -85,11 +91,7 @@
  }
);
// dock 控制指令
const debugStatus = ref(
  props.deviceInfo.dock?.basic_osd.mode_code === EDockModeCode.Remote_Debugging
);
// 远程控制开关
async function onDeviceStatusChange(status) {
  let result = false;
  if (status) {
@@ -97,7 +99,6 @@
  } else {
    result = await dockDebugOnOff(props.sn, false);
  }
  console.log(result, '---1------');
  if (!result) {
@@ -119,29 +120,28 @@
  };
  const success = await sendDockControlCmd(params, true);
  if (success) {
    // updateDeviceSingleCmdInfo(cmdList.value[index])
    updateDeviceSingleCmdInfo(cmdList.value[index]);
  }
}
// webSocket 监听
const messageHandler = async payload => {
  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);
      break;
    }
    // 机场
    case EBizCode.DockOsd: {
      // if (payload.data.sn === workspace_id.value) {
      Store.commit('SET_DOCK_INFO', payload.data);
      // console.log(payload.data, 'data')
      // }
      break;
    }
    case EBizCode.MapElementCreate: {
@@ -227,7 +227,7 @@
      .debug-btn {
        margin-left: 10px;
        border: 1px solid #585858;
        // border: 1px solid #585858;
      }
    }
@@ -235,16 +235,17 @@
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 4px 10px;
      padding: 4px 15px;
      .control-cmd-item {
        width: 220px;
        width: 320px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #666;
        margin: 4px 0;
        margin: 8px 0;
        padding: 0 8px;
        border-radius: 2px;
        .control-cmd-item-left {
          display: flex;