多页面、画面与弹窗

一块大屏往往不止一页：总览页、工艺页、分析页来回切换，点一下设备弹出详情，侧边滑出告警列表。本篇讲怎么组织这些内容：

• 页面：主画布，运行时一次显示一个，用按钮或菜单切换。
• 前景层、背景层：所有页面共用的一层，前景盖在每页上面（如统一的标题栏），背景垫在每页下面（如统一的底图、边框）。
• 画面：独立于页面的一块画布，可以弹窗打开、从侧边滑出成抽屉、在应用一打开时作为启动画面，也可以作为组件嵌进页面重复使用。

页面条

编辑器底部是页面条，页面、前景、背景和画面都在这里新建和切换。下面两张图来自示例「综合工程 - 智慧供热能源站三维组态联控」，它有三个页面和三个画面。左半段是页面：

1. +前景：新建前景层。建好后变成「前景层」页签，点它编辑前景内容。
2. 页面页签：每个页面一个页签，当前编辑的高亮；页签上的 × 删除这一页。
3. +子页面：新建一个页面。
4. +背景：新建背景层，用法同前景。

右半段是画面：

5. 画面页签：每个画面一个页签，点它进入画面编辑。
6. 画面页签上的按钮：向上箭头「发布为组件」（填名称、截封面，存进资产库，可以在别的工程里拖出来用）；星形「设为启动画面」（应用一加载就打开）；× 删除画面。
7. 「页」标记：这个画面已被某个页面设为「随画面打开」，鼠标移上去能看到是哪个页面。已经被页面关联的画面不能再设为启动画面。
8. +画面：新建画面。

页面条最右边是画布缩放：缩小、放大、比例输入框和「最佳显示比例」。

左上角图层面板的「页面」页签列出工程里所有的页面和画面，页面多的时候在这里找更方便：

1. 页面页签：图层面板顶部「页面图层」旁边的「页面」。
2. 页面列表：前景层、各个页面、背景层，打勾的是当前正在编辑的；上方搜索框支持拼音。
3. 画面列表：工程里所有的画面。

多个页面

新建子页面

点页面条上的「+子页面」，选新页面的类型：

1. 页面类型：「空白页」是普通页面；「组态页」是整页组态画布，进去就能用图元库拼工艺流程，见组态。
2. +子页面：点它弹出上面的选择。

新页面默认叫「子页面1」，在页签上双击或在属性面板里改名。每个页面有自己的布局画像、适配方式和背景，见画布适配与布局。

在页面之间搬组件

已经做好的组件要挪到另一页，不用重做：右键组件，选「移动到页面」或「复制到页面」，再选目标页面。

1. 移动到页面：组件从当前页移走，放到目标页同样的位置。
2. 复制到页面：当前页保留，目标页多一份。
3. 目标页面：子菜单列出工程里的其他页面，图中只有「子页面1」。

切换页面

运行时切页靠事件：给按钮、菜单或图表配一个「点击」事件，动作选「切换页面」，再选目标页面。供热示例顶部的「综合总览」「工艺组态」「数据分析」三个按钮就是这样做的；它的「换热站当前负荷」柱状图点一下柱条，也会跳到分析页。事件的配法见事件交互与多状态。

画面

新建与编辑画面

点「+画面」新建一个画面，默认叫「画面1」，尺寸 600×400，显示在页面中央。画面的编辑方式和页面一样：从组件库添加组件、调样式、接数据、配事件。选中画面本身（点画布空白处），属性面板里是画面的设置：

1. 画面模式：「固定」显示在页面的固定位置；「锚定」贴着触发它的组件旁边弹出，适合做悬浮卡片、地图信息窗。
2. 画面位置：中央、顶部、底部、左侧、右侧。选左侧或右侧就是从侧边滑出的抽屉，选顶部或底部就是上下的通栏。
3. 画面大小与位置偏移：宽、高，单位可选像素或百分比；位置偏移在默认位置上再挪一点。靠边的画面还能设上下左右的边距。
4. 遮罩与关闭：「阻止页面交互」打开时画面是模态的，画面外的页面点不动，并用「遮罩颜色」压暗；「点击外部关闭」点遮罩就关；「内容可滚动」让内容超出时能滚动。
5. 标题栏：显示标题栏、标题文字、高度、背景、文字颜色和大小；「可拖动画面」打开后，播放时按住标题栏能拖动画面。

下面还有「关闭按钮」（显示与否、颜色、大小、偏移）、「背景设置」和「框阴影」三组。

用按钮打开画面

1. 回到页面，加一个按钮，在「样式」里把文字改成「查看设备详情」。
2. 切到「事件」页签，点「添加事件」。
3. 触发选「点击」；动作选「打开画面」，目标画面选「画面1」，操作选「打开」。
4. 点「确认」。

1. 触发：什么时候执行，这里是「点击」。
2. 动作：「打开画面」在「导航跳转」分组里，同组还有「切换页面」「打开链接」。
3. 目标画面：要打开哪个画面。
4. 操作：「打开」「关闭」或「切换」（开着就关、关着就开）。画面里的「关闭」按钮配同样的动作、操作选「关闭」即可。

点顶部「预览」，再点按钮，画面以模态窗口弹出：

1. 模态窗口：带「设备详情」标题栏，页面其余部分被遮罩压暗、点不动。
2. 关闭按钮：标题栏右侧的 ×；打开了「点击外部关闭」时，点遮罩也能关。
3. 嵌在页面里的同一个画面：右上角是用画面组件嵌进页面的「画面1」，内容和弹窗完全一样，见下文。

抽屉

抽屉就是靠边的画面。供热示例的「告警中心」画面位置选「右侧」，大小 500×1080，点首页的「打开告警中心 · 查看全部记录」，它从右边滑出：

1. 右侧抽屉：标题、告警表格和底部的「关闭抽屉」按钮都是画面里的组件。

进入页面时自动打开

不想让用户点按钮，进入某个页面时就把说明弹出来：选中这个页面，在「基础设置」里把「随画面打开」设成要打开的画面。

1. 随画面打开：进入这个页面时自动打开选中的画面，图中是「操作指南」。

供热示例一进入「综合总览」，顶部就滑出「操作指南」说明条。页面条上被关联的画面页签会显示「页」标记。

要在整个应用一打开时就显示（比如欢迎页、登录提示），点画面页签上的星形，设为启动画面。一个工程只能有一个启动画面。

把画面嵌进页面

同一块内容要在好几个页面上出现，比如公共的头部、一组 KPI 卡，可以做成画面，再用「画面组件」嵌进各个页面。画面组件在组件库「控件」分类里：

1. 画面组件：在页面上显示「画面1」的内容，可以像普通组件一样移动、缩放。
2. 选择画面：要显示哪个画面。
3. 内容缩放：画面按自己的尺寸画好后怎么放进组件框：拉伸铺满、等比适应、等比铺满或不缩放。
4. 显示画面背景：是否带上画面自己的背景。

画面组件是引用：改了画面里的内容，所有嵌了它的地方都跟着变。要跨工程复用，就点画面页签上的「发布为组件」存进资产库，资产库里的是发布那一刻的快照。

下一步

• 事件交互与多状态：切换页面、打开画面之外的更多动作。
• 画布适配与布局：每个页面的布局画像和适配方式。
• 保存、发布与嵌入：发布后在浏览器里打开或嵌入业务系统。