Skip to content

M
mmc-stl-vue2
提交 de3e06c3 作者: 翁进城
操作

增加地面站WS项

上级 0e00b25e
正在显示 包含 489 行增加 和 1 行删除
index.js
......@@ -8,6 +8,7 @@ import MMCDataTransferPanel from "./src/components/MMCDataTransferPanel";
import MMCPlayer from "./src/components/MMCPlayer";
import MMCUavList from "./src/components/MMCUavList";
import MMCMQTT from './src/plugins/MMCMQTT';
import MMCGroundStation from "./src/plugins/MMCGroundStation";
const components = [
MMCCodeDemo,
......@@ -15,7 +16,7 @@ const components = [
MMCPlayer,
MMCUavList
];
const plugins = [ MMCMQTT ];
const plugins = [MMCMQTT, MMCGroundStation];
export default {
......
src/plugins/MMCGroundStation/index.js 0 → 100644
//地面站链路
import store from './store';
export default {
install: function (Vue, options) {
Vue.mixin({
created: function () {
if(!this.$store){
return;
}
if (!this.$store.hasModule("MMCGroundStation")) {
this.$store.registerModule("MMCGroundStation", store);
}
},
});
},
};
src/plugins/MMCGroundStation/orders.js 0 → 100644
export default {
解锁: "200,2110",
起飞: "200,2111",
返航: "200,2112",
航线上传: "200,2113",
发送航线到无人机: "200,2114",
航线模式: "200,2115",
降落: "200,2116",
悬停: "200,2117",
继续飞行: "200,2118",
指点飞行: "200,2119",
};
src/plugins/MMCGroundStation/store.js 0 → 100644
import orders from "./orders";
export default {
namespaced: true,
state: {
ws: null,
include: [], //需要包含的deviceHeadId，包含后dataSet中将进行保存
url: "", //mqtt地址
dataSet: {
//数据集
/* deviceHardId: {
type(如258): {}
} */
},
orders, //所有指令
callbackList: [], //ws消息callback队列
userInfo: "", //用户名
},
mutations: {
setWs(state, data) {
state.ws = data;
},
setInclude(state, data) {
state.include = data;
},
setUrl(state, data) {
state.url = data;
},
setDataSet(state, data) {
let temp = {};
Object.keys(data).forEach((key) => {
temp[key] = data[key];
});
state.dataSet = temp;
},
setCallbackList(state, data) {
state.callbackList = data;
},
setUserInfo(state, data) {
state.userInfo = data;
},
},
actions: {
/**
*
* @param {*} param0
* @param {*} param1
* @param {string} param1.url //地面站ws的url
* @param {object} param1.userInfo //用户信息对象
* @param {string} param1.userInfo.username //用户名
* @param {string} param1.userInfo.token //用户token
* @param {string} param1.userInfo.appId //用户的appId
* @returns
*/
init({ commit, state }, { url, userInfo }) {
const ws = new WebSocket(url);
commit("setWs", ws);
commit("setUserInfo", userInfo);
ws.onmessage = (e) => {
let metadata = {};
try {
metadata = JSON.parse(e.data);
} catch (err) {
// console.log('ws:', e.data) //跳过心跳包
return;
}
if (metadata.deviceData) {
try {
metadata.deviceData = JSON.parse(metadata.deviceData);
const deviceHardId = metadata.deviceData.deviceHardId;
if (state.include.includes(deviceHardId)) {
if (!state.dataSet[deviceHardId]) {
state.dataSet[deviceHardId] = {};
}
state.dataSet[deviceHardId] = metadata;
commit("setDataSet", state.dataSet);
}
} catch (e) {
console.log(e);
}
}
state.callbackList.forEach((cb) => {
cb(metadata);
});
};
ws.onclose = (data) => {
console.log("onclose", data);
};
return new Promise((resolve, reject) => {
ws.onopen = () => {
const wsData = {
type: 100,
systemCode: "mmc",
state: 1,
username: state.userInfo.username,
token: state.userInfo.token,
appId: state.userInfo.appId,
};
ws.send(JSON.stringify(wsData));
resolve();
};
ws.onerror = (error) => {
console.log("error", error);
reject(error);
};
});
},
/**
* 订阅
* @param {*} deviceHardId
*/
subscribe({ state, commit }, deviceHardId) {
if (!deviceHardId) {
return deviceHardId;
}
let list = [...state.include];
let find = list.find((id) => {
return deviceHardId === id;
});
if (!find) {
list.push(deviceHardId);
}
commit("setInclude", list);
},
/**
* 取消订阅
* @param {*} deviceHardId
* @returns
*/
unsubscribe({ state, commit }, deviceHardId) {
if (!deviceHardId) {
return deviceHardId;
}
let list = [...state.include];
list = list.filter((id) => {
return deviceHardId !== id;
});
if(state.dataSet[deviceHardId]){
state.dataSet[deviceHardId] = undefined;
commit("setDataSet", state.dataSet);
}
commit("setInclude", list);
},
/**
* 发布消息到地面站
* @param {*} publication
* @param {*} callback
* @param {*} options
* @param {*} type
*/
publish({ state }, { type, cmdFunction, data, deviceHardId }) {
if (!type || !cmdFunction) {
throw "必需指定命令类型！";
}
state.ws.send(
JSON.stringify({
type,
systemCode: "mmc",
state: 1, //0 地面站（无人机），1 客户端或者web ，2 HTTP接口
username: state.userInfo.username,
data: {
cmdFunction,
...data,
},
deviceHardId,
})
);
},
/**
* 全部指令
*/
order({ state, dispatch }, { order, data, deviceHardId }) {
if (state.orders[order] === undefined) {
throw "该命令不存在！";
}
let orderArr = state.orders[order].split(",");
dispatch("publish", {
type: orderArr[0],
cmdFunction: orderArr[1],
data,
deviceHardId,
});
},
/**
* 添加回调
* @param {*} param0
* @param {*} cb
*/
addCallback({ state, commit }, cb) {
let list = [...state.callbackList];
list.filter((cb1) => {
return cb !== cb1;
});
list.push(cb);
commit("setCallbackList", list);
},
/**
* 移除回调
* @param {*} param0
* @param {*} cb
*/
removeCallback({ state, commit }, cb) {
let list = [...state.callbackList];
list = list.filter((cb1) => {
return cb !== cb1;
});
commit("setCallbackList", list);
},
},
};
vue2/src/App.vue
......@@ -17,6 +17,9 @@
<el-menu-item index="mqtt">
<span slot="title">飞控MQTT</span>
</el-menu-item>
<el-menu-item index="groundStation">
<span slot="title">地面站WS</span>
</el-menu-item>
<el-menu-item index="player">
<span slot="title">播放器</span>
</el-menu-item>
......
vue2/src/router/index.js
......@@ -26,6 +26,10 @@ export const createRouter = () =>
component: () => import(`@/views/mqtt`),
},
{
path: "/groundStation",
component: () => import(`@/views/groundStation`),
},
{
path: "/player",
component: () => import(`@/views/player`),
},
......
vue2/src/views/groundStation/demo.js 0 → 100644
export default `
<template>
<div>
<el-form>
<el-form-item label="无人机id">
<el-input v-model="deviceHardId"></el-input>
</el-form-item>
<el-form-item label="操作">
<el-button @click="subscribe">订阅</el-button>
<el-button @click="unsubscribe">取消订阅</el-button>
<el-button @click="publish()">通过原始type发送指令</el-button>
<el-button @click="order({order: '降落'})">通过关键字发送指令</el-button>
<el-button @click="addCallback">添加事件回调</el-button>
<el-button @click="removeCallback">移除事件回调</el-button>
</el-form-item>
<el-form-item label="支持的指令">
{{ orders }}
</el-form-item>
</el-form>
<div>
{{ text }}
</div>
<div>
{{ callbackText }}
</div>
</div>
</template>
<script>
export default {
name: 'GroundStation',
data(){
return {
deviceHardId: '',
userInfo: {
username: 'admin',
token: 'cbe85bcd114cfb00a8547c86cac5460ad7942a1ab531094cd53e55a1e67617d9',
appId: 87878
},
callbackText: ''
}
},
computed: {
text(){
return this.$store.state.MMCGroundStation.dataSet;
},
orders(){
return this.$store.state.MMCGroundStation.orders;
},
},
async created(){
try{
await this.$store.dispatch('MMCGroundStation/init', {
url: 'ws://116.62.122.225:30103',
userInfo: this.userInfo
})
}catch(e){
console.log('地面站连接失败', e)
}
console.log('地面站连接成功');
},
methods: {
subscribe(){
this.$store.dispatch('MMCGroundStation/subscribe', this.deviceHardId)
},
unsubscribe(){
this.$store.dispatch('MMCGroundStation/unsubscribe', this.deviceHardId)
},
publish(){
this.$store.dispatch('MMCGroundStation/publish', {
type: 200,
cmdFunction: 9001,
data: {
cmdControlType: 900,
},
deviceHardId: this.deviceHardId
})
},
order( { order } ){
this.$store.dispatch('MMCGroundStation/order', {
order,
data: {
cmdControlType: 900,
},
deviceHardId: this.deviceHardId
})
},
callback(data){
console.log('callback data', data)
this.callbackText += '收到事件，调试窗口查看 ';
},
addCallback(){
this.$store.dispatch('MMCGroundStation/addCallback', this.callback)
},
removeCallback(){
this.callbackText = '';
this.$store.dispatch('MMCGroundStation/removeCallback', this.callback)
}
}
}
</script>
`;
\ No newline at end of file
vue2/src/views/groundStation/demo.vue 0 → 100644
<template>
<div>
<el-form>
<el-form-item label="无人机id">
<el-input v-model="deviceHardId"></el-input>
</el-form-item>
<el-form-item label="操作">
<el-button @click="subscribe">订阅</el-button>
<el-button @click="unsubscribe">取消订阅</el-button>
<el-button @click="publish()">通过原始type发送指令</el-button>
<el-button @click="order({order: '降落'})">通过关键字发送指令</el-button>
<el-button @click="addCallback">添加事件回调</el-button>
<el-button @click="removeCallback">移除事件回调</el-button>
</el-form-item>
<el-form-item label="支持的指令">
{{ orders }}
</el-form-item>
</el-form>
<div>
{{ text }}
</div>
<div>
{{ callbackText }}
</div>
</div>
</template>
<script>
export default {
name: 'GroundStation',
data(){
return {
deviceHardId: '',
userInfo: {
username: 'admin',
token: 'cbe85bcd114cfb00a8547c86cac5460ad7942a1ab531094cd53e55a1e67617d9',
appId: 87878
},
callbackText: ''
}
},
computed: {
text(){
return this.$store.state.MMCGroundStation.dataSet;
},
orders(){
return this.$store.state.MMCGroundStation.orders;
},
},
async created(){
try{
await this.$store.dispatch('MMCGroundStation/init', {
url: 'ws://116.62.122.225:30103',
userInfo: this.userInfo
})
}catch(e){
console.log('地面站连接失败', e)
}
console.log('地面站连接成功');
},
methods: {
subscribe(){
this.$store.dispatch('MMCGroundStation/subscribe', this.deviceHardId)
},
unsubscribe(){
this.$store.dispatch('MMCGroundStation/unsubscribe', this.deviceHardId)
},
publish(){
this.$store.dispatch('MMCGroundStation/publish', {
type: 200,
cmdFunction: 9001,
data: {
cmdControlType: 900,
},
deviceHardId: this.deviceHardId
})
},
order( { order } ){
this.$store.dispatch('MMCGroundStation/order', {
order,
data: {
cmdControlType: 900,
},
deviceHardId: this.deviceHardId
})
},
callback(data){
console.log('callback data', data)
this.callbackText += '收到事件，调试窗口查看 ';
},
addCallback(){
this.$store.dispatch('MMCGroundStation/addCallback', this.callback)
},
removeCallback(){
this.callbackText = '';
this.$store.dispatch('MMCGroundStation/removeCallback', this.callback)
}
}
}
</script>
\ No newline at end of file
vue2/src/views/groundStation/index.vue 0 → 100644
<template>
<div>
<MMCCodeDemo title="地面站WS连接" desc="通过WebSocket使前端与地面站进行数据交换" :code="demoStr">
<demo></demo>
</MMCCodeDemo>
</div>
</template>
<script>
import demo from './demo.vue'
import demoStr from './demo.js';
export default {
components: {
demo,
},
data(){
return {
demoStr
}
},
computed: {
},
methods: {
}
}
</script>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论