Skip to content

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

feat: 增加航线分页事件

上级 ca9f1e65
正在显示 包含 194 行增加 和 134 行删除
iframe/src/App.vue
......@@ -6,8 +6,8 @@
:devMode="devMode"
:uavTaskList="uavTaskList"
:hangarTaskList="hangarTaskList"
:airwayList="airwayList"
:scene="scene ? 0 : 1"
:useSTLAirway="useSTLAirway"
@uavChange="dispatchEvent('uavChange', $event)"
@uavStartTask="dispatchEvent('uavStartTask', $event)"
@uavAddTask="dispatchEvent('uavAddTask', $event)"
......@@ -16,6 +16,7 @@
@hangarStartTask="dispatchEvent('hangarStartTask', $event)"
@hangarAddTask="dispatchEvent('hangarAddTask', $event)"
@hangarDelTask="dispatchEvent('hangarDelTask', $event)"
@airwayPageChange="dispatchEvent('airwayPageChange', $event)"
></MMCFlightControlCenter>
</template>
......@@ -30,6 +31,7 @@ export default {
account: "mmctest@admin",
password: "test@Admin001",
userInfo: null,
useSTLAirway: true, // 使用标准航线
uavTaskList: [
{
name: "任务1",
......@@ -125,8 +127,9 @@ export default {
'{"filename":"肇庆航线20240318","line":{"baseSpeed":3},"content":[{"uuid":"1nmI-Fo18IagbcVJsia7Q","latitude":23.178153411812204,"longitude":112.57807281336807,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"9pTbBPlF8iIwbUNqusyHK","latitude":23.17783116525969,"longitude":112.57797543441967,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"s91IhN22wuaeyG-UQs0XR","latitude":23.17786413506686,"longitude":112.57824336604547,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]},{"uuid":"xS_JIl3wxQrhMPdpcjcSn","latitude":23.17820934975604,"longitude":112.5781357731637,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[]}],"baseSpeed":3,"gimbalYaw":0,"gimbalPitch":0,"alt":100}',
},
],
hangarAddTaskCB: null, //机库创建任务回调
hangarAddTaskCB: null, //机库创建任务回调
uavAddTaskCB: null, //机库创建任务回调
airwayPageChangeCB: null, //航线翻页时回调
};
},
computed: {},
......@@ -175,7 +178,7 @@ export default {
"message",
(event) => {
if (event.data.module === "MMCFlightControlCenter") {
console.log('iframe收到数据', event.data);
console.log("iframe收到数据", event.data);
this.paramHandler(event.data);
this.callbackHandler(event.data);
this.logHandler(event.data);
......@@ -195,36 +198,36 @@ export default {
/**
* 回调处理
*/
callbackHandler({ type, event, data}) {
if (type === 'callback'){
let cb = this[event + 'CB'];
if(cb){
callbackHandler({ type, event, data }) {
if (type === "callback") {
let cb = this[event + "CB"];
if (cb) {
cb(data);
this[event + 'CB'] = null;
this[event + "CB"] = null;
}
}
},
/**
* 日志处理
*/
logHandler({ type, keys, keyType }){
if(type === 'log'){
let arr = keys.split('.');
logHandler({ type, keys, keyType }) {
if (type === "log") {
let arr = keys.split(".");
let value = window;
arr.forEach((key, i) => {
value = value[key]
if(i === arr.length - 1){
switch(keyType){
case 'value':
this.postTop({
event: 'log',
data: {
keys,
value
}
})
value = value[key];
if (i === arr.length - 1) {
switch (keyType) {
case "value":
this.postTop({
event: "log",
data: {
keys,
value,
},
});
break;
case 'method':
case "method":
value();
break;
}
......@@ -237,21 +240,29 @@ export default {
* @param {string} event 事件名
* @param {object} data 事件数据
*/
dispatchEvent(event, data){
if(event === 'hangarAddTask'){
// 回调函数不能通过postMessage传递
this.hangarAddTaskCB = data.callback;
delete data.callback;
}
if(event === 'uavAddTask'){
this.uavAddTaskCB = data.callback;
delete data.callback;
dispatchEvent(event, data) {
// 回调函数不能通过postMessage传递
switch (event) {
case "hangarAddTask":
this.hangarAddTaskCB = data.callback;
delete data.callback;
break;
case "uavAddTask":
this.uavAddTaskCB = data.callback;
delete data.callback;
break;
case "airwayPageChange":
this.airwayPageChangeCB = data.callback;
delete data.callback;
break;
}
this.postTop({
type: 'event',
type: "event",
event: event,
data: data
})
data: data,
});
},
},
};
......
iframe/src/components/HelloWorld.vue deleted 100644 → 0
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/taskList/components/normalTask/components/lineList/index.vue
......@@ -69,25 +69,21 @@
import { mapState } from "vuex";
import { Control_API } from "../../../../../../../../../../../../api";
let point_index = null;
let isEditting = false;
let airline_entitys = [];
export default {
inject: ["rootNode"],
data() {
return {
keyword: null,
airwayData: {
current: 1,
records: [],
searchCount: true,
size: 10,
total: 0,
},
};
},
computed: {
// ...mapState("MMCFlightControlCenter", ["airwayList"]),
...mapState("MMCFlightControlCenter", ["useSTLAirway"]),
},
mounted() {
this.getAirway();
......@@ -110,18 +106,46 @@ export default {
this.$emit("close");
},
async getAirway() {
let res = await Control_API.getUavRouteList({
page: this.airwayData.current,
pageSize: this.airwayData.size,
});
if (res?.code === 200) {
this.airwayData = res.data || {
current: 1,
records: [],
searchCount: true,
size: 10,
total: 0,
};
if (this.useSTLAirway) {
let res = await Control_API.getUavRouteList({
page: this.airwayData.current,
pageSize: this.airwayData.size,
});
if (res?.code === 200) {
let statusMap = {
1: "可用",
2: "待申请",
3: "待审批",
4: "通过",
5: "驳回",
};
this.airwayData = res.data || {
current: 1,
records: [],
size: 10,
total: 0,
};
this.airwayData.records?.map((item) => {
return {
...item,
status: statusMap[item.status],
};
})
}
} else {
this.rootNode.$emit("airwayPageChange", {
page: this.airwayData.current,
pageSize: this.airwayData.size,
callback: (data) => {
this.airwayData = data || {
current: 1,
records: [],
size: 10,
total: 0,
};
},
});
}
},
},
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/components/taskList/components/lineList/index.vue
......@@ -28,15 +28,14 @@
<div class="td">{{ item.organizationName || "暂无" }}</div>
<!-- 空域状态 -->
<div class="td">
<div v-if="item.status == 1" class="status">可用</div>
<div class="status">{{item.status || "暂无"}}</div>
<!-- <div v-if="item.status == 1" class="status">可用</div>
<div v-else-if="item.status == 2" class="status" style="color: #2ca1e2">待申请</div>
<div v-else-if="item.status == 3" class="status" style="color: #ffbd36">待审批</div>
<div v-else-if="item.status == 4" class="status" style="color: #2bfdf1">通过</div>
<div v-else-if="item.status == 5" class="status" style="color: #fb4a2d">驳回</div>
<div v-else>暂无</div>
<div v-else>暂无</div>-->
</div>
<!-- 模式 -->
<!-- <div class="td">{{ item.distance || "暂无" }}</div> -->
<!-- 安全状态 -->
<div
class="td"
......@@ -69,24 +68,21 @@
import { mapState } from "vuex";
import { Control_API } from "../../../../../../../../../../api";
let point_index = null;
let isEditting = false;
let airline_entitys = [];
export default {
inject: ["rootNode"],
data() {
return {
keyword: null,
airwayData: {
current: 1,
records: [],
searchCount: true,
size: 10,
total: 0,
},
};
},
computed: {
...mapState("MMCFlightControlCenter", ["useSTLAirway"]),
},
mounted() {
this.getAirway();
......@@ -109,18 +105,46 @@ export default {
this.$emit("close");
},
async getAirway() {
let res = await Control_API.getUavRouteList({
page: this.airwayData.current,
pageSize: this.airwayData.size,
});
if (res?.code === 200) {
this.airwayData = res.data || {
current: 1,
records: [],
searchCount: true,
size: 10,
total: 0,
};
if (this.useSTLAirway) {
let res = await Control_API.getUavRouteList({
page: this.airwayData.current,
pageSize: this.airwayData.size,
});
if (res?.code === 200) {
let statusMap = {
1: "可用",
2: "待申请",
3: "待审批",
4: "通过",
5: "驳回",
};
this.airwayData = res.data || {
current: 1,
records: [],
size: 10,
total: 0,
};
this.airwayData.records?.map((item) => {
return {
...item,
status: statusMap[item.status],
};
})
}
} else {
this.rootNode.$emit("airwayPageChange", {
page: this.airwayData.current,
pageSize: this.airwayData.size,
callback: (data) => {
this.airwayData = data || {
current: 1,
records: [],
size: 10,
total: 0,
};
},
});
}
},
},
......
src/components/MMCFlightControlCenter/index.vue
......@@ -110,9 +110,15 @@ export default {
type: Number,
default: 0,
},
// 外部cesium.viewer对象
cesiumViewer: {
type: Object,
default: null
},
// 使用标准航线库
useSTLAirway: {
type: Boolean,
default: true
}
},
data(){
......@@ -146,6 +152,15 @@ export default {
this.bus.$emit('updateHangarTaskList');
},
},
useSTLAirway: {
immediate: true,
handler(newVal){
this.$store.commit("MMCFlightControlCenter/setState", {
key: "useSTLAirway",
value: newVal,
});
}
}
},
beforeCreate() {
Vue.component("SymbolIcon", SymbolIcon);
......
src/components/MMCFlightControlCenter/store/index.js
......@@ -32,6 +32,7 @@ export default {
cesium3DModels: [], //cesium的3D模型
listCollapse: false, //无人机或机库列表是否折叠
airwayEntities: [], //航线实体集合, 元素为new Cesium.EntityCollection()创建
useSTLAirway: true, //是否使用标准航线库
},
mutations: {
/**
......
vue2/src/views/fkzxIframe/demo.vue
......@@ -7,6 +7,9 @@
<el-form-item label="场景">
<el-switch v-model="scene" active-text="无人机" inactive-text="机库"></el-switch>
</el-form-item>
<el-form-item label="使用标准航线库">
<el-switch v-model="useSTLAirway" active-text="启用" inactive-text="关闭"></el-switch>
</el-form-item>
<el-form-item label="账号">
<el-input v-model="account"></el-input>
......@@ -39,6 +42,7 @@ export default {
baseUrl: "https://test.tmj.mmcuav.cn",
devMode: false,
scene: null, // 场景类型 true: 无人机 false: 机库
useSTLAirway: null, // 使用标准航线库
account: "mmctest@admin",
password: "test@Admin001",
userInfo: null,
......@@ -202,6 +206,13 @@ export default {
data: this.userInfo,
});
},
useSTLAirway() {
this.postIframe({
type: "param",
param: "useSTLAirway",
data: this.useSTLAirway,
});
},
},
async mounted() {
window.postIframe = this.postIframe;
......@@ -281,10 +292,41 @@ export default {
case "log":
this.onLog(data);
break;
case "airwayPageChange":
this.onAirwayPageChange(data);
break;
}
},
onLog({keys, value}){
console.log('日志输出', keys, value);
/**
* 航线分页更改
*/
onAirwayPageChange({ page, pageSize }) {
console.log("航线分页更改", page, pageSize);
this.postIframe({
type: "callback",
event: "airwayPageChange",
data: {
current: page, // 当前页码
records: [
{
id: 1,
name: "模拟航线" + `第${page}页`,
organizationName: "机构名",
status: "可用", //空域状态
isSafe: 1, // 安全状态1: 安全 , 0: 待确定,
labelName: "航线标签",
content: //航线数据
'{"filename":"盐城基地拍照录像","line":{"baseSpeed":6},"content":[{"uuid":"1uamoBnUN8je_2s5O7LAI","latitude":33.326034986025924,"longitude":120.2855868204341,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":2,"label":"拍照","key":"photo","checked":true,"value":1,"unit":"张"}]},{"uuid":"0V_BPu2m3u-zsCIVKRR7v","latitude":33.32572118330467,"longitude":120.28452270932941,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":2,"label":"拍照","key":"photo","checked":true,"value":1,"unit":"张"}]},{"uuid":"vXX0IkeE-z0BjMcQEG3f1","latitude":33.32483291531692,"longitude":120.28544172335158,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":3,"label":"录像","key":"video","checked":true,"value":0,"unit":"s"}]},{"uuid":"L32qDDlAiMtyKjoaySxHW","latitude":33.32576947678917,"longitude":120.28641994886797,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":3,"label":"录像","key":"video","checked":true,"value":0,"unit":"s"}]},{"uuid":"FYnNBx-i3bHkbEgt3QCWF","latitude":33.326686239734364,"longitude":120.28572577154279,"alt":100,"yawAngle":0,"pitchAngle":0,"speed":3,"actions":[{"id":3,"label":"录像","key":"video","checked":true,"value":0,"unit":"s"}]}],"baseSpeed":6,"gimbalYaw":0,"gimbalPitch":0,"alt":100}',
},
],
size: 10, // 当前页记录数
total: 20, // 总记录灵
},
});
},
onLog({ keys, value }) {
console.log("日志输出", keys, value);
},
/**
* 更换无人机
......@@ -471,6 +513,7 @@ export default {
}
},
init() {
this.useSTLAirway = false;
this.uavTaskList = [
{
name: "任务1",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论