Browse Source

1、mqtt模块使用import方法引入,弃用require方法和CDN方法

2、优化船只点击信息窗口,当点击的为雷达船只时,展示不同内容
3、删除部分无用代码
master
Fuyuu 11 months ago
parent
commit
600b6c426c
  1. 2
      build/vite/plugin/index.ts
  2. 35
      electron/electron.js
  3. 2
      index.html
  4. 80
      src/components/earthMap/AISInfoWindow.vue
  5. 72
      src/components/earthMap/ShowHideControl.vue
  6. 39
      src/components/earthMap/TailAfterWindow.vue
  7. 12
      src/utils/earthMap/earthObj.ts
  8. 6
      src/utils/earthMap/listenMouseHandler.ts
  9. 125
      src/utils/earthMap/shipDraw.ts
  10. 119
      src/utils/mqtt/mqttclient.js
  11. 42
      src/views/earthMap/edit/EarthComp.vue
  12. 2317
      src/views/earthMap/edit/EarthComp20231225.vue
  13. 8
      src/views/earthMap/edit/EarthCompTest.vue

2
build/vite/plugin/index.ts

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2023-11-30 10:37:07
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-20 10:31:38
* @LastEditTime: 2024-01-24 15:16:36
* @FilePath: \dt-admin-pc-v2\build\vite\plugin\index.ts
* @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/

35
electron/electron.js

@ -105,12 +105,15 @@ function createWindow() {
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
// preload: path.join(__dirname, 'preload.js'),
javascript: true,
plugins: true,
allowRunningInsecureContent: true,
// 允许web端使用node
nodeIntegration: true,
contextIsolation: false,
// 同源策略关闭
webSecurity: false,
},
});
@ -147,18 +150,18 @@ app.on('window-all-closed', () => {
}
});
// 在主进程中监听 webContents 的 did-create-window 事件
app.on('web-contents-created', (event, webContents) => {
// 监听新窗口创建事件
webContents.on('did-create-window', (Window, details) => {
console.log('Window---', Window);
// 在新窗口创建完成后重新加载预加载脚本
Window.webContents.on('dom-ready', () => {
Window.webContents.executeJavaScript(
`
console.log('window----',window)
`
);
});
});
});
// // 在主进程中监听 webContents 的 did-create-window 事件
// app.on('web-contents-created', (event, webContents) => {
// // 监听新窗口创建事件
// webContents.on('did-create-window', (Window, details) => {
// console.log('Window---', Window);
// // 在新窗口创建完成后重新加载预加载脚本
// Window.webContents.on('dom-ready', () => {
// Window.webContents.executeJavaScript(
// `
// console.log('window----',window)
// `
// );
// });
// });
// });

2
index.html

@ -11,7 +11,7 @@
<!-- <script type="text/javascript" src="<%= BASE_URL %>military/third/api/getImosSdkJs"></script> -->
<link rel="stylesheet" href="<%= BASE_URL %>earthsdk/XbsjCesium/Widgets/widgets.css" />
<script src="<%= BASE_URL %>js/d3kit/libs/cesium-d3kit.js"></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<!-- <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> -->
<title><%= title %></title>
<link rel="icon" href="/zgxlogo.png" />
<!-- 全局配置 -->

80
src/components/earthMap/AISInfoWindow.vue

@ -2,12 +2,12 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-05 14:18:33
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-20 14:57:59
* @LastEditTime: 2024-01-24 11:20:17
* @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
-->
<template>
<div class="AISInfo">
<div class="shipInfo">
<Window
:title="title"
:width="600"
@ -22,14 +22,14 @@
:showcloseButton="true"
id="aisInfoWindow"
>
<div class="ais_content">
<div class="ais_content" v-if="title.includes('AIS')">
<div class="content_item">
<div class="item_title">船名:</div>
<div class="item_content">{{ AISInfo.name }}</div>
<div class="item_content">{{ infoData.name }}</div>
</div>
<div class="content_item">
<div class="item_title">MMSI:</div>
<div class="item_content">{{ AISInfo.mmsi }}</div>
<div class="item_content">{{ infoData.mmsi }}</div>
</div>
<div class="content_item">
<div class="item_title">船首向:</div>
@ -45,7 +45,7 @@
</div>
<div class="content_item">
<div class="item_title">IMO:</div>
<div class="item_content">{{ AISInfo.imo }}</div>
<div class="item_content">{{ infoData.imo }}</div>
</div>
<div class="content_item">
<div class="item_title">航速:</div>
@ -53,11 +53,11 @@
</div>
<div class="content_item">
<div class="item_title">经度:</div>
<div class="item_content">{{ AISInfo.longitude }}</div>
<div class="item_content">{{ infoData.longitude }}</div>
</div>
<div class="content_item">
<div class="item_title">纬度:</div>
<div class="item_content">{{ AISInfo.latitude }}</div>
<div class="item_content">{{ infoData.latitude }}</div>
</div>
<div class="content_item">
<div class="item_title">状态:</div>
@ -91,6 +91,50 @@
<div class="item_title">更新时间:</div>
<div class="item_content"> 2024-01-08 14:40:11</div>
</div>
</div>
<div class="radar_content" v-if="title.includes('雷达')">
<div class="content_item">
<div class="item_title">雷达ID:</div>
<div class="item_content">{{ infoData.radarId }}</div>
</div>
<div class="content_item">
<div class="item_title">时间:</div>
<div class="item_content">{{ infoData.timestamp }}</div>
</div>
<div class="content_item">
<div class="item_title">距离:</div>
<div class="item_content">{{ infoData.dis }}m</div>
</div>
<div class="content_item">
<div class="item_title">方位角:</div>
<div class="item_content">{{ infoData.azimuth }}°</div>
</div>
<div class="content_item">
<div class="item_title">速度:</div>
<div class="item_content">{{ infoData.speed }}m/s</div>
</div>
<div class="content_item">
<div class="item_title">航向:</div>
<div class="item_content">{{ infoData.course }}°</div>
</div>
<div class="content_item">
<div class="item_title">经度:</div>
<div class="item_content">{{ infoData.longitude }}</div>
</div>
<div class="content_item">
<div class="item_title">纬度:</div>
<div class="item_content">{{ infoData.latitude }}</div>
</div>
<div class="content_item">
<div class="item_title">海拔:</div>
<div class="item_content">{{ infoData.altitude }}m</div>
</div>
<div class="content_item">
<div class="item_title">类型:</div>
<div class="item_content">{{ infoData.type }}</div>
</div>
</div>
<div class="opera_content">
<!-- 轨迹显示 -->
<div class="content_item">
<div class="item_title">航行轨迹:</div>
@ -116,6 +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';
export default defineComponent({
name: 'AISInfoWindow',
@ -144,7 +189,7 @@
// id
const radarId: any = ref('');
// AIS
const AISInfo: any = ref({});
const infoData: any = ref({});
// 线
const trackData: any = ref({});
@ -154,8 +199,14 @@
trackId.value = window.$earth.getObject(proxy.ship_guid).trackId;
// trackIdid
radarId.value = store.radarShipList.filter((item) => item.trackId === trackId.value)[0].radarId;
// storeais
AISInfo.value = store.aisShipList.filter((item) => item.trackId === trackId.value)[0];
if (title.includes('AIS')) {
// storeais
infoData.value = store.aisShipList.filter((item) => item.trackId === trackId.value)[0];
} else {
// store
infoData.value = store.radarShipList.filter((item) => item.trackId === trackId.value)[0];
}
// ship_guid线
let shipName = window.$earth.getObject(proxy.ship_guid).name;
// ais
@ -203,7 +254,6 @@
// .then((res) => {
// console.log('', res);
// //
// });
console.log('window', window);
}
@ -232,7 +282,7 @@
return {
checked,
AISInfo,
infoData,
cancel,
changeTrack,
tailAfter,
@ -246,7 +296,9 @@
right: 25px;
}
.ais_content {
.ais_content,
.radar_content,
.opera_content {
width: 95%;
margin: 0 auto;
display: flex;

72
src/components/earthMap/ShowHideControl.vue

@ -1,26 +1,5 @@
<template>
<div class="showhideControl">
<!-- <a-dropdown :trigger="['click']">
<template #overlay>
<a-menu>
<a-menu-item key="1">
<label for="ship-switch" style="margin-top: 2px">船只模型</label>
<a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示" un-checked-children="隐藏" />
</a-menu-item>
<a-menu-item key="2">
<label for="track-switch" style="margin-top: 2px">船只轨迹</label>
<a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示" un-checked-children="隐藏" />
</a-menu-item>
</a-menu>
</template>
<a-button> 地图元素显隐 <CaretUpOutlined /></a-button>
</a-dropdown> -->
<!-- <div class="control_item">
<a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示船只" un-checked-children="隐藏船只" />
</div> -->
<!-- <div class="control_item">
<a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示轨迹" un-checked-children="隐藏轨迹" />
</div> -->
<div class="control_item">
<a-switch
id="ais-switch"
@ -54,10 +33,6 @@
import $mitt from '@/utils/earthMap/mitt';
export default defineComponent({
setup() {
//
// const shipShow = ref<boolean>(true);
//
// const trackShow = ref<boolean>(true);
//
const radarTypeShow = ref<boolean>(true);
//
@ -93,8 +68,6 @@
//
let earthMapMixShips = earthMapElements.filter((item) => item.name && item.name.includes('船_mix'));
if (earthMapShips.length > 0) {
//
// shipShow.value = earthMapShips.every((item) => item.show === true);
//
shipList.value = earthMapShips;
if (earthMapAisShips.length > 0) {
@ -135,8 +108,6 @@
let earthMapAisTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线_ais'));
let earthMapMixTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线_mix'));
if (earthMapTracks.length > 0) {
//
// trackShow.value = earthMapTracks.every((item) => item.show === true);
//
trackList.value = earthMapTracks;
if (earthMapRadarTracks.length > 0) {
@ -158,45 +129,6 @@
console.log('当前场景没有轨迹线');
}
}
//
function changeShipShow(e) {
if (shipList.value.length > 0) {
if (!e) {
//
// trackShow.value = false;
//
trackList.value.forEach((item: any) => {
item.show = false;
});
}
//
// shipShow.value = e;
shipList.value.forEach((item: any) => {
//
item.show = e;
});
} else {
console.log('当前场景没有船只');
}
}
// 线
function changeTrackShow(e) {
if (trackList.value.length > 0) {
// if (shipShow.value) {
// //
// trackShow.value = e;
// trackList.value.forEach((item: any) => {
// //
// item.show = e;
// });
// } else {
// trackShow.value = false;
// console.log('');
// }
} else {
console.log('当前场景没有轨迹线');
}
}
//
function changeRadarType(e) {
if (radarShipList.value.length > 0) {
@ -292,13 +224,9 @@
});
return {
// shipShow,
// trackShow,
radarTypeShow,
mixTypeShow,
aisTypeShow,
changeShipShow,
changeTrackShow,
changeRadarType,
changeMixType,
changeAISType,

39
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-20 18:02:10
* @LastEditTime: 2024-01-23 11:35:57
* @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
-->
@ -12,9 +12,9 @@
:title="title"
:width="1280"
:minWidth="1280"
:height="720"
:height="780"
:left="100"
:top="100"
:top="60"
@cancel="cancel"
:floatright="false"
:showCancelButton="true"
@ -22,52 +22,25 @@
:showcloseButton="true"
id="tailAfterWindow"
>
<div class="mpegPlayer" ref="mpegPlayer"></div>
<div class="mpegPlayer"></div>
</Window>
</div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, ref, onMounted, onBeforeUnmount } from 'vue';
import { getCurrentInstance } from 'vue';
import Window from '@/components/earthMap/components/Window.vue';
import MpegPlayer from 'jsmpeg-player';
const props = defineProps({
title: {
type: String,
default: '光电跟踪',
},
});
// ipcRenderer
// import { ipcRenderer } from 'electron';
const ipcRenderer: any = ref(null);
const { proxy }: any = getCurrentInstance();
// DOM
const mpegPlayer = ref();
// rtsp
const videoUrl = ref('rtsp://admin:123456@192.168.1.71:554/');
//
let player: any = ref(null);
//
const open = () => {
const res = ipcRenderer.sendSync('openRtsp', videoUrl.value);
if (res.code === 200) {
player.value = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws);
}
};
//
const close = () => {
ipcRenderer.sendSync('closeRtsp', videoUrl.value);
};
//
function cancel() {
proxy.$parent.TailAfterWindowShow = false;
}
onMounted(() => {
open();
});
onBeforeUnmount(() => {
close();
});
</script>
<style lang="less" scoped>
#tailAfterWindow .xbsj-model-header .xbsj-model-arrow {

12
src/utils/earthMap/earthObj.ts

@ -399,7 +399,7 @@ export const addShipPrimitive = (options: any = {}) => {
return shipCp;
};
// 创建船只三维模型
// 融合船只-船模型 ais船只-黄色三角 雷达船只-红色三角
// 3-融合船只-船模型 2-ais船只-黄色三角 1-雷达船只-红色三角
export const addShipModel = (options: any = {}, dataType: number) => {
const tileset = new window.XE.Obj.Model(window.$earth);
// 创建一个Model对象
@ -411,12 +411,12 @@ export const addShipModel = (options: any = {}, dataType: number) => {
xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角]
xbsjScale: [1, 1, 1], // 缩放比例
show: true, // 显隐状态
distanceDisplayCondition: [1.0, 30000.0],
scale: 0.5,
minimumPixelSize: 80,
distanceDisplayCondition: [1.0, 30000.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',
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);
//移入事件

6
src/utils/earthMap/listenMouseHandler.ts

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

125
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-19 09:44:33
* @LastEditTime: 2024-01-24 14:16:26
* @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
*/
@ -21,59 +21,50 @@ let aisShipList: any = [];
// 融合船只数据列表
let mixShipList: any = [];
// 角度转弧度
/**
*
* @param point []
* @returns
*/
function toRadians(point) {
return window.Cesium.Math.toRadians(point);
}
// 绘制AIS船只
const drawAISShips = function (shipItem) {
// 模型配置参数
let options = {
id: shipItem.trackId,
name: `${shipItem.trackId}号船_ais`,
modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/greenShip.gltf',
position: [toRadians(shipItem.longitude + 0.00005), toRadians(shipItem.latitude + 0.00005), 0],
rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0],
};
// 绘制船只
let shipModel = addShipModel(options, 1);
// 返回船只绘制信息
return shipModel;
};
// 绘制雷达船只
const drawRadarShips = function (shipItem) {
// 模型配置参数
let options = {
id: shipItem.trackId,
name: `${shipItem.trackId}号船_radar`,
modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/yellowShip.gltf',
position: [toRadians(shipItem.longitude), toRadians(shipItem.latitude), 0],
rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0],
};
// 绘制船只
let shipModel = addShipModel(options, 2);
// 返回船只绘制信息
return shipModel;
};
// 绘制融合船只
const drawMixShips = function (shipItem) {
/**
*
* @param shipItem
* @param shipType 1- 2-ais 3-
* @returns
*/
const drawShips = function (shipItem, shipType) {
// 模型配置参数
let options = {
id: shipItem.trackId,
name: `${shipItem.trackId}号船_mix`,
modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf',
position: [toRadians(shipItem.longitude + 0.0001), toRadians(shipItem.latitude + 0.0001), 0],
rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0],
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', // 模型资源路径
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),
0,
], // 模型单次扫描的坐标 [经度,纬度]
rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0], // 模型单词扫描的航向 [偏航角,俯仰角,翻转角]
};
// 绘制船只
let shipModel = addShipModel(options, 3);
let shipModel = addShipModel(options, shipType);
// 返回船只绘制信息
return shipModel;
};
// 绘制地球上所有雷达船只
export const drawRadarShipsList = function (radarItem) {
/**
*
* @param radarItem
*/
export const drawRadarShipsList = function (radarItem, isShowTrack) {
// 接收到的单个雷达船只信息
let radarData = radarItem.radarTrack;
// 获取store中的雷达船只数据列表
@ -90,26 +81,39 @@ export const drawRadarShipsList = function (radarItem) {
// 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (radarData.course - 90), 0, 0];
} else {
// 新增船只轨迹信息
let trackData = addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1);
// 根据按钮状态决定轨迹显隐
trackData.show = isShowTrack;
// 将时间戳转换
let time = new Date(Math.floor(radarData.timestamp / 1000) * 1000)
// 添加新的雷达船只
radarShipList.push({
name: `${radarData.trackId}号船_radar`, // 名称
trackId: radarData.trackId, // 船只id
guid: drawRadarShips(radarData).xbsjGuid, // 船只场景id
// 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
track_guid: addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1).xbsjGuid,
guid: drawShips(radarData, 1).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()}`, // 时间
azimuth: radarData.azimuth, // 方位角
course: radarData.course, // 航向
latitude: radarData.latitude, // 纬度
longitude: radarData.longitude, // 经度
radarId: radarData.radarId, // 雷达id
dis: radarData.dis, // 距离
speed: radarData.speed, // 速度
altitude: radarData.altitude, // 海拔
type: radarData.type, // 类型
});
// 更新store
store.radarShipList = radarShipList;
}
};
// 绘制地球上所有ais船只(暂无AIS数据,使用雷达数据进行模拟)
export const drawAISShipsList = function (aisItem) {
/**
* ais船只AIS数据使
* @param aisItem AIS船只数据
*/
export const drawAISShipsList = function (aisItem, isShowTrack) {
// 接收到的单个ais船只信息
let aisData = aisItem.radarTrack;
// 获取store中的ais船只数据列表
@ -128,6 +132,10 @@ export const drawAISShipsList = function (aisItem) {
// 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (aisData.course - 90), 0, 0];
} else {
// 新增船只轨迹信息
let trackData = addShipTrack([[toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]], 2);
// 根据按钮状态决定轨迹显隐
trackData.show = isShowTrack;
// 添加新的ais船只
aisShipList.push({
name: `${aisData.trackId}号船_ais`, // 名称
@ -146,9 +154,8 @@ export const drawAISShipsList = function (aisItem) {
nationality: 'CN', // 国籍
pre_arrival_time: '2024-01-08 14:40:11', // 预到时间
trackId: aisData.trackId, // 船只id
guid: drawAISShips(aisData).xbsjGuid, // 船只场景id
// 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
track_guid: addShipTrack([[toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]], 2).xbsjGuid,
guid: drawShips(aisData, 2).xbsjGuid, // 船只场景id
track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
azimuth: aisData.azimuth, // 方位角
course: aisData.course, // 航向
latitude: aisData.latitude + 0.00005, // 纬度
@ -160,8 +167,11 @@ export const drawAISShipsList = function (aisItem) {
}
};
// 绘制地球上所有融合船只(暂无融合数据,使用雷达数据进行模拟)
export const drawMixShipsList = function (mixItem) {
/**
* 使
* @param mixItem
*/
export const drawMixShipsList = function (mixItem, isShowTrack) {
// 接收到的单个融合船只信息
let mixData = mixItem.radarTrack;
// 获取store中的融合船只数据列表
@ -178,13 +188,16 @@ export const drawMixShipsList = function (mixItem) {
// 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (mixData.course - 90), 0, 0];
} else {
// 新增船只轨迹信息
let trackData = addShipTrack([[toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]], 3);
// 根据按钮状态决定轨迹显隐
trackData.show = isShowTrack;
// 添加新的融合船只
mixShipList.push({
name: `${mixData.trackId}号船_mix`, // 名称
trackId: mixData.trackId, // 船只id
guid: drawMixShips(mixData).xbsjGuid, // 船只场景id
// 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
track_guid: addShipTrack([[toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]], 3).xbsjGuid,
guid: drawShips(mixData, 3).xbsjGuid, // 船只场景id
track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
azimuth: mixData.azimuth, // 方位角
course: mixData.course, // 航向
latitude: mixData.latitude + 0.0001, // 纬度

119
src/utils/mqtt/mqttclient.js

@ -1,96 +1,30 @@
// import * as mqtt from 'mqtt';
// import $mitt from "../mitt/mitt";
/*
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-02 16:31:08
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-24 15:28:12
* @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
*/
// 引入mqtt模块
// const mqtt = require('mqtt');
import mqtt from 'mqtt';
import $mitt from '@/utils/earthMap/mitt';
// export default {
// data() {
// return {
// connection: {
// host: '192.168.1.101',
// port: 8083,
// connectTimeout: 4000, // 超时时间
// reconnectPeriod: 4000, // 重连时间间隔
// username: 'admin',
// password: 'public',
// },
// client: {
// connected: false,
// },
// // 订阅的频道和事件
// topicList: {
// "ship/gps/100": "mqttShipShow",
// "/v1.0.0/+/up/event": "智能围网",
// "/server/cmd/+/zdgl":"设备:[消音/复位/重启]"
// }
// }
// },
// created() {
// this.createConnection()
// },
// methods: {
// // 创建连接
// createConnection() {
// const { host, port, endpoint, ...options } = this.connection
// const connectUrl = `mqtt://${host}:${port}/mqtt`
// try {
// this.client = mqtt.connect(connectUrl, options)
// } catch (error) {
// console.log('mqtt.connect error', error)
// }
// this.client.on('connect', () => {
// console.log('Connection succeeded!')
// // 不会订阅多个频道,所以遍历对象,循环监听多个频道
// for (let key in this.topicList) {
// this.client.subscribe(key, (err) => {
// if (!err) {
// console.log(`订阅'${key}'成功`);
// }
// });
// }
// })
// this.client.on('error', error => {
// console.log('Connection failed', error)
// })
// /**
// * topic: 监听的频道
// * message: 返回的数据
// */
// this.client.on('message', (topic, message) => {
// this[this.topicList[topic]](message)
// })
// },
// mqttShipShow(message) {
// const row = JSON.parse(message)
// // 处理逻辑
// fn(row)
// }
// },
// }
console.log(mqtt);
// const host = import.meta.env.VUE_APP_MQTT_HOST || '127.0.0.1';
const host = '192.168.1.200';
const port = import.meta.env.VUE_APP_MQTT_PORT || 8083;
const host = '192.168.1.200'; // 连接主机
const port = import.meta.env.VUE_APP_MQTT_PORT || 8083; // 连接端口
const options = {
//mqtt配置
// port: 8083,//连接端口
protocolId: 'MQTT',
connectTimeout: 4000, //超时时间
clientID: 'mqtt_' + Math.random().toString(16).substr(2, 8),
username: 'admin',
password: 'public',
// 配置参数
protocolId: 'MQTT', // 协议id
connectTimeout: 4000, // 超时时间
// reconnectPeriod: 1000, // 重连时间间隔
clientID: 'mqtt_' + Math.random().toString(16).substr(2, 8), // 客户端id
username: 'admin', // 用户名
password: 'public', // 密码
};
// const options = {
// clean: true,
// connectTimeout: 4000, //超时时间
// reconnectPeriod: 1000, //重连时间间隔
// clientId: 'emqx_test',
// username: 'emqx_test',
// password: 'emqx_test',
// };
// 订阅的频道和事件
const topics = '/server/radar';
const topicList = topics.split(',');
const topics = '/server/radar'; // 订阅频道
const topicList = topics.split(','); // 订阅事件列表
// const topicList = {
// "ship/gps/100": "mqttShipShow",
// //server=服务 warning=预警 +代表所有级别预警 1,2,3 zdgl=震动光缆
@ -98,17 +32,12 @@ const topicList = topics.split(',');
// "/v1.0.0/+/up/event": "智能围网",
// "/server/cmd/+/zdgl":"设备[消音复位重启]"
// };
// $mitt.on("warnInfo", (msg) => {console.log(msg) });
export default class MqttUnit {
connectUrl = `mqtt://${host}:${port}/mqtt`;
// connectUrl = `ws://broker.emqx.io:8083/mqtt`;
connectUrl = `mqtt://${host}:${port}/mqtt`; // 连接Url
client = mqtt.connect(this.connectUrl, options);
// 创建mqtt连接的方法
mqttInit() {
const connectUrl = `mqtt://${host}:${port}/mqtt`;
// const connectUrl = `ws://broker.emqx.io:8083/mqtt`;
this.client.on('connect', () => {
console.log(`MQTT Connection ${connectUrl} succeeded!`);
// 不会订阅多个频道,所以遍历对象,循环监听多个频道

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

@ -86,7 +86,7 @@
></AddModelWin>
<AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
<!-- AIS信息显示窗口 -->
<AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid"></AISInfoWindow>
<AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid" :title="windowTitle"></AISInfoWindow>
<!-- 跟踪船只窗口 -->
<TailAfterWindow v-if="TailAfterWindowShow"></TailAfterWindow>
</div>
@ -155,7 +155,7 @@
import circleDot2 from '@/assets/earthMap/circleDot2.png';
import circleDot1 from '@/assets/earthMap/circleDot1.png';
import circleDot3 from '@/assets/earthMap/circleDot3.png';
import { nextTick } from 'vue';
import { nextTick } from 'vue';
const { createMessage } = useMessage();
function setClassEl(setClassEl1, setClassEl2, checked) {
@ -313,7 +313,7 @@ import { nextTick } from 'vue';
type: Boolean,
default: false,
},
//
//
msMapLineHandler: {
type: Object,
default: null,
@ -486,7 +486,10 @@ import { nextTick } from 'vue';
TailAfterWindowShow = false;
// id
ship_guid = '';
//
isShowTrack = true;
//
windowTitle = 'AIS信息';
//
// pin: any = undefined;
// viewer: any = undefined;
@ -553,25 +556,21 @@ import { nextTick } from 'vue';
}
//
areaHandler(){
areaHandler() {
//
window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
this.$nextTick(() => {
$mitt.emit('msMapLineHandler', this.msMapLineHandler);
})
});
}
//
cameraSiteHandler(){
cameraSiteHandler() {
//
window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
this.$nextTick(() => {
$mitt.emit('msCameraSiteHandle', this.msCameraSiteHandle);
})
});
}
//
@ -776,11 +775,10 @@ import { nextTick } from 'vue';
if (this.PropsCreateBBHLineOpen) await this.createBBHLine();
//使
if (this.msMapLineHandler) this.areaHandler()
if (this.msMapLineHandler) this.areaHandler();
//使
if (this.msCameraSiteHandle) this.cameraSiteHandler()
if (this.msCameraSiteHandle) this.cameraSiteHandler();
});
}
@ -1160,12 +1158,16 @@ import { nextTick } from 'vue';
// mqtt
$mitt.on('deviceCmd', (message: any) => {
let data = JSON.parse(message);
//
$mitt.on('trackAllChange', (data: any) => {
this.isShowTrack = data.status;
});
//
drawRadarShipsList(data);
drawRadarShipsList(data, this.isShowTrack);
// AIS
drawAISShipsList(data);
drawAISShipsList(data, this.isShowTrack);
//
drawMixShipsList(data);
drawMixShipsList(data, this.isShowTrack);
});
}
}

2317
src/views/earthMap/edit/EarthComp20231225.vue

File diff suppressed because it is too large

8
src/views/earthMap/edit/EarthCompTest.vue

@ -109,7 +109,7 @@
import { keyControlInit } from '@/utils/earthMap/keyControlInit';
import redFlag from '@/assets/earthMap/redFlag.png';
import { addModel, addPin, addViewShedRadar, addShipTrack } from '@/utils/earthMap/earthObj';
import { drawAllShips } from '@/utils/earthMap/shipDraw';
// import { drawAllShips } from '@/utils/earthMap/shipDraw';
import hidePng from '@/assets/earthMap/hide.png';
import alarmImg from '@/assets/earthMap/alarm.gif';
import VideoFusionWin from './components/VideoFusionWin.vue';
@ -608,9 +608,9 @@
}
});
// mqtt
$mitt.on('deviceCmd', (message: any) => {
drawAllShips(message);
});
// $mitt.on('deviceCmd', (message: any) => {
// drawAllShips(message);
// });
}
// /

Loading…
Cancel
Save