CN112015415B - 一种屏幕页面配置和展示方法和装置 - Google Patents

Abstract

本发明公开了一种屏幕页面配置和展示方法和装置，通过将屏幕页面分成m*n个子区域，其中每个子区域的宽度为1/m、高度为1/n；建立多个独立的页面组件，获取每个页面组件的展示形式信息和数据源信息；通过html拖放API技术将页面组件拖曳到各个子区域中，获取每个页面组件的定位信息，对页面组件进行宽高的拖曳，获得每个页面组件的宽高信息，将定位信息、宽高信息、展示形式信息和数据源信息存储为屏幕页面的配置信息；以及根据配置信息将多个页面组件在屏幕页面上进行配置和展示。最终实现大屏系统软硬件一体化，实现固件远程不停机的状态下升级，页面组件可配置化，解决安装部署繁琐、研发周期长等问题。

Description

一种屏幕页面配置和展示方法和装置

技术领域

本发明涉及屏幕展示领域，具体涉及一种屏幕页面配置和展示方法和装置。

背景技术

随着web前端技术的进步，大数据展示技术的不断发展，展厅应用得到蓬勃发展，展厅的大屏系统需求越来越强烈。特别是灵活多样的可配置大屏的需求越来越多。传统的大屏系统与研发效率已经无法满足市场要求。

现在市面上现有的大屏系统采用B/S架构以及html结合css开发，因此存在以下不足：首先没有实现软硬件结合，安装部署流程繁琐；其次采用以上架构的研发周期长，价格昂贵；并且无法实现大屏可配置，升级改造困难等。

有鉴于此，建立一种新型的屏幕页面配置和展示方法和装置是非常具有意义的。

发明内容

针对上述提到的现有大屏系统中安装部署繁琐、研发周期长、不可配置或配置困难以及升级改造困难等问题。本申请的实施例的目的在于提出了一种屏幕页面配置和展示方法和装置来解决以上背景技术部分提到的技术问题。

第一方面，本申请的实施例提供了一种屏幕页面配置和展示方法，包括以下步骤：

S1：将屏幕页面分成m*n个子区域，其中每个子区域的宽度为1/m、高度为1/n；

S2：建立多个独立的页面组件，获取每个页面组件的展示形式信息和数据源信息；

S3：通过html拖放API技术将页面组件拖曳到各个子区域中，获取每个页面组件的定位信息，对页面组件进行宽高的拖曳，获得每个页面组件的宽高信息，将定位信息、宽高信息、展示形式信息和数据源信息存储为屏幕页面的配置信息；以及

S4：根据配置信息将多个页面组件在屏幕页面上进行配置和展示。

在一些实施例中，页面组件通过Vue.js进行开发，页面组件所展示的内容由不同的数据源所决定。每个页面组件配置各自的数据源，每个页面组件采用宽高各100％进行设定，从而使得页面组件具体的大小由外层的布局所决定。

在一些实施例中，展示形式信息包括echarts、openlayers地图、纯文本、视频、three.js三维的数据展示形式。在同一个屏幕上每个页面组件可以独立地展示出各种不同形式的信息。

在一些实施例中，定位信息通过以下公式进行计算：top＝1/n*y，left＝1/m*x，其中定位信息包括top和left，y为页面组件在子区域的左上角位置与屏幕页面的左上角位置在纵向上所占子区域的数量，x为页面组件在子区域的左上角位置与屏幕页面的左上角位置在横向上所占子区域的数量。每个页面组件在屏幕上的不同位置上的子区域中，因此需要对每个组件具体的定位信息进行计算，以便于更加准确的控制页面组件。

在一些实施例中，宽高信息通过以下公式计算得到：width＝1/m*s1，height＝1/n*s2，其中width为页面组件的宽，height为页面组件的高，s1为页面组件横向所占子区域的数量，s2为页面组件纵向所占子区域的数量。根据宽高信息可以确定经过宽高拖拽后的每个页面组件的大小。

在一些实施例中，步骤S4具体包括：

S41：根据配置信息中的展示形式信息和数据源信息通过Vue.js的动态组件功能对页面组件进行实施例化，使页面组件具有具体的功能；以及

S42：根据配置信息中的定位信息和宽高信息通过Css绝对定位对页面组件进行布局。

根据不同的页面组件及数据源进行不同形式的展示，从而还原成一个完整的屏幕页面。

在一些实施例中，通过Node.js的http模块传输新的页面组件所对应的文件，并通过Node.js的File模块对原来的页面组件所对应的文件进行替换，再通过Node.js的open模块进行重新启动屏幕界面以完成页面组件的升级。从而实现页面组件的固件在不停机的状态下进行升级，解决升级改造困难的问题。

在一些实施例中，当数据源为远程数据源时，步骤S2中还包括：对接远程平台的数据将其转换成统一格式，并为页面组件提供接口；当数据源为本地数据源时，步骤S2还包括：采用html的textarea在线编辑以及json文件的file input上传实现本地数据源的编辑，并通过axios技术读取本地json文件以实现页面组件与本地数据源的对接。因此页面组件的配置可以配置远程的数据源，也可以配置本地的数据源，解决不可配置或配置困难的问题。

第二方面，本申请的实施例提出了一种屏幕页面配置和展示装置，包括：

切分模块，被配置为将屏幕页面分成m*n个子区域，其中每个子区域的宽度为1/m、高度为1/n；

页面组件建立模块，被配置为建立多个独立的页面组件，获取每个页面组件的展示形式信息和数据源信息；

配置模块，被配置为通过html拖放API技术将页面组件拖曳到子区域中，获取每个页面组件的定位信息，并进行宽高的拖曳获得每个页面组件的宽高信息，将定位信息、宽高信息、展示形式信息和数据源信息存储为屏幕页面的配置信息；以及

展示模块，被配置为根据配置信息将多个页面组件在屏幕页面上进行展示。

第三方面，本申请实施例提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如第一方面中任一实现方式描述的方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面中任一实现方式描述的方法。

本申请的实施例公开了一种屏幕页面配置和展示方法和装置，通过将屏幕页面分成m*n个子区域，其中每个子区域的宽度为1/m、高度为1/n；建立多个独立的页面组件，获取每个页面组件的展示形式信息和数据源信息；通过html拖放API技术将页面组件拖曳到各个子区域中，获取每个页面组件的定位信息，对页面组件进行宽高的拖曳，获得每个页面组件的宽高信息，将定位信息、宽高信息、展示形式信息和数据源信息存储为屏幕页面的配置信息；以及根据配置信息将多个页面组件在屏幕页面上进行配置和展示。最终实现大屏系统软硬件一体化，实现固件远程不停机的状态下升级，页面组件可配置化，解决安装部署繁琐、研发周期长等问题。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请的一个实施例可以应用于其中的示例性装置架构图；

图2为本发明的实施例的基屏幕页面配置和展示方法的流程示意图；

图3为本发明的实施例的屏幕页面配置和展示方法的步骤S4的流程示意图；

图4为本发明的实施例的屏幕页面配置和展示装置的示意图；

图5为本发明的实施例的屏幕页面配置和展示装置的展示模块的示意图；

图6是适于用来实现本申请实施例的电子设备的计算机装置的结构示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

图1示出了可以应用本申请实施例的屏幕页面配置和展示方法或屏幕页面配置和展示装置的示例性装置架构100。

如图1所示，装置架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种应用，例如数据处理类应用、文件处理类应用等。

终端设备101、102、103可以是硬件，也可以是软件。当终端设备101、102、103为硬件时，可以是各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。当终端设备101、102、103为软件时，可以安装在上述所列举的电子设备中。其可以实现成多个软件或软件模块(例如用来提供分布式服务的软件或软件模块)，也可以实现成单个软件或软件模块。在此不做具体限定。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上传的文件或数据进行处理的后台数据处理服务器。后台数据处理服务器可以对获取的文件或数据进行处理，生成处理结果。

需要说明的是，本申请实施例所提供的屏幕页面配置和展示方法可以由服务器105执行，也可以由终端设备101、102、103执行，相应地，屏幕页面配置和展示装置可以设置于服务器105中，也可以设置于终端设备101、102、103中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。在所处理的数据不需要从远程获取的情况下，上述装置架构可以不包括网络，而只需服务器或终端设备。

图2示出了本申请的实施例公开了一种屏幕页面配置和展示方法，包括以下步骤：

S1：将屏幕页面分成m*n个子区域，其中每个子区域的宽度为1/m、高度为1/n；

S2：建立多个独立的页面组件，获取每个页面组件的展示形式信息和数据源信息；

S3：通过html拖放API技术将页面组件拖曳到各个子区域中，获取每个页面组件的定位信息，对页面组件进行宽高的拖曳，获得每个页面组件的宽高信息，将定位信息、宽高信息、展示形式信息和数据源信息存储为屏幕页面的配置信息；以及

S4：根据配置信息将多个页面组件在屏幕页面上进行配置和展示。

在其中一个实施例中，步骤S1中将屏幕页面划分为24*13个子区域，每个子区域的大小为宽度1/24*100％，高度1/13*100％。在具体的实施例中，通过html5拖拽API拖拽页面组件到每个子区域中，并进行宽高的拖拽。

在具体的实施例中，在步骤S2中页面组件通过Vue.js进行开发，页面组件所展示的内容由不同的数据源所决定。屏幕页面中的各个页面组件都是由Vue.js开发各个独立的组件所组成，每个页面组件配置各自的数据源，每个页面组件采用宽高各100％进行设定，从而使得页面组件具体的大小由外层的布局所决定。展示形式信息包括echarts、openlayers地图、纯文本、视频、three.js三维的数据展示形式。在同一个屏幕上每个页面组件可以独立地展示出各种不同形式的信息。在其他实施例中，还可以包括其他不同类型的展示形式以满足不同的需求。

在具体的实施例中，在步骤S3中定位信息通过以下公式进行计算：top＝1/n*y，left＝1/m*x，其中定位信息包括top和left，y为页面组件在子区域的左上角位置与屏幕页面的左上角位置在纵向上所占子区域的数量，x为页面组件在子区域的左上角位置与屏幕页面的左上角位置在横向上所占子区域的数量。在此处，以屏幕页面的左上角位置作为参照点，并建立坐标系，将参照点在横向上设置为X轴，参照点在纵向上设置为Y轴，同时以每个页面组件在子区域的左上角位置作为计算点，将在计算点与参照点之间的X轴方向上所占据子区域的数量设为x，将在计算点与参照点之间的Y轴方向上所占据子区域的数量设为y。每个页面组件在屏幕上的不同位置上的子区域中，因此需要对每个组件具体的定位信息进行计算，以便于更加准确的控制页面组件。通过此方式可以准确地定位到每个页面组件在屏幕页面上的位置，从而得到定位信息。

在具体的实施例中，宽高信息通过以下公式计算得到：width＝1/m*s1，height＝1/n*s2，其中width为页面组件的宽，height为页面组件的高，s1为页面组件横向所占子区域的数量，s2为页面组件纵向所占子区域的数量。根据宽高信息可以确定经过宽高拖拽后的每个页面组件的大小。进行多次这样配置以后，构建出一个完整的屏幕页面。从而获取到屏幕页面整体的布局信息，进行存储在数据库系统或者本地。系统存储多个这样的一整套配置，每个配置都可以展示出一套屏幕布局。

在具体的实施例中，如图3所示，步骤S4具体包括：

S41：根据配置信息中的展示形式信息和数据源信息通过Vue.js的动态组件功能对页面组件进行实施例化，使页面组件具有具体的功能；以及

S42：根据配置信息中的定位信息和宽高信息通过Css绝对定位对页面组件进行布局。

在此过程中，通过Vue.js的动态组件功能进行声明组件，采用Css绝对定位进行布局。Vue.js的动态组件功能可以用泛型定义组件，组件类型后期进行动态定义，并非前期固定。Css绝对定位可以生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left"、"top"、"right"以及"bottom"属性进行规定。因此可以根据不同的页面组件及数据源进行不同形式的展示，从而还原成一个完整的屏幕页面。

在具体的实施例中，当存在固件升级的要求时，在联网情况下，可以通过Node.js的http模块传输新的页面组件所对应的文件，并通过Node.js的File模块对原来的页面组件所对应的文件进行替换，再通过Node.js的open模块进行重新启动屏幕界面以完成页面组件的升级。从而实现页面组件的固件在不停机的状态下进行升级，解决升级改造困难的问题。

在具体的实施例中，在组件的配置界面，可以配置远程的数据源，也可以是本地的数据源。当数据源为远程数据源时，步骤S2中还包括：对接远程平台的数据将其转换成统一格式，并为页面组件提供接口。远程数据平台系统是大屏系统配套的后端服务，功能是对接各个原平台的数据，并为大屏系统提供统一格式的数据。当数据源为本地数据源时，步骤S2还包括：采用html的textarea在线编辑以及json文件的file input上传实现本地数据源的编辑，并通过axios技术读取本地json文件以实现页面组件与本地数据源的对接。因此页面组件的配置可以配置远程的数据源，也可以配置本地的数据源，解决不可配置或配置困难的问题。

进一步参考图4，作为对上述各图所示方法的实现，本申请提供了一种屏幕页面配置和展示装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图4所示，本申请的实施例提出了一种屏幕页面配置和展示装置，包括：

切分模块1，被配置为将屏幕页面分成m*n个子区域，其中每个子区域的宽度为1/m、高度为1/n；

页面组件建立模块2，被配置为建立多个独立的页面组件，获取每个页面组件的展示形式信息和数据源信息；

配置模块3，被配置为通过html拖放API技术将页面组件拖曳到子区域中，获取每个页面组件的定位信息，并进行宽高的拖曳获得每个页面组件的宽高信息，将定位信息、宽高信息、展示形式信息和数据源信息存储为屏幕页面的配置信息；以及

展示模块4，被配置为根据配置信息将多个页面组件在屏幕页面上进行展示。

在本申请的实施例中提出的屏幕页面配置和展示装置可以是一种定制化的微型主机，集成可配置化大屏系统软件。部署时，将微型主机连接显示屏，从而展示屏幕界面。通过用户自定义配置，可以随机组合屏幕的页面组件，并自定义布局。

在其中一个实施例中，在切分模块1中将屏幕页面划分为24*13个子区域，每个子区域的大小为宽度1/24*100％，高度1/13*100％。在具体的实施例中，通过html5拖拽API拖拽页面组件到每个子区域中，并进行宽高的拖拽。

在具体的实施例中，在页面组件建立模块2中页面组件通过Vue.js进行开发，页面组件所展示的内容由不同的数据源所决定。屏幕页面中的各个页面组件都是由Vue.js开发各个独立的组件所组成，每个页面组件配置各自的数据源，每个页面组件采用宽高各100％进行设定，从而使得页面组件具体的大小由外层的布局所决定。展示形式信息包括echarts、openlayers地图、纯文本、视频、three.js三维的数据展示形式。在同一个屏幕上每个页面组件可以独立地展示出各种不同形式的信息。在其他实施例中，还可以包括其他不同类型的展示形式以满足不同的需求。

在具体的实施例中，在配置模块3中定位信息通过以下公式进行计算：top＝1/n*y，left＝1/m*x，其中定位信息包括top和left，y为页面组件在子区域的左上角位置与屏幕页面的左上角位置在纵向上所占子区域的数量，x为页面组件在子区域的左上角位置与屏幕页面的左上角位置在横向上所占子区域的数量。在此处，以屏幕页面的左上角位置作为参照点，并建立坐标系，将参照点在横向上设置为X轴，参照点在纵向上设置为Y轴，同时以每个页面组件在子区域的左上角位置作为计算点，将在计算点与参照点之间的X轴方向上所占据子区域的数量设为x，将在计算点与参照点之间的Y轴方向上所占据子区域的数量设为y。每个页面组件在屏幕上的不同位置上的子区域中，因此需要对每个组件具体的定位信息进行计算，以便于更加准确的控制页面组件。通过此方式可以准确地定位到每个页面组件在屏幕页面上的位置，从而得到定位信息。

在具体的实施例中，宽高信息通过以下公式计算得到：width＝1/m*s1，height＝1/n*s2，其中width为页面组件的宽，height为页面组件的高，s1为页面组件横向所占子区域的数量，s2为页面组件纵向所占子区域的数量。根据宽高信息可以确定经过宽高拖拽后的每个页面组件的大小。进行多次这样配置以后，构建出一个完整的屏幕页面。从而获取到屏幕页面整体的布局信息，进行存储在数据库系统或者本地。系统存储多个这样的一整套配置，每个配置都可以展示出一套屏幕布局。

在具体的实施例中，如图5所示，展示模块4具体包括：

功能化模块41，被配置为根据配置信息中的展示形式信息和数据源信息通过Vue.js的动态组件功能对页面组件进行实施例化，使页面组件具有具体的功能；以及

布局模块42，被配置为根据配置信息中的定位信息和宽高信息通过Css绝对定位对页面组件进行布局。

在此过程中，通过Vue.js的动态组件功能进行声明组件，采用Css绝对定位进行布局。Vue.js的动态组件功能可以用泛型定义组件，组件类型后期进行动态定义，并非前期固定。Css绝对定位可以生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left"、"top"、"right"以及"bottom"属性进行规定。因此可以根据不同的页面组件及数据源进行不同形式的展示，从而还原成一个完整的屏幕页面。

在具体的实施例中，当存在固件升级的要求时，在联网情况下，可以通过Node.js的http模块传输新的页面组件所对应的文件，并通过Node.js的File模块对原来的页面组件所对应的文件进行替换，再通过Node.js的open模块进行重新启动屏幕界面以完成页面组件的升级。从而实现页面组件的固件在不停机的状态下进行升级，解决升级改造困难的问题。

在具体的实施例中，在组件的配置界面，可以配置远程的数据源，也可以是本地的数据源。当数据源为远程数据源时，页面组件建立模块2中还包括：对接远程平台的数据将其转换成统一格式，并为页面组件提供接口。远程数据平台系统是大屏系统配套的后端服务，功能是对接各个原平台的数据，并为大屏系统提供统一格式的数据。当数据源为本地数据源时，页面组件建立模块2还包括：采用html的textarea在线编辑以及json文件的fileinput上传实现本地数据源的编辑，并通过axios技术读取本地json文件以实现页面组件与本地数据源的对接。因此页面组件的配置可以配置远程的数据源，也可以配置本地的数据源，解决不可配置或配置困难的问题。

在具体的实施例中，客服人员根据用户的需求，可以远程替用户设计好屏幕配置方案。联网情况下，通过Node.js的http模块，将最新的配置信息以JSON的形式传输给微型主机，微型主机接收到信息后，存储到数据库，并在界面的方案列表展示。选择后，对屏幕界面进行展示，从而实现远程协助的功能。

本申请的实施例公开了一种屏幕页面配置和展示方法和装置，通过将屏幕页面分成m*n个子区域，其中每个子区域的宽度为1/m、高度为1/n；建立多个独立的页面组件，获取每个页面组件的展示形式信息和数据源信息；通过html拖放API技术将页面组件拖曳到各个子区域中，获取每个页面组件的定位信息，对页面组件进行宽高的拖曳，获得每个页面组件的宽高信息，将定位信息、宽高信息、展示形式信息和数据源信息存储为屏幕页面的配置信息；以及根据配置信息将多个页面组件在屏幕页面上进行配置和展示。最终实现大屏系统软硬件一体化，实现固件远程不停机的状态下升级，页面组件可配置化，解决安装部署繁琐、研发周期长等问题。

下面参考图6，其示出了适于用来实现本申请实施例的电子设备(例如图1所示的服务器或终端设备)的计算机装置600的结构示意图。图6示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，计算机装置600包括中央处理单元(CPU)601和图形处理器(GPU)602，其可以根据存储在只读存储器(ROM)603中的程序或者从存储部分609加载到随机访问存储器(RAM)604中的程序而执行各种适当的动作和处理。在RAM 604中，还存储有装置600操作所需的各种程序和数据。CPU 601、GPU602、ROM 603以及RAM604通过总线605彼此相连。输入/输出(I/O)接口606也连接至总线605。

以下部件连接至I/O接口606：包括键盘、鼠标等的输入部分607；包括诸如、液晶显示器(LCD)等以及扬声器等的输出部分608；包括硬盘等的存储部分609；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分610。通信部分610经由诸如因特网的网络执行通信处理。驱动器611也可以根据需要连接至I/O接口606。可拆卸介质612，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器611上，以便于从其上读出的计算机程序根据需要被安装入存储部分609。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分610从网络上被下载和安装，和/或从可拆卸介质612被安装。在该计算机程序被中央处理单元(CPU)601和图形处理器(GPU)602执行时，执行本申请的方法中限定的上述功能。

需要说明的是，本申请所述的计算机可读介质可以是计算机可读信号介质或者计算机可读介质或者是上述两者的任意组合。计算机可读介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的装置、装置或器件，或者任意以上的组合。计算机可读介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行装置、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行装置、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本申请的操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本申请各种实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的装置来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；将屏幕页面分成m*n个子区域，其中每个子区域的宽度为1/m、高度为1/n；建立多个独立的页面组件，获取每个页面组件的展示形式信息和数据源信息；通过html拖放API技术将页面组件拖曳到各个子区域中，获取每个页面组件的定位信息，对页面组件进行宽高的拖曳，获得每个页面组件的宽高信息，将定位信息、宽高信息、展示形式信息和数据源信息存储为屏幕页面的配置信息；以及根据配置信息将多个页面组件在屏幕页面上进行配置和展示。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (7)

1.一种屏幕页面配置和展示方法，其特征在于，包括以下步骤：

S1：将屏幕页面分成m*n个子区域，其中每个所述子区域的宽度为1/m、高度为1/n；

S2：建立多个独立的页面组件，获取每个所述页面组件的展示形式信息和数据源信息；

S3：通过html拖放API技术将所述页面组件拖曳到各个所述子区域中，获取每个所述页面组件的定位信息，对所述页面组件进行宽高的拖曳，获得每个所述页面组件的宽高信息，将所述定位信息、所述宽高信息、所述展示形式信息和所述数据源信息存储为所述屏幕页面的配置信息；以及

S4：根据所述配置信息将多个所述页面组件在所述屏幕页面上进行配置和展示；

其中，所述定位信息通过以下公式进行计算：top＝1/n*y，left＝1/m*x，其中所述定位信息包括top和left，y为所述页面组件在所述子区域的左上角位置与所述屏幕页面的左上角位置在纵向上所占子区域的数量，x为所述页面组件在所述子区域的左上角位置与所述屏幕页面的左上角位置在横向上所占子区域的数量；

所述宽高信息通过以下公式计算得到：width＝1/m*s1，height＝1/n*s2，其中width为所述页面组件的宽，height为所述页面组件的高，s1为所述页面组件横向所占所述子区域的数量，s2为所述页面组件纵向所占所述子区域的数量；

所述步骤S4具体包括：

S41：根据所述配置信息中的所述展示形式信息和所述数据源信息通过Vue.js的动态组件功能对所述页面组件进行实例化，使所述页面组件具有具体的功能；以及

S42：根据所述配置信息中的所述定位信息和所述宽高信息通过Css绝对定位对所述页面组件进行布局；

所述步骤S4还包括：通过Node.js的http模块传输新的所述页面组件所对应的文件，并通过Node.js的File模块对原来的所述页面组件所对应的文件进行替换，再通过Node.js的open模块进行重新启动屏幕界面以完成所述页面组件的升级。

2.根据权利要求1所述的屏幕页面配置和展示方法，其特征在于，所述页面组件通过Vue.js进行开发，所述页面组件所展示的内容由不同的数据源所决定。

3.根据权利要求1所述的屏幕页面配置和展示方法，其特征在于，所述展示形式信息包括echarts、openlayers地图、纯文本、视频、three.js三维的数据展示形式。

4.根据权利要求1所述的屏幕页面配置和展示方法，其特征在于，当所述数据源为远程数据源时，所述步骤S2中还包括：对接远程平台的数据将其转换成统一格式，并为所述页面组件提供接口；当所述数据源为本地数据源时，所述步骤S2还包括：采用html的textarea在线编辑以及json文件的file input上传实现所述本地数据源的编辑，并通过axios技术读取本地json文件以实现所述页面组件与所述本地数据源的对接。

5.一种屏幕页面配置和展示装置，其特征在于，包括：

切分模块，被配置为将屏幕页面分成m*n个子区域，其中每个所述子区域的宽度为1/m、高度为1/n；

页面组件建立模块，被配置为建立多个独立的页面组件，获取每个所述页面组件的展示形式信息和数据源信息；

配置模块，被配置为通过html拖放API技术将所述页面组件拖曳到所述子区域中，获取每个所述页面组件的定位信息，并进行宽高的拖曳获得每个所述页面组件的宽高信息，将所述定位信息、所述宽高信息、所述展示形式信息和所述数据源信息存储为所述屏幕页面的配置信息；其中，所述定位信息通过以下公式进行计算：top＝1/n*y，left＝1/m*x，其中所述定位信息包括top和left，y为所述页面组件在所述子区域的左上角位置与所述屏幕页面的左上角位置在纵向上所占子区域的数量，x为所述页面组件在所述子区域的左上角位置与所述屏幕页面的左上角位置在横向上所占子区域的数量；所述宽高信息通过以下公式计算得到：width＝1/m*s1，height＝1/n*s2，其中width为所述页面组件的宽，height为所述页面组件的高，s1为所述页面组件横向所占所述子区域的数量，s2为所述页面组件纵向所占所述子区域的数量；以及

展示模块，被配置为根据所述配置信息将多个所述页面组件在所述屏幕页面上进行展示，具体包括：

功能化模块，被配置为根据所述配置信息中的所述展示形式信息和所述数据源信息通过Vue.js的动态组件功能对所述页面组件进行实例化，使所述页面组件具有具体的功能；

布局模块，被配置为根据所述配置信息中的所述定位信息和所述宽高信息通过Css绝对定位对所述页面组件进行布局；

所述展示模块还被配置为通过Node.js的http模块传输新的所述页面组件所对应的文件，并通过Node.js的File模块对原来的所述页面组件所对应的文件进行替换，再通过Node.js的open模块进行重新启动屏幕界面以完成所述页面组件的升级。

6.一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-4中任一所述的方法。

7.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-4中任一所述的方法。

Images