Legolas工业自动化平台入门（三）交互事件响应动作

在上一篇Legolas工业自动化平台入门（二）数据响应动作 一文中，我们介绍了“动作”相关内容，了解到“动作”分为多种，各种动作的添加方式相同，但是应用方式各自不同。这篇里，我们会介绍交互事件响应动作的使用。

首先来看一段视频：

在视频中能看到两种阀门（扳手式和旋转式）的不同动作，这里就以它们的实现为例，来介绍交互事件响应动作的使用。

交互事件响应动作指人机交互时的事件响应动作，例如鼠标、键盘，w3c中对各种交互事件有规范的命名，Legolas中交互事件响应动作也遵循w3c中命名规范，在事件名前“on”前缀。对于交互事件响应动作的应用，当交互事件触发时，模板对象会按照命名规则查找对应的动作并执行，所以无需手动绑定。

选中扳手式阀门，对其添加

onclick

交互动作“开”和“关”：

function (event){
var self = this;
var dialogSetting = {
"title":'阀门',
"size":{"width":260,"height":100},
}
var onLoaded = function(dview){
var vi = dview.getVIsByID("valveControl")[0];
vi._refVi = self;
var angle = self.getValue('angle');
vi.setData(angle==90?'close':'open');
settingView = dview;
}
var diagramSetting = {
"type":DIAGRAMCONTENTTYPE[1],
"src":"handleValve01Control",
"isRuntime":true,
"onLoaded":onLoaded
}
Toolkits.showDiagramViewDialog(dialogSetting,diagramSetting);
}

这里

Toolkits.showDiagramViewDialog(dialogSetting,diagramSetting)

表示当点击模板对象后，弹出对话框。表示弹出对话框内容为

diagram

，这里用到了

diagram

的嵌套。方法参数分别为弹出框的配置参数和diagram的配置参数。在

diagramSetting

指定了需要加载的

diagram

名。

这里需要加载的是

handleValve01Control

图纸，从下图可以看到

handleValve01Control

图纸中只有一组单选按钮，那么改变阀门状态的动作又在哪呢？选中单选按钮能看到在其“动作”列表中定义了

changeValue

动作：

function (v){
var angle = 0;
if(v == 'close'){
angle = 90;
}
this._refVi.rotatePartByAxis('handle', {x:0,y:1,z:0}, {x:0,y:15,z:0}, angle);
}

其中，

this._refVi

为点击的模板对象。



到这里对扳手式阀门交互就完成了，很简单吧？ 对于旋转式阀门的处理方法也是如此，只是弹出的图纸不同，旋转的角度不同而已。表达能力太差，感兴趣的童鞋还是到这里申请一个试用，看看我们部署的在线应用吧，申请的时候记得注明一下“自动化产品”噢。