跳到主要内容

页面与组件

页面就是现场的 HMI 画面。控件是画面上的各种元素——按钮、指示灯、数据表、3D 模型等。控件通过事件动作调用背后的逻辑。

控件的具体用法和参数，编辑器属性面板中已有说明，这里不再逐一列举。本文只讲概念和关键机制。

事件动作（Page Method）​

控件的事件（点击按钮、表格数据变化、上传完成）需要触发一段动作逻辑。提供两种方式：

方式适合什么怎么编辑
可视化流程绝大多数情况：调用设备动作、写变量、弹提示、简单条件判断拖拽式序列编辑器，不需要写代码
代码脚本复杂算法、类型转换、错误处理代码编辑器，TypeScript

推荐优先使用可视化流程。90% 的现场场景靠顺序调用设备方法、写变量和弹提示就能完成。

创建动作​

  1. 在页面属性面板的「Methods」区域，点搜索框右侧的 +。
  2. 输入动作名称，选择类型。
  3. 创建后，在控件的 action 属性中绑定。

可视化流程编辑​

流程动作在 WorkArea 的 Sequence 标签页中编辑：

  • 输入参数：外部传入的值（如当前控件 ID、行数据）
  • 步骤序列：顺序执行的动作
  • 返回值：动作执行后的输出

支持的步骤类型：调用设备方法、调用查询、写变量、弹提示、条件判断、循环。

步骤之间用 steps.<步骤名>.result 传递结果。

截图占位：可视化流程编辑器

代码脚本​

少数需要复杂逻辑时使用 TypeScript 编写：

function handleStart() {
  const axis = QX.objects.Z轴;
  const result = axis.home();
  if (result.ok) {
    QX.variables.回零状态 = '完成';
  }
}

编辑器有智能提示和错误检查，会告诉你引用的设备、变量、方法是否存在。

控件与动作的绑定​

控件的 action 属性有两种绑定写法：

  • 直接写动作名："handleStart"——动作收到完整事件信息
  • 带参数绑定：{ method: "handleStart", args: { 轴号: "context.widget.id" } }——把事件信息映射为明确参数

推荐第二种，参数含义更清晰。

表达式绑定​

控件的大部分属性支持 {{ }} 表达式，动态绑定变量、对象状态和查询结果。例如：

  • 绑定变量：{{ QX.variables.当前温度 }}°C
  • 绑定对象：{{ QX.objects.PulsarController.状态 }}
  • 控制显隐：{{ QX.variables.运行中 }} 决定按钮是否禁用

在属性面板中切到脚本模式后，点击引用按钮可以从上下文中浏览和选择可用字段。

可复用组件（Component）​

把一组控件封装成模板，在 repeater 中复用。比如工位卡片包含工位名、状态指示灯、产量数字，做成一个 component，在多个工位的 repeater 中复用。

创建组件​

  1. 左侧资源区 → Components 分组 → 右键新建。
  2. 在组件编辑 tab 中放置控件。
  3. 定义 props（外部传入的数据字段）。
  4. 用 sampleProps 预览不同数据下的显示效果。

在组件中使用数据​

  • 直接写字段名（如 item、index）访问 repeater 传入的数据
  • self.props——完整的外部输入
  • self.state——组件内部状态
  • self.widgets——组件内的子控件

每个 repeater 项的组件实例互不干扰。

权限控制​

Page 和控件都可以设置可见角色。详见用户与权限。