avue 项目里自定义进度条

由于数据过大，产品要求要有进度条，给用户友好体验。
需要后端接口配合，要不前端无法计算上传数据量

 <div
      style="position: fixed;width: 100%;height: 100%;background-color:rgba(0,0,0,.6);z-index: 55555555555555555;top: 0;right: 0;display: flex;align-items: center;justify-content: center;"
      v-if="openProgress">
      <div style="width: 400px;margin: 0 auto;position:relative;z-index:5555555555555555;" >
        <div style="margin-bottom: 20px;font-size: 22px;color: white;">
          <i class="el-icon-loading"></i>导入进度：
        </div>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="nowProgress" ></el-progress>
      </div>

    </div>

export default {
	  data() {
	         return {
		      openProgress: false,
		      nowProgress: "0",
	      }
	 }
}
方法
  // 同步/
    handleTb() {
      tbStudentsDataApi(this.$route.query.id).then((res) => {
        console.log("班级数据", res);
        if (res.data.code == 200) {
          this.ProgressData = res.data.data;
          this.openProgress = true;
          progressFn();
        }
      });
      var _this = this;
      function progressFn() {
        console.log("数据 进度 参数", _this.ProgressData);
        //  进度条/
        getprogressApi({
          studentDataManageId: _this.ProgressData.studentDataManageId,
          total: _this.ProgressData.total,
        }).then((res) => {
          //  原有数据条数
          let alltotal = _this.ProgressData.total;
          // 当前数据条数
          let num = res.data.data;
          //  判断当前条数是否小于原有条数  

          if (num < alltotal) {
            // 如果小于继续调用进度条接口 
            _this.nowProgress = Math.round((num / alltotal) * 1000) / 10;
            setTimeout(() => {
              progressFn();
            }, 2000);
          } else {
            // 如果不小于说明数据已经同步完成 取消弹框 进度条100%
            _this.nowProgress = 100;
            setTimeout(() => {
              _this.openProgress = false;
              _this.$message.success("导入成功");
              _this.onLoad(_this.page);
            }, 500);
          }
          console.log("数据 进度", res);
        });
      }
    },