Skip to content

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

feat: 增加航线分页事件

上级 ca9f1e65
正在显示 包含 163 行增加 和 103 行删除
iframe/src/App.vue
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
:devMode="devMode" :devMode="devMode"
:uavTaskList="uavTaskList" :uavTaskList="uavTaskList"
:hangarTaskList="hangarTaskList" :hangarTaskList="hangarTaskList"
:airwayList="airwayList"
:scene="scene ? 0 : 1" :scene="scene ? 0 : 1"
:useSTLAirway="useSTLAirway"
@uavChange="dispatchEvent('uavChange', $event)" @uavChange="dispatchEvent('uavChange', $event)"
@uavStartTask="dispatchEvent('uavStartTask', $event)" @uavStartTask="dispatchEvent('uavStartTask', $event)"
@uavAddTask="dispatchEvent('uavAddTask', $event)" @uavAddTask="dispatchEvent('uavAddTask', $event)"
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
@hangarStartTask="dispatchEvent('hangarStartTask', $event)" @hangarStartTask="dispatchEvent('hangarStartTask', $event)"
@hangarAddTask="dispatchEvent('hangarAddTask', $event)" @hangarAddTask="dispatchEvent('hangarAddTask', $event)"
@hangarDelTask="dispatchEvent('hangarDelTask', $event)" @hangarDelTask="dispatchEvent('hangarDelTask', $event)"
@airwayPageChange="dispatchEvent('airwayPageChange', $event)"
></MMCFlightControlCenter> ></MMCFlightControlCenter>
</template> </template>
...@@ -30,6 +31,7 @@ export default { ...@@ -30,6 +31,7 @@ export default {
account: "mmctest@admin", account: "mmctest@admin",
password: "test@Admin001", password: "test@Admin001",
userInfo: null, userInfo: null,
useSTLAirway: true, // 使用标准航线
uavTaskList: [ uavTaskList: [
{ {
name: "任务1", name: "任务1",
...@@ -127,6 +129,7 @@ export default { ...@@ -127,6 +129,7 @@ export default {
], ],
hangarAddTaskCB: null, //机库创建任务回调 hangarAddTaskCB: null, //机库创建任务回调
uavAddTaskCB: null, //机库创建任务回调 uavAddTaskCB: null, //机库创建任务回调
airwayPageChangeCB: null, //航线翻页时回调
}; };
}, },
computed: {}, computed: {},
...@@ -175,7 +178,7 @@ export default { ...@@ -175,7 +178,7 @@ export default {
"message", "message",
(event) => { (event) => {
if (event.data.module === "MMCFlightControlCenter") { if (event.data.module === "MMCFlightControlCenter") {
console.log('iframe收到数据', event.data); console.log("iframe收到数据", event.data);
this.paramHandler(event.data); this.paramHandler(event.data);
this.callbackHandler(event.data); this.callbackHandler(event.data);
this.logHandler(event.data); this.logHandler(event.data);
...@@ -195,36 +198,36 @@ export default { ...@@ -195,36 +198,36 @@ export default {
/** /**
* 回调处理 * 回调处理
*/ */
callbackHandler({ type, event, data}) { callbackHandler({ type, event, data }) {
if (type === 'callback'){ if (type === "callback") {
let cb = this[event + 'CB']; let cb = this[event + "CB"];
if(cb){ if (cb) {
cb(data); cb(data);
this[event + 'CB'] = null; this[event + "CB"] = null;
} }
} }
}, },
/** /**
* 日志处理 * 日志处理
*/ */
logHandler({ type, keys, keyType }){ logHandler({ type, keys, keyType }) {
if(type === 'log'){ if (type === "log") {
let arr = keys.split('.'); let arr = keys.split(".");
let value = window; let value = window;
arr.forEach((key, i) => { arr.forEach((key, i) => {
value = value[key] value = value[key];
if(i === arr.length - 1){ if (i === arr.length - 1) {
switch(keyType){ switch (keyType) {
case 'value': case "value":
this.postTop({ this.postTop({
event: 'log', event: "log",
data: { data: {
keys, keys,
value value,
} },
}) });
break; break;
case 'method': case "method":
value(); value();
break; break;
} }
...@@ -237,21 +240,29 @@ export default { ...@@ -237,21 +240,29 @@ export default {
* @param {string} event 事件名 * @param {string} event 事件名
* @param {object} data 事件数据 * @param {object} data 事件数据
*/ */
dispatchEvent(event, data){ dispatchEvent(event, data) {
if(event === 'hangarAddTask'){
// 回调函数不能通过postMessage传递 // 回调函数不能通过postMessage传递
switch (event) {
case "hangarAddTask":
this.hangarAddTaskCB = data.callback; this.hangarAddTaskCB = data.callback;
delete data.callback; delete data.callback;
} break;
if(event === 'uavAddTask'){
case "uavAddTask":
this.uavAddTaskCB = data.callback; this.uavAddTaskCB = data.callback;
delete data.callback; delete data.callback;
break;
case "airwayPageChange":
this.airwayPageChangeCB = data.callback;
delete data.callback;
break;
} }
this.postTop({ this.postTop({
type: 'event', type: "event",
event: 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 @@ ...@@ -69,25 +69,21 @@
import { mapState } from "vuex"; import { mapState } from "vuex";
import { Control_API } from "../../../../../../../../../../../../api"; import { Control_API } from "../../../../../../../../../../../../api";
let point_index = null;
let isEditting = false;
let airline_entitys = [];
export default { export default {
inject: ["rootNode"],
data() { data() {
return { return {
keyword: null, keyword: null,
airwayData: { airwayData: {
current: 1, current: 1,
records: [], records: [],
searchCount: true,
size: 10, size: 10,
total: 0, total: 0,
}, },
}; };
}, },
computed: { computed: {
// ...mapState("MMCFlightControlCenter", ["airwayList"]), ...mapState("MMCFlightControlCenter", ["useSTLAirway"]),
}, },
mounted() { mounted() {
this.getAirway(); this.getAirway();
...@@ -110,18 +106,46 @@ export default { ...@@ -110,18 +106,46 @@ export default {
this.$emit("close"); this.$emit("close");
}, },
async getAirway() { async getAirway() {
if (this.useSTLAirway) {
let res = await Control_API.getUavRouteList({ let res = await Control_API.getUavRouteList({
page: this.airwayData.current, page: this.airwayData.current,
pageSize: this.airwayData.size, pageSize: this.airwayData.size,
}); });
if (res?.code === 200) { if (res?.code === 200) {
let statusMap = {
1: "可用",
2: "待申请",
3: "待审批",
4: "通过",
5: "驳回",
};
this.airwayData = res.data || { this.airwayData = res.data || {
current: 1, current: 1,
records: [], records: [],
searchCount: true,
size: 10, size: 10,
total: 0, 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 @@ ...@@ -28,15 +28,14 @@
<div class="td">{{ item.organizationName || "暂无" }}</div> <div class="td">{{ item.organizationName || "暂无" }}</div>
<!-- 空域状态 --> <!-- 空域状态 -->
<div class="td"> <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 == 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 == 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 == 4" class="status" style="color: #2bfdf1">通过</div>
<div v-else-if="item.status == 5" class="status" style="color: #fb4a2d">驳回</div> <div v-else-if="item.status == 5" class="status" style="color: #fb4a2d">驳回</div>
<div v-else>暂无</div> <div v-else>暂无</div>-->
</div> </div>
<!-- 模式 -->
<!-- <div class="td">{{ item.distance || "暂无" }}</div> -->
<!-- 安全状态 --> <!-- 安全状态 -->
<div <div
class="td" class="td"
...@@ -69,24 +68,21 @@ ...@@ -69,24 +68,21 @@
import { mapState } from "vuex"; import { mapState } from "vuex";
import { Control_API } from "../../../../../../../../../../api"; import { Control_API } from "../../../../../../../../../../api";
let point_index = null;
let isEditting = false;
let airline_entitys = [];
export default { export default {
inject: ["rootNode"],
data() { data() {
return { return {
keyword: null, keyword: null,
airwayData: { airwayData: {
current: 1, current: 1,
records: [], records: [],
searchCount: true,
size: 10, size: 10,
total: 0, total: 0,
}, },
}; };
}, },
computed: { computed: {
...mapState("MMCFlightControlCenter", ["useSTLAirway"]),
}, },
mounted() { mounted() {
this.getAirway(); this.getAirway();
...@@ -109,18 +105,46 @@ export default { ...@@ -109,18 +105,46 @@ export default {
this.$emit("close"); this.$emit("close");
}, },
async getAirway() { async getAirway() {
if (this.useSTLAirway) {
let res = await Control_API.getUavRouteList({ let res = await Control_API.getUavRouteList({
page: this.airwayData.current, page: this.airwayData.current,
pageSize: this.airwayData.size, pageSize: this.airwayData.size,
}); });
if (res?.code === 200) { if (res?.code === 200) {
let statusMap = {
1: "可用",
2: "待申请",
3: "待审批",
4: "通过",
5: "驳回",
};
this.airwayData = res.data || { this.airwayData = res.data || {
current: 1, current: 1,
records: [], records: [],
searchCount: true,
size: 10, size: 10,
total: 0, 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 { ...@@ -110,9 +110,15 @@ export default {
type: Number, type: Number,
default: 0, default: 0,
}, },
// 外部cesium.viewer对象
cesiumViewer: { cesiumViewer: {
type: Object, type: Object,
default: null default: null
},
// 使用标准航线库
useSTLAirway: {
type: Boolean,
default: true
} }
}, },
data(){ data(){
...@@ -146,6 +152,15 @@ export default { ...@@ -146,6 +152,15 @@ export default {
this.bus.$emit('updateHangarTaskList'); this.bus.$emit('updateHangarTaskList');
}, },
}, },
useSTLAirway: {
immediate: true,
handler(newVal){
this.$store.commit("MMCFlightControlCenter/setState", {
key: "useSTLAirway",
value: newVal,
});
}
}
}, },
beforeCreate() { beforeCreate() {
Vue.component("SymbolIcon", SymbolIcon); Vue.component("SymbolIcon", SymbolIcon);
......
src/components/MMCFlightControlCenter/store/index.js
...@@ -32,6 +32,7 @@ export default { ...@@ -32,6 +32,7 @@ export default {
cesium3DModels: [], //cesium的3D模型 cesium3DModels: [], //cesium的3D模型
listCollapse: false, //无人机或机库列表是否折叠 listCollapse: false, //无人机或机库列表是否折叠
airwayEntities: [], //航线实体集合, 元素为new Cesium.EntityCollection()创建 airwayEntities: [], //航线实体集合, 元素为new Cesium.EntityCollection()创建
useSTLAirway: true, //是否使用标准航线库
}, },
mutations: { mutations: {
/** /**
......
vue2/src/views/fkzxIframe/demo.vue
...@@ -7,6 +7,9 @@ ...@@ -7,6 +7,9 @@
<el-form-item label="场景"> <el-form-item label="场景">
<el-switch v-model="scene" active-text="无人机" inactive-text="机库"></el-switch> <el-switch v-model="scene" active-text="无人机" inactive-text="机库"></el-switch>
</el-form-item> </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-form-item label="账号">
<el-input v-model="account"></el-input> <el-input v-model="account"></el-input>
...@@ -39,6 +42,7 @@ export default { ...@@ -39,6 +42,7 @@ export default {
baseUrl: "https://test.tmj.mmcuav.cn", baseUrl: "https://test.tmj.mmcuav.cn",
devMode: false, devMode: false,
scene: null, // 场景类型 true: 无人机 false: 机库 scene: null, // 场景类型 true: 无人机 false: 机库
useSTLAirway: null, // 使用标准航线库
account: "mmctest@admin", account: "mmctest@admin",
password: "test@Admin001", password: "test@Admin001",
userInfo: null, userInfo: null,
...@@ -202,6 +206,13 @@ export default { ...@@ -202,6 +206,13 @@ export default {
data: this.userInfo, data: this.userInfo,
}); });
}, },
useSTLAirway() {
this.postIframe({
type: "param",
param: "useSTLAirway",
data: this.useSTLAirway,
});
},
}, },
async mounted() { async mounted() {
window.postIframe = this.postIframe; window.postIframe = this.postIframe;
...@@ -281,10 +292,41 @@ export default { ...@@ -281,10 +292,41 @@ export default {
case "log": case "log":
this.onLog(data); this.onLog(data);
break; 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 { ...@@ -471,6 +513,7 @@ export default {
} }
}, },
init() { init() {
this.useSTLAirway = false;
this.uavTaskList = [ this.uavTaskList = [
{ {
name: "任务1", name: "任务1",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论