|
|
@ -24,27 +24,63 @@
|
|
|
|
<a-button @click="singleShot">单拍</a-button>
|
|
|
|
<a-button @click="singleShot">单拍</a-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="direction-controller">
|
|
|
|
<div class="direction-controller">
|
|
|
|
<img src="@/assets/images/flightoperation/direction_controller.png" alt="" />
|
|
|
|
<img
|
|
|
|
|
|
|
|
class="controller-bg"
|
|
|
|
|
|
|
|
src="@/assets/images/flightoperation/direction_controller.png"
|
|
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
|
|
/>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="direction-controller-top"
|
|
|
|
class="direction-controller-top"
|
|
|
|
title="俯视"
|
|
|
|
title="俯视"
|
|
|
|
@click="changeDrc('pitch_speed', 'up')"
|
|
|
|
@mousedown="changeDrc('pitch_speed', 'up', '俯视')"
|
|
|
|
></div>
|
|
|
|
@mouseup="changeDrc('pitch_speed', 'up', '')"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src="@/assets/images/flightoperation/p-top-active.png"
|
|
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
|
|
v-if="selectName == '俯视'"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<img src="@/assets/images/flightoperation/p-top.png" alt="" v-else />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="direction-controller-right"
|
|
|
|
class="direction-controller-right"
|
|
|
|
title="右移"
|
|
|
|
title="右移"
|
|
|
|
@click="changeDrc('yaw_speed', 'up')"
|
|
|
|
@mousedown="changeDrc('yaw_speed', 'up', '右移')"
|
|
|
|
></div>
|
|
|
|
@mouseup="changeDrc('yaw_speed', 'up', '')"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src="@/assets/images/flightoperation/p-right-active.png"
|
|
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
|
|
v-if="selectName == '右移'"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<img src="@/assets/images/flightoperation/p-right.png" alt="" v-else />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="direction-controller-bottom"
|
|
|
|
class="direction-controller-bottom"
|
|
|
|
title="仰视"
|
|
|
|
title="仰视"
|
|
|
|
@click="changeDrc('pitch_speed', 'down')"
|
|
|
|
@mousedown="changeDrc('pitch_speed', 'down', '仰视')"
|
|
|
|
></div>
|
|
|
|
@mouseup="changeDrc('pitch_speed', 'down', '')"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src="@/assets/images/flightoperation/p-bottom-active.png"
|
|
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
|
|
v-if="selectName == '仰视'"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<img src="@/assets/images/flightoperation/p-bottom.png" alt="" v-else />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="direction-controller-left"
|
|
|
|
class="direction-controller-left"
|
|
|
|
title="左移"
|
|
|
|
title="左移"
|
|
|
|
@click="changeDrc('yaw_speed', 'down')"
|
|
|
|
@mousedown="changeDrc('yaw_speed', 'down', '左移')"
|
|
|
|
></div>
|
|
|
|
@mouseup="changeDrc('yaw_speed', 'down', '')"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src="@/assets/images/flightoperation/p-left-active.png"
|
|
|
|
|
|
|
|
alt=""
|
|
|
|
|
|
|
|
v-if="selectName == '左移'"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<img src="@/assets/images/flightoperation/p-left.png" alt="" v-else />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="zoom">
|
|
|
|
<div class="zoom">
|
|
|
|
<a-slider
|
|
|
|
<a-slider
|
|
|
@ -96,6 +132,7 @@
|
|
|
|
const airPort = airPortStoreVal.getAirport;
|
|
|
|
const airPort = airPortStoreVal.getAirport;
|
|
|
|
const uav = airPortStoreVal.getUAV;
|
|
|
|
const uav = airPortStoreVal.getUAV;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const selectName = ref('');
|
|
|
|
const userStore = useUserStore();
|
|
|
|
const userStore = useUserStore();
|
|
|
|
const userInfo = userStore.getUserInfo;
|
|
|
|
const userInfo = userStore.getUserInfo;
|
|
|
|
const redisUser = ref({});
|
|
|
|
const redisUser = ref({});
|
|
|
@ -104,6 +141,7 @@
|
|
|
|
const props = defineProps({
|
|
|
|
const props = defineProps({
|
|
|
|
msgData: Object,
|
|
|
|
msgData: Object,
|
|
|
|
cameraType: String,
|
|
|
|
cameraType: String,
|
|
|
|
|
|
|
|
uavStatus: Number,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const monitorDRC = ref(false);
|
|
|
|
const monitorDRC = ref(false);
|
|
|
|
// 是否飞行控制权抢夺
|
|
|
|
// 是否飞行控制权抢夺
|
|
|
@ -135,13 +173,13 @@
|
|
|
|
style: {
|
|
|
|
style: {
|
|
|
|
color: '#f50',
|
|
|
|
color: '#f50',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
label: createVNode('strong', {}, '100'),
|
|
|
|
label: createVNode('strong', {}, '10'),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
20: {
|
|
|
|
20: {
|
|
|
|
style: {
|
|
|
|
style: {
|
|
|
|
color: '#f50',
|
|
|
|
color: '#f50',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
label: createVNode('strong', {}, '200'),
|
|
|
|
label: createVNode('strong', {}, '20'),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
watch(
|
|
|
|
watch(
|
|
|
@ -207,6 +245,10 @@
|
|
|
|
createMessage.warning('当前有用户正在操作,请稍后再试');
|
|
|
|
createMessage.warning('当前有用户正在操作,请稍后再试');
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!props.uavStatus) {
|
|
|
|
|
|
|
|
createMessage.warning('飞行器未开机');
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
if (grabBtn.value) {
|
|
|
|
if (grabBtn.value) {
|
|
|
|
createMessage.warning('已经获取了飞行器控制权');
|
|
|
|
createMessage.warning('已经获取了飞行器控制权');
|
|
|
|
return;
|
|
|
|
return;
|
|
|
@ -252,12 +294,50 @@
|
|
|
|
services_replyTopicReize();
|
|
|
|
services_replyTopicReize();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
let timer;
|
|
|
|
let timer;
|
|
|
|
|
|
|
|
const longPressTimer = ref();
|
|
|
|
|
|
|
|
const longPressInterval = ref();
|
|
|
|
|
|
|
|
const longPressDuration = ref(1000); // 长按时间阈值,单位为毫秒
|
|
|
|
// 控制方向
|
|
|
|
// 控制方向
|
|
|
|
const changeDrc = (type, val) => {
|
|
|
|
const changeDrc = (type, val, name) => {
|
|
|
|
if (!flightGrab.value) {
|
|
|
|
selectName.value = name;
|
|
|
|
createMessage.warning('请先获取相机控制权');
|
|
|
|
if (name !== '') {
|
|
|
|
return;
|
|
|
|
if (!flightGrab.value) {
|
|
|
|
|
|
|
|
createMessage.warning('请先获取相机控制权');
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
let isLongPress = false;
|
|
|
|
|
|
|
|
longPressTimer.value = setTimeout(() => {
|
|
|
|
|
|
|
|
console.log('长按事件触发!');
|
|
|
|
|
|
|
|
isLongPress = true;
|
|
|
|
|
|
|
|
longPressInterval.value = setInterval(() => {
|
|
|
|
|
|
|
|
let querys = getDRCFlightQuery(type, val);
|
|
|
|
|
|
|
|
servicesTopicReize(querys);
|
|
|
|
|
|
|
|
createMessage.info(name + '指令已发送');
|
|
|
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
}, longPressDuration.value);
|
|
|
|
|
|
|
|
if (isLongPress) {
|
|
|
|
|
|
|
|
isLongPress = false;
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// 画面拖动控制
|
|
|
|
|
|
|
|
let querys = getDRCFlightQuery(type, val);
|
|
|
|
|
|
|
|
servicesTopicReize(querys);
|
|
|
|
|
|
|
|
createMessage.info(name + '指令已发送');
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
if (longPressTimer.value) {
|
|
|
|
|
|
|
|
clearTimeout(longPressTimer.value);
|
|
|
|
|
|
|
|
longPressTimer.value = null;
|
|
|
|
|
|
|
|
console.log('清除延时器');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (longPressInterval.value) {
|
|
|
|
|
|
|
|
clearTimeout(longPressInterval.value);
|
|
|
|
|
|
|
|
longPressInterval.value = null;
|
|
|
|
|
|
|
|
console.log('清除定时器');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log('鼠标松开');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const getDRCFlightQuery = (type, val) => {
|
|
|
|
let data = {
|
|
|
|
let data = {
|
|
|
|
payload_index: uav.camera_index,
|
|
|
|
payload_index: uav.camera_index,
|
|
|
|
locked: true,
|
|
|
|
locked: true,
|
|
|
@ -269,15 +349,15 @@
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
data[type] = -8;
|
|
|
|
data[type] = -8;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log('data', data);
|
|
|
|
const querys = {
|
|
|
|
// 画面拖动控制
|
|
|
|
|
|
|
|
servicesTopicReize({
|
|
|
|
|
|
|
|
bid: buildGUID(),
|
|
|
|
bid: buildGUID(),
|
|
|
|
method: 'camera_screen_drag',
|
|
|
|
method: 'camera_screen_drag',
|
|
|
|
tid: buildGUID(),
|
|
|
|
tid: buildGUID(),
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
data: data,
|
|
|
|
data: data,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
console.log(querys);
|
|
|
|
|
|
|
|
return querys;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
// 获取mqtt客户端信息
|
|
|
|
// 获取mqtt客户端信息
|
|
|
@ -382,41 +462,45 @@
|
|
|
|
.direction-controller {
|
|
|
|
.direction-controller {
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
margin-top: 20px;
|
|
|
|
margin-top: 20px;
|
|
|
|
img {
|
|
|
|
.controller-bg {
|
|
|
|
margin-left: 60px;
|
|
|
|
margin-left: 60px;
|
|
|
|
width: 200px;
|
|
|
|
width: 200px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.direction-controller-top {
|
|
|
|
.direction-controller-top {
|
|
|
|
width: 50px;
|
|
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 20px;
|
|
|
|
top: 43px;
|
|
|
|
left: 130px;
|
|
|
|
left: 120px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.direction-controller-right {
|
|
|
|
.direction-controller-right {
|
|
|
|
width: 50px;
|
|
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 70px;
|
|
|
|
top: 60px;
|
|
|
|
right: 100px;
|
|
|
|
right: 127px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
|
|
width: 38px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.direction-controller-bottom {
|
|
|
|
.direction-controller-bottom {
|
|
|
|
width: 50px;
|
|
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 20px;
|
|
|
|
bottom: 44px;
|
|
|
|
right: 160px;
|
|
|
|
left: 120px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.direction-controller-left {
|
|
|
|
.direction-controller-left {
|
|
|
|
width: 50px;
|
|
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 80px;
|
|
|
|
top: 60px;
|
|
|
|
left: 80px;
|
|
|
|
left: 103px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
|
|
width: 38px;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.zoom {
|
|
|
|
.zoom {
|
|
|
|