重庆便宜做网站的,青岛网站制作辰星辰,网站开发安全问题,站长工具果冻传媒vue处理后端返回的日志#xff0c;并保持日志内容最新#xff08;滚动到最新内容#xff09; 1、后端返回的日志格式如下所示#xff0c;该如何处理成正常的文本换行
2、在获取日志的接口中做如下处理#xff0c;把返回的/n替换成换行标签#xff0c;并根据任务状态判断…vue处理后端返回的日志并保持日志内容最新滚动到最新内容 1、后端返回的日志格式如下所示该如何处理成正常的文本换行
2、在获取日志的接口中做如下处理把返回的/n替换成换行标签并根据任务状态判断日志是否需要轮询
getLogInfo(id) {this.$axios.get(/ai/train/logs/${id}).then((res) {if (res.data.code 200) {this.logText ;if (res.data.data) {res.data.data.forEach((item) {this.logText item.replace(/\n/g, br/);});if ( this.modelInfo.status 0 ) {this.startPolling();} else {this.endPolling();} this.scrollToBottom();} else {this.logText 暂无日志信息;}}
})3、在html中使用为标签设置v-html
div classlog-box-content-text v-htmllogText idlogCon/div4、轮询日志一般日志是需要实时更新的所以需要根据任务状态轮询日志
startPolling() {this.pollTimer setTimeout(() {this.getLogInfo(this.id);}, 5000);
},
endPolling() {clearInterval(this.pollTimer);
},5、滚动条保持最底部方法在获取日志的接口调用 scrollToBottom() {this.$nextTick(() {var container document.querySelector(#logCon);container.scrollTop container.scrollHeight;});},轮询相关资源vue中数据状态轮询
