跳至主要内容

脚本:页面脚本 / hqVisuDesigner API

用 JavaScript 给当前页面增加运行逻辑:Page Script 顶层变量、常量、类和函数可供本页动画与表达式引用;运行时用 ReadTag 系列读取 Tag,用 hqVisuDesigner 操作组件和跳转页面,hqVisuDesignerPageReady 在页面就绪时执行初始化。读单个位使用 "标签名[位号]" 方括号写法。

功能文档修订:2026-10-21

功能: 脚本:页面脚本 / hqVisuDesigner API

用 JavaScript 给当前页面增加运行逻辑:Page Script 顶层变量、常量、类和函数可供本页动画与表达式引用;运行时用 ReadTag 系列读取 Tag,用 hqVisuDesigner 操作组件和跳转页面,hqVisuDesignerPageReady 在页面就绪时执行初始化。读单个位使用 "标签名[位号]" 方括号写法。

功能说明

脚本用于给当前页面增加运行逻辑,全部使用 JavaScript。插件不提供跨整个 PPT 的 Global Script / 全局脚本文档;功能区 Scripts 分组只有当前页 Page Script 入口,alarm.js 也是当前页固定的受保护文档。Page Script 顶层声明可供同一页行为引用,但不会自动出现在其他页面。ReadTag 系列读取 Tag,hqVisuDesigner 用于修改组件文本、颜色、显隐、布局和页面跳转。WriteTag 系列只允许在真实用户点击、按下或释放动作中调用,不能放在 Page Script、Setup Script 或 Hover Script。行为里的 Setup Script / Condition / Value / Text 与页面脚本使用同一套现代 ECMAScript 2022 语法边界;表达式位只返回一个同步结果。

Script Workspace 从新建到保存

打开 Scripts → Page Script,在左侧选择文档,或点击 New 填写 Folder、Name。在 Code 写脚本;取消 Enabled 可保留文档但不导出。Save 校验并保存当前页全部启用文档。

  • Scope:先确认正在编辑的是当前目标页面。
  • New 或 Ctrl+N:创建新脚本文档。
  • Folder:可选,用斜杠分隔文件夹路径。
  • Name:脚本文档名,不填写 .js 扩展名。
  • Enabled:取消后文档保留,但不导出也不参与 Save 校验。
  • Script Library 或 Ctrl+J:在当前光标处插入方法或模板。
  • Save 或 Ctrl+S:校验并保存整个脚本工作区。
  • Help 或 F1:查看脚本帮助。

Quick Methods 方法库

在脚本编辑器打开 Quick Methods:左侧筛选类别,中间选择方法,右侧查看用途、示例和参数。搜索后点击 Insert 插入片段;可用方法以当前窗口为准。

删除文档和 alarm.js 的区别

选中自建文档,点击 Delete 并确认。受保护的 alarm.js 不能删除;停用页面报警显示须编辑其中的报警配置。

  • 删除前确认其他脚本和行为没有引用该文档里的函数或变量。
  • Delete 只对可删除的自建文档生效。
  • alarm.js 不可删除,应修改其配置内容。
  • 误删或不想保存当前改动时点击 Cancel,不要点击 Save。

使用方法:常用方法和写法

初始化时在 Page Script 设置 window.hqVisuDesignerPageReady,页面运行时就绪后调用一次。常用方法如下:

  • 读标签 ReadTag 系列:ReadTagBoolean / ReadTagInteger / ReadTagDouble / ReadTagString,第二个参数是读不到时的回退值
  • 日期时间:GetCurrentDate() 返回 yyyy-MM-dd,GetCurrentDateTime() 返回 yyyy-MM-dd HH:mm:ss,FormatDateTime(value, "yyyy/MM/dd HH:mm:ss") 可把时间值格式化成指定显示格式;搜索关键字包括时间、日期、time、date、datetime
  • 读单个位(重点):在完整标签名后面加方括号位号,例如 "PLC_LINE01.PUMP01.STATUS[3]",用 ReadTagBoolean 读;位号 0 起算、范围 0-31、方括号里不能有空格
  • 标签质量:ReadTagQuality(name, "bad") 取质量文本,ReadTagQualityGood(name) 直接判断是否为 good(质量只有 good / bad,不是工艺值)
  • WriteTag 系列:用于真实用户点击、按下或释放动作脚本;Page Script、Setup Script 和 Hover Script 不能写设备。是否生效仍由运行平台和设备确认。
  • 操作组件 hqVisuDesigner:setComponentText(名或ID, 值)、setComponentFill、setComponentBorder、setComponentVisible、setComponentLayout、findComponent
  • 跳转 hqVisuDesigner:openPage("页名") 同包跳页、openWebsite(url, 是否新窗口) 开外链
JavaScriptJavaScript
// 页面脚本:页面就绪时初始化
window.hqVisuDesignerPageReady = function (ctx) {
  // 读一个整数标签里的第 0 位(方括号写法,无空格)
  const pumpRun = ReadTagBoolean("PLC_LINE01.PUMP01.STATUS[0]", false);
  hqVisuDesigner.setComponentText("Title 1", pumpRun ? "运行" : "停止");
  hqVisuDesigner.setComponentFill("Lamp 1", pumpRun ? "#22C55E" : "#EF4444");
  hqVisuDesigner.refreshView();
};

常用 JS 写法:日期时间、状态文本和安全默认值

这些片段适合放在 Page Script、Click Script 或行为的 Setup Script 区域里。Condition / Value / Text 位置通常只放最后一句能立即返回的表达式;较长的判断、格式化和变量准备放在 Setup Script 或脚本体里。

  • 三元表达式:condition ? trueValue : falseValue,适合把布尔值转成文本、颜色或数值。
  • 安全默认值:ReadTagBoolean / ReadTagDouble 等第二个参数是回退值,读不到时不让脚本报错。
  • 日期时间文本:当前日期用 GetCurrentDate(),当前日期时间用 GetCurrentDateTime(),已有时间值用 FormatDateTime(...) 改显示格式。
  • 多条件判断:简单场景用三元表达式,复杂场景用 if / else 先算出变量,再写到组件或返回给行为。
JavaScriptJavaScript
// 日期 / 时间 / time / date
const today = GetCurrentDate();                 // yyyy-MM-dd
const nowText = GetCurrentDateTime();           // yyyy-MM-dd HH:mm:ss
const displayTime = FormatDateTime(nowText, "yyyy/MM/dd HH:mm:ss");

// 布尔状态转文本(三元表达式)
const currentValue = ReadTagBoolean("PLC_LINE01.PUMP01.READY", false);
let text = currentValue ? "OK" : "异常";

// 数值分段
const speed = ReadTagDouble("PLC_LINE01.MOTOR01.SPEED", 0);
const levelText = speed >= 80 ? "高" : (speed >= 40 ? "中" : "低");

// 质量保护:质量不好时优先显示通讯异常
if (!ReadTagQualityGood("PLC_LINE01.MOTOR01.SPEED")) {
  text = "通讯异常";
}

hqVisuDesigner.setComponentText("StatusText", `${text} / ${displayTime}`);
hqVisuDesigner.setComponentText("LevelText", levelText);

常用 JS 语法:字符串拼接、数字格式化、数组和对象

在 Setup Script 或 Page Script 中用字符串拼接、数字格式化、数组查找和对象配置整理 Tag 值,再将结果返回给行为或写入组件。

  • 字符串拼接:简单场景用 '速度: ' + speed,多变量推荐模板字符串 速度: ${speed}。
  • 数字格式化:用 Number(value).toFixed(1) 控制小数位,避免显示太长。
  • 数组:用数组维护状态映射、报警列表或多个组件名,再用循环统一处理。
  • 对象:用对象保存配置表,例如状态码到文本、颜色和优先级的映射。
JavaScriptJavaScript
// 字符串拼接和模板字符串
const speed = ReadTagDouble('PLC_LINE01.MOTOR01.SPEED', 0);
const unit = ' rpm';
const speedText = `速度: ${Number(speed).toFixed(1)}${unit}`;
const timeText = `更新时间: ${GetCurrentDateTime()}`;

// 对象映射:状态码转文本和颜色
const state = ReadTagInteger('PLC_LINE01.MOTOR01.STATE', 0);
const stateMap = {
  0: { text: '停止', color: '#94A3B8' },
  1: { text: '运行', color: '#22C55E' },
  2: { text: '故障', color: '#EF4444' }
};
const stateInfo = stateMap[state] ?? { text: '未知', color: '#F59E0B' };

// 数组和循环:批量更新多个组件
const targetNames = ['SpeedText', 'SpeedTextCopy'];
targetNames.forEach((name) => hqVisuDesigner.setComponentText(name, speedText));

hqVisuDesigner.setComponentText('StateText', `${stateInfo.text} / ${timeText}`);
hqVisuDesigner.setComponentFill('StateLamp', stateInfo.color);

适用场景

同页共用函数、常量和 Tag 前缀放在 Page Script 顶层;初始化逻辑放在 hqVisuDesignerPageReady。跨页高级复用使用宿主 runtime、自写 SDK 或模板。整数 Tag 的布尔位通过方括号位读驱动显示。

  • 同页共享方法、常量和 Tag 前缀放当前页 Page Script
  • 同包跳页用 hqVisuDesigner.openPage(...);跨画面包走宿主 SDK,不要写 ../../other-screen/index.html 这种磁盘相对路径

限制与常见问题

常见注意事项:① 位读必须用精确的 "标签名[位号]" 方括号写法、方括号里不能有空格,位号只支持 0-31;位写使用父整数 Tag + BitIndex,不能把 Tag[3] 当普通写入 Tag。② 写 Tag 只允许在真实用户点击动作中执行,且不要假设调用后必然同步成功。③ 异步方法只能放在脚本体位置;await 只能写在 async 函数内部,不支持顶层 await。④ import/export 属于模块语法,动画表达式与页面脚本文档不支持;高级能力走自写 SDK。

Mingcedar Studio 脚本工作区
图示 1: 脚本工作区 Script Workspace

编辑当前页 JavaScript 文档;运行时用 ReadTag 与 hqVisuDesigner 驱动画面。

Quick Methods 方法库显示类别、方法列表、示例代码和参数说明
图示 2: Quick Methods 方法库

按类别或搜索定位方法,查看示例与参数后点击 Insert。

再次点击图片或按 Esc 关闭