能用更简单的行为表达时,优先选择更简单的行为。只需要真 / 假两态时,优先选 State Color;只有当规则确实无法由简单行为表达时,再考虑 Script Color。
状态色 / 文本行为详解 | HQ VISU Designer
状态色和文本行为的共同目标,是把运行状态表达清楚。配置合理时,用户可以快速识别对象当前状态;配置不当时,页面会干扰视觉重点,并可能与真实业务状态不一致。
使用前说明
状态色和文本行为的共同目标,是把运行状态表达清楚。配置合理时,用户可以快速识别对象当前状态;配置不当时,页面会干扰视觉重点,并可能与真实业务状态不一致。
颜色行为主要负责填充、边框、显隐和状态灯;文本行为主要负责文本内容本身。也就是说,颜色行为更关注“看起来是什么状态”,文本行为更关注“页面上显示什么内容”。
常见问题包括:简单行为即可满足需求时仍将对象配置为脚本行为;或将质量 bad、报警、停机等含义不同的状态混用同一种颜色。状态表达越混乱,页面后续维护成本越高。
先做选型:该用哪一种状态色行为
状态色行为最怕选错类型。选错以后,后面所有字段都会越配越绕。
如果对象只有两个明确状态,例如运行 / 停止、开 / 关、自动 / 手动,优先考虑 State Color。它的优势是结构直观,后续维护人员可以直接理解状态来源和显示结果。
- 适合二值状态
- 适合按钮、灯、开关、启停件
- 优先于复杂脚本色
var running = ReadTagBoolean("Device.RUN", false);
running Definition 中准备状态变量;Condition 返回 true 或 false;True State 和 False State 分别维护填充、边框和显隐。需要表达数据可信度时,再开启 Quality Border。
- Definition:读取 running、alarm、quality 等变量
- Condition:返回布尔值
- True / False:分别设置显示状态
- Quality Border:表达数据质量,不替代业务状态
Blink Color 最适合报警灯、强提醒块、二值告警提示。它和普通二值状态色的区别,不在于状态来源,而在于它会在 true / false 或 on / off 之间做闪烁节奏表达。
- 适合报警和提醒
- 不建议大面积滥用
- 闪烁只该服务重点状态
var alarm = ReadTagBoolean("Device.ALARM", false);
alarm 当一个数值要映射成多个颜色区间时,用 Range Color 最合适。温度、压力、负载、电流、液位这类连续数值都很适合。核心不是写很多 if,而是先定 limits,再定每个区间的颜色。
- 适合模拟量和区间显示
- 优先让规则落在 limits 上
- 比脚本里堆很多 if 更直观
var temp = ReadTagDouble("Device.TEMP", 0);
temp Range Color 的颜色和显隐配置应与区间数量对应。4 个 Limits 会形成 5 个区间。用户应先按工艺单位确定边界,再配置低、正常、偏高、报警等区间状态。
- 先确认单位:例如 °C、bar、%、rpm
- 再确定 Limits:例如 20, 40, 60, 80
- 最后配置每个区间颜色和显隐
- 固定状态码不使用 Range Color
如果输入值不是连续变化,而是一组固定离散状态码,例如 0、1、2、4、8、16 这种状态位或枚举值,就更适合 Discrete Color。它不是看区间,而是看落在哪个离散状态。
- 适合状态码和枚举值
- 适合离散状态而不是连续区间
- 比 Range Color 更适合固定状态列表
Discrete Color 应先列清楚状态码含义,再配置对应颜色。常见做法是把 0、1、2、3 或位值 1、2、4、8 分别映射到停机、运行、手动、故障等状态。未覆盖的值应有默认显示策略。
- 状态码来自 ReadTagInteger
- 每个状态码对应一个明确含义
- 未定义状态应有默认颜色或隐藏策略
- 连续数值不使用 Discrete Color
如果一个对象同时可能有报警、手动、自动、待机等多个互斥状态,而且这些状态之间有优先级,就该用 Multi-State Color。第一个命中的条件优先,后面的条件不会再继续覆盖。
- 适合多条件互斥状态
- 第一命中优先
- 适合 alarm > manual > auto > idle 这种顺序
var alarm = ReadTagBoolean("Device.ALARM", false);
var manual = ReadTagBoolean("Device.MANUAL", false);
var running = ReadTagBoolean("Device.RUN", false); Multi-State Color 按条件顺序命中,前面的条件优先级更高。配置时应把报警、故障、禁用等高优先级状态放在前面,把运行、待机、普通状态放在后面,并明确 Else 状态。
- Condition1 优先级最高
- 报警和故障通常放在前面
- 运行和待机通常放在后面
- Use Else 用于未命中时的默认状态
当填充、边框、显隐需要一起被脚本控制,或者条件组合已经超出简单状态行为的表达能力时,再考虑 Script Color。它很强,但也意味着后续维护要看脚本,不如简单状态行为直观。
- 适合复杂组合规则
- 适合 fill / border / visible 联动
- 简单状态优先使用标准行为
var state = ReadTagInteger("Device.STATE", 0);
var MyFillcolor = state === 1 ? "#22C55E" : "#EF4444";
var MyStrokecolor = "#0f172a";
var MyVisibility = true; Fill 和 Stroke 是颜色字符串表达式字段。由模板变量提供颜色时,应写成 `'<FILL_COLOR>'` 或 `"<FILL_COLOR>"`;Stroke 同理。Visibility、Enabled 这类布尔条件仍按 JavaScript 表达式填写。
Fill: '<FILL_COLOR>'
Stroke: '<STROKE_COLOR>'
Visibility: running === true 如果对象要直接读取布尔 Tag 或某个位,并据此切换颜色和显隐,最直接的方式是把这个布尔量或位送进 State Color(两态开 / 关)或 Discrete Color(开 / 关 / else 多态)。固定 Tag 可填写 `Device.RUN`,读取某个位用 `Device.STATUS[3]`;包含模板变量的 Tag 应写成 `'<PLC>.RUN'` 或 `'<PLC>.<RUN_TAG>'`。
- 两态布尔量优先 State Color
- 开 / 关 / else 多态用 Discrete Color
- 读取某个位用 `Device.STATUS[3]` 语法
读取状态字中的单个位时,可在完整 Tag 后追加 `[0]` 到 `[31]`,也就是 `TAG[bit]` 语法。其中 `[0]` 表示最低位。需要写入单个位时,不在 Tag 表达式中写 `[n]`,应使用 Write Tag Bit 并在 Bit Index 中填写位号。
- 读取位语法:`TAG[bit]`
- 读取位:`Device.STATUS[0]`
- 模板读取位:`'<PLC>.<STATUS_TAG>[3]'`
- 位号范围:0 到 31
- 写位使用 Write Tag Bit
位读取可以直接在 Tag 点名后追加 `[n]`,例如 `Device.STATUS[3]`;位写入不能把 `[n]` 放在写值目标中。Write Tag Bit 的目标应填写父级整数 Tag,例如 `Device.STATUS`,位号填写在 Bit Index 中。这样运行端才能读取当前整数值,计算目标位后的新整数值,再提交写入。
- 读取位:`ReadTagBoolean("Device.STATUS[3]", false)`
- 写位目标:`Device.STATUS`
- 写位位号:Bit Index = 3
- 写位动作:Set、Reset、Toggle
// 读取状态字第 3 位
ReadTagBoolean("Device.STATUS[3]", false)
// 写位时使用字段
Tag Expression: "Device.STATUS"
Bit Index: 3
Bit Action: Set
只要是明确二值状态,优先从 State Color 开始想,而不是先写脚本。
闪烁适合报警和强提醒,不适合作为普通状态色的常态表达。
连续数值优先用区间映射表达,避免在脚本中堆叠多层判断。
离散状态码映射时,比区间色更适合用 Discrete Color。
多个互斥状态要按优先级命中时,Multi-State Color 更可靠。
复杂规则可以交给 Script Color,但前提是确实需要这种复杂度。
想把布尔量或某个位显示成文字用 Tag Text,想显示成颜色用 State Color。
Quality Border:质量不好,不等于业务状态变了
Quality Border 是很多页面最容易误用的功能。它表达的是通信质量,不是设备业务状态。
Quality Border 关注的是 Tag 质量是否 good / bad,也就是当前这条数据链路是否可信。它不代表设备报警、不代表设备停机,也不代表数据值本身是什么。
当页面需要明确区分“值本身正常,但是数据来源不可靠”这种情况时,就应该打开 Quality Border。典型场景包括掉线描边、通讯异常提示和远程数据异常状态。
质量 bad 时,页面应明确表达当前数据不可信。颜色、边框和显隐可以体现数据质量异常,避免用户将该状态误解为正常业务状态。业务报警、停机和运行状态仍应由实际状态 Tag 或报警规则表达。
GOOD / BAD 颜色只表达数据质量,不负责表达运行、停止、报警或手自动状态。建议让基础状态色表达业务状态,让 Quality Border 作为外层质量提示。这样用户可以同时看到设备状态和数据可信度。
当质量异常会导致对象显示误导用户时,可以启用 Hide when quality BAD。常见对象包括关键数值、设定值输入、操作按钮和汇总状态。隐藏策略应和页面提示配合使用,避免用户误以为对象不存在。
Quality Border 打开后,GOOD / BAD 颜色才会参与质量态表达;它表达数据可信度,不等同于报警。
脚本色负责业务状态,质量边框负责 Tag 质量,两条线不要混成一个规则。
质量色、状态色和边框色建议用颜色选择器统一确认,减少手输色值造成的不一致。
文本行为:内容显示该用哪一种
文本行为主要分三类:Script Text、Tag Text、Localized Text。区分这三类后,文本显示逻辑会清楚很多。
当文本需要拼接多个值、格式化数字、按条件选择不同文案时,用 Script Text 最合适。它的关键是 Definition 里准备数据,Text 字段里只返回最终显示字符串。
- 适合格式化和拼接
- 适合带单位和条件文案
- 适合多个数据源组合成一句话
var pressure = ReadTagDouble("Device.PRESSURE", 0.0);
"Pressure: " + pressure.toFixed(1) + " bar" 如果文本内容本质上就是一个 Tag,再加少量前后缀,例如温度、压力、模式名、当前批次号,优先使用 Tag Text。Tag、Default、Prefix、Suffix 都可以使用模板变量;包含模板变量时按字符串写法填写,例如 Tag 填 `'<PLC>.TEMP'`,Prefix 填 `'<TITLE>'`。
- 适合直接显示一个 Tag
- 适合配 Prefix / Suffix
- 简单场景优先于 Script Text
Tag: '<PLC>.TEMP'
Default Value: '<DEFAULT_TEXT>'
Prefix: '<TITLE>'
Suffix: " °C" 当一个文本对象显示的是语言键对应的翻译,而不是实时数值时,用 Localized Text。按钮标题、面板标题、菜单项、固定状态词最适合这种方式。
如果只是一个 Tag 直接显示,先用 Tag Text;如果是多语言固定文案,先用 Localized Text;如果需要组合、格式化或复杂表达,再用 Script Text。这个顺序会让页面更容易维护。
Tag Text 的 Tag、Default、Prefix、Suffix 可以接收模板变量。模板变量参与脚本或字符串表达式时应写入引号,例如 `'<PLC>.TEMP'`、`'<TITLE>'`、`'<DEFAULT_TEXT>'`。固定点名不需要模板变量时,可直接填写完整点名。
Script Text 的最终 Text 字段应返回字符串。Definition 可先读取多个 Tag、处理数字格式和状态判断,Text 字段只负责返回最终显示文本。需要多语言时,固定文案优先使用 Localized Text,实时数值部分再由脚本组合。
文本需要拼接、格式化或组合多个值时,Script Text 更合适。
一个 Tag 直接显示成文本时,Tag Text 会比写脚本更简单。
固定文案和语言键显示,优先使用 Localized Text。
常见状态表达组合:页面看起来清楚,靠的是组合而不是单点功能
真实项目里,状态表达通常不是一个行为单独完成,而是颜色、文本和质量边界一起配。
最常见组合是:用 State Color 表达运行 / 停止,再打开 Quality Border 区分通信是否可靠。这样用户能同时看到设备状态和数据可信度。
强提醒对象可以用 Blink Color 做外观闪烁,同时旁边文本用 Script Text 拼接报警文案或当前状态。这样视觉和文字信息能一起传达。
对操作模式、设备工况这类多状态对象,可以用 Multi-State Color 管理颜色,用 Localized Text 管理文本。颜色负责快速识别,文本负责精确信息。
位状态表达开关或启停,质量边框补充数据是否可信;两者同时存在时要让用户能分辨。