所属产品: Mingcedar Studio DESIGNER

Script Color 脚本颜色 | Mingcedar Studio

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

首次发布 2026-10-25T12:48:42.572661529Z 最近更新 2026-10-25T12:48:42.572660236Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="color-script-color">颜色: Script Color 脚本颜色</h2>

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

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

</article>

<h3 id="color-script-color-item-2">使用方法：编辑器里填的字段</h3>

<p>绑定后双击打开编辑器，配置以下字段：</p>

<ul>

<li>General（常规）：行为名称；组件名为只读，仅供确认绑定对象</li>

<li>Setup Script：读标签、定义变量、算中间值，提示语为“define fill, border, or visibility values”</li>

<li>Condition（条件）：一个生效开关表达式，默认 true；为 true 时本行为才应用颜色</li>

<li>Output Channels（输出通道）：Fill Color / Border Color / Visibility 三个通道，各自有独立的 Expression（表达式）框，并各带一个勾选框，只有勾选的通道才会被应用</li>

<li>Fill Color 和 Border Color 返回颜色字符串，Visibility 返回 true/false。新建行为的表达式引用 Setup Script 中的 MyFillcolor、MyStrokecolor、MyVisibility；修改准备脚本时要同步修改对应表达式</li>

<li>Quality Override：启用 Follow data quality (border / hide)，配置 Good、Bad 边框色；需要质量异常时隐藏组件，可启用 Hide when quality is bad。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>JavaScript</span><span class="manual-code-tools"><small>JavaScript</small><button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: JavaScript">复制代码</button><span class="manual-code-status" role="status"></span></span></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#6A737D">// Setup Script</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> state </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> ReadTagInteger</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.STATE"</span><span style="color:#24292E">, </span><span style="color:#005CC5">0</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> fillColor </span><span style="color:#D73A49">=</span><span style="color:#24292E"> state </span><span style="color:#D73A49">===</span><span style="color:#005CC5"> 1</span><span style="color:#D73A49"> ?</span><span style="color:#032F62"> "#22C55E"</span><span style="color:#D73A49"> :</span><span style="color:#032F62"> "#EF4444"</span><span style="color:#24292E">;</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> borderColor </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "#000000"</span><span style="color:#24292E">;</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> isVisible </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> true</span><span style="color:#24292E">;</span></span>

<span class="line"><span style="color:#6A737D">// Fill Color 表达式: fillColor</span></span>

<span class="line"><span style="color:#6A737D">// Border Color 表达式: borderColor</span></span>

<span class="line"><span style="color:#6A737D">// Visibility 表达式: isVisible</span></span></code></pre></div>

</article>

<p>用于脚本控制多个视觉通道或组合条件，例如：</p>

<ul>

<li>泵状态块：根据运行/报警两个标签同时改填充色和边框色，报警时还要闪现或隐藏</li>

<li>多标签综合状态：颜色需要由几个数值和布尔量组合判断，单一的 State Color 或 Range Color 表达不了</li>

</ul>

</article>

<h3 id="color-script-color-item-4">边界与常见错误</h3>

<p>几个常见配置误区：</p>

<ul>

<li>Script Color 的输出表达式必须同步返回结果；不要在其中调用 fetch()、setTimeout 或 setInterval。需要异步数据时，在 Page Script 的 async 函数或用户交互脚本中处理，再将结果写入页面变量供表达式读取。</li>

<li>多行逻辑、读标签、定义函数都放 Setup Script；三个 Output Channels 的表达式只返回最终结果</li>

<li>只有勾选了对应通道（Fill/Border/Visibility）的表达式才会生效，没勾选的通道会被忽略</li>

<li>质量边框与 Hide when quality is bad 依据通信质量（good/bad）应用，不表示过程值或报警状态。</li>

</ul>

</article>

</div>

<strong>图示 1: Script Color 编辑器</strong>

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

</figcaption>

</figure>

</div>