创建大屏应用

凡拓数创数字孪生 2025年6月3日 18:43

收藏文档

本文将为您介绍在FunBI三维可视化应用编辑器中如何创建大屏应用。

---
#### 新建空白应用/创建模板

点击新建空白应用，选择分组，输入场景名称，点击提交即创建完成。

![](/media/202506/2025-06-03_183909_8575340.605453539495597.png)

![](/media/202506/2025-06-03_183927_1891800.7081136577554559.png)

或者在更多模板中找到需要的大屏应用，点击创建，即可在模板基础上进一步编辑大屏应用。

![](/media/202506/2025-06-03_183933_3644530.2922909745949087.png)

![](/media/202506/2025-06-03_183938_9434030.20465000676924205.png)

#### 选择三维场景

点击三维场景，选择要用作底图的三维场景。

![](/media/202506/2025-06-03_183946_8136220.3000984329336367.png)

![](/media/202506/2025-06-03_183952_6597930.16063005311412615.png)

#### 页面设置

点击画布外任意空白位置，即可进入页面设置。首先调整屏幕大小，支持1080P、2K、4K、8K，支持手动输入特殊分辨率。

可以设置背景色、是否启用背景图。上传项目封面，或者直接截屏。

预览配置可以选择显示比例，铺满屏幕、屏幕比例适配或原分辨率溢出滚动。

![](/media/202506/2025-06-03_184002_1850930.2160082881065688.png)

终端交互可以设置是否启用终端通信，需要另外编辑终端交互页面，通过其他设备（平板、手机）点击按钮来控制大屏。同样可以设置终端屏幕大小，支持手动输入窗口尺寸。

![](/media/202506/2025-06-03_184009_4595590.8322080078069386.png)
#### 添加标题

点击素材库，选择系统资产\-标题栏，找到需要添加的标题栏，直接点击即可自动置于页面顶部。

![](/media/202506/2025-06-03_184017_4910810.7570949923299033.png)

点击组件，选择文字\-文本框，直接拖拉拽到标题栏上，点击样式修改字体、大小、颜色等，点击数据修改文字内容。

![](/media/202506/2025-06-03_184023_0872990.5444303663159075.png)

#### 添加动态面板

动态面板可以容纳多个素材和组件内容，统一调整组件在大屏中的位置，相当于图层分组的作用。

点击动态面板，设置面板大小，双击进入动态面板或点击编辑动态面板按钮。

![](/media/202506/2025-06-03_184033_8757530.7812591946896802.png)

#### 设置面板状态

左上状态列表中可以添加多个面板状态，每个状态对应一个需要切换的动态面板。

每个面板可以放入不同的素材和组件，建议面板状态命名方式与后续需要切换的页面名称一致，便于交互调用。

点击组件/素材库，找到需要添加的组件/素材类型，直接拖拉拽到面板中的具体位置，直接输入位置尺寸进行微调。

![](/media/202506/2025-06-03_184040_8967790.2144363865220913.png)

#### 调整组件样式

每个组件都可以单独调整其样式，例如表格类组件可以修改全局、行配置、列配置等，图表类组件可以修改系列、图例、颜色、图标尺寸等，根据需求调整每一项的样式细节。

![](/media/202506/2025-06-03_184048_4409890.25401238487188094.png)

![](/media/202506/2025-06-03_184054_3035260.6516942650342021.png)

#### 设置按钮交互

三维场景中的场景状态以及大屏应用中的面板状态设置完成，即可在大屏应用中配置交互。

点击组件\-交互，选择需要添加的交互组件。

![](/media/202506/2025-06-03_184100_8156320.5582569813285153.png)

点击样式，可修改文字边距、方向、对齐方式，可修改布局。

![](/media/202506/2025-06-03_184107_3719070.704015916461106.png)

点击数据，修改按钮中文本内容。

![](/media/202506/2025-06-03_184113_3168420.7226243096275385.png)
点击交互，添加自定义事件，事件类型可选择鼠标点击/移入/移出（常见的是鼠标点击），条件设置value\=N，N为数据中按钮对应的value值。

![](/media/202506/2025-06-03_184120_3037130.6152670206159934.png)
![](/media/202506/2025-06-03_184127_3275440.20560812088389135.png)

添加动作，通常选择“组件”类型\-“全局”，找到鼠标点击时需要触发动作的组件。

以“场景模板”为例，动作选择“切换场景状态”，选择添加的场景状态名，设置延时。

![](/media/202506/2025-06-03_184143_3018580.5307980242884145.png)

切换动态面板组件同理，找到对应的动态面板名，动作选择“切换组件景状态”，选择添加的面板状态名，设置动画类型、速率、动画时长、延时。

![](/media/202506/2025-06-03_184203_4689630.6621590043391684.png)

#### 接入数据

动态面板、组件样式、按钮交互全部根据需求设置完毕后，即可接入实际数据。

以轮播表格为例，点击数据，选择数据源类型为API接口，选择添加的数据源，请求方式选择POST，添加数据过滤器，过滤需要读取的字段，数据响应结果中会显示返回的值。

![](/media/202506/2025-06-03_184216_2963510.8993327306959394.png)![](/media/202506/2025-06-03_184226_2391740.00816564806130371.png)
在上方选择字段的映射，修改行配置、列配置的字段名，即可成功接入数据。

![](/media/202506/2025-06-03_184240_9373970.9487714732620957.png)![](/media/202506/2025-06-03_184245_1052900.48229334818961955.png)

#### 添加终端交互

**新建终端交互**

点击任意空白处，进入页面设置。勾选启动终端通信，自动生成终端指令链接。

![](/media/202506/2025-06-03_184301_8706140.015841804158797212.png)

点击上方菜单栏终端交互，生成终端窗口，双击进入终端交互或点击编辑终端交互按钮。

![](/media/202506/2025-06-03_184308_2719430.9957199639163161.png)

**终端交互页面设置**

设置终端屏幕窗口尺寸，支持手动输入窗口尺寸。通过其他设备（平板、手机）打开终端交互页面，匹配对应的分辨率。

![](/media/202506/2025-06-03_184315_1999860.7886672333791521.png)

**远程控制按钮配置**

点击组件，将选项卡、交互组件拖拉拽到终端页面中，根据4\.3内容编辑组件样式。

点击交互，配置按钮终端交互动作，选择远程控制，事件类型为鼠标点击时，控制大屏应用中的按钮动作、页面切换。

![](/media/202506/2025-06-03_184322_0139700.02934011997865893.png)

#### 大屏应用发布

大屏应用全部编辑完成，预览确认没有问题后，即可发布。

可以设置是否加密发布，设置发布截止时间（链接有效期），点击发布应用，系统自动生成链接，复制分享信息。

其他用户可以通过在浏览器中粘贴分享的链接地址，访问大屏应用，无需安装其他插件。

大屏创建者可以随时修改发布密码和有效期。

![](/media/202506/2025-06-03_184329_4294540.704699840016337.png)

![](/media/202506/2025-06-03_184338_0822040.4387660127644717.png)

终端交互页面随大屏应用自动生成系统链接，复制分享信息。

其他用户可以通过在浏览器中粘贴分享的终端链接地址，访问中控系统，控制大屏页面，无需安装其他插件。

![](/media/202506/2025-06-03_184347_5099910.6068391051575818.png)