Skip to content

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

feat: 接管功能重构

上级 62655bd7
正在显示 包含 383 行增加 和 199 行删除
iframe/src/App.vue
......@@ -130,6 +130,7 @@ export default {
if (i === arr.length - 1) {
switch (keyType) {
case "value":
console.log('event log', value);
this.postTop({
event: "log",
data: {
......
src/components/MMCFlightControlCenter/api/modules/uav_control.js
import request from "../request";
import request_uav from "../request_uav";
import store from "../../store";
class Control_API {
// 获取无人机树结构列表
......@@ -30,24 +30,24 @@ class Control_API {
data,
});
}
// 获取1小时短时天气预报
static getUavShortForEcast(params) {
return request_uav({
url: `/whapi/json/aliweather/shortforecast`,
method: "post",
params,
// 是否同意接管
static updateControlUav(data) {
return request({
url: `/admin-api/uas/device-take/updateControlUav`,
method: 'post',
data
});
}
// 获取24小时短时天气预报(详细)包含风向等等...
static getUavShortForEcast24(params) {
return request_uav({
url: `/whapi/json/aliweather/forecast24hours`,
method: "post",
params,
// 录入设备操控人
static updateCurrentOperator(params) {
return request({
url: `/admin-api/uas/device-take/updateCurrentOperator`,
method: 'post',
params
});
}
// 接管无人机
static setUavControlOn(params) {
// 申请接管无人机
static applyControlUav(params) {
return request({
url: `/admin-api/uas/device-take/controlUav`,
method: 'post',
......@@ -96,6 +96,13 @@ class Control_API {
});
}
/**
* 获取websocket连接地址
* @returns
*/
static getWebsocketUrl(){
return `/infra/ws?token=${store.state.token}`;
}
}
export default Control_API;
src/components/MMCFlightControlCenter/api/request_uav.js deleted 100644 → 0
import axios from 'axios';
// import store from "../store";
// import router from "../router";
import Vue from 'vue';
// 引用element-ui的加载和消息提示组件
// import { Loading } from "element-ui";
import { resetMessage } from './message';
import store from '../store';
let prodUrl = 'https://tmj.mmcuav.cn/flight_control';
let devUrl = 'https://test.tmj.mmcuav.cn/flight_control'
const $axios = axios.create({
// 设置超时时间
// timeout: 30000,
// 基础url，会在请求url中自动添加前置链接
// baseURL: process.env.VUE_APP_BASE_UAV_API
});
Vue.prototype.$http = axios;
const loading = null;
/**
* 请求拦截器
* 用于处理请求前添加loading、判断是否已保存token，并在每次请求头部添加token
*/
$axios.interceptors.request.use(
(config) => {
// let FLYINGSESSIONID = localStorage.getItem("FLYINGSESSIONID");
// let mmcIdentity = localStorage.getItem("mmcIdentity");
// let token = localStorage.getItem("tmj_token")
// loading = Loading.service({ text: "Loading", background: "transparent" });
// if (FLYINGSESSIONID && mmcIdentity) {
// 请求头部添加token
// config.headers["FLYINGSESSIONID"] = FLYINGSESSIONID;
// config.headers["mmc-identity"] = mmcIdentity;
// config.headers["token"] = token; //测试token用例:607753147d46ba48b1ac30a4ad3d60cd
// }
if(store.state.devMode){
config.baseURL = devUrl;
} else {
config.baseURL = prodUrl;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
/**
* 响应拦截器
* 用于处理loading状态关闭、请求成功回调、响应错误处理
*/
$axios.interceptors.response.use(
(response) => {
if (loading) {
loading.close();
}
const code = response.status;
const res = response.data;
// 请求成功返回response.data
if ((code >= 200 && code < 300) || code === 304) {
if (res.status == 621) {
resetMessage.error(res.message);
// store.commit("user/LOGIN_OUT");
// router.push("/login");
}
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
},
(error) => {
if (loading) {
loading.close();
}
console.log(error);
if (error.response) {
switch (error.response.status) {
case 401:
// 返回401 清除token信息并跳转到登陆页面
// store.commit("user/LOGIN_OUT");
// router.replace({
// path: "/login",
// query: {
// redirect: router.currentRoute.fullPath,
// },
// });
break;
case 404:
resetMessage.error('网络请求不存在');
break;
case 403:
if (store.state.isIframe) {
resetMessage.error('授权组件已被禁用，请联系管理员');
}
break;
default:
resetMessage.error(error.response.data.message);
}
} else {
// 请求超时或者网络有问题
if (error.message.includes('timeout')) {
resetMessage.error('请求超时！请检查网络是否正常');
} else {
resetMessage.error('请求失败，请检查网络是否已连接');
}
}
return Promise.reject(error);
}
);
export default $axios;
src/components/MMCFlightControlCenter/components/hangar/components/list/components/item/index.vue
......@@ -60,8 +60,12 @@
<div class="icon-box">
<span class="type fr" v-if="device.status">{{ typeName(device.status) }}</span>
<span @click="onLocation(device)" class="iconfont fr icon-dingwei1" v-hover></span>
<span class="takeover" title="接管" @click="onTakeOver(device)" v-hover>
<img src="./assets/images/jieguan_active.svg" v-if="device.currentOperator" />
<!-- 相同部门不需要接管 -->
<span class="takeover" title="接管" @click="onTakeOver(device, data.name)" v-hover>
<img
src="./assets/images/jieguan_active.svg"
v-if="device.currentOperator === userInfo.id"
/>
<img src="./assets/images/jieguan.svg" v-else />
</span>
</div>
......@@ -72,6 +76,22 @@
<Item v-for="(item, i) in data.child" :data="item" :key="`device_child_${i}`" />
</div>
</div>
<el-dialog
title="接管确认"
:visible.sync="takeOverVisible"
width="20%"
:modal-append-to-body="false"
:append-to-body="false"
:close-on-click-modal="false"
@close="takeLoading = false"
>
<span>是否请求接管 {{departmentName}} 下的 {{takeDevice.name}}</span>
<span slot="footer" class="dialog-footer">
<el-button @click="takeOverVisible = false">取 消</el-button>
<el-button @click="onForceTakeOver" type="danger" :loading="forceTakeLoading">强制接管</el-button>
<el-button type="primary" @click="onApplyTakeOver" :loading="takeLoading">确 认</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -87,14 +107,27 @@ export default {
default: () => ({}),
},
},
inject: ["rootNode"],
inject: ["rootNode", "bus"],
data() {
return {
locationEntity: null,
takeOverVisible: false,
// 接管设备信息
takeDevice: {
name: "",
},
departmentName: "",
takeLoading: false, //接管等待中
forceTakeLoading: false, //强制接管等待
};
},
computed: {
...mapState("MMCFlightControlCenter", ["listCollapse", "cesiumViewer", "userInfo"]),
...mapState("MMCFlightControlCenter", [
"listCollapse",
"cesiumViewer",
"userInfo",
"deptId",
]),
...mapState("MMCFlightControlCenter/hangar", ["showPanel", "hangar"]),
...mapState("MMCFlightControlCenter/uav", ["uav"]),
},
......@@ -103,7 +136,71 @@ export default {
this.onLocation(this.hangar);
},
},
beforeDestroy() {
this.bus.$off("uas-device-take-agree-message", this.onTakeAgree);
this.bus.$off("uas-device-take-refuse-message", this.onTakeAgree);
},
methods: {
/**
* 同意接管事件
*/
onTakeAgree({ type, content, msg }) {
console.log("onTakeAgree");
//接管消息
if (content.isAgree) {
this.$notify.success({
title: "接管消息",
message: msg,
duration: 0,
});
this.$emit("refresh");
this.takeOverVisible = false;
} else {
this.$notify.warning({
title: "接管消息",
message: msg,
duration: 0,
});
this.$message.warning("申请接管拒绝");
}
this.takeLoading = false;
this.bus.$off("uas-device-take-agree-message", this.onTakeAgree);
this.bus.$off("uas-device-take-refuse-message", this.onTakeAgree);
},
/**
* 申请接管
*/
async onApplyTakeOver() {
this.takeLoading = true;
let res = await Control_API.applyControlUav({
deviceId: this.takeDevice.id,
});
console.log("申请接管");
if (res.code === 0) {
this.bus.$on("uas-device-take-agree-message", this.onTakeAgree);
this.bus.$on("uas-device-take-refuse-message", this.onTakeAgree);
} else {
this.$message.warning("申请接管失败");
this.takeLoading = false;
}
},
/**
* 强制接管
*/
async onForceTakeOver() {
this.forceTakeLoading = true;
try {
let res = await Control_API.setUavControlOnForce({
deviceId: this.takeDevice.id,
});
if (res.code === 0) {
this.$message.success(`请开始操作${this.takeDevice.name}`);
this.takeOverVisible = false;
this.$emit("refresh");
}
} catch (e) {}
this.forceTakeLoading = false;
},
typeName(val) {
let name = "";
switch (val) {
......@@ -151,6 +248,10 @@ export default {
},
});
this.$store.dispatch("MMCFlightControlCenter/hangar/subscribe");
// 设备与用户同部门直接更改接管人
Control_API.updateCurrentOperator({
deviceId: this.hangar.id,
});
// 切换订阅的无人机, 需要先取消订阅旧无人机, 再重新订阅新无人机
this.uav &&
......@@ -250,14 +351,22 @@ export default {
/**
* 接管无人机
*/
async onTakeOver(hangar) {
async onTakeOver(hangar, departmentName) {
this.departmentName = departmentName;
if (!hangar.currentOperator) {
let res = await Control_API.setUavControlOn({
deviceId: hangar.id,
});
if (res.code === 0) {
this.$message.success(`请开始操作${hangar.name}`);
this.$emit("refresh");
// 没有接管人的情况下该设备所属部门与用户一致则直接接管
if (this.deptId === hangar.departmentId) {
let res = await Control_API.updateCurrentOperator({
deviceId: hangar.id,
});
if (res.code === 0) {
this.$message.success(`请开始操作${hangar.name}`);
this.$emit("refresh");
}
} else {
// 不一致则申请接管
this.takeDevice = hangar;
this.takeOverVisible = true;
}
} else if (
// 判断当前接管人是不是自已, 是则提示退出接管, 不是则提示是否强制接管
......@@ -279,25 +388,9 @@ export default {
}
} catch (e) {}
} else {
try {
await this.$confirm(
`${hangar.name}已被接管, 请确认是否强制接管?`,
"安全确认",
{
cancelButtonText: "取消",
confirmButtonText: "确定",
customClass: "uav_controlPane",
showClose: false,
}
);
let res = await Control_API.setUavControlOnForce({
deviceId: hangar.id,
});
if (res.code === 0) {
this.$message.success(`请开始操作${hangar.name}`);
this.$emit("refresh");
}
} catch (e) {}
// 已被接管且接管人不是自已的情况下, 需要申请接管
this.takeDevice = hangar;
this.takeOverVisible = true;
}
},
},
......
src/components/MMCFlightControlCenter/components/uavApplications/components/uavList/components/list/components/item/index.vue
......@@ -67,7 +67,7 @@
<template>
<div class="uav_version status-icon cp">
<!-- <img src="./assets/images/I.svg" />
<img src="./assets/images/I.svg" /> -->
<img src="./assets/images/I.svg" />-->
{{ device.modelName }}
</div>
</template>
......@@ -88,14 +88,33 @@
@click="onShowPanel(device)"
v-hover
></div>
<div class="takeover" title="接管" @click="onTakeOver(device)" v-hover>
<img src="./assets/images/jieguan_active.svg" v-if="device.currentOperator" />
<div class="takeover" title="接管" @click="onTakeOver(device, data.name)" v-hover>
<img
src="./assets/images/jieguan_active.svg"
v-if="device.currentOperator === userInfo.id"
/>
<img src="./assets/images/jieguan.svg" v-else />
</div>
</div>
</div>
</div>
</div>
<el-dialog
title="接管确认"
:visible.sync="takeOverVisible"
width="20%"
:modal-append-to-body="false"
:append-to-body="false"
:close-on-click-modal="false"
@close="takeLoading = false"
>
<span>是否请求接管 {{departmentName}} 下的 {{takeDevice.name}}</span>
<span slot="footer" class="dialog-footer">
<el-button @click="takeOverVisible = false">取 消</el-button>
<el-button @click="onForceTakeOver" type="danger" :loading="forceTakeLoading">强制接管</el-button>
<el-button type="primary" @click="onApplyTakeOver" :loading="takeLoading">确 认</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -106,9 +125,6 @@ import { Control_API } from "../../../../../../../../api";
export default {
name: "Item",
inject: ["rootNode", "bus"],
data() {
return {};
},
props: {
data: {
type: Object,
......@@ -119,13 +135,30 @@ export default {
default: -1,
},
},
data() {
return {
takeOverVisible: false,
// 接管设备信息
takeDevice: {
name: "",
},
departmentName: "",
takeLoading: false, //接管等待中
forceTakeLoading: false, //强制接管等待
};
},
computed: {
...mapState("MMCFlightControlCenter/uav", [
"uav",
"showPlayer",
"showPanel",
]),
...mapState("MMCFlightControlCenter", ["userInfo", "showAirwayEdit"]),
...mapState("MMCFlightControlCenter", [
"userInfo",
"showAirwayEdit",
"deptId",
]),
},
watch: {
showAirwayEdit(newVal) {
......@@ -138,25 +171,98 @@ export default {
key: "uav",
value: {
...this.uav,
showPlayer: false
showPlayer: false,
},
});
}
},
},
beforeDestroy() {
this.bus.$off("uas-device-take-agree-message", this.onTakeAgree);
this.bus.$off("uas-device-take-refuse-message", this.onTakeAgree);
},
methods: {
/**
* 接管无人机
* 同意接管事件
*/
async onTakeOver(uav) {
if (!uav.currentOperator) {
let res = await Control_API.setUavControlOn({
deviceId: uav.id,
onTakeAgree({ type, content, msg }) {
console.log("onTakeAgree");
//接管消息
if (content.isAgree) {
this.$notify.success({
title: "接管消息",
message: msg,
duration: 0,
});
this.$emit("refresh");
this.takeOverVisible = false;
} else {
this.$notify.warning({
title: "接管消息",
message: msg,
duration: 0,
});
this.$message.warning("申请接管拒绝");
}
this.takeLoading = false;
this.bus.$off("uas-device-take-agree-message", this.onTakeAgree);
this.bus.$off("uas-device-take-refuse-message", this.onTakeAgree);
},
/**
* 申请接管
*/
async onApplyTakeOver() {
this.takeLoading = true;
let res = await Control_API.applyControlUav({
deviceId: this.takeDevice.id,
});
console.log("申请接管");
if (res.code === 0) {
this.bus.$on("uas-device-take-agree-message", this.onTakeAgree);
this.bus.$on("uas-device-take-refuse-message", this.onTakeAgree);
} else {
this.$message.warning("申请接管失败");
this.takeLoading = false;
}
},
/**
* 强制接管
*/
async onForceTakeOver() {
this.forceTakeLoading = true;
try {
let res = await Control_API.setUavControlOnForce({
deviceId: this.takeDevice.id,
});
if (res.code === 0) {
this.$message.success(`请开始操作${uav.name}`);
this.$message.success(`请开始操作${this.takeDevice.name}`);
this.takeOverVisible = false;
this.$emit("refresh");
}
} catch (e) {}
this.forceTakeLoading = false;
},
/**
* 接管无人机
*/
async onTakeOver(uav, departmentName) {
this.departmentName = departmentName;
if (!uav.currentOperator) {
// 没有接管人的情况下该设备所属部门与用户一致则直接接管
if (this.deptId === uav.departmentId) {
let res = await Control_API.updateCurrentOperator({
deviceId: uav.id,
});
if (res.code === 0) {
this.$message.success(`请开始操作${uav.name}`);
this.$emit("refresh");
}
} else {
// 不一致则申请接管
this.takeDevice = uav;
this.takeOverVisible = true;
}
} else if (
// 判断当前接管人是不是自已, 是则提示退出接管, 不是则提示是否强制接管
uav.currentOperator === this.userInfo.id
......@@ -177,25 +283,9 @@ export default {
}
} catch (e) {}
} else {
try {
await this.$confirm(
`${uav.name}已被接管, 请确认是否强制接管?`,
"安全确认",
{
cancelButtonText: "取消",
confirmButtonText: "确定",
customClass: "uav_controlPane",
showClose: false,
}
);
let res = await Control_API.setUavControlOnForce({
deviceId: uav.id,
});
if (res.code === 0) {
this.$message.success(`请开始操作${uav.name}`);
this.$emit("refresh");
}
} catch (e) {}
// 已被接管且接管人不是自已的情况下, 需要申请接管
this.takeDevice = uav;
this.takeOverVisible = true;
}
},
/**
......
src/components/MMCFlightControlCenter/index.vue
......@@ -21,6 +21,7 @@ import Hangar from "./components/hangar";
import Vue from "vue";
import SymbolIcon from "../symbol-icon";
import MapSearch from "./components/mapSearch";
import { Control_API } from "./api/index";
export default {
name: "MMCFlightControlCenter",
......@@ -90,6 +91,7 @@ export default {
data() {
return {
bus: new Vue(),
ws: null,
};
},
provide() {
......@@ -115,6 +117,10 @@ export default {
value: this.userInfo.projectId,
});
this.$store.commit("MMCFlightControlCenter/setState", {
key: "deptId",
value: this.userInfo.deptId,
});
this.$store.commit("MMCFlightControlCenter/setState", {
key: "userInfo",
value: this.userInfo,
});
......@@ -209,6 +215,98 @@ export default {
});
window.$mmc_stl.viewer = this.cesiumViewer;
}
// 连接ws监听接管请求数据
let url = Control_API.getWebsocketUrl();
const socket = new WebSocket(url);
this.ws = socket;
socket.onopen = function () {
console.log("Connected to WebSocket server");
};
socket.onmessage = (event) => {
let data = JSON.parse(event.data || "{}");
const type = data.type;
const content = JSON.parse(data.content || "{}");
const msg = content.message;
switch (type) {
// 接管申请
case "uas-device-take-message":
//接管消息
this.$confirm(msg, "提示", {
confirmButtonText: "同意",
cancelButtonText: "拒绝",
type: "warning",
closeOnClickModal: false,
closeOnPressEscape: false,
showClose: false,
})
.then(async () => {
try {
let res = await Control_API.updateControlUav({
deviceId: content.deviceId,
applicantId: content.applicantId,
isAgree: 1,
});
if (res.code == 0) {
this.$message.success("已同意接管");
} else {
this.$message.warning("操作失败");
}
} catch (e) {}
})
.catch(async () => {
await Control_API.updateControlUav({
deviceId: content.deviceId,
applicantId: content.applicantId,
isAgree: 2,
});
this.$message.success("已拒绝接管");
});
break;
// 接管申请同意
case "uas-device-take-agree-message":
console.log('同意接管')
this.bus.$emit("uas-device-take-agree-message", {
type,
content,
msg,
});
break;
// 接管申请拒绝
case "uas-device-take-refuse-message":
this.bus.$emit("uas-device-take-refuse-message", {
type,
content,
msg,
});
break;
// 退出接管消息
case "uas-device-take-quit-message":
this.$notify.info({
title: "接管消息",
message: msg,
duration: 0,
});
break;
// 被强制接管
case "uas-device-force-take-message":
this.$notify.warning({
title: "接管消息",
message: msg,
duration: 0,
});
break;
}
};
},
beforeDestroy() {
this.ws.close();
},
methods: {},
};
......@@ -251,11 +349,20 @@ export default {
color: #fff !important;
}
.el-dialog__body {
button:nth-child(2) {
box-shadow: inset 0 0 5px #00ffff;
background: rgba(4, 227, 227, 0.1);
opacity: 0.8;
.el-dialog {
background: #222222;
border: none;
border-radius: 1px;
.el-dialog__header {
background: #3c3c3c;
.el-dialog__title {
color: #fff;
}
}
.el-dialog__body {
color: #fff;
}
}
......
src/components/MMCFlightControlCenter/store/hangar.js
......@@ -335,8 +335,9 @@ const actions = {
* @param { Number } data.id 无人机id
*/
async isTakeOver({ state }, data) {
let device = data || state.hangar;
let res = await Control_API.getDeviceDetail({
id: data?.id || state.hangar.id,
id: device.id,
});
if (
res.data.currentOperator &&
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论