需求来源
之前的案例中介绍了EChart可视化控件，可以实现个性化数据可视化，但是用户往往不希望看到一个静止不动的结果，而是希望在DWF后端收集数据到前端以后，将前端界面上展示的效果更新，如下面所示：
...
如果只是希望前端能够通过脚本快速获得数据并进行显示，使用订阅控件就显得难以操作，因此，本文介绍一种前端定期刷新的简便的方式，通过定时拉取数据完成动态数据显示的目的。
图-定时刷效果
背景知识
在介绍具体操作之前，先了解一些背景知识。
如何设置定时器
首先，在定时刷新之前，需要学习一些背景知识，其中第一个是如何设置定时器，由于DWF使用的是JavaScript，所以直接利用以下两个方法设置定时器即可。
...
| 代码块 | ||
|---|---|---|
| ||
var i = 0;
var timer = setInterval(function () {
i++;
if(i === 10) {
clearInterval(timer);
}
}, 1000); |
激活控件的事件
其次，在DWF基础培训中已经介绍了控件和控件上面的事件这一概念，例如：按钮控件上存在“单击事件”，文本框控件上存在“值变化事件”，这些事件上可以绑定操作，当交互发生的时候操作就会激活。
...
需要特别，特别，特别注意的是：不要进行在事件的脚本中利用invokeEvent嵌套调用，避免出错。
技术路线
由于控件的事件可以通过脚本激活，前端刷新的技术路线就非常明确了，建立一个针对表单的刷新操作，启动定时器后在函数中实现invokeEvent模拟刷新：
...
接下来，以教学使用的搅拌车管理系统为背景，实现按照每2秒刷新，从后台统计搅拌车总报警数和总工单数的仪表盘的例子：
第一步、建立基础表单
按照下面的方式拖放一个用于定期刷新的表单，放入两个动态数字框用于统计总报警数和车辆数，一个操作按钮用于手动刷新，两个最顶上的操作按钮用于启动和停止定时器。
图1-基础表单
第二步、设置按钮绑定事件
在手动刷新数字按钮的单击事件上绑定一个操作命名为：totalRefresh，选择implement动作，用前端脚本实现：
...
脚本一开始通过this.em建立了两条sql语句获得单个取值，之后转换为JSON字符串返回给前端脚本使用。
第三步、启动停止定时器
上述工作完成后，即可针对“启动”和“停止”按钮启动和停止计时器，在定时器到达时间限制时通过invokeEvent启动手动刷新按钮模拟刷新。
...
注意：如果需要一打开表单即可看到定时器启动效果，那么可以直接将启动操作绑定在表单初始化事件之上。上述工作完毕以后，可以看到如下的效果：
配合可视化实现刷新
在定时器启动以后，配合Echart控件可以实现更加生动的展示效果，这里展示了一个仪表盘和一个滚动折线图的效果
仪表盘控件刷新
仪表盘的Echart控件，来源于Echart官网，https://echarts.apache.org/examples/zh/editor.html?c=gauge-speed
...
| 代码块 | ||
|---|---|---|
| ||
var ramdomVal = Math.floor((Math.random()*100)+1);
var data = [{
value: ramdomVal
}];
this.res = JSON.stringify(data); |
折线图控件刷新
折线图稍微复杂一些，该案例来自于：https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2
...
| 代码块 |
|---|
var now = new Date(this.customData.name); // this.customData是前端传递的参数入口
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}
this.res = JSON.stringify(randomData()); |
小结
本文主要介绍了一种利用定时器触发事件的方式实现动态刷新的方法，主要涉及到下面的一些要点：
...