CN114637506A - 基于人工智能的网格布局方法、装置、设备及存储介质 - Google Patents

Abstract

本申请提出一种基于人工智能的网格布局方法、装置、电子设备及存储介质，基于人工智能的网格布局方法包括：依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。本申请通过将单层层级改造为可嵌套的层级，实现界面元素自由的被拖入到容器组件内或被拖出容器组件外，同时可根据嵌套容器内的子元素宽度对被拖入拖出的图表元素进行等比例缩放，从而提高用户对可视化报表的开发效率。

Description

基于人工智能的网格布局方法、装置、设备及存储介质

技术领域

本申请涉及人工智能技术领域，尤其涉及一种基于人工智能的网格布局方法、装置、电子设备及存储介质。

背景技术

网格布局是目前网页布局常采用的一种布局方式，通过网格布局将网页按照行列进行分割以将网页分割成多个独立区域，从而使得网页布局规整、排布美观。

现有技术中，可视化报表均需要网格布局进行构建，然而常见的可视化报表开发系统无法支持用户自由的将图表元素拖入拖出容器组件，如市面上出现的一些报表开发页面，当用户将界面元素拖入到容器内时，便无法通过拖出操作将界面元素放置在容器外，只能选择删除该界面元素并重新配置，从而对用户带来极大的不便。

发明内容

鉴于以上内容，有必要提出一种基于人工智能的网格布局方法及相关设备，以解决如何支持用户自由的将界面元素拖入拖出容器组件这一技术问题，其中，相关设备包括基于人工智能的网格布局装置、电子设备及存储介质。

本申请提供一种基于人工智能的网格布局方法，所述方法包括：

依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；

依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；

基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；

基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。

如此，通过将单层层级改造为可嵌套的层级，实现界面元素自由的被拖入到容器组件内或被拖出容器组件外，同时可根据容器内的子元素宽度对被拖拽的图表元素进行等比例缩放，从而提高用户对可视化报表的开发效率。

在一些实施例中，所述依据网格布局系统读取界面元素的属性值以获取单层布局元素包括：

依据网格布局系统和预设属性值绘制根布局；

依据预设属性值配置多个界面元素的属性以构建配置对象数组；

依据网格布局系统遍历所述配置对象数组以生成对象布局元素；

绘制所述对象布局元素至所述根布局以获取单层布局元素。

如此，可依据网格布局系统快速获取初始的根布局页面，同时在根布局内生成多个同层级且无嵌套关系的单层布局元素，无需人为操作进行页面布局，从而提高页面布局的效率。

在一些实施例中，所述嵌套容器元素包括：

parentId，用于表示所述单层布局元素的父元素ID，若所述单层布局元素没有父元素，则对应的parentId为空；

isDragzone，用于表示所述单层布局元素是否可嵌套，若isDragzone为假，则表示所述单层布局元素不可嵌套，若isDragzone为真，则表示所述单层布局元素为嵌套容器元素；

children，用于表示所述单层布局元素的所有子元素，为一个对象数组。

如此，通过对扩展的三个属性的设置可以生成嵌套容器元素，从而能够支持页面布局具有嵌套的层级结构，为后续过程实现用户将界面元素拖入拖出容器组件提供了可能。

在一些实施例中，所述基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图包括：

依据预设脚本为所述嵌套容器元素对应生成的HTML元素添加class属性以记录所述嵌套容器元素的唯一标识；

拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性；

依据所述目标容器元素的class属性将被拖拽的界面元素添加至所述目标容器元素的children对象数组中以获取所述可嵌套布局视图。

如此，可通过class属性确定所述目标容器元素的唯一标识，并由此实现界面元素自由的被拖入到容器组件内或被拖出容器组件外，有效提高用户对页面进行布局的效率。

在一些实施例中，所述拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性包括：

点击鼠标拖拽所述界面元素时设置被拖拽元素的CSS属性为point-events:none，以使得当前被拖拽元素不会成为鼠标事件的目标对象；

松开鼠标时触发鼠标事件以通过回调函数获取所述目标容器元素的class属性。

如此，可以避免当前被拖拽的元素称为鼠标事件的目标对象，从而通过回调函数顺利获取被拖拽元素对应的目标容器元素的class属性。

在一些实施例中，所述基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局之前还包括：

判断所述可嵌套布局视图对应的操作类型，所述操作类型包括单层操作类型和嵌套操作类型；

若所述操作类型为单层操作类型，则依据目标容器元素的布局信息直接缩放所述界面元素；

若所述操作类型为嵌套操作类型，则依据目标容器元素的布局信息对所述界面元素进行延时调用。

如此，通过判断所述可嵌套布局视图对应的操作类型，可以根据不同的操作类型对所述界面元素进行不同形式的等比例缩放，提高对所述界面元素进行等比例缩放的效率。

在一些实施例中，所述若所述操作类型为嵌套操作类型，则依据目标容器元素的布局信息对所述界面元素进行延时调用包括：

统计所述目标容器元素中所述界面元素的层级以获取层级排序结果；

依据所述层级排序结果逐层设置延时调用时间；

依据所述延时调用时间和所述目标容器元素的布局信息等比例缩放对应层级的界面元素以获取完整网格布局。

如此，通过逐层级的延时调用，可以有效防止所述目标容器元素的布局信息在调整变化时对所述界面元素产生的等比例缩放错误，提高对所述界面元素进行等比例缩放的准确性。

本申请实施例还提供一种基于人工智能的网格布局装置，所述装置包括：

读取单元，用于依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；

扩展单元，用于依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；

拖拽单元，用于基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；

获取单元，用于基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。

本申请实施例还提供一种电子设备，所述电子设备包括：

存储器，存储至少一个指令；

处理器，执行所述存储器中存储的指令以实现所述的基于人工智能的网格布局方法。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个指令，所述至少一个指令被电子设备中的处理器执行以实现所述的基于人工智能的网格布局方法。

附图说明

图1是本申请所涉及的基于人工智能的网格布局方法的较佳实施例的流程图。

图2是本申请所涉及的依据网格布局系统读取界面元素的属性值以获取单层布局元素的较佳实施例的流程图。

图3是本申请所涉及的基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图的较佳实施例的流程图。

图4是本申请所涉及的基于人工智能的网格布局装置的较佳实施例的功能模块图。

图5是本申请所涉及的基于人工智能的网格布局方法的较佳实施例的电子设备的结构示意图。

图6是本申请所涉及的根布局绘制图。

图7是本申请所涉及的示例1的配置与布局关系图。

图8是本申请所涉及的i1的布局绘制图。

图9是本申请所涉及的i2的布局绘制图。

图10是本申请所涉及的示例2的有嵌套层级的配置与布局关系图。

图11是本申请所涉及的拖拽操作的场景示意图。

图12是本申请所涉及的基于所述嵌套容器元素对所述界面元素进行拖拽的示意图。

图13是本申请所涉及的延时调用的示意图。

具体实施方式

为了能够更清楚地理解本申请的目的、特征和优点，下面结合附图和具体实施例对本申请进行详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互结合。在下面的描述中阐述了很多具体细节以便于充分理解本申请，所述描述的实施例仅是本申请一部分实施例，而不是全部的实施例。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本申请的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中在本申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请。本文所使用的术语“和/或”包括一个或多个相关的所列项目的任意的和所有的组合。

本申请实施例提供一种基于人工智能的网格布局方法，可应用于一个或者多个电子设备中，电子设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、可编程门阵列(Field－Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

电子设备可以是任何一种可与客户进行人机交互的电子产品，例如，个人计算机、平板电脑、智能手机、个人数字助理(Personal Digital Assistant，PDA)、游戏机、交互式网络电视(Internet Protocol Television，IPTV)、智能式穿戴式设备等。

电子设备还可以包括网络设备和/或客户设备。其中，所述网络设备包括，但不限于单个网络服务器、多个网络服务器组成的服务器组或基于云计算(Cloud Computing)的由大量主机或网络服务器构成的云。

电子设备所处的网络包括但不限于互联网、广域网、城域网、局域网、虚拟专用网络(Virtual Private Network，VPN)等。

如图1所示是本申请基于人工智能的网格布局方法的较佳实施例的流程图。根据不同的需求，该流程图中步骤的顺序可以改变，某些步骤可以省略。

S10，依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面。

该可选的实施例中，所述界面元素是指可满足交互需求的软件或系统界面所包含的满足用户交互要求的一系列元素，简称元素。

该可选的实施例中，由于界面元素之间存在包含和被包含的关系，因此本方案中将能够被其他界面元素包含的界面元素称为子元素；将能够包含其他界面元素的界面元素称为父元素；其中，一个父元素可包含多个子元素，每个子元素只有一个父元素，父元素和子元素为相对概念。

该可选的实施例中，容器指的是一个进程集合，它将系统的其他资源隔离开来，具有自己独立的资源视图，同时容器之间也可以相互嵌套，能够包含其他容器的容器被称为父容器，被其他容器所包含的容器被称为子容器。

将网格布局系统形成的第一层布局称为根布局，根布局同时也是根容器。

在一个可选的实施例中，所述网格布局系统可使用开源的网格布局系统react-grid-layout(简称RGL)，它可以通过设置布局列数、每份行高、所有界面元素的布局配置等，即可生成一个简单的页面布局，并可以对界面元素进行拖动、缩放、坐标重计算等，其中布局的坐标原点(0,0)位于左上角，向右水平轴为x轴，向下纵轴为y轴。

示例1，现由react-grid-layout生成一个拖拽布局，设置宽度1200px，设置这个布局有12列(cols为12，即水平划分为12等份，每个相邻x坐标点水平间隔100px)，设置每份行高30px(rowHeight为30px，即每个相邻y坐标点纵向间隔30px)，不考虑元素的间隔，不允许元素重叠，那么若有一个元素A(配置对象为{x:0,y:0,w:3,h:2}，其属性为RGL约定的布局配置属性)起始x坐标为0，起始y坐标为0，宽度份数w为3，高度份数h为2，则元素A在布局中即为3*(1200px/12)＝300px宽，2*30px＝60px高，位于布局的左上角。若这个拖拽区域宽度变为1600px，那么元素A的宽度会随之增大为3*(1600px/12)＝400px(高度、位置不变)。假设现有另一个元素B(配置对象为{x:3,y:0,w:3,h:2})与A同行相邻排列，将B拖动到坐标(0,0)的位置，此时会与A产生重叠，那么RGL会对A的坐标点进行重新计算，将它垂直下移到B的正下方，最终A的配置变为{x:0,y:2,w:3,h:2}，B的配置变为{x:0,y:0,w:3,h:2}。也就是说，所有在布局内的元素，都是同层级水平平铺、纵向向上凑紧，无实际的嵌套关系。

上述过程已解释说明了界面元素配置中属性x、y、w、h的含义，本方案中将每个元素的基础配置对象命名为BasicLayoutItem，为了能够清晰地标识每个界面元素，RGL还约定了一个属性i，它可以是任意的一段字符串或数字，只要能保证其唯一性即可，本方案中可使用UUID算法生成所述i，其中UUID是通用唯一识别码(Universally UniqueIdentifier)的缩写，是一种软件建构的标准，亦为开放软件基金会组织在分布式计算环境领域的一部分，其目的是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。

请参见图2，在一个可选的实施例中，依据网格布局系统读取界面元素的属性值以获取单层布局元素包括：

S101，依据网格布局系统和预设属性值绘制根布局。

该可选的实施例中，为了举例方便，本文内所有创建的HTML界面元素都将使用<div>标签。其中，HTML的全称为超文本标记语言，是一种标记语言，它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体；<div>是HTML的其中一种标签，在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

该可选的实施例中，若已知每行高度为10px，将布局元素的CSS属性position(元素在网页中的定位方式)设置为相对定位(position:relative)，其内部的子元素position设置为绝对定位(position:absolute)，那么子元素通过设置top(元素上边界与其嵌套容器元素上边界之间的偏移量)、left(元素左边界与其嵌套容器元素左边界之间的偏移量)的偏移值，再设置width(元素宽度)、height(元素高度)的值，即可使子元素定位在正确的位置、有正确的规格。所述相对定位表示元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移，所述绝对定位表示元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位。

如图6所示，该可选的实施例中，首先绘制根布局。例如示例1根布局宽度为1200px，定位方式为相对定位，暂且让其高度为100(根据需求而定，此处仅作示例)，即设置一个div元素，其style属性(应用到这个元素的CSS样式声明)值为“width:1200px”(即<divstyle＝"position:relative；width:1200px；height:1000px；"></div>)。

S102，依据预设属性值配置多个界面元素的属性以构建配置对象数组。

该可选的实施例中，可将多个依据预设属性值配置的界面元素组成一个配置对象数组，将这个数组传给配置好的RGL即可得到一个简单的布局，当前所有界面元素都处于唯一的第一层级。例如，示例2，现在配置两个界面元素“i1{"i":"i1","x":0,"y":0,"w":6,"h":2}、“i2”{"i":"i2","x":6,"y":0,"w":6,"h":4}，将它们放在数组中并传入RGL，通过设置好的配置(列数cols为12，每份行高rowHeight为10px)，那么可以得到对应的布局，如图7所示。

S103，依据网格布局系统遍历所述配置对象数组以生成对象布局元素。

如图8所示，该可选的实施例中，遍历所述配置对象数组，例如取出示例2第一个配置对象{"i":"i1","x":0,"y":0,"w":6,"h":2}，RGL计算出“i1”的最终布局信息为top为0px，left为0px，width为600px，height为20px，则网页上生成了一个宽600px，高20px，紧贴布局左边界线和上边界的一个div元素(即<div style＝"position:absolute；top:0；left:0；width:600px；height:20px；"></div>)。

S104，绘制所述对象布局元素至所述根布局以获取单层布局元素。

该可选的实施例中，依据网格布局系统将得到的对象布局元素在所述根布局中进行绘制，直到将所有的对象布局元素绘制完毕。示例性的，如示例1处理下一个配置对象“i2”{"i":"i2","x":6,"y":0,"w":6,"h":4}，同理最终网页上生成了一个宽600px，高40px，位于布局左边界右方600px，紧贴布局上边界的第二个div元素(即<div style＝"position:absolute；top:0；left:600px；width:600px；height:40px；"></div>)，如图9所示。

该可选的实施例中，上述过程的代码结构如下(伪代码，仅展示简单的结构)：

<根布局元素>

<i1元素/>

<i2元素/>

</根布局元素>

该可选的实施例中，将最终遍历所述配置对象数组并进行绘制得到的各布局元素作为所述单层布局元素，所述单层布局元素为最初绘制得到的不包括子元素的界面元素。

如此，可依据网格布局系统快速获取初始的根布局页面，同时在根布局内生成多个同层级且无嵌套关系的单层布局元素，无需人为操作进行页面布局，从而提高页面布局的效率。

S11，依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素。

该可选的实施例中，依据预设脚本将单层布局元素的BasicLayoutItem进一步扩展为嵌套容器元素，命名为LayoutItem，所述嵌套容器元素LayoutItem新增了如下三个属性，包括：

parentId，用于表示所述单层布局元素的父元素ID，以i表示，若所述单层布局元素没有父元素，则对应的parentId为空，若所述单层布局元素有父元素，parentId应取其父元素的ID作为唯一标识；

isDragzone，用于表示所述单层布局元素是否可嵌套，若isDragzone为假，则表示所述单层布局元素不可嵌套，若isDragzone为真，则表示所述单层布局元素为嵌套容器元素；

children，用于表示所述单层布局元素的所有子元素，为LayoutItem对象数组。

该可选的实施例中，由于新增的三个属性是自定义的，RGL不会对其进行处理，因此可通过预设的脚本对新增的三个属性进行判断，若isDragzone为真时，说明该界面元素是一个可嵌套其他子元素的容器，需要对这种类型的元素的children配置进行递归调用RGL来生成其子布局，其中，isDragzone的属性值可预设配置。

该可选的实施例中，在上面的示例2的基础上，将“i2”元素改造成一个嵌套容器元素以作为示例3，具体为对“i2”添加isDragzone属性为true，它含有两个子元素”i2-1”{“i”:“i2-1”,“x”:0,“y”:0,“w”:6,“h”:2,“parentId”:“i2”}、”i2-2”{“i”:“i2-2”,“x”:6,“y”:0,“w”:6,“h”:4,“parentId”:“i2”}，将这两个子元素放在一个数组中赋值给children属性，那么第一层配置“i1”、“i2”会生成第一层布局，因为“i2”的isDragzone属性为true且children有值，所以递归进行第二层调用RGL，并遍历children的值对应生成第二层布局，如图10所示。

该可选的实施例中，最终代码结构如下(伪代码，仅展示简单的结构)：

<根布局元素>

<i1元素/>

<i2布局元素>

<i2-1元素/>

<i2-2元素/>

</i2布局元素>

</根布局元素>

至此，扩展的LayoutItem数据结构已经支持并可以体现嵌套的层级结构，本方案中将能够进行嵌套操作的元素作为所述嵌套容器元素。

如此，通过对扩展的三个属性的设置可以生成嵌套容器元素，从而能够支持页面布局具有嵌套的层级结构，为后续过程实现用户将界面元素拖入拖出容器组件提供了可能。

S12，基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图。

如图11所示，该可选的实施例中，对所述界面元素进行拖拽时共有三种场景，分别为：垂直拖入嵌套容器元素；拖出到根容器组件(即第一层布局)；拖入相邻的嵌套容器元素或者拖入不同层级的嵌套容器元素。

如图3所示，在一个可选的实施例中，基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图包括：

S121，依据预设脚本为所述嵌套容器元素对应生成的HTML元素添加class属性以记录所述嵌套容器元素的唯一标识。

该可选的实施例中，依据预设脚本为所述嵌套容器元素生成对应的HTML元素，即以HTML语言布局页面中生成所述嵌套容器元素对应的布局元素，并将此布局元素作为所述嵌套容器元素对应的HTML元素。

该可选的实施例中，全局属性class的值是一个以空格分隔的元素的类名(classes)列表，它允许CSS和Javascript通过类选择器(class selectors)或DOM方法(document.getElementsByClassName)来选择和访问特定的元素。

示例性的，设class＝"dragzone-i2"，(“dragzone-”加唯一标识i的值)，那么在后续需要查找可嵌套的容器元素时，就可以通过class属性去读取到当前元素是否含有“dragzone-”+i，以此来确定唯一标识i的值。

S122，拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性。

该可选的实施例中，将所述界面元素拖拽至嵌套容器元素中，并将需要包含所述界面元素的嵌套容器元素作为所述目标容器元素。

该可选的实施例中，在鼠标左键点击拖拽时，设置被拖拽元素的CSS(样式表语言，用于设置网页的样式及布局)属性point-events:none，这个属性设置使得当前被拖拽元素不会成为鼠标事件的目标对象，而是获取被拖拽元素对应的目标容器元素的class属性。

该可选的实施例中，当松开鼠标时可触发文档对象模型(DOM)的原生mouseup事件(鼠标左键松开时触发的监听事件)，这个事件会通过回调函数传递当前放置目标容器元素的event对象(包含该元素的自身属性及可调用的原生方法)，从中获取到属性event.target.className(即此前为HTML元素设置的class属性)。

该可选的实施例中，DOM将web页面与脚本或编程语言连接起来，DOM用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)，DOM的方法(methods)可以用特定方式操作这个树，用这些方法改变文档的结构、样式或者内容，节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行，而本方案中所使用的鼠标事件是Web开发中最常用的事件类型。

S123，依据所述目标容器元素的class属性将被拖拽的界面元素添加至所述目标容器元素的children对象数组中以获取所述可嵌套布局视图。

该可选的实施例中，若获取到的class属性值含有“dragzone-”(如“dragzone-i2”)，则截取掉“dragzone-”剩余“i2”，此即为该目标容器元素的唯一标识i，然后将被拖拽元素的布局信息添加到目标容器元素的children数组中，并删除在根容器中该拖拽元素的布局信息，如图12所示。

上述过程的代码结构由：

<根布局元素>

<i1元素/>

<i2布局元素>

</i2布局元素>

<i3元素/>

</根布局元素>

转为：

<根布局元素>

<i1元素/>

<i2布局元素>

<i3元素/>

</i2布局元素>

</根布局元素>

该可选的实施例中，图12演示了场景为垂直拖入嵌套容器元素时的情况，即将i3拖入到i2中，拖出到根容器组件的场景和拖入相邻的嵌套容器元素或者拖入不同层级的嵌套容器元素的场景同场景为垂直拖入嵌套容器元素时的过程一致。其中，拖出到根容器组件的场景中由于根容器没有父元素，因此设置根容器的元素属性class＝"root-dragzone"，当目标容器元素的event.target.className的值含有“root-dragzone”时，即说明当前的目标容器元素是根容器元素，则只需要将这个被拖拽元素的布局从原嵌套容器元素中移除，并添加到根容器的布局中即可。

如此，可通过class属性确定所述目标容器元素的唯一标识，并由此实现界面元素自由的被拖入到容器组件内或被拖出容器组件外，有效提高用户对页面进行布局的效率。

S13，基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。

该可选的实施例中，以每个布局元素的宽为例，由于RGL是一个网格布局系统，每个布局元素的宽是占这个布局宽度的份数，所以当布局宽度变化时每个布局元素的宽度一定也会随之变化。

该可选的实施例中，可根据拖拽时对应的场景判断所述可嵌套布局视图对应的操作类型，所述操作类型包括单层操作类型和嵌套操作类型；若所述操作类型为单层操作类型，则依据目标容器元素的布局信息直接缩放所述界面元素；若所述操作类型为嵌套操作类型，则依据目标容器元素的布局信息对所述界面元素进行延时调用。

该可选的实施例中，依据所述目标容器元素的布局信息对所述界面元素进行延时调用包括：统计所述目标容器元素中所述界面元素的层级以获取层级排序结果；依据所述层级排序结果逐层设置延时调用时间；依据所述延时调用时间和所述目标容器元素的布局信息等比例缩放对应层级的界面元素以获取完整网格布局。

该可选的实施例中，当拖拽时对应的场景为垂直拖入嵌套容器元素时，由于目标容器的宽度在此时是固定的，故直接根据布局信息中w占比的份数即可直接计算出新的宽度为多少(RGL已支持)。

该可选的实施例中，当拖拽时对应的场景为拖出到根容器组件的场景和拖入相邻的嵌套容器元素或者拖入不同层级的嵌套容器元素时，子元素存在无法立马获取到父元素的最终宽度直至父元素宽度调整完后的情况(例如拖动着浏览器进行快速且频繁的缩放，突然停下的瞬间，父元素和子元素的调整被同时触发，父元素宽度可能还在从600px调整为700px的过程中，那么子元素在此时获取到父元素就可能不是我们期望的最终值700px，自然而然就无法得到准确的子元素宽度)。

该可选的实施例中，可以采取让子元素的宽度调整根据其嵌套的层数进行逐层递增的延时调用(可使用window.setTimeout设置定时器，假设以20ms为一层时间间隔，到期后触发传入的回调)。其中根布局下不设置延时定时器，子元素宽度调整可立即执行，第一层子布局元素的层级为1，设置一个定时器20ms后调整其内部的子元素，第二层子布局元素的层级为2，设置一个定时器40ms后调整其内部的子元素，以此类推，为LayoutItem再扩展一个属性layer，记录当前元素所在的层级，那么定时器的延时时间计算公式即为layer*20ms。

示例性的，以示例2为基础，根布局宽度原是1200px，现拉宽至1600px，“i1”和“i2”都是第一层布局下的元素，其layer值为1，但由于是根布局下的子元素，所以立即重新计算其宽度，结果为6*(1600px/12)＝800px，第一层的子元素宽度调整完成(即style＝"width:800px；…")；“i2-1”和“i2-2”在“i2”元素的布局中，“i2”的layer值为1，宽度已变为800px，故20ms后“i2-1”和“i2-2”同时重新计算宽度，结果为6*(800px/12)＝400px，第二层的子元素也调整完成(即style＝"width:400px；…")，如图13所示。

该可选的实施例中，界面元素的其他布局信息的缩放过程同宽度的缩放过程一致，最终，在react-grid-layout的基础上改造并实现了一个具有层级嵌套关系，并支持元素自由拖入拖出的容器。

如此，通过逐层级的延时调用，可以有效防止所述目标容器元素的布局信息在调整变化时对所述界面元素产生的等比例缩放错误，提高对所述界面元素进行等比例缩放的准确性。

请参见图4，图4是本申请基于人工智能的网格布局装置的较佳实施例的功能模块图。基于人工智能的网格布局装置11包括读取单元110、扩展单元111、拖拽单元112、获取单元113。本申请所称的模块/单元是指一种能够被处理器13所执行，并且能够完成固定功能的一系列计算机可读指令段，其存储在存储器12中。在本实施例中，关于各模块/单元的功能将在后续的实施例中详述。

在一个可选的实施例中，读取单元110用于依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面。

在一个可选的实施例中，所述网格布局系统可使用开源的网格布局系统react-grid-layout(简称RGL)，它可以通过设置布局列数、每份行高、所有界面元素的布局配置等，即可生成一个简单的页面布局，并可以对界面元素进行拖动、缩放、坐标重计算等，其中布局的坐标原点(0,0)位于左上角，向右水平轴为x轴，向下纵轴为y轴。

示例1，现由react-grid-layout生成一个拖拽布局，设置宽度1200px，设置这个布局有12列(cols为12，即水平划分为12等份，每个相邻x坐标点水平间隔100px)，设置每份行高30px(rowHeight为30px，即每个相邻y坐标点纵向间隔30px)，不考虑元素的间隔，不允许元素重叠，那么若有一个元素A(配置对象为{x:0,y:0,w:3,h:2}，其属性为RGL约定的布局配置属性)起始x坐标为0，起始y坐标为0，宽度份数w为3，高度份数h为2，则元素A在布局中即为3*(1200px/12)＝300px宽，2*30px＝60px高，位于布局的左上角。若这个拖拽区域宽度变为1600px，那么元素A的宽度会随之增大为3*(1600px/12)＝400px(高度、位置不变)。假设现有另一个元素B(配置对象为{x:3,y:0,w:3,h:2})与A同行相邻排列，将B拖动到坐标(0,0)的位置，此时会与A产生重叠，那么RGL会对A的坐标点进行重新计算，将它垂直下移到B的正下方，最终A的配置变为{x:0,y:2,w:3,h:2}，B的配置变为{x:0,y:0,w:3,h:2}。也就是说，所有在布局内的元素，都是同层级水平平铺、纵向向上凑紧，无实际的嵌套关系。

上述过程已解释说明了界面元素配置中属性x、y、w、h的含义，本方案中将每个元素的基础配置对象命名为BasicLayoutItem，为了能够清晰地标识每个界面元素，RGL还约定了一个属性i，它可以是任意的一段字符串或数字，只要能保证其唯一性即可，本方案中可使用UUID算法生成所述i，其中UUID是通用唯一识别码(Universally UniqueIdentifier)的缩写，是一种软件建构的标准，亦为开放软件基金会组织在分布式计算环境领域的一部分，其目的是让分布式系统中的所有元素，都能有唯一的辨识信息，而不需要通过中央控制端来做辨识信息的指定。

在一个可选的实施例中，所述依据网格布局系统读取界面元素的属性值以获取单层布局元素包括：

依据网格布局系统和预设属性值绘制根布局；

依据预设属性值配置多个界面元素的属性以构建配置对象数组；

依据网格布局系统遍历所述配置对象数组以生成对象布局元素；

绘制所述对象布局元素至所述根布局以获取单层布局元素。

该可选的实施例中，为了举例方便，本文内所有创建的HTML界面元素都将使用<div>标签。其中，HTML的全称为超文本标记语言，是一种标记语言，它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体；<div>是HTML的其中一种标签，在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

该可选的实施例中，若已知每行高度为10px，将布局元素的CSS属性position(元素在网页中的定位方式)设置为相对定位(position:relative)，其内部的子元素position设置为绝对定位(position:absolute)，那么子元素通过设置top(元素上边界与其嵌套容器元素上边界之间的偏移量)、left(元素左边界与其嵌套容器元素左边界之间的偏移量)的偏移值，再设置width(元素宽度)、height(元素高度)的值，即可使子元素定位在正确的位置、有正确的规格。所述相对定位表示元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移，所述绝对定位表示元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位。

如图6所示，该可选的实施例中，首先绘制根布局。例如示例1根布局宽度为1200px，定位方式为相对定位，暂且让其高度为100(根据需求而定，此处仅作示例)，即设置一个div元素，其style属性(应用到这个元素的CSS样式声明)值为“width:1200px”(即<divstyle＝"position:relative；width:1200px；height:1000px；"></div>)。

该可选的实施例中，可将多个依据预设属性值配置的界面元素组成一个配置对象数组，将这个数组传给配置好的RGL即可得到一个简单的布局，当前所有界面元素都处于唯一的第一层级。例如，示例2，现在配置两个界面元素“i1{"i":"i1","x":0,"y":0,"w":6,"h":2}、“i2”{"i":"i2","x":6,"y":0,"w":6,"h":4}，将它们放在数组中并传入RGL，通过设置好的配置(列数cols为12，每份行高rowHeight为10px)，那么可以得到对应的布局，如图7所示。

如图8所示，该可选的实施例中，遍历所述配置对象数组，例如取出示例2第一个配置对象{"i":"i1","x":0,"y":0,"w":6,"h":2}，RGL计算出“i1”的最终布局信息为top为0px，left为0px，width为600px，height为20px，则网页上生成了一个宽600px，高20px，紧贴布局左边界线和上边界的一个div元素(即<div style＝"position:absolute；top:0；left:0；width:600px；height:20px；"></div>)。

该可选的实施例中，依据网格布局系统将得到的对象布局元素在所述根布局中进行绘制，直到将所有的对象布局元素绘制完毕。示例性的，如示例1处理下一个配置对象“i2”{"i":"i2","x":6,"y":0,"w":6,"h":4}，同理最终网页上生成了一个宽600px，高40px，位于布局左边界右方600px，紧贴布局上边界的第二个div元素(即<div style＝"position:absolute；top:0；left:600px；width:600px；height:40px；"></div>)，如图9所示。

该可选的实施例中，上述过程的代码结构如下(伪代码，仅展示简单的结构)：

<根布局元素>

<i1元素/>

<i2元素/>

</根布局元素>

该可选的实施例中，将最终遍历所述配置对象数组并进行绘制得到的各布局元素作为所述单层布局元素，所述单层布局元素为最初绘制得到的不包括子元素的界面元素。

在一个可选的实施例中，扩展单元111用于依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素。

该可选的实施例中，依据预设脚本将单层布局元素的BasicLayoutItem进一步扩展为嵌套容器元素，命名为LayoutItem，所述嵌套容器元素LayoutItem新增了如下三个属性，包括：

parentId，用于表示所述单层布局元素的父元素ID，以i表示，若所述单层布局元素没有父元素，则对应的parentId为空，若所述单层布局元素有父元素，parentId应取其父元素的ID作为唯一标识；

isDragzone，用于表示所述单层布局元素是否可嵌套，若isDragzone为假，则表示所述单层布局元素不可嵌套，若isDragzone为真，则表示所述单层布局元素为嵌套容器元素；

children，用于表示所述单层布局元素的所有子元素，为LayoutItem对象数组。

该可选的实施例中，由于新增的三个属性是自定义的，RGL不会对其进行处理，因此可通过预设的脚本对新增的三个属性进行判断，若isDragzone为真时，说明该界面元素是一个可嵌套其他子元素的容器，需要对这种类型的元素的children配置进行递归调用RGL来生成其子布局，其中，isDragzone的属性值可预设配置。

该可选的实施例中，在上面的示例2的基础上，将“i2”元素改造成一个嵌套容器元素以作为示例3，具体为对“i2”添加isDragzone属性为true，它含有两个子元素”i2-1”{“i”:“i2-1”,“x”:0,“y”:0,“w”:6,“h”:2,“parentId”:“i2”}、”i2-2”{“i”:“i2-2”,“x”:6,“y”:0,“w”:6,“h”:4,“parentId”:“i2”}，将这两个子元素放在一个数组中赋值给children属性，那么第一层配置“i1”、“i2”会生成第一层布局，因为“i2”的isDragzone属性为true且children有值，所以递归进行第二层调用RGL，并遍历children的值对应生成第二层布局，如图10所示。

该可选的实施例中，最终代码结构如下(伪代码，仅展示简单的结构)：

<根布局元素>

<i1元素/>

<i2布局元素>

<i2-1元素/>

<i2-2元素/>

</i2布局元素>

</根布局元素>

至此，扩展的LayoutItem数据结构已经支持并可以体现嵌套的层级结构，本方案中将能够进行嵌套操作的元素作为所述嵌套容器元素。

在一个可选的实施例中，生成单元112用于基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图。

在一个可选的实施例中，所述基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图包括：

依据预设脚本为所述嵌套容器元素对应生成的HTML元素添加class属性以记录所述嵌套容器元素的唯一标识；

拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性；

依据所述目标容器元素的class属性将被拖拽的界面元素添加至所述目标容器元素的children对象数组中以获取所述可嵌套布局视图。

如图11所示，该可选的实施例中，对所述界面元素进行拖拽时共有三种场景，分别为：垂直拖入嵌套容器元素；拖出到根容器组件(即第一层布局)；拖入相邻的嵌套容器元素或者拖入不同层级的嵌套容器元素。

该可选的实施例中，依据预设脚本为所述嵌套容器元素生成对应的HTML元素，即以HTML语言布局页面中生成所述嵌套容器元素对应的布局元素，并将此布局元素作为所述嵌套容器元素对应的HTML元素。

该可选的实施例中，全局属性class的值是一个以空格分隔的元素的类名(classes)列表，它允许CSS和Javascript通过类选择器(class selectors)或DOM方法(document.getElementsByClassName)来选择和访问特定的元素。

示例性的，设class＝"dragzone-i2"，(“dragzone-”加唯一标识i的值)，那么在后续需要查找可嵌套的容器元素时，就可以通过class属性去读取到当前元素是否含有“dragzone-”+i，以此来确定唯一标识i的值。

该可选的实施例中，将所述界面元素拖拽至嵌套容器元素中，并将需要包含所述界面元素的嵌套容器元素作为所述目标容器元素。

该可选的实施例中，在鼠标左键点击拖拽时，设置被拖拽元素的CSS(样式表语言，用于设置网页的样式及布局)属性point-events:none，这个属性设置使得当前被拖拽元素不会成为鼠标事件的目标对象，而是获取被拖拽元素对应的目标容器元素的class属性。

该可选的实施例中，当松开鼠标时可触发文档对象模型(DOM)的原生mouseup事件(鼠标左键松开时触发的监听事件)，这个事件会通过回调函数传递当前放置目标容器元素的event对象(包含该元素的自身属性及可调用的原生方法)，从中获取到属性event.target.className(即此前为HTML元素设置的class属性)。

该可选的实施例中，DOM将web页面与脚本或编程语言连接起来，DOM用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)，DOM的方法(methods)可以用特定方式操作这个树，用这些方法改变文档的结构、样式或者内容，节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行，而本方案中所使用的鼠标事件是Web开发中最常用的事件类型。

该可选的实施例中，若获取到的class属性值含有“dragzone-”(如“dragzone-i2”)，则截取掉“dragzone-”剩余“i2”，此即为该目标容器元素的唯一标识i，然后将被拖拽元素的布局信息添加到目标容器元素的children数组中，并删除在根容器中该拖拽元素的布局信息，如图12所示。

上述过程的代码结构由：

<根布局元素>

<i1元素/>

<i2布局元素>

</i2布局元素>

<i3元素/>

</根布局元素>

转为：

<根布局元素>

<i1元素/>

<i2布局元素>

<i3元素/>

</i2布局元素>

</根布局元素>

该可选的实施例中，图12演示了场景为垂直拖入嵌套容器元素时的情况，即将i3拖入到i2中，拖出到根容器组件的场景和拖入相邻的嵌套容器元素或者拖入不同层级的嵌套容器元素的场景同场景为垂直拖入嵌套容器元素时的过程一致。其中，拖出到根容器组件的场景中由于根容器没有父元素，因此设置根容器的元素属性class＝"root-dragzone"，当目标容器元素的event.target.className的值含有“root-dragzone”时，即说明当前的目标容器是根，则只需要将这个被拖拽元素的布局从原嵌套容器元素中移除，并添加到根容器的布局中即可。

在一个可选的实施例中，判断单元113用于基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。

该可选的实施例中，以每个布局元素的宽为例，由于RGL是一个网格布局系统，每个布局元素的宽是占这个布局宽度的份数，所以当布局宽度变化时每个布局元素的宽度一定也会随之变化。

该可选的实施例中，可根据拖拽时对应的场景判断所述可嵌套布局视图对应的操作类型，所述操作类型包括单层操作类型和嵌套操作类型；若所述操作类型为单层操作类型，则依据目标容器元素的布局信息直接缩放所述界面元素；若所述操作类型为嵌套操作类型，则依据目标容器元素的布局信息对所述界面元素进行延时调用。

该可选的实施例中，依据所述目标容器元素的布局信息对所述界面元素进行延时调用包括：统计所述目标容器元素中所述界面元素的层级以获取层级排序结果；依据所述层级排序结果逐层设置延时调用时间；依据所述延时调用时间和所述目标容器元素的布局信息等比例缩放对应层级的界面元素以获取完整网格布局。

该可选的实施例中，当拖拽时对应的场景为垂直拖入嵌套容器元素时，由于目标容器的宽度在此时是固定的，故直接根据布局信息中w占比的份数即可直接计算出新的宽度为多少(RGL已支持)。

该可选的实施例中，当拖拽时对应的场景为拖出到根容器组件的场景和拖入相邻的嵌套容器元素或者拖入不同层级的嵌套容器元素时，子元素存在无法立马获取到父元素的最终宽度直至父元素宽度调整完后的情况(例如拖动着浏览器进行快速且频繁的缩放，突然停下的瞬间，父元素和子元素的调整被同时触发，父元素宽度可能还在从600px调整为700px的过程中，那么子元素在此时获取到父元素就可能不是我们期望的最终值700px，自然而然就无法得到准确的子元素宽度)。

该可选的实施例中，可以采取让子元素的宽度调整根据其嵌套的层数进行逐层递增的延时调用(可使用window.setTimeout设置定时器，假设以20ms为一层时间间隔，到期后触发传入的回调)。其中根布局下不设置延时定时器，子元素宽度调整可立即执行，第一层子布局元素的层级为1，设置一个定时器20ms后调整其内部的子元素，第二层子布局元素的层级为2，设置一个定时器40ms后调整其内部的子元素，以此类推，为LayoutItem再扩展一个属性layer，记录当前元素所在的层级，那么定时器的延时时间计算公式即为layer*20ms。

示例性的，以示例2为基础，根布局宽度原是1200px，现拉宽至1600px，“i1”和“i2”都是第一层布局下的元素，其layer值为1，但由于是根布局下的子元素，所以立即重新计算其宽度，结果为6*(1600px/12)＝800px，第一层的子元素宽度调整完成(即style＝"width:800px；…")；“i2-1”和“i2-2”在“i2”元素的布局中，“i2”的layer值为1，宽度已变为800px，故20ms后“i2-1”和“i2-2”同时重新计算宽度，结果为6*(800px/12)＝400px，第二层的子元素也调整完成(即style＝"width:400px；…")，如图13所示。

该可选的实施例中，界面元素的其他布局信息的缩放过程同宽度的缩放过程一致，最终，在react-grid-layout的基础上改造并实现了一个具有层级嵌套关系，并支持元素自由拖入拖出的容器。

由以上技术方案可以看出，本申请能够通过将单层层级改造为可嵌套的层级，实现界面元素自由的被拖入到容器组件内或被拖出容器组件外，同时可根据容器内的子元素宽度对被拖拽的图表元素进行等比例缩放，从而提高用户对可视化报表的开发效率。

请参见图5，是本申请实施例提供的一种电子设备的结构示意图。电子设备1包括存储器12和处理器13。存储器12用于存储计算机可读指令，处理器13用执行所述储器中存储的计算机可读指令以实现上述任一实施例所述的基于人工智能的网格布局方法。

在一个可选的实施例中，电子设备1还包括总线、存储在所述存储器12中并可在所述处理器13上运行的计算机程序，例如基于人工智能的网格布局程序。

图5仅示出了具有存储器12和处理器13的电子设备1，本领域技术人员可以理解的是，图5示出的结构并不构成对电子设备1的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。

结合图1，电子设备1中的所述存储器12存储多个计算机可读指令以实现一种基于人工智能的网格布局方法，所述处理器13可执行所述多个指令从而实现：

依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；

依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；

基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；

基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。

具体地，所述处理器13对上述指令的具体实现方法可参考图1对应实施例中相关步骤的描述，在此不赘述。

本领域技术人员可以理解，所述示意图仅仅是电子设备1的示例，并不构成对电子设备1的限定，电子设备1可以是总线型结构，也可以是星形结构，电子设备1还可以包括比图示更多或更少的其他硬件或者软件，或者不同的部件布置，例如电子设备1还可以包括输入输出设备、网络接入设备等。

需要说明的是，电子设备1仅为举例，其他现有的或今后可能出现的电子产品如可适应于本申请，也应包含在本申请的保护范围以内，并以引用方式包含于此。

其中，存储器12至少包括一种类型的可读存储介质，所述可读存储介质可以是非易失性的，也可以是易失性的。所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、磁盘、光盘等。存储器12在一些实施例中可以是电子设备1的内部存储单元，例如该电子设备1的移动硬盘。存储器12在另一些实施例中也可以是电子设备1的外部存储设备，例如电子设备1上配备的插接式移动硬盘、智能存储卡(Smart Media Card,SMC)、安全数字(Secure Digital,SD)卡、闪存卡(Flash Card)等。存储器12不仅可以用于存储安装于电子设备1的应用软件及各类数据，例如基于人工智能的网格布局程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。

处理器13在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。处理器13是电子设备1的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备1的各个部件，通过运行或执行存储在所述存储器12内的程序或者模块(例如执行基于人工智能的网格布局程序等)，以及调用存储在所述存储器12内的数据，以执行电子设备1的各种功能和处理数据。

所述处理器13执行所述电子设备1的操作系统以及安装的各类应用程序。所述处理器13执行所述应用程序以实现上述各个基于人工智能的网格布局方法实施例中的步骤，例如图1至图3所示的步骤。

示例性的，所述计算机程序可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器12中，并由所述处理器13执行，以完成本申请。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机可读指令段，该指令段用于描述所述计算机程序在电子设备1中的执行过程。例如，所述计算机程序可以被分割成读取单元110、扩展单元111、拖拽单元112、获取单元113。

上述以软件功能模块的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、计算机设备，或者网络设备等)或处理器(processor)执行本申请各个实施例所述的基于人工智能的网格布局方法的部分。

电子设备1集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指示相关的硬件设备来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。

其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存储器及其他存储器等。

进一步地，计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

总线可以是外设部件互连标准(peripheral component interconnect，简称PCI)总线或扩展工业标准结构(extended industry standard architecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。为便于表示，在图5中仅用一根箭头表示，但并不表示仅有一根总线或一种类型的总线。所述总线被设置为实现所述存储器12以及至少一个处理器13等之间的连接通信。

本申请实施例还提供一种计算机可读存储介质(图未示)，计算机可读存储介质中存储有计算机可读指令，计算机可读指令被电子设备中的处理器执行以实现上述任一实施例所述的基于人工智能的网格布局方法。

另外，在本申请各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

最后应说明的是，以上实施例仅用以说明本申请的技术方案而非限制，尽管参照较佳实施例对本申请进行了详细说明，本领域的普通技术人员应当理解，可以对本申请的技术方案进行修改或等同替换，而不脱离本申请技术方案的精神和范围。

Claims (10)

1.一种基于人工智能的网格布局方法，其特征在于，所述方法包括：

依据网格布局系统读取预设的界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；

依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；

基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；

基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。

2.如权利要求1所述的基于人工智能的网格布局方法，其特征在于，所述依据网格布局系统读取界面元素的属性值以获取单层布局元素包括：

依据网格布局系统和预设属性值绘制根布局；

依据预设属性值配置多个界面元素的属性以构建配置对象数组；

依据网格布局系统遍历所述配置对象数组以生成对象布局元素；

绘制所述对象布局元素至所述根布局以获取单层布局元素。

3.如权利要求1所述的基于人工智能的网格布局方法，其特征在于，所述依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素后，所述嵌套容器元素的属性包括：

parentId，用于表示所述单层布局元素的父元素ID，若所述单层布局元素没有父元素，则对应的parentId为空；

isDragzone，用于表示所述单层布局元素是否可嵌套，若isDragzone为假，则表示所述单层布局元素不可嵌套，若isDragzone为真，则表示所述单层布局元素为嵌套容器元素；

children，用于表示所述单层布局元素的所有子元素，为一个对象数组。

4.如权利要求1所述的基于人工智能的网格布局方法，其特征在于，所述基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图包括：

依据预设脚本为所述嵌套容器元素对应生成的HTML元素添加class属性以记录所述嵌套容器元素的唯一标识；

拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性；

依据所述目标容器元素的class属性将被拖拽的界面元素添加至所述目标容器元素的children对象数组中以获取所述可嵌套布局视图。

5.如权利要求4所述的基于人工智能的网格布局方法，其特征在于，所述拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性包括：

点击鼠标拖拽所述界面元素时设置被拖拽元素的CSS属性为point-events:none，以使得当前被拖拽元素不会成为鼠标事件的目标对象；

松开鼠标时触发鼠标事件以通过回调函数获取所述目标容器元素的class属性。

6.如权利要求1所述的基于人工智能的网格布局方法，其特征在于，所述基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局之前还包括：

判断所述可嵌套布局视图对应的操作类型，所述操作类型包括单层操作类型和嵌套操作类型；

若所述操作类型为单层操作类型，则依据目标容器元素的布局信息直接缩放所述界面元素；

若所述操作类型为嵌套操作类型，则依据目标容器元素的布局信息对所述界面元素进行延时调用。

7.如权利要求6所述的基于人工智能的网格布局方法，其特征在于，所述若所述操作类型为嵌套操作类型，则依据目标容器元素的布局信息对所述界面元素进行延时调用包括：

统计所述目标容器元素中所述界面元素的层级以获取层级排序结果；

依据所述层级排序结果逐层设置延时调用时间；

依据所述延时调用时间和所述目标容器元素的布局信息等比例缩放对应层级的界面元素以获取完整网格布局。

8.一种基于人工智能的网格布局装置，其特征在于，所述装置包括：

读取单元，用于依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；

扩展单元，用于依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；

拖拽单元，用于基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；

获取单元，用于基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。

9.一种电子设备，其特征在于，所述电子设备包括：

存储器，存储有计算机可读指令；及

处理器，执行所述存储器中存储的计算机可读指令以实现如权利要求1至7中任意一项所述的基于人工智能的网格布局方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的基于人工智能的网格布局方法。

Images