Element ui +vue+webService实现传送进度实时显示
客户端调用webService服务推送文件及数据到服务端,实时显示推送进度1.调用webService服务向服务端推送PDF、DWG文件受网络,文件大小、数据库表设计影响,推送效率较低,用户反馈不知道推送的进度,故在推送时锁定当前页面,并增加推送进度条显示;2. 进度条前端框架使用vue + element ui ,故选用element ui 组件中的进度条Element...
客户端调用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.需要在推送完成后,清空定时函数;
更多推荐
所有评论(0)