<template>
|
<div class="dock-control-panel">
|
<!-- title -->
|
|
<!-- setting -->
|
<!-- <DeviceSettingBox :sn="props.sn" :deviceInfo="props.deviceInfo"></DeviceSettingBox> -->
|
<!-- cmd -->
|
<div class="control-cmd-wrapper">
|
<div class="control-cmd-header">
|
远程调试
|
<el-switch
|
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">
|
<div class="control-cmd-item-left">
|
<div class="item-label">{{ cmdItem.label }}</div>
|
<div class="item-status">{{ cmdItem.status }}</div>
|
</div>
|
<div class="control-cmd-item-right">
|
<el-button
|
:disabled="!debugStatus || cmdItem.disabled"
|
:loading="cmdItem.loading"
|
size="small"
|
type="primary"
|
@click="sendControlCmd(cmdItem, index)"
|
>
|
{{ cmdItem.operateText }}
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import EventBus from '@/event-bus';
|
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,
|
devicesCmdExecuteInfo => {
|
if (props.sn && devicesCmdExecuteInfo[props.sn]) {
|
updateDeviceCmdInfoByExecuteInfo(cmdList.value, devicesCmdExecuteInfo[props.sn]);
|
}
|
},
|
{
|
immediate: true,
|
deep: true,
|
}
|
);
|
|
// 根据设备osd信息更新信息
|
watch(
|
() => Store.getters.deviceState,
|
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,
|
deep: true,
|
}
|
);
|
|
// 远程控制开关
|
async function onDeviceStatusChange(status) {
|
let result = false;
|
if (status) {
|
result = await dockDebugOnOff(props.sn, true);
|
} else {
|
result = await dockDebugOnOff(props.sn, false);
|
}
|
console.log(result, '---1------');
|
|
if (!result) {
|
if (status) {
|
debugStatus.value = false;
|
} else {
|
debugStatus.value = true;
|
}
|
}
|
}
|
|
const { sendDockControlCmd, dockDebugOnOff } = useDockControl();
|
|
async function sendControlCmd(cmdItem, index) {
|
const params = {
|
sn: props.sn,
|
cmd: cmdItem.cmdKey,
|
action: cmdItem.action,
|
};
|
const success = await sendDockControlCmd(params, true);
|
if (success) {
|
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: {
|
Store.commit('SET_DOCK_INFO', payload.data);
|
break;
|
}
|
case EBizCode.MapElementCreate: {
|
Store.commit('SET_MAP_ELEMENT_CREATE', payload.data);
|
break;
|
}
|
case EBizCode.MapElementUpdate: {
|
Store.commit('SET_MAP_ELEMENT_UPDATE', payload.data);
|
break;
|
}
|
case EBizCode.MapElementDelete: {
|
Store.commit('SET_MAP_ELEMENT_DELETE', payload.data);
|
break;
|
}
|
case EBizCode.DeviceOnline: {
|
Store.commit('SET_DEVICE_ONLINE', payload.data);
|
break;
|
}
|
case EBizCode.DeviceOffline: {
|
Store.commit('SET_DEVICE_OFFLINE', payload.data);
|
break;
|
}
|
case EBizCode.FlightTaskProgress:
|
case EBizCode.FlightTaskMediaProgress:
|
case EBizCode.FlightTaskMediaHighestPriority: {
|
EventBus.emit('flightTaskWs', payload);
|
break;
|
}
|
case EBizCode.DeviceHms: {
|
Store.commit('SET_DEVICE_HMS_INFO', payload.data);
|
break;
|
}
|
case EBizCode.DeviceReboot:
|
case EBizCode.DroneOpen:
|
case EBizCode.DroneClose:
|
case EBizCode.CoverOpen:
|
case EBizCode.CoverClose:
|
case EBizCode.PutterOpen:
|
case EBizCode.PutterClose:
|
case EBizCode.ChargeOpen:
|
case EBizCode.ChargeClose:
|
case EBizCode.DeviceFormat:
|
case EBizCode.DroneFormat: {
|
Store.commit('SET_DEVICES_CMD_EXECUTE_INFO', {
|
biz_code: payload.biz_code,
|
timestamp: payload.timestamp,
|
...payload.data,
|
});
|
break;
|
}
|
case EBizCode.ControlSourceChange:
|
case EBizCode.FlyToPointProgress:
|
case EBizCode.TakeoffToPointProgress:
|
case EBizCode.JoystickInvalidNotify:
|
case EBizCode.DrcStatusNotify: {
|
EventBus.emit('droneControlWs', payload);
|
break;
|
}
|
default:
|
break;
|
}
|
};
|
|
const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + props.deviceInfo.workspace_id;
|
// 监听ws 消息
|
useConnectWebSocket(messageHandler, webSorketUrl);
|
</script>
|
|
<style lang="scss" scoped>
|
.dock-control-panel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
padding: 0 !important;
|
color: #000;
|
border-radius: 2px;
|
|
.control-cmd-wrapper {
|
.control-cmd-header {
|
font-size: 14px;
|
font-weight: 600;
|
padding: 10px 10px 0px;
|
|
.debug-btn {
|
margin-left: 10px;
|
// border: 1px solid #585858;
|
}
|
}
|
|
.control-cmd-box {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
padding: 4px 15px;
|
.control-cmd-item {
|
width: 320px;
|
height: 58px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border: 1px solid #666;
|
margin: 8px 0;
|
padding: 0 8px;
|
border-radius: 2px;
|
|
.control-cmd-item-left {
|
display: flex;
|
flex-direction: column;
|
|
.item-label {
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
