Skip to content

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

fix: 

1. 机库与无人机任务默认打开
2. 无人机播放器与面板展开逻辑修正
3. 修正机库无飞机时没展开面板
4. 修正机库列表收纳后展开按钮消失
上级 d510a1ff
流水线 #9291 已失败 于阶段
正在显示 包含 192 行增加 和 196 行删除
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/index.vue
......@@ -82,7 +82,7 @@ export default {
},
data() {
return {
openTask: false, //打开任务
openTask: true, //打开任务
openAIList: false, //打开AI列表
openTraffic: false, //打开交通指引
openFace: false, //打开人脸识别
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlRight/components/logger/index.vue
......@@ -78,7 +78,7 @@ export default {
return {
jian: require("./assets/images/jiantou.png"),
dakai: false, //变长变短
productType: false,
productType: false, // 产品类型
};
},
props: {
......@@ -100,6 +100,7 @@ export default {
},
watch: {
hangarData: function (val) {
// 产品类型 明达康机库：305 ，百胜将机库II(入云龙II换电式)：304 ，百胜将机库II(入云龙II充电式)：303 ，百胜将机库II翻盖式：302 ，百胜将机库I：301
if (val?.productType == 302 || val?.productType == 305) {
this.productType = false; //翻盖
} else {
......@@ -299,7 +300,7 @@ export default {
margin-top: 14px;
.default {
font-family: PingFangSC-Regular;
font-size: 14px;
font-size: 12px;
color: #afdcff;
letter-spacing: 1px;
font-weight: 400;
......@@ -313,10 +314,9 @@ export default {
border: 1px solid #afdcff;
margin-left: 5px;
margin-right: 3px;
margin-top: 2px;
}
.line {
width: 62px;
width: 50px;
height: 0.5px;
display: inline-block;
border-top: 0.2px dashed #afdcff;
......
src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/index.vue
<template>
<div>
<MMCDataTransferPanel class="data-panel" :device="uav" :uav-data="uavRealTimeData"></MMCDataTransferPanel>
<MMCDataTransferPanel class="data-panel" :device="uav || {}" :uav-data="uavRealTimeData"></MMCDataTransferPanel>
<ControlLeft></ControlLeft>
<ControlBottom isHangar></ControlBottom>
<ControlRight></ControlRight>
......
src/components/MMCFlightControlCenter/components/hangar/components/list/index.vue
......@@ -22,12 +22,14 @@
</div>
</div>
</div>
<!-- 未进入机库或者进入机库后列表是展开的情况下，才显示收纳按钮 -->
<img
@click="listCollapse = !listCollapse;"
style="transform: rotate(180deg)"
src="./assets/images/hs.png"
class="nsetLeftBox_btn"
/>
v-if="!hangar || (hangar && !listCollapse)"
@click="listCollapse = !listCollapse;"
style="transform: rotate(180deg)"
src="./assets/images/hs.png"
class="nsetLeftBox_btn"
/>
</div>
<!-- </Dialog> -->
</template>
......@@ -49,6 +51,7 @@ export default {
computed: {
...mapState("MMCFlightControlCenter", ["listCollapse"]),
...mapState("MMCFlightControlCenter/hangar", ["hangar"]),
count() {
let countObj = {
onlineCount: 0,
......@@ -64,16 +67,16 @@ export default {
},
// 收起列表按钮
listCollapse: {
get(){
get() {
return this.$store.state.MMCFlightControlCenter.listCollapse;
},
set(val){
this.$store.commit('MMCFlightControlCenter/setState', {
key: 'listCollapse',
value: val
})
}
}
set(val) {
this.$store.commit("MMCFlightControlCenter/setState", {
key: "listCollapse",
value: val,
});
},
},
},
watch: {},
......@@ -109,7 +112,7 @@ export default {
overflow: visible;
&.collapse {
display: none;
transform: translateX(-100%);
}
.nsetLeftBox_btn {
......
src/components/MMCFlightControlCenter/components/hangar/index.vue
<template>
<div>
<List></List>
<ControlPanel v-if="hangar && uav && showPanel"></ControlPanel>
<ControlPanel v-if="hangar && showPanel"></ControlPanel>
</div>
</template>
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlLeft/index.vue
......@@ -59,7 +59,7 @@ export default {
},
data() {
return {
openTask: false, //打开任务
openTask: true, //打开任务
openAIList: false, //打开AI列表
openTraffic: false, //打开交通指引
openFace: false, //打开人脸识别
......
src/components/MMCFlightControlCenter/components/uavApplications/components/uavList/components/list/components/item/index.vue
......@@ -25,7 +25,13 @@
</div>
</div>
<div class="uav-item-child-box" :class="{ collapse: data.collapse }">
<Item v-for="child in data.childs" :key="child.id" :data="child" :level="level+1" @refresh="$emit('refresh')" />
<Item
v-for="child in data.childs"
:key="child.id"
:data="child"
:level="level+1"
@refresh="$emit('refresh')"
/>
<div
class="device-item-box"
:class="{ online: device.online == 1 }"
......@@ -64,7 +70,7 @@
class="iconfont icon-luxiang_xianxing"
:class="{ active: uav && device.id === uav.id && uav.showPlayer }"
title="视频"
@click="showPlayer(device)"
@click="onShowPlayer(device)"
></div>
<div
......@@ -72,7 +78,7 @@
class="iconfont icon-kongzhi_xianxing"
:class="{ active: uav && device.id === uav.id && uav.showPanel }"
title="控制面板"
@click="showPanel(device)"
@click="onShowPanel(device)"
></div>
<div
class="jieg"
......@@ -108,14 +114,14 @@ export default {
},
},
computed: {
...mapState("MMCFlightControlCenter/uav", ["uav"]),
...mapState("MMCFlightControlCenter", ["userInfo"]),
},
methods: {
...mapActions("MMCFlightControlCenter/uav", [
...mapState("MMCFlightControlCenter/uav", [
"uav",
"showPlayer",
"showPanel",
]),
...mapState("MMCFlightControlCenter", ["userInfo"]),
},
methods: {
/**
* 接管无人机
*/
......@@ -128,7 +134,7 @@ export default {
});
if (res.code === 200) {
this.$message.success(`请开始操作${uav.name}`);
this.$emit('refresh');
this.$emit("refresh");
}
} else if (
// 判断当前接管人是不是自已, 是则提示退出接管, 不是则提示是否强制接管
......@@ -144,10 +150,9 @@ export default {
let res = await Control_API.setUavControlOff(uav.id);
if (res.code === 200) {
this.$message.success(`已退出接管${uav.name}`);
this.$emit('refresh');
this.$emit("refresh");
}
} catch (e) {
}
} catch (e) {}
} else {
try {
await this.$confirm(
......@@ -167,10 +172,158 @@ export default {
});
if (res.code === 200) {
this.$message.success(`请开始操作${uav.name}`);
this.$emit('refresh');
this.$emit("refresh");
}
} catch (e) {
} catch (e) {}
}
},
/**
* 显示面板
*/
onShowPanel(item) {
debugger
// 选中与取消选中
if (this.uav?.hardId === item.hardId) {
// 已打开播放器的情况下只需要展示数据面板
if (this.showPlayer && !this.showPanel) {
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPanel",
value: true,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "uav",
value: {
...this.uav,
showPanel: true,
},
});
} else {
// 未打开播放器的情况下关闭数据面板并取消订阅
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPanel",
value: false,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "uav",
value: {
...this.uav,
showPanel: false,
},
});
this.$store.dispatch("MMCFlightControlCenter/uav/unsubscribe");
}
} else {
// 打开新的无人机面板
if (this.uav) {
this.$store.dispatch("MMCFlightControlCenter/uav/unsubscribe");
}
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPanel",
value: true,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPlayer",
value: true,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "uav",
value: {
...item,
showPanel: true,
showPlayer: true
},
});
this.$store.dispatch("MMCFlightControlCenter/uav/subscribe");
}
if (this.showPanel) {
this.$store.commit("MMCFlightControlCenter/setState", {
key: "listCollapse",
value: true,
});
}
},
/**
* 显示播放器
*/
async onShowPlayer(item) {
// 选中与取消选中
if (this.uav?.hardId === item.hardId) {
if (this.showPlayer) {
// 已显示播放器则关掉
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPlayer",
value: false,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "uav",
value: {
...this.uav,
showPlayer: false,
showPanel: this.showPanel,
},
});
// 关闭播放器时若未展开面板，需要取消订阅
if(!this.showPanel){
this.$store.dispatch("MMCFlightControlCenter/uav/unsubscribe");
}
} else {
// 在未打开播放器的情况下，有uav信息，到此步时肯定已经展开了面板，判断是否有流媒体信息, 并显示播放器
if (!this.uav.streamConfiguration) {
let res = await Control_API.uavDetail({
id: item.id,
});
item.streamConfiguration = res.data.streamConfiguration;
}
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "uav",
value: item,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPlayer",
value: true,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "uav",
value: {
...item,
showPlayer: true,
showPanel: this.showPanel,
},
});
}
} else {
// 由于hardId不同，到此步时可能是第一次点击，或者是面板已展开
if(this.showPanel){
// 面板已展开禁止切换视频
return;
}
if(this.uav){
// 切换无人机视频前需要取消订阅前一台无人机消息
this.$store.dispatch("MMCFlightControlCenter/uav/unsubscribe");
}
// 获取该无人机视频流信息
let res = await Control_API.uavDetail({
id: item.id,
});
item.streamConfiguration = res.data.streamConfiguration;
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "showPlayer",
value: true,
});
this.$store.commit("MMCFlightControlCenter/uav/setState", {
key: "uav",
value: {
...item,
showPlayer: true,
showPanel: this.showPanel,
},
});
this.$store.dispatch("MMCFlightControlCenter/uav/subscribe");
}
},
},
......
src/components/MMCFlightControlCenter/store/hangar.js
......@@ -139,40 +139,6 @@ const actions = {
});
},
/**
* 显示面板
* @param {*} param0
* @param {Object} data 机库信息
*/
async showPanel({ state, commit, dispatch }, data) {
if (state.hangar?.id !== data.id) {
// 切换订阅的机库, 需要先取消订阅旧机库, 再重新订阅新机库
state.hangar && dispatch("unsubscribe");
commit("setState", {
key: "showPanel",
value: true,
});
commit("setState", {
key: "hangar",
value: {
...data,
showPanel: true,
},
});
dispatch("subscribe");
} else {
// 关闭机库订阅
dispatch("unsubscribe");
commit("setState", {
key: "showPanel",
value: false,
});
commit("setState", {
key: "hangar",
value: null,
});
}
},
/**
* 出库
* @param {*} param0
* @param {*} data
......
src/components/MMCFlightControlCenter/store/uav.js
......@@ -1171,132 +1171,6 @@ const actions = {
});
}
},
/**
* 显示播放器
* @param {*} param0
* @param {Object} data 无人机信息
*/
async showPlayer({ state, commit }, data) {
// 选中与取消选中
if (state.uav?.hardId === data.hardId) {
if (state.showPlayer) {
// 已显示播放器则关掉
commit("setState", {
key: "showPlayer",
value: false,
});
commit("setState", {
key: "uav",
value: {
...state.uav,
showPlayer: false,
showPanel: state.showPanel,
},
});
} else {
// 已展开面板的情况下, 判断是否有流媒体信息, 并显示播放器
if (!state.uav.streamConfiguration) {
let res = await Control_API.uavDetail({
id: data.id,
});
data.streamConfiguration = res.data.streamConfiguration;
}
commit("setState", {
key: "uav",
value: data,
});
commit("setState", {
key: "showPlayer",
value: true,
});
commit("setState", {
key: "uav",
value: {
...data,
showPlayer: true,
showPanel: state.showPanel,
},
});
}
} else {
// 获取该无人机视频流信息
let res = await Control_API.uavDetail({
id: data.id,
});
data.streamConfiguration = res.data.streamConfiguration;
commit("setState", {
key: "showPlayer",
value: true,
});
commit("setState", {
key: "uav",
value: {
...data,
showPlayer: true,
showPanel: state.showPanel,
},
});
}
},
/**
* 显示面板
* @param {*} param0
* @param {Object} data 无人机信息
*/
async showPanel({ state, commit, dispatch }, data) {
// 选中与取消选中
if (state.uav?.hardId === data.hardId) {
// 已打开播放器的情况下只需要展示数据面板并订阅数据
if (state.showPlayer && !state.showPanel) {
commit("setState", {
key: "showPanel",
value: true,
});
commit("setState", {
key: "uav",
value: {
...state.uav,
showPanel: true,
},
});
dispatch("subscribe");
} else {
// 未打开播放器的情况下关闭数据面板并取消订阅
commit("setState", {
key: "showPanel",
value: false,
});
commit("setState", {
key: "uav",
value: {
...state.uav,
showPanel: false,
},
});
dispatch("unsubscribe");
}
} else {
if (state.uav) {
dispatch("unsubscribe");
}
commit("setState", {
key: "showPanel",
value: true,
});
dispatch("showPlayer", data);
commit("setState", {
key: "uav",
value: {
...data,
showPanel: true,
},
});
dispatch("subscribe");
}
},
/**
* 判断是否已接管
* @param { Number } data.id 无人机id
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论