使用Fusioncharts实现后台处理进度的前台展示

本文要解决两个问题:

1、在ajax的数据交互中,如何获得后台的处理进度?

2、在前台界面中,如何使用图形化的方式展示后台处理进度?

关于第一个问题,不是本文的重点,简单说一下思路。因为HTTP协议实际上是无状态的协议,前台的请求提交给后台之后,一般情况下都是后台处理完成才会向前台返回处理结果。如果想前台展示处理进度,有三个方法:

一、使用flush()函数。PHP中提供了 flush() 和 ob_flush() 函数,允许用户将缓存的内容输出,但是如果在服务器端使用了gzip压缩,这种方法常常会失效。另外,这种办法实际上是一个流式的结果输出,在形式上很难有美观的展现。

二、使用JS控制任务进度。更好的办法我觉得应该是使用JS在前端来控制多个任务提交的顺序,从而在前端计算整体的进度来用图形化的方式展现。

三、后台实现进度记录,前台进行展现。也可以采用后端使用持久化数据来记录整体计划于当前进度,前端JS定时异步调用查询结果的方式来实现前端的展示。我在一个Zip文件包解压并处理的程序中采用了第二种方式,大家可以根据项目的具体情况来选用。

下面来说如何用 Fusion charts 实时展现后台进度,本文只实现简单的有一个任务进度展示的情况。实际上 Linear Gauge 非常强大,可以支持多个指示标志,本文就不做考虑,只考虑实现一个简单的进度指示标志的情况。

完成后的效果如下图,用户选择一个Zip文件包进行上传,JS完成后台上传、解压缩与文件处理的操作。使用FusionCharts进行图形化的进度显示。

其中文件上传使用了jQuery的AjaxUpload插件,文件上传部分的JS代码如下:

 1      $('#userfile').AjaxFileUpload({
 2           action: '/tool/uploadZip',
 3           onChange: function(filename){
 4                //console.log("Change");
 5                $('#tip_text').text("正在上传");
 6                interval = window.setInterval(function() {
 7                     var text = $("#tip_text").text();
 8                     if (text.length < 13) {
 9                          $('#tip_text').text(text + ".");
10                     } else {
11                          $('#tip_text').text("正在上传");
12                     }
13 
14                     $.cookie('progress', 20);
15                }, 200);
16                //$("#tip_text").append("文件上传开始");
17           },
18           // secureuri: false,
19           // fileElementId:'test',
20           onSubmit: function(filename) {
21                return true;
22           },
23           onComplete: function(filename, response) {
24                window.clearInterval(interval);
25 
26                $("#file_count").html( response.zip_info.file_list.length );
27                $("#tip_text").append("<br />文件上传完成,即将开始进行导入");
28                $.cookie('progress', 40);
29 
30                zip_import(response, 0, response.zip_info.file_list.length);
31           }
32      });

文件上传后,使用JS记录下上传的文件以及Zip包内文件的数量,然后开始使用JS控制逐个文件的提交。这一部分处理的难点主要在于Zip的解压和进度控制。Zip的解压有PHP的ZipArchive类,可以很方便的获取Zip内的文件列表,以及指定读取某个文件。当获取了Zip文件包的列表数量之后,我就可以在前台使用JS控制逐个文件的读取。

最后就是整个过程的图形化界面显示,FusionCharts部分的代码如下:

 1      FusionCharts.ready(function(){
 2          var fusioncharts = new FusionCharts({
 3          type: 'hlineargauge',
 4          renderAt: 'realchart',
 5          id: 'realtime-chart',
 6          width: '400',
 7          height: '170',
 8          dataFormat: 'json',
 9          dataSource: {
10              "chart": {
11                  "theme": "fint",
12                  "caption": "后台处理进度",
13                  "subcaption": "www.dcod.com",
14                  "lowerLimit": "0",
15                  "upperLimit": "100",
16                  "numberSuffix": "%",
17                  "chartBottomMargin": "40",
18                  "valueFontSize": "11",
19                  "valueFontBold": "0"
20              },
21              "colorRange": {
22                  "color": [{
23                      "minValue": "0",
24                      "maxValue": "35",
25                      "label": "文件上传",
26                  }, {
27                      "minValue": "35",
28                      "maxValue": "100",
29                      "label": "解压与保存",
30                  }]
31              },
32              "pointers": {
33                  "pointer": [{
34                      "value": "0"
35                  }]
36              },
37              "trendPoints": {
38                  "point": [
39                      //Trendpoint
40                      {
41                          "startValue": "70",
42                          "displayValue": " ",
43                          "dashed": "1",
44                          "showValues": "0"
45                      }, {
46                          "startValue": "85",
47                          "displayValue": " ",
48                          "dashed": "1",
49                          "showValues": "0"
50                      },
51                      //Trendzone
52                      {
53                          "startValue": "70",
54                          "endValue": "85",
55                          "displayValue": " ",
56                          "alpha": "40"
57                      }
58                  ]
59              }
60          },
61         "events": {
62              "rendered":function(evtObj, argObj){
63                   evtObj.sender.intervalVar = setInterval(function(){
64                        console.log("Txt x");
65                        //定时获取服务端的数据
66                        var prcnt = $.cookie('progress');
67 
68                        //将数据提交给图表
69                        FusionCharts.items["realtime-chart"].feedData("value=" + prcnt);
70                   }, 5000);
71              },
72              "disposed":function(evtObj, argObj){
73                   console.log('disposed');
74                   clearInterval(evtObj.sender.intervalVar);
75              }
76         }
77      }
78      );
79 
80          fusioncharts.render();
81      });

FusionCharts设置了一个轮训间隔,不断地从后台查询数据。因为我的后台处理过程都是在领带的ajax请求中完成的,所以采取了一个折衷的办法,ajax请求完成后,将进度写入到cookie中,然后FusionCharts定时从cookie中读取进度来进行展示。

注:我使用的版本是Fusion Charts Suite XT

参考资料:

1、Fusion Charts Linear Gauge

2、AjaxFileUpload

3、实现jQuery的Ajax文件上传

4、jQuery Cookie

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

【批处理学习笔记】第八课:批处理符号(1)

一、 @ 这个字符在批处理中的意思是关闭当前行的回显。我们从前几课知道ECHO OFF可以关闭掉整个批处理命令的回显,但不能关掉ECHO OFF这个命令,现在...

2744
来自专栏云计算与大数据

研发:Redis4.0 编译安装

4. 采用make PREFIX=/usr/local/redis install

1482
来自专栏游戏杂谈

Linux下使用rsync同步文件

遇到的问题是几台游戏服务器,有一台新的服务器之前已经copy(Linux的scp命令)过文件上去,但在测试的过程中发现还是图片无法正常不显示出来,然后用http...

3812
来自专栏运维小白

10.2 vmstat命令

监控系统状态 vmstat 命令,监控系统状态 用法 vmstat 1 关键的几列:r ,b,swpd,si,so,bi,us,wa vmstat命令 用 w...

1875
来自专栏我是业余自学C/C++的

实验一 查看CPU和内存,用机器指令和汇编指令编程

1893
来自专栏C/C++基础

Linux命令(37)——free命令

free命令用于显示系统内存使用情况,包括物理内存(Physical Memory)、虚拟内存(Swap Memory)、共享内存(Shared Memory)...

1084
来自专栏orientlu

vim 插件使用记录

指令 效果 C_ ] 直接跳转到定义处 C_ t 往回跳转一次(先输入数字再C_t,可以一次回跳多个) : tags 查看跳转list ...

962
来自专栏大数据文摘

麻省理工三位教授教你一步步创建自己的R程序包(附完整教程下载)

1853
来自专栏北京马哥教育

一篇文章带你梳理Python Django的正确的学习方法!

? 作者:地球的外星人君 来源: https://www.zhihu.com/question/26235428/answer/170250328 Djang...

2966
来自专栏xcywt

Linux下检测内存泄露的工具 valgrind

参考:http://www.cnblogs.com/sunyubo/archive/2010/05/05/2282170.html 几乎是照抄参考过来的,只不过...

4999

扫码关注云+社区

领取腾讯云代金券