当前位置：首页 > news >正文

模型训练进度条的代码

news 2025/7/6 4:44:11

在这里插入图片描述

这个内容难在什么地方呢？我想要跳转到另一个页面的时候如何保存当前的训练状态，本来还想着加一个页面去管理进度的。然后想到了localstorage，将一些信息存储到浏览器中去。

进度条展示

  <el-form-item label="训练进度" v-show="isTraining"><div style="width: 300px;"> <!-- 控制宽度 --><el-progress:percentage="progress":stroke-width="20"status="success":striped="true":striped-flow="true"/></div></el-form-item>

import {onMounted} from "vue";onMounted(() => {// 通过钩子函数 拿到进度和训练progress.value = Number(localStorage.getItem('progress')) || 0;isTraining.value = localStorage.getItem('isTraining') === 'true'if (isTraining.value) {startPolling()}
})

const isTraining = ref(false) //是否进行训练const progress = ref()  //训练的进度const pollInterval = ref(null) //定时器

开始训练函数

localStorage.setItem('isTraining', 'true')
isTraining.value = true
progress.value = 0
startPolling();

const startPolling = () => {pollInterval.value = setInterval(() => {progress.value += 5;// 将进度保存到 localStoragelocalStorage.setItem('progress', progress.value);if (progress.value >= 100) {progress.value = 0;localStorage.removeItem('isTraining')ElMessage.success('模型训练成功,请前往查看模型评价')isTraining.value = falseclearInterval(pollInterval.value)pollInterval.value = null}}, 1000)
}