后台進度前台顯示進度條

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