后台进度前台显示进度条

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);

定时器