所属产品: Mingcedar CONTROL

画面文件、运行菜单与弹窗模板 | Mingcedar

操作位置：配置中心 → 画面文件。查看需要 screen:view，上传与恢复需要 screen:manage。准备完整的 Mingcedar Studio 导出目录或自写 HTML 与资源文件；相对引用要保持原目录结构。

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

<div class="manual-doc-article manual-doc-article-section"><h2 id="screens">画面: 画面文件、运行菜单与弹窗模板</h2>

上传 HTML 与资源，配置菜单和弹窗模板，再检查运行数据与访问。

<h3 id="screens-item-1">1. 选择目录并发布画面文件</h3>

<p>操作位置：配置中心 → 画面文件。查看需要 screen:view，上传与恢复需要 screen:manage。准备完整的 Mingcedar Studio 导出目录或自写 HTML 与资源文件；相对引用要保持原目录结构。</p>

<ol>

<li>在左侧目录选择 assets 根目录或目标子目录，核对页面显示的“用户页面目录”实际路径。</li>

<li>点击“选择内容”，选择文件或文件夹；整个画面包应选择文件夹，以保留相对路径。</li>

<li>在“待发布文件（Pending Files）”逐项核对入口 HTML 与依赖资源。存在同名文件时，确认要更新该版本后勾选“允许覆盖（Allow Overwrite）”。</li>

<li>点击“发布”。此按钮把待发布文件上传到当前目录；等待“上传完成”和文件数量提示。</li>

<li>刷新目录，确认入口 HTML 和资源文件，再查看当前目录的“最近记录”。随后到菜单页选择入口 HTML。</li>

</ol>

<p class="doc-step-result"><strong>完成标志</strong> 所选目录显示 HTML、资源和上传记录，无需另做版本发布。</p>

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

<li>提示同名文件存在：核对目标目录与现有文件，确认要替换时开启“允许覆盖”。</li>

<li>提示没有文件：重新选择文件并确认 Pending Files 非空。</li>

<li>提交超时：刷新目录和最近记录核对是否已成功，再决定是否重新提交。</li>

</ul></div>

</article>

<h3 id="screens-item-2">画面文件使用哪个运行目录</h3>

<p>画面文件页会显示当前实际“用户页面目录”，菜单的入口 HTML 从该目录检索。安装方式或管理员配置可改变路径，以页面显示值为准。</p>

<ul>

<li>assets 根目录可以直接放页面，也可以在其中按项目建立子目录。</li>

<li>上传文件夹会保留文件夹内部路径；HTML 中的相对资源引用应与上传后的结构一致。</li>

<li>手动复制文件时，目标应是页面显示的实际运行目录，而不是安装包的解压目录。</li>

<li>菜单中找不到 HTML 时，先核对画面文件目录和刷新结果。</li>

</ul>

</article>

<h3 id="screens-history">查看最近记录并恢复目录</h3>

<p>“最近记录”列出当前目录的上传、发布和清理记录；恢复会用选中记录替换当前运行目录内容。</p>

<ol>

<li>先在左侧选择要核对的目录，展开最近记录查看时间、操作与文件数量。</li>

<li>确需恢复时点击对应记录的“恢复”，在确认框核对目录和记录摘要后提交。</li>

<li>等待恢复结果，刷新目录并从运行菜单重新打开入口 HTML，核对资源与实时功能。</li>

</ol>

<p class="doc-step-result"><strong>完成标志</strong> 恢复会替换当前运行文件；从菜单打开画面确认结果。</p>

</article>

<h3 id="screens-item-3">2. 配置直接打开页面的一级菜单</h3>

<p>操作位置：配置中心 → 菜单。查看需要 menu:view，创建和修改需要 menu:manage。一级“页面（直接打开 HTML）”打开一个页面，“分组”包含二级菜单。</p>

<ol>

<li>点击“新增一级”，填写默认名称；有多语言文本键时填写 Key，留空时运行页使用默认名称。</li>

<li>一级类型选择“页面（直接打开 HTML）”，在“入口 HTML”下拉框选择已上传页面的实际路径。</li>

<li>设置序号和图标。仅需已登录用户看到此入口时，开启“需要登录”。</li>

<li>点击“创建一级菜单”或编辑状态下的“更新一级菜单”，等待保存结果。</li>

<li>返回运行页打开该菜单；若仍显示旧列表，刷新运行页后再核对页面和资源。</li>

</ol>

<p class="doc-step-result"><strong>完成标志</strong> 菜单打开选定 HTML，内容由上传文件及资源决定。</p>

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

<li>入口 HTML 未列出：到画面文件页核对上传目录，再刷新并重新打开菜单。</li>

<li>菜单未显示：核对保存结果、站点、登录状态及父级类型。</li>

<li>页面 404：对照入口 HTML 与画面文件中的实际相对路径。</li>

</ul></div>

</article>

<h3 id="screens-secondary-menu">配置分组和二级页面菜单</h3>

<p>需要多个页面归在一组时，先建一级“分组”，再为其创建二级菜单。报警筛选范围只在二级菜单编辑区配置。</p>

<ol>

<li>新增一级菜单并将类型设为“分组（包含二级菜单）”，填写名称后点击“保存并管理二级”。</li>

<li>在二级编辑区填写默认名称并选择入口 HTML，按需设置序号、图标和“需要登录”。</li>

<li>需要限定该菜单的报警范围时点击“配置”，填写完整 Tag 点名、设备编码或设备编码.分组编码；关闭范围弹窗后仍须点击“创建二级菜单”或“更新二级菜单”。</li>

<li>在运行页展开分组，打开二级页面，并核对其报警范围与访问状态。</li>

</ol>

<p class="doc-step-result"><strong>完成标志</strong> 二级页面及其报警筛选范围随菜单保存；只关闭范围配置弹窗不会保存菜单。</p>

</article>

<h3 id="screens-item-4">3. 创建弹窗模板并保存</h3>

<p>入口：配置中心 → 弹窗模板。查看需 screen:view，保存需 screen:manage。左侧选择、中间编辑、右侧预览；切换会提示未保存修改。</p>

<ol>

<li>点击“新增”，填写唯一模板名称。系统编码按名称生成，保存前可在只读字段预览。</li>

<li>在“分类（Structure）”按分类、小类、分组、信号项逐级组织内容。填写设备实际信号后缀；运行时根据 PLC 名称、DiagnosisControl 前缀和信号后缀组成完整点名。</li>

<li>需要报警或趋势时，在“模块配置”分别打开对应模块，启用并配置其范围。关闭模块弹窗后仍需保存整个模板。</li>

<li>“实时预览”显示结构与示例状态，不执行现场写入；实际 Tag、报警和趋势绑定需在运行页验证。</li>

<li>点击顶部“保存”，等待成功提示和“未保存”标记消失。再次选择模板确认内容。</li>

<li>在实际运行画面中打开使用此模板的设备对象，核对真实 Tag、报警范围及趋势结果。运行画面的对象绑定需与模板的信号命名规则一致。</li>

</ol>

<p class="doc-step-result"><strong>完成标志</strong> 在运行画面中核对已保存模板的对象绑定与数据。</p>

</article>

<h3 id="screens-item-5">弹窗模板文件结构</h3>

<p>每个模板为一个本地 JSON，目录由 POPUP_TEMPLATE_PATH 指定；若配置以 .json 结尾，去掉扩展名即为目录。Windows 正式安装默认为安装目录下的 config/popup-templates/。</p>

<ul>

<li>模板名称必须唯一，系统编码与模板 ID 应保持一致。</li>

<li>修改分类、小类、分组、信号项或模块后，点击顶部“保存”才写入文件。</li>

<li>预览展示结构和示例状态；报警与趋势范围需在运行设备上下文中分别核对。</li>

</ul>

</article>

<h3 id="screens-item-6">迁移已有弹窗模板</h3>

<p>备份目标模板，在维护时间停止目标 Web/App，将完整 JSON 复制到其实际模板目录。重启 Web/App 并刷新列表，以更新进程缓存。</p>

<ul>

<li>先核对目标项目是否已有相同模板 ID 或系统编码，避免覆盖。</li>

<li>信号后缀和报警、趋势范围必须与目标项目的设备及 Tag 编码对应。</li>

<li>迁移后在编辑页核对结构并保存必要调整，再从实际运行画面打开弹窗检查数据。</li>

</ul>

</article>

<h3 id="screens-item-7">PPT 画面弹窗与报警范围对应关系</h3>

<p>Mingcedar Studio 导出的页面可用 JSON 声明报警与弹窗范围。完整 Tag 和分组引用包含设备编码；plcCodes 只填设备编码。配置后在运行页核对实际对象范围。</p>

<ul>

<li><code>showWindow</code>：当前页是否允许显示报警窗口。</li>

<li><code>tags</code>：具体完整点名，写成“设备编码.Tag编码”，适合只看几个确定点位。</li>

<li><code>plcCodes</code>：设备 / PLC 编码，填写 <code><device-code></code>（只填设备，不加点）。</li>

<li><code>functionGroupCodes</code>：功能组，写成 <code><device-code>.<function-group-code></code>。</li>

<li><code>deviceGroupCodes</code>：设备组 / 对象，写成 <code><device-code>.<equipment-group-code></code>。</li>

<li><code>signalGroupCodes</code>：信号组，写成 <code><device-code>.<signal-group-code></code>。</li>

<li>数组为空表示该维度不附加筛选条件；实际范围还取决于页面及模板的其他设置。</li>

</ul>

<span class="line"><span style="color:#005CC5"> "showWindow"</span><span style="color:#24292E">: </span><span style="color:#005CC5">true</span><span style="color:#24292E">,</span></span>

<span class="line"><span style="color:#005CC5"> "plcCodes"</span><span style="color:#24292E">: [],</span></span>

<span class="line"><span style="color:#005CC5"> "functionGroupCodes"</span><span style="color:#24292E">: [],</span></span>

<span class="line"><span style="color:#005CC5"> "deviceGroupCodes"</span><span style="color:#24292E">: [],</span></span>

<span class="line"><span style="color:#005CC5"> "signalGroupCodes"</span><span style="color:#24292E">: []</span></span>

</article>

<h3 id="screens-item-8">核对运行页面</h3>

<p>从运行页打开菜单，检查入口文件、依赖资源、实时值、弹窗和登录访问状态。</p>

<ul>

<li>菜单是否打开预期 HTML，图片、样式和脚本是否成功加载。</li>

<li>Tag 值是否与 Tag 测试的质量和时间一致；弹窗对象是否绑定到预期设备。</li>

<li>报警与趋势范围是否包含目标点位，登录要求是否按菜单设置生效。</li>

</ul>

</article>

</div>

<p>画面文件页展示目录、选择文件或文件夹、待发布区和发布入口。</p>

</figcaption>

</figure>

<p>一级菜单编辑区展示名称、目标、序号、启用、登录要求和图标；菜单访问地址在上方可核对。</p>

</figcaption>

</figure>

<p>弹窗模板页集中编辑模板、分类及报警与趋势模块，下方预览区可检查当前模板的呈现。</p>

</figcaption>

</figure>

</div>