实操案例-进度条原创
9人赞赏了该文章
2,678次浏览
编辑于2020年06月23日 11:43:46
工作中经常使用到进度条控件优化交互体验,由于服务端处理的逻辑耗时长,同步执行会使前端页面卡死,可能导致系统自动退出。为了良好的用户体验,考虑是用进度条定时获取服务端处理信息,异步处理迁移逻辑。
由于开发架构需要,进度条实现逻辑分为两个部分编写,进度显示和获取进度信息写在客户端Business层插件,执行逻辑放在服务端App层。
具体需求如下:
由于进度条显示逻辑和执行逻辑不在同个组件,无法同步对进度条的进度直接赋值;
需要将执行逻辑和获取进度更新逻辑独立开发,异步执行复杂逻辑,并定时请求最新执行进度返回至客户端更新进度条信息。
客户端逻辑
1、使用OnQueryProgressValue触发获取进度的逻辑
//进度条方法 定时获取进度显示至前台进度条 public override void OnQueryProgressValue(BOS.Core.DynamicForm.PlugIn.Args.QueryProgressValueEventArgs e) { Tuplerlt = MigrateServiceHelper.GetSyncProgress(this.Context); e.Value = rlt.Item1; e.Caption = rlt.Item2; if (e.Value == 100) _progressBar.Visible = false; base.OnQueryProgressValue(e); }
2、使用MainWorker.QuequeTask()异步执行接口
public override void ButtonClick(BOS.Core.DynamicForm.PlugIn.Args.ButtonClickEventArgs e) { switch (e.Key.ToUpper()) { case "FFINISH": e.Cancel = true; _progressBar = this.View.GetControl("FProgressBar"); _progressBar.Visible = true; _progressBar.Start(1); //异步调用服务端执行方法 MainWorker.QuequeTask(this.Context, new Action(() => { MigrateServiceHelper.Test(this.Context); }), new Action((result) => { })); break; } base.ButtonClick(e); }
服务端逻辑
进度处理,设置进度,每0.5秒更新一次进度
//获取进度信息 public TupleGetSyncProgress() { return new Tuple(rate, message); } //进度信息需要设置为静态变量,否则每次调用进度信息会重新赋值,无法保存之前的进度信息 private static int rate = 0; private static string message = ""; //执行方法 设置进度 每0.5秒更新一次进度 public void Test() { for (int i = 1; i <= 50; i++) { rate = 2 * i; message = rate + "% (" + i + "/" + 50 + ")"; System.Threading.Thread.Sleep(500); } }
案例演示
向导演示结果如下,按照预想需求允许。由于进度条触发OnQueryProgressValue间隔为1秒,与服务端的进度可能会存在延迟,但整体显示正常,不影响正常业务逻辑。
参考帖子:
标准进度条示例
推荐阅读