动态溯源功能调试中

Riku

2025-05-14 fac3e813d205f000125eb8f7b2dd4976f4166edf

 src/views/sourcetrace/SourceTrace.vue

@@ -10,7 +10,11 @@
      <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>
            <el-text type="primary">{{ item.guid }}</el-text>
            <el-text type="primary">{{ ' | ' + item.status }}</el-text>
            <el-text type="primary">{{ ' | ' + item.startTime }}</el-text>
            <el-text type="primary">{{ ' | ' + item.endTime }}</el-text>
            <el-divider />
          </div>
        </div>
      </el-scrollbar>
@@ -18,8 +22,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 +43,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: ');
  };
  // 收到服务器发送的消息：event处理服务器返回的数据
  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>