Skip to content

M
mmc-stl-vue2
提交 43958000 作者: “kai”
操作

refactor(MMCFlightControlCenter): 

- webscoket 推送的设备数据 关联项目id
上级 8d19e538
正在显示 包含 105 行增加 和 94 行删除
src/components/MMCFlightControlCenter/index.vue
...@@ -91,10 +91,10 @@ export default { ...@@ -91,10 +91,10 @@ export default {
}, },
data() { data() {
return { return {
time:null, time: null,
bus: new Vue(), bus: new Vue(),
ws: null, ws: null,
uavWs: null uavWs: null,
}; };
}, },
provide() { provide() {
...@@ -189,11 +189,9 @@ export default { ...@@ -189,11 +189,9 @@ export default {
}); });
}, },
}, },
}, },
beforeCreate() { beforeCreate() {
clearInterval(this.time) clearInterval(this.time);
crashMonitor({ crashMonitor({
alert: this.$alert, alert: this.$alert,
}); });
...@@ -222,23 +220,20 @@ export default { ...@@ -222,23 +220,20 @@ export default {
window.$mmc_stl.viewer = this.cesiumViewer; window.$mmc_stl.viewer = this.cesiumViewer;
} }
// 连接ws监听接管请求数据 // 连接ws监听接管请求数据
let url = this.url.wsUrl let url = this.url.wsUrl;
let token = this.$store.state.MMCFlightControlCenter.token let token = this.$store.state.MMCFlightControlCenter.token;
const socket = new WebSocket(`${url}/infra/ws?token=${token}`); const socket = new WebSocket(`${url}/infra/ws?token=${token}`);
const uavSocket = new WebSocket(`${url}/uas/ws?token=${token}`); const uavSocket = new WebSocket(`${url}/uas/ws?token=${token}`);
this.ws = socket; this.ws = socket;
this.uavWs = uavSocket; this.uavWs = uavSocket;
socket.onopen = function () { socket.onopen = function () {};
};
socket.onmessage = (event) => { socket.onmessage = (event) => {
let data = JSON.parse(event.data || "{}"); let data = JSON.parse(event.data || "{}");
const type = data.type; const type = data.type;
const content = JSON.parse(data.content || "{}"); const content = JSON.parse(data.content || "{}");
const msg = content.message; const msg = content.message;
switch (type) { switch (type) {
// 接管申请 // 接管申请
case "uas-device-take-message": case "uas-device-take-message":
//接管消息 //接管消息
...@@ -262,7 +257,7 @@ export default { ...@@ -262,7 +257,7 @@ export default {
} else { } else {
this.$message.warning("操作失败"); this.$message.warning("操作失败");
} }
} catch (e) { } } catch (e) {}
}) })
.catch(async () => { .catch(async () => {
await Control_API.updateControlUav({ await Control_API.updateControlUav({
...@@ -280,7 +275,7 @@ export default { ...@@ -280,7 +275,7 @@ export default {
// 接管申请同意 // 接管申请同意
case "uas-device-take-agree-message": case "uas-device-take-agree-message":
console.log('同意接管') console.log("同意接管");
break; break;
// 接管申请拒绝 // 接管申请拒绝
...@@ -298,7 +293,7 @@ export default { ...@@ -298,7 +293,7 @@ export default {
title: "接管消息", title: "接管消息",
message: msg, message: msg,
duration: 30000, duration: 30000,
offset: 40 offset: 40,
}); });
break; break;
...@@ -308,35 +303,37 @@ export default { ...@@ -308,35 +303,37 @@ export default {
title: "接管消息", title: "接管消息",
message: msg, message: msg,
duration: 30000, duration: 30000,
offset: 40 offset: 40,
}); });
break; break;
} }
}; };
uavSocket.onopen = () => { uavSocket.onopen = () => {
let user = JSON.parse(localStorage.getItem('tmj')) let user = JSON.parse(localStorage.getItem("tmj"));
let { projectId } = this.$store.state.MMCFlightControlCenter; let { projectId } = this.$store.state.MMCFlightControlCenter;
if(user){ if (user) {
clearInterval(this.time) clearInterval(this.time);
this.time= setInterval(() => { this.time = setInterval(() => {
const scene = this.getQueryParam('scene'); const scene = this.getQueryParam("scene");
uavSocket.send(JSON.stringify({ uavSocket.send(
type: "uas-device-getTree-message", JSON.stringify({
content:JSON.stringify( { type: "uas-device-getTree-message",
text:JSON.stringify({ content: JSON.stringify({
deviceType:scene, text: JSON.stringify({
projectId:projectId, deviceType: scene,
serchKey: this.getCurrentSearchKey(), projectId: projectId,
}), serchKey: this.getCurrentSearchKey(),
toUserId:user.user.userId, }),
},) toUserId: user.user.userId,
})); }),
}, 6000); })
);
}, 6000);
} }
}; };
let { projectId } = this.$store.state.MMCFlightControlCenter;
uavSocket.onmessage = (event) => { uavSocket.onmessage = (event) => {
let data = JSON.parse(event.data || "{}"); let data = JSON.parse(event.data || "{}");
const type = data.type; const type = data.type;
...@@ -347,19 +344,20 @@ export default { ...@@ -347,19 +344,20 @@ export default {
break; break;
// 刷新无人机列表 // 刷新无人机列表
case "uas-device-getTree-message": case "uas-device-getTree-message":
let res = JSON.parse(data.content) let res = JSON.parse(data.content);
const scene = this.getQueryParam('scene'); if (projectId == res.projectId) {
// 根据scene值决定更新哪个组件的数据 const scene = this.getQueryParam("scene");
if (scene == 1) { // 根据scene值决定更新哪个组件的数据
// scene为1时，更新uavList组件的数据 if (scene == 1) {
this.bus.$emit("update-uav-list", res.text); // scene为1时，更新uavList组件的数据
} else if (scene == 2) { this.bus.$emit("update-uav-list", res.text);
// scene为2时，更新hangar list组件的数据 } else if (scene == 2) {
this.bus.$emit("update-hangar-list", res.text); // scene为2时，更新hangar list组件的数据
} this.bus.$emit("update-hangar-list", res.text);
}
break;
break;
}
} }
}; };
}, },
...@@ -370,52 +368,64 @@ export default { ...@@ -370,52 +368,64 @@ export default {
methods: { methods: {
// 获取当前搜索关键字 // 获取当前搜索关键字
getCurrentSearchKey() { getCurrentSearchKey() {
const scene = this.getQueryParam('scene'); const scene = this.getQueryParam("scene");
if (scene == 1) { if (scene == 1) {
// 无人机场景，获取 uavList 组件的搜索内容 // 无人机场景，获取 uavList 组件的搜索内容
const uavListComponent = this.$children.find(child => child.$options.name === 'UavApplications'); const uavListComponent = this.$children.find(
(child) => child.$options.name === "UavApplications"
);
if (uavListComponent) { if (uavListComponent) {
const uavList = uavListComponent.$children.find(child => child.$options.name === 'UavList' || child.uavSearchContent !== undefined); const uavList = uavListComponent.$children.find(
return uavList ? uavList.uavSearchContent || '' : ''; (child) =>
child.$options.name === "UavList" ||
child.uavSearchContent !== undefined
);
return uavList ? uavList.uavSearchContent || "" : "";
} }
} else if (scene == 2) { } else if (scene == 2) {
// 机库场景，获取 hangar 组件的搜索内容 // 机库场景，获取 hangar 组件的搜索内容
const hangarComponent = this.$children.find(child => child.$options.name === 'Hangar'); const hangarComponent = this.$children.find(
(child) => child.$options.name === "Hangar"
);
if (hangarComponent) { if (hangarComponent) {
const hangarList = hangarComponent.$children.find(child => child.$options.name === 'List' || child.searchContent !== undefined); const hangarList = hangarComponent.$children.find(
return hangarList ? hangarList.searchContent || '' : ''; (child) =>
child.$options.name === "List" ||
child.searchContent !== undefined
);
return hangarList ? hangarList.searchContent || "" : "";
} }
} }
return ''; return "";
}, },
// 处理搜索变化事件 // 处理搜索变化事件
getQueryParam(paramName) { getQueryParam(paramName) {
// 获取当前页面的完整 URL // 获取当前页面的完整 URL
const url = window.location.href; const url = window.location.href;
// 检查 URL 中是否包含 hash 部分 // 检查 URL 中是否包含 hash 部分
const hashIndex = url.indexOf('#'); const hashIndex = url.indexOf("#");
if (hashIndex !== -1) { if (hashIndex !== -1) {
// 如果有 hash 部分，提取 hash 部分 // 如果有 hash 部分，提取 hash 部分
const hash = url.substring(hashIndex + 1); // 去掉 '#' 符号 const hash = url.substring(hashIndex + 1); // 去掉 '#' 符号
const hashParams = new URLSearchParams(hash.split('?')[1]); // 提取 hash 中的查询参数部分 const hashParams = new URLSearchParams(hash.split("?")[1]); // 提取 hash 中的查询参数部分
const value = hashParams.get(paramName); const value = hashParams.get(paramName);
if (value !== null) { if (value !== null) {
return value; // 如果在 hash 中找到参数，直接返回 return value; // 如果在 hash 中找到参数，直接返回
} }
} }
// 如果在 hash 中没有找到，检查普通的查询参数 // 如果在 hash 中没有找到，检查普通的查询参数
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
return searchParams.get(paramName); // 返回普通查询参数中的值 return searchParams.get(paramName); // 返回普通查询参数中的值
}, },
reset() { reset() {
let cesiumEl = document.querySelector(".cesium-viewer"); let cesiumEl = document.querySelector(".cesium-viewer");
// 判断cesium的父元素是否是layer-container来确定当前是否已经切换, 未切换就退出 // 判断cesium的父元素是否是layer-container来确定当前是否已经切换, 未切换就退出
if (cesiumEl.parentElement.id === 'layer-container') { if (cesiumEl.parentElement.id === "layer-container") {
return; return;
} }
let cesiumParentEl = document.querySelector("#layer-container"); let cesiumParentEl = document.querySelector("#layer-container");
...@@ -496,7 +506,6 @@ export default { ...@@ -496,7 +506,6 @@ export default {
} }
* { * {
/* 滚动条整体样式 */ /* 滚动条整体样式 */
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
...@@ -571,12 +580,14 @@ export default { ...@@ -571,12 +580,14 @@ export default {
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
background-image: -webkit-linear-gradient(right, background-image: -webkit-linear-gradient(
#e3aa77, right,
#f5cda9, #e3aa77,
#f9ecd3, #f5cda9,
#fcdbb1, #f9ecd3,
#edb07a); #fcdbb1,
#edb07a
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
letter-spacing: 0; letter-spacing: 0;
...@@ -676,7 +687,6 @@ export default { ...@@ -676,7 +687,6 @@ export default {
} }
.el-input-number { .el-input-number {
.el-input-number__decrease, .el-input-number__decrease,
.el-input-number__increase { .el-input-number__increase {
bottom: 1px; bottom: 1px;
...@@ -717,10 +727,12 @@ export default { ...@@ -717,10 +727,12 @@ export default {
.option.hover, .option.hover,
.option:hover { .option:hover {
background-image: linear-gradient(90deg, background-image: linear-gradient(
rgba(44, 135, 176, 0.7) 0%, 90deg,
rgba(26, 100, 139, 0.37) 51%, rgba(44, 135, 176, 0.7) 0%,
rgba(7, 61, 98, 0.7) 100%); rgba(26, 100, 139, 0.37) 51%,
rgba(7, 61, 98, 0.7) 100%
);
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-size: 12px; font-size: 12px;
color: #00f5ff; color: #00f5ff;
...@@ -916,4 +928,4 @@ export default { ...@@ -916,4 +928,4 @@ export default {
display: none; display: none;
} }
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论