页面及组件

3.3.1.1. 新建Web应用

前提条件准备：已创建相关项目。具体操作，请参见项目管理的创建。

1、在相应项目下，选择Web应用。具体操作为：进入平台->项目管理->进入项目->主页->Web应用。

2、单击应用列表上方的新建Web应用。

3、在新建Web应用对话框中，填入应用名称和描述，单击确认。

4、Web应用创建完成后，可点击应用后侧的按钮进行编辑、预览、下载WAR包、删除。

功能	说明
编辑	编辑Web应用。
预览	编辑过程中，查看Web应用。
下载WAR包	下载前端运行包。
删除	删除Web应用。

左侧导航栏

创建应用完成后，点击“编辑”按钮，进入Web应用后，默认生成一个空白页面，最左侧导航栏分别是页面及组件、应用设置。

功能

说明

页面及组件：查看当前应用所包含的页面及所有组件查看

页面包括：导航布局、菜单配置和页面列表。

组件包括：基础组件、控制组件、图表组件、表单组件。

应用设置：可在此页选择应用鉴权方式，开启账号鉴权和Token鉴权；设置应用基本信息；查看应用发布历史；查看发布历史。

画布

编辑器中间是画布区域。

右侧配置栏

1、单击空白处，可对页面进行页面设置。

2、拖拽某一组件至画布，右侧将显示该组件的样式及交互配置栏。

功能	说明
样式	配置各组件的样式，能够在应用页面中显示效果。
样式	配置组件的数据源。不同组件可配置的数据源不同。一个组件支持配置多个数据源。数据源包括：设备、接口。
交互	配置交互动作，设置当前组件的事件，如单击、双击、鼠标移入、移出等，进行相应的交互动作，如单击该组件，则发起设置设备属性、打开链接、赋值给变量、显示隐藏、调用其他服务。

顶部操作栏

功能	说明
	鼠标指针移到该图标上，可展开项目概览框。您可以查看该项目下的应用、产品、设备等。该图标右侧显示的是当前应用名称和页面名称：应用名称：页面名称。单击查看所有项目，可进入项目管理页面。单击产品，可进入该项目下的产品管理页面。单击设备，可进入该项目下的设备管理页面。单击分组，可进入该项目下的分组管理页面。单击账号，可进入该项目下的账号管理页面。
撤销	撤销上一步操作。
恢复	恢复已被撤销的操作。
预览	预览当前已配置的应用效果。
保存	单击此按钮，手动保存当前配置。
发布	单击此按钮，将已配置完成的应用发布到云端。
帮助	查看可视化应用的开发帮助文档。
隐藏/显示	隐藏/显示右侧配置栏。

底部操作栏

功能	说明
标尺	用于显示/隐藏画布边缘显示尺寸刻度。
参考线	从标尺侧拖出红色参考线，用于显示/隐藏页面参考线，可调整相关组件位置。
适合画布	单击，当前编辑界面会自适应到最佳的展示方式，尽可能完全显示页面中的内容。
缩放	拖动滑动条，可以放大和缩小当前页面。
自适应	选中复选框，应用页面会根据浏览器分辨率，自动调整显示尺寸。预览和发布后，可以查看页面自适应结果。

3.3.1.2. 页面

点击页面及组件，在页面标签下，可以查看导航布局、菜单配置、页面列表。

导航布局

导航布局分为：空白、顶部栏、左导航、左导航和顶部栏，选择完成后，点击配置按钮，即可完成导航布局的配置。

导航布局	参数	说明
空白	页面显示为空白页面。
顶部栏	页面左上角显示页面Logo和Web应用名称。
	顶部栏背景	顶部栏背景颜色设置。
	Logo	顶部栏logo图片展示、上传。
	应用名称	设置顶部栏应用名称是否显示，字体、颜色设置。
	登录信息	设置顶部栏登录信息是否显示，字体、账号信息字色、登录信息字色设置。
左导航	页面左侧显示菜单列表。
	导航样式	导航宽度和导航背景色设置。
	Logo	左上角logo图片展示、上传。
	登录信息	设置左导航登录信息是否显示，字体、账号信息字色、登录信息字色设置。
	菜单样式	字体、文字默认色、文字选中色、子菜单背景色、菜单hover色、菜单选中色设置。
左导航和顶部栏	页面左上角显示页面logo和Web应用名称，左侧显示导航菜单。

菜单配置

1、在页面标签的导航布局下，选择可配置菜单的导航模板。

2、在菜单配置下，点击新增主菜单按钮，输入菜单名称，回车确认后完成新增。将鼠标放置在相关主菜单栏目上，可进行增加子菜单、设置菜单参数、删除操作。

功能	说明
	增加子菜单。点击后，输入子菜单名称，回车确认后，成功增加子菜单。注：仅支持主菜单下，添加子菜单。添加在菜单后，原主菜单链接失效，只能展开或收起子菜单。
	设置菜单参数。为相关主菜单/子菜单配置链接打开方式、目标链接。
	删除。删除主菜单/子菜单。

页面列表

1、在页面标签下，页面列表中默认已经添加一个空白页面。

功能	说明
	新增页面。点击后新增一个空白页面。
	页面名称编辑。将鼠标放置在相关页面上，点击页面后侧的编辑，可修改该页面的名称。
	删除页面。将鼠标放置在相关页面上，点击页面后侧的删除按钮，删除该页面。注：页面下最少要保留一个页面。

新增页面后，可对该页面进行导航布局配置、菜单配置。

页面设置

在页面列表选择页面后，在空白处单击，右侧导航栏可进行页面配置。

参数	说明
作为首页	勾选后，该页面作为首页展示。
免登陆	开启应用鉴权后，勾选免登陆，可直接打开页面，否则需要账号或Token登陆。
背景颜色	对该页面进行背景颜色设置。
背景图片	上传图片作为背景图片展示。
分辨率	设置该页面的分辨率。

3.3.1.3. 组件

在组件标签下，包含基础组件、控制组件、图表组件、表单组件，拖动某一组件至画布，进行样式设置、数据源配置、交互配置。

3.3.1.3.1. 组件基础样式设置

组件	基础样式设置
矩形椭圆形三角形多边形星形箭形图标图片矢量图	基础样式-坐标轴。设置组件在页面中的位置，以组件左上角为起点坐标，设置X轴和Y轴。
	基础样式-组件名称。设置组件名称。
	基础样式-组件可见性。设置组件在页面中显示/隐藏。
	基础样式-不透明度。设置组件在页面中的透明度，0%为完全透明，100%为完全不透明。
	基础样式-圆角。设置矩形圆角弧度。
	基础样式-填充颜色/背景色。设置组件的填充颜色。
	边框-粗细。设置组件边框的粗细。
	边框-颜色。设置组件边框的颜色。
	边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。

3.3.1.3.2. 组件个性化样式设置

3.3.1.3.2.1. 基础组件

基础组件的个性化样式设置如下：

基础组件	个性化样式设置
文字	文字样式-字体。设置文字字体。
	文字样式-字号。设置文字字号。
	文字样式-颜色。设置文字颜色。
	文字样式-粗细。设置文字粗细。
	文字样式-行高。设置文字行高。
	文字样式-对齐。设置文字对齐方式。
指示灯	指示灯标签。自定义标签的字段名称、字段值。
	指示灯样式-颜色。展示数据源所对应的颜色。
	指示灯样式-图片。展示数据源所对应的图片。
卡片	边框-粗细。设置组件边框的粗细。
	边框-颜色。设置组件边框的颜色。
	边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。
时钟	文字样式-字号。设置文字字号。
	文字样式-颜色。设置文字颜色。
	文字样式-粗细。设置文字粗细。
	边框-粗细。设置组件边框的粗细。
	边框-颜色。设置组件边框的颜色。
	边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。
信息提示	全局样式-圆角。设置组件圆角弧度。
	全局样式-标题字号。设置标题字号大小。
	全局样式-内容字号。设置内容字号大小。
	常态配置-标题。设置常态下标题。
	常态配置-内容。设置常态下显示内容。
	常态配置-常态阈值。设置常态下的数据标准。
	警告态配置-标题。设置警告态下标题。
	警告态配置-内容。设置警告态下显示内容。
	警告态配置-警告阈值。设置警告态下的数据标准。
	错误态配置-标题。设置错误态下标题。
	错误态配置-内容。设置错误态下显示内容。
iframe	基础样式-关联链接。输入需嵌入页面的链接。
	边框-粗细。设置组件边框的粗细。
	边框-颜色。设置组件边框的颜色。
	边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。

3.3.1.3.2.2. 控制组件

控制组件的个性化样式设置如下：

控制组件	个性化样式设置
开关	基础样式-开关数据。配置开关组件所需的数据源。
	基础样式-样式类型。设置开关展示的样式开关icon/图片。
	基础样式-ON状态。开关打开的颜色。
	基础样式-OFF状态。开关关闭的颜色。
滑条	基础样式-展示数据。展示组件所配置数据源的数据。
	数值范围-最大值。设置组件的最大值。
	数值范围-最小值。设置组件的最小值。
	数值范围-步长。设置组件的步长。
	两端标签-是否隐藏。设置两端标签数据是否隐藏。
	两端标签-字号。设置两端标签的字号。
	两端标签-颜色。设置两端标签的颜色。
	两端标签-粗细。设置两端标签的粗细。
按钮	文字样式-字号。设置文字字号。
	文字样式-颜色。设置文字颜色。
	文字样式-粗细。设置文字粗细。
	边框-粗细。设置组件边框的粗细。
	边框-颜色。设置组件边框的颜色。
	边框-样式。设置组件边框的样式，包括实线边框、虚线边框、点线边框。
按钮标签	默认选项卡样式。设置默认展示的选项卡样式，可对选项进行新增、编辑、删除操作。
	选项卡样式。设置选项卡的展现样式，类型包括：胶囊型、开放型、包围型、条形。
	尺寸-圆角。设置组件圆角弧度。
	尺寸-字号。设置组件字号大小。
	常态-背景。设置常态时的背景颜色。
	常态=边框。设置常态时的边框颜色。
	常态-文字。设置常态时的文字颜色。
	悬停-背景。设置悬停时的背景颜色。
	悬停-边框。设置悬停时的边框颜色。
	悬停-文字。设置悬停时的文字颜色。
	选中-背景。设置选中时的背景颜色。
	选中-选中线。设置选中时的选中线颜色。
	选中-文字。选中时的文字颜色。

3.3.1.3.2.3. 图表组件

图表组件的个性化样式设置如下：

图表组件	个性化样式设置
设备管理	基础样式-选择产品。展示配置数据源后的产品数据。
	操作配置-允许用户添加设备。设置是否允许用户添加设备。
	操作配置-允许用户删除设备。设置是否允许用户删除设备。
	自定义标签管理。自定义标签的字段名称、字段值
	列显示配置-所属产品。设置是否展示所属产品。
	列显示配置-创建时间。设置是否展示创建时间。
	支持筛选-设备名称。设置是否可以通过设备名称搜索。
	支持筛选-所属产品。设置是否可以通过所属产品搜索。
	全局样式-主题色。设置组件的主题色。
	全局样式-字体。设置组件文字的字体。
	全局样式-线条粗细。设置组件线条的粗细。
	全局样式-线条颜色。设置组件线条的颜色。
	显示表格标题-标题内容。设置表格标题。
	显示表格标题-字号。设置表格标题的字号。
	显示表格标题-颜色。设置表格标题的颜色。
	显示表格标题-粗细。设置表格标题的粗细。
	显示分页-分页栏样式。设置分页栏的样式：标准版、简单版、迷你版。
	显示分页-每页行数。设置每页展示的行数。
	表头样式-行高。设置表头的行高。
	表头样式-背景色。设置表头的背景色。
	表头文字-字号。设置表头文字的字号。
	表头文字-颜色。设置表头文字的颜色。
	表头文字-粗细。设置表头文字的粗细。
	表格样式-行高。设置表格行高。
	表格文字-字号。设置文字的字号。
	表格文字-粗细。设置文字的粗细。
	表格文字-内容字色。设置常态下文字的颜色。
	表格文字-操作字色。设置操作时文字的颜色。
	区分奇偶行颜色-奇数行。设置奇数行的颜色。
	区分奇偶行颜色-偶数行。设置偶数行的颜色。
实时曲线	基础样式-展示数据。展示配置数据源后的数据。
	全局样式-字体。设置组件文字的字体。
	全局样式-轴颜色。设置组件的轴颜色。
	全局样式-背景颜色。设置组件的背景颜色。
	X轴-显示轴标签。设置是否显示X轴标签，显示则配置数据源。
	文字样式-字号。设置文字字号。
	文字样式-颜色。设置文字颜色。
	文字样式-粗细。设置文字粗细。
	Y轴-显示轴标签。设置是否显示Y轴标签，显示则配置数据源。
	文字样式-字号。设置文字字号。
	文字样式-颜色。设置文字颜色。
	文字样式-粗细。设置文字粗细。
	数值-最小值。设置数值的最大值。
	数值-最大值。设置数值的最小值。
	数值-刻度数量。设置数值的刻度数量值。
	边框-粗细。设置边框的粗细。
	边框-颜色。设置边框的颜色。
	边框-样式。设置边框的样式。
	是否显示系列名称。设置是否显示系列名称，显示则配置数据源。
	系列项-名称。设置系列名称。
	系列项-系列颜色。设置系列名称的颜色。

3.3.1.3.2.4. 表单组件

表单组件的个性化样式设置如下：

表单组件	个性化样式设置
文本框	基础样式-展示数据。展示配置数据源的数据。
	基础样式-默认提示。设置默认提示内容。
	基础样式-文字限制。设置组件字数限制。
	文字样式-字体。设置文字字体。
	文字样式-字号。设置文字字号。
	文字样式-颜色。设置文字颜色。
	文字样式-粗细。设置文字粗细。
	文字样式-行高。设置文字行高。
	文字样式-对齐。设置文字对齐方式。
数字框	基础样式-展示数据。展示配置数据源的数据。
	基础样式-最小值。设置组件的最小值。
	基础样式-最大值。设置组件的最大值。
	基础样式-步长。设置组件的步长值。
	基础样式-默认值。设置组件默认展示的数据。
下拉框	基础样式-列表内容-设备。选择产品，下拉展示该产品下的设备。
	基础样式-列表内容-项目内产品。选择产品，下拉展示该项目下所有产品下的设备。
	基础样式-列表内容-数据源。配置数据源，下拉展示配置的数据。
时间	基础样式-时间单位。设置展示的时间单位：秒/天/月/年。
时间	基础样式-默认时间。勾选默认时间，可手动设定当前时间。
多选	基础样式-数据源。展示配置数据源后的数据。
	多选配置-禁止。设置是否能够多选。
	多选样式-方向。设置组件方向：水平/垂直。
	多选样式-背景颜色。设置组件的背景颜色。
	多选样式-文字颜色。设置组件的文字颜色。
	多选样式-字号。设置组件文字的字号。
	多选样式-按钮大小。设置按钮大小。

3.3.1.3.3. 组件数据类型设置

部分组件在配置数据源时，对配置的数据类型有限制。

组件	数据类型设置
矩形椭圆形三角形多边形星形箭形卡片时钟滑条实时曲线数字框	该组件支持以下类型的设备属性：整数、单精度数字、双精度数字。
文字	该组件支持以下类型的设备属性：整数、单精度数字、双精度数字、字符串
指示灯	该组件支持以下类型的设备属性：布尔型、整数
信息提示	该组件支持以下类型的设备属性：整数、单精度数字、双精度数字、字符串、枚举型、布尔型
开关	该组件支持以下类型的设备属性：布尔型、整数
按钮文本框	该组件支持以下类型的设备属性：字符串

这篇文档是否帮助您解决了问题? 有帮助没帮助

帮助中心