UI控件配置说明

3D可视化低代码平台提供了丰富的UI控件,进入编辑模式后，点击左侧的UI控件库按钮，打开UI控件库分类列表，点击对应分类，可查看改分类下的UI控件，将UI控件拖入场景中即可使用。

下面主要介绍UI控件的相关配置。

折线图/曲线图

折线图/曲线图属于折线图分类，点击分类列表中的折线图可以查看折线图/曲线图控件。

配置项说明

将控件拖入场景中后，可以在属性面板中对控件进行配置

配置项

选中折线图/曲线图控件后，属性面板中的配置项如下图所示：

配置项说明：

1. 主题

   • 颜色：设置背景颜色
   • 配色：线/柱子的颜色(其数量与图例数量一致）

2. 图例

   • 显示：是否显示图例
   • 字体大小：图例字体大小
   • 位置：图例显示的位置
   • 间距：图例之间的间隔距离
   • 排列：图例布局方位
   • 方向：Horizonal为横向显示，Vertical为纵向显示。
   • 格式化 支持的模板变量有{.}、{a}、{b}、{c}、{d}、{e}、{f}、{g}。 {.}为当前所指示或index为0的serie的对应颜色的圆点。 {a}为当前所指示或index为0的serie的系列名name。 {b}为当前所指示或index为0的serie的数据项serieData的name，或者类目值（如折线图的X轴）。 {c}为当前所指示或index为0的serie的y维（dimesion为1）的数值。 {d}为当前所指示或index为0的serie的y维（dimesion为1）百分比值，注意不带%号。 {e}为当前所指示或index为0的serie的数据项serieData的name。 {h}为当前所指示或index为0的serie的数据项serieData的十六进制颜色值。 {f}为数据总和。 {g}为数据总个数。 {.1}表示指定index为1的serie对应颜色的圆点。 {a1}、{b1}、{c1}中的1表示指定index为1的serie。 {c1:2}表示索引为1的serie的当前指示数据项的第3个数据（一个数据项有多个数据，index为2表示第3个数据）。 {c1:2-2}表示索引为1的serie的第3个数据项的第3个数据（也就是要指定第几个数据项时必须要指定第几个数据）。 {d1:2:f2}表示单独指定了数值的格式化字符串为f2（不指定时用numericFormatter）。 {d:0.##} 表示单独指定了数值的格式化字符串为0.##（用于百分比，保留2位有效数同时又能避免使用f2而出现的类似于"100.00%"的情况 ）。 示例："{a}:{c}"、"{a1}:{c1:f1}"、"{a1}:{c1:0:f1}"、"{a1}:{c1:1-1:f1}"

3. x轴

   • 字体大小：轴字体大小
   • 字体角度：轴字体可旋转角度
   • 单位：设置轴单位
   • 间隔数：坐标轴刻度分割段数。默认为0表示自动分割
   • 开启边距：坐标轴两边是否留白。只对类目轴有效

4. y轴

   • 字体大小：轴字体大小
   • 字体角度：轴字体可旋转角度
   • 单位：设置轴单位
   • 间隔数：坐标轴刻度分割段数。默认为0表示自动分割
   • 开启自动统计：开启自动计算合适的值

5. 系列

   • 显示：是否显示系列文本
   • 字体大小：系列文本字体大小
   • 精度：数值精度

6. 数据类型：支持json/链接、IoTCenter实时数据显示。

IoTCenter数据源

控件的数据源属性选择IoT,此时会在数据源属性下方出现新的配置项。

配置项

1. 时效类型：包括和实时数据两类。历史数据指显示测点记录的历史数据；实时数据指显示测点当前实时数据。对于折线图/曲线图控件来说，最适合选择历史数据。

2. 数据缓存数量：时效类型选择实时数据时用于配置缓存当前实时数值的数量。

3. 时长范围：时效类型选择选择历史数据时用于配置时长的类型。市场类型包括Day、Week、Month三种。Day表示当前每小时取一个值显示；Week表示近七天每天取一个值显示，Months表示当月每天取一个值显示。

4. 时间点(小时)：时效类型选择选择历史数据时，用于自定义测点取值时间点。主要为了解决时长范围Week/Month当天取值点无值的问题。

5. 测点绑定：数量：图例的数量。元素X:代表图例的对象。名称:图例的名称。数据点:配置图例绑定的设备号和测点号。

配置完成后，如下图所示：

Json数据源

控件的数据源属性选择Url,此时只需要配置Json数据源或者Json链接即可。

详细信息

数据源选择Url后点击Json右侧的图标可以配置Json数据源或者Json链接。

Json模拟数据 : 可以直接按照模板数据填入既可显示。

Json链接： 可配置返回模板数据类型的接口。

接口返回的Json数据格式如下所示：

[
	{
		"serie": "类型1",
		"values": [
			{
				"value": 54,
				"xAxis": "2018"
			},
			{
				"value": 56,
				"xAxis": "2019"
			},
			{
				"value": 65,
				"xAxis": "2020"
			},
			{
				"value": 78,
				"xAxis": "2021"
			},
			{
				"value": 120,
				"xAxis": "2022"
			},
			{
				"value": 150,
				"xAxis": "2023"
			}
		]
	},
	{
		"serie": "类型2",
		"values": [
			{
				"value": 25,
				"xAxis": "2018"
			},
			{
				"value": 50,
				"xAxis": "2019"
			},
			{
				"value": 55,
				"xAxis": "2020"
			},
			{
				"value": 65,
				"xAxis": "2021"
			},
			{
				"value": 75,
				"xAxis": "2022"
			},
			{
				"value": 90,
				"xAxis": "2023"
			}
		]
	}
]

柱状图

柱状图属于柱状图分类，点击分类列表中的柱状图可以查看柱状图控件。

配置项说明

将控件拖入场景中后，可以在属性面板中对控件进行配置

配置项

选中柱状图控件后，属性面板中的配置项如下图所示：

配置项说明：

与折线图/曲线图控件基本一致，参考折线图/曲线图控件相关配置即可，此处不再赘述。下面给出柱状图特有的配置项。

设置：柱宽 ，可以自定义柱条的宽度，输入0-1之间的小数。

IoTCenter数据源

控件的数据源属性选择IoT,此时会在数据源属性下方出现新的配置项。

配置项

1. 实时刷新：勾选后控件数据的刷新速度与绑定设备测点的刷新速度一致。

2. 系列数据：数量代表图例的数量。每个图例中的数量表示该图例在柱状图中出现的数量。

配置完成后，如下图所示：

Json数据源

柱状图Json数据源的配置与折线图/曲线图完全一致，此处不再赘述。

饼图

饼图属于饼图分类，点击分类列表中的饼图可以查看饼图控件。

配置项说明

将控件拖入场景中后，可以在属性面板中对控件进行配置

配置项

选中饼图控件后，属性面板中的配置项如下图所示：

配置项说明：

与折线图/曲线图控件基本一致，参考折线图/曲线图控件相关配置即可，此处不再赘述。下面给出饼图特有的配置项。

1. 半径：通过x,y可以设置饼图中间镂空大小。

IoTCenter数据源

控件的数据源属性选择IoT,此时会在数据源属性下方出现新的配置项。

配置项

绑定测点：数量代表图例的数量，每个图例均可以设置名称并绑定对应的测点。

配置完成后，如下图所示：

Json数据源

控件的数据源属性选择Url,此时只需要配置Json数据源或者Json链接即可。

详细信息

数据源选择Url后点击Json右侧的图标可以配置Json数据源或者Json链接。

Json模拟数据 : 可以直接按照模板数据填入既可显示。

Json链接： 可配置返回模板数据类型的接口。

接口返回的Json数据格式如下所示：

[
	{
		"Serie": "类型1",
		"Value": 48.0
	},
	{
		"Serie": "类型2",
		"Value": 69.0
	},
	{
		"Serie": "类型3",
		"Value": 75.0
	}
]

环形图

环形图属于环形图分类，点击分类列表中的环形图可以查看环形图控件。

配置项说明

将控件拖入场景中后，可以在属性面板中对控件进行配置

配置项

选中环形图控件后，属性面板中的配置项如下图所示：

配置项说明：

与折线图/曲线图控件一致，参考折线图/曲线图控件相关配置即可，此处不再赘述。

IoTCenter数据源

控件的数据源属性选择IoT,此时会在数据源属性下方出现新的配置项。

配置项

绑定测点：数量代表图例的数量，每个图例均可以设置名称并绑定对应的测点。

配置完成后，如下图所示：

Json数据源

环形图Json数据源的配置与饼图完全一致，此处不再赘述。

图像控件

图像控件属于基础分类，点击分类列表中的基础可以查看图像控件。

配置项说明

将控件拖入场景中后，可以在属性面板中对控件进行配置

配置项

选中图像控件后，属性面板中的配置项如下图所示：

配置项说明：

1. 图像：选择已导入的图片jpg、png资源。图片资源需要存放在\IoTCenter 3D_Data\StreamingAssets\Texture目录下。

2. 颜色：设置图片颜色。

3. 设置原始尺寸：点击可显示图片的原始尺寸。

文本控件

文本控件属于基础分类，点击分类列表中的基础可以查看文本控件。

配置项说明

将控件拖入场景中后，可以在属性面板中对控件进行配置

配置项

选中文本控件后，属性面板中的配置项如下图所示：

配置项说明：

1. 文本：显示的文本内容

2. 字体大小：设置文本的字号。

3. 字体颜色：设置文本的颜色。

4. 字体风格：用于设置文本的字体风格，其中Normal表示正常,Bold表示加粗,Italic表示倾斜,Underline表示下划线,LowerCase表示小写,UpperCase表示大写,SmallCaps表示混合,Strikethrough表示删除,Superscript表示上标,Subscript表示下标,Highlight表示增强。

5. 字体布局：设置文本显示布局。

6. 数据绑定：勾选可绑定IoTCenter平台中设备的测点，此时控件显示绑定测点的数据。

7. 使用遥信：勾选使用遥信点，勾选此选项后，文本显示绑定设备对应遥信点的数据；若无勾选，文本显示文本显示绑定设备对应遥测点的数据

8. 设备号：设置控件绑定设备的设备号

9. 测点号：设备绑定设备的测点号；若勾选了使用遥信，则此处设置设备的遥信号；否则设置设备的遥测号。

10. 组态指令：点击事件。可向IoTCenter平台(只适用于IoTCenter Desktop版本)发送表达式指令，指令的格式为S:设备号,设置号+设备号,设置号......，使用+号连接多个控制命名，例如：S:1005,1+1006,1表示执行1005号设备的1号设置点和1006号设备的1号设置点。

视频控件

视频控件主要包括视频播放器控件、摄像头视频播放器控件以及摄像头视频轮播控件三类。

视频播放器控件

该控件主要用于播放本地视频和在线视频。

1. 本地视频播放。视频文件须保存在\IoTCenter 3D_Data\StreamingAssets\Video目录下。

   

   进入编辑模式后，从UI资源库的视频分类中拖入视频播放器控件，并配置视频名称属性的值为上述目录中的视频名称(包括扩展名)，点击播放按钮即可进行播放。

   

   同时支持拖动音量右边的滑动条设置音量。

2. 在线视频播放。勾选使用在线视频链接，并在出现的视频链接属性中输入视频地址，视频地址支持Http协议地址。其它与本地视频播放类似。

   

摄像头视频播放器控件

该控件主要用于播放IoTCenter视频平台中接入的摄像头设备的视频。支持设备号或rtsp流播放，优先设备号播放。进入编辑模式后，从UI资源库的基础分类中拖入在线视频播放控件，配置设备号或者Rtsp链接即可。

同样支持拖动音量右边的滑动条设置音量。

摄像头视频轮播控件

该控件用于轮播从IoTCenter视频平台接入的多个摄像头设备的视频。进入编辑模式后，从UI资源库的视频分类中拖入视频轮播控件控件。数量属性代表轮播的视频数量，同样支持设备号或rtsp流播放，优先设备号播放。

自动轮询：勾选后自动轮播视频，此时可以在轮询速度中配置视频切换的速度，单位为秒。

同样支持拖动音量右边的滑动条设置音量。

数据列表

列表控件属于列表分类，点击分类列表中的列表分类可以查看列表控件。

配置项说明

以数据库列表控件为例进行讲解，将控件拖入场景中后，可以在属性面板中对控件进行配置

配置项

选中数据库列表控件后，属性面板中的配置项如下图所示：

配置项说明：

1. 背景颜色：图表背景颜色。

2. 标题字体大小：设置标题字体大小。

3. 内容字体大小：列表显示内容字体大小。

4. 项目高度：内容项目高度(行高)。

5. 分割颜色：设置偶数行的背景颜色。

6. 字段宽度：设置列宽。

7. 内容字体颜色：列表显示内容字体的颜色。

8. 数据类型：DataBase类型支持IoTCenter平台的数据库；Json类型支持http链接数据或模拟数据。

绑定IoTCenter数据库数据

控件的数据类型属性选择DataBase,此时会在数据类型属性下方出现新的配置项。

配置项

1. 表名：输入IoTCenter数据库表名

2. 字段配置：输入数量代表字段数量，可以配置字段名称和显示名称。

3. 排序字段：输入排序字段(可为空)。

4. 查询条件：输入筛选条件，支持and/or，例如:equip_no = 11136 or equip_no = 11145

5. 升序：勾选使用升序反之降序。

6. 最大条数：最大查询条数。

7. 自动刷新：跟随场景自动刷新。

配置完成后，如下图所示：

绑定Json数据/模拟数据

Json模拟数据 : 可以直接按照模板数据填入显示的数据。

Json链接： 可配置返回模板数据类型的链接。

设备状态列表

列表控件属于列表分类，点击分类列表中的列表分类可以查看设备状态列表。 统计的内容：包括场景已部署的设备类型、设备状态支持定位。

配置项

可参考数据列表配置。

1. 设备类型配置：填入数量可支持多种已部署设备的类型配置。

自定义设备列表

列表控件属于列表分类，点击分类列表中的列表分类可以查看自定义设备列表。 统计的内容：包括场景已部署的设备类型。

配置项

可参考数据列表配置。

1. 设备类型配置：填入数量可支持多种已部署设备的类型配置。
2. 测点配置：已部署的设备可以自定义显示测点数据。 IsYc : 是否是遥测数据。 YcYxNo: 遥测/遥测号。 TabName: 要显示的表头内容。

## 按钮

按钮控件属于基础分类，点击分类列表中的基础分类可以查看按钮控件。

将控件拖入场景中后，可以在属性面板中对控件进行配置

配置项

选中按钮控件后，属性面板中的配置项如下图所示：

配置项说明：

1. 内容：按钮文本显示内容。

2. 文本风格

   • Color：字体颜色
   • FontSize：字体大小
   • FontStyle: Normal = 正常,Bold = 加粗,Italic = 倾斜,Underline = 下划线,LowerCase = 小写,UpperCase = 大写,SmallCaps = 混合,Strikethrough = 删除,Superscript = 上标,Subscript = 下标,Highlight = 增强。

3. 文本偏移：调整文本位置偏移量 X:左右 Y：上下。

4. 背景颜色：按钮背景颜色。

5. 边框距离：开启描边后调整边框距离。

6. 边框颜色：开启描边后调整边框颜色。

7. 开启描边：开启按钮描边。

8. 图像：选择按钮图像。

9. 事件类型：场景：三维场景跳转；表达式：执行IoTCenter表达式；组态界面：主要针对IoTCenter Web平台 。Web界面的获取方式如下图：

Web嵌入

配置项

平台支持嵌入IoTCenter Web嵌入

1. 切换场景时刷新：当切换业务场景时会重新加载Web界面。
2. 使用IoTWebURL：获取界面URL可参考按钮的组态界面获取，否则是非IoTWeb完整的URL。
3. 链接：网页链接

组合控件

顾名思义通过两个控件组合起来实现的组合控件。 例如在折线图/柱状图加入年月日标签的切换

配置项

1. 使用IoT数据：只需要在图表控件上配置设备号，然后HistoryTime切换对应的时间区间，支持年，月、日设置；否则需要填写对应的URL。

2. 数据源：Name：切换按钮名称，URL：对应的URL地址 ，HistoryTime: 仅对使用IoT数据有效

场景导航按钮

场景导航按钮，根据已创建场景生成的按钮。 需要注意的是：一般导航按钮是全局的，只需要创建一个并放到UIRoot下。它的位置也是固定的不需要调整。

图标配置

显示导航按钮：配置是否在此场景内显示导航按钮。 导航按钮布局：可根据需求配置导航按钮横纵向布局。 显示导航按钮：可配置该场景配置是否显示导航控件。

配置项

其它配置

配置项

1. 背景图片：按钮底图。
2. 背景尺寸：按钮底图的尺寸设置。
3. 选中图片：按钮选中时的状态图片。
4. 图片尺寸：按钮图片尺寸设置。
5. 图标位置偏移：可以调整图标的位置。
6. 文本字体大小：按钮文本的字体大小设置。
7. 文本位置偏移：可以调整文本的位置。
8. 图标正常颜色：图标未选择时的颜色。
9. 图标选中颜色：图标选中时的颜色。
10. 横向间距：按钮之间的横向间距。
11. 纵向间距：按钮之间的纵向间距。
12. 纵向位置：纵向布局的位置设置。