1. 设置日志文件显示

<li>标签中为每一行日志内容显示

 <div class="log-container">
    <div class="alg-title">日志文件</div>
    <div class="algLog-content" id="algLog">
      <ul>
        <li v-for="i in algLog" ref="algLogRef" :key="i.id">{
   
   { i }}</li>
      </ul>
    </div>
  </div>

2. 使用websocket获取日志文件

  // log 日志自动滚动到底部
  var logBox = document.getElementById("algLog");
  logBox.scrollTop = logBox.scrollHeight;

const algLog = reactive<any>([]);

//使用websocket获取日志内容
function startEventBus() {
  let eb = new EventBus(
    `${import.meta.env.VITE_GRAPHQL_SCHEME}://${
      import.meta.env.VITE_GRAPHQL_HOST
    }/eventbus`
  );
  eb.enableReconnect(true);
  eb.onopen = function () {
    console.info("bus onopen");
    eb.registerHandler(
      `mpai://ws/TrainTaskRuntime/${trainingData.value?.id}`,
      function (err: any, msg: { body: { payload: { line: any } } }) {
        if (err) {
          return;
        }
        const bodyData = msg.body;
        if (bodyData.type === "TrainTaskLog") {
          algLog.push(bodyData.payload.line);    
        }
        // log 日志自动滚动到底部
        var logBox = document.getElementById("algLog");
        logBox.scrollTop = logBox.scrollHeight;
      }
    );
  };
  eb.onclose = (e: any) => {
    console.log("bus onclose", e);
  };
  eb.onerror = (e: any) => {
    console.log("bus onerror", e);
  };
  eventBusObj = eb;
}

//在进入页面执行startEventBus方法
onMounted(() => {
  startEventBus();
});