zoukankan      html  css  js  c++  java
  • 后台进度前台显示进度条

    ElementUI 组件 Percentage 进度条

    Percentage 进度条基础用法

    <el-progress :percentage="100" status="success"></el-progress>

    其中 :percentage 的值可以是变量(:percentage="percentageNum"),不然也不能实时显示进度

    重难点还是怎么实时获取后天进度、总量。思路就是:

      1.后台设置一个全局变量,项目运行一步,这个全局变量就增加一下。通过函数获取全局变量实时数据。

      2.前台首先设置一个定时器(setInterval),每隔一段时间获取一次后台全局变量的值,在页面进行更新显示。

    后台代码

    定义两个方法。一个获取全局变量返回前台显示。另一个方法处理项目需要的正常数据。

    前台代码

    这里是点击一个按钮触发事件后,处理需要的数据并实时显示进度

     1 var proNum = setInterval(function(){
     2                     axios.post(host+'/groupData',{
     3                         method: 'checkProgress',
     4                     })
     5                         .then(res=>{
     6                             if(res.data.result_code == "success"){
     7                                 that.progressNum = res.data.data;
     8                                 that.percentageNum = (that.progressNum/that.strategyTotal)*100
     9                     }
    10                     })
    11                 }, 1000);
    定时器
     1 axios.post( host+'/groupData',  {
     2                     method:'addGroup',
     3                     strategyNum: that.strategyNum,
     4                 })
     5                 .then(res => {
     6                     clearInterval(proNum);
     7                     that.progressNum = 0;
     8                     that.percentageNum = 0;
     9                     if (res.data.result_code == "success") {
    10                         that.groupData = res.data.data;
    11                         //that.page = res.data.page;
    12                     } else {
    13                         that.$notify({ title: '警告', message: '连接异常', type: 'warning', duration: 4500, });
    14                     }
    15                 })
    正常连接后台处理数据

      

  • 相关阅读:
    2006百度之星
    使用StretchBlt之前一定要用SetStretchBltMode(COLORONCOLOR)
    算法学习建议(转)
    让ARM开发板上SD卡里的程序开机自动运行
    我的Dll(动态链接库)学习笔记
    WinCE 应用程序开机自动运行的又一种方法
    讲讲volatile的作用
    用Platform builder定制WinCE系统
    MFC如何高效的绘图
    利用c语言编制cgi实现搜索
  • 原文地址:https://www.cnblogs.com/xsmile/p/10419265.html
Copyright © 2011-2022 走看看