日期档案
< >
日 一 二 三 四 五 六

文章分类

前端开发(1)

软件设计(1)

转载(6)

文章标签

Html/Css(2)

教程分享(1)

嵌入式(1)

点赞 82 阅读 134 评论 4 点踩 6

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

后端处理数据处理逻辑特别多的时候，并不会很及时返回数据，一般情况后端给前端返回进度，这个目前是前端自己返回进度到90，等到接口返回完成再到100%

1、设置全局样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="loading-overlay" v-show="PageController.nextLoading">
  <div class="loading-content">
    <div style="text-align: center; padding: 20px">
      <a-progress
        type="circle"
        :percent="PageController.progressPercent"
        :status="
          PageController.progressPercent === 100 ? 'success' : 'active'
        "
      />
      <p style="margin-top: 10px">
        名单正在生成中，请您耐心等待。若您提前退出，该任务将在后台继续执行，您可稍后在任务列表中查看结果。
      </p>
    </div>
  </div>
</div>

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.loading-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
}

　　

1
2
3
@observable nextLoading = false;
@observable progressPercent = 0;
@observable progressInterval = null;

2、当触发的时候就调用进度条展示方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
async onSubmit() {
  this.subLoading = true;
   
  //设置进度条状态开始
  this.PageController.setNextLoading(true);
   
  try {
    let data = this.PageController.uploadList.map((v) => {
      return {
        channelSize: v.channelSize ? v.channelSize : 0,
        id: v.id,
      };
    });
     
    // 启动进度条
    this.startProgressIncrement();
    let res = await this.PageController.submitChannelSize(data);
    this.$message.success('提交成功');
    // 接口调用成功后，确保进度条至少运行一段时间再完成
    this.completeProgress();
    //关闭进度条
    this.PageController.setNextLoading(false);
     
    this.subLoading = false;
    this.PageController.changeSubmitAfter(true);
    this.$router.replace({
      ...this.$Pages
        .Region_plan_jurisdiction_list_management_bpp_configuration_list,
      query: {
        id: this.$route.query.id,
        batchDate: this.$route.query.batchDate,
        salesType: 'bpp',
        status: 'details',
      },
    });
  } catch (error) {
  //如果接口报错就清空进度条
    if (this.PageController.progressInterval) {
      clearInterval(this.PageController.progressInterval);
      this.PageController.changeProgressInterval(null);
    }
    this.PageController.setNextLoading(false);
     
    this.subLoading = false;
  }
}

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
startProgressIncrement() {
  // 重置进度
  this.PageController.changeProgressPercent(0);
 
  // 每100ms增加5%的进度，直到95%
  let progress = 0;
  const increment = 5;
  const intervalTime = 100;
  const maxProgress = 95;
 
  let interval = setInterval(() => {
    progress += increment;
 
    // 确保进度不超过最大值
    if (progress >= maxProgress) {
      progress = maxProgress;
    }
 
    this.PageController.changeProgressPercent(progress);
    this.PageController.changeProgressInterval(interval);
  }, intervalTime);
}
// 完成进度条，确保有良好的用户体验
completeProgress() {
  // 清除现有的定时器
  if (this.PageController.progressInterval) {
    clearInterval(this.PageController.progressInterval);
    this.PageController.changeProgressInterval(null);
  }
 
  // 设置一个最小持续时间，确保用户能看到进度条的变化
  const minDuration = 1000; // 最小持续时间1秒
  const startTime = Date.now();
 
  // 立即将进度设置为95%
  this.PageController.changeProgressPercent(95);
 
  // 使用新的定时器完成最后的进度
  let interval = setInterval(() => {
    const elapsed = Date.now() - startTime;
 
    if (elapsed >= minDuration) {
      // 时间到了，完成进度条
      this.PageController.changeProgressPercent(100);
      clearInterval(interval);
      this.PageController.setNextLoading(false);
    } else {
      // 根据已用时间计算进度
      const progress = 95 + (5 * elapsed) / minDuration;
      this.PageController.changeProgressPercent(Math.min(progress, 99));
    }
  }, 50);
}

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。


__EOF__

  • 本文作者： 林恒
  • 本文链接： https://www.cnblogs.com/smileZAZ/p/19810764
  • 关于博主： 评论和私信会在第一时间回复。或者直接私信我。
  • 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
  • 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。
    • posted @  2025-12-05   Doro  阅读(134)   评论(4)   点赞(82)
    82
    6
    请先登录
    • #1楼 2026-08-21 08:38:51 Doro 回复
      11

    登录发表评论