From a96e571b174fa30697f3aa6fdb22b3cf93d21b71 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 14 五月 2025 17:32:06 +0800
Subject: [PATCH] 动态溯源 1. 添加websocket逻辑
---
src/views/sourcetrace/SourceTrace.vue | 49 +++++-----------
src/views/historymode/HistoryMode.vue | 2
src/api/index.js | 2
src/api/websocket.js | 69 +++++++++++++++++++++++
src/views/realtimemode/RealtimeMode.vue | 37 +++++++----
5 files changed, 109 insertions(+), 50 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index 20d329d..cfe583e 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -14,7 +14,7 @@
if (debug) {
ip1 = 'http://192.168.0.110:8084/';
// ip1 = 'http://locahost:8084/';
- ws = `192.168.0.110:9030`;
+ ws = `192.168.0.110:9031`;
}
const $http = axios.create({
diff --git a/src/api/websocket.js b/src/api/websocket.js
new file mode 100644
index 0000000..1bb3cc4
--- /dev/null
+++ b/src/api/websocket.js
@@ -0,0 +1,69 @@
+import { ws } from '@/api/index';
+
+var socket;
+var onMsgEvents = [];
+
+const MAX_TRY_TIMES = 5;
+let tryTimes = 0;
+
+function startSocket() {
+ if (socket) {
+ socket.close();
+ }
+ const url = 'ws://' + ws + '/ws';
+ socket = new WebSocket(url);
+ // 涓庢湇鍔″櫒寤虹珛杩炴帴锛氬彂閫佹秷鎭埌鏈嶅姟鍣�
+ socket.onopen = () => {
+ console.log('connect: ');
+ };
+ // 鏀跺埌鏈嶅姟鍣ㄥ彂閫佺殑娑堟伅锛歟vent澶勭悊鏈嶅姟鍣ㄨ繑鍥炵殑鏁版嵁
+ socket.onmessage = (event) => {
+ console.log('receive: ', event.data);
+ onMsgEvents.forEach((e) => {
+ if (typeof e === 'function') {
+ e(event.data);
+ }
+ });
+ };
+ // 杩炴帴鎴栭�氫俊杩囩▼涓彂鐢熼敊璇�
+ socket.onerror = (event) => {
+ console.log('errror: ', event);
+ };
+ // 涓庢湇鍔″櫒鏂紑杩炴帴
+ socket.onclose = (event) => {
+ console.log('close: ', event.code);
+ // setTimeout(() => {
+ // if (tryTimes < MAX_TRY_TIMES) {
+ // startSocket();
+ // tryTimes++;
+ // } else {
+ // tryTimes = 0;
+ // }
+ // }, 5000);
+ };
+}
+
+if (socket == undefined) {
+ startSocket();
+}
+
+function send(value) {
+ if (socket) {
+ socket.send(value);
+ }
+}
+
+function registerReceiveEvent(event) {
+ if (onMsgEvents.indexOf(event) == -1) {
+ onMsgEvents.push(event);
+ }
+}
+
+function removeReceiveEvent(event) {
+ const index = onMsgEvents.indexOf(event);
+ if (index != -1) {
+ onMsgEvents.splice(index, 1);
+ }
+}
+
+export default { send, registerReceiveEvent, removeReceiveEvent };
diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue
index f46d807..dc4a863 100644
--- a/src/views/historymode/HistoryMode.vue
+++ b/src/views/historymode/HistoryMode.vue
@@ -28,7 +28,7 @@
:factor="factorDatas.factor[factorType]"
@change="handleLegendTypeChange"
></FactorLegend>
- <SourceTrace></SourceTrace>
+ <!-- <SourceTrace></SourceTrace> -->
</el-row>
<el-row class="historical" justify="center">
<HistoricalTrajectory
diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue
index af30d78..86b798a 100644
--- a/src/views/realtimemode/RealtimeMode.vue
+++ b/src/views/realtimemode/RealtimeMode.vue
@@ -14,7 +14,7 @@
class="m-t-2"
:factor="factorDatas.factor[factorType]"
></FactorLegend>
- <!-- <SourceTrace></SourceTrace> -->
+ <SourceTrace></SourceTrace>
</el-row>
<DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard>
<RealTimeTrend
@@ -43,8 +43,12 @@
clearFetchingTask
} from '@/utils/factor/data';
import thirdPartyDataApi from '@/api/thirdPartyDataApi';
+import websocket from '@/api/websocket';
// const mapAnimation = new MapAnimation();
+
+// 璋冭瘯妯″紡
+const mode = 'debug';
export default {
components: { DashBoard, RealTimeTrend, DeviceChange, SourceTrace },
@@ -103,24 +107,29 @@
// this.draw();
this.factorDatas = fDatas;
});
+ if (mode == 'debug') {
+ websocket.send(JSON.stringify(data));
+ }
},
fetchRealTimeData() {
this.fetchData((page) => {
- return fetchHistoryData(
- {
- deviceCode: this.deviceCode,
- // startTime: '2024-08-20 06:00:00',
- // endTime: '2024-08-20 06:02:00',
- page,
- perPage: 100
- },
- false
- ).then((res) => {
+ const param =
+ mode == 'debug'
+ ? {
+ deviceCode: this.deviceCode,
+ startTime: '2025-01-16 11:30:00',
+ endTime: '2025-01-16 11:32:00',
+ page,
+ perPage: 100
+ }
+ : {
+ deviceCode: this.deviceCode,
+ page,
+ perPage: 100
+ };
+ return fetchHistoryData(param, false).then((res) => {
this.onFetchData(res.data);
this.onMapData(res.data);
- // if (res.data.length > 0) {
- // this.fetchNextData(res.data[res.data.length - 1].time);
- // }
this.fetchNextData();
thirdPartyDataApi.fetchLatestData(this.deviceType, this.deviceCode);
});
diff --git a/src/views/sourcetrace/SourceTrace.vue b/src/views/sourcetrace/SourceTrace.vue
index a58da81..b4a2a63 100644
--- a/src/views/sourcetrace/SourceTrace.vue
+++ b/src/views/sourcetrace/SourceTrace.vue
@@ -18,8 +18,12 @@
</BaseCard>
</template>
<script setup>
+/**
+ * 鍔ㄦ�佹函婧愪俊鎭鐞�
+ * 閫氳繃websocket鏂瑰紡鎺ユ敹鍚庣鎺ㄩ�佺殑寮傚父淇℃伅骞跺睍绀�
+ */
import { reactive, ref, onMounted, onUnmounted, inject } from 'vue';
-import { ws } from '@/api/index';
+import websocket from '@/api/websocket';
const height = `60vh`;
@@ -35,48 +39,25 @@
const streams = reactive([]);
-let socket;
-
const inputVal = ref('');
const handleSend = () => {
- if (socket) {
- socket.send(inputVal.value);
- }
-};
-
-const handleLink = () => {
- if (socket) {
- socket.close();
- }
- const url = 'ws://' + ws + '/ws';
- // socket = new WebSocket(`ws://192.168.0.138:8080/workstream`)
- socket = new WebSocket(url);
- // 涓庢湇鍔″櫒寤虹珛杩炴帴锛氬彂閫佹秷鎭埌鏈嶅姟鍣�
- socket.onopen = () => {
- console.log('connect: ');
- };
- // 鏀跺埌鏈嶅姟鍣ㄥ彂閫佺殑娑堟伅锛歟vent澶勭悊鏈嶅姟鍣ㄨ繑鍥炵殑鏁版嵁
- socket.onmessage = (event) => {
- console.log('receive: ', event.data);
- putWorkStream(event.data);
- };
- // 杩炴帴鎴栭�氫俊杩囩▼涓彂鐢熼敊璇�
- socket.onerror = (event) => {
- console.log('errror: ', event);
- };
- // 涓庢湇鍔″櫒鏂紑杩炴帴
- socket.onclose = (event) => {
- console.log('close: ', event.code);
- };
+ websocket.send(inputVal.value);
};
/**
* 娣诲姞涓�鏉″伐浣滄祦淇℃伅
* @param {*} data
*/
-function putWorkStream(data) {
+const putWorkStream = (data) => {
const obj = JSON.parse(data);
streams.push(obj);
scrollToBottom();
-}
+};
+
+onMounted(() => {
+ websocket.registerReceiveEvent(putWorkStream);
+});
+onUnmounted(() => {
+ websocket.removeReceiveEvent(putWorkStream);
+});
</script>
--
Gitblit v1.9.3