用户名
页面及组件
3.4.1.1. 新建移动应用
前提条件准备：已创建相关项目。具体操作，请参见项目管理的创建。
1、 在相应项目下，选择移动应用。具体操作为：进入平台->项目管理->进入项目->主页->移动应用。
2、 单击应用列表上方的新建移动应用。
3、 在新建移动应用对话框中，填入应用名称和描述，单击确认。
4、 移动应用创建完成后，可点击应用后侧的按钮进行编辑、预览、下载WAR包、删除。
功能 | 说明 |
编辑 | 编辑移动应用。 |
预览 | 编辑过程中，查看移动应用。 |
下载WAR包 | 下载前端运行包。 |
删除 | 删除移动应用。 |
左侧导航栏
创建应用完成后，点击“编辑”按钮，进入移动应用后，默认生成一个空白页面，最左侧导航栏分别是页面及组件、应用设置。
功能 | 说明 |
| 页面及组件：查看当前应用所包含的页面及所有组件查看 页面包括：导航布局、菜单配置和页面列表。 组件包括：基础组件、控制组件、图表组件、表单组件。 |
| 应用设置：可在此页选择应用鉴权方式，开启账号鉴权和Token鉴权；设置应用基本信息；查看应用发布历史；查看发布历史。 |
画布
编辑器中间是画布区域。
右侧配置栏
1、 单击空白处，对页面进行页面设置。
2、 拖拽某一组件至画布，右侧将显示该组件的样式及交互配置栏。
功能 | 说明 |
样式 | 配置各组件的样式，能够在应用页面中显示效果。 |
配置组件的数据源。不同组件可配置的数据源不同。一个组件支持配置多个数据源。 数据源包括：设备、接口。 | |
交互 | 配置交互动作，设置当前组件的事件，如单击、双击、鼠标移入、移出等，进行相应的交互动作，如单击该组件，则发起设置设备属性、打开链接、赋值给变量、显示隐藏、调用其他服务。 |
顶部操作栏
功能 | 说明 |
| 鼠标指针移到该图标上，可展开项目概览框。您可以查看该项目下的应用、产品、设备等。 该图标右侧显示的是当前应用名称和页面名称：应用名称：页面名称。
|
| 撤销上一步操作。 |
| 恢复已被撤销的操作。 |
| 预览当前已配置的应用效果。 |
| 单击此按钮，手动保存当前配置。 |
| 单击此按钮，将已配置完成的应用发布到云端。 |
| 查看可视化应用的开发帮助文档。 |
| 隐藏/显示右侧配置栏。 |
隐藏/显示底部操作栏
功能 | 说明 |
标尺 | 用于显示/隐藏画布边缘显示尺寸刻度。 |
3.4.1.2. 页面
点击页面及组件，在页面标签下，可以查看页面列表、组件架构。
页面列表
1、 在页面标签下，页面列表中默认已经添加一个空白页面。
功能 | 说明 |
| 新增页面。点击后新增一个空白页面。 |
| 页面名称编辑。将鼠标放置在相关页面上，点击页面后侧的编辑，可修改该页面的名称。 |
| 删除页面。将鼠标放置在相关页面上，点击页面后侧的删除按钮，删除该页面。 注：页面下最少要保留一个页面。 |
新增页面后，可对该页面进行导航布局配置、菜单配置。
组件架构
查看并搜索横向分栏下的所有栏与所属组件。
页面设置
在页面列表选择页面后，在空白处单击，右侧导航栏可进行页面配置。
参数 | 说明 | |
作为首页 | 勾选后，该页面作为首页展示。 | |
免登陆 | 开启应用鉴权后，勾选免登陆，可直接打开页面，否则需要账号或Token登陆。 | |
导航配置 | 顶部导航： 全局配置：设置顶部导航背景颜色、标题默认色、返回默认色 返回按钮：设置显示/隐藏返回文案，设置返回模式为来源页面/当前应用页面/指定链接。 | |
底部导航： 全局配置：设置底部导航背景颜色、默认选项色、选中选项色、显示样式为文字/图标/文字+图标。 导航配置：新增底部导航的主菜单，并可以主菜单进行菜单名称编辑、图标设置、链接打开方式设置、目标链接选择、删除操作。 | ||
顶部+底部导航 | 参见顶部导航、底部导航设置 | |
页面背景 | 背景颜色：对该页面进行背景颜色设置。 | |
背景图片：上传图片作为背景图片展示。 | ||
3.4.1.3. 组件
在组件标签下，包含基础组件、控制组件、表单组件，拖动某一组件至画布，进行样式设置、数据源配置、交互配置。
3.4.1.3.1. 组件基础样式设置
组件 | 基础样式设置 |
所有组件 | 基础样式-组件名称。设置组件名称。 |
基础样式-组件可见性。设置组件在页面中显示/隐藏。 | |
基础样式-不透明度。设置组件在页面中的透明度，0%为完全透明，100%为完全不透明。 |
3.4.1.3.2. 组件个性化样式设置
3.4.1.3.2.1. 基础组件
基础组件的个性化样式设置如下：
基础组件 | 个性化样式设置 |
横向分栏 | 布局-栏数量。设置横向分栏里的子栏个数。 |
布局-上外边距。设置组件的上外边距。 | |
布局-上内边距。设置组件的上内边距。 | |
布局-下内边距。设置组件的下内边距。 | |
布局-下外边距。设置组件的下外边距。 | |
布局-关闭间隙。设置关闭组件间隙。 | |
容器样式-填充模式。设置组件填充模式为颜色/图片。 | |
容器样式-填充颜色。设置组件的填充颜色。 | |
边框-粗细。设置组件边框的粗细。 | |
边框-颜色。设置组件边框的颜色。 | |
边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。 | |
边框-圆角。设置组件圆角。 | |
文字 | 文字样式-文字级别。设置文字级别。 |
文字样式-字号。设置文字字号。 | |
文字样式-字体。设置文字字体。 | |
文字样式-文字颜色。设置文字颜色。 | |
文字样式-粗细。设置文字粗细。 | |
文字样式-行高。设置文字行高。 | |
文字样式-字重。设置文字字重。 | |
文字样式-对齐。设置文字对齐方式。 | |
指示灯 | 基础样式-高度。设置指示灯组件的高度。 |
基础样式-宽度。设置指示灯组件的宽度。 | |
指示灯标签。自定义标签的字段名称、字段值。 | |
指示灯样式-颜色。展示数据源所对应的颜色。 | |
指示灯样式-图片。展示数据源所对应的图片。 | |
图标 | 图标样式-图标列表。选择图标。 |
图标样式-颜色。设置图标颜色。 | |
图标样式-图标尺寸。设置图标尺寸。 | |
图片 | 基础样式-高度。设置图片组件高度。 |
基础样式-宽度。设置图片组件宽度。 | |
上传图片。 | |
边框-粗细。设置组件边框的粗细。 | |
边框-颜色。设置组件边框的颜色。 | |
边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。 | |
时钟 | 基础样式-高度。设置指示灯组件的高度。 |
基础样式-宽度。设置指示灯组件的宽度。 | |
基础样式-展示格式。展示格式有时间/日期/时间+日期。 | |
基础样式-背景颜色。设置背景颜色。 | |
文字样式-字号。设置文字字号。 | |
文字样式-颜色。设置文字颜色。 | |
文字样式-粗细。设置文字粗细。 | |
边框-粗细。设置组件边框的粗细。 | |
边框-颜色。设置组件边框的颜色。 | |
边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。 | |
卡片 | 基础样式-高度。设置卡片组件的高度。 |
基础样式-宽度。设置卡片组件的宽度。 | |
基础样式-字号。设置卡片组件的字号。 | |
基础样式-卡片标题。设置卡片组件的卡片标题。 | |
基础样式-单位。设置卡片组件的单位。 | |
基础样式-背景颜色。设置卡片组件的背景颜色。 | |
边框-粗细。设置组件边框的粗细。 | |
边框-颜色。设置组件边框的颜色。 | |
边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。 |
3.4.1.3.2.2. 控制组件
控制组件的个性化样式设置如下：
控制组件 | 个性化样式设置 |
开关 | 基础样式-高度。设置开关组件的高度。 |
基础样式-宽度。设置开关组件的宽度。 | |
基础样式-开关数据。配置开关组件所需的数据源。 | |
基础样式-样式类型。设置开关展示的样式开关icon/图片。 | |
基础样式-ON状态。开关打开的颜色。 | |
基础样式-OFF状态。开关关闭的颜色。 | |
滑条 | 基础样式-高度。设置滑条组件的高度。 |
基础样式-宽度。设置滑条组件的宽度。 | |
基础样式-展示数据。展示组件所配置数据源的数据。 | |
数值范围-最大值。设置组件的最大值。 | |
数值范围-最小值。设置组件的最小值。 | |
数值范围-步长。设置组件的步长。 | |
数值范围-单位。设置组件数值的单位。 | |
滑条样式-是否展示图标。设置两端标签数据是否展示。 | |
滑条样式-图标列表。设置滑条组件的图标列表。 | |
滑条样式-内容颜色。设置滑条组件的内容颜色。 | |
滑条样式-滑条底色。设置滑条组件的滑条底色。 | |
滑条样式-滑条进度色。设置滑条组件的滑条进度色。 | |
按钮 | 基础样式-按钮内容。设置按钮内容。 |
基础样式-按钮类型。设置按钮类型。 | |
基础样式-按钮尺寸。设置按钮尺寸。 | |
基础样式-横向撑满容器。设置是否横向撑满容器。 | |
基础样式-字号。设置文字字号。 | |
基础样式-粗细。设置文字粗细。 | |
样式-文字颜色。设置文字颜色。 | |
样式-描边色。设置文字描边色。 | |
样式-填充色。设置文字填充色。 |
3.4.1.3.2.3. 表单组件
表单组件的个性化样式设置如下：
表单组件 | 个性化样式设置 |
数字框 | 基础样式-展示数据。展示配置数据源的数据。 |
基础样式-尺寸。设置组件尺寸。 | |
基础样式-最小值。设置组件的最小值。 | |
基础样式-最大值。设置组件的最大值。 | |
基础样式-步长。设置组件的步长值。 | |
基础样式-默认值。设置组件默认展示的数据。 | |
样式-文字颜色。设置文字颜色。 | |
样式-描边颜色。设置文字描边颜色。 | |
样式-填充颜色。设置文字填充颜色。 | |
文本框 | 基础样式-展示数据。展示配置数据源的数据。 |
基础样式-默认提示。设置默认提示内容。 | |
基础样式-文字限制。设置组件字数限制。 | |
数值范围-默认值。设置组件数值的默认值。 | |
数值范围-是否只读。设置组件是否只读。 | |
数值范围-是否禁用。设置组件是否禁用。 | |
样式-文字颜色。设置文字颜色。 | |
样式-描边颜色。设置文字描边颜色。 | |
样式-填充颜色。设置文字填充颜色。 | |
文字样式-字体。设置文字字体。 | |
文字样式-字号。设置文字字号。 | |
文字样式-颜色。设置文字颜色。 | |
文字样式-粗细。设置文字粗细。 | |
文字样式-行高。设置文字行高。 | |
文字样式-对齐。设置文字对齐方式。 | |
日期范围 | 尺寸。设置组件尺寸大小。 |
样式-主题。设置组件主题。 | |
时间选择-时间单位。设置时间单位为精确到分/小时/天。 | |
默认时间。设置默认起始时间、结束时间。 | |
搜索框 | 搜索配置-默认提示。设置搜索框默认提示。 |
搜索配置-长度限制。设置搜索框长度限制。 | |
下拉框 | 基础样式-宽度。设置组件宽度。 |
基础样式-尺寸。设置组件尺寸。 | |
内容配置-列表内容-设备。选择产品，下拉展示该产品下的设备。 | |
内容配置-列表内容-项目内产品。选择产品，下拉展示该项目下所有产品下的设备。 | |
内容配置-列表内容-数据源。配置数据源，下拉展示配置的数据。 | |
内容配置-提示文案。设置下拉框提示文案。 | |
时间选择 | 尺寸。设置组件尺寸大小。 |
样式-主题。设置组件主题。 | |
时间选择-时间单位。设置时间单位为精确到分/小时/天。 | |
默认时间。设置默认起始时间、结束时间。 | |
单选 | 基础样式-数据源。展示配置数据源后的数据。 |
多选配置-禁止。设置是否能够多选。 | |
多选样式-方向。设置组件方向：水平/垂直。 | |
多选样式-选中颜色。设置组件的选中颜色。 | |
多选样式-文字颜色。设置组件的文字颜色。 | |
多选样式-按钮大小。设置按钮大小。 | |
多选 | 基础样式-数据源。展示配置数据源后的数据。 |
多选配置-禁止。设置是否能够多选。 | |
多选样式-方向。设置组件方向：水平/垂直。 | |
多选样式-选中颜色。设置组件的选中颜色。 | |
多选样式-文字颜色。设置组件的文字颜色。 | |
多选样式-按钮大小。设置按钮大小。 |
3.4.1.3.3. 组件数据类型设置
部分组件在配置数据源时，对配置的数据类型有限制。
组件 | 数据类型设置 |
卡片 时钟 滑条 数字框 | 该组件支持以下类型的设备属性：整数、单精度数字、双精度数字。 |
文字 | 该组件支持以下类型的设备属性：整数、单精度数字、双精度数字、字符串 |
指示灯 | 该组件支持以下类型的设备属性：布尔型、整数 |
开关 | 该组件支持以下类型的设备属性：布尔型、整数 |
按钮 文本框 | 该组件支持以下类型的设备属性：字符串 |
3.4.1.4. 数据源配置
移动应用将组件拖动至画布后，点击数据源配置按钮
，可对部分组件进行数据源配置。数据源的获取有两种方式，从设备/接口获取。具体操作，请参见：Web可视化-数据源配置。
3.4.1.5. 交互配置
配置组件的交互动作，可通过单击、双击、鼠标移入、鼠标移出、值改变、聚焦、失焦等事件来设置设备属性、打开链接、赋值给变量、展示或隐藏组件、调用其他服务。具体操作，请参见：Web可视化-交互配置。