From 9c2775462b02fae4ff0011b1c7df4dde04d80f2b Mon Sep 17 00:00:00 2001 From: Fuyuu <1805498209@qq.com> Date: Tue, 2 Jan 2024 16:31:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0mqtt=E6=B6=88=E6=81=AF?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=EF=BC=8C=E9=80=9A=E8=BF=87CDN=E9=93=BE?= =?UTF-8?q?=E6=8E=A5=E5=BC=95=E5=85=A5=EF=BC=8Cnpm=E4=BE=9D=E8=B5=96?= =?UTF-8?q?=E5=8C=85=E6=97=A0=E6=B3=95=E4=B8=8B=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 +- src/App.vue | 8 +- src/assets/images/ship.png | Bin 0 -> 1878 bytes src/utils/mqtt/mqttclient.js | 138 ++++++++++++++++++++++++++ src/views/earthMap/edit/EarthComp.vue | 26 ++++- 5 files changed, 170 insertions(+), 10 deletions(-) create mode 100644 src/assets/images/ship.png create mode 100644 src/utils/mqtt/mqttclient.js 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 0000000000000000000000000000000000000000..36f64d58f4647ed87682766d8399abb1cfc5a778 GIT binary patch literal 1878 zcmV-c2dVgpP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D2J1;gK~#8N?VVX~ z6h{z%yL!eL#33gN=13q37~6Ybz}z_r;ZWi{B!49TG)kmINQ4~917Pp2IreabwbPxR z-Li>T8(+KARn`4T)^z#F@_t>_+tX8{B9TZW5{X12kw_#GiA1E+s+E7lVbEy21_vm+ z&|Io~ieaz>DZq<=&cEXnxTlr<9)A@qK?;!W&ld74fQka(H7o#n0$8P{R+eXP_I?*A zfeK)I0_2#k{sD(U5}W{?TIpLi^$%m1uLgrI0|90Ly*~Sqb1TcG8#oS*-~_PNeuu+# zOjiY427(fxH`76##_%-&!Ipub1jsTyF#D0|l}7nGj)Nj70rK5H91dVI8)O*>Mu6ty znHhJv*pD_K&@vE=0D51t>Fh^lTp75A<6sD>1Z*WhklzM^5TNyR>Zr2nHiny{!`l=J zLI6niZ8`gq*-oQ!6~{pkh5*}0|Ld5rZV`(Yz*?2KpUuAi4`5YT>j3crtTZYME(Pqz za66Pb_39NIi$}Zw#+Yr-{&j3PWk9?DfQLVJg0Su20;E+_lZ4ggi|)Mqba zBpT5I=(p_sZ;4HUClp}#yj(tl)Kk#5KUs1#nzwFI6t!SQMfJXw@rUxyxif8ZMw^E(S#j@U{m(_KMUp zAgu(9OaRBl_R`E8j>RBGfL@KZY8JzhV09`k3y2Y56s!L?0f9%w#0X$^aPoH#Txu`Q zp2x8WL|vm$1H4{2pUga7~oeSb#D{Hx{OX(JJ^7ob)v zA99JgNCDKUpk@;61vpUfho1vVPBRJi0u-G7*SP#@xl+b4YXqzTiq8N!tC$B4sv4UX<@U!>76`E`spMa)V7*hAa5BCv+vrVtweUM}`t`Su}(Bmsb%FKd-43|YWN z0IhxA``jK1=-TA$#Iaxh!jLTFGk{JB-TU7GspfG~ zh`a#4PyX&2CS`zh39we_PQBE2f93)F6)U)w8??-$YOKG1JA}fIV!?@4> zJ~j%lTVx2J)R+H0E1$+OIYUZA|(~mFf(mgg#QUEYU%Isf*Y#AUa0M(Pfy9aLN z%`7n>1vvrQweoRrU!O1(Lq@cx5IF&iVY>If1x{*`Wq_OjyLsO~6TVtmp8EjDWFRHL zqeoNYpv8Rs8z9TNa}9Ng+}Kc;mrOVPbLP7v84}K06BF!Yc3$XmSdI}VLf?+V& zOp_=B-UZl~2D18p6R>ylJD(VN!@B_NkACj~AW#Op3b431chLPCf)&6T|3}5V3UE+& z^ADf=6Urk4;9h&F>UH { +// 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(); + }); + }); } } // 随机数