所属产品: Mingcedar Studio DESIGNER

画面复用与参数配置 | Mingcedar Studio

按目标在制作时确定还是运行时变化，选择 Tag、模板参数、页面变量或页面参数。

首次发布 2026-10-25T12:48:42.575237717Z 最近更新 2026-10-26T19:56:55.598244955Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="design-reuse-guide">画面设计: 画面复用与参数配置</h2>

按目标在制作时确定还是运行时变化，选择 Tag、模板参数、页面变量或页面参数。

<h3 id="design-reuse-guide-item-1">1. 选择复用方式</h3>

<p>模板的每次插入称为实例。模板参数在制作时填写，页面变量保存当前页状态，页面参数在打开另一页时传递。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<thead><tr><th scope="col">使用场景</th><th scope="col">配置方式</th><th scope="col">值的生效时机</th></tr></thead><tbody>

<tr><th scope="row">同一页并排放 PUMP01、PUMP02 的操作区</th><td><PLC> / <PUMP> 模板参数</td><td>制作时给每个实例填值，再导出</td></tr>

<tr><th scope="row">一个输入框在两台设备间切换</th><td>保存 Tag 名称的页面变量</td><td>运行时点击按钮修改变量，页面保持打开</td></tr>

<tr><th scope="row">从不同水泵打开同一张详情页</th><td>页面参数 + GetPageParameter</td><td>打开详情页时传入设备编码</td></tr>

<tr><th scope="row">按钮切换表格的 A 区 / B 区</th><td>页面变量 + 返回行数组的函数</td><td>按钮改变量，函数返回对应的行</td></tr>

<tr><th scope="row">转速持续更新，而非只在打开页时读一次</th><td>在反复求值的函数内调用 ReadTagDouble</td><td>显示重新求值时再次读数据</td></tr>

</tbody></table></div>

<li><a href="/ppt/manual/first-screen/">首次使用：制作与发布第一个画面</a></li>

<li><a href="/ppt/manual/recipe-page-parameter-input/">输入框：从本地草稿到设备传参</a></li>

<li><a href="/ppt/manual/recipe-parameterized-table/">表格：从固定数组到实时筛选</a></li>

<li><a href="/ppt/manual/recipe-template-bit-write/">位写入：从单按钮到设备复用</a></li>

</ul>

</article>

<h3 id="design-reuse-guide-item-2">2. 区分 Tag 名称与数值</h3>

<p>Tag 是 Mingcedar 数据点；speedTag 保存名称，ReadTagDouble 读取数值。将 PLC_LINE01.PUMP01.SPEED 替换为项目中可读取的数值 Tag。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<tr><th scope="row">"PLC_LINE01.PUMP01.SPEED"</th><td>完整 Tag 名称，是一个字符串</td></tr>

<tr><th scope="row">speedTag</th><td>JavaScript 变量，里面保存上述字符串</td></tr>

<tr><th scope="row"><PUMP></th><td>模板占位符，每个实例在制作时分别填值</td></tr>

<tr><th scope="row">GetPageParameter("pump", "PUMP01")</th><td>读取打开本页时带来的字符串；没传时使用 PUMP01</td></tr>

<tr><th scope="row">ReadTagDouble(speedTag, 0)</th><td>读取当前数值；0 是回退值，不代表设备已确认停机</td></tr>

</tbody></table></div>

<ol>

<li>新建一页，打开 MX Design → Scripts → Page Script，填写下方代码。</li>

<li>插入文本框，打开 MX Design → Behaviors → Browse，将 Text → Script Text 拖到该文本框的组件节点。双击新增行为，清空默认 Setup Script，Condition 填 true，Display Text 填 speedTag + " = " + String(speedNow)，然后保存。</li>

<li>保存 PPT，通过 MX Design → Export → Export HTML 导出，在 Mingcedar 打开该页，核对显示的名称和数值。</li>

</ol>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>Page Script：比较 Tag 名称与读取值</span><span class="manual-code-tools"><small>JavaScript</small><button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Page Script：比较 Tag 名称与读取值">复制代码</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:#D73A49">var</span><span style="color:#24292E"> speedTag </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "PLC_LINE01.PUMP01.SPEED"</span><span style="color:#24292E">;</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> speedNow </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> ReadTagDouble</span><span style="color:#24292E">(speedTag, </span><span style="color:#005CC5">0</span><span style="color:#24292E">);</span></span></code></pre></div>

<p class="doc-step-result"><strong>完成标志</strong> 上面的 speedNow 只在这两行执行时采样一次。需要实时显示时，把读取放进每次会求值的行为表达式或表格函数；动态 Tag 的候选范围按后续教程声明。</p>

</article>

<h3 id="design-reuse-guide-item-3">3. 各字段的变量写法</h3>

<p>下表为独立示例。selectedTag 在 Page Script 中保存对应类型的完整 Tag 名；buildRows 是表格教程的行数组函数。各字段的表达式格式不同。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<thead><tr><th scope="col">填写位置</th><th scope="col">直接绑定或模板</th><th scope="col">使用页面变量</th></tr></thead><tbody>

<tr><th scope="row">Input → PLC Tag</th><td><PLC>.<PUMP>.SPEED_SETPOINT</td><td>=selectedTag</td></tr>

<tr><th scope="row">Write Tag / Write Tag Bit → Target Tag</th><td><PLC>.<PUMP>.CTRL_WORD</td><td>=selectedTag</td></tr>

<tr><th scope="row">Table → Rows</th><td>[["PUMP01", "1200 rpm"]]</td><td>=buildRows()</td></tr>

<tr><th scope="row">Click Script</th><td>WriteTagDouble("<PLC>.<PUMP>.SPEED_SETPOINT", 1200)</td><td>WriteTagDouble(selectedTag, 1200)</td></tr>

<tr><th scope="row">State Color → Condition</th><td>ReadTagBoolean("<PLC>.<PUMP>.RUN", false)</td><td>ReadTagBoolean(selectedTag, false)</td></tr>

<tr><th scope="row">Write Tag Bit → Bit Index</th><td>3</td><td>此字段只填固定整数；动态位号使用 Click Script 中的 WriteTagBit</td></tr>

</tbody></table></div>

<p class="doc-step-result"><strong>完成标志</strong> Input 的目标变量前写 =；函数参数中直接使用变量；JavaScript 里的模板占位符放在引号内。不是所有字段都能填模板变量或脚本。</p>

</article>

<h3 id="design-reuse-guide-item-4">4. 转换数字与布尔模板参数</h3>

<p>本例新建一页，不需要 PLC 数据。LIMIT 表示非负数值，ENABLED 表示 true 或 false。模板参数按文字替换，需要转换类型后使用。</p>

<p class="doc-table-hint">左右滑动查看完整表格</p>

<thead><tr><th scope="col">实例</th><th scope="col">LIMIT</th><th scope="col">ENABLED</th><th scope="col">转换结果</th></tr></thead><tbody>

<tr><th scope="row">B</th><td>2200</td><td>false</td><td>2200 / false</td></tr>

</tbody></table></div>

<ol>

<li>插入文本框并添加 Text → Script Text。用下方完整代码替换默认 Setup Script，Condition 填 true，Display Text 填 String(limit) + " / " + String(enabled)，然后保存。</li>

<li>选中文本框，打开 MX Design → Templates → Library，点击 Save selection。Template name 填 Parameter display，确认 Captured variables 包含 LIMIT、ENABLED，再点击 Save。</li>

<li>确认保存成功后，从当前页删除仍带占位符的原始文本框。Save selection 只保存到模板库，不会移除原稿；仅隐藏或移到同一 PPT 的其他页不能将其排除在整包导出之外。</li>

<li>双击 Parameter display 卡片两次。分别选中整个实例组合，点击 MX Design → Templates → Edit Instance，在 Template variables 中填写下表的 A、B 两组值并保存。导出后打开该页，A 应显示 1500 / true，B 应显示 2200 / false。</li>

</ol>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>Script Text → Setup Script</span><span class="manual-code-tools"><small>JavaScript</small><button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Script Text → Setup Script">复制代码</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:#D73A49">var</span><span style="color:#24292E"> limitText </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "<LIMIT>"</span><span style="color:#24292E">.</span><span style="color:#6F42C1">trim</span><span style="color:#24292E">();</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> limit </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> Number</span><span style="color:#24292E">(limitText);</span></span>

<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (</span><span style="color:#D73A49">!</span><span style="color:#24292E">limitText </span><span style="color:#D73A49">||</span><span style="color:#D73A49"> !</span><span style="color:#24292E">Number.</span><span style="color:#6F42C1">isFinite</span><span style="color:#24292E">(limit) </span><span style="color:#D73A49">||</span><span style="color:#24292E"> limit </span><span style="color:#D73A49"><</span><span style="color:#005CC5"> 0</span><span style="color:#24292E">) {</span></span>

<span class="line"><span style="color:#D73A49"> throw</span><span style="color:#D73A49"> new</span><span style="color:#6F42C1"> Error</span><span style="color:#24292E">(</span><span style="color:#032F62">"LIMIT must be a non-negative number"</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> enabledText </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "<ENABLED>"</span><span style="color:#24292E">.</span><span style="color:#6F42C1">trim</span><span style="color:#24292E">().</span><span style="color:#6F42C1">toLowerCase</span><span style="color:#24292E">();</span></span>

<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (enabledText </span><span style="color:#D73A49">!==</span><span style="color:#032F62"> "true"</span><span style="color:#D73A49"> &&</span><span style="color:#24292E"> enabledText </span><span style="color:#D73A49">!==</span><span style="color:#032F62"> "false"</span><span style="color:#24292E">) {</span></span>

<span class="line"><span style="color:#D73A49"> throw</span><span style="color:#D73A49"> new</span><span style="color:#6F42C1"> Error</span><span style="color:#24292E">(</span><span style="color:#032F62">"ENABLED must be true or false"</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> enabled </span><span style="color:#D73A49">=</span><span style="color:#24292E"> enabledText </span><span style="color:#D73A49">===</span><span style="color:#032F62"> "true"</span><span style="color:#24292E">;</span></span></code></pre></div>

<div class="doc-step-troubleshooting"><p><strong>如果结果不一致</strong></p><ul>

<li>Number("<LIMIT>") 的引号必须保留；直接写 var limit = <LIMIT> 不是可用的 JavaScript。</li>

<li>Boolean("false") 的结果是 true；本例用字符串比较得到正确布尔值。</li>

<li>只保存了组件模板时，当前页 Page Script 不会跟着复制到另一页。</li>

</ul></div>

</article>

<h3 id="design-reuse-guide-item-5">5. 排查数据显示问题</h3>

<ol>

<li>先用常量确认控件：Table 的 Rows 写 [["PUMP01", "1200 rpm"]]；Input 先选 Plain Input；状态灯 Condition 先写 true / false。确认控件本身可见、可操作。</li>

<li>检查目标计算：新增 Script Text 时清空默认 Setup Script，Condition 填 true；Display Text 临时填 selectedTag 或 GetPageParameter("pump", "未传")。显示 <PUMP> 原文说明模板值未替换；显示另一设备名则检查选择或传参。</li>

<li>连接真实 Tag 后，检查名称、类型、通信质量、用户权限及运行平台连接状态。写入后对照设备回读值确认结果。</li>

</ol>

<p class="doc-step-result"><strong>完成标志</strong> 依次定位控件配置、参数/变量计算和数据连接问题。</p>

</article>

</div>