CN116450268A - 多窗口页面展示方法及装置、窗口分割方法及装置 - Google Patents
多窗口页面展示方法及装置、窗口分割方法及装置 Download PDFInfo
- Publication number
- CN116450268A CN116450268A CN202310298396.1A CN202310298396A CN116450268A CN 116450268 A CN116450268 A CN 116450268A CN 202310298396 A CN202310298396 A CN 202310298396A CN 116450268 A CN116450268 A CN 116450268A
- Authority
- CN
- China
- Prior art keywords
- window
- target
- module
- floating window
- floating
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 78
- 230000011218 segmentation Effects 0.000 title claims abstract description 28
- 230000002452 interceptive effect Effects 0.000 claims abstract description 86
- 238000007667 floating Methods 0.000 claims description 258
- 230000006870 function Effects 0.000 claims description 131
- 230000008859 change Effects 0.000 claims description 17
- 230000004044 response Effects 0.000 claims description 17
- 230000000007 visual effect Effects 0.000 claims description 14
- 238000005516 engineering process Methods 0.000 abstract description 10
- 238000010586 diagram Methods 0.000 description 21
- 238000012544 monitoring process Methods 0.000 description 21
- 230000001960 triggered effect Effects 0.000 description 14
- 230000000694 effects Effects 0.000 description 9
- YWXYYJSYQOXTPL-SLPGGIOYSA-N isosorbide mononitrate Chemical compound [O-][N+](=O)O[C@@H]1CO[C@@H]2[C@@H](O)CO[C@@H]21 YWXYYJSYQOXTPL-SLPGGIOYSA-N 0.000 description 5
- 230000008569 process Effects 0.000 description 3
- 101100153581 Bacillus anthracis topX gene Proteins 0.000 description 2
- 101150041570 TOP1 gene Proteins 0.000 description 2
- 239000003086 colorant Substances 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 101150104012 TOP2 gene Proteins 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000001172 regenerating effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
- 230000014616 translation Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
本申请公开了一种多窗口页面展示方法及装置、窗口分割方法及装置。其中，该方法包括：在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息；响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。本申请解决了相关技术不支持通过单个窗口同时打开多个功能页面的技术问题。
Description
技术领域
本申请涉及计算机web系统界面显示领域，具体而言，涉及一种多窗口页面展示方法及装置、窗口分割方法及装置。
背景技术
在工业监控的国产化浪潮下，使用web技术实现跨平台的工业监控系统成为行业的发展趋势。而在工业监控系统中，多数用户迫切需要将监控系统的内容显示区域分割成多个大小不一的布局块，在每个布局块中可以展示不同功能模块，从而实现在一个屏幕上同时展示多个应用模块、多个监控画面。
但相关多窗口布局展示技术仍存在以下缺陷：从窗口分割的操作方式来看，用户首先需要选中某个窗口，然后点击固定的切分数量按钮将此窗口进行分割，分割后新产生的窗口展示的页面内容还需要用户手动进行选择，整个操作流程比较繁琐，缺乏易用性；从窗口展示能力来看，相关技术分割出的单个窗口仅能展示一个功能页面，且在保证窗口大小适中的前提下，监控系统的内容显示区域难以展示较多的功能页面。
针对上述的问题，目前尚未提出有效的解决方案。
发明内容
本申请实施例提供了一种多窗口页面展示方法及装置、窗口分割方法及装置，以至少解决相关技术不支持通过单个窗口同时打开多个功能页面的技术问题。
根据本申请实施例的一个方面，提供了一种多窗口页面展示方法，包括：在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息；响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。
可选地，采用目标形式在目标窗口相关联的目标内容块中展示至少一个功能模块对应的模块信息，包括：响应于功能模块选择指令，从交互界面中的多个功能模块中选择至少一个目标功能模块，设置目标功能模块为可移动属性，并记录目标功能模块的目标模块信息；响应于功能模块移动指令，将目标功能模块移动至目标窗口；采用目标形式在目标窗口相关联的目标内容块中展示目标模块信息。
可选地，在采用目标形式在目标窗口相关联的目标内容块中展示目标模块信息之后，该方法还包括：获取目标功能模块移动至目标内容块时目标接触点在目标内容块的第一驻留坐标，以及目标接触点的移动位置，其中，目标接触点用于选中并移动目标功能模块；基于第一驻留坐标和移动位置确定目标页面的目标划分方式，以及目标分割线在目标页面中的位置，其中，目标划分方式包括：水平划分和垂直划分；响应于第二操作指令，通过调节目标分割线在目标页面内的位置，对目标内容块的大小进行调节。
可选地，通过调节目标分割线在目标页面内的位置，对目标内容块的大小进行调节，包括：在目标划分方式为水平划分时，确定目标分割线为水平分割线，并通过调整水平分割线在目标页面的垂直方向上的位置调节目标内容块的大小；在目标划分方式为垂直划分时，确定目标分割线为垂直分割线，并通过调整垂直分割线在目标页面的水平方向上的位置调节目标内容块的大小。
可选地，在目标窗口的窗口模式为非浮动窗口时，确定非浮动窗口的第一尺寸和第一定位属性，并通过窗口标识将非浮动窗口与第一内容块相关联，其中，第一尺寸包括：第一宽度和第一高度，第一定位属性包括：第一左边距和第一上边距，且第一定位属性为绝对定位；在目标窗口的窗口模式为浮动窗口时，确定浮动窗口的第二尺寸和第二定位属性，并确定浮动窗口与第二内容块相关联，其中，第二尺寸包括：第二宽度、第二高度，第二定位属性包括：第二左边距和第二上边距，且第二定位属性为固定定位。
可选地，确定非浮动窗口的第一尺寸和第一定位属性，包括：通过第一函数获取非浮动窗口的第一尺寸，第一内容块相对于交互界面可视区域的第一位置信息，以及目标页面的内容显示区域相对于交互界面可视区域的第二位置信息；基于第一位置信息和第二位置信息确定非浮动窗口的第一定位属性。
可选地，在确定浮动窗口的第二尺寸和第二定位属性之后，该方法还包括：设置浮动窗口的第一层级属性。
可选地，采用目标形式在目标窗口相关联的目标内容块中展示目标模块信息，包括：确定目标窗口的窗口模式，并采用目标形式在目标页面内打开至少一个目标窗口，其中，在窗口模式为非浮动窗口时，将非浮动窗口拆分为第一头部与第一主体，在非浮动窗口内展示第一头部，并依据第一尺寸和第一定位属性在第一内容块中展示第一主体；在窗口为浮动窗口时，依据第二尺寸和第二定位属性在第二内容块中展示浮动窗口的第二主体。
可选地，按照第一尺寸和第一定位属性在第一内容块中展示第一主体，包括：获取非浮动窗口的第一尺寸和第一定位属性；确定非浮动窗口的第一头部的第一头部高度；基于第一头部高度和第一尺寸确定第一主体的第三尺寸，并依据第一定位属性和第一头部高度确定第一主体的第三定位属性。
可选地，依据第二尺寸和第二定位属性在第二内容块中展示浮动窗口的第二主体，包括：确定浮动窗口的第二头部的第二头部高度；基于第二头部高度和第二尺寸确定第二主体的第四尺寸，并依据第二定位属性和第二头部高度确定第二主体的第四定位属性。
可选地，响应于第三操作指令，在目标窗口的窗口模式为非浮动窗口时，确定将窗口模式切换为浮动窗口；或者，在目标窗口的窗口模式为浮动窗口时，确定将窗口模式切换为非浮动窗口。
可选地，在目标窗口的窗口模式为非浮动窗口时，确定将窗口模式切换为浮动窗口，包括：响应于第一窗口选择指令，通过目标接触点从目标页面多个窗口中选择至少一个非浮动窗口，并确定目标接触选中非浮动窗口的第二驻留坐标；获取目标接触点的第三驻留坐标；基于第二驻留坐标和第三驻留坐标确定目标接触点的第一垂直偏移量，并在第一垂直偏移量超过第一头部的第一头部高度时，确定将非浮动窗口切换为浮动窗口。
可选地，在确定将窗口模式切换为浮动窗口之后，该方法还包括：基于第二驻留坐标和第三驻留坐标确定目标接触点的第一水平偏移量；在第一水平偏移量超过第一宽度的一半时，确定对第一头部的顺序进行调换。
可选地，在目标窗口的窗口模式为浮动窗口时，确定将窗口模式切换为非浮动窗口，包括：响应于第二窗口选择指令，通过目标接触点从目标页面内的多个窗口中选择至少一个浮动窗口，并确定浮动窗口相关联的第二内容块相对于目标页面的内容显示区域的第三位置信息；依据第三位置信息确定浮动窗口对应的第二文本对象模型，并在第二文本对象模型为非浮动窗口的第一头部的元素时，确定将浮动窗口切换为非浮动窗口。
可选地，在确定将窗口模式切换为非浮动窗口之前，该方法还包括确定目标接触点选择浮动窗口的第四驻留坐标；获取目标接触点的第五驻留坐标；基于第四驻留坐标和第五驻留坐标确定浮动窗口的第二水平偏移量和第二垂直偏移量；依据第二水平偏移量和第二垂直偏移量更新浮动窗口的第二定位属性。
可选地，响应于第四操作指令，在目标窗口的窗口模式为非浮动窗口时，依据第一内容块的大小对非浮动窗口的第一窗口大小进行调节；或者，在目标窗口的窗口模式为浮动窗口时，直接对浮动窗口的第二窗口大小进行调节。
可选地，依据第一内容块的大小对非浮动窗口的第一窗口大小进行调节，包括：创建监听实例，其中，监听实例用于监听并确定第一内容块内的第一文本对象模型的第一变化；依据第一变化对第一主体的第三尺寸和第三定位属性进行调节；依据第二函数确定非浮动窗口的第一头部的第二变化，并按照第二变化对第一头部中的显示内容进行调节。
根据本申请实施例的另一方面，还提供了一种窗口分割方法，包括：在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，其中，模块信息中包括：模块布局信息和模块数据信息；响应于窗口划分指令，通过移动交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，内容块为目标页面中多个内容块的任一内容块。
可选地，通过移动交互界面内的功能模块至窗口相关联的内容块处，包括：响应于功能模块选择指令，从交互界面中的多个功能模块中选择至少一个目标功能模块，设置目标功能模块为可移动属性，并记录目标功能模块的目标模块信息；响应于功能模块移动指令，将目标功能模块移动至目标窗口相关联的目标内容块处。
根据本申请实施例的另一方面，还提供了一种多窗口页面展示装置，包括：第一展示模块，用于在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息；第一响应模块，用于响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。
根据本申请实施例的另一方面，还提供了一种窗口分割装置，包括：第二展示模块，用于在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，其中，模块信息中包括：模块布局信息和模块数据信息；第二响应模块，用于响应于窗口划分指令，通过移动交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，内容块为目标页面中多个内容块的任一内容块。
根据本申请实施例的另一方面，还提供了一种非易失性存储介质，非易失性存储介质包括存储的程序，其中，在程序运行时控制非易失性存储介质所在设备执行上述的多窗口页面展示方法或者窗口分割方法。
根据本申请实施例的另一方面，还提供了一种电子设备，包括：存储器和处理器，处理器用于运行存储在存储器中的程序，其中，程序运行时执行上述的多窗口页面展示方法或者窗口分割方法。
在本申请实施例中，通过在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息；响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。从而实现了在同一窗口内展示多个功能页面的技术效果，进而解决了相关技术不支持通过单个窗口同时打开多个功能页面技术问题。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据本申请实施例的一种可选的多窗口页面展示方法的流程图；
图2是根据本申请实施例的一种可选的交互界面的示意图；
图3是根据本申请实施例的一种可选的多窗口分割画面的示意图；
图4是根据本申请实施例的一种可选的多窗口分割的原理示意图；
图5是根据本申请实施例的一种可选的2*2页面布局的展示示意图；
图6是根据本申请实施例的一种可选的不浮动窗口定位的示意图；
图7是根据本申请实施例的一种可选的浮动窗口定位的示意图；
图8是根据本申请实施例的一种可选的浏览器多页签展示的示意图；
图9是根据本申请实施例的一种可选的第一主体定位的示意图；
图10是根据本申请实施例的一种可选的第二主体定位的示意图；
图11是根据本申请实施例的一种可选的非浮动窗口切换为浮动窗口的示意图；
图12是根据本申请实施例的一种可选的非浮动窗口的页签顺序交换的示意图；
图13是根据本申请实施例的一种可选的浮动窗口切换为非浮动窗口的示意图；
图14是根据本申请实施例的一种可选的窗口分割方法的示意图；
图15是根据本申请实施例的一种可选的多窗口页面展示装置的结构示意图；
图16是根据本申请实施例的一种可选的窗口分割装置的结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了更好地理解本申请实施例，对本申请实施例进行描述的过程中出现的部分名词或术语翻译解释如下：
层叠样式表(Cascading Style Sheets，Css)：用于格式化网页的布局。使用层叠样式表可以控制颜色、字体、文本大小、元素之间的间距、元素的位置和布局、要使用的背景图像或背景颜色、不同设备的显示屏幕大小等样式结构。通常，可以将层叠样式表存储于HTML网页或者单独的样式单文件。
实施例1
当前，随着工业监控系统的迅速发展，需要通过将监控系统的内容显示区域划分为多个内容块，且每个内容块可以展示不同功能模块的功能页面，但相关多窗口布局技术在窗口显示功能上，单个窗口仅能展示一个功能页面，且在保证窗口大小适中的前提下，监控系统的内容显示区域也很难展示更多的页面。
为了解决该问题，本申请实施例中提供了相关的解决方案，以下详细说明。
根据本申请实施例，提供了一种多窗口页面展示方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
图1是根据本申请实施例的一种可选的多窗口页面展示方法的流程图，如图1所示，该方法至少包括步骤S102-S104，其中：
步骤S102，在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息。
其中，上述交互界面包括但不仅限于应用APP的显示界面或者浏览器显示界面。
通常，当用户在浏览器内查看监控系统的多个信息内容时，需要通过分别打开多窗口，并在每个窗口内展示交互界面中的一个功能模块对应的功能页面，因此，在用户对功能页面进行切换时，在新功能页面打开的同时，原有的功能页面会被关闭，从而导致无法通过同一窗口展示多个功能模块的功能页面。为此，本申请实施例提出了可以通过目标页面中的多个窗口分别展示不同的功能模块的功能页面，从而为同一屏幕上展示多个功能模块提供了基础。
具体地，图2是根据本申请实施例的一种可选的交互界面的示意图，如图2所示，该交互界面中包括一个展示报表页面的窗口，同时，该交互界面中还包括：系统状态、全日志、状态表、查找、警告等多个功能模块，其中，每个功能模块对应一个用于展示对应的模块信息的功能页面，模块信息中包括：功能模块对应的页面布局信息和数据信息。
步骤S104，响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。
其中，上述第一操作指令用于指示采用目标形式在交互界面的目标页面中展示多个功能模块对应的功能页面，另外，目标形式包括但不仅限于标签页的形式。
作为一种可选的实施方式，可以采用如下方式实现上述步骤S104：响应于功能模块选择指令，从交互界面中的多个功能模块中选择至少一个目标功能模块，设置目标功能模块为可移动属性，并记录目标功能模块的目标模块信息；响应于功能模块移动指令，将目标功能模块移动至目标窗口；采用目标形式在目标窗口相关联的目标内容块中展示目标模块信息。
例如，当监控系统接收并响应来自用户输入的功能模块选择指令时，首先从交互界面内的多个功能模块中选择至少一个目标功能模块，同时，通过设置Draggable属性将目标功能模块设置为可拖拽，并对目标功能模块绑定DragStart事件和DragEnd事件，其中，DragStart事件在目标功能模块被移动时被触发，触发时会在全局设置拖拽数据，并记录该目标功能模块的目标模块信息，而DragEnd事件在目标功能模块被放置时被触发；接着，当用户拖拽目标功能模块至目标窗口时，立刻对目标窗口相关联的目标内容块绑定DragEnter事件，其中，DragEnter事件在将目标功能模块拖拽至目标内容块被触发；然后，目标功能模块会以元素占位的方式在目标内容块内展示相应的目标模块信息，从而实现对新增目标窗口的划分。
图3是根据本申请实施例的一种可选的多窗口分割画面的示意图，如图3所示，可以通过拖拽实时报警功能模块至监控系统的内容显示区域中，得到新增的报警页面，从而便于用户通过监控系统的内容显示区域直观查看报表信息以及实时报警信息，避免用户来回切换画面的繁琐操作。
在上述步骤中，通过在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息；响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。从而实现了在同一窗口内展示多个功能页面的技术效果，进而解决了相关技术不支持通过单个窗口同时打开多个功能页面技术问题。
进一步地，在通过目标窗口相关联的目标内容块中展示目标模块信息之后，还可以对调节目标内容块的大小进行调节。
作为一种可选的实施方式，可以通过如下步骤S11-S13实现对目标内容块大小的调节：
步骤S11，获取目标功能模块移动至目标内容块时目标接触点在目标内容块的第一驻留坐标，以及目标接触点的移动位置，其中，目标接触点用于选中并移动目标功能模块。
其中，当用户手动触摸的方式在可触摸显示屏幕上选中并移动目标功能模块至目标内容块时，目标接触点为手指与可触摸屏的接触点；当用户使用鼠标在终端设备的显示屏幕上选中并移动目标功能模块至目标内容块时，目标接触点为鼠标操作点。
步骤S12，基于第一驻留坐标和移动位置确定目标页面的目标划分方式，以及目标分割线在目标页面中的位置，其中，目标划分方式包括：水平划分和垂直划分。
图4是根据本申请实施例的一种可选的多窗口分割画面的原理示意图，如图4所示，当用户点击并拖动模块入口1时，确定目标接触点选中模块入口1的第一驻留坐标，且目标接触点的移动位置为内容块1的上方或者下发时，即对将内容块1进行上下分割，此时可以确定目标页面的划分方式为水平分割，以及目标分割线在目标页面中的位置，其中，目标分割线为水平分割线。
又或者，当目标接触点的移动位置为内容块1的左方或者右方时，即对将内容块1进行左右分割，此时可以确定目标页面的划分方式为垂直分割，其中，目标分割线为垂直分割线。
步骤S13，响应于第二操作指令，通过调节目标分割线在目标页面内的位置，对目标内容块的大小进行调节。
其中，上述第二操作指令用于指示调节目标分割线在目标页面中的位置。
可选地，在目标划分方式为水平划分时，确定目标分割线为水平分割线，并通过调整水平分割线在目标页面的垂直方向上的位置调节目标内容块的大小；在目标划分方式为垂直划分时，确定目标分割线为垂直分割线，并通过调整垂直分割线在目标页面的水平方向上的位置调节目标内容块的大小。
在确定内容块的大小后，可以对整个目标页面的布局进行设置。下面将对目标页面的布局进行进一步地说明。
将监控系统中用于展示内容的区域称为第一布局块(即内容块)，若对第一布局块在水平方向的分割，则可以得到上下两个子布局块，且划分得到的两个子布局块之间包含一条水平分割线，其中，水平分割线宽度为第一布局块的宽度，并设置水平分割线的高度为4px(pixel)。同时，分割所得的上下两个布局容块宽度与第一布局块的宽度相同，高度为第一布局块的高度减去4px所得差值的一半，且上下两个子布局块的大小完全一致，此时目标页面的布局模式为1*2，且用户可以通过调节水平分割线在目标页面Y轴上的位置来重新设置两个子内容块的高度，从而改变上下两个子布局块的大小。
若对第一布局块在垂直方向的分割，则可以得到左右两个子布局块，且划分得到的两个子布局块之间包含一条垂直分割线，其中，垂直分割线的高度为第一布局块的高度，并设置垂直分割线的宽度为4px。同时，分割所得的左右两个子布局块的高度与第一布局块的高度相同，宽度为第一布局块的宽度减去4px之后的1/2所得差值的一半，且两个布局块的大小完全一致，此时目标页面的布局模式为2*1，且用户可以通过调节垂直分割线在目标页面X轴上的位置来重新设置两个子布局块的高度，从而改变左右子布局块的大小。
需要说明的是，在实际应用过程中，目标页面的页面布局可以在1*2或者2*1布局的基础上，重复上述操作，从而将以划分的上下两个子内容块或者左右两个子内容块进行水平或者垂直方向上的分割，得到1*3或者2*2等多种布局方式，例如，图5所示的页面布局是2*2的布局方式，其整个目标页面内共显示四个布局块。
另外，本申请实施例在进行窗口展示时，由于窗口模式可以分为浮动窗口和非浮动窗口，因此，可以按照如下规则分别对浮动窗口和非浮动窗口设置相应的层叠样式表，使其达到预期的展示效果。
作为一种可选的实施方式，在目标窗口的窗口模式为非浮动窗口时，确定非浮动窗口的第一尺寸和第一定位属性，并通过窗口标识将非浮动窗口与第一内容块相关联，其中，第一尺寸包括：第一宽度和第一高度，第一定位属性包括：第一左边距和第一上边距，且第一定位属性为绝对定位。
可选地，可以按照如下方式确定非浮动窗口的第一尺寸和第一定位属性：通过第一函数获取非浮动窗口的第一尺寸，第一内容块相对于交互界面可视区域的第一位置信息，以及目标页面的内容显示区域相对于交互界面可视区域的第二位置信息；基于第一位置信息和第二位置信息确定非浮动窗口的第一定位属性。
其中，上述第一内容块相对于交互界面可视区域的第一位置信息，以及目标页面的内容显示区域的第二位置信息均通过左顶点的上边距和左边距进行确定。
具体地，图6是根据本申请实施例的一种可选的不浮动窗口定位的示意图，结合图6，通过如下步骤S21-S24实现对非浮动窗口设置相应的层叠样式表(即确定非浮动窗口的第一尺寸和第一定位属性)：
步骤S21，将目标页面的内容显示区域的定位属性设置为相对定位，并将非浮动窗口的第一定位属性设置为绝对定位；
其中，在绝对定位状态下，目标页面内的所有非浮动窗口的左顶点与目标页面的内容显示区域的左顶点重叠；
步骤S22，通过调用一个第一内容块(c1)中的dom元素的getBoundingClientRect函数，得到c1的第一高度(height1)和第一宽度(width1)，以及c1相对于交互界面可视区域的的左顶点的上边距和左边距(即第一位置信息)，其中，上边距用top1标识，左边距用left1标识；
步骤S23，通过调用目标页面的内容显示区域中的dom元素的getBoundingClientRect函数，得到目标页面的内容显示区域相对于交互界面可视区域的左顶点的上边距和左边距(即第二位置信息)，其中，上边距用top2标识，左边距用left2标识；
步骤S24，将top1-top2的差值作为c1相对于交互界面可视区域左顶点的上边距，并将left1-left2的差值作为c1相对于交互界面可视区域左顶点的左边距，同时，将非浮动窗口的宽度为c1的第一宽度，非浮动窗口的高度为c1的第一高度。
需要说明的是，可以通过反复执行上述步骤S21-S24实现对目标页面内全部不浮动窗口的第一尺寸和第一定位属性的设置，使其达到最终效果。
作为另一种可选的实施方式，在目标窗口的窗口模式为浮动窗口时，确定浮动窗口的第二尺寸和第二定位属性，并确定浮动窗口与第二内容块相关联，其中，第二尺寸包括：第二宽度、第二高度，第二定位属性包括：第二左边距和第二上边距，且第二定位属性为固定定位。
具体地，图7是根据本申请实施例的一种可选的不浮动窗口定位的示意图，如图7所示，浮动窗口在生成时，其第二尺寸和第二定位属性是已经确定的，因此，在对浮动窗口进行设置时，只需要设置其第二定位属性为固定定位即可。
另外，浮动窗口与目标页面的内容显示区域不属于同一层级，因此，当目标页面内存在读个浮动窗口时，可以通过对浮动窗口设置层级样式z-index，避免发生浮动窗口重叠的情况发生。
可选地，在确定浮动窗口的第二尺寸和第二定位属性之后，包括：设置浮动窗口的第一层级属性。
例如，获取交互界面打开浮动窗口时浮动窗口的默认初始层级，如将所有浮动窗口的默认初始层级设置为50；在后续每生成一个浮动窗口时，对新生成的浮动窗口的层级进行加1，从而可以防止出现窗口相互重叠。
遍历所有浮动窗口，若用户通过鼠标选中某个位于下层的浮动窗口时，可以将选中的浮动窗口调整至目标页面内所有浮动窗口的最后，并继续重新生成其他新的浮动窗口，其中，最后一个浮动窗口层级最高。
在完成对浮动窗口和非浮动窗口的层叠样式表之后，本申请实施例还在进行内容展示时，可以根据窗口模式的不同，采用不同的展示方式进行内容展示。
作为一种可选的实施方式，确定目标窗口的窗口模式，并采用目标形式在目标页面内打开至少一个目标窗口，其中，在窗口模式为非浮动窗口时，将非浮动窗口拆分为第一头部与第一主体，在非浮动窗口内展示第一头部，并依据第一尺寸和第一定位属性在第一内容块中展示第一主体。
图8是根据本申请实施例的一种可选的浏览器多页签展示的示意图，如图8所示，当采用如浏览器多页签的形式在目标页面内展示多个窗口的标签页，其中，用户可以通过点击不同的标签页从而在浏览器的目标页面内展示对应的页面内容，方便用户直观进行查看。
可选地，可以按照如下规则展示非浮动窗口的第一主体：获取非浮动窗口的第一尺寸和第一定位属性；确定非浮动窗口的第一头部的第一头部高度；基于第一头部高度和第一尺寸确定第一主体的第三尺寸，并依据第一定位属性和第一头部高度确定第一主体的第三定位属性。
具体地，当通过标签页的形式展示窗口时，图9是根据本申请实施例的一种可选的第一主体定位的示意图，结合图9，通过如下步骤S31-S35实现对非浮动窗口的页签内容的定位：
步骤S31，在非浮动窗口内展示第一头部(即页签头部信息)，并确定第一头部的第一头部高度(h1)；
步骤S32，将目标页面的内容显示区域的定位属性设置为相对定位，并将非浮动窗口的第一定位属性设置为绝对定位；
其中，在绝对定位状态下，目标页面内的所有非浮动窗口的页签内容左顶点与目标页面的内容显示区域的左顶点重叠；
步骤S33，对于一个第一主体t1(即页签内容)，可以通过窗口ID找到关联的非浮动窗口w1，并调用非浮动窗口w1的dom元素的getBoundingClientRect函数，得到非浮动窗口的第一高度(height1)和第一宽度(width1)，以及w1相对于交互界面可视区域的上边距和左边距(即第一位置信息)，其中，上边距用top1标识，左边距用left1标识；
步骤S34，调用目标页面的内容显示区域dom元素的getBoundingClientRect函数，得到目标页面的内容显示区域相对于交互界面可视区域的左顶点的上边距(top2)和左边距(left2)；
步骤S35，将height1-h1的差值作为第一主体t1的第三高度，并将非浮动窗口的第一宽度width1作为第一主体t1的第三宽度，同时，将top1-top2+h1的结果值作为第一主体t1的上边距，并将left1-left2的差值作为第一主体t1的左边距。
需要说明的是，可以通过反复执行上述步骤S31-S35实现对目标页面内全部不浮动窗口的第三尺寸和第三定位属性的设置，使其达到最终的展示效果。
另外，当第一主体展示完毕后，可能会在同一个非浮动窗口内存在多个内容相互重复的情况发生，因此，在本申请实施例中，为了避免上述问题，还可以依据非浮动窗口的第一头部对应的标签ID，将同一非浮动窗口下，与该标签ID不匹配的所有第一主体的层级属性z-index设为-1，从而在该非浮动窗口内正确展示当前选中第一头部所对应的内容。
作为另一种可选的实施方式，在窗口为浮动窗口时，依据第二尺寸和第二定位属性在第二内容块中展示浮动窗口的第二主体。
可选地，依据第二尺寸和第二定位属性在第二内容块中展示浮动窗口的第二主体，包括：确定浮动窗口的第二头部的第二头部高度；基于第二头部高度和第二尺寸确定第二主体的第四尺寸，并依据第二定位属性和第二头部高度确定第二主体的第四定位属性。
具体地，浮动窗口的第二主体的定位可以基于浮动窗口生成时已知的属性值进行确定。图10是根据本申请实施例的一种可选的第二主体定位的示意图，结合图10，通过如下步骤S41-S44实现对浮动窗口的页签内容的定位：
步骤S41，确定浮动窗口的第二头部的第二头部高度(h2)；
步骤S42，将浮动窗口的第二定位属性设置为固定定位；
步骤S43，对于一个第二主体t2(页签内容)，可以通过窗口id找到关联的浮动窗口w2的dom元素，并调用浮动窗口w2的dom元素的getBoundingClientRect函数，得到浮动窗口的第二高度(height2)和第二宽度(width2)，以及w2相对于交互界面可视区域的上边距和左边距(即第二位置信息)，其中，上边距用top标识，左边距用left标识；
步骤S44，将第二高度height2-h2的差值作为第二主体的第二高度，并将第二宽度width2作为第二主体的第二宽度；同时，将第二位置信息中的top+h2之和作为第二主体的上边距，并将第二位置信息中的left作为第二主体的左边距。
需要说明的是，可以通过反复执行上述步骤S41-S44实现对目标页面内全部浮动窗口的第四尺寸和第四定位属性的设置，使其达到最终的展示效果。
另外，当第二主体展示完毕后，可能会在同一个浮动窗口内存在多个内容相互重复的情况发生，并且由于浮动窗口本身包含层级属性z-index，因此，在本申请实施例中，为了避免上述问题，还可以依据浮动窗口的第二头部对应的标签ID，将同一浮动窗口下与该标签ID不匹配的所有第一主体的层级属性z-index设为-1，匹配的设置为z1，从而在该非浮动窗口内正确展示当前选中第一头部所对应的内容。
在本申请实施例中，在设置完窗口展示模式和内容展示之后，还可以依据用户的实际需求将非浮动窗口拖拽为浮动窗口，或者将浮动窗口追加到某个非浮动窗口。
作为一种可选的实施方式，响应于第三操作指令，在目标窗口的窗口模式为非浮动窗口时，确定将窗口模式切换为浮动窗口；或者，在目标窗口的窗口模式为浮动窗口时，确定将窗口模式切换为非浮动窗口。
其中，上述第三操作指令用于指示对目标窗口的窗口模式进行切换。
可选地，在目标窗口的窗口模式为非浮动窗口时，可以按照如下规则实现窗口模式的切换：响应于第一窗口选择指令，通过目标接触点从目标页面多个窗口中选择至少一个非浮动窗口，并确定目标接触选中非浮动窗口的第二驻留坐标；获取目标接触点的第三驻留坐标；基于第二驻留坐标和第三驻留坐标确定目标接触点的第一垂直偏移量，并在第一垂直偏移量超过第一头部的第一头部高度时，确定将非浮动窗口切换为浮动窗口。
图11是根据本申请实施例的一种可选的非浮动窗口切换为浮动窗口的示意图，如图11所示。监控系统可以接收并响应来自用户发送的第一窗口选择指令，通过目标接触点从目标页面多个窗口中选择非浮动窗口2，并为非浮动窗口2绑定鼠标按下事件mousedown；当鼠标被按下时，记录鼠标点击非浮动窗口2的第二驻留坐标(x1，y1)，并对非浮动窗口2绑定鼠标移动事件mousemove，其中，鼠标移动事件mousemove在鼠标按下并移动时，会频繁触发，且每次触发时都可以获取当时鼠标的位置；获取目标接触点的第三驻留坐标(x2，y2)；通过第二驻留坐标和第三驻留坐标计算y2-y1得到目标接触点的第一垂直偏移量(即y轴偏移量distanceY)，并在第一垂直偏移量超过非浮动窗口2的第一头部高度时，确定将非浮动窗口2切换为浮动窗口1。
另外，还可以将非浮动窗口内的页签顺序进行调换，从而实现同一窗口内多个页面切换。
可选地，可以基于第二驻留坐标和第三驻留坐标确定目标接触点的第一水平偏移量；在第一水平偏移量超过第一宽度的一半时，确定对第一头部的顺序进行调换。
例如，图12是根据本申请实施例的一种可选的非浮动窗口的页签顺序交换的示意图，如图12所示。通过第二驻留坐标和第三驻留坐标计算x2-x1得到目标接触点的第一水平偏移量(x轴偏移量)；当第一水平偏移量的绝对值超过非浮动窗口2的第一宽度的一半时，确定对不浮动窗帘的页签(即第一头部)的顺序进行调换。
可选地，在目标窗口的窗口模式为浮动窗口时，可以按照如下规则实现窗口模式的切换：响应于第二窗口选择指令，通过目标接触点从目标页面内的多个窗口中选择至少一个浮动窗口，并确定浮动窗口相关联的第二内容块相对于目标页面的内容显示区域的第三位置信息；依据第三位置信息确定浮动窗口对应的第二文本对象模型，并在第二文本对象模型为非浮动窗口的第一头部的元素时，确定将浮动窗口切换为非浮动窗口。
另外，由于浮动窗口在被目标接触点选中并移动时，仅对浮动窗口的位置进行更新，而不会发生滑动。因此，可以通过如下方式实现浮动窗口移动的效果：确定目标接触点选择浮动窗口的第四驻留坐标；获取目标接触点的第五驻留坐标；基于第四驻留坐标和第五驻留坐标确定浮动窗口的第二水平偏移量和第二垂直偏移量；依据第二水平偏移量和第二垂直偏移量更新浮动窗口的第二定位属性。
图13是根据本申请实施例的一种可选的浮动窗口切换为非浮动窗口的示意图，如图13所示。监控系统可以接收并响应来自用户发送的第二窗口选择指令，通过目标接触点从目标页面多个窗口中选择浮动窗口1，并为浮动窗口1绑定鼠标按下事件mousedown；当鼠标被按下时，记录鼠标点击浮动窗口1的第四驻留坐标(x3，y3)，并对浮动窗口1绑定鼠标移动事件mousemove，其中，鼠标移动事件mousemove在鼠标按下并移动时，会频繁触发，且每次触发时都可以获取当时鼠标的位置；获取目标接触点的第五驻留坐标(x4，y4)；通过第四驻留坐标和第五驻留坐标计算y2-y1得到目标接触点的第二垂直偏移量(即y轴偏移量distanceY)，并计算x2-x1得到目标接触点的第二水平偏移量(x轴偏移量)；通过计算第二水平偏移量和浮动窗口的第二左边距之和对浮动窗口的第二左边距进行更新，并通过计算第二垂直偏移量和浮动窗口的第二上边距之和对浮动窗口的第二上边距进行更新。从而实现浮动窗口滑动的效果。
而在鼠标移动事件mousemove被触发时，可以通过浮动窗口dom元素getBoundingClientRect函数，获取浮动窗口相关联的第二内容块相对目标页面可视区域的第三位置信息，其中，第三位置信息中至少包括：上边距和左边距。浮动窗口1在移动时，可以通过document。elementFromPoint()方法获取第三位置信息对应的dom元素，并判断该dom元素是否为非浮动窗口的多页签头部元素，若是，则将该浮动窗口1的页签追加至非浮动窗口内，之后更新数据重新渲染。
在本申请实施例中，还可以对目标页面内的窗口大小进行调节，同时窗口内容会跟随窗口大小进行自适应调整。
作为一种可选的实施方式，响应于第四操作指令，在目标窗口的窗口模式为非浮动窗口时，依据第一内容块的大小对非浮动窗口的第一窗口大小进行调节；或者，在目标窗口的窗口模式为浮动窗口时，直接对浮动窗口的第二窗口大小进行调节。
上述第四操作指令用于对目标页面内的窗口大小进行调节。其中，由于不浮动窗口的位置与大小是基于第一内容块的位置和大小计算而来，而不浮动窗口内展示的多页签内容是依据不浮动窗口的宽高和位置计算而来，因此，对不浮动窗口以及第一主体调节的关键在于监听第一内容块的大小变化。
可选地，依据第一内容块的大小对非浮动窗口的第一窗口大小进行调节，包括：创建监听实例，其中，监听实例用于监听并确定第一内容块内的第一文本对象模型的第一变化；依据第一变化对第一主体的第三尺寸和第三定位属性进行调节；依据第二函数确定非浮动窗口的第一头部的第二变化，并按照第二变化对第一头部中的显示内容进行调节。
具体地，可以按照如下步骤S51-53实现对不浮动窗口的窗口大小进行调整：
步骤S51，在第一内容块的dom元素上，可以采用Resizeobserver函数创建一个监听dom元素大小变化的监听实例resizeObserver，监听实例resizeObserver再调用observer函数，将监听的dom元素大小变化传入第一内容块的dom元素中；
步骤S52，当用户移动目标分割线时，第一内容块的大小会发生响应的变化，此时，resize函数会被触发，并通过getBoundingClientRect函数实时获取第一内容块的第一尺寸以及第一内容块相对目标页面可视区域左顶点的位置信息，从而对第一内容块的第三和第三定位属性进行更新；
其中，getBoundingClientRect函数用于提供元素的大小以及其相对于视口的位置。
步骤S53，调用Resizeobserver函数监听第一头部的大小变化，依据第一头部的大小变化对第一头部内的页面内容进行自适应调整。
需要说明的是，浮动窗口的窗口大小与第二内容块无关，因此，可以通过拖拽浮动窗口的第二头部的四条边框实现对浮动窗口的窗口大小调整。同时，调用Resizeobserver函数监听第二头部的大小变化，依据第二头部的大小变化对第二头部内的页面内容进行自适应调整。
在上述步骤中，本申请可以通过拖拽功能模块至窗口所在的窗口区域内，实现快速窗口分割；另外，采用类似标签页的目标形式在同一窗口内可以打开多个功能模块对应的功能页面，有效提升同时展示功能页面的数量，同时，采用目标形式的方式在打开的多个功能页面之间进行切换，原有的页面状态不会发生变化；此外，本申请还可以实现同非浮动窗口下多个标签页的顺序调整，并通过拖拽实现窗口模式的切换，依次凸显重要窗口的页面内容，也方便用户在不同窗口之间移动浮动窗口，增加交互界面的易用性。
实施例2
当前，相关多窗口布局技术在进行窗口分割时，通常是用户先选中某个窗口，然后点击固定的切分数量按钮对选择窗口进行分割，分割后新产生的多个窗口内待展示的页面内容还需要用户再进行手动选择。因此，整个分割操作流程较为繁琐，缺乏易用性。
为了解决该问题，本申请实施例中提供了相关的解决方案，以下详细说明。
根据本申请实施例，提供了一种窗口分割方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
图14是根据本申请实施例的一种可选的窗口分割方法的示意图，如图14所示，该方法至少包括步骤S202-S204，其中：
步骤S202，在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，其中，模块信息中包括：模块布局信息和模块数据信息。
步骤S204，响应于窗口划分指令，通过移动交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，内容块为目标页面中多个内容块的任一内容块。
其中，上述交互界面包括但不仅限于应用APP的显示界面或者浏览器显示界面。
通常，当用户在浏览器内查看监控系统的多个信息内容时，需要通过分别打开多窗口，并在每个窗口内展示交互界面中的一个功能模块对应的功能页面，因此，在用户对功能页面进行切换时，在新功能页面打开的同时，原有的功能页面会被关闭，从而导致无法通过同一窗口展示多个功能模块的功能页面。为此，本申请实施例提出了可以通过目标页面中的多个窗口分别展示不同的功能模块的功能页面，从而为同一屏幕上展示多个功能模块提供了基础。
作为一种可选的实施方式，响应于功能模块选择指令，从交互界面中的多个功能模块中选择至少一个目标功能模块，设置目标功能模块为可移动属性，并记录目标功能模块的目标模块信息；响应于功能模块移动指令，将目标功能模块移动至目标窗口相关联的目标内容块处，得到多个窗口。
具体地，当监控系统接收并响应来自用户输入的功能模块选择指令时，首先从交互界面内的多个功能模块中选择至少一个目标功能模块，同时，通过设置Draggable属性将目标功能模块设置为可拖拽，并对目标功能模块绑定DragStart事件和DragEnd事件，其中，DragStart事件在目标功能模块被移动时被触发，触发时会在全局设置拖拽数据，并记录该目标功能模块的目标模块信息，而DragEnd事件在目标功能模块被放置时被触发；接着，当用户拖拽目标功能模块至目标窗口时，立刻对目标窗口相关联的目标内容块绑定DragEnter事件，其中，DragEnter事件在将目标功能模块拖拽至目标内容块被触发；然后，目标功能模块会以元素占位的方式在目标内容块内展示相应的目标模块信息，从而实现对新增目标窗口的划分。
实施例3
根据本申请实施例，还提供了一种用于实现上述实施例1中的多窗口页面展示方法的多窗口页面展示装置，图15是根据本申请实施例的一种多窗口页面展示装置的结构示意图；如图15所示，该装置至少包括：第一展示模块151和第一响应模块152，其中：
第一展示模块151，用于在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息。
第一响应模块152，用于响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。
需要说明的是，上述多窗口页面展示装置中的各个模块可以是程序模块(例如是实现某种特定功能的程序指令集合)，也可以是硬件模块，对于后者，其可以表现为以下形式，但不限于此：上述各个模块的表现形式均为一个处理器，或者，上述各个模块的功能通过一个处理器实现。
另外，本申请实施例中的多窗口页面展示装置中的各模块与实施例1中的多窗口页面展示方法的各实施步骤一一对应，由于实施例1中已经进行了详尽的描述，本实施例中部分未体现的细节可以参考实施例1，在此不再过多赘述。
实施例4
根据本申请实施例，还提供了一种用于实现上述实施例2中的窗口分割方法的窗口分割装置，图16是根据本申请实施例的一种可选的窗口分割装置的结构示意图，如图16所示，该装置至少包括：第二展示模块161和第二响应模块162，其中：
第二展示模块161，用于在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，其中，模块信息中包括：模块布局信息和模块数据信息。
第二响应模块162，用于响应于窗口划分指令，通过移动交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，内容块为目标页面中多个内容块的任一内容块。
需要说明的是，上述窗口分割装置中的各个模块可以是程序模块(例如是实现某种特定功能的程序指令集合)，也可以是硬件模块，对于后者，其可以表现为以下形式，但不限于此：上述各个模块的表现形式均为一个处理器，或者，上述各个模块的功能通过一个处理器实现。
另外，本申请实施例中的窗口分割装置中的各模块与实施例2中的窗口分割方法的各实施步骤一一对应，由于实施例1中已经进行了详尽的描述，本实施例中部分未体现的细节可以参考实施例1，在此不再过多赘述。
实施例5
根据本申请实施例，还提供了一种非易失性存储介质，该非易失性存储介质包括存储的程序，其中，在程序运行时控制非易失性存储介质所在设备执行实施例1中的多窗口页面展示方法或者实施例2中的窗口分割方法。
可选地，在程序运行时控制非易失性存储介质所在设备执行实现以下步骤：
步骤S102，在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息。
步骤S104，响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。
可选地，在程序运行时控制非易失性存储介质所在设备执行实现以下步骤：
步骤S202，在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，其中，模块信息中包括：模块布局信息和模块数据信息。
步骤S204，响应于窗口划分指令，通过移动交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，内容块为目标页面中多个内容块的任一内容块。
根据本申请实施例，还提供了一种处理器，该处理器用于运行程序，其中，程序运行时执行实施例1中的多窗口页面展示方法或者实施例2中的窗口分割方法。
可选地，程序运行时执行实现以下步骤：
步骤S102，在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息。
步骤S104，响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。
可选地，程序运行时执行实现以下步骤：
步骤S202，在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，其中，模块信息中包括：模块布局信息和模块数据信息。
步骤S204，响应于窗口划分指令，通过移动交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，内容块为目标页面中多个内容块的任一内容块。
根据本申请实施例，还提供了一种电子设备，该电子设备包括：存储器和处理器，该处理器用于运行存储在存储器中的程序，其中，程序运行时执行实施例1中的多窗口页面展示方法或者实施例2中的窗口分割方法。
可选地，程序运行时执行实现以下步骤：
步骤S102，在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，模块信息中包括：模块布局信息和模块数据信息。
步骤S104，响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，目标内容块为目标页面中多个内容块中的任一内容块。
可选地，程序运行时执行实现以下步骤：
步骤S202，在交互界面中展示目标页面，其中，目标页面中包括至少一个窗口，窗口用于展示交互界面中各个功能模块对应的模块信息，其中，模块信息中包括：模块布局信息和模块数据信息。
步骤S204，响应于窗口划分指令，通过移动交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，内容块为目标页面中多个内容块的任一内容块。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对相关技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。
Claims (23)
1.一种多窗口页面展示方法，其特征在于，包括：
在交互界面中展示目标页面，其中，所述目标页面中包括至少一个窗口，所述窗口用于展示所述交互界面中各个功能模块对应的模块信息，所述模块信息中包括：模块布局信息和模块数据信息；
响应于第一操作指令，采用目标形式在目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，所述目标内容块为所述目标页面中多个内容块中的任一所述内容块。
2.根据权利要求1所述的方法，其特征在于，采用目标形式在所述目标窗口相关联的目标内容块中展示至少一个功能模块对应的模块信息，包括：
响应于功能模块选择指令，从所述交互界面中的多个功能模块中选择至少一个所述目标功能模块，设置所述目标功能模块为可移动属性，并记录所述目标功能模块的目标模块信息；
响应于功能模块移动指令，将所述目标功能模块移动至所述目标窗口；
采用所述目标形式在所述目标窗口相关联的所述目标内容块中展示所述目标模块信息。
3.根据权利要求2所述的方法，其特征在于，在采用所述目标形式在所述目标窗口相关联的所述目标内容块中展示所述目标模块信息之后，所述方法还包括：
获取所述目标功能模块移动至所述目标内容块时目标接触点在所述目标内容块的第一驻留坐标，以及所述目标接触点的移动位置，其中，所述目标接触点用于选中并移动所述目标功能模块；
基于所述第一驻留坐标和所述移动位置确定所述目标页面的目标划分方式，以及目标分割线在所述目标页面中的位置，其中，所述目标划分方式包括：水平划分和垂直划分；
响应于第二操作指令，通过调节所述目标分割线在所述目标页面内的位置，对所述目标内容块的大小进行调节。
4.根据权利要求3所述的方法，其特征在于，通过调节所述目标分割线在所述目标页面内的位置，对所述目标内容块的大小进行调节，包括：
在所述目标划分方式为水平划分时，确定所述目标分割线为水平分割线，并通过调整所述水平分割线在所述目标页面的垂直方向上的位置调节所述目标内容块的大小；
在所述目标划分方式为垂直划分时，确定所述目标分割线为垂直分割线，并通过调整所述垂直分割线在所述目标页面的水平方向上的位置调节所述目标内容块的大小。
5.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在所述目标窗口的窗口模式为非浮动窗口时，确定所述非浮动窗口的第一尺寸和第一定位属性，并通过窗口标识将所述非浮动窗口与第一内容块相关联，其中，所述第一尺寸包括：第一宽度和第一高度，所述第一定位属性包括：第一左边距和第一上边距，且所述第一定位属性为绝对定位；
在所述目标窗口的窗口模式为浮动窗口时，确定所述浮动窗口的第二尺寸和第二定位属性，并确定所述浮动窗口与第二内容块相关联，其中，所述第二尺寸包括：第二宽度、第二高度，所述第二定位属性包括：第二左边距和第二上边距，且所述第二定位属性为固定定位。
6.根据权利要求5所述的方法，其特征在于，确定所述非浮动窗口的第一尺寸和第一定位属性，包括：
通过第一函数获取所述非浮动窗口的第一尺寸，所述第一内容块相对于交互界面可视区域的第一位置信息，以及目标页面的内容显示区域相对于所述交互界面可视区域的第二位置信息；
基于所述第一位置信息和所述第二位置信息确定所述非浮动窗口的第一定位属性。
7.根据权利要求5所述的方法，其特征在于，在确定所述浮动窗口的第二尺寸和第二定位属性之后，所述方法还包括：
设置所述浮动窗口的第一层级属性。
8.根据权利要求5所述的方法，其特征在于，采用所述目标形式在所述目标窗口相关联的所述目标内容块中展示所述目标模块信息，包括：
确定所述目标窗口的窗口模式，并采用所述目标形式在所述目标页面内打开至少一个所述目标窗口，其中，
在所述窗口模式为所述非浮动窗口时，将所述非浮动窗口拆分为第一头部与第一主体，在所述非浮动窗口内展示所述第一头部，并依据所述第一尺寸和所述第一定位属性在所述第一内容块中展示所述第一主体；
在所述窗口为所述浮动窗口时，依据所述第二尺寸和所述第二定位属性在第二内容块中展示所述浮动窗口的第二主体。
9.根据权利要求8所述的方法，其特征在于，依据所述第一尺寸和所述第一定位属性在所述第一内容块中展示所述第一主体，包括：
获取所述非浮动窗口的所述第一尺寸和所述第一定位属性；
确定所述非浮动窗口的第一头部的第一头部高度；
基于所述第一头部高度和所述第一尺寸确定所述第一主体的第三尺寸，并依据所述第一定位属性和所述第一头部高度确定所述第一主体的第三定位属性。
10.根据权利要求8所述的方法，其特征在于，依据所述第二尺寸和所述第二定位属性在第二内容块中展示所述浮动窗口的第二主体，包括：
确定所述浮动窗口的第二头部的第二头部高度；
基于所述第二头部高度和所述第二尺寸确定所述第二主体的第四尺寸，并依据所述第二定位属性和所述第二头部高度确定所述第二主体的第四定位属性。
11.根据权利要求8所述的方法，其特征在于，所述方法还包括：
响应于第三操作指令，在所述目标窗口的窗口模式为所述非浮动窗口时，确定将所述窗口模式切换为所述浮动窗口；
或者，在所述目标窗口的窗口模式为所述浮动窗口时，确定将所述窗口模式切换为所述非浮动窗口。
12.根据权利要求11所述的方法，其特征在于，在所述目标窗口的窗口模式为所述非浮动窗口时，确定将所述窗口模式切换为所述浮动窗口，包括：
响应于第一窗口选择指令，通过目标接触点从所述目标页面多个窗口中选择至少一个所述非浮动窗口，并确定所述目标接触选中所述非浮动窗口的第二驻留坐标；
获取所述目标接触点的第三驻留坐标；
基于所述第二驻留坐标和所述第三驻留坐标确定所述目标接触点的第一垂直偏移量，并在所述第一垂直偏移量超过所述第一头部的第一头部高度时，确定将所述非浮动窗口切换为所述浮动窗口。
13.根据权利要求12所述的方法，其特征在于，在确定将所述窗口模式切换为所述浮动窗口之后，所述方法还包括：
基于所述第二驻留坐标和所述第三驻留坐标确定所述目标接触点的第一水平偏移量；
在所述第一水平偏移量超过所述第一宽度的一半时，确定对所述第一头部的顺序进行调换。
14.根据权利要求11所述的方法，其特征在于，在所述目标窗口的窗口模式为所述浮动窗口时，确定将所述窗口模式切换为所述非浮动窗口，包括：
响应于第二窗口选择指令，通过目标接触点从所述目标页面内的多个窗口中选择至少一个所述浮动窗口，并确定所述浮动窗口相关联的第二内容块相对于所述目标页面的内容显示区域的第三位置信息；
依据所述第三位置信息确定所述浮动窗口对应的第二文本对象模型，并在所述第二文本对象模型为所述非浮动窗口的第一头部的元素时，确定将所述浮动窗口切换为所述非浮动窗口。
15.根据权利要求11所述的方法，其特征在于，在确定将所述窗口模式切换为所述非浮动窗口之前，所述方法还包括：
确定所述目标接触点选择所述浮动窗口的第四驻留坐标；
获取所述目标接触点的第五驻留坐标；
基于所述第四驻留坐标和所述第五驻留坐标确定所述浮动窗口的第二水平偏移量和第二垂直偏移量；
依据所述第二水平偏移量和所述第二垂直偏移量更新所述浮动窗口的第二定位属性。
16.根据权利要求5所述的方法，其特征在于，所述方法还包括：
响应于第四操作指令，在所述目标窗口的窗口模式为所述非浮动窗口时，依据所述第一内容块的大小对所述非浮动窗口的第一窗口大小进行调节；
或者，在所述目标窗口的窗口模式为所述浮动窗口时，直接对所述浮动窗口的第二窗口大小进行调节。
17.根据权利要求9所述的方法，其特征在于，依据所述第一内容块的大小对所述非浮动窗口的第一窗口大小进行调节，包括：
创建监听实例，其中，所述监听实例用于监听并确定所述第一内容块内的第一文本对象模型的第一变化；
依据所述第一变化对所述第一主体的第三尺寸和第三定位属性进行调节；
依据第二函数确定所述非浮动窗口的第一头部的第二变化，并按照所述第二变化对所述第一头部中的显示内容进行调节。
18.一种窗口分割方法，其特征在于，包括：
在交互界面中展示目标页面，其中，所述目标页面中包括至少一个窗口，所述窗口用于展示所述交互界面中各个功能模块对应的模块信息，其中，所述模块信息中包括：模块布局信息和模块数据信息；
响应于窗口划分指令，通过移动所述交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，所述内容块为所述目标页面中多个内容块的任一所述内容块。
19.根据权利要求18所述的方法，其特征在于，通过移动所述交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，包括：
响应于功能模块选择指令，从所述交互界面中的多个功能模块中选择至少一个所述目标功能模块，设置所述目标功能模块为可移动属性，并记录所述目标功能模块的目标模块信息；
响应于功能模块移动指令，将所述目标功能模块移动至所述目标窗口相关联的目标内容块处，得到多个所述窗口。
20.一种多窗口页面展示装置，其特征在于，包括：
第一展示模块，用于在交互界面中展示目标页面，其中，所述目标页面中包括至少一个窗口，所述窗口用于展示所述交互界面中各个功能模块对应的模块信息，所述模块信息中包括：模块布局信息和模块数据信息；
第一响应模块，用于响应于第一操作指令，采用目标形式在所述目标窗口相关联的目标内容块中展示至少一个目标功能模块的模块信息，其中，所述目标内容块为所述目标页面中多个内容块中的任一所述内容块。
21.一种窗口分割装置，其特征在于，包括：
第二展示模块，用于在交互界面中展示目标页面，其中，所述目标页面中包括至少一个窗口，所述窗口用于展示所述交互界面中各个功能模块对应的模块信息，其中，所述模块信息中包括：模块布局信息和模块数据信息；
第二响应模块，用于响应于窗口划分指令，通过移动所述交互界面内的任一功能模块至窗口相关联的内容块处，得到多个窗口，其中，所述内容块为所述目标页面中多个内容块的任一所述内容块。
22.一种非易失性存储介质，其特征在于，所述非易失性存储介质中存储有程序，其中，在所述程序运行时控制所述非易失性存储介质所在设备执行权利要求1至17中任意一项所述的多窗口页面展示方法或者权利要求18至19中任意一项所述的窗口分割方法。
23.一种电子设备，其特征在于，包括：存储器和处理器，所述处理器用于运行存储在所述存储器中的程序，其中，所述程序运行时执行权利要求1至17中任意一项所述的多窗口页面展示方法或者权利要求18至19中任意一项所述的窗口分割方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310298396.1A CN116450268A (zh) | 2023-03-23 | 2023-03-23 | 多窗口页面展示方法及装置、窗口分割方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310298396.1A CN116450268A (zh) | 2023-03-23 | 2023-03-23 | 多窗口页面展示方法及装置、窗口分割方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116450268A true CN116450268A (zh) | 2023-07-18 |
Family
ID=87134874
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310298396.1A Pending CN116450268A (zh) | 2023-03-23 | 2023-03-23 | 多窗口页面展示方法及装置、窗口分割方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116450268A (zh) |
-
2023
- 2023-03-23 CN CN202310298396.1A patent/CN116450268A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110716680B (zh) | 智能交互平板的控制方法和装置 | |
| US11106339B2 (en) | Designing and resizing graphical user interfaces | |
| JP7320634B2 (ja) | 知能インタラクション・タブレットの操作方法、装置、端末機器及び記憶媒体 | |
| CN108694012B (zh) | 在屏幕上显示对象的方法和系统 | |
| WO1999010799A1 (en) | Method and apparatus for simultaneously resizing and relocating windows within a graphical display | |
| EP1015961A1 (en) | Method and apparatus for simultaneously resizing and relocating windows within a graphical display | |
| CN110928475B (zh) | 智能交互平板的页面交互方法、装置、设备和存储介质 | |
| CN110968227B (zh) | 智能交互平板的控制方法和装置 | |
| CN110941373B (zh) | 智能交互平板的交互方法、装置、终端设备和存储介质 | |
| WO2021068366A1 (zh) | 智能交互平板的书写操作方法、装置、设备和存储介质 | |
| CN110427236B (zh) | 一种渲染方法及装置 | |
| KR20000016918A (ko) | 가장자리영역을구비하는디지타이저 | |
| CN110174991B (zh) | 高亮笔处理方法及装置 | |
| JP2012008686A (ja) | 情報処理装置および方法、並びにプログラム | |
| CN105242817A (zh) | 页面元素实时突出显示的方法及装置 | |
| CN103034683A (zh) | 用于浏览器的页面切换方法和装置 | |
| CN113934356A (zh) | 智能交互平板的显示操作方法、装置、设备和存储介质 | |
| CN111338538A (zh) | 智能交互平板的页面操作方法、装置、设备和存储介质 | |
| CN110471611B (zh) | 键盘启动的方法、装置、终端设备和存储介质 | |
| CN112462989A (zh) | 智能交互平板的操作方法、装置、智能交互平板及介质 | |
| CN108536361A (zh) | 触控操作的处理方法、装置、存储介质、处理器及终端 | |
| WO2000057281A1 (en) | Method and apparatus for simultaneously resizing and relocating windows within a graphical display including extensions | |
| CN116450268A (zh) | 多窗口页面展示方法及装置、窗口分割方法及装置 | |
| US8645857B2 (en) | Method for controlling information display | |
| CN108255558B (zh) | 书写软件调用方法、装置、设备及计算机可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |