Browse Source

1、修改地图船只显隐bug

2、添加光电分析监听,使用mqtt发送点击船只信息,接收光电视频流rtsp地址
3、监听相机高度,变换船只模型
master
Fuyuu 11 months ago
parent
commit
847f9d700d
  1. 8
      src/App.vue
  2. 42
      src/components/earthMap/AISInfoWindow.vue
  3. 8
      src/components/earthMap/ShowHideControl.vue
  4. 17
      src/components/earthMap/TailAfterWindow.vue
  5. 49
      src/utils/earthMap/earthObj.ts
  6. 6
      src/utils/earthMap/listenMouseHandler.ts
  7. 46
      src/utils/earthMap/shipDraw.ts
  8. 21
      src/utils/mqtt/mqttclient.js
  9. 45
      src/views/earthMap/edit/EarthComp.vue
  10. 2
      vite.config.ts

8
src/App.vue

@ -1,3 +1,11 @@
<!--
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-02 16:31:08
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-25 09:31:40
* @FilePath: \dt-admin-pc-v2\src\App.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<ConfigProvider :locale="getAntdLocale">
<AppProvider>

42
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-24 11:20:17
* @LastEditTime: 2024-01-25 15:11:06
* @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
-->
@ -160,7 +160,7 @@
import $mitt from '@/utils/earthMap/mitt';
import { EyeOutlined } from '@ant-design/icons-vue';
import { defHttp } from '/@/utils/http/axios';
import { title } from 'process';
import { info } from 'console';
export default defineComponent({
name: 'AISInfoWindow',
@ -188,7 +188,7 @@
const trackId: any = ref('');
// id
const radarId: any = ref('');
// AIS
//
const infoData: any = ref({});
// 线
const trackData: any = ref({});
@ -199,7 +199,7 @@
trackId.value = window.$earth.getObject(proxy.ship_guid).trackId;
// trackIdid
radarId.value = store.radarShipList.filter((item) => item.trackId === trackId.value)[0].radarId;
if (title.includes('AIS')) {
if (proxy.title.includes('AIS')) {
// storeais
infoData.value = store.aisShipList.filter((item) => item.trackId === trackId.value)[0];
} else {
@ -237,25 +237,12 @@
function tailAfter() {
//
proxy.$parent.TailAfterWindowShow = true;
// idtrackIdidradarIdtracking0 1
// 使API
// defHttp
// .post(
// {
// url: '/military/tracking/target',
// params: {
// trackId: trackId.value,
// radarId: radarId.value,
// tracking: 1,
// },
// },
// { isTransformResponse: false }
// )
// .then((res) => {
// console.log('', res);
// //
// });
console.log('window', window);
// mqtt
let mqttClient = window.mqttClient;
// 1- 0-
infoData.value.trackStatus = 1;
//
mqttClient.publish('/trackTarget', JSON.stringify(infoData.value));
}
// 线
$mitt.on('trackChange', (e: boolean) => {
@ -270,6 +257,15 @@
checked.value = data.status;
}
});
//
$mitt.on('deviceCmd', (message: any) => {
let data = JSON.parse(message).radarTrack;
if (data.trackId == trackId.value) {
if (proxy.title.includes('雷达')) {
infoData.value = data;
}
}
});
// guid
watch(
() => proxy.ship_guid,

8
src/components/earthMap/ShowHideControl.vue

@ -146,6 +146,10 @@
//
item.show = e;
});
//
$mitt.emit('shipAllChange', { status: e, type: 'radar' });
//
$mitt.emit('trackAllChange', { status: e, type: 'radar' });
} else {
console.log('当前场景没有雷达船只');
}
@ -167,6 +171,8 @@
//
item.show = e;
});
$mitt.emit('shipAllChange', { status: e, type: 'mix' });
$mitt.emit('trackAllChange', { status: e, type: 'mix' });
} else {
console.log('当前场景没有融合船只');
}
@ -188,6 +194,8 @@
//
item.show = e;
});
$mitt.emit('shipAllChange', { status: e, type: 'ais' });
$mitt.emit('trackAllChange', { status: e, type: 'ais' });
} else {
console.log('当前场景没有AIS船只');
}

17
src/components/earthMap/TailAfterWindow.vue

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-18 16:42:29
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-23 11:35:57
* @LastEditTime: 2024-01-25 16:16:00
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\TailAfterWindow.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@ -27,8 +27,9 @@
</div>
</template>
<script lang="ts" setup>
import { getCurrentInstance } from 'vue';
import { getCurrentInstance, onMounted, onUnmounted } from 'vue';
import Window from '@/components/earthMap/components/Window.vue';
import $mitt from '@/utils/earthMap/mitt';
const props = defineProps({
title: {
type: String,
@ -41,6 +42,18 @@
function cancel() {
proxy.$parent.TailAfterWindowShow = false;
}
onMounted(() => {
//
$mitt.on('tailAfterRtsp', (message: any) => {
console.log('光电跟踪信息', message);
});
});
onUnmounted(() => {
//
$mitt.off('tailAfterRtsp');
});
</script>
<style lang="less" scoped>
#tailAfterWindow .xbsj-model-header .xbsj-model-arrow {

49
src/utils/earthMap/earthObj.ts

@ -405,18 +405,16 @@ export const addShipModel = (options: any = {}, dataType: number) => {
// 创建一个Model对象
const objConfig = {
name: options.name, // 实例名称
url: options.modelUrl, // 模型资源路径
// url: options.modelUrl ? options.modelUrl : '', // 模型资源路径
trackId: options.id, // 船只trackid
xbsjPosition: options.position, // 位置数组 [经度、纬度、高度]
xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角]
xbsjScale: [1, 1, 1], // 缩放比例
show: true, // 显隐状态
distanceDisplayCondition: [1.0, 30000.0], // 显示距离范围
distanceDisplayCondition: [1.0, 100000.0], // 显示距离范围
scale: 0.5, // 尺寸缩放
minimumPixelSize: 80, // 近似最小像素大小
colorBlendAmount: dataType == 3 ? 0.0 : 1.0, // 1.0 模型颜色 0.0 设置纯色
color: dataType == 3 ? [1, 1, 1, 1] : dataType == 2 ? [1, 1, 0.03, 1] : [0.94, 0.13, 0.03, 1], // 设置纯色时,模型的颜色
colorBlendMode: dataType == 3 ? 'ColorBlendMode.HIGHLIGHT' : 'ColorBlendMode.REPLACE', // 模型渲染模式 设置纯色时需要更改为REPLACE模式
};
tileset.xbsjFromJSON(objConfig);
//移入事件
@ -427,13 +425,52 @@ export const addShipModel = (options: any = {}, dataType: number) => {
tileset.onmouseout = () => {
window.$earth.czm.viewer._container.style.cursor = 'default';
};
/**
*
*/
window.XE.MVVM.watch(window.$earth.camera, 'position', (res: any) => {
let height = res[2];
// 3-融合船只-船模型 2-ais船只-黄色三角 1-雷达船只-红色三角
if (height > options.modelToViewer[0][0] && height < options.modelToViewer[0][1]) {
// 最低图层 显示船只模型 1-通用船 2-执法船 3-客船
if (dataType == 1) {
tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf';
} else if (dataType == 2) {
tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/zhifachuan.gltf';
} else {
tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/kechuan.gltf';
}
tileset.color = [1, 1, 1, 1];
tileset.xbsjScale = [1, 1, 1];
tileset.colorBlendMode = 'ColorBlendMode.HIGHLIGHT';
} else if (height > options.modelToViewer[1][0] && height < options.modelToViewer[1][1]) {
// 中间图层 显示三角形 1-红色 2-黄色 3-蓝色
if (dataType == 1) {
tileset.color = [0.94, 0.13, 0.03, 1];
} else if (dataType == 2) {
tileset.color = [1, 1, 0.03, 1];
} else {
tileset.color = [0.03, 0.35, 0.97, 0.85];
}
tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/yellowShip.gltf';
tileset.xbsjScale = [0.3, 0.3, 0.3];
tileset.colorBlendMode = 'ColorBlendMode.REPLACE';
} else {
// 最高图层 统一显示小圆点
tileset.url = window._CONFIG['domianURL'] + '/sys/common/static/shipPoint.gltf';
tileset.xbsjScale = [0.1, 0.1, 0.1];
tileset.color = [0, 1, 0, 1];
tileset.colorBlendMode = 'ColorBlendMode.REPLACE';
}
});
return tileset;
};
// 创建船只轨迹
export const addShipTrack = (positions: number[][], dataType: number) => {
const shipTrack = new window.XE.Obj.Polyline(window.$earth);
const objConfig = {
width: 2.0, // 线宽
width: 1.0, // 线宽
name: `轨迹线_${dataType == 1 ? 'radar' : dataType == 2 ? 'ais' : 'mix'}`, // 实例名称
positions, // 点坐标经纬度数组 [经度、纬度、高度]
material: {
@ -444,6 +481,8 @@ export const addShipTrack = (positions: number[][], dataType: number) => {
glowPower: 0.6, // 发光程度
},
},
minShowHeight: 1.0, // 最低显示海拔
maxShowHeight: 24999.0, // 最高显示海拔
ground: true, // 是否贴地
};
shipTrack.xbsjFromJSON(objConfig);

6
src/utils/earthMap/listenMouseHandler.ts

@ -97,15 +97,15 @@ export default function listenMouseHandler(that) {
}
// 船只模型
if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船')) {
that.AISInfoWindowShow = true;
// 赋值船只场景id - 唯一标识 可通过该字段获取其余信息
that.ship_guid = pickedFeature.id.guid;
// 若点击的是雷达船只
if (pickedFeature.id.name.includes('船_radar')) {
that.windowTitle = '雷达信息';
} else {
that.windowTitle = 'AIS信息';
}
that.AISInfoWindowShow = true;
// 赋值船只场景id - 唯一标识 可通过该字段获取其余信息
that.ship_guid = pickedFeature.id.guid;
}
//雷达扫描范围
if (

46
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-24 14:16:26
* @LastEditTime: 2024-01-26 16:30:29
* @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
*/
@ -41,12 +41,10 @@ const drawShips = function (shipItem, shipType) {
let options = {
id: shipItem.trackId, // 船只ID 通过雷达获取
name: shipType == 1 ? `${shipItem.trackId}号船_radar` : shipType == 2 ? `${shipItem.trackId}号船_ais` : `${shipItem.trackId}号船_mix`, // 船只名称 具有区分不同数据类型船只的特殊标识
modelUrl:
shipType == 1
? window._CONFIG['domianURL'] + '/sys/common/static/greenShip.gltf'
: shipType == 2
? window._CONFIG['domianURL'] + '/sys/common/static/yellowShip.gltf'
: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf', // 模型资源路径
modelToViewer: [
[0, 3999],
[4000, 24999],
], // 不同相机高度范围数组 1:1~3999 2:4000~24999 3:25000~
position: [
toRadians(shipType == 3 ? shipItem.longitude + 0.0001 : shipType == 2 ? shipItem.longitude + 0.00005 : shipItem.longitude),
toRadians(shipType == 3 ? shipItem.latitude + 0.0001 : shipType == 2 ? shipItem.latitude + 0.00005 : shipItem.latitude),
@ -64,7 +62,7 @@ const drawShips = function (shipItem, shipType) {
*
* @param radarItem
*/
export const drawRadarShipsList = function (radarItem, isShowTrack) {
export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowRadarShip) {
// 接收到的单个雷达船只信息
let radarData = radarItem.radarTrack;
// 获取store中的雷达船只数据列表
@ -84,17 +82,21 @@ export const drawRadarShipsList = function (radarItem, isShowTrack) {
// 新增船只轨迹信息
let trackData = addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1);
// 根据按钮状态决定轨迹显隐
trackData.show = isShowTrack;
trackData.show = isShowRadarTrack;
// 新增船只模型信息
let modelData = drawShips(radarData, 1);
// 根据按钮状态决定模型显隐
modelData.show = isShowRadarShip;
// 将时间戳转换
let time = new Date(Math.floor(radarData.timestamp / 1000) * 1000)
let time = new Date(Math.floor(radarData.timestamp / 1000) * 1000);
// 添加新的雷达船只
radarShipList.push({
name: `${radarData.trackId}号船_radar`, // 名称
trackId: radarData.trackId, // 船只id
guid: drawShips(radarData, 1).xbsjGuid, // 船只场景id
guid: modelData.xbsjGuid, // 船只场景id
track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
radarId: radarData.radarId, // 雷达ID
timestamp: `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`, // 时间
timestamp: `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`, // 时间
azimuth: radarData.azimuth, // 方位角
course: radarData.course, // 航向
latitude: radarData.latitude, // 纬度
@ -113,7 +115,7 @@ export const drawRadarShipsList = function (radarItem, isShowTrack) {
* ais船只AIS数据使
* @param aisItem AIS船只数据
*/
export const drawAISShipsList = function (aisItem, isShowTrack) {
export const drawAISShipsList = function (aisItem, isShowAISTrack, isShowAISShip) {
// 接收到的单个ais船只信息
let aisData = aisItem.radarTrack;
// 获取store中的ais船只数据列表
@ -135,7 +137,11 @@ export const drawAISShipsList = function (aisItem, isShowTrack) {
// 新增船只轨迹信息
let trackData = addShipTrack([[toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]], 2);
// 根据按钮状态决定轨迹显隐
trackData.show = isShowTrack;
trackData.show = isShowAISTrack;
// 新增船只模型信息
let modelData = drawShips(aisData, 2);
// 根据按钮状态决定模型显隐
modelData.show = isShowAISShip;
// 添加新的ais船只
aisShipList.push({
name: `${aisData.trackId}号船_ais`, // 名称
@ -154,7 +160,7 @@ export const drawAISShipsList = function (aisItem, isShowTrack) {
nationality: 'CN', // 国籍
pre_arrival_time: '2024-01-08 14:40:11', // 预到时间
trackId: aisData.trackId, // 船只id
guid: drawShips(aisData, 2).xbsjGuid, // 船只场景id
guid: modelData.xbsjGuid, // 船只场景id
track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
azimuth: aisData.azimuth, // 方位角
course: aisData.course, // 航向
@ -171,7 +177,7 @@ export const drawAISShipsList = function (aisItem, isShowTrack) {
* 使
* @param mixItem
*/
export const drawMixShipsList = function (mixItem, isShowTrack) {
export const drawMixShipsList = function (mixItem, isShowMixTrack, isShowMixShip) {
// 接收到的单个融合船只信息
let mixData = mixItem.radarTrack;
// 获取store中的融合船只数据列表
@ -191,12 +197,16 @@ export const drawMixShipsList = function (mixItem, isShowTrack) {
// 新增船只轨迹信息
let trackData = addShipTrack([[toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]], 3);
// 根据按钮状态决定轨迹显隐
trackData.show = isShowTrack;
trackData.show = isShowMixTrack;
// 新增船只模型信息
let modelData = drawShips(mixData, 3);
// 根据按钮状态决定模型显隐
modelData.show = isShowMixShip;
// 添加新的融合船只
mixShipList.push({
name: `${mixData.trackId}号船_mix`, // 名称
trackId: mixData.trackId, // 船只id
guid: drawShips(mixData, 3).xbsjGuid, // 船只场景id
guid: modelData.xbsjGuid, // 船只场景id
track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
azimuth: mixData.azimuth, // 方位角
course: mixData.course, // 航向

21
src/utils/mqtt/mqttclient.js

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-02 16:31:08
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-24 15:28:12
* @LastEditTime: 2024-01-25 16:32:23
* @FilePath: \dt-admin-pc-v2\src\utils\mqtt\mqttclient.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -23,15 +23,12 @@ const options = {
password: 'public', // 密码
};
const topics = '/server/radar'; // 订阅频道
const topics = '/server/radar,/track/deviceInfo'; // 订阅频道
const topicList = topics.split(','); // 订阅事件列表
// const topicList = {
// "ship/gps/100": "mqttShipShow",
// //server=服务 warning=预警 +代表所有级别预警 1,2,3 zdgl=震动光缆
// "server/warning/+/zdgl": "系统发布智能围网预警",
// "/v1.0.0/+/up/event": "智能围网",
// "/server/cmd/+/zdgl":"设备[消音复位重启]"
// };
/**
* /server/radar
* /track/deviceInfo rtspUrl
*/
export default class MqttUnit {
connectUrl = `mqtt://${host}:${port}/mqtt`; // 连接Url
client = mqtt.connect(this.connectUrl, options);
@ -59,9 +56,15 @@ export default class MqttUnit {
this.client.on('message', (topic, message) => {
const utf8decoder = new TextDecoder();
const dataString = utf8decoder.decode(message);
if (topic.startsWith('/server/')) {
$mitt.emit('deviceCmd', dataString);
}
if (topic.startsWith('/track/')) {
$mitt.emit('tailAfterRtsp', dataString);
}
});
// 将client对象挂载window全局对象中
window.mqttClient = this.client;
}
}

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

@ -486,10 +486,20 @@
TailAfterWindowShow = false;
// id
ship_guid = '';
//
isShowTrack = true;
//
isShowRadarTrack = true;
//AIS
isShowAISTrack = true;
//
isShowMixTrack = true;
//
isShowRadarShip = true;
// AIS
isShowAISShip = true;
//
isShowMixShip = true;
//
windowTitle = 'AIS信息';
windowTitle = '';
//
// pin: any = undefined;
// viewer: any = undefined;
@ -1155,19 +1165,34 @@
this.clearAlarmModel(eventSerialNum);
}
});
//
$mitt.on('trackAllChange', (data: any) => {
if (data.type == 'radar') {
this.isShowRadarTrack = data.status;
} else if (data.type == 'ais') {
this.isShowAISTrack = data.status;
} else {
this.isShowMixTrack = data.status;
}
});
$mitt.on('shipAllChange', (data: any) => {
if (data.type == 'radar') {
this.isShowRadarShip = data.status;
} else if (data.type == 'ais') {
this.isShowAISShip = data.status;
} else {
this.isShowMixShip = data.status;
}
});
// mqtt
$mitt.on('deviceCmd', (message: any) => {
let data = JSON.parse(message);
//
$mitt.on('trackAllChange', (data: any) => {
this.isShowTrack = data.status;
});
//
drawRadarShipsList(data, this.isShowTrack);
drawRadarShipsList(data, this.isShowRadarTrack, this.isShowRadarShip);
// AIS
drawAISShipsList(data, this.isShowTrack);
drawAISShipsList(data, this.isShowAISTrack, this.isShowAISShip);
//
drawMixShipsList(data, this.isShowTrack);
drawMixShipsList(data, this.isShowMixTrack, this.isShowMixShip);
});
}
}

2
vite.config.ts

@ -72,7 +72,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
},
build: {
minify: 'esbuild',
target: 'es2015',
target: 'es2020',
cssTarget: 'chrome80',
outDir: OUTPUT_DIR,
terserOptions: {

Loading…
Cancel
Save