From 52bcd69f4144478e42718da688fbbac9af9ffe29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=9B=E6=B4=9B=E5=B8=8C=E9=9B=85?= Date: Wed, 8 May 2024 14:39:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=81=9C=E5=92=8C=E5=80=92=E5=B8=A6?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/mqtt/index.vue | 116 ++++++++++++++++++++++++++++----------- 1 file changed, 84 insertions(+), 32 deletions(-) diff --git a/src/views/mqtt/index.vue b/src/views/mqtt/index.vue index e4feeb9..c1aab69 100644 --- a/src/views/mqtt/index.vue +++ b/src/views/mqtt/index.vue @@ -19,7 +19,7 @@ const password = $toRef(mqttStore, 'password') const clientId = $toRef(mqttStore, 'clientId') let loading = $ref(false) -const publishing = reactive({ +const publish = reactive({ status: false, index: 0, count: 1, @@ -27,8 +27,17 @@ const publishing = reactive({ startTimestamp: 0, lastTime: 0, lastTimestamp: 0, + lastRawTimestamp: 0, + timeOffset: 0, + timeTicking: 1, onlineCars: 0, - percentage: 0 + percentage: 0, + pause: false, + rawTime: true, + range: { + start: 0, + end: 0 + } }) const active = $ref('CLC_track') @@ -39,11 +48,11 @@ function connect() { clientId }) mqttClient.on('connect', (it) => { - publishing.status = true + publish.status = true }) mqttClient.on('error', (it) => { - publishing.status = false + publish.status = false console.error(it) }) } @@ -52,14 +61,14 @@ async function disconnect() { jobCancel.value?.() await mqttClient?.endAsync() mqttClient = null - publishing.status = false + publish.status = false } onUnmounted(() => { disconnect() }) -async function publish() { +async function doPublish() { let jsonModule: DataLibContent try { loading = true @@ -73,43 +82,74 @@ async function publish() { return } const list = jsonModule - let i = 0 + publish.index = 0 function next() { - i++ - if (i >= list.length) i = 0 - return list[i] + if (!publish.pause) { + publish.index += publish.timeTicking + if (publish.index >= list.length) publish.index = 0 + else if (publish.index < 0) publish.index = list.length - 1 + } + return list[publish.index] } let exit = false jobCancel.value = () => { exit = true jobCancel.value = null - publishing.startTimestamp = 0 + publish.startTimestamp = 0 } - publishing.startTime = Date.now() - publishing.count = list.length + publish.startTime = Date.now() + publish.count = list.length + publish.pause = false + publish.rawTime = true // 发送数据的定时器 const interval = setInterval(() => { if (exit) { clearInterval(interval) return } - const item = next() - publishing.lastTime = Date.now() + // if (publishing.pause) return + publish.lastTime = Date.now() + + let item = next() + // 判断下有没有内容，防止空指针 if (item[0]?.content[0]) { - publishing.lastTimestamp = item[0].content[0].timeStamp - if (publishing.startTimestamp === 0) { - publishing.startTimestamp = publishing.lastTimestamp + // 设置时间 + publish.lastRawTimestamp = item[0].content[0].timeStamp + // 处理暂停等操作对时间的影响 + if (!publish.rawTime) { + if (publish.pause) publish.timeOffset += 100 + else if (publish.timeTicking < 0) publish.timeOffset += 200 + const offset = publish.timeOffset + publish.lastTimestamp = publish.lastRawTimestamp + publish.timeOffset + // 由于时间发生变化，对所有车辆的时间进行替换 + item = JSON.parse(JSON.stringify(item)) + const list = item[0].content + for (const it of list) it.timeStamp = it.timeStamp + offset + } else { + publish.lastTimestamp = publish.lastRawTimestamp + } + if (publish.startTimestamp === 0) { + publish.startTimestamp = publish.lastTimestamp } } - publishing.onlineCars = item[0]?.content?.length ?? 0 - publishing.index = i - publishing.percentage = Number(((publishing.index / (publishing.count | 1)) * 100).toFixed(2)) + publish.onlineCars = item[0]?.content?.length ?? 0 + publish.percentage = Number(((publish.index / (publish.count | 1)) * 100).toFixed(2)) const json = JSON.stringify(item) mqttClient!.publish(topic, json, {}) }, 100) } + +function pause() { + publish.pause = true + publish.rawTime = false +} + +function reverse() { + publish.timeTicking = -1 + publish.rawTime = false +}