案例演示

一. 创建工艺图规划数据

在开发=》工艺流程图=》工艺流程规划功能中，点击列表创建按钮新建数据。功能介绍查看功能详情文档

二.创建工艺图数据源

开发=》核心引擎=》数据源引擎，创建一个js数据源。详细操作查看数据源信息文档

  /**
 * 必须按照如下格式返回数据，否则数据出错，params(过滤条件)可以省略
 * return {
 *    fields:["Tag号1","Tag号2"],
 *    data:[{id:'Tag号1',value:'数值',name:'设备名称',type:'设备名称',remark:'描述'}],
 * };
 */

  const fields = ['Tag-1', 'Tag-2', 'Tag-3', 'Tag-4'];
  const dataArray = fields.map((item) => {
    return {
      id: item,                           // tag号    (必须)
      value: JE.useUtils().random(0, 1),  // 数值     (必须)
      name: '设备编号' + item,             // 设备名称
      type: 'TEST',                       // 设备类型
      remark: '描述' + item,              // 描述
    };
  });
  return {
    data: dataArray,
    fields,
  };

三.创建维护tag信息功能

创建一个功能用来维护Tag信息。详细操作查看tag信息文档

四. 维护表单数据源信息

五. 维护表单Tag信息

六.规划器规划数据

1. 点击列表规划按钮进入规划页面

2. 按照下图拖入节点

3. 点击选中矩形节点进行配置

4.点击选中原型节点进行配置

5. 配置画布事件

点击空白处右侧表单会切回画布配置面板

const { draw, cell, elEvent, mxEvent } = EventOptions;
// 点击按钮
if(cell.getId()=='2'){
    const value = cell.getLabel() == '开始动画'?'1':'0';
    cell.setLabel(value == '0' ?'开始动画':'停止动画');
    // 刷新页面，开始动画
    draw.refresh([{
        id:'tag-1',
        value,
    }])
}

6. 点击保存按钮保存数据

七.预览

八. 挂接菜单

1. 挂接菜单

JE_PLUGIN_PID_PREVIEW,功能编码

2. 菜单授权

3.找到对应的菜单点击查看

注意：如果展示的效果和配置的有出入，说明你没有点击工艺图规划器的保存发布按钮