From 6c75516f1ba668873807cef33aa996d25cdf16c4 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 13 五月 2025 17:43:06 +0800
Subject: [PATCH] 新增动态溯源异常更新列表
---
src/views/sourcetrace/SourceTrace.vue | 82 +++++++++++++++++++++++++++
src/views/historymode/HistoryMode.vue | 4 +
src/api/index.js | 36 +----------
src/views/realtimemode/RealtimeMode.vue | 4 +
4 files changed, 92 insertions(+), 34 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index 559cc74..20d329d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -4,14 +4,17 @@
const debug = true;
let ip1 = 'http://47.100.191.150:9029/';
+let ws = `47.100.191.150:9030`;
// console.log(import.meta.env);
if (import.meta.env.VITE_DATA_MODE == 'jingan') {
ip1 = 'http://114.215.109.124:8805/';
+ ws = `114.215.109.124:9030`;
}
if (debug) {
ip1 = 'http://192.168.0.110:8084/';
// ip1 = 'http://locahost:8084/';
+ ws = `192.168.0.110:9030`;
}
const $http = axios.create({
@@ -94,40 +97,9 @@
);
});
-// const $http = {
-// get(url) {
-// const controller = new AbortController();
-// return {
-// con: controller,
-// resp: axiosInstance.get(url, { signal: controller.signal })
-// };
-// },
-// put(url, data) {
-// const controller = new AbortController();
-// return {
-// con: controller,
-// resp: axiosInstance.put(url, data, { signal: controller.signal })
-// };
-// },
-// post(url, data) {
-// const controller = new AbortController();
-// return {
-// con: controller,
-// resp: axiosInstance.post(url, data, { signal: controller.signal })
-// };
-// },
-// delete(url) {
-// const controller = new AbortController();
-// return {
-// con: controller,
-// resp: axiosInstance.delete(url, { signal: controller.signal })
-// };
-// }
-// };
-
function resToData(res) {
res.resp = res.resp.then((res) => res.data);
return res;
}
-export { $http, resToData };
+export { $http, resToData, ws };
diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue
index 10673f9..f46d807 100644
--- a/src/views/historymode/HistoryMode.vue
+++ b/src/views/historymode/HistoryMode.vue
@@ -28,6 +28,7 @@
:factor="factorDatas.factor[factorType]"
@change="handleLegendTypeChange"
></FactorLegend>
+ <SourceTrace></SourceTrace>
</el-row>
<el-row class="historical" justify="center">
<HistoricalTrajectory
@@ -69,6 +70,7 @@
import { FactorDatas } from '@/model/FactorDatas';
import TrendAnalysis from './component/TrendAnalysis.vue';
import DataSheet from './component/DataSheet.vue';
+import SourceTrace from '@/views/sourcetrace/SourceTrace.vue';
import { ElMessage } from 'element-plus';
import { fetchHistoryData } from '@/utils/factor/data';
import dataAnalysisApi from '@/api/dataAnalysisApi';
@@ -76,7 +78,7 @@
import { useSceneStore } from '@/stores/scene';
export default {
- components: { TrendAnalysis, DataSheet },
+ components: { TrendAnalysis, DataSheet, SourceTrace },
setup() {
// 闄愬畾鍒嗛〉鏁版嵁閲忎负10000
const { loading, fetchData } = useFetchData(10000);
diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue
index 240930d..af30d78 100644
--- a/src/views/realtimemode/RealtimeMode.vue
+++ b/src/views/realtimemode/RealtimeMode.vue
@@ -14,6 +14,7 @@
class="m-t-2"
:factor="factorDatas.factor[factorType]"
></FactorLegend>
+ <!-- <SourceTrace></SourceTrace> -->
</el-row>
<DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard>
<RealTimeTrend
@@ -34,6 +35,7 @@
import DashBoard from './component/DashBoard.vue';
import RealTimeTrend from './component/RealTimeTrend.vue';
import DeviceChange from './component/DeviceChange.vue';
+import SourceTrace from '@/views/sourcetrace/SourceTrace.vue';
import { realTimeMapAnimation } from '@/utils/map/animation';
import {
fetchHistoryData,
@@ -45,7 +47,7 @@
// const mapAnimation = new MapAnimation();
export default {
- components: { DashBoard, RealTimeTrend, DeviceChange },
+ components: { DashBoard, RealTimeTrend, DeviceChange, SourceTrace },
setup() {
const { loading, fetchData } = useFetchData(10000);
return { loading, fetchData };
diff --git a/src/views/sourcetrace/SourceTrace.vue b/src/views/sourcetrace/SourceTrace.vue
new file mode 100644
index 0000000..a58da81
--- /dev/null
+++ b/src/views/sourcetrace/SourceTrace.vue
@@ -0,0 +1,82 @@
+<template>
+ <BaseCard>
+ <template #content>
+ <div>
+ <el-input type="text" v-model="inputVal" />
+ <button @click="handleSend">send</button>
+ <button @click="handleLink">link</button>
+ </div>
+ <div>涓氬姟鐘舵�佷腑鎺�</div>
+ <el-scrollbar ref="scrollbarRef" :height="height">
+ <div ref="scrollContentRef">
+ <div v-for="(item, index) in streams" :key="index">
+ <el-text type="primary">[{{ item }}]: </el-text>
+ </div>
+ </div>
+ </el-scrollbar>
+ </template>
+ </BaseCard>
+</template>
+<script setup>
+import { reactive, ref, onMounted, onUnmounted, inject } from 'vue';
+import { ws } from '@/api/index';
+
+const height = `60vh`;
+
+const scrollContentRef = ref();
+const scrollbarRef = ref();
+
+function scrollToBottom() {
+ const h1 = scrollContentRef.value.clientHeight + 100;
+ setTimeout(() => {
+ scrollbarRef.value.setScrollTop(h1);
+ }, 100);
+}
+
+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);
+ };
+};
+
+/**
+ * 娣诲姞涓�鏉″伐浣滄祦淇℃伅
+ * @param {*} data
+ */
+function putWorkStream(data) {
+ const obj = JSON.parse(data);
+ streams.push(obj);
+ scrollToBottom();
+}
+</script>
--
Gitblit v1.9.3