|
|
|
|
@ -1,67 +1,69 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="remote">
|
|
|
|
|
<VueDragResize :w="width" :h="height" :x="left" :y="top" :isActive="true" :isResizable="false">
|
|
|
|
|
<div class="remote-debugging" v-if="airportVal" v-drag>
|
|
|
|
|
<div class="title">
|
|
|
|
|
<span> 云台相机控制 </span>
|
|
|
|
|
<div @click="emits('changeLoadControl')">
|
|
|
|
|
<CloseOutlined />
|
|
|
|
|
</div>
|
|
|
|
|
<VueDragResize
|
|
|
|
|
:w="width"
|
|
|
|
|
:h="height"
|
|
|
|
|
:x="left"
|
|
|
|
|
:y="top"
|
|
|
|
|
:isActive="true"
|
|
|
|
|
:parentLimitation="true"
|
|
|
|
|
:isResizable="false"
|
|
|
|
|
>
|
|
|
|
|
<div class="remote-debugging" v-if="airportVal" v-drag>
|
|
|
|
|
<div class="title">
|
|
|
|
|
<span> 云台相机控制 </span>
|
|
|
|
|
<div @click="emits('changeLoadControl')">
|
|
|
|
|
<CloseOutlined />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<!-- <div class="content-item">
|
|
|
|
|
<span>相机控制权</span>
|
|
|
|
|
<a-button @click="obtain">获取</a-button>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- <div class="content-item">
|
|
|
|
|
<span>切换相机模式</span>
|
|
|
|
|
<a-button>抢夺负载控制</a-button>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- <div class="content-item">
|
|
|
|
|
<span>拍照</span>
|
|
|
|
|
<a-button @click="singleShot">单拍</a-button>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="content-button">
|
|
|
|
|
<a-button @click="obtain">获取相机控制权</a-button>
|
|
|
|
|
<a-button @click="singleShot">单拍</a-button>
|
|
|
|
|
<a-button @click="enterDRC" style="background-color: #24d365; border: none"
|
|
|
|
|
>进入飞行控制</a-button
|
|
|
|
|
>
|
|
|
|
|
<a-button @click="exitDRC" style="background-color: #e3150e; border: none"
|
|
|
|
|
>退出飞行控制</a-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="direction-controller">
|
|
|
|
|
<img src="@/assets/images/flightoperation/direction_controller.png" alt="" />
|
|
|
|
|
<div
|
|
|
|
|
class="direction-controller-top"
|
|
|
|
|
title="前进"
|
|
|
|
|
@click="changeDrc('pitch', 'top')"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="direction-controller-right"
|
|
|
|
|
title="右移"
|
|
|
|
|
@click="changeDrc('roll', 'right')"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="direction-controller-bottom"
|
|
|
|
|
title="后退"
|
|
|
|
|
@click="changeDrc('pitch', 'bottom')"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="direction-controller-left"
|
|
|
|
|
title="左移"
|
|
|
|
|
@click="changeDrc('roll', 'left')"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="content-button">
|
|
|
|
|
<a-button @click="obtain">获取相机控制权</a-button>
|
|
|
|
|
<a-button @click="singleShot">单拍</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="direction-controller">
|
|
|
|
|
<img src="@/assets/images/flightoperation/direction_controller.png" alt="" />
|
|
|
|
|
<div
|
|
|
|
|
class="direction-controller-top"
|
|
|
|
|
title="俯视"
|
|
|
|
|
@click="changeDrc('pitch_speed', 'up')"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="direction-controller-right"
|
|
|
|
|
title="右移"
|
|
|
|
|
@click="changeDrc('yaw_speed', 'up')"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="direction-controller-bottom"
|
|
|
|
|
title="仰视"
|
|
|
|
|
@click="changeDrc('pitch_speed', 'down')"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="direction-controller-left"
|
|
|
|
|
title="左移"
|
|
|
|
|
@click="changeDrc('yaw_speed', 'down')"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="zoom">
|
|
|
|
|
<a-slider
|
|
|
|
|
v-model:value="zoomVale"
|
|
|
|
|
:tooltip-visible="true"
|
|
|
|
|
:max="maxval"
|
|
|
|
|
:min="2"
|
|
|
|
|
@change="cameraZoom"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</VueDragResize>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</VueDragResize>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { onMounted, ref, watch, reactive, onUnmounted } from 'vue';
|
|
|
|
|
import { getClient, createSeizeConnection, destroySeizeConnection } from '@/utils/mqtt';
|
|
|
|
|
import {
|
|
|
|
|
getClient,
|
|
|
|
|
createSeizeConnection,
|
|
|
|
|
destroySeizeConnection,
|
|
|
|
|
connection,
|
|
|
|
|
} from '@/utils/mqtt';
|
|
|
|
|
import { CloseOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
import { vDrag } from '@/utils/drag';
|
|
|
|
|
import { buildGUID } from '@/utils/uuid';
|
|
|
|
|
@ -89,6 +91,7 @@
|
|
|
|
|
const top = ref(100);
|
|
|
|
|
const airPortStoreVal = airPortStore();
|
|
|
|
|
const airPort = airPortStoreVal.getAirport;
|
|
|
|
|
const uav = airPortStoreVal.getUAV;
|
|
|
|
|
|
|
|
|
|
const userStore = useUserStore();
|
|
|
|
|
const userInfo = userStore.getUserInfo;
|
|
|
|
|
@ -97,12 +100,11 @@
|
|
|
|
|
const emits = defineEmits(['changeLoadControl']);
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
msgData: Object,
|
|
|
|
|
cameraType: String,
|
|
|
|
|
});
|
|
|
|
|
const monitorDRC = ref(false);
|
|
|
|
|
// 是否飞行控制权抢夺
|
|
|
|
|
const flightGrab = ref(false);
|
|
|
|
|
// 是否进入飞行指令控制模式
|
|
|
|
|
const modeEnter = ref(false);
|
|
|
|
|
const airportVal: any = ref({
|
|
|
|
|
mode_code: 0,
|
|
|
|
|
wind_speed: 0,
|
|
|
|
|
@ -117,14 +119,45 @@
|
|
|
|
|
capacity_percent: 0,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
const zoomVale = ref(2);
|
|
|
|
|
const maxval = ref(200);
|
|
|
|
|
watch(
|
|
|
|
|
() => props.msgData,
|
|
|
|
|
() => props.cameraType,
|
|
|
|
|
(val) => {
|
|
|
|
|
if (val.topic == 'thing/product/' + airPort.sn + '/events_reply') {
|
|
|
|
|
console.log(val);
|
|
|
|
|
console.log('props.cameraType', val);
|
|
|
|
|
if (val == 'ir') {
|
|
|
|
|
maxval.value = 20;
|
|
|
|
|
} else {
|
|
|
|
|
maxval.value = 200;
|
|
|
|
|
}
|
|
|
|
|
cameraZoom();
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// 变焦
|
|
|
|
|
const cameraZoom = () => {
|
|
|
|
|
if (!flightGrab.value) {
|
|
|
|
|
createMessage.warning('请先获取相机控制权');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (props.cameraType == 'wide') {
|
|
|
|
|
createMessage.warning('广角相机不支持变焦，请先调整相机模式');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const querys = {
|
|
|
|
|
bid: buildGUID(),
|
|
|
|
|
method: 'camera_focal_length_set',
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
data: {
|
|
|
|
|
payload_index: uav.camera_index,
|
|
|
|
|
camera_type: props.cameraType,
|
|
|
|
|
zoom_factor: zoomVale.value,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
console.log('querys', querys);
|
|
|
|
|
servicesTopicReize(querys);
|
|
|
|
|
};
|
|
|
|
|
//修改redis用户锁
|
|
|
|
|
const changeRedisUser = (val: boolean) => {
|
|
|
|
|
const querys = redisUser.value;
|
|
|
|
|
@ -170,7 +203,7 @@
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
data: {
|
|
|
|
|
payload_index: '99-0-0',
|
|
|
|
|
payload_index: uav.camera_index,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
services_replyTopic();
|
|
|
|
|
@ -189,98 +222,37 @@
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
data: {
|
|
|
|
|
payload_index: '99-0-0',
|
|
|
|
|
payload_index: uav.camera_index,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
services_replyTopicReize();
|
|
|
|
|
};
|
|
|
|
|
const drcSeq = ref(1);
|
|
|
|
|
const enterDRC = () => {
|
|
|
|
|
if (!flightGrab.value) {
|
|
|
|
|
createMessage.warning('请先获取相机控制权');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
createSeizeConnection();
|
|
|
|
|
// 进入指令飞行控制模式
|
|
|
|
|
const querys = {
|
|
|
|
|
bid: buildGUID(),
|
|
|
|
|
data: {
|
|
|
|
|
hsi_frequency: 10,
|
|
|
|
|
mqtt_broker: {
|
|
|
|
|
address: 'http://175.27.168.120:6010',
|
|
|
|
|
client_id: 'mqtt_client_1581F8HGX254V00A0BUY',
|
|
|
|
|
enable_tls: false,
|
|
|
|
|
expire_time: 3600,
|
|
|
|
|
password: '',
|
|
|
|
|
username: 'sdhc',
|
|
|
|
|
},
|
|
|
|
|
osd_frequency: 5,
|
|
|
|
|
},
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
method: 'drc_mode_enter',
|
|
|
|
|
};
|
|
|
|
|
console.log(querys);
|
|
|
|
|
servicesTopic(querys);
|
|
|
|
|
drc_eart_beat();
|
|
|
|
|
};
|
|
|
|
|
let timer;
|
|
|
|
|
const drc_eart_beat = () => {
|
|
|
|
|
monitorDRC.value = true;
|
|
|
|
|
// 每隔五秒发送drc心跳包
|
|
|
|
|
drcSeq.value = drcSeq.value + 1;
|
|
|
|
|
timer = window.setInterval(() => {
|
|
|
|
|
const drcQuerys = {
|
|
|
|
|
bid: buildGUID(),
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
method: 'heart_beat',
|
|
|
|
|
data: {
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
},
|
|
|
|
|
seq: drcSeq.value,
|
|
|
|
|
};
|
|
|
|
|
drcDownTopicReize(drcQuerys);
|
|
|
|
|
}, 5000);
|
|
|
|
|
// 订阅drc链路状态通知
|
|
|
|
|
eventsTopicSubscribeReize();
|
|
|
|
|
};
|
|
|
|
|
const exitDRC = () => {
|
|
|
|
|
const querys = {
|
|
|
|
|
bid: buildGUID(),
|
|
|
|
|
data: {},
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
method: 'drc_mode_exit',
|
|
|
|
|
};
|
|
|
|
|
servicesTopic(querys);
|
|
|
|
|
};
|
|
|
|
|
const seq = ref(1);
|
|
|
|
|
// 控制方向
|
|
|
|
|
const changeDrc = (type, val) => {
|
|
|
|
|
if (!modeEnter.value) {
|
|
|
|
|
createMessage.warning('请先进入指令飞行控制');
|
|
|
|
|
if (!flightGrab.value) {
|
|
|
|
|
createMessage.warning('请先获取相机控制权');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
seq.value = seq.value + 1;
|
|
|
|
|
let data = {
|
|
|
|
|
roll: 1024,
|
|
|
|
|
pitch: 1024,
|
|
|
|
|
throttle: 1024,
|
|
|
|
|
yaw: 1024,
|
|
|
|
|
gimbal_pitch: 1024,
|
|
|
|
|
payload_index: uav.camera_index,
|
|
|
|
|
locked: true,
|
|
|
|
|
pitch_speed: 8,
|
|
|
|
|
yaw_speed: 8,
|
|
|
|
|
};
|
|
|
|
|
if (val == 'up') {
|
|
|
|
|
data[type] = 1684;
|
|
|
|
|
data[type] = 8;
|
|
|
|
|
} else {
|
|
|
|
|
data[type] = 364;
|
|
|
|
|
data[type] = -8;
|
|
|
|
|
}
|
|
|
|
|
const querys = {
|
|
|
|
|
seq: seq.value,
|
|
|
|
|
method: 'stick_control',
|
|
|
|
|
// 画面拖动控制
|
|
|
|
|
servicesTopicReize({
|
|
|
|
|
bid: buildGUID(),
|
|
|
|
|
method: 'camera_screen_drag',
|
|
|
|
|
tid: buildGUID(),
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
data: data,
|
|
|
|
|
};
|
|
|
|
|
drcDownTopicReize(querys);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// 获取mqtt客户端信息
|
|
|
|
|
@ -294,39 +266,21 @@
|
|
|
|
|
// // 接收消息
|
|
|
|
|
getClient().on('message', (topic, message) => {
|
|
|
|
|
const rs = JSON.parse(message);
|
|
|
|
|
if (rs.method == 'flight_authority_grab') {
|
|
|
|
|
if (rs.method == 'camera_photo_take') {
|
|
|
|
|
if (rs.data.result == 0) {
|
|
|
|
|
flightGrab.value = true;
|
|
|
|
|
createMessage.success('飞行控制权抢夺成功');
|
|
|
|
|
createMessage.success('拍照成功');
|
|
|
|
|
} else {
|
|
|
|
|
flightGrab.value = false;
|
|
|
|
|
createMessage.error('飞行控制权抢夺失败，状态码' + rs.data.result);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (rs.method == 'drc_mode_enter') {
|
|
|
|
|
if (rs.data.result == 0) {
|
|
|
|
|
modeEnter.value = true;
|
|
|
|
|
createMessage.success('进入指令飞行控制模式成功');
|
|
|
|
|
} else {
|
|
|
|
|
modeEnter.value = false;
|
|
|
|
|
createMessage.error('进入指令飞行控制模式失败，状态码' + rs.data.result);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (rs.method == 'drc_mode_exit') {
|
|
|
|
|
if (rs.data.result == 0) {
|
|
|
|
|
modeEnter.value = false;
|
|
|
|
|
createMessage.success('退出指令飞行控制模式成功');
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error('退出指令飞行控制模式失败，状态码' + rs.data.result);
|
|
|
|
|
createMessage.error('拍照失败，状态码' + rs.data.result);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (rs.method === 'drc_status_notify' && monitorDRC.value) {
|
|
|
|
|
if (rs.method == 'flight_authority_grab') {
|
|
|
|
|
if (rs.data.result == 0) {
|
|
|
|
|
if (rs.data.drc_state == 0) {
|
|
|
|
|
drc_eart_beat();
|
|
|
|
|
}
|
|
|
|
|
flightGrab.value = true;
|
|
|
|
|
createMessage.success('相机控制权获取成功');
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error('DRC连接失败，状态码' + rs.data.result);
|
|
|
|
|
flightGrab.value = false;
|
|
|
|
|
createMessage.error('相机控制权获取失败，状态码' + rs.data.result);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
@ -339,10 +293,6 @@
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
#remote {
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 440px;
|
|
|
|
|
}
|
|
|
|
|
.remote-debugging {
|
|
|
|
|
width: 96%;
|
|
|
|
|
height: 98%;
|
|
|
|
|
@ -422,7 +372,7 @@
|
|
|
|
|
height: 50px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 70px;
|
|
|
|
|
right: 80px;
|
|
|
|
|
right: 100px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.direction-controller-bottom {
|
|
|
|
|
@ -430,7 +380,7 @@
|
|
|
|
|
height: 50px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
right: 130px;
|
|
|
|
|
right: 160px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.direction-controller-left {
|
|
|
|
|
@ -442,5 +392,11 @@
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.zoom {
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
::v-deep .ant-slider-rail {
|
|
|
|
|
background: #435382;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
