跳至主要内容

Script Color 脚本颜色

用一段脚本同时控制一个组件的填充色、边框色和可见性,适合颜色逻辑比简单真/假更复杂的情况。

颜色文档修订:2026-10-21

颜色: Script Color 脚本颜色

用一段脚本同时控制一个组件的填充色、边框色和可见性,适合颜色逻辑比简单真/假更复杂的情况。

功能说明

Script Color 位于 Visual States,通过 JavaScript 统一计算组件的填充、边框和显隐。适用于多个 Tag、区间或组合条件决定外观的场景,编辑器为 Color Script Editor。

使用方法:编辑器里填的字段

绑定后双击打开编辑器,配置以下字段:

  • General(常规):行为名称;组件名为只读,仅供确认绑定对象
  • Setup Script:读标签、定义变量、算中间值,提示语为“define fill, border, or visibility values”
  • Condition(条件):一个生效开关表达式,默认 true;为 true 时本行为才应用颜色
  • Output Channels(输出通道):Fill Color / Border Color / Visibility 三个通道,各自有独立的 Expression(表达式)框,并各带一个勾选框,只有勾选的通道才会被应用
  • Fill Color 和 Border Color 返回颜色字符串,Visibility 返回 true/false。新建行为的表达式引用 Setup Script 中的 MyFillcolor、MyStrokecolor、MyVisibility;修改准备脚本时要同步修改对应表达式
  • Quality Override:启用 Follow data quality (border / hide),配置 Good、Bad 边框色;需要质量异常时隐藏组件,可启用 Hide when quality is bad。
JavaScriptJavaScript
// Setup Script
var state = ReadTagInteger("PLC_LINE01.PUMP01.STATE", 0);
var fillColor = state === 1 ? "#22C55E" : "#EF4444";
var borderColor = "#000000";
var isVisible = true;

// Fill Color 表达式: fillColor
// Border Color 表达式: borderColor
// Visibility 表达式: isVisible

适用场景

用于脚本控制多个视觉通道或组合条件,例如:

  • 泵状态块:根据运行/报警两个标签同时改填充色和边框色,报警时还要闪现或隐藏
  • 多标签综合状态:颜色需要由几个数值和布尔量组合判断,单一的 State Color 或 Range Color 表达不了

边界与常见错误

几个常见配置误区:

  • Script Color 的输出表达式必须同步返回结果;不要在其中调用 fetch()、setTimeout 或 setInterval。需要异步数据时,在 Page Script 的 async 函数或用户交互脚本中处理,再将结果写入页面变量供表达式读取。
  • 多行逻辑、读标签、定义函数都放 Setup Script;三个 Output Channels 的表达式只返回最终结果
  • 只有勾选了对应通道(Fill/Border/Visibility)的表达式才会生效,没勾选的通道会被忽略
  • 质量边框与 Hide when quality is bad 依据通信质量(good/bad)应用,不表示过程值或报警状态。
Script Color 脚本颜色编辑器
图示 1: Script Color 编辑器

用一段脚本同时算出填充色、边框色和可见性三个输出通道。

再次点击图片或按 Esc 关闭