Table：数据绑定、模板复用与筛选

准备：创建页面与 Table

需已安装并授权插件，且能在 Mingcedar 运行画面。按编号操作；每组配置完成后 Save、保存 PPT，用 MX Design → Export → Export HTML 更新画面包并重新打开。

• 步骤 1–2 无需 PLC。步骤 3 使用可读取的数值 Tag：PLC_LINE01.PUMP01.SPEED、PLC_LINE01.PUMP02.SPEED；步骤 4 再增加 PLC_LINE02 下的同名两点。
• Table name 是显示标题。引号表示固定文字；裸填文字时，运行时会先尝试将其作为变量或表达式求值。组件名称用于 ExportTable 定位，见步骤 4D。

1. 在 PowerPoint 新建空白幻灯片。打开 MX Design → Page → Nav Path，将该页 Page Code 设为 pump_table，点击 Save。
2. 打开 MX Design → Templates → Library，选择内置 Table 卡片，点击 Insert template。选中插入的整个 Table 组合，点击 Templates → Edit Instance。
3. 在 Template Edit 的 Table name 中填写下方代码，保留双引号；继续完成步骤 1A、1B 后保存。

"Pump speeds"

• 安装与授权
• 导出并发布画面包

1A. 固定表头：在 Headers 填一维数组

在同一 Template Edit 窗口的 Headers 中粘贴下方数组。Table text ID 留空，Header text IDs 填 []。继续设置 Rows。

• 数组中的三个字符串依次对应三列标题；不要在整个数组外再加引号。

["Pump", "Area", "Speed"]

1B. 固定数据：在 Rows 填二维数组

在 Rows 中粘贴下方二维数组。每个内层数组是一行，每项对应一个单元格。点击 Save，导出并在 Mingcedar 打开 pump_table。

• Column layout 各列留空时均分宽度。手动设置时，三列分别填 40、20、40；如果显示单行列宽输入框，则填 40,20,40。Font size (px) 填 14。
• Table 显示普通文本，超出高度可滚动；没有内置分页、行内按钮或单元格编辑。

[["PUMP01", "A", "1200 rpm"], ["PUMP02", "B", "900 rpm"]]

完成标志 表格显示三列、两行：PUMP01 / A / 1200 rpm 和 PUMP02 / B / 900 rpm。

2A. 在 Page Script 定义数组

在 pump_table 打开 MX Design → Scripts → Page Script，点击 New，Name 填 table-data，Code 填下方完整代码，勾选 Enabled 并 Save。后续均修改此文档。

• 页面变量只在当前页使用；另一个页面需要自己的 Page Script。

var pagePumpRows = [
  ["PUMP01", "A", "1200 rpm"],
  ["PUMP02", "B", "900 rpm"]
];

2B. Rows 绑定页面变量

选中 Table，打开 Templates → Edit Instance，将 Rows 替换为下方变量名，不加引号。点击 Save，重新导出并打开页面。

• =pagePumpRows 也可显式求值；"pagePumpRows" 是字符串，不会读取数组。
• 数组保存的是赋值时的数据。即使在 Page Script 顶层用 ReadTagDouble 构造数组，Tag 更新也不会重建它；实时数据使用步骤 3 的函数。

pagePumpRows

完成标志 表格仍显示步骤 1 的两行数据。

3A. 定义实时 Tag 读取函数

打开 pump_table 的 Page Script，选中 table-data，将 Code 完整替换为下方函数并保存。两处完整 Tag 名称须与项目一致。

• 函数每次调用都重新读取 Tag；第二个参数 0 是读取失败时的回退值。步骤 4 将增加质量判断，以区分不可用数据和真实零值。

function livePumpRows() {
  return [
    ["PUMP01", "A", ReadTagDouble("PLC_LINE01.PUMP01.SPEED", 0)],
    ["PUMP02", "B", ReadTagDouble("PLC_LINE01.PUMP02.SPEED", 0)]
  ];
}

3B. Rows 绑定函数调用

打开 Table 的 Edit Instance，将 Rows 替换为下方调用并保存。导出后，在 Mingcedar 修改或观察 PLC_LINE01.PUMP01.SPEED 的值变化，并核对第一行。

• Rows 填调用式；函数定义保存在 Page Script。刷新取决于宿主数据更新，不设固定采样周期。

livePumpRows()

完成标志 运行时收到新数据后，第一行 Speed 更新；第二行仍显示 PUMP02 的值。

4A. 定义共享产线数据函数

将 table-data 的 Code 完整替换为下方代码并保存。函数读取四个明确列出的 Tag，再按产线、区域和设备筛选。保留 tableArea 和 pumpFilter 的默认值，继续配置步骤 4B–4D。

• 四个 Tag 均须可读取。质量不是 good 时显示 Unavailable。
• tableArea="ALL" 表示全部区域；pumpFilter="" 表示全部设备。

var tableArea = "ALL";
var pumpFilter = "";

function buildPumpRows(plc) {
  if (plc !== "PLC_LINE01" && plc !== "PLC_LINE02") {
    throw new Error("Unsupported line");
  }
  if (["ALL", "A", "B"].indexOf(tableArea) < 0) {
    throw new Error("Unsupported area");
  }
  var pumps = [
    { plc: "PLC_LINE01", area: "A", pump: "PUMP01",
      speed: ReadTagDouble("PLC_LINE01.PUMP01.SPEED", 0),
      good: ReadTagQualityGood("PLC_LINE01.PUMP01.SPEED") },
    { plc: "PLC_LINE01", area: "B", pump: "PUMP02",
      speed: ReadTagDouble("PLC_LINE01.PUMP02.SPEED", 0),
      good: ReadTagQualityGood("PLC_LINE01.PUMP02.SPEED") },
    { plc: "PLC_LINE02", area: "A", pump: "PUMP01",
      speed: ReadTagDouble("PLC_LINE02.PUMP01.SPEED", 0),
      good: ReadTagQualityGood("PLC_LINE02.PUMP01.SPEED") },
    { plc: "PLC_LINE02", area: "B", pump: "PUMP02",
      speed: ReadTagDouble("PLC_LINE02.PUMP02.SPEED", 0),
      good: ReadTagQualityGood("PLC_LINE02.PUMP02.SPEED") }
  ];
  return pumps.filter(function (pump) {
    return pump.plc === plc &&
      (tableArea === "ALL" || pump.area === tableArea) &&
      (pumpFilter === "" || pump.pump === pumpFilter);
  }).map(function (pump) {
    return [pump.pump, pump.area,
      pump.good ? pump.speed.toFixed(0) + " rpm" : "Unavailable"];
  });
}

4B. 设置模板标题

打开 Table 的 Edit Instance，将 Table name 替换为下方字符串，Headers 保持步骤 1 的三列。<PLC> 是模板占位符；实例配置后替换为产线编码。继续步骤 4C 后保存。

"<PLC> pump speeds"

4C. Rows 传入当前实例的 PLC

将 Rows 替换为下方调用，点击 Save。<PLC> 尚未替换，此时不要导出；先完成步骤 4D 的模板保存和实例配置。

• 保留占位符两侧的引号，确保替换后的产线编码作为字符串传入函数。

buildPumpRows("<PLC>")

4D. 保存模板并插入两份实例

将当前 Table 保存为模板，再插入两份已配置的实例。以下步骤不需要添加外层组合。

• 模板保存表格配置，不包含页面的 table-data 脚本文档。插入其他页面时，需同时在目标页准备共享函数和变量。

1. 选中整个 Table，打开 Templates → Library，点击 Save selection。在 Template name 填 Pump speed table，Group 保持默认；确认 Captured variables 中有 PLC，点击 Save。名称已存在时使用其他唯一名称。
2. 关闭模板库，删除页面上仍含 <PLC> 的原始 Table。重新打开 Library，选择刚保存的 Pump speed table，点击 Insert template 两次。
3. 分别选中新实例根组，打开 Templates → Edit Instance；第一份 PLC 填 PLC_LINE01，第二份填 PLC_LINE02，不加引号，每份配置后点击 Save。
4. 点击 MX Design → Behaviors → Browse。在组件树中右键对应的 Table 节点，选择 Rename Component，分别命名 Line01Table、Line02Table。若存在外层组合，应展开后命名实际 Table。保存 PPT 并重新导出。

完成标志 Line01Table 显示 PLC_LINE01 的两台泵，Line02Table 显示 PLC_LINE02 的两台泵；标题分别包含对应产线编码。

5A. 从入口页传 area 参数

新建入口页，画矩形按钮并标注“B 区”。在 MX Design → Behaviors → Browse 将 Click Script 拖到该组件，双击行为并填入下方代码，Save。后续按钮沿用此步骤。

• 完成步骤 5B 后，通过 Export HTML 导出同时包含入口页和 pump_table 的完整画面包；单页导出不包含另一个页面。

return hqVisuDesigner.openPage("pump_table", {
  parameters: [{ key: "area", value: "B" }]
});

5B. 目标页校验并读取 area

回到 pump_table，打开 Page Script → table-data。仅将 var tableArea = "ALL"; 替换为下方代码，保留 pumpFilter 和整个 buildPumpRows 函数，点击 Save。导出后在 Mingcedar 打开入口页，点击“B 区”。

var tableArea = GetPageParameter("area", "ALL");
if (["ALL", "A", "B"].indexOf(tableArea) < 0) {
  throw new Error("Area must be ALL, A or B");
}

完成标志 从 B 区入口打开后，两份表格都只显示各自产线的 PUMP02 / B；不传 area 时默认 ALL。

6A. 在当前页切换区域

在 pump_table 绘制“B 区”按钮，按步骤 5A 添加 Click Script，填写下方代码并保存。重新导出后点击该按钮。

• 设备筛选与区域筛选同时生效；没有符合两项条件的设备时显示空表。

hqVisuDesigner.writeVariable("tableArea", "B");

完成标志 未设置设备筛选时，两份表格均只显示 B 区的 PUMP02。

6B. “全部区域”按钮

在 pump_table 添加“全部区域”按钮，将下方代码放入 Click Script 并保存。它将页面变量 tableArea 改为 ALL。

• 按钮只修改当前页变量。重新打开页面时，tableArea 仍由入口的 area 参数初始化。

hqVisuDesigner.writeVariable("tableArea", "ALL");

完成标志 未设置设备筛选时，点击“全部区域”后两份表格各显示两行。

6C. 切换整份数组数据

在 pump_table 插入独立 Table，Table name 填 "Inspection status"，Headers 使用步骤 1A 数组。新建 Page Script 文档 table-status，粘贴步骤 2A 完整数组代码；保留 table-data。新表 Rows 填 pagePumpRows，再为“切换检查状态”按钮配置下方 Click Script，保存。

• 此按钮替换 pagePumpRows 的数据，不修改两份实时表格的函数绑定。

hqVisuDesigner.writeVariable("pagePumpRows", [
  ["PUMP01", "A", "Inspection due"],
  ["PUMP02", "B", "Inspection complete"]
]);

完成标志 点击后，“检查状态”表格分别显示 Inspection due 和 Inspection complete。

7A. 组合 Input 实现设备筛选

在 pump_table 打开 Templates → Library，选择 Input 并点击 Insert template。在 Behavior Browser 右键该实例根节点，用 Rename Component 命名为 Pump filter。打开 Templates → Edit Instance，将 Input mode 设为 Plain Input 并保存。添加“应用设备筛选”按钮，Click Script 填下方代码。

• Input 提供筛选文本，按钮更新页面筛选条件，Table 显示结果。修改设备设定值的流程见 Input 教程。

var pump = String(template.getValue("Pump filter")).trim().toUpperCase();
if (["", "PUMP01", "PUMP02"].indexOf(pump) < 0) {
  throw new Error("Enter PUMP01, PUMP02 or leave blank");
}
hqVisuDesigner.writeVariable("pumpFilter", pump);

完成标志 重新导出后，先点击“全部区域”；在输入框填写 PUMP01，再点击“应用设备筛选”，两份表格各显示一行 PUMP01。填写 pump02 时按大写 PUMP02 筛选。

• 继续学习：传参驱动 Input 与提交

7B. 单独清除设备筛选

添加“清除设备筛选”按钮，将下方代码放入 Click Script 并保存。该按钮清除 pumpFilter，不修改输入框中尚未应用的文本。

• 区域筛选继续生效。点击“B 区”后清除设备筛选，两份表格恢复各自的 PUMP02。

hqVisuDesigner.writeVariable("pumpFilter", "");

8. 导出当前筛选结果

为“导出 LINE01”按钮配置下方 Click Script，确认实际 Table 组件名为 Line01Table（步骤 4D）。保存并导出，在运行页依次点击“B 区”“清除设备筛选”“导出 LINE01”。

• 导出包含当前筛选下的全部行，包括滚动区域外的行；导出时会重新读取数据，因此可能比上一帧显示值更新。
• 文件保存位置和完成状态由浏览器决定。

ExportTable("Line01Table", "line01-filtered.csv", "csv");

完成标志 浏览器下载 line01-filtered.csv，包含 Pump、Area、Speed 三列表头以及 PLC_LINE01 的 PUMP02 当前数据。