Browse Source

1、修改监控区域定义监控弹窗尺寸为1280*720

2、添加ais信息轨迹显隐
master
Fuyuu 12 months ago
parent
commit
2c885ab604
  1. 39
      src/components/earthMap/AISInfoWindow.vue
  2. 11
      src/utils/earthMap/shipDraw.ts
  3. 254
      src/views/earthMap/edit/EarthComp.vue
  4. 12
      src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
  5. 11
      src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
  6. BIN
      src/views/military/modules/ai/aiMonitorArea/selectCom/assets/hide.png

39
src/components/earthMap/AISInfoWindow.vue

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-05 14:18:33
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-08 17:41:07
* @LastEditTime: 2024-01-09 11:14:45
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@ -102,7 +102,7 @@
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref, onMounted, nextTick } from 'vue';
import { defineComponent, getCurrentInstance, ref, watch } from 'vue';
import Window from '@/components/earthMap/components/Window.vue';
import { useEarthMapStore } from '/@/store/modules/earthMap';
// store
@ -122,13 +122,27 @@
components: {
Window,
},
setup(props, context) {
setup() {
const { proxy }: any = getCurrentInstance();
//
const checked = ref(false);
//
let shipDataList: any = [];
// store
shipDataList = store.shipDataList;
let foundData = store.shipDataList.filter((item) => item.guid === proxy.ship_guid);
// 线id
let track_guid = foundData ? foundData[0].track_guid : null;
// 线
let trackData = window.$earth.getObject(track_guid);
//
checked.value = trackData.show;
// guid
watch(
() => proxy.ship_guid,
(newVal, oldVal) => {
console.log(newVal);
},{immediate : true}
);
//
function cancel() {
proxy.$parent.AISInfoWindowShow = false;
@ -136,18 +150,9 @@
//
function changeTrack(e) {
checked.value = e;
//
let shipData = window.$earth.getObject(proxy.ship_guid);
//
if (e) {
console.log(shipData);
} else {
console.log(shipData);
}
// 使show
trackData.show = e;
}
onMounted(() => {
console.log(proxy.ship_guid);
});
return {
checked,

11
src/utils/earthMap/shipDraw.ts

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-03 17:42:49
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-08 15:05:38
* @LastEditTime: 2024-01-09 10:35:50
* @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts
* @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -29,7 +29,7 @@ const drawShips = function (shipItem) {
id: shipItem.trackId,
url: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf',
position: [toRadians(shipItem.longitude), toRadians(shipItem.latitude), 0],
rotation: [toRadians(shipItem.course), 0, 0],
rotation: [(Math.PI / 180) * (shipItem.course + 90), 0, 0],
};
// 绘制船只
let shipModel = addShipModel(`${shipItem.trackId}号船`, options);
@ -52,27 +52,24 @@ export const drawAllShips = function (message) {
let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId);
if (existingShip) {
// 添加新的轨迹点
existingShip.trackList.push([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]);
window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]);
// 获取场景中的船只信息
let shipData = window.$earth.getObject(existingShip.guid);
// 更新位置和航向
shipData.xbsjPosition = [toRadians(messageData.longitude), toRadians(messageData.latitude), 0];
// 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (messageData.course + 90), 0, 0];
// 绘制船只轨迹
addShipTrack(existingShip.trackList);
} else {
// 添加新的船只
shipDataList.push({
name: `${messageData.trackId}号船只`, // 名称
trackId: messageData.trackId, // 船只id
guid: drawShips(messageData).xbsjGuid, // 船只模型id
track_guid: addShipTrack([[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]]).xbsjGuid, // 轨迹线guid,用于轨迹显隐
azimuth: messageData.azimuth, // 方位角
course: messageData.course, // 航向
latitude: messageData.latitude, // 纬度
longitude: messageData.longitude, // 经度
trackList: [[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]], // 轨迹列表
});
// 更新store
store.shipDataList = shipDataList;

254
src/views/earthMap/edit/EarthComp.vue

@ -84,7 +84,7 @@
></AddModelWin>
<AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
<!-- AIS信息显示窗口 -->
<AISInfoWindow v-if="AISInfoWindowShow"></AISInfoWindow>
<AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid" :ship_aisData="ship_aisData"></AISInfoWindow>
</div>
</template>
@ -117,15 +117,14 @@
import hidePng from '@/assets/earthMap/hide.png';
import alarmImg from '@/assets/earthMap/alarm.gif';
import VideoFusionWin from './components/VideoFusionWin.vue';
import { useMessage } from "/@/hooks/web/useMessage";
import { CircleScan } from '@/utils/earthMap/radarEntity'
import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'
import { useMessage } from '/@/hooks/web/useMessage';
import { CircleScan } from '@/utils/earthMap/radarEntity';
import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth';
import circleDot2 from '@/assets/earthMap/circleDot2.png';
import circleDot1 from '@/assets/earthMap/circleDot1.png';
import circleDot3 from '@/assets/earthMap/circleDot3.png';
const { createMessage } = useMessage();
function setClassEl(setClassEl1, setClassEl2, checked) {
if (checked) {
@ -143,7 +142,6 @@
setClassEl2.className = 'xbsj-checkbox xbsj-checkbox-checked';
}
function setClassNoChecked(setClassEl1, setClassEl2) {
// node.checkStatus = ''
// node.disabled = 'disabled'
@ -206,72 +204,72 @@
AISInfoWindow,
},
props: {
//
all: {
type: Boolean,
default: false
},
//
earthHeaderShow: {
type: Boolean,
default: false
},
//
sceneTreeShow:{
type: Boolean,
default: false
},
//
statusBarShow:{
type: Boolean,
default: true
},
//
mainBar:{
type: Boolean,
default: false
},
//
listenMouseHandlerOpen:{
type: Boolean,
default: false
},
//mitt
listenMittHandlerOpen:{
type: Boolean,
default: false
},
//线
createBBHLineOpen:{
type: Boolean,
default: false
},
//
getLineInfoShow:{
type: Boolean,
default: false
},
//
getCameraInfoShow:{
type: Boolean,
default: false
},
//
getLabelInfoShow:{
type: Boolean,
default: false
},
//
drawInitShow:{
type: Boolean,
default: false
},
//
keyControlInitShow:{
type: Boolean,
default: false
//
all: {
type: Boolean,
default: false,
},
//
earthHeaderShow: {
type: Boolean,
default: false,
},
//
sceneTreeShow: {
type: Boolean,
default: false,
},
//
statusBarShow: {
type: Boolean,
default: true,
},
//
mainBar: {
type: Boolean,
default: false,
},
//
listenMouseHandlerOpen: {
type: Boolean,
default: false,
},
//mitt
listenMittHandlerOpen: {
type: Boolean,
default: false,
},
//线
createBBHLineOpen: {
type: Boolean,
default: false,
},
//
getLineInfoShow: {
type: Boolean,
default: false,
},
//
getCameraInfoShow: {
type: Boolean,
default: false,
},
//
getLabelInfoShow: {
type: Boolean,
default: false,
},
//
drawInitShow: {
type: Boolean,
default: false,
},
//
keyControlInitShow: {
type: Boolean,
default: false,
},
},
},
})
export default class EarthComp extends Vue {
/**
@ -417,20 +415,23 @@
monitorPosition: any = [];
//props props
PropsEarthHeaderShow = this.earthHeaderShow
PropsSceneTreeShow = this.sceneTreeShow
PropsListenMouseHandlerOpen = this.listenMouseHandlerOpen
PropsListenMittHandlerOpen = this.listenMittHandlerOpen
PropsCreateBBHLineOpen = this.createBBHLineOpen
PropsGetLineInfoShow = this.getLineInfoShow
PropsGetCameraInfoShow = this.getCameraInfoShow
PropsGetLabelInfoShow = this.getLabelInfoShow
PropsDrawInitShow = this.drawInitShow
PropsKeyControlInitShow = this.keyControlInitShow
PropsEarthHeaderShow = this.earthHeaderShow;
PropsSceneTreeShow = this.sceneTreeShow;
PropsListenMouseHandlerOpen = this.listenMouseHandlerOpen;
PropsListenMittHandlerOpen = this.listenMittHandlerOpen;
PropsCreateBBHLineOpen = this.createBBHLineOpen;
PropsGetLineInfoShow = this.getLineInfoShow;
PropsGetCameraInfoShow = this.getCameraInfoShow;
PropsGetLabelInfoShow = this.getLabelInfoShow;
PropsDrawInitShow = this.drawInitShow;
PropsKeyControlInitShow = this.keyControlInitShow;
///////////////////////////////////////////////////////////////////////////
//AIS
AISInfoWindowShow = false;
// guid
ship_guid = '123456';
// ais
ship_aisData = {};
mounted() {
let that = this;
@ -480,7 +481,7 @@
});
}
}
//
roamPathSet() {
//
@ -552,19 +553,19 @@
let that = this;
//使storeXbsjEarthUI
this.store.xbsjEarthUI = XbsjEarthUI;
//props
if(this.all){
this.PropsEarthHeaderShow = true
this.PropsSceneTreeShow = true
this.PropsListenMouseHandlerOpen = true
this.PropsListenMittHandlerOpen = true
this.PropsCreateBBHLineOpen = true
this.PropsGetLineInfoShow = true
this.PropsGetCameraInfoShow = true
this.PropsGetLabelInfoShow = true
this.PropsDrawInitShow = true
this.PropsKeyControlInitShow = true
}
//props
if (this.all) {
this.PropsEarthHeaderShow = true;
this.PropsSceneTreeShow = true;
this.PropsListenMouseHandlerOpen = true;
this.PropsListenMittHandlerOpen = true;
this.PropsCreateBBHLineOpen = true;
this.PropsGetLineInfoShow = true;
this.PropsGetCameraInfoShow = true;
this.PropsGetLabelInfoShow = true;
this.PropsDrawInitShow = true;
this.PropsKeyControlInitShow = true;
}
XbsjEarthUI.create('earthContainer').then(async (earthUI: any) => {
//
window.$uia = earthUI;
@ -670,23 +671,20 @@
this.cameraPositionChange(this);
});
//线
// this.createRealTimeObj(earthUI)
//线
// this.createRealTimeObj(earthUI)
//
if (this.PropsListenMouseHandlerOpen)
this.listenMouseHandler(earthUI);
//
if (this.PropsListenMouseHandlerOpen) this.listenMouseHandler(earthUI);
//mitt
if (this.PropsListenMittHandlerOpen)
this.listenMittHandler(earthUI);
//mitt
if (this.PropsListenMittHandlerOpen) this.listenMittHandler(earthUI);
//
await this.fly();
//
await this.fly();
//线
if (this.PropsCreateBBHLineOpen)
await this.createBBHLine(earthUI);
//线
if (this.PropsCreateBBHLineOpen) await this.createBBHLine(earthUI);
//
this.toolbarShow = true;
@ -794,7 +792,7 @@
/* 使用async/await 处理异步方法顺序执行。成功的操作放到try里,失败的放在catch里 */
async createBBHLine(earthUI = null) {
console.log('MyScene', this.userStore.userInfo?.sceneId);
let labelItems: any = undefined
let labelItems: any = undefined;
let type = 1; //**
let models: any = {
@ -819,26 +817,21 @@
//
// console.log("");
if (this.PropsGetLineInfoShow)
await this.getLineInfo(models, type);
if (this.PropsGetLineInfoShow) await this.getLineInfo(models, type);
//
// console.log("");
if (this.PropsGetCameraInfoShow)
await this.getCameraInfo(models, type);
if (this.PropsGetCameraInfoShow) await this.getCameraInfo(models, type);
//
// console.log("");
if (this.PropsGetLabelInfoShow)
labelItems = await this.getLabelInfo(models, type);
if (this.PropsGetLabelInfoShow) labelItems = await this.getLabelInfo(models, type);
//
if (this.PropsDrawInitShow)
await drawInit();
//
if (this.PropsDrawInitShow) await drawInit();
//
if (this.PropsKeyControlInitShow)
await keyControlInit();
if (this.PropsKeyControlInitShow) await keyControlInit();
// dom
// console.log("dom");
@ -3258,7 +3251,7 @@
createMessage.success('克隆成功');
} else {
newSn.parent.children.splice(index, 1);
createMessage.error('克隆成功:'+ res.message);
createMessage.error('克隆成功:' + res.message);
}
});
})
@ -3309,7 +3302,7 @@
createMessage.success('克隆成功');
} else {
newSn.parent.children.splice(index, 1);
createMessage.error('克隆失败'+ res.message);
createMessage.error('克隆失败' + res.message);
}
})
.catch((err) => {
@ -4209,8 +4202,8 @@
//
beforeDestroy() {
// vue
console.log("vue程序销毁");
console.log('vue程序销毁');
this._earth = this._earth && this._earth.destroy();
this.websocketclose();
//
@ -4219,11 +4212,10 @@
clearInterval(this.alarmTrackClearTimer);
}
//
destroy(){
// vue
console.log("vue程序销毁",this._earth);
destroy() {
// vue
console.log('vue程序销毁', this._earth);
// this.websocketclose();
//
clearInterval(this.timer);
@ -4231,8 +4223,8 @@
clearInterval(this.alarmTrackClearTimer);
// window.$uia.tools.sceneTree.destroy()
// this._earth = this._earth && this._earth.destroy();
//store.xbsjEarthUI window.XbsjEarthUI
window.XbsjEarthUI = this.store.xbsjEarthUI
//store.xbsjEarthUI window.XbsjEarthUI
window.XbsjEarthUI = this.store.xbsjEarthUI;
this._earth = undefined;
}
}

12
src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue

@ -1,3 +1,11 @@
<!--
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2023-12-22 15:41:28
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-09 11:34:20
* @FilePath: \dt-admin-pc-v2\src\views\military\modules\ai\aiMonitorArea\checkCom\CheckCom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
查看监控
@ -5,7 +13,7 @@
功能概述rtsp视频流播放
-->
<template>
<a-modal :visible="visible" :title="title" width="1080px" @cancel="handleCancel" destroyOnClose>
<a-modal :visible="visible" :title="title" width="1280px" @cancel="handleCancel" destroyOnClose style="top: 90px !important">
<a-row>
<div class="mpegPlayer" ref="mpegPlayer"></div>
</a-row>
@ -72,7 +80,7 @@
<style lang="less" scoped>
.mpegPlayer {
width: 100%;
height: 580px;
height: 720px;
background: #000;
}
</style>

11
src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue

@ -11,9 +11,10 @@
:forceRender="true"
:visible="visible"
:title="title"
width="1080px"
width="1280px"
@cancel="handleCancel"
destroyOnClose
style="top: 40px !important"
>
<a-row class="video_area">
<canvas ref="canvas" class="container"></canvas>
@ -346,20 +347,20 @@
<style lang="less" scoped>
.video_area {
width: 100%;
height: 580px;
height: 720px;
margin: 0 auto;
position: relative;
background: #000;
.container {
width: 1080px;
height: 580px;
width: 1280px;
height: 100%;
position: absolute;
z-index: 9999;
left: 0;
top: 0;
}
.mpegPlayer {
width: 100%;
width: 1280px;
height: 100%;
background: #000;
}

BIN
src/views/military/modules/ai/aiMonitorArea/selectCom/assets/hide.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Loading…
Cancel
Save