|
@@ -204,6 +204,7 @@
|
|
|
icon="el-icon-view"
|
|
|
@click="handlePlayback(scope.row)"
|
|
|
v-hasPermi="['uavps:parameter:run']"
|
|
|
+ :disabled="scope.row.status == '1'"
|
|
|
>回放</el-button
|
|
|
>
|
|
|
<el-button
|
|
@@ -259,7 +260,7 @@
|
|
|
v-model="form.multiTarget"
|
|
|
@change="typeChange"
|
|
|
placeholder="请选择"
|
|
|
- :disabled="form.multiTarget == '1'"
|
|
|
+ :disabled="form.multiTarget == '1' || title == '修改任务数据'"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in formationTypeList"
|
|
@@ -454,6 +455,7 @@
|
|
|
:key="index"
|
|
|
@click="editFormationInfo(item)"
|
|
|
>
|
|
|
+ <!-- @click="editFormationInfo(item)" -->
|
|
|
<div style="cursor: pointer">
|
|
|
<div>
|
|
|
<span>编号: </span
|
|
@@ -979,14 +981,17 @@ export default {
|
|
|
nowlatitude: null,
|
|
|
targetDataR: [],
|
|
|
targetDataN: [],
|
|
|
+ platformData: [],
|
|
|
// 真实路径的集合
|
|
|
pathGraphicsList: [],
|
|
|
pathGraphicsPointList: [],
|
|
|
isUpdateView: false, // 是否开启实现追踪,在回放时开启
|
|
|
percentage: 50,
|
|
|
// 多久更新一次轨迹
|
|
|
- updatePathFlag: 125,
|
|
|
+ updatePathFlag: 75,
|
|
|
cycleCount: 0, // 循环计数
|
|
|
+ updatePlatformPathFlag: 75,
|
|
|
+ platformCycleCount: 0,
|
|
|
showConfigVisible: false, //显示配置dialog
|
|
|
showConfigList: [], // 选择要显示的值
|
|
|
configList: ["经度", "纬度", "海拔", "东向速度", "北向速度", "天向速度"], // 显示的值
|
|
@@ -1009,6 +1014,11 @@ export default {
|
|
|
targetUavCircleNum: [],
|
|
|
targetUavCircleNumN: [],
|
|
|
drawerOpen: false,
|
|
|
+ platformSprite: null, // 平台无人机
|
|
|
+ // 平台无人机显示的数据
|
|
|
+ platformInfo: {},
|
|
|
+ platformPathData: {}, //平台无人机位置
|
|
|
+ platformGraphics: null, //平台无人机轨迹
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -1128,6 +1138,7 @@ export default {
|
|
|
sprite.scale.set(0.04);
|
|
|
sprite.x = x;
|
|
|
sprite.y = y;
|
|
|
+ sprite.id = item.number;
|
|
|
|
|
|
this.formationAirPiXiApp.stage.addChild(sprite);
|
|
|
});
|
|
@@ -1261,15 +1272,6 @@ export default {
|
|
|
transFormation() {
|
|
|
// debugger;
|
|
|
let msg = "TRANSFORMATION:" + this.parameterId;
|
|
|
- // let msg =
|
|
|
- // "TRANSFORMATION:" +
|
|
|
- // this.parameterId +
|
|
|
- // "," +
|
|
|
- // this.curLongitude +
|
|
|
- // "," +
|
|
|
- // this.curLatitude +
|
|
|
- // "," +
|
|
|
- // this.curAltitude;
|
|
|
console.info("transFormation", msg);
|
|
|
this.webSocket.send(msg);
|
|
|
// this.pixiApp.stage.removeChildren();
|
|
@@ -1279,7 +1281,35 @@ export default {
|
|
|
if (this.webSocket) {
|
|
|
this.webSocket.close();
|
|
|
}
|
|
|
- this.showTrajectory = false;
|
|
|
+ if (this.pixiApp) {
|
|
|
+ // 移除并销毁所有子对象
|
|
|
+ const removedChildren = this.pixiApp.stage.removeChildren(
|
|
|
+ 0,
|
|
|
+ this.pixiApp.stage.children.length
|
|
|
+ );
|
|
|
+ removedChildren.forEach((child) => {
|
|
|
+ child.destroy({
|
|
|
+ children: true,
|
|
|
+ texture: false,
|
|
|
+ baseTexture: false,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.pixiApp.stage.removeChildren();
|
|
|
+
|
|
|
+ this.pixiApp.renderer.clear();
|
|
|
+ this.pixiApp.destroy(true);
|
|
|
+ this.pixiApp = null;
|
|
|
+ }
|
|
|
+ if (this.platformGraphics && this.platformGraphics.length) {
|
|
|
+ if (this.platformGraphics.parent) {
|
|
|
+ this.platformGraphics.parent.removeChild(this.platformGraphics);
|
|
|
+ }
|
|
|
+ this.platformGraphics.clear();
|
|
|
+ this.platformGraphics.destroy(true);
|
|
|
+ this.platformGraphics = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.clearAllAry();
|
|
|
},
|
|
|
initTrajectory() {
|
|
|
this.clearAllAry();
|
|
@@ -1292,6 +1322,7 @@ export default {
|
|
|
// type:1平台无人机、2真实目标、3噪声目标
|
|
|
switch (data.type) {
|
|
|
case "1": //平台无人机
|
|
|
+ this.showPlatformAir(data);
|
|
|
break;
|
|
|
case "2": //真实目标 R真实数据
|
|
|
this.showTargetRAircraft(data, "R");
|
|
@@ -1331,6 +1362,42 @@ export default {
|
|
|
this.enableViewControl();
|
|
|
},
|
|
|
|
|
|
+ showPlatformAir(platformData) {
|
|
|
+ const data = platformData.platformAircraft;
|
|
|
+ if (this.platformData.length == 0) {
|
|
|
+ const platformTexture = new PIXI.Texture.from(
|
|
|
+ "../../textures/bunny.png"
|
|
|
+ );
|
|
|
+ this.platformSprite = new PIXI.Sprite(platformTexture);
|
|
|
+ this.platformSprite.anchor.set(0.5, 0.5);
|
|
|
+ this.platformSprite.scale.set(1);
|
|
|
+ this.platformSprite.x = data.coordinateX;
|
|
|
+ this.platformSprite.y = data.coordinateY;
|
|
|
+ this.platformData.push(this.platformSprite);
|
|
|
+ this.pixiApp.stage.addChild(this.platformSprite);
|
|
|
+ // 创建路径
|
|
|
+ this.platformGraphics = new PIXI.Graphics();
|
|
|
+ this.platformGraphics.lineStyle(1, 0x00ee00, 1);
|
|
|
+ const point = { x: this.platformSprite.x, y: this.platformSprite.y };
|
|
|
+ this.platformPathData = point;
|
|
|
+ this.pixiApp.stage.addChild(this.platformGraphics);
|
|
|
+ this.platformInfo = data;
|
|
|
+ } else {
|
|
|
+ this.platformSprite.x = data.coordinateX;
|
|
|
+ this.platformSprite.y = data.coordinateY;
|
|
|
+ this.platformSprite.rotation = Math.atan2(
|
|
|
+ data.northSpeed,
|
|
|
+ data.eastSpeed
|
|
|
+ );
|
|
|
+ if (this.platformCycleCount % this.updatePlatformPathFlag == 0) {
|
|
|
+ // 更新路径绘制
|
|
|
+ this.updatePlatformPath(this.platformSprite.x, this.platformSprite.y);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.platformCycleCount++;
|
|
|
+ },
|
|
|
+
|
|
|
// 无人机集群 真实数据
|
|
|
showTargetRAircraft(data) {
|
|
|
const targetData = data.targetAircraft[0];
|
|
@@ -1346,10 +1413,11 @@ export default {
|
|
|
group.id = targetData.aircrafts[i].aircraftNumber;
|
|
|
group.buttonMode = true; // 鼠标悬停时显示手型
|
|
|
group.interactive = true;
|
|
|
+ group.typeName = "zhenshi";
|
|
|
// 创建无人机
|
|
|
const dude = new PIXI.Sprite(targetTexture);
|
|
|
dude.anchor.set(0.5, 0.5);
|
|
|
- dude.scale.set(0.04);
|
|
|
+ dude.scale.set(0.01);
|
|
|
|
|
|
dude.x = targetData.aircrafts[i].coordinateX;
|
|
|
dude.y = targetData.aircrafts[i].coordinateY;
|
|
@@ -1359,8 +1427,8 @@ export default {
|
|
|
group.addChild(dude);
|
|
|
|
|
|
// 创建圆圈 圆圈相对于飞机的位置
|
|
|
- const cx = dude.x - 25;
|
|
|
- const cy = dude.y - 17;
|
|
|
+ const cx = dude.x - 10;
|
|
|
+ const cy = dude.y - 6;
|
|
|
|
|
|
//编号-圆圈
|
|
|
const circle = new PIXI.Graphics();
|
|
@@ -1369,6 +1437,7 @@ export default {
|
|
|
circle.endFill();
|
|
|
circle.x = cx;
|
|
|
circle.y = cy;
|
|
|
+ circle.scale.set(0.4);
|
|
|
this.targetUavCircle.push(circle);
|
|
|
group.addChild(circle);
|
|
|
|
|
@@ -1383,6 +1452,7 @@ export default {
|
|
|
// 计算文字位置以便在圆形内居中
|
|
|
text.x = cx;
|
|
|
text.y = cy;
|
|
|
+ text.scale.set(0.4);
|
|
|
this.targetUavCircleNum.push(text);
|
|
|
group.addChild(text);
|
|
|
// 绑定鼠标事件,飞机隐藏
|
|
@@ -1423,8 +1493,8 @@ export default {
|
|
|
const northSpeed = data.targetAircraft[0].aircrafts[i].northSpeed;
|
|
|
targetUav.rotation = Math.atan2(northSpeed, eastSpeed);
|
|
|
|
|
|
- const cx = targetUav.x - 25;
|
|
|
- const cy = targetUav.y - 17;
|
|
|
+ const cx = targetUav.x - 10;
|
|
|
+ const cy = targetUav.y - 6;
|
|
|
|
|
|
const circle = this.targetUavCircle[i];
|
|
|
circle.x = cx;
|
|
@@ -1507,18 +1577,18 @@ export default {
|
|
|
// 创建无人机
|
|
|
const dude = new PIXI.Sprite(targetTexture);
|
|
|
dude.anchor.set(0.5, 0.5);
|
|
|
- // dude.scale.set(0.04);
|
|
|
+ dude.scale.set(0.4);
|
|
|
|
|
|
dude.x = targetData.aircrafts[i].coordinateX;
|
|
|
dude.y = targetData.aircrafts[i].coordinateY;
|
|
|
|
|
|
- dude.id = targetData.aircrafts[i].aircraftNumber; // 分配唯一编号
|
|
|
+ dude.id = targetData.aircrafts[i].aircraftNumber;
|
|
|
this.targetDataN.push(dude);
|
|
|
group.addChild(dude);
|
|
|
|
|
|
// 创建圆圈 圆圈相对于飞机的位置
|
|
|
- const cx = dude.x - 25;
|
|
|
- const cy = dude.y - 17;
|
|
|
+ const cx = dude.x - 10;
|
|
|
+ const cy = dude.y - 6;
|
|
|
|
|
|
//编号-圆圈
|
|
|
const circle = new PIXI.Graphics();
|
|
@@ -1527,6 +1597,7 @@ export default {
|
|
|
circle.endFill();
|
|
|
circle.x = cx;
|
|
|
circle.y = cy;
|
|
|
+ circle.scale.set(0.4);
|
|
|
this.targetUavCircleN.push(circle);
|
|
|
group.addChild(circle);
|
|
|
|
|
@@ -1541,6 +1612,7 @@ export default {
|
|
|
// 计算文字位置以便在圆形内居中
|
|
|
text.x = cx;
|
|
|
text.y = cy;
|
|
|
+ text.scale.set(0.4);
|
|
|
this.targetUavCircleNumN.push(text);
|
|
|
group.addChild(text);
|
|
|
this.pixiApp.stage.addChild(group);
|
|
@@ -1556,8 +1628,8 @@ export default {
|
|
|
const northSpeed = data.targetAircraft[0].aircrafts[i].northSpeed;
|
|
|
targetUav.rotation = Math.atan2(northSpeed, eastSpeed);
|
|
|
|
|
|
- const cx = targetUav.x - 25;
|
|
|
- const cy = targetUav.y - 17;
|
|
|
+ const cx = targetUav.x - 10;
|
|
|
+ const cy = targetUav.y - 6;
|
|
|
|
|
|
const circle = this.targetUavCircleN[i];
|
|
|
circle.x = cx;
|
|
@@ -1582,8 +1654,10 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
group.forEach((item) => {
|
|
|
- const msg = "DISAPPEAR:" + item.id;
|
|
|
- this.webSocket.send(msg);
|
|
|
+ if (item.typeName) {
|
|
|
+ const msg = "DISAPPEAR:" + item.id;
|
|
|
+ this.webSocket.send(msg);
|
|
|
+ }
|
|
|
item.visible = false;
|
|
|
});
|
|
|
this.hideList.push(id);
|
|
@@ -1615,8 +1689,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
// 已经隐藏了,要显示
|
|
|
- const msg = "SHOW:" + item.id;
|
|
|
- this.webSocket.send(msg);
|
|
|
+ if (item.typeName) {
|
|
|
+ const msg = "SHOW:" + item.id;
|
|
|
+ this.webSocket.send(msg);
|
|
|
+ }
|
|
|
+
|
|
|
item.visible = true;
|
|
|
let index = this.hideList.indexOf(id);
|
|
|
if (index > -1) {
|
|
@@ -1627,8 +1704,10 @@ export default {
|
|
|
} else {
|
|
|
// 隐藏
|
|
|
group.forEach((item) => {
|
|
|
- const msg = "DISAPPEAR:" + item.id;
|
|
|
- this.webSocket.send(msg);
|
|
|
+ if (item.typeName) {
|
|
|
+ const msg = "DISAPPEAR:" + item.id;
|
|
|
+ this.webSocket.send(msg);
|
|
|
+ }
|
|
|
item.visible = false;
|
|
|
});
|
|
|
this.hideList.push(id);
|
|
@@ -1683,10 +1762,11 @@ export default {
|
|
|
this.pixiApp.stage.scale.y *= zoomFactor;
|
|
|
});
|
|
|
},
|
|
|
- // 更新飞行路径
|
|
|
+ // 更新无人机飞行路径
|
|
|
updatePath(index, x, y) {
|
|
|
const lastPointX = this.pathGraphicsPointList[index].x;
|
|
|
const lastPointY = this.pathGraphicsPointList[index].y;
|
|
|
+ console.log();
|
|
|
this.pathGraphicsList[index].moveTo(lastPointX, lastPointY);
|
|
|
this.pathGraphicsList[index].lineTo(x, y);
|
|
|
this.pathGraphicsPointList[index].x = x;
|
|
@@ -1703,6 +1783,15 @@ export default {
|
|
|
// this.lastPosition = nextPos;
|
|
|
// }
|
|
|
},
|
|
|
+ // 更新平台无人机飞行路径
|
|
|
+ updatePlatformPath(x, y) {
|
|
|
+ const lastPointX = this.platformPathData.x;
|
|
|
+ const lastPointY = this.platformPathData.y;
|
|
|
+ this.platformGraphics.moveTo(lastPointX, lastPointY);
|
|
|
+ this.platformGraphics.lineTo(x, y);
|
|
|
+ this.platformPathData.x = x;
|
|
|
+ this.platformPathData.y = y;
|
|
|
+ },
|
|
|
|
|
|
// 确定编队信息
|
|
|
canvasInfoSubmit() {
|
|
@@ -1833,7 +1922,23 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
// TODO 需要找到页面上的精灵,获取其id根据经纬度计算位置
|
|
|
- // TODO 需要更改位置
|
|
|
+ let spriteIndex;
|
|
|
+ this.formationAirPiXiApp.stage.children.forEach((child, index) => {
|
|
|
+ // 检查 child 是否是 Container 类型
|
|
|
+ if (child instanceof PIXI.Sprite) {
|
|
|
+ if (child.id == this.formationInfoForm.number) {
|
|
|
+ spriteIndex = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const sprite = this.formationAirPiXiApp.stage.children[spriteIndex];
|
|
|
+ const { x, y } = this.calculateXY(
|
|
|
+ this.formationInfoForm.longitude,
|
|
|
+ this.formationInfoForm.latitude
|
|
|
+ );
|
|
|
+ sprite.x = x;
|
|
|
+ sprite.y = y;
|
|
|
+ // TODO 像素计算中是pixiCanvas
|
|
|
this.drawerOpen = false;
|
|
|
} else {
|
|
|
let index = this.formationInfoList.findIndex(
|
|
@@ -1955,6 +2060,10 @@ export default {
|
|
|
lengthKm: null,
|
|
|
heightKm: null,
|
|
|
};
|
|
|
+ this.platformSprite = null;
|
|
|
+ this.platformGraphics = null;
|
|
|
+ this.platformPathData = {};
|
|
|
+ this.platformInfo = {};
|
|
|
},
|
|
|
},
|
|
|
};
|