合作伙伴工作台
注册

页面及组件

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. 组件数据类型设置

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

组件

数据类型设置

矩形

椭圆形

三角形

多边形

星形

箭形

卡片

时钟

滑条

实时曲线

数字框

该组件支持以下类型的设备属性:整数、单精度数字、双精度数字。

文字

该组件支持以下类型的设备属性:整数、单精度数字、双精度数字、字符串

指示灯

该组件支持以下类型的设备属性:布尔型、整数

信息提示

该组件支持以下类型的设备属性:整数、单精度数字、双精度数字、字符串、枚举型、布尔型

开关

该组件支持以下类型的设备属性:布尔型、整数

按钮

文本框

该组件支持以下类型的设备属性:字符串


3.3.1.4. 数据源配置

Web应用将组件拖动至画布后,点击数据源配置按钮,可对部分组件进行数据源配置。数据源的获取有两种方式,一种是从设备获取,即将设备上报的属性和事件作为组件的数据源展示;一种是从接口获取,即自定义接口,从接口获取结果作为组件的数据源展示。

3.3.1.4.1. 数据源-设备

数据源-设备

说明

选择数据源

选择设备。

实时刷新

配置数据源后,设置打开,实现设备数据实时刷新。

产品

选择该项目下关联的产品。若未关联过产品,可点击左下角产品管理,进入项目详情-产品页,进行关联或创建产品。

设备

选择指定设备,为该项目下已经关联过产品的设备。若未关联过设备,可点击左下角设备管理,进入项目详情-设备页,进行关联或创建设备。

注:若未有真实设备连接平台,则需使用虚拟设备,通过在线调试上报数据;若已有真实设备连接平台,则使用真实设备上报的数据。

数据项

设置使用单个属性的数值作为数据项。

属性

选择已关联的设备的单一属性作为数据源,可将鼠标移至提示按钮查看该组件支持设备属性的类型。

格式参考

点击格式参考,可查看组件支持的数据格式。

验证数据格式

点击验证数据格式,可验证当前数据是否符合所支持的数据格式。验证成功,则提示:数据验证格式成功,失败则提示详细错误信息。


3.3.1.4.2. 数据源-接口

数据源-接口

说明

选择数据源

选择接口。

自定义接口

调用开发者自定义接口作为组件数据源。

请求方式

有get/post两种方式。

请求地址

输入自定义接口的请求地址。

请求参数-静态参数

选择静态参数。

请求参数-返回结果

点击获取结果按钮,获取返回接口调用的结果。

数据过滤脚本

对接口返回的数据进行过滤,提供模板有:空白脚本、数值转换范例、饼图数据范例、二维数组范例、颜色设定范例。

处理后结果

用户根据需求,勾选是否对接口返回结果进行过滤,编辑过滤脚本,点击获取结果按钮,获取返回过滤处理后的结果。

定时刷新

如果不勾选,数据将不会自动更新。


3.3.1.5. 交互配置

3.3.1.5.1 量管理

Web应用中拖拽组件至画布,可以配置组件的交互动作为:赋值给变量,点击管理变量即可新增相关变量。

 

1、点击管理变量,可以查看该应用下的所有变量,对其进行编辑、删除操作

 

2、点击新增变量:可对变量进行新增操作。

 

3、 变量新增完成后,可以在交互动作、接口数据、样式配置等配置中使用。


3.3.1.5.2. 事件

常用的事件包含:单击、双击、值改变等。不同的组件,交互事件不同。通过这些事件来设置动作:设置设备属性、打开链接、赋值给变量、显示隐藏。一个组件可以配置多个交互动作,事件触发时,按照先后顺序依次执行动作。

 事件

说明

单击

鼠标单击组件触发动作。

双击

鼠标双击组件触发动作。

值改变

文本框值改变时触发动作。


3.3.1.5.3. 动

动作

说明

设置设备属性

通过事件触发,设置相关设备属性值。

1、 产品、设备、属性详情请参见数据源-设备配置。 

   注:该设备属性是来自产品"功能定义"的属性,只显示已配置"指令下发"的属性

2、 设置值。

参数来源包括组件值、URL参数、变量

   组件值:获取设置的组件值作为设备的属性值。

URL参数:获取设置的URL参数值作为设备的属性值。

变量:获取设置的变量值作为设备的属性值,变量设置详情请参见交互配置-变量

打开链接

通过事件触发,打开已配置的链接。

1、选择链接:配置链接打开方式、目标链接。

2、URL参数:将鼠标移至帮助按钮,可查看URL参数设置标准。

3、输入参数键、值,参数来源包括组件服务、组件值、URL参数、变量

组件服务:目前只适用于设备管理组件,值为:当前页数/每页记录条数。

组件值:关联相关组件,值为相关组件值。

URL参数:值设置为URL参数和默认值 

变量:值设置为相关变量的值。

赋值给变量

通过事件触发,赋值给相关变量。

1、管理变量。可新增、删除、编辑变量,详情请参见交互配置-变量管理

2、配置。选择相关变量,通过事件触发进行赋值。

显示隐藏

通过事件触发,显示/隐藏页面上的组件。


这篇文档是否帮助您解决了问题?
如果您愿意进一步帮助我们改进文档 ,请留下您的联系方式。