自定义组件
自定义组件功能是指通过可视化搭建的方式，绘制组件、设置组件属性和绑定物模型（详见我是数采实施商），可在页面上重复使用。
一、快速使用
步骤一：创建自定义组件
方法一
打开右侧“组件”
选择“+”
创建自定义组件分组
方法二
选择页面上基础组件
右键菜单中，点击“创建自定义组件”
选择该自定义组件需要放在哪个文件夹（官方资源文件夹除外）
方法三
切换至“层级”tab
在下方的“组件树”选择组件
右键，点击“创建自定义组件”
选择该自定义组件需要放在哪个文件夹（除了官方资源文件夹）
步骤二：搭建自定义组件
以上三个创建方法任选其一，点击创建自定义组件之后，会自动跳转至“自定义组件编辑工作台”，设置自定义组件模板的宽高，修改名称，默认宽高为300，300。
拖拽基础组件进入画布作为子组件，拖入子组件时，系统会根据自定义组件的宽高调整子组件默认宽高，可以通过手动修改自定义组件宽高或者文字大小等配置调整子组件显示效果，不同的子组件组合成自定义组件画面。
点击保存，自定义组件便可以在编辑器中使用。点击发布，自定义组件便可在用到自定义组件的已发布页面中显示。
步骤三：使用自定义组件
在资源管理的文件夹中，找到刚刚定义的自定义组件或者直接从文件夹中选择现有的自定义组件，拖拽到画布中使用。
步骤四：管理自定义组件
选中某个自定义组件，将其拖拽到左侧的已有或新建的文件夹下。
二、进阶
步骤一：创建自定义组件
一、快速使用操作相同
步骤二：搭建自定义组件
进入自定义组件编辑工作台，设置自定义组件的宽高，修改名称。在画布中拖拽基础组件、资源管理的图片、其他自定义组件等已有的元素。
步骤三：添加自定义属性
自定义属性是自定义组件被使用时，向外透露出可以编辑的属性项，在自定义组件复用时，有些内容是需要编辑的。以上面的自定义组件为例，展示某个设备的风扇转速，需要对设备的名字需要进行修改，面对这种情况，我们需要为自定义组件暴露出名字属性，以便于在页面工作台可以编辑该名字。设置的方式如下：
点击“添加自定义属性”按钮，弹出“配置自定义属性”的对话框
在“配置自定义属性”的对话框，填写自定义属性的名称，自定义属性编码，选择数据类型。在我们实例中修改的设备名字，根据实际属性填入的内容选择对应的类型，此处配置的是“字符型”，填写默认值
如果现在想修改的是文字的颜色，则数据类型配置“颜色型”，再填写默认值
点击确定。自定义属性创建完毕。
弹窗关闭后可查看自定义属性的列表，或者点击编辑图标重新编辑、也可删除定义属性。
步骤四：绑定自定义属性
将自定义属性绑定到子组件的样式属性上。
首先选中“设备”组件。
选择文字内容“选择数据源”，弹出对话框。
在“数据源”中选择“自定义属性”。
接着选择配置的属性“detail”，用户可以根据自己的需求，编写过滤脚本，最后点击“确定”。
配置文字点击“颜色”后的数据源按钮，弹出对话框，选择上一步新增的自定义属性“titleColor”，选择之后点击确定。
现在该自定义组件里的“设备名字 ”的文字颜色以及“设备”便和自定义属性关联起来，此时右侧面板的配置了自定义属性的属性内容都显示为“动态”。
步骤五：添加设备模型（该步骤非必需，可直至步骤七）
如果该自定义组件中想同时展示某个设备上的多个点位数据时，可以为该自定义组件添加“设备模型”。为了更好的说明这个设备模型的使用场景，介绍一个简单的使用场景，想在这个卡片上展示货物的当前库存值。同时现有40种货物，每个都像刚才一个一个手动创建自定义属性，耗时耗力，通过设备模型可以快速为设备绑定数据。
点击“添加设备模型”，弹出对话框
在对话框里选择相应的“设备模板”和“设备实例”，也可点击“前往设备模型列表”跳转至设备模板列表查看详情，选择完成后，点击确定。
弹窗关闭后可查看关联设备模型的列表，或者点击编辑图标重新编辑、也可删除设备模型
自定义组件编辑完成后，点击保存。
步骤六：为自定义组件实例选择具体设备
切换至组态页面搭建工作台，
将刚编辑的自定义组件拖入页面中，每拖入几次，画布中就会出现几个实例
选中画布上的一个自定义组件实例，点击“选择设备”
在弹框中，选择相应的“设备实例”，点击“确定”，自定义组件中文字显示是不同货物的库存值，将页面保存，点击预览查看完成动态数据选择想要被展示的点位变化。
点击另一个实例，重复操作1-4，为该实例选择不同的设备
保存页面
至此，两个自定义组件实例都被绑定了两台设备各自的电流和电压
步骤七：配置自定义属性
在右侧的自定义属性中，可以看到配置的“设备名字显示颜色”，通过修改该属性可修改该字体的颜色；也可修改设备名字。
自定义属性支持绑定页面参数
自定义组件使用绑定数据源功能时，新增一个页面参数作为数据来源。
1）画布添加自定义组件
在素材中心拖动一个自定义组件到画布中， 在右侧属性面板中找到自定义属性， 点击属性右侧绑定数据源的图标。
2）选择页面参数数据源
在数据源这项下拉框中，选择页面参数选项：
3）选择需要的页面参数
在页面参数下拉框中选择需要的页面参数，下方和绑定变量数据源功能相同，有数据过滤脚本，用户可以根据自己的需求，编写过滤脚本：
三、操作自定义组件实例
修改名称
在下方的资源管理中，在自定义组件所处的文件夹中找到文件，选中该自定义组件，点击“修改icon”即可修改组件名称。
自定义组件复制
选中卡片，右键，点击“复制资源”，再切换至别的文件夹，右键“粘贴”，即可完成自定义组件的复制。
删除自定义组件
选中该卡片，点击“删除”图标，即可完成删除。
自定义组件解绑
在页面画布中选中自定义组件，右键菜单中的“解除绑定”，自定义组件变成了一个成组组件。
自定义组件嵌套
往自定义组件工作台中，拖入资源管理文件夹中某个已经编辑好的自定义组件，此时画布中被拖入的自定义组件会被转化为组合。
跳转到自定义组件工作台的方法
方法一：双击该卡片，可跳转到自定义组件工作台重新编辑组件内容
方法二：选中画布中的自定义组件实例，右击选择“编辑”，可跳转到自定义组件工作台重新编辑组件内容
方法三：在左侧组件树中，选中该自定义组件，点击右键，选择“编辑自定义组件”
方法四：画布上选中自定义组件，点击右侧面板缩略图后的编辑图标
四、发布自定义组件
自定义组件在其工作台点击发布后才能够在发布的应用中显示。
发布方法
步骤一：
在自定义组件工作台点击“发布”按钮后，提示组件发布后会更新所有使用到该组件的已发布页面（刷新对应已发布页面可以看到），在弹出的对话框中点击“确定”。
步骤二：
在应用发布时，若存在未发布的自定义组件，会提示，前往对应自定义组件的编辑页面或者一键发布所有应用。直接点击“一键发布”直接发布自定义组件， 发布后返回该应用发布页面，会自动更新弹窗，可直接点击"确定"。
自定义组件发布状态提示
为了方便用户了解当前自定义组件发布状态，当自定义组件未发布时，会在以下几处提示组件是否未发布，若已发布，则不做特殊提示。
1.若未发布，会在自定义组件工作台左上角组件名称前出现【未发布】
2.若未发布，会在组件树中，组件名称之前加上【未发布】
自动更新机制
在自定义组件工作台点击保存后，在使用了该自定义组件的编辑页面中，画布内容、缩略图、自定义属性、关联设备都会对应更新。
在自定义组件工作台点击发布后，刷新使用了该自定义组件的已发布页面，画布内容更新。
子组件交互动作
子组件的“下发数据”动作，可以下发数据到设备属性点、变量、或者变量类型的自定义属性。
在自定义组件实例化后，可为变量类型的自定义属性选择变量，从而设置具体下发到哪个变量。
五、自定义组件中的子组件固定布局/文字缩放
固定布局
在自定义组件工作台中，选中画布上的某个组件时，右侧面板上显示“调整布局”可以为对应的组件调整布局。其中包括“靠边固定”和“固定尺寸”两种布局控制。在页面中添加该自定义组件后，如果在画布上缩放该自定义组件实例时，该布局生效。
若点击“靠边固定”的左侧图标，在编辑页面的画布上缩放该自定义组件实例时，对应子组件和左侧边缘的距离保持不变。
若点击“靠边固定”的右侧图标，画布上缩放该自定义组件实例时，对应子组件和右侧边缘的距离保持不变。
只支持同时靠左侧或者右侧某一个边缘固定，如果要从靠左固定修改到靠右固定，请先点击取消靠左固定，再点击靠右固定。
若点击“靠边固定”的上侧图标，画布上缩放该自定义组件实例时，对应子组件和上侧边缘的距离保持不变。
若点击“靠边固定”的下侧图标，画布上缩放该自定义组件实例时，对应子组件和下侧边缘的距离保持不变。
只支持同时靠上侧或者下侧某一个边缘固定，如果要从靠上固定修改到靠下固定，请先点击取消靠上固定，再点击靠下固定。
若点击“固定尺寸”垂直方向的图标，画布上缩放该自定义组件实例时，对应子组件的高度保持不变。
若点击“固定尺寸”水平方向的图标，画布上缩放该自定义组件实例时，对应子组件的宽度保持不变。
可同时支持固定宽度和固定高度。
使用案例：
为右下角的组件配置了靠右、靠下，固定宽度、固定高度后，在页面中放大组件，右下角组件和右面、上面的边缘距离始终不变，宽度和高度也保持不变。
a. 上图给自定义组件中的“空调电流”配置左侧固定 b. 在页面上使用的自定义组件实例时，该文字组件与左侧边缘距离保持不变
文字缩放
文字不跟随实例缩放：在页面工作台使用自定义组件时，如果直接通过编辑框，进行拖拽，则自定义组件中的字体，始终保持自身的大小，不跟随自定义组件实例进行缩放。
- 本页导读 （0）