如何正确使用捷码？实现方案送你（下）

四、可视化大屏布局

案例1：

地图作为全屏背景，两侧放置图表，图表层级比地图高，浮在地图上面。

步骤1：先拖放地图组件，占据整个页面，不需要先拖其他布局组件。

步骤2：使用FixedContainer组件，采用绝对布局的方式，设置好两侧布局的位置、宽高。

步骤3：使用AbsoluteCol或者AbsoluteRow组件进行行列的拆分。

步骤4：拖放FlexContainer组件到行列，完成详细图表位置、宽高、背景的设计。

步骤5：拖放具体组件放置到FlexContainer组件内部，完成图表设计，如：文本组件、数字翻牌器、折线图等。

 

案例2：

地图作为整个大屏的一部分，和其他图表同一层级。

步骤1：使用FlexContainer进行页面整体结构的划分，如头部、内容，使用两个FlexContainer设置固定高度或者百分比即可完成，并设置背景图片。

步骤2：使用AbsoluteCol或者AbsoluteRow组件进行行列的拆分。

步骤3：将地图组件和其他图表组件拖入对应的行列，如果需要设置背景的，先拖入FlexContainer，再拖入对应组件，FlexContainer可以设置背景。

步骤4：使用FixedContainer组件完成地图上面浮动层的布局。

步骤5：使用FlexContainer以及其他组件完成浮动层内部设计。

 

五、3D场景搭建

1.模型要求

模型格式平台推荐gltf格式，效果性能最佳；模型大小建议单个模型在1M以内，太大的模型在客户端网页加载时受到网络下载速度、客户端电脑显卡配置等外部因素影响较大，导致页面加载较慢，影响用户体验。

2.设计要求

单个场景中，模型数量不要太多，同样的模型使用点图层来配置（结构上是一个图层），因为太多的模型图层占据显存较大，对客户端电脑显卡要求相对高些。采用点图层同时也方便后续模型等更换，只需要修改一次即可，如果是多个模型的方式实现，就需要一个个进行修改。

如下图的货物箱子，采用一个点图层组件来实现。

 

六、流程表单

流程和表单平台按照一对一的方式设计，即一个流程全程对应一个表单，那么在不同的审批节点（审批人员）如何展示不同的表单内容？通过配置每个表单内容在不同节点的权限（是否可编辑、是否显示），来控制在不同审批节点展示不同的表单内容，设计如下：

 

正确使用流程表单功能的方式：

步骤1：数据库表设计，单一表需要涵盖流程的所有业务字段，根据表自动生成表单。

步骤2：流程设计，包含流程图设计、节点角色配置、流程变量配置。

步骤3：到自动生成的表单页面，进行表单内容和流程审批节点的权限配置，入口在组件的权限配置面板。

步骤4：开启内置的流程管理页面。

自定义页面注意事项：

表单页面生成后，允许修改页面布局、组件样式等，也可以增加一些业务以外的内容，但是不能修改生成出来的数据连接器（因为数据连接器内置了流程接口和数据接口的关联关系）。

自动生成出来的流程管理页面，可以自定义修改，使用平台内置的系统接口即可。