Browse Source

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

2、添加ais信息轨迹显隐
master
Fuyuu 9 months ago
parent
commit
2c885ab604
  1. 39
      src/components/earthMap/AISInfoWindow.vue
  2. 11
      src/utils/earthMap/shipDraw.ts
  3. 144
      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 * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-05 14:18:33 * @Date: 2024-01-05 14:18:33
* @LastEditors: Fuyuu 1805498209@qq.com * @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 * @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 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
@ -102,7 +102,7 @@
</template> </template>
<script lang="ts"> <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 Window from '@/components/earthMap/components/Window.vue';
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
// store // store
@ -122,13 +122,27 @@
components: { components: {
Window, Window,
}, },
setup(props, context) { setup() {
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
//
const checked = ref(false); const checked = ref(false);
//
let shipDataList: any = [];
// store // 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() { function cancel() {
proxy.$parent.AISInfoWindowShow = false; proxy.$parent.AISInfoWindowShow = false;
@ -136,18 +150,9 @@
// //
function changeTrack(e) { function changeTrack(e) {
checked.value = e; checked.value = e;
// // 使show
let shipData = window.$earth.getObject(proxy.ship_guid); trackData.show = e;
//
if (e) {
console.log(shipData);
} else {
console.log(shipData);
} }
}
onMounted(() => {
console.log(proxy.ship_guid);
});
return { return {
checked, checked,

11
src/utils/earthMap/shipDraw.ts

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-03 17:42:49 * @Date: 2024-01-03 17:42:49
* @LastEditors: Fuyuu 1805498209@qq.com * @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 * @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 * @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, id: shipItem.trackId,
url: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf', url: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf',
position: [toRadians(shipItem.longitude), toRadians(shipItem.latitude), 0], 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); let shipModel = addShipModel(`${shipItem.trackId}号船`, options);
@ -52,27 +52,24 @@ export const drawAllShips = function (message) {
let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId); let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId);
if (existingShip) { 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); let shipData = window.$earth.getObject(existingShip.guid);
// 更新位置和航向 // 更新位置和航向
shipData.xbsjPosition = [toRadians(messageData.longitude), toRadians(messageData.latitude), 0]; shipData.xbsjPosition = [toRadians(messageData.longitude), toRadians(messageData.latitude), 0];
// 航向需要后续调整。。。 // 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (messageData.course + 90), 0, 0]; shipData.xbsjRotation = [(Math.PI / 180) * (messageData.course + 90), 0, 0];
// 绘制船只轨迹
addShipTrack(existingShip.trackList);
} else { } else {
// 添加新的船只 // 添加新的船只
shipDataList.push({ shipDataList.push({
name: `${messageData.trackId}号船只`, // 名称 name: `${messageData.trackId}号船只`, // 名称
trackId: messageData.trackId, // 船只id trackId: messageData.trackId, // 船只id
guid: drawShips(messageData).xbsjGuid, // 船只模型id guid: drawShips(messageData).xbsjGuid, // 船只模型id
track_guid: addShipTrack([[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]]).xbsjGuid, // 轨迹线guid,用于轨迹显隐
azimuth: messageData.azimuth, // 方位角 azimuth: messageData.azimuth, // 方位角
course: messageData.course, // 航向 course: messageData.course, // 航向
latitude: messageData.latitude, // 纬度 latitude: messageData.latitude, // 纬度
longitude: messageData.longitude, // 经度 longitude: messageData.longitude, // 经度
trackList: [[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]], // 轨迹列表
}); });
// 更新store // 更新store
store.shipDataList = shipDataList; store.shipDataList = shipDataList;

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

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

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

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