一种页面设备图标布局方法及系统与流程

1.本发明属于页面显示技术领域，尤其涉及一种页面设备图标布局方法及系统。


背景技术：

2.本部分的陈述仅仅是提供了与本发明相关的背景技术信息，不必然构成在先技术。
3.在软件开发过程中，会涉及到大量设备布局的问题且需根据设备实际位置进行相对布局，关于控件的布局，flex布局，可以简便、完整、响应式地实现各种页面布局。通过内容对齐(justify-content)属性定义了控件在主轴上的对齐方式，包含：左对齐(默认值，flex-start)、右对齐(flex-end)、居中(center)、两端对齐(space-between)、项目之间的间隔都相等(space-between)和每个项目两侧的间隔相等(space-around)，布局是规律的。
4.然而，在具体的业务逻辑中，使用的布局没有规律性需高度自定义布局，规律的布局效果不能满足需求。


技术实现要素：

5.为了解决上述背景技术中存在的技术问题，本发明提供一种页面设备图标布局方法及系统，实现了根据设备桩号定位到页面的对应位置无规律的自定义布局，提高了布局的灵活性。
6.为了实现上述目的，本发明采用如下技术方案：
7.本发明的第一个方面提供一种页面设备图标布局方法，其包括：
8.获取页面的长度，以及待布局设备的个数和所有待布局设备的桩号；
9.基于页面的长度和所有待布局设备的桩号，计算每个设备的图标在页面中的位置；
10.基于页面的长度和所有待布局设备的个数，计算每个设备的图标的宽度；
11.基于每个设备的图标的宽度，对每个设备的图标在页面中的位置进行更新；
12.设置页面布局方式，基于布局方式和更新后的每个设备的图标在页面中的的位置，将所有设备的图标布局到页面。
13.进一步的，还包括：
14.将所有待布局设备的桩号中的最小桩号作为开始桩号；
15.将所有待布局设备的桩号中的最大桩号作为结束桩号。
16.进一步的，所述计算每个设备的图标的在页面中的位置的具体方法为：
17.基于所述开始桩号和结束桩号，计算实际长度；
18.基于所述实际长度和页面的长度，计算每个设备的图标所占长度；
19.每个设备的桩号与开始桩号求差值，该差值与每个设备的图标所占长度的乘积，为每个设备的图标的在页面中的位置。
20.进一步的，将每个设备的图标在页面中的位置作为每个设备的图标的中心点所在
的位置。
21.进一步的，所述页面布局方式包括父容器样式；
22.所述父容器样式设置为居中占满全屏。
23.进一步的，所述页面布局方式包括定位方式；
24.所述定位方式设置为子绝父相。
25.本发明的第二个方面提供一种页面设备图标布局系统，其包括：
26.数据获取模块，其被配置为：获取页面的长度，以及待布局设备的个数和所有待布局设备的桩号；
27.位置计算模块，其被配置为：基于页面的长度和所有待布局设备的桩号，计算每个设备的图标在页面中的位置；
28.宽度计算模块，其被配置为：基于页面的长度和所有待布局设备的个数，计算每个设备的图标的宽度；
29.位置更新模块，其被配置为：基于每个设备的图标的宽度，对每个设备的图标在页面中的位置进行更新；
30.页面布局模块，其被配置为：设置页面布局方式，基于布局方式和更新后的每个设备的图标在页面中的的位置，将所有设备的图标布局到页面。
31.本发明的第三个方面提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述所述的一种页面设备图标布局方法中的步骤。
32.本发明的第四个方面提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述所述的一种页面设备图标布局方法中的步骤。
33.与现有技术相比，本发明的有益效果是：
34.本发明提供了一种页面设备图标布局方法，其基于等比例方法计算桩号对应的web页面上的位置，实现根据桩号定位到web页面的对应位置无规律的自定义布局，提高了布局的灵活性；解决了基于flex布局是一种规律布局无法根据桩号无规律布局，实现了基于桩号定位无规律布局的处理方法。
附图说明
35.构成本发明的一部分的说明书附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。
36.图1是本发明实施例一的一种页面设备图标布局方法的流程图；
37.图2是本发明实施例一的实际长度计算方法的示意图。
具体实施方式
38.下面结合附图与实施例对本发明作进一步说明。
39.应该指出，以下详细说明都是例示性的，旨在对本发明提供进一步的说明。除非另有指明，本文使用的所有技术和科学术语具有与本发明所属技术领域的普通技术人员通常理解的相同含义。
40.需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根
据本发明的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。
41.实施例一
42.本实施例提供了一种页面设备图标布局方法，如图1所示，具体包括如下步骤：
43.步骤1、获取页面的长度s。
44.作为一种实施方式，页面为web页面。
45.步骤2、获取待布局设备的个数n和所有待布局设备的桩号(y1，y2，
…
，yn)，其中，yi为第i个桩号(非开始桩号)，y
start
表示开始桩号，即所有桩号中最小的桩号，y
end
表示结束桩号，即所有桩号中最大的桩号。
46.具体的，获取web页面需要展示的设备数据，设备数据中包含桩号。
47.步骤3、基于页面的长度和所有待布局设备的桩号，计算每个设备对应的设备图标在页面中的位置。具体的，根据设备的桩号进行等比例计算，步骤如下：
48.基于开始桩号和结束桩号，计算出实际长度s，s＝y
end-y
start
；设备的桩号与设备所在位置相关，实际长度为所有待布局设备所在隧道的长度。如图2所示，某隧道中所有设备的开始桩号为k785 350，可直接写成小数758.350；结束桩号k800 100，可直接写成小数800.100；隧道的长度＝结束桩号-开始桩号＝800.100-758.350。
49.基于实际长度和页面的长度，计算每个设备的图标所占长度；每个设备的桩号与开始桩号求差值，该差值与每个设备的图标所占长度的乘积，为每个设备的图标的在页面中的位置。具体的，如果用字母x和y表示两种关联的量，用k表示它们的比值，成正比例关系可以用下面式子表示：y/x＝k。根据获取第i个设备的桩号yi、实际长度s、web页面长度s，计算每个设备对应的设备图标的在页面中的位置：
[0050][0051]
其中，xi为第i个桩号对应的待布局设备在页面中的位置。
[0052]
最终，计算出每个设备的图上位置x0，x1，x2，x3，...，xi，...xn。
[0053]
步骤4、基于页面的长度s和所有待布局设备的个数，计算每个设备对应的设备图标的宽度。
[0054]
根据设备的数量和web页面的长度s，动态计算设备图标的宽度：
[0055]
w＝w
max
·
n≥s？(s/n≤w
min
？w
min
:s/n):(s/n≥w
max
？w
max
:s/n)
[0056]
其中，w为设备的图标的宽度，w
min
为设定的设备图标的最小宽度，w
max
为设定的设备图标的最大宽度，n为设备的个数。a？b:c为三目运算符，即先计算条件a，然后进行判断，如果a的值为true，计算b的值，运算结果为b的值；否则，计算c的值，运算结果为c的值。w
max
和w
min
的设定是为布局时图标过大图标堆积在一起或图标过小布局时图标过小，计算一个适当的大小合理布局。根据页面长度动态计算图标宽度的w，当w
max
·
n的值大于或等于s时，取冒号(：)前边的(x/n≤w
min
？w
min
:s/n)的值，当s/n小于等于w
min
时，设备的宽度为最小宽度w
min
，否则取x/n；否则取后边的(s/n≥w
max
？w
max
:s/n)，当s/n大于等于w
max
，则取w
max
，否则取x/n。
[0057]
步骤5、基于每个设备对应的设备图标的宽度，对每个设备对应的设备图标在页面中的位置进行更新。
[0058]
具体的，基于每个设备对应的设备图标的宽度，重新计算设备的位置：
[0059]
xi＝x
i-w/2
[0060]
即，图标向左移动图标宽度的一半定位到图标的中轴线上。
[0061]
作为一种实施方式，定位图标的中心点为布局点，即将每个设备对应的设备图标在页面中的位置作为每个设备的图标的中心点所在的位置。
[0062]
步骤6、设置页面布局方式，基于布局方式和更新后的每个设备对应的设备图标在页面中的位置，将所有设备图标布局到页面。
[0063]
具体的，页面布局方式包括父容器样式和定位方式。这里的父容器是指所有设备图标的父容器。
[0064]
作为一种实施方式，将web页面先布局父类，flex布局居中占满全屏，设置定位方式为子绝父相。
[0065]
在具体实施中，将步骤1-5中的计算步骤及步骤6中的页面布局方式封装为关联web页面，在所需位置直接引入封装控件，快速完成设备根据桩号位置布局，提升代码的简洁度，从而提升涉及到设备根据桩号布局web页面的开发效率。
[0066]
本发明基于等比例方法计算桩号对应的web页面上的位置，实现根据桩号定位到web页面的对应位置无规律的自定义布局，提高了布局的灵活性；解决了基于flex布局是一种规律布局无法根据桩号无规律布局，实现了基于桩号定位无规律布局的处理方法。
[0067]
实施例二
[0068]
本实施例提供了一种页面设备图标布局系统，其具体包括如下模块：
[0069]
数据获取模块，其被配置为：获取页面的长度，以及待布局设备的个数和所有待布局设备的桩号；
[0070]
位置计算模块，其被配置为：基于页面的长度和所有待布局设备的桩号，计算每个设备的图标在页面中的位置；
[0071]
宽度计算模块，其被配置为：基于页面的长度和所有待布局设备的个数，计算每个设备的图标的宽度；
[0072]
位置更新模块，其被配置为：基于每个设备的图标的宽度，对每个设备的图标在页面中的位置进行更新；
[0073]
页面布局模块，其被配置为：设置页面布局方式，基于布局方式和更新后的每个设备的图标在页面中的的位置，将所有设备的图标布局到页面。
[0074]
其中，位置计算模块，具体被配置为：基于开始桩号和结束桩号，计算实际长度；基于所述实际长度和页面的长度，计算每个设备的图标所占长度；每个设备的桩号与开始桩号求差值，该差值与每个设备的图标所占长度的乘积，为每个设备的图标的在页面中的位置。
[0075]
此处需要说明的是，本实施例中的各个模块与实施例一中的各个步骤一一对应，其具体实施过程相同，此处不再累述。
[0076]
实施例三
[0077]
本实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处
理器执行时实现如上述实施例一所述的一种页面设备图标布局方法中的步骤。
[0078]
实施例四
[0079]
本实施例提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述实施例一所述的一种页面设备图标布局方法中的步骤。
[0080]
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
[0081]
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
[0082]
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0083]
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0084]
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(read-only memory，rom)或随机存储记忆体(random accessmemory，ram)等。
[0085]
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。