页面对象修改：文字、颜色、显隐和跳转 | Mingcedar Studio

findComponent(nameOrId) 返回真实 DOM，用于改样式；getComponentData(nameOrId) 返回导出数据，用于读取原始位置、尺寸、角度和元信息。

• 想直接改样式时先用 findComponent
• 想读导出数据时再用 getComponentData
• 对象名建议尽量稳定，方便脚本查找

var titleEl = hqVisuDesigner.findComponent("Title 1");
var titleData = hqVisuDesigner.getComponentData("Title 1");

if (titleEl && titleData) {
  titleEl.style.color = "#e11d48";
  hqVisuDesigner.setComponentLayout("Title 1", { width: titleData.width });
}

这是最常用的一组页面修改方法。它们适合在页面脚本、点击脚本和质量判断中快速改变对象显示效果，而不需要自行处理 DOM 细节。

• 改字用 setComponentText
• 改填充用 setComponentFill
• 改边框用 setComponentBorder
• 显隐控制用 setComponentVisible

hqVisuDesigner.setComponentText("Title 1", "READY");
hqVisuDesigner.setComponentFill("PumpBody", "#16a34a");
hqVisuDesigner.setComponentBorder("PumpBody", "#166534");
hqVisuDesigner.setComponentVisible("AlarmIcon", false);

当目标组件的位置、尺寸或角度需要根据运行状态计算时，可使用 setComponentLayout 调整布局。适用于拖动结果回写、特殊定位和多个条件共同决定布局的场景。

• x / y 控位置
• width / height 控尺寸
• angle 控角度
• 只改局部字段时也可以只传需要修改的字段

hqVisuDesigner.setComponentLayout("Rectangle 1", {
  x: 120,
  y: 80,
  width: 260,
  height: 100,
  angle: 0
});

同包跳转用 openPage，跨包用 openScreen，外部站点用 openWebsite。useLanguage 切换语言，refreshView 重新应用页面状态。

• 同包跳转用 openPage
• 跨包跳转用 openScreen
• 外部网址用 openWebsite
• 语言切换用 useLanguage
• 重新应用页面状态用 refreshView

hqVisuDesigner.openPage("Alarm");
hqVisuDesigner.openScreen("PUMP_OVERVIEW");
hqVisuDesigner.useLanguage("zh-CN");
hqVisuDesigner.refreshView();

页面需要记录当前 tab、当前选中设备或最近一次交互动作时，可以写入页面变量。该方法只适合页面联动，不等同于写 PLC，也不应代替正式 Tag 写值。

• 适合切换 tab、筛选状态和当前选择
• 不适合设备控制
• 正式设备写入仍应使用 Write Tag 或写值动作

hqVisuDesigner.writeVariable("currentTab", "alarm");
hqVisuDesigner.writeVariable("selectedDevice", "Pump01");

ReadBrowserStorage、WriteBrowserStorage 和 RemoveBrowserStorage 保存区域选择、折叠状态等页面偏好。不要用浏览器存储保存设备控制状态、关键业务数据或长期审计记录。

• 适合界面偏好和当前选择
• 不适合作为设备控制链路
• 不适合保存关键业务记录

var area = ReadBrowserStorage("selectedArea", "A01", "local");
WriteBrowserStorage("selectedArea", area, "local");
RemoveBrowserStorage("selectedArea", "local");