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

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

【技术实现步骤摘要】
基于人工智能的网格布局方法、装置、设备及存储介质


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

技术介绍

[0002]网格布局是目前网页布局常采用的一种布局方式，通过网格布局将网页按照行列进行分割以将网页分割成多个独立区域，从而使得网页布局规整、排布美观。
[0003]现有技术中，可视化报表均需要网格布局进行构建，然而常见的可视化报表开发系统无法支持用户自由的将图表元素拖入拖出容器组件，如市面上出现的一些报表开发页面，当用户将界面元素拖入到容器内时，便无法通过拖出操作将界面元素放置在容器外，只能选择删除该界面元素并重新配置，从而对用户带来极大的不便。

技术实现思路

[0004]鉴于以上内容，有必要提出一种基于人工智能的网格布局方法及相关设备，以解决如何支持用户自由的将界面元素拖入拖出容器组件这一技术问题，其中，相关设备包括基于人工智能的网格布局装置、电子设备及存储介质。
[0005]本申请提供一种基于人工智能的网格布局方法，所述方法包括：
[0006]依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；
[0007]依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；
[0008]基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；
[0009]基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。
[0010]如此，通过将单层层级改造为可嵌套的层级，实现界面元素自由的被拖入到容器组件内或被拖出容器组件外，同时可根据容器内的子元素宽度对被拖拽的图表元素进行等比例缩放，从而提高用户对可视化报表的开发效率。
[0011]在一些实施例中，所述依据网格布局系统读取界面元素的属性值以获取单层布局元素包括：
[0012]依据网格布局系统和预设属性值绘制根布局；
[0013]依据预设属性值配置多个界面元素的属性以构建配置对象数组；
[0014]依据网格布局系统遍历所述配置对象数组以生成对象布局元素；
[0015]绘制所述对象布局元素至所述根布局以获取单层布局元素。
[0016]如此，可依据网格布局系统快速获取初始的根布局页面，同时在根布局内生成多个同层级且无嵌套关系的单层布局元素，无需人为操作进行页面布局，从而提高页面布局的效率。
[0017]在一些实施例中，所述嵌套容器元素包括：
[0018]parentId，用于表示所述单层布局元素的父元素ID，若所述单层布局元素没有父
元素，则对应的parentId为空；
[0019]isDragzone，用于表示所述单层布局元素是否可嵌套，若isDragzone为假，则表示所述单层布局元素不可嵌套，若isDragzone为真，则表示所述单层布局元素为嵌套容器元素；
[0020]children，用于表示所述单层布局元素的所有子元素，为一个对象数组。
[0021]如此，通过对扩展的三个属性的设置可以生成嵌套容器元素，从而能够支持页面布局具有嵌套的层级结构，为后续过程实现用户将界面元素拖入拖出容器组件提供了可能。
[0022]在一些实施例中，所述基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图包括：
[0023]依据预设脚本为所述嵌套容器元素对应生成的HTML元素添加class属性以记录所述嵌套容器元素的唯一标识；
[0024]拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性；
[0025]依据所述目标容器元素的class属性将被拖拽的界面元素添加至所述目标容器元素的children对象数组中以获取所述可嵌套布局视图。
[0026]如此，可通过class属性确定所述目标容器元素的唯一标识，并由此实现界面元素自由的被拖入到容器组件内或被拖出容器组件外，有效提高用户对页面进行布局的效率。
[0027]在一些实施例中，所述拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性包括：
[0028]点击鼠标拖拽所述界面元素时设置被拖拽元素的CSS属性为point
‑
events:none，以使得当前被拖拽元素不会成为鼠标事件的目标对象；
[0029]松开鼠标时触发鼠标事件以通过回调函数获取所述目标容器元素的class属性。
[0030]如此，可以避免当前被拖拽的元素称为鼠标事件的目标对象，从而通过回调函数顺利获取被拖拽元素对应的目标容器元素的class属性。
[0031]在一些实施例中，所述基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局之前还包括：
[0032]判断所述可嵌套布局视图对应的操作类型，所述操作类型包括单层操作类型和嵌套操作类型；
[0033]若所述操作类型为单层操作类型，则依据目标容器元素的布局信息直接缩放所述界面元素；
[0034]若所述操作类型为嵌套操作类型，则依据目标容器元素的布局信息对所述界面元素进行延时调用。
[0035]如此，通过判断所述可嵌套布局视图对应的操作类型，可以根据不同的操作类型对所述界面元素进行不同形式的等比例缩放，提高对所述界面元素进行等比例缩放的效率。
[0036]在一些实施例中，所述若所述操作类型为嵌套操作类型，则依据目标容器元素的布局信息对所述界面元素进行延时调用包括：
[0037]统计所述目标容器元素中所述界面元素的层级以获取层级排序结果；
[0038]依据所述层级排序结果逐层设置延时调用时间；
[0039]依据所述延时调用时间和所述目标容器元素的布局信息等比例缩放对应层级的界面元素以获取完整网格布局。
[0040]如此，通过逐层级的延时调用，可以有效防止所述目标容器元素的布局信息在调整变化时对所述界面元素产生的等比例缩放错误，提高对所述界面元素进行等比例缩放的准确性。
[0041]本申请实施例还提供一种基于人工智能的网格布局装置，所述装置包括：
[0042]读取单元，用于依据网格布局系统读取界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；
[0043]扩展单元，用于依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；
[0044]拖拽单元，用于基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；
[0045]获取单元，用于基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。
[0046]本申请实施例还提供一种电子设备，所述电子设备包括：
[0047]存储器，存储至少一个指令；
[0048]处理器，执行所述存储器中存储的指令以实现所述的基于人工智能的网格布局方法。
[0049]本申请实施例还提供一种计算机可读存储介质本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于人工智能的网格布局方法，其特征在于，所述方法包括：依据网格布局系统读取预设的界面元素的属性值以获取单层布局元素，所述网格布局系统用于生成网格布局页面；依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素；基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图；基于所述可嵌套布局视图对所述界面元素进行等比例缩放以获取完整网格布局。2.如权利要求1所述的基于人工智能的网格布局方法，其特征在于，所述依据网格布局系统读取界面元素的属性值以获取单层布局元素包括：依据网格布局系统和预设属性值绘制根布局；依据预设属性值配置多个界面元素的属性以构建配置对象数组；依据网格布局系统遍历所述配置对象数组以生成对象布局元素；绘制所述对象布局元素至所述根布局以获取单层布局元素。3.如权利要求1所述的基于人工智能的网格布局方法，其特征在于，所述依据预设脚本扩展所述单层布局元素的属性以获取嵌套容器元素后，所述嵌套容器元素的属性包括：parentId，用于表示所述单层布局元素的父元素ID，若所述单层布局元素没有父元素，则对应的parentId为空；isDragzone，用于表示所述单层布局元素是否可嵌套，若isDragzone为假，则表示所述单层布局元素不可嵌套，若isDragzone为真，则表示所述单层布局元素为嵌套容器元素；children，用于表示所述单层布局元素的所有子元素，为一个对象数组。4.如权利要求1所述的基于人工智能的网格布局方法，其特征在于，所述基于所述嵌套容器元素对所述界面元素进行拖拽以获取可嵌套布局视图包括：依据预设脚本为所述嵌套容器元素对应生成的HTML元素添加class属性以记录所述嵌套容器元素的唯一标识；拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性；依据所述目标容器元素的class属性将被拖拽的界面元素添加至所述目标容器元素的children对象数组中以获取所述可嵌套布局视图。5.如权利要求4所述的基于人工智能的网格布局方法，其特征在于，所述拖拽所述界面元素至目标容器元素中以获取所述目标容器元素的class属性包括：...

【专利技术属性】
技术研发人员：蔡嘉琳，
申请(专利权)人：中国平安人寿保险股份有限公司，
类型：发明
国别省市：