Element ui +vue+webService实现传送进度实时显示

客户端调用webService服务推送文件及数据到服务端，实时显示推送进度

 

1.调用webService服务向服务端推送PDF、DWG文件

受网络，文件大小、数据库表设计影响，推送效率较低，用户反馈不知道推送的进度，故在推送时锁定当前页面，并增加推送进度条显示；

2. 进度条

前端框架使用vue + element ui ,故选用element ui 组件中的进度条

Element组件地址 : (https://element.eleme.cn/#/zh-CN/component/progress)

直接贴代码(红色重点)：

jsp页面：

<el-dialog title="推送"  :visible.sync="filePushVisible" width="45%"  :before-close="handleClose" 
                       :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
                    <el-form :model="filePushForm" ref="filePushForm" :inline="true" ref="filePushForm">
                    <el-row style="margin-top:20px">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="1">XX报告</el-checkbox>
                        <el-checkbox label="2" style="margin-left:58px">XX说明</el-checkbox>
                        <el-checkbox label="3"  style="margin-left:86px">XX图纸</el-checkbox>
                        <el-checkbox label="4"  style="margin-left:72px">设计XX</el-checkbox>
                        </el-row>
                    </el-checkbox-group>
                </el-row>    
                 </el-form>
                <div slot="footer" class="dialog-footer">
                       <el-button size="medium" @click="clearForm(''),filePushVisible = false,isShow = false,loading = false" :disabled="isShow">取 消</el-button>
                    <el-button size="medium" type="primary" :disabled="isShow"  @click="filePushbution('filePushForm')">确定</el-button>
                </div>
                <el-row v-if="loading == true" style="margin-top:30px"><span>推送文件进度：</span></el-row>
                <el-progress style="margin-top:20px" :stroke-width="15" v-if="loading == true" :text-inside="true"  :percentage="filePushPercentage"></el-progress>
            </el-dialog>

Js代码：

当点击确定是触发定时任务，通过后台查询返回进度数据，用于:percentage="filePushPercentage"赋值

//文件推送
        filePushbution : function(){
            this.filePushPercentage =  0；

            //定时任务
            this.timer = setInterval(this.get, 4000);
            this.$http.post(basePath + 'xxxxxxController/getxxxxxxxxxxx', {
                taskIds : xxxxx
            }, {
                emulateJSON : true
            }).then(function(res) {
                    this.filePushPercentage =  100;
                    clearInterval(this.timer);
                    vue.$notify({
                        title : '提示',
                        message : '文件推送成功',
                        type : 'success'
                    });
            }, function(res) {
            });
        }

//定时任务，当触发推送确定按钮时，查询推送进度
        get() {
            $.ajax({
                type: 'post',
                url: basePath +"/xxxxxxxxController/getPercentage",
                async:true,
                success: function(data){
                    vue.filePushPercentage = parseInt(data);
                    console.info(vue.filePushPercentage);
                }
            })
          }

 

Java代码：

思路：

后台new一个推送比例常量 public static int percentage = 0，每次推送时首先记录所需要推送的文件总数 fileCount 、已推送文件个数pushCount，循环推送，每推送一次pushCount加1，然后计算推送比例：

percentage = (100/fileCount)*pushCount;（模后取整，求百分比）

然后调用定时方法，实时返回推送百分比：
    @RequestMapping(value = "/getPercentage")
    @ResponseBody
    public int getPercentage(HttpServletRequest request,
            HttpServletResponse response) {
                return percentage;
    }

3. 遇到的问题

1.每次推送成功后需要将推送比例常量 percentage 重置为0，否则再次推送将按100%叠加；

2.需要在推送完成后，清空定时函数；