Previous topicNext topic
WebBuilderX > 子页面容器类型 > 面板类容器 > 大屏面板 >
创建面板

和其他各种面板的创建方法一样,在“子页面模块”类型的页面中,选择添加“大屏面板”类型的容器即可:

在这里,只有勾选了“允许显示为全屏”,该面板右上角才会出现“全屏”操作按钮。

需要特别说明的是,大屏面板是所有类型容器中唯一不需要向其中添加组件元素的。因为,它所采用的内容创建方式为嵌入,也就是嵌入第三方工具制作的html大屏项目文件。切换到“大屏属性”页签,可以看到这里有两项操作:

其中,页面路径是指大屏页面文件存放的路径。该路径必须保存在指定网站目录的components中,且大屏文件必须使用“微兔可视化”工具设计生成。这个工具是完全免费的大屏设计软件,下载地址:http://weitu.yunzhisec.com/。通过该软件设计完成大屏项目之后,点击右侧的下载按钮,可以保存成HTML源代码:

以下是下载格式选择窗口:

请务必勾选自适应中的“原始尺寸/自动缩放”、适应方式中的“拉伸铺满”和事件中的“窗口改变时自动刷新页面”3个选项,然后点击“下载HTML源代码”,即可弹出文件夹保存窗口:

请注意,这里的保存文件名实际上是文件夹名称,它一定要是一个不存在的文件夹。如上图,这里的abc是指定的网站根目录,components是其中用于保存静态页面文件的子目录,使用微兔生成的html大屏文件都要放到此目录中!由于该文件夹里已经有weitu、weitu1等目录名,所以这里再保存新的大屏文件时,就要改用其他不存在的文件夹名称(比如weitu2)。如要替换现存的其他文件夹,比如weitu1,一定要先将原文件夹weitu1删除,然后再重新下载保存到weitu1中(最好不要覆盖原文件夹,否则可能因为个别遗留文件问题导致大屏运行不正常)。

当然,你也可以先将HTML源码下载保存到其他位置,然后再根据需要复制到指定网站目录下的components中。

正常下载保存的微兔大屏项目文件应包括这些(以weitu1文件夹为例):

如要在WebBuilderX中使用此大屏项目,只要在“大屏属性”的“页面路径”填入“weitu1”即可,项目运行时会自动到components的此文件夹中寻找并打开index.html文件。由于大屏项目需要从WebBuilderX的统计项目数据中请求数据,为方便操作,“大屏属性”还专门提供了请求参数查询功能:

如上图,点击查询中的下拉箭头,将自动列出所有数据源中已经定义好的统计项目。关于统计项目定义,请参考“数据源管理”。

假如要在大屏页面中使用分组统计中的“季度统计”数据,只要在该节点上双击,该数据的接口参数就会自动保存到粘贴板:

这样,在微兔设计界面使用Ctrl+V组合键就能直接粘贴并写入到接口参数中。