模型训练进度条的代码

这个内容难在什么地方呢？ 我想要跳转到另一个页面的时候 如何保存当前的训练状态，本来还想着加一个页面去管理进度的。然后想到了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;
    // 将进度保存到 localStorage
    localStorage.setItem('progress', progress.value);
    if (progress.value >= 100) {
    
    
      progress.value = 0;
      localStorage.removeItem('isTraining')
      ElMessage.success('模型训练成功,请前往查看模型评价')
      isTraining.value = false
      clearInterval(pollInterval.value)
      pollInterval.value = null
    }
  }, 1000)
}