gitY
/
DiKongGanZhiPingTai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai

Browse Source
main
徐景良 2 months ago
parent 77a3aade09 2a98edf563
commit 6f9ce2d360
9 changed files with 550 additions and 457 deletions
Show Stats Download Patch File Download Diff File

2
src/views/demo/workmanagement/flightoperation/index.vue
Unescape Escape View File

@ -158,7 +158,7 @@
setTimeout(() => {
uavLive.value = true;
livePreviewVisible.value = true;
}, 2000);
}, 5000);
}
};
const loadLiveStreaming = () => {

6
src/views/demo/workmanagement/flightoperation/src/AirportLive.vue
Unescape Escape View File

@ -154,8 +154,10 @@
};
// 销毁视频控件
onBeforeUnmount(() => {
player.dispose();
player = null;
if(player){
player.dispose();
player = null;
}
});
</script>
<style lang="less" scoped>

891
src/views/demo/workmanagement/flightoperation/src/FlightControl.vue
Unescape Escape View File

@ -1,13 +1,6 @@
<template>
<VueDragResize
:w="width"
:h="height"
:x="left"
:y="top"
:isActive="true"
:parentLimitation="true"
:isResizable="false"
>
<VueDragResize :w="width" :h="height" :x="left" :y="top" :isActive="true" :parentLimitation="true"
:isResizable="false">
<div class="flight-control" v-if="airportVal" v-drag>
<div class="title">
<div>
@ -31,89 +24,64 @@
<!-- <a-button>智能环绕</a-button> -->
<a-button @click="returnVoyage">一键返航</a-button>
<a-button @click="obtain" style="background-color: #1b71e8; border: none">
<template #icon v-if="flightGrab"><CheckOutlined /></template>
<template #icon v-if="flightGrab">
<CheckOutlined />
</template>
获取飞行器控制权
</a-button>
<a-button @click="enterDRC" style="background-color: #24d365; border: none">
<template #icon v-if="modeEnter"><CheckOutlined /></template>
<template #icon v-if="modeEnter">
<CheckOutlined />
</template>
进入飞行控制
</a-button>
<a-button @click="exitDRC" style="background-color: #e3150e; border: none"
>退出飞行控制</a-button
>
<a-button @click="exitDRC" style="background-color: #e3150e; border: none">退出飞行控制</a-button>
</div>
<div class="content-info">
<div class="info-item">
<!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
<div class="info-item-top" title="上升" @click="changeDRC('throttle', 'up', '上升')">
<img
src="@/assets/images/flightoperation/top-active.png"
alt=""
v-if="selectName == '上升'"
/>
<div class="info-item-top" title="上升" @mousedown="changeDRC('throttle', 'up', '上升')"
@mouseup="changeDRC('throttle', 'up', '')">
<img src="@/assets/images/flightoperation/top-active.png" alt="" v-if="selectName == '上升'" />
<img src="@/assets/images/flightoperation/top.png" alt="" v-else />
</div>
<div class="info-item-right" title="右旋转" @click="changeDRC('yaw', 'up', '右旋转')">
<img
src="@/assets/images/flightoperation/right-active.png"
alt=""
v-if="selectName == '右旋转'"
/>
<div class="info-item-right" title="右旋转" @mousedown="changeDRC('yaw', 'up', '右旋转')"
@mouseup="changeDRC('yaw', 'up', '')">
<img src="@/assets/images/flightoperation/right-active.png" alt="" v-if="selectName == '右旋转'" />
<img src="@/assets/images/flightoperation/right.png" alt="" v-else />
</div>
<div
class="info-item-bottom"
title="下降"
@click="changeDRC('throttle', 'down', '下降')"
>
<img
src="@/assets/images/flightoperation/bottom-active.png"
alt=""
v-if="selectName == '下降'"
/>
<div class="info-item-bottom" title="下降" @mousedown="changeDRC('throttle', 'down', '下降')"
@mouseup="changeDRC('throttle', 'down', '')">
<img src="@/assets/images/flightoperation/bottom-active.png" alt="" v-if="selectName == '下降'" />
<img src="@/assets/images/flightoperation/bottom.png" alt="" v-else />
</div>
<div class="info-item-left" title="左旋转" @click="changeDRC('yaw', 'down', '左旋转')">
<img
src="@/assets/images/flightoperation/left-active.png"
alt=""
v-if="selectName == '左旋转'"
/>
<div class="info-item-left" title="左旋转" @mousedown="changeDRC('yaw', 'down', '左旋转')"
@mouseup="changeDRC('yaw', 'down', '')">
<img src="@/assets/images/flightoperation/left-active.png" alt="" v-if="selectName == '左旋转'" />
<img src="@/assets/images/flightoperation/left.png" alt="" v-else />
</div>
</div>
<div class="info-item">
<!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
<div class="info-item-top" title="前进" @click="changeDRC('pitch', 'up', '前进')">
<img
src="@/assets/images/flightoperation/top-active.png"
alt=""
v-if="selectName == '前进'"
/>
<div class="info-item-top" title="前进"
@mousedown="changeDRC('pitch', 'up', '前进')" @mouseup="changeDRC('pitch', 'up', '')">
<img src="@/assets/images/flightoperation/top-active.png" alt=""
v-if="selectName == '前进'" />
<img src="@/assets/images/flightoperation/top.png" alt="" v-else />
</div>
<div class="info-item-right" title="右移" @click="changeDRC('roll', 'up', '右移')">
<img
src="@/assets/images/flightoperation/right-active.png"
alt=""
v-if="selectName == '右移'"
/>
<div class="info-item-right" title="右移"
@mousedown="changeDRC('roll', 'up', '右移')" @mouseup="changeDRC('roll', 'up', '')">
<img src="@/assets/images/flightoperation/right-active.png" alt="" v-if="selectName == '右移'" />
<img src="@/assets/images/flightoperation/right.png" alt="" v-else />
</div>
<div class="info-item-bottom" title="后退" @click="changeDRC('pitch', 'down', '后退')">
<img
src="@/assets/images/flightoperation/bottom-active.png"
alt=""
v-if="selectName == '后退'"
/>
<div class="info-item-bottom" title="后退"
@mousedown="changeDRC('pitch', 'down', '后退')" @mouseup="changeDRC('pitch', 'down', '')">
<img src="@/assets/images/flightoperation/bottom-active.png" alt="" v-if="selectName == '后退'" />
<img src="@/assets/images/flightoperation/bottom.png" alt="" v-else />
</div>
<div class="info-item-left" title="左移" @click="changeDRC('roll', 'down', '左移')">
<img
src="@/assets/images/flightoperation/left-active.png"
alt=""
v-if="selectName == '左移'"
/>
<div class="info-item-left" title="左移"
@mousedown="changeDRC('roll', 'down', '左移')" @mouseup="changeDRC('roll', 'down', '')">
<img src="@/assets/images/flightoperation/left-active.png" alt="" v-if="selectName == '左移'" />
<img src="@/assets/images/flightoperation/left.png" alt="" v-else />
</div>
</div>
@ -123,412 +91,467 @@
</VueDragResize>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, reactive, onUnmounted } from 'vue';
import {
getClient,
createSeizeConnection,
destroySeizeConnection,
connection,
} from '@/utils/mqtt';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { vDrag } from '@/utils/drag';
import { drcDownTopicReize, eventsTopicSubscribeReize } from '@/utils/debugging/events';
import {
servicesTopic,
services_replyTopic,
drcDownTopic,
eventsTopicSubscribe,
drcUpTopic,
errorName,
} from '@/utils/debugging/remote';
import { buildGUID } from '@/utils/uuid';
import { useMessage } from '@/hooks/web/useMessage';
import {
getRedisUser,
addOrUpdateRedisUser,
getLockedClients,
} from '@/api/workmanagement/airportMaintenance';
import { useUserStore } from '@/store/modules/user';
import { timestampToFormattedDate } from '@/utils/index';
import VueDragResize from 'vue-drag-resize/src';
import { airPortStore } from '@/store/modules/airport';
import { onMounted, ref, watch, reactive, onUnmounted } from 'vue';
import {
getClient,
createSeizeConnection,
destroySeizeConnection,
connection,
} from '@/utils/mqtt';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { vDrag } from '@/utils/drag';
import { drcDownTopicReize, eventsTopicSubscribeReize } from '@/utils/debugging/events';
import {
servicesTopic,
services_replyTopic,
drcDownTopic,
eventsTopicSubscribe,
drcUpTopic,
errorName,
} from '@/utils/debugging/remote';
import { buildGUID } from '@/utils/uuid';
import { useMessage } from '@/hooks/web/useMessage';
import {
getRedisUser,
addOrUpdateRedisUser,
getLockedClients,
} from '@/api/workmanagement/airportMaintenance';
import { useUserStore } from '@/store/modules/user';
import { timestampToFormattedDate } from '@/utils/index';
import VueDragResize from 'vue-drag-resize/src';
import { airPortStore } from '@/store/modules/airport';
const airPortStoreVal = airPortStore();
const uav = airPortStoreVal.getUAV;
const airPortStoreVal = airPortStore();
const uav = airPortStoreVal.getUAV;
const width = ref(380);
const height = ref(390);
const left = ref(700);
const top = ref(100);
const userStore = useUserStore();
const userInfo = userStore.getUserInfo;
const redisUser = ref({});
const { createMessage } = useMessage();
const emits = defineEmits(['changeFlightControl', 'clickTakeOff', 'clickFlyTo']);
const monitorDRC = ref(false);
// 是否飞行控制权抢夺
const flightGrab = ref(false);
// 是否进入飞行指令控制模式
const modeEnter = ref(false);
const airportVal: any = ref({
mode_code: 0,
});
const selectName = ref('');
const bid = buildGUID();
//修改redis用户锁
const changeRedisUser = (val: boolean) => {
const querys = redisUser.value;
querys.isLock = val;
querys.connectTime = timestampToFormattedDate(new Date().getTime());
addOrUpdateRedisUser(querys);
};
const isLocked = ref(false);
// 判断有没有redis用户锁
const lockedClient = () => {
getLockedClients().then((res) => {
if (res.length > 0) {
res.forEach((item, index) => {
if (item.userId != userInfo.id) {
isLocked.value = true;
}
});
}
});
};
// 一键起飞
const takeOff = () => {
if (isLocked.value) {
createMessage.warning('当前有用户正在操作，请稍后再试');
return;
const width = ref(380);
const height = ref(390);
const left = ref(700);
const top = ref(100);
const userStore = useUserStore();
const userInfo = userStore.getUserInfo;
const redisUser = ref({});
const { createMessage } = useMessage();
const emits = defineEmits(['changeFlightControl', 'clickTakeOff', 'clickFlyTo']);
const monitorDRC = ref(false);
// 是否飞行控制权抢夺
const flightGrab = ref(false);
// 是否进入飞行指令控制模式
const modeEnter = ref(false);
const airportVal: any = ref({
mode_code: 0,
});
const selectName = ref('');
const bid = buildGUID();
//修改redis用户锁
const changeRedisUser = (val: boolean) => {
const querys = redisUser.value;
querys.isLock = val;
querys.connectTime = timestampToFormattedDate(new Date().getTime());
addOrUpdateRedisUser(querys);
};
const isLocked = ref(false);
// 判断有没有redis用户锁
const lockedClient = () => {
getLockedClients().then((res) => {
if (res.length > 0) {
res.forEach((item, index) => {
if (item.userId != userInfo.id) {
isLocked.value = true;
}
});
}
});
};
// 一键起飞
const takeOff = () => {
if (isLocked.value) {
createMessage.warning('当前有用户正在操作，请稍后再试');
return;
}
emits('clickTakeOff');
changeRedisUser(true);
};
// 获取
const obtain = () => {
// if (!getClient()) {
// createConnection();
// }
if (isLocked.value) {
createMessage.warning('当前有用户正在操作，请稍后再试');
return;
}
if (flightGrab.value) {
createMessage.warning('已经获取了飞行器控制权');
return;
}
createMessage.info('正在获取飞行器控制权，请稍候');
changeRedisUser(true);
// 飞行控制权抢夺
servicesTopic({
bid: bid,
method: 'flight_authority_grab',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {},
});
// 负载控制权抢夺
servicesTopic({
bid: bid,
method: 'payload_authority_grab',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {
payload_index: uav.camera_index,
},
});
services_replyTopic();
};
// 一键返航
const returnBtn = ref(false);
const returnVoyage = () => {
if (returnBtn.value) {
createMessage.warning('正在返航或已返航，请勿重复操作');
emits('clickTakeOff');
changeRedisUser(true);
};
// 获取
const obtain = () => {
// if (!getClient()) {
// createConnection();
// }
if (isLocked.value) {
createMessage.warning('当前有用户正在操作，请稍后再试');
return;
}
if (flightGrab.value) {
createMessage.warning('已经获取了飞行器控制权');
return;
}
createMessage.info('正在获取飞行器控制权，请稍候');
changeRedisUser(true);
// 飞行控制权抢夺
servicesTopic({
bid: bid,
method: 'flight_authority_grab',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {},
});
// 负载控制权抢夺
servicesTopic({
bid: bid,
method: 'payload_authority_grab',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {
payload_index: uav.camera_index,
},
});
services_replyTopic();
};
// 一键返航
const returnBtn = ref(false);
const returnVoyage = () => {
if (returnBtn.value) {
createMessage.warning('正在返航或已返航，请勿重复操作');
return;
}
returnBtn.value = true;
servicesTopic({
bid: buildGUID(),
method: 'return_home',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {},
});
};
const seq = ref(1);
const longPressTimer = ref();
const longPressInterval = ref();
const longPressDuration = ref(1000);// 长按时间阈值，单位为毫秒
const changeDRC = (type, value, name) => {
selectName.value = name;
if (name !== '') {
console.log('鼠标按下');
if (!flightGrab.value) {
createMessage.warning('请先获取飞行器控制权');
return;
}
returnBtn.value = true;
servicesTopic({
bid: buildGUID(),
method: 'return_home',
tid: buildGUID(),
timestamp: new Date().getTime(),
data: {},
});
};
const seq = ref(1);
const changeDRC = (type, value, name) => {
selectName.value = name;
setTimeout(() => {
selectName.value = '';
}, 2000);
if (!modeEnter.value) {
createMessage.warning('请先进入指令飞行控制');
return;
}
createMessage.info(name + '指令已发送');
seq.value = seq.value + 1;
let data = {
roll: 1024,
pitch: 1024,
throttle: 1024,
yaw: 1024,
gimbal_pitch: 1024,
};
if (value == 'up') {
data[type] = 1684;
} else {
data[type] = 364;
let isLongPress = false;
longPressTimer.value = setTimeout(() => {
console.log('长按事件触发！');
isLongPress = true;
longPressInterval.value = setInterval(() => {
seq.value = seq.value + 1;
let querys = getDRCFlightQuery(type, value, seq);
drcDownTopicReize(querys);
createMessage.info(name + '指令已发送');
}, 1000)
}, longPressDuration.value);
if (isLongPress) {
isLongPress = false;
return;
}
const querys = {
seq: seq.value,
method: 'stick_control',
data: data,
bid: buildGUID(),
tid: buildGUID(),
timestamp: new Date().getTime(),
};
seq.value = seq.value + 1;
let querys = getDRCFlightQuery(type, value, seq);
drcDownTopicReize(querys);
};
const drcSeq = ref(1);
const enterDRC = () => {
if (!flightGrab.value) {
createMessage.warning('请先获取飞行控制权');
return;
createMessage.info(name + '指令已发送');
} else {
if (longPressTimer.value) {
clearTimeout(longPressTimer.value);
longPressTimer.value = null;
console.log('清除延时器');
}
createSeizeConnection();
createMessage.info('正在进入飞行控制，请稍后');
// 进入指令飞行控制模式
const { protocol, host, port, endpoint } = connection;
const connectUrl = `${protocol}://${host}:${port}${endpoint}`;
const querys = {
bid: bid,
data: {
hsi_frequency: 10,
mqtt_broker: {
address: connectUrl,
// client_id: 'mqtt_client_1581F8HGX254V00A0BUY',
client_id: 'mqtt_client_1581F8HGX254V00A0BUYSeize',
enable_tls: false,
expire_time: 3600,
password: '',
username: 'sdhc',
},
osd_frequency: 5,
},
tid: buildGUID(),
timestamp: new Date().getTime(),
method: 'drc_mode_enter',
};
servicesTopic(querys);
drc_eart_beat();
drcUpTopic();
if (longPressInterval.value) {
clearTimeout(longPressInterval.value);
longPressInterval.value = null;
console.log('清除定时器');
}
console.log('鼠标松开');
}
};
const getDRCFlightQuery = (type, value, seq) => {
let data = {
roll: 1024,
pitch: 1024,
throttle: 1024,
yaw: 1024,
gimbal_pitch: 1024,
};
let timer;
const drc_eart_beat = () => {
monitorDRC.value = true;
// 每隔五秒发送drc心跳包
timer = window.setInterval(() => {
drcSeq.value = drcSeq.value + 1;
const drcQuerys = {
bid: buildGUID(),
tid: buildGUID(),
timestamp: new Date().getTime(),
method: 'heart_beat',
data: {
timestamp: new Date().getTime(),
},
seq: drcSeq.value,
};
drcDownTopic(drcQuerys);
}, 5000);
// 订阅drc链路状态通知
eventsTopicSubscribe();
if (value == 'up') {
data[type] = 1684;
} else {
data[type] = 364;
}
const querys = {
seq: seq.value,
method: 'stick_control',
data: data,
bid: buildGUID(),
tid: buildGUID(),
timestamp: new Date().getTime(),
};
console.log(querys);
return querys;
};
const drcSeq = ref(1);
const enterDRC = () => {
if (!flightGrab.value) {
createMessage.warning('请先获取飞行控制权');
return;
}
createSeizeConnection();
createMessage.info('正在进入飞行控制，请稍后');
// 进入指令飞行控制模式
const { protocol, host, port, endpoint } = connection;
const connectUrl = `${protocol}://${host}:${port}${endpoint}`;
const querys = {
bid: bid,
data: {
hsi_frequency: 10,
mqtt_broker: {
address: connectUrl,
// client_id: 'mqtt_client_1581F8HGX254V00A0BUY',
client_id: 'mqtt_client_1581F8HGX254V00A0BUYSeize',
enable_tls: false,
expire_time: 3600,
password: '',
username: 'sdhc',
},
osd_frequency: 5,
},
tid: buildGUID(),
timestamp: new Date().getTime(),
method: 'drc_mode_enter',
};
const exitDRC = () => {
createMessage.info('正在退出飞行控制，请稍后');
const querys = {
bid: bid,
data: {},
servicesTopic(querys);
drc_eart_beat();
drcUpTopic();
};
let timer;
const drc_eart_beat = () => {
monitorDRC.value = true;
// 每隔五秒发送drc心跳包
timer = window.setInterval(() => {
drcSeq.value = drcSeq.value + 1;
const drcQuerys = {
bid: buildGUID(),
tid: buildGUID(),
timestamp: new Date().getTime(),
method: 'drc_mode_exit',
method: 'heart_beat',
data: {
timestamp: new Date().getTime(),
},
seq: drcSeq.value,
};
servicesTopic(querys);
drcDownTopic(drcQuerys);
}, 5000);
// 订阅drc链路状态通知
eventsTopicSubscribe();
};
const exitDRC = () => {
createMessage.info('正在退出飞行控制，请稍后');
const querys = {
bid: bid,
data: {},
tid: buildGUID(),
timestamp: new Date().getTime(),
method: 'drc_mode_exit',
};
onMounted(() => {
// 获取mqtt客户端信息
getRedisUser(userInfo.id).then((res) => {
if (res) {
redisUser.value = res;
}
});
lockedClient();
// // 接收消息
getClient().on('message', (topic, message) => {
const rs = JSON.parse(message);
if (rs.data.mode_code || rs.data.mode_code == 0) {
airportVal.value.mode_code = rs.data.mode_code;
}
if (rs.method == 'flight_authority_grab' && rs.bid == bid) {
if (rs.data.result == 0) {
flightGrab.value = true;
createMessage.success('飞行控制权抢夺成功');
} else {
flightGrab.value = false;
createMessage.error('飞行控制权抢夺失败，' + errorName(rs.data.result));
}
servicesTopic(querys);
};
onMounted(() => {
// 获取mqtt客户端信息
getRedisUser(userInfo.id).then((res) => {
if (res) {
redisUser.value = res;
}
});
lockedClient();
// // 接收消息
getClient().on('message', (topic, message) => {
const rs = JSON.parse(message);
if (rs.data.mode_code || rs.data.mode_code == 0) {
airportVal.value.mode_code = rs.data.mode_code;
}
if (rs.method == 'flight_authority_grab' && rs.bid == bid) {
if (rs.data.result == 0) {
flightGrab.value = true;
createMessage.success('飞行控制权抢夺成功');
} else {
flightGrab.value = false;
createMessage.error('飞行控制权抢夺失败，' + errorName(rs.data.result));
}
if (rs.method == 'drc_mode_enter' && rs.bid == bid) {
if (rs.data.result == 0) {
modeEnter.value = true;
createMessage.success('进入指令飞行控制模式成功');
} else {
modeEnter.value = false;
createMessage.error('进入指令飞行控制模式失败，' + errorName(rs.data.result));
}
}
if (rs.method == 'drc_mode_enter' && rs.bid == bid) {
if (rs.data.result == 0) {
modeEnter.value = true;
createMessage.success('进入指令飞行控制模式成功');
} else {
modeEnter.value = false;
createMessage.error('进入指令飞行控制模式失败，' + errorName(rs.data.result));
}
if (rs.method == 'drc_mode_exit' && rs.bid == bid) {
if (rs.data.result == 0) {
modeEnter.value = false;
createMessage.success('退出指令飞行控制模式成功');
changeRedisUser(false);
} else {
createMessage.error('退出指令飞行控制模式失败，' + errorName(rs.data.result));
}
}
if (rs.method == 'drc_mode_exit' && rs.bid == bid) {
if (rs.data.result == 0) {
modeEnter.value = false;
createMessage.success('退出指令飞行控制模式成功');
changeRedisUser(false);
} else {
createMessage.error('退出指令飞行控制模式失败，' + errorName(rs.data.result));
}
// 一键返航
if (rs.method === 'return_home') {
if (rs.data.result == 0) {
createMessage.success('一键返航成功');
monitorDRC.value = false;
returnBtn.value = true;
} else {
createMessage.error('一键返航失败，' + errorName(rs.data.result));
returnBtn.value = false;
}
}
// 一键返航
if (rs.method === 'return_home') {
if (rs.data.result == 0) {
createMessage.success('一键返航成功');
monitorDRC.value = false;
returnBtn.value = true;
} else {
createMessage.error('一键返航失败，' + errorName(rs.data.result));
returnBtn.value = false;
}
if (rs.method === 'takeoff_to_point') {
if (rs.data.result == 0) {
createMessage.success('一键起飞成功');
} else {
createMessage.error('一键起飞失败，' + errorName(rs.data.result));
}
}
if (rs.method === 'takeoff_to_point') {
if (rs.data.result == 0) {
createMessage.success('一键起飞成功');
} else {
createMessage.error('一键起飞失败，' + errorName(rs.data.result));
}
if (rs.method === 'drc_status_notify' && monitorDRC.value) {
if (rs.data.result == 0) {
if (rs.data.drc_state == 0) {
drc_eart_beat();
}
} else {
}
if (rs.method === 'drc_status_notify' && monitorDRC.value) {
if (rs.data.result == 0) {
if (rs.data.drc_state == 0) {
drc_eart_beat();
createMessage.error('DRC连接失败，' + errorName(rs.data.result));
}
} else {
drc_eart_beat();
createMessage.error('DRC连接失败，' + errorName(rs.data.result));
}
// 指点飞行
if (rs.method == 'fly_to_point') {
if (rs.data.result == 0) {
createMessage.success('指点飞行成功');
} else {
createMessage.error('指点飞行失败，' + errorName(rs.data.result));
}
}
// 指点飞行
if (rs.method == 'fly_to_point') {
if (rs.data.result == 0) {
createMessage.success('指点飞行成功');
} else {
createMessage.error('指点飞行失败，' + errorName(rs.data.result));
}
});
});
onUnmounted(() => {
window.clearInterval(timer);
destroySeizeConnection();
changeRedisUser(false);
monitorDRC.value = false;
}
});
});
onUnmounted(() => {
window.clearInterval(timer);
destroySeizeConnection();
changeRedisUser(false);
monitorDRC.value = false;
});
</script>
<style lang="less" scoped>
.flight-control {
width: 96%;
height: 98%;
padding: 10px 20px;
margin: 10px 0 0 10px;
background: #0d0e15;
box-shadow:
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
border-radius: 6px;
backdrop-filter: blur(3px);
color: #fff;
.title {
width: 100%;
padding: 10px 0;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
border-bottom: 1px solid #4e5778;
display: flex;
align-items: center;
justify-content: space-between;
i {
color: #f2762d;
font-style: normal;
}
div {
color: #fff;
cursor: pointer;
}
.flight-control {
width: 96%;
height: 98%;
padding: 10px 20px;
margin: 10px 0 0 10px;
background: #0d0e15;
box-shadow:
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
border-radius: 6px;
backdrop-filter: blur(3px);
color: #fff;
.title {
width: 100%;
padding: 10px 0;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
border-bottom: 1px solid #4e5778;
display: flex;
align-items: center;
justify-content: space-between;
i {
color: #f2762d;
font-style: normal;
}
.content-item {
display: flex;
align-items: center;
border-bottom: 1px solid #4e5778;
padding: 10px 0;
div {
color: #fff;
cursor: pointer;
}
.content-button {
margin-top: 10px;
button {
background: none;
margin: 10px 0 0 10px;
color: #fff;
}
}
.content-item {
display: flex;
align-items: center;
border-bottom: 1px solid #4e5778;
padding: 10px 0;
}
.content-button {
margin-top: 10px;
button {
background: none;
margin: 10px 0 0 10px;
color: #fff;
}
.content-info {
display: flex;
align-items: center;
justify-content: space-between;
.info-item {
position: relative;
width: 48%;
height: 116px;
margin: 24px 0 20px 20px;
}
.content-info {
display: flex;
align-items: center;
justify-content: space-between;
.info-item {
position: relative;
width: 48%;
height: 116px;
margin: 24px 0 20px 20px;
img {
width: 36px;
}
.info-item-top {
position: absolute;
top: 8px;
left: 20px;
cursor: pointer;
img {
width: 36px;
width: 62px;
}
.info-item-top {
position: absolute;
top: 8px;
left: 20px;
cursor: pointer;
img {
width: 62px;
}
}
.info-item-right {
position: absolute;
top: 30px;
right: 36px;
cursor: pointer;
}
.info-item-bottom {
position: absolute;
bottom: 0px;
left: 21px;
cursor: pointer;
img {
width: 62px;
}
}
.info-item-left {
position: absolute;
top: 30px;
left: -2px;
cursor: pointer;
}
.info-item-right {
position: absolute;
top: 30px;
right: 36px;
cursor: pointer;
}
.info-item-bottom {
position: absolute;
bottom: 0px;
left: 21px;
cursor: pointer;
img {
width: 62px;
}
}
.info-item-left {
position: absolute;
top: 30px;
left: -2px;
cursor: pointer;
}
}
}
}
</style>

6
src/views/demo/workmanagement/flightoperation/src/LivePreview.vue
Unescape Escape View File

@ -286,8 +286,10 @@
};
// 销毁视频控件
onBeforeUnmount(() => {
player.dispose();
player = null;
if(player){
player.dispose();
player = null;
}
});
</script>
<style lang="less" scoped>

5
src/views/demo/workmanagement/flightoperation/src/LoadControl.vue
Unescape Escape View File

@ -300,14 +300,15 @@
let data = {
payload_index: uav.camera_index,
locked: true,
pitch_speed: 8,
yaw_speed: 8,
pitch_speed: 0,
yaw_speed: 0,
};
if (val == 'up') {
data[type] = 8;
} else {
data[type] = -8;
}
console.log('data', data);
// 画面拖动控制
servicesTopicReize({
bid: buildGUID(),

7
src/views/demo/workmanagement/flightoperation/src/SelectComponent.vue
Unescape Escape View File

@ -67,7 +67,12 @@
value: item.Id,
};
});
selectVal.project = optionsArr.projectOptions[0].value;
if(sessionStorage.getItem('homeToFlightId')){
selectVal.project = sessionStorage.getItem('homeToFlightId');
sessionStorage.removeItem('homeToFlightId')
} else {
selectVal.project = optionsArr.projectOptions[0].value;
}
getAirPort(selectVal.project);
} else {
optionsArr.projectOptions = [];

25
src/views/demo/workmanagement/projecthome/ProjectList/index.vue
Unescape Escape View File

@ -10,7 +10,7 @@
<div class="interval"></div>
<div class="list">
<div v-for="item in projectList">
<div :class="`project-list-item ${activeProject == item.Id? 'active': ''}`" @click="selectProject(item)">
<div :class="`project-list-item ${props.activeProject == item.Id? 'active': ''}`" @click="selectProject(item)">
<div style="display: flex;align-items: center;">
<div class="list-item-icon"></div>
<div class="list-item-content">{{ item.WorkspaceName }}</div>
@ -36,23 +36,40 @@ import { ref, defineProps, onMounted, createVNode } from "vue"
import { GetWorkspaceList, GetWorkSpaceById, DeleteWorkspace } from '@/api/demo/projecthome'
import { message, Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { getClient, createConnection, clientSubscribe, destroyConnection } from '@/utils/mqtt';
onMounted(() => {
getProjectList()
})
const props = defineProps(['map'])
const props = defineProps(['map', 'activeProject', 'airPort'])
const emits = defineEmits(['update:activeProject'])
const addModal = ref(false)
const modalType = ref('')
const projectList = ref([])
const activeProject = ref('')
const updateProject = ref({})
const lastSubscriptUrl = ref('')
const addProject = () => {
modalType.value = 'insert'
addModal.value = true
}
const selectProject = (item) => {
activeProject.value = item.Id
if(props.activeProject != item.Id){
props.airPort.latitude = null
props.airPort.longitude = null
getClient().unsubscribe(lastSubscriptUrl.value,(error, res) => {})
}
emits('update:activeProject',item.Id)
let params = {
id: item.Id
}
GetWorkSpaceById(params).then(res => {
res.lasaDronePort.forEach(item => {
const topicUrl = 'thing/product/' + item.sn + '/osd';
lastSubscriptUrl.value = topicUrl
clientSubscribe(topicUrl, { qos: 0 });
})
})
}
const getProjectList = () => {
GetWorkspaceList().then(res => {

46
src/views/demo/workmanagement/projecthome/index.vue
Unescape Escape View File

@ -1,11 +1,11 @@
<template>
<div class="home-page">
<div style="width: 100%;height: calc(100vh - 80px);">
<Map @mapOnLoad="mapOnLoad"/>
<Map :airRoute="airRoute" @mapOnLoad="mapOnLoad" :airPort="airPort" @clickAirPort="clickAirPort"/>
</div>
<div ref="leftComponentRef" style="position: absolute;top: 0px;left: 0px;">
<!-- 项目列表 -->
<ProjectList :map="map"/>
<ProjectList :map="map" v-model:activeProject="activeProject" :airPort="airPort"/>
<!-- 基本信息 -->
<Info />
</div>
@ -19,20 +19,40 @@
</template>
<script setup lang="ts">
// import Map from '@/views/demo/workmanagement/workplan/components/map.vue'
import Map from './Map/index.vue'
import Map from '@/views/demo/workmanagement/workplan/components/map.vue'
// import Map from './Map/index.vue'
import ProjectList from './ProjectList/index.vue'
import Info from './Info/index.vue'
import Inspection from './Inspection/index.vue'
import Result from './Result/index.vue'
import { ref, onMounted, onBeforeUnmount, } from "vue"
import { getClient, createConnection, clientSubscribe, destroyConnection } from '@/utils/mqtt';
import { useRouter } from 'vue-router';
const router = useRouter();
const airRoute = ref({
airLineType: null,
airType: null,
airModel: null,
name: null,
});
const airPort = ref({
latitude: null,
longitude: null,
});
const activeProject = ref('')
const DESIGN_WIDTH = 1912
const DESIGN_HEIGHT = 962
const leftComponentRef = ref<HTMLElement | null>(null)
const rightComponentRef = ref<HTMLElement | null>(null)
let map
const map = ref()
const clickAirPort = () => {
sessionStorage.setItem('homeToFlightId', activeProject.value);
router.push({
path: '/workmanagement/flightoperation',
});
}
function updateScale() {
const scaleX = window.innerWidth / DESIGN_WIDTH
const scaleY = window.innerHeight / DESIGN_HEIGHT
@ -47,16 +67,28 @@ function updateScale() {
right.style.transform = `scale(${scale}) translate(-50%, -50%)`
}
}
const connectionCallback = () => {
getClient().on('message', (topic, msg) => {
if (topic.endsWith("osd")) {
const rs = JSON.parse(msg)
if (rs.data.latitude && rs.data.longitude) {
airPort.value.latitude = rs.data.latitude;
airPort.value.longitude = rs.data.longitude;
}
}
});
}
onMounted(() => {
createConnection(connectionCallback)
updateScale()
window.addEventListener('resize', updateScale)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', updateScale)
destroyConnection()
})
const mapOnLoad = (value) => {
map = value
map.value = value
}
</script>

19
src/views/demo/workmanagement/workplan/components/map.vue
Unescape Escape View File

@ -148,7 +148,7 @@ const generatePreviewPoint = (placemark)=>{
}
};
const emits = defineEmits(['exitDraw', 'flyToThere']);
const emits = defineEmits(['exitDraw', 'flyToThere', 'mapOnLoad', 'clickAirPort']);
const airPoints = ref([]);
const currentAirPoint = ref({});
@ -199,6 +199,9 @@ const generatePreviewPoint = (placemark)=>{
// 航点连接线
let lineGroundPointLayer: mars3d.layer.GraphicLayer;
// 机场位置
let startGraphic;
let graphic = null;
const exitDraw = () => {
@ -457,6 +460,7 @@ const generatePreviewPoint = (placemark)=>{
}
// 加载长光高清影像
loadChangGuangLayer();
emits('mapOnLoad',map)
});
};
@ -1546,11 +1550,15 @@ const loadChangGuangLayer = ()=>{
// 设置机场位置
const setAirportPosition = async () => {
if(!graphicLayer){
return
}
let point = graphicLayer.getGraphicById('set-airport');
// // 创建点的经纬度信息
let position = [props.airPort.longitude, props.airPort.latitude, 70];
// 更新航点
if (point) {
if (startGraphic) {
startGraphic.position = position
// point.setOptions({
// id: 'set-airport',
// name: '机场位置',
@ -1573,7 +1581,7 @@ const loadChangGuangLayer = ()=>{
// },
// });
} else {
let startGraphic = new mars3d.graphic.BillboardEntity({
startGraphic = new mars3d.graphic.BillboardEntity({
id: 'set-airport',
position: position,
style: {
@ -1593,8 +1601,11 @@ const loadChangGuangLayer = ()=>{
},
},
});
startGraphic.on(mars3d.EventType.click, function (event) {
emits('clickAirPort')
});
graphicLayer.addGraphic(startGraphic);
}
}
};
// 设置无人机轨迹

Write Preview
Loading…
Cancel
Save