后台进度前台显示进度条

ElementUI 组件 Percentage 进度条

Percentage 进度条基础用法

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

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

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

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

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

后台代码

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

前台代码

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

var proNum = setInterval(function(){
                    axios.post(host+'/groupData',{
                        method: 'checkProgress',
                    })
                        .then(res=>{
                            if(res.data.result_code == "success"){
                                that.progressNum = res.data.data;
                                that.percentageNum = (that.progressNum/that.strategyTotal)*100
                    }
                    })
                }, 1000);

axios.post( host+'/groupData',  {
                    method:'addGroup',
                    strategyNum: that.strategyNum,
                })
                .then(res => {
                    clearInterval(proNum);
                    that.progressNum = 0;
                    that.percentageNum = 0;
                    if (res.data.result_code == "success") {
                        that.groupData = res.data.data;
                        //that.page = res.data.page;
                    } else {
                        that.$notify({ title: '警告', message: '连接异常', type: 'warning', duration: 4500, });
                    }
                })