diff --git a/index.html b/index.html
index 7c3d0a0..e01b99f 100644
--- a/index.html
+++ b/index.html
@@ -4,16 +4,14 @@
-
+
-
+
+
<%= title %>
diff --git a/src/App.vue b/src/App.vue
index 7cb7cca..8492bc7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,11 +11,17 @@
import { AppProvider } from '/@/components/Application';
import { useTitle } from '/@/hooks/web/useTitle';
import { useLocale } from '/@/locales/useLocale';
-
+ import MqttUnit from '@/utils/mqtt/mqttclient';
// 解决日期时间国际化问题
import 'dayjs/locale/zh-cn';
+ import { onMounted } from 'vue';
// support Multi-language
const { getAntdLocale } = useLocale();
useTitle();
+
+ onMounted(() => {
+ // 全局注册mqtt
+ new MqttUnit().mqttInit();
+ });
diff --git a/src/assets/images/ship.png b/src/assets/images/ship.png
new file mode 100644
index 0000000..36f64d5
Binary files /dev/null and b/src/assets/images/ship.png differ
diff --git a/src/utils/mqtt/mqttclient.js b/src/utils/mqtt/mqttclient.js
new file mode 100644
index 0000000..8eac835
--- /dev/null
+++ b/src/utils/mqtt/mqttclient.js
@@ -0,0 +1,138 @@
+// import * as mqtt from 'mqtt';
+// import $mitt from "../mitt/mitt";
+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 options = {
+ //mqtt配置
+ // port: 8083,//连接端口
+ protocolId: 'MQTT',
+ connectTimeout: 4000, //超时时间
+ clientID: 'mqtt_' + Math.random().toString(16).substr(2, 8),
+ 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 topicList = {
+// "ship/gps/100": "mqttShipShow",
+// //server=服务 warning=预警 +代表所有级别预警 1,2，3 zdgl=震动光缆
+// "server/warning/+/zdgl": "系统发布智能围网预警",
+// "/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`;
+
+ client = mqtt.connect(this.connectUrl, options);
+
+ 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!`);
+ // 不会订阅多个频道，所以遍历对象，循环监听多个频道
+ for (let key of 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) => {
+ const utf8decoder = new TextDecoder();
+ const dataString = utf8decoder.decode(message);
+ if (topic.startsWith('/server/')) {
+ $mitt.emit('deviceCmd', dataString);
+ }
+ });
+ }
+}
diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue
index 6675c7b..479a101 100644
--- a/src/views/earthMap/edit/EarthComp.vue
+++ b/src/views/earthMap/edit/EarthComp.vue
@@ -106,7 +106,7 @@
import { drawInit } from '@/utils/earthMap/earthDraw';
import { keyControlInit } from '@/utils/earthMap/keyControlInit';
import redFlag from '@/assets/earthMap/redFlag.png';
- import { addModel, addPin, addViewShedRadar } from '@/utils/earthMap/earthObj';
+ import { addModel, addPin, addViewShedRadar, addShipPrimitive } from '@/utils/earthMap/earthObj';
import hidePng from '@/assets/earthMap/hide.png';
import alarmImg from '@/assets/earthMap/alarm.gif';
import VideoFusionWin from './components/VideoFusionWin.vue';
@@ -114,9 +114,7 @@
import circleDot2 from '@/assets/earthMap/circleDot2.png';
import circleDot1 from '@/assets/earthMap/circleDot1.png';
import circleDot3 from '@/assets/earthMap/circleDot3.png';
-
- import {CircleScan} from '@/utils/earthMap/radarEntity'
- import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'
+ import { nextTick } from 'vue';
class HandleNodeType {
#sn;
@@ -526,6 +524,17 @@
monitorPosition: any = [];
///////////////////////////////////////////////////////////////////////////
+ // 当前船只位置信息
+ shipData: any = {};
+
+ // 在地球上绘制船只信息
+ drawShips() {
+ let shipData = this.shipData;
+ let imageUrl = new URL(`../../../assets/images/ship.png`, import.meta.url).href; // 替换为你的PNG图片路径
+ let shipModel = addShipPrimitive(shipData.longitude, shipData.latitude, 0, imageUrl, [shipData.azimuth, 0, 0], '123456', [1, 1, 1]);
+ console.log('shipModel', shipModel);
+ }
+
mounted() {
let that = this;
//随机数
@@ -629,6 +638,15 @@
this.clearAlarmModel(eventSerialNum);
}
});
+ // 监听mqtt消息
+ $mitt.on('deviceCmd', (message: any) => {
+ // 赋值船只数据
+ this.shipData = JSON.parse(JSON.parse(message).radarTrack);
+ // 绘制
+ nextTick(() => {
+ this.drawShips();
+ });
+ });
}
}
// 随机数