CN113988005A - 一种移动端界面快速配置方法 - Google Patents

Abstract

本发明提供一种移动端界面快速配置，通过在现有PC端布局的基础上，可对移动端界面进行快速配置，与直接构建全新移动端软件架构相比，更加高效快捷，同时可较好地解决将PC端界面应用于移动端显示时存在的数据报表变形、走样或者错位，使得用户体验感差的问题。

Description

一种移动端界面快速配置方法

技术领域

本发明涉及工业互联网管理平台领域，尤其涉及一种移动端界面快速配置方法。

背景技术

工业互联网管理平台这类企业级应用，由于数据量大，因此一般的数据采用数据报表的方式向用户展示，数据报表展示形式都是平台方开发的固定样式和排版。而事实上，不同的企业具有不同类型的报表数据，因此当所有用户都使用同样的报表样式和排版时，对于部分企业而言，固定的样式和排版可能会导致数据展示不够直观；另外，加之，客户大部分都是使用移动端(如手机)登录平台和查看报表；而平台方都是使用PC端进行布局，PC端布局结果在移动端展示，由于展示界面变化，会造成数据报表变形、走样或者错位，使得用户体验感差。

针对这个问题，本领域技术人员致力于开发一种能够实现移动端可视化布局的方案。

发明内容

本发明提供的一种移动端界面快速配置方法，主要解决的技术问题是：如何在现有PC端布局的基础上，对移动端界面进行快速配置，以解决移动端界面数据报表变形、走样或者错位，使得用户体验感差的问题。

为解决上述技术问题，本发明提供一种移动端界面快速配置方法，包括：

在目标客户的PC端界面配置完成后，进入移动端排版布局工作面板；

根据PC端报表数据配置请求接口，获取所述目标客户的真实工业生产数据；并基于所述真实工业生产数据生成报表组件；

将各所述报表组件按照预设排版规则，在移动端虚拟面板中进行排版配置；

在确认排版配置完成后，记录并保存各所述报表组件在移动端虚拟面板上的最终坐标位置和最终宽高参数；

当目标客户的移动端用户访问当前生产数据报表时，从后台获取各所述报表组件的最终坐标位置和最终宽高参数，并基于各所述报表组件的最终坐标位置和最终宽高参数在该移动端生成可视化界面。

可选的，所述报表组件包括表格、柱状图、折线图、饼图、指标图、文本中的至少一种。

可选的，所述预设排版规则包括直接按照系统给定的标准排版布局模板和/或当前流行排版布局模板，所述标准排版布局模板是实施人员预先配置好的模板，所述当前流行排版布局模板是按照预设周期从已配置模板库中进行神经网络学习得到的；排版布局模板包括各组件对应的排版位置和宽高参数。

可选的，还包括对各所述报表组件进行手动排版。

可选的，所述手动排版包括位置变换、宽高调整和隐藏中的至少一种；其中通过拖拽报表组件实现位置变换；通过编辑宽高和/或缩放实现宽高调整；通过点击隐藏按钮实现报表组件隐藏，且隐藏后的组件加入到已隐藏组件列表中进行展示，当需要在移动端虚拟面板中排版展示时，可从所述已隐藏列表中拖拽回所述移动端虚拟面板中。

可选的，所述报表组件宽度以移动端显示屏宽度为标准，将移动端显示屏宽度平均分为N等分，所述N大于等于3；组件高度以像素为单位。

可选的，所述N等于6，报表组件最大宽度为6，表示宽度占满，报表组件最小宽度为2。

可选的，在所述确认排版配置完成后，还包括对按照预设周期获取所述目标客户当前的真实工业生产数据，并基于所述当前的真实工业生产数据对所述报表组件的生产数据进行更新。

本发明的有益效果是：

根据本发明提供的一种移动端界面快速配置，包括在目标客户的PC端界面配置完成后，进入移动端排版布局工作面板；根据PC端报表数据配置请求接口，获取目标客户的真实工业生产数据；并基于真实工业生产数据生成报表组件；将各报表组件按照预设排版规则，在移动端虚拟面板中进行排版配置；在确认排版配置完成后，记录并保存各报表组件在移动端虚拟面板上的最终坐标位置和最终宽高参数；当目标客户的移动端用户访问当前生产数据报表时，从后台获取各报表组件的最终坐标位置和最终宽高参数，并基于各报表组件的最终坐标位置和最终宽高参数在该移动端生成可视化界面。通过在现有PC端布局的基础上，可对移动端界面进行快速配置，与直接构建全新移动端软件架构相比，更加高效快捷，同时可较好地解决将PC端界面应用于移动端显示时存在的数据报表变形、走样或者错位，使得用户体验感差的问题。

附图说明

图1为本发明实施例一的移动端界面快速配置方法流程示意图；

图2为本发明实施例一的PC端界面配置示意图；

图3为本发明实施例一的移动端界面配置示意图；

图4为本发明实施例一的移动端界面显示效果展示示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，下面通过具体实施方式结合附图对本发明作进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

实施例一：

为了解决移动端界面数据报表变形、走样或者错位，使得用户体验感差的问题，本实施例提供一种移动端界面快速配置方法，通过在现有PC端布局的基础上，实现对移动端界面排版进行快速配置，请参见图1，该方法主要包括如下步骤：

S101、在目标客户的PC端界面配置完成后，进入移动端排版布局工作面板。

请参见图2，先在PC端界面配置好PC端数据报表，报表中单个组件的数据配置在移动端与PC端是一样的，移动端布局时就不需要又去一一配置单个组件的数据配置，直接将PC端报表组件的数据配置复制到移动端组件，减少重复工作。通过点击“移动端布局”按钮进入移动端布局工作面板，请参见图3。

S102、根据PC端报表数据配置请求接口，获取目标客户的真实工业生产数据；并基于真实工业生产数据生成报表组件。

在进入移动端布局工作面板后，根据PC端报表数据配置请求接口获取真实工业生产数据，应当理解的是，工业生产数据基于企业需求或实际情况可能不同，包括但不限于生产数据、成本数据、维护数据等，其中生产数据包括但不限于产品类型、总产品数量、合格产品数量、残次品数量等；成本数据包括但不限于原材料数量、人工数量等；维护数据包括但不限于设备种类、维修次数、保养次数、异常情况等。

以返回的真实工业生产数据在移动端模拟面板中生成报表组件，应当理解的是，基于实际的工业生产数据生产报表，可采用现有任意方式，这并非发明的重点。本实施例中，报表组件包括但不限于表格、柱状图、折线图、饼图、指标图、文本等。

S103、将各报表组件按照预设排版规则，在移动端虚拟面板中进行排版配置。

可选的，预设排版规则包括直接按照系统给定的标准排版布局模板和/或当前流行排版布局模板，生成初始化界面。其中，标准排版布局模板是实施人员预先配置好的模板，当前流行排版布局模板是按照预设周期从已配置模板库中进行神经网络学习得到的，应当理解的是，基于给定样本进行学习训练，可采用现有任意神经网络算法实现，在此不再赘述。本实施例中，排版布局模板包括各报表组件对应的排版位置和宽高参数。

在本发明的其他实施例中，当前流行排版布局模块可基于已配置模板库中被更多客户选择的排版布局模块，作为当前流行排版布局模块，例如针对某一排版布局，被多个客户选择，表明该排版布局更受客户所欢迎，故将其作为一种当前流行排版布局模板，可作为初始配置用户的一种选择，提高排版配置效率。

在本发明的其他可选实施例中，还包括对各报表组件进行手动排版，以更好地满足客户个性化排版需求。

具体的，手动排版包括对报表组件进行位置变换、宽高调整和隐藏；其中位置变换可通过拖拽报表组件实现；宽高调整通过编辑宽高和/或缩放实现；报表组件隐藏通过点击隐藏按钮实现，鼠标悬浮在报表组件上时会有隐藏按钮的提示，点击隐藏按钮，组件从移动端虚拟面板中移除，且隐藏后的组件将加入到已隐藏组件列表中进行展示，当需要在移动端虚拟面板中排版展示时，可从所述已隐藏列表中拖拽回所述移动端虚拟面板中。隐藏并不是删除，报表组件的配置以及数据都还保留在已隐藏组件列表中，通过hide字段是否为true来控制组件是否隐藏。

为了保证报表组件在移动终端的显示效果，避免出现报表变形、走样或者错位，使得用户体验感差的问题，本实施例设置了组件宽度规则和组件高度规则，其中组件宽度规则为：报表组件宽度以移动端显示屏宽度为标准，将移动端显示屏宽度平均分为N等分，N大于等于3；组件高度规则为：组件高度以像素为单位。报表组件宽度以移动端显示屏宽度为标准，可保证报表组件的横向宽度与移动端显示屏的宽度比较适配，避免组件过宽超过屏幕显示范围，出现数据丢失的问题，或者组件过窄，显示不清，比例失调的问题；进一步限制组件高度以像素为单位，即组件高度可基于原始最优宽高比例、实际显示内容进行调整，不会出现比例缩放导致报表变形、文字变形的问题；使得最终显示效果可以更加匹配移动端，提高显示美感。

本实施例中，N可取6，即将移动端显示屏宽度平均分为6等分，报表组件最大宽度为6，表示宽度占满整个显示屏宽度，报表组件最小宽度为2。

在手动排版过程中，如果发现报表组件出现数据展示不全、数据重叠等问题，可以通过拖拽组件右下角调整组件宽高来适应数据，限制组件宽高不能小于该类组件最小宽高。

S104、在确认排版配置完成后，记录并保存各报表组件在移动端虚拟面板上的最终坐标位置和最终宽高参数。

在虚拟面板中各宝宝组件的排版布局满足客户需求时，可点击确认按钮保存，以将各报表组件在移动端虚拟面板上的最终坐标位置和最终宽高参数在后台数据库进行保存，作为后续该客户在移动端的排版布局依据。

坐标位置以移动端模拟面板左上角为坐标原点，宽度方向为X轴，高度方向为Y轴，报表组件的最终坐标位置以该报表组件左上角顶点表示，应当说明的是，本实施例中，报表组件为矩形式样，在左上角定位的坐标位置，以及该报表组件的宽高确定之后，可在任意移动终端进行排版展示。应当理解的是，当报表组件为其他形状时，同样可以采用某一固定位置点表示其坐标位置，例如四角为圆角的矩形、椭圆形、圆形灯形状的报表组件，只要找到某一固定位置点即可，本实施例对此不作限制，只要能够准确表示该报表组件位置即可。

S105、当目标客户的移动端用户访问当前生产数据报表时，从后台获取各报表组件的最终坐标位置和最终宽高参数，并基于各报表组件的最终坐标位置和最终宽高参数在该移动端生成可视化界面。

本实施例中，考虑到移动终端显示屏宽高比例通常是固定的，即使实际访问的移动终端与虚拟面板尺寸不同，但是比例是相当的，且报表组件的宽度和位置横坐标是以虚拟面板显示宽度为标准的，而实际访问的移动终端与虚拟面板尺寸比例是相当的，因此不会造成实际排版布局效果与虚拟面板上存在较大差距，不会存在数据报表变形、走样或者错位严重的问题。请参见图4所示的移动端界面显示示意图。

本实施例中，将报表组件划分为独立组件与组合类组件。独立组件宽度占满整个显示屏宽度，组合类组件则是宽度小于N(未占满)的报表组件，而两者高度都是根据配置像素生成。纵坐标相同的组合类组件组装成一个组合，生成的组合当成一个独立组件，组合内部布局依照保存的配置进行组合排版。

在本发明的其他实施例中，在确认排版配置完成后，还包括对按照预设周期获取目标客户当前的真实工业生产数据，并基于当前的真实工业生产数据对报表组件的生产数据进行更新。保证报表组件数据的有效性和实时性。其中，预设周期可基于实际需求灵活设置，对此不作限制，例如1h、1天等。

本发明提供的一种移动端界面快速配置，包括在目标客户的PC端界面配置完成后，进入移动端排版布局工作面板；根据PC端报表数据配置请求接口，获取目标客户的真实工业生产数据；并基于真实工业生产数据生成报表组件；将各报表组件按照预设排版规则，在移动端虚拟面板中进行排版配置；在确认排版配置完成后，记录并保存各报表组件在移动端虚拟面板上的最终坐标位置和最终宽高参数；当目标客户的移动端用户访问当前生产数据报表时，从后台获取各报表组件的最终坐标位置和最终宽高参数，并基于各报表组件的最终坐标位置和最终宽高参数在该移动端生成可视化界面。通过在现有PC端布局的基础上，可对移动端界面进行快速配置，与直接构建全新移动端软件架构相比，更加高效快捷，同时可较好地解决将PC端界面应用于移动端显示时存在的数据报表变形、走样或者错位，使得用户体验感差的问题。

显然，本领域的技术人员应该明白，上述本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在计算机存储介质(ROM/RAM、磁碟、光盘)中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。所以，本发明不限制于任何特定的硬件和软件结合。

以上内容是结合具体的实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (8)

1.一种移动端界面快速配置方法，其特征在于，包括：

在目标客户的PC端界面配置完成后，进入移动端排版布局工作面板；

根据PC端报表数据配置请求接口，获取所述目标客户的真实工业生产数据；并基于所述真实工业生产数据生成报表组件；

将各所述报表组件按照预设排版规则，在移动端虚拟面板中进行排版配置；

在确认排版配置完成后，记录并保存各所述报表组件在移动端虚拟面板上的最终坐标位置和最终宽高参数；

当目标客户的移动端用户访问当前生产数据报表时，从后台获取各所述报表组件的最终坐标位置和最终宽高参数，并基于各所述报表组件的最终坐标位置和最终宽高参数在该移动端生成可视化界面。

2.如权利要求1所述的移动端界面快速配置方法，其特征在于，所述报表组件包括表格、柱状图、折线图、饼图、指标图、文本中的至少一种。

3.如权利要求1所述的移动端界面快速配置方法，其特征在于，所述预设排版规则包括直接按照系统给定的标准排版布局模板和/或当前流行排版布局模板，所述标准排版布局模板是实施人员预先配置好的模板，所述当前流行排版布局模板是按照预设周期从已配置模板库中进行神经网络学习得到的；排版布局模板包括各组件对应的排版位置和宽高参数。

4.如权利要求1-3任一项所述的移动端界面快速配置方法，其特征在于，还包括对各所述报表组件进行手动排版。

5.如权利要求4所述的移动端界面快速配置方法，其特征在于，所述手动排版包括位置变换、宽高调整和隐藏中的至少一种；其中通过拖拽报表组件实现位置变换；通过编辑宽高和/或缩放实现宽高调整；通过点击隐藏按钮实现报表组件隐藏，且隐藏后的组件加入到已隐藏组件列表中进行展示，当需要在移动端虚拟面板中排版展示时，可从所述已隐藏列表中拖拽回所述移动端虚拟面板中。

6.如权利要求5所述的移动端界面快速配置方法，其特征在于，所述报表组件宽度以移动端显示屏宽度为标准，将移动端显示屏宽度平均分为N等分，所述N大于等于3；组件高度以像素为单位。

7.如权利要求6所述的移动端界面快速配置方法，其特征在于，所述N等于6，报表组件最大宽度为6，表示宽度占满，报表组件最小宽度为2。

8.如权利要求1-3任一项所述的移动端界面快速配置方法，其特征在于，在所述确认排版配置完成后，还包括对按照预设周期获取所述目标客户当前的真实工业生产数据，并基于所述当前的真实工业生产数据对所述报表组件的生产数据进行更新。

Images