后台进度前台显示进度条
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 })