CN113791760A - 商业智能仪表盘生成方法、装置、电子设备及存储介质 - Google Patents
商业智能仪表盘生成方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN113791760A CN113791760A CN202111087153.0A CN202111087153A CN113791760A CN 113791760 A CN113791760 A CN 113791760A CN 202111087153 A CN202111087153 A CN 202111087153A CN 113791760 A CN113791760 A CN 113791760A
- Authority
- CN
- China
- Prior art keywords
- target
- container
- dashboard
- sub
- generating
- 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 68
- 230000000007 visual effect Effects 0.000 claims abstract description 18
- 230000004044 response Effects 0.000 claims abstract description 13
- 238000012800 visualization Methods 0.000 claims description 32
- 230000008569 process Effects 0.000 claims description 23
- 230000008859 change Effects 0.000 claims description 19
- 238000004590 computer program Methods 0.000 claims description 11
- 238000012544 monitoring process Methods 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 10
- 238000012545 processing Methods 0.000 description 8
- 238000011161 development Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 7
- 238000004891 communication Methods 0.000 description 5
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000013515 script Methods 0.000 description 3
- 238000013473 artificial intelligence Methods 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000000750 progressive effect Effects 0.000 description 2
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 208000018910 keratinopathic ichthyosis Diseases 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000002821 scintillation proximity assay Methods 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了一种商业智能仪表盘生成方法、装置、电子设备及可读存储介质。其中，方法包括预先构建多个彼此独立、业务逻辑不相关的子组件，各子组件为组成dashboard的元素组件。在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器；每个位置容器对应一个子组件；根据目标子组件的当前位置信息和目标位置信息生成拖曳指令；响应拖曳指令，将目标子组件拖曳至目标位置容器中，同时将目标位置容器与拖曳指令进行绑定，以使目标位置容器具有更改形状和位置的属性；响应位置容器调整指令，将各目标位置容器调整为待生成dashboard的展示面板样式，从而可灵活、方便、快速地生成所需dashboard，有效提高dashboard的生成效率。
Description
技术领域
本申请涉及计算机技术领域，特别是涉及一种商业智能仪表盘生成方法、装置、电子设备及可读存储介质。
背景技术
dashboard(business intelligence dashboard，商业智能仪表盘)为用于实现数据可视化的功能模块，是向企业展示度量信息和关键业务指标(KPI)现状的数据虚拟化工具。dashboard关键的特征是从多种数据源获取实时数据，并且是定制化的交互式界面。
相关技术通常都是按照UI(User Interface，用户界面)图进行硬编码dashboard开发，诸如前端大屏dashboard。在开发过程中，如果后续研发需求需要变动前期的dashboard的某些模块，又要重新开发，导致dashboard整个研发周期长，dashboard生成效率低下，且不同dashboard项目不可以复用。而对于已经上线的dashboard项目，若后续有其他方面更新需求，还需要重新部署等进行一整个完整的上线流程，整个过程非常繁琐复杂。
发明内容
本申请提供了一种商业智能仪表盘生成方法、装置、电子设备及可读存储介质，可灵活、方便、快速地生成所需dashboard，可有效提高dashboard的生成效率。
为解决上述技术问题，本发明实施例提供以下技术方案：
本发明实施例一方面提供了一种商业智能仪表盘生成方法，包括：
预先构建多个彼此独立、业务逻辑不相关的子组件，各子组件为组成dashboard的元素组件；
在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器；每个位置容器对应一个子组件；
根据目标子组件的当前位置信息和目标位置信息生成拖曳指令；
响应所述拖曳指令，将所述目标子组件拖曳至目标位置容器中，同时将所述目标位置容器与所述拖曳指令进行绑定，以使所述目标位置容器具有更改形状和位置的属性；
响应位置容器调整指令，将各目标位置容器调整为所述待生成dashboard的展示面板样式。
可选的，所述预先构建多个彼此独立、业务逻辑不相关的子组件，包括：
预先在所述可视化区域上设置组件列表区域；
将在VUE项目中开发的多个子组件存储至所述组件列表区域中，并为每个子组件设置唯一标识信息。
可选的，所述在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器，包括：
基于层叠样式表的网格布局，在待生成dashboard的浏览器页面的可视化区域中设置多个位置容器。
可选的，所述根据目标子组件的当前位置信息和目标位置信息生成拖曳指令，包括：
当在所述可视化区域中检测到点击指令，记录所述点击指令对应在所述可视化区域的点击点的初始位置信息；
监测所述点击点的移动过程，当所述点击点移动至所述目标子组件上，记录所述目标子组件的当前位置信息；
在所述点击点拖动所述目标子组件的移动过程中，根据所述点击点的实时位置信息改变所述目标子组件在移动过程中的位置信息，直至所述点击点结束移动；
根据移动过程中的位置变化信息利用VUE生成拖曳指令。
可选的，所述响应位置容器调整指令，将各目标位置容器调整为所述待生成dashboard的展示面板样式，包括：
根据所述点击点落在所述目标位置容器的当前容器位置，和所述点击点拖动所述目标位置容器移动结束时的目标容器位置，生成拖动指令；
响应所述拖动指令，将所述目标位置容器在所述可视化区域中由所述当前容器位置移动至所述目标容器位置。
可选的，所述响应位置容器调整指令，将各目标位置容器调整为所述待生成dashboard的展示面板样式，包括：
根据所述点击点落在所述目标位置容器的目标角时的当前角位置，和所述点击点拖动所述目标角移动结束时的目标角位置，生成尺寸变化指令；
响应所述尺寸变化指令，通过拉动所述目标角改变所述目标位置容器的尺寸。
本发明实施例另一方面提供了一种商业智能仪表盘生成装置，包括：
小组件预编译模块，用于预先构建多个彼此独立、业务逻辑不相关的子组件，各子组件为组成dashboard的元素组件；
位置容器生成模块，用于在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器；每个位置容器对应一个子组件；
拖曳模块，用于根据目标子组件的当前位置信息和目标位置信息生成拖曳指令；
绑定模块，用于响应所述拖曳指令，将所述目标子组件拖曳至目标位置容器中，同时将所述目标位置容器与所述拖曳指令进行绑定，以使所述目标位置容器具有更改形状和位置的属性；
面板生成模块，用于响应位置容器调整指令，将各目标位置容器调整为所述待生成dashboard的展示面板样式。
可选的，所述小组件预编译模块进一步用于：预先在所述可视化区域上设置组件列表区域；将在VUE项目中开发的多个子组件存储至所述组件列表区域中，并为每个子组件设置唯一标识信息。
本发明实施例还提供了一种电子设备，包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如前任一项所述商业智能仪表盘生成方法的步骤。
本发明实施例最后还提供了一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如前任一项所述商业智能仪表盘生成方法的步骤。
本申请提供的技术方案的优点在于，先将dashaboard分解为一个一个的小组件，然后在浏览器页面的可视化区域生成多个位置容器，在生成dashboard时需要哪个组件就拖动哪个组件放进可视化区域的位置容器里面，然后将子组件和位置容器进行绑定，使得位置容器的位置和尺寸均可改变，这样在可视化区域随意拖拽布局容器，自由组合，排列出一个顺序，位置，组件大小都不相同的可视化区域，从而可灵活、方便、快速地生成所需dashboard，可有效提高dashboard的生成效率。dashboard的每一个小模块组件可以拖拽互换位置，灵活，方便，不涉及后端ajax调用接口服务。即使需求变动，只需要删除某个组件或者替换一个组件上去即可，易于操作，效率高，可以复用。
此外，本发明实施例还针对商业智能仪表盘生成方法提供了相应的实现装置、电子设备及可读存储介质，进一步使得所述方法更具有实用性，所述装置、电子设备及可读存储介质具有相应的优点。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本公开。
附图说明
为了更清楚的说明本发明实施例或相关技术的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种商业智能仪表盘生成方法的流程示意图；
图2为本发明实施例提供的一个示例性应用场景的网格布局图；
图3为本发明实施例提供的一个示例性应用场景中的位置容器示意图；
图4为本发明实施例提供的一个示例性应用场景中生成的dashborad示意图；
图5为本发明实施例提供的另一个示例性应用场景中生成的dashborad示意图；
图6为本发明实施例提供的对图5的dashborad进行微调更新之后新生成的dashborad示意图；
图7为本发明实施例提供的商业智能仪表盘生成装置的一种具体实施方式结构图；
图8为本发明实施例提供的电子设备的一种具体实施方式结构图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等是用于区别不同的对象，而不是用于描述特定的顺序。此外术语“包括”和“具有”以及他们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可包括没有列出的步骤或单元。
在介绍了本发明实施例的技术方案后，下面详细的说明本申请的各种非限制性实施方式。
首先参见图1，图1为本发明实施例提供的一种商业智能仪表盘生成方法的流程示意图，本发明实施例可包括以下内容：
S101：预先构建多个彼此独立、业务逻辑不相关的子组件。
在本实施例中，各子组件为组成dashboard的元素组件，所谓元素组件是指构成dashboard不可缺少的组件，也即将每类型的dashboard分解为多个子组件，各子组件之间彼此独立且业务逻辑不相关，将这些子组件解耦，这样每个子组件之间便不会互相影响，在生成dashboard过程中，需要哪个子组件就拖动哪个子组件放进dashboard里面的相应位置即可，一个子组件占据一个位置容器，即使需求变动，只需要在删除某个组件，或者替换一个组件上去即可。为了后续步骤便于高效找到所需子组件，可为每个子组件设置一个标识信息，该标识信息可唯一标识该子组件。为了提高整个dashboard的生成效率，本步骤中可将生成dashboard的所有元组组件都提前构建出来。考虑到可用于构建用户界面的渐进式JavaScript框架的VUE，其只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。此外，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用如SPA提供驱动。所以，本实施例可在VUE项目中开发各种各样的子组件。
S102：在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器。
在本实施例中，可视化区域即是dashboard的展示区域，也就是说，是将构成dashboard的各子组件放在可视化区域中来生成dashboard。本实施例在可视化区域中设置多个位置容器，这些位置容器即可作为dashboard的框架，用于承载S101的子组件，每个位置容器对应一个子组件。作为一种可选的实施方式，可基于层叠样式表的网格布局，在待生成dashboard的浏览器页面的可视化区域中设置多个位置容器。也即本申请可结合图2所示的CSS(Cascading Style Sheets，层叠样式表)的网格grid布局方式来为可视化区域设置位置容器，生成的位置容器可如图3所示。本步骤一旦生成位置容器，这些位置容器的位置和大小、形状便是固定的，也即不具备位置移动和几何参数更变的属性。
S103：根据目标子组件的当前位置信息和目标位置信息生成拖曳指令。
本步骤的目标子组件是指组成S105要生成的dashboard的元素组件之一，构成S105要生产的dashboard的每个元素组件均作为目标组件执行S103和S104。目标子组件的当前位置信息是指其在存储子组件区域中的位置，目标位置信息是指其被拖曳至可视化区域的位置容器上的位置，也就是说，其被拖曳在哪个位置容器上。在本步骤中，若是利用人工去生成dashboard，则是人工先熟知dashboard的面板布局，基于面板布局从S101中取选择所需子组件作为目标子组件，通过鼠标、键盘或触摸屏的触摸功能去选中该目标子组件，然后将其拖曳在可视化区域的位置容器上。若是自动化生产dashboard，即可先编译dashboard的生成脚本，在需要生成dashboard时，触发执行脚本，脚本会自动到存储S101的子组件存储区域根据子组件标识去查找目标子组件，然后选中该目标子组件再将其拖曳在可视化区域的位置容器上。其中，浏览器页面可显示的每个对象都可作为一个元素，本实施例可利用html(Hyper Text Markup Language)标准中的拖放(即Drag和drop)功能，在javascript中获取需要拖拽的元素DOM(Document)，并利用VUE的自定义指令定义一个拖拽指令。
S104：响应拖曳指令，将目标子组件拖曳至目标位置容器中，同时将目标位置容器与拖曳指令进行绑定，以使目标位置容器具有更改形状和位置的属性。
无论是是人工方式还是自动化方式，S103可将执行目标子组件由当前位置拖曳至目标位置的这个过程生成拖曳指令，响应该拖曳指令，使得目标子组件最终被拖曳至目标位置容器中。可以理解的是，S102生成的位置容器并不具有位置和形状更改属性，而为了应对dashboard不同样式的项目需求，需要对位置容器的位置和形状进行更改，所以可将目标位置容器与拖曳指令进行绑定，以使目标位置容器具有更改形状和位置的属性。
S105：响应位置容器调整指令，将各目标位置容器调整为待生成dashboard的展示面板样式。
本步骤的位置容器调整是指改变位置容器的位置和几何参数，以使与按照dashboard所需求的展示面板样式相一致，在对每个位置容器或所需进行调整的位置容器进行调整成功之后，便可生成最终的dashboard。
在本发明实施例提供的技术方案中，先将dashaboard分解为一个一个的小组件，然后在浏览器页面的可视化区域生成多个位置容器，在生成dashboard时需要哪个组件就拖动哪个组件放进可视化区域的位置容器里面，然后将子组件和位置容器进行绑定，使得位置容器的位置和尺寸均可改变，这样在可视化区域随意拖拽布局容器，自由组合，排列出一个顺序，位置，组件大小都不相同的可视化区域，从而可灵活、方便、快速地生成所需dashboard，可有效提高dashboard的生成效率。dashboard的每一个小模块组件可以拖拽互换位置，灵活，方便，不涉及后端ajax调用接口服务。即使需求变动，只需要删除某个组件或者替换一个组件上去即可，易于操作，效率高，可以复用。
需要说明的是，本申请中各步骤间没有严格的先后执行顺序，只要符合逻辑上的顺序，则这些步骤可以同时执行，也可按照某种预设顺序执行，图1只是一种示意方式，并不代表只能是这样的执行顺序。
可以理解的是，VUE是一个功能非常完备的前端框架横跨了所有平台，通过VUE构建的应用，能在Web(World Wide Web，全球广域网)、移动Web、移动应用、原生应用和桌面原生应用等多种平台上运行；VUE的速度与性能也是绝佳的，可以达到在如今以及未来的Web平台上所能达到的极高速度。VUE的开发也很便捷，不但能够使用简单的模板文件，快速实现各种特性，还能使用自定义组件和大量现有组件，扩展模板语言。基于此特性，本实施例可以开发大量的自定义积木组件，利用VUE的自定义指令可以写出拖拽指令，前端技术层面上使用VUE组件，结合CSS(Cascading Style Sheets，层叠样式表)的网格grid布局方式，利用可以拖拽组件的方式放进grid布局容器生成dashboard，即可得到拖拽生成的dashboard后台首页。
本实施例的方法相比采用html5原生拖拽方式来说，采用html5原生拖拽方式的布局模块是一个div组成，可以进行嵌套包含，拖动一个div即可拖动所包含的所有div，该布局模块主要是按照行列分布，一行一行分布，每一行又可以包含多个列，即前端开发传统栅格布局系统，如果在页面上移动，需要通过按钮点击上移或者下移调整行与行之间的顺序，行内多列调整布局则通过拖拽左右调整，该方式较为不变。而本实施例中的可视化区域即布局容器，不以行为大单位，列为小单位，而是利用grid布局的特性，即每一个div就是一个布局容器，没有行列的概念，相当于一个个小方块填满整个页面。方块大小可以改变，上下拖动也不需要整行改变位置，而是被拖动的小方块改变位置，也可以随意改变大小，一个方块就可以占据整个页面，也可以很多方块占据整个页面，方块里面就是VUE组件，由此来构成dashboard，更为便捷和灵活，效率也更高。
在上述实施例中，对于如何执行步骤S101并不做限定，本实施例中给出一种可选的实施方式，可包括如下步骤：
预先在可视化区域上设置组件列表区域；如图4所示的左边区域。将在VUE项目中开发的多个子组件存储至组件列表区域中，并为每个子组件设置唯一标识信息。
本实施例将各预先构建的各子组件放在可视化区域的列表中，更便于展示给用户进行操作，而且也便于管理。
在上述实施例中，对于如何执行步骤S103并不做限定，本实施例中给出拖曳指令的一种可选的实施方式，可包括如下步骤：
当在可视化区域中检测到点击指令，记录点击指令对应在可视化区域的点击点的初始位置信息；
监测点击点的移动过程，当点击点移动至目标子组件上，记录目标子组件的当前位置信息；
在点击点拖动目标子组件的移动过程中，根据点击点的实时位置信息改变目标子组件在移动过程中的位置信息，直至点击点结束移动。根据移动过程中的位置变化信息利用VUE生成拖曳指令。
在本步骤中，点击点例如可为鼠标选择目标在浏览器页面的标识，可实时记录鼠标在浏览器中的位置，记录下这个位置的坐标鼠标移动到需要拖拽的元素上面，记录下元素的坐标，鼠标开始拖动元素，鼠标移动过程中位置发生变化，坐标也发生变化，此时根据鼠标的坐标改变需要拖拽的元素的坐标鼠标结束移动，需要拖拽的元素跟着位置移动到鼠标结束的位置，结束拖动，将整个拖动过程可基于VUE生成一个拖曳指令，可以更加便捷、高效地生成dashboard。
在上述实施例中，对于如何执行步骤S105并不做限定，本实施例中分别基于位置容器在可视化区域中的位置的变化和位置容器的尺寸的变化给出相应的实现方式，可包括如下步骤：
根据点击点落在目标位置容器的当前容器位置，和点击点拖动目标位置容器移动结束时的目标容器位置，生成拖动指令；响应拖动指令，将目标位置容器在可视化区域中由当前容器位置移动至目标容器位置。
根据点击点落在目标位置容器的目标角时的当前角位置，和点击点拖动目标角移动结束时的目标角位置，生成尺寸变化指令；响应尺寸变化指令，通过拉动目标角改变目标位置容器的尺寸。
在本实施例中，利用CSS的网格布局在页面中设置一个个的位置容器，利用VUE拖拽指令拖动组件列表中的小组件到grid布局容器中，一个小组件占据一个位置容器，然后将位置容器绑定拖拽指令，可以拖动变换位置容器。位置容器没有行列的概念，而是坐标系的概念，以浏览器页面横向为X轴，纵向为Y轴，一个个位置容器在页面上所占位置记录坐标点，位置容器绑定拖拽指令，可以拖动到页面任意位置，然后记录容器坐标，也可以鼠标放在容器的任何一个角，记下该角的坐标，拖动鼠标，时刻记录鼠标的位置即坐标，将容器被拖动的角坐标改变，以达成容器改变大小。任何一个容器都可以在页面任意改动位置和大小，直到配置生成一个合适的dashboard面板，如图4所示。以图5和图6为例，基于本实施例的方法可通过拖曳改变位置容器7和位置容器8的位置和大小。
由上可知，本实施例基于VUE可视化自定义拖拽生成dashboard，复用性极强，不需要在开发一个个的完成dashboard，只需要关注组件的开发，通过拖拽可以很快的拖出一个dashboard，可以应用在很多项目中，即一次开发，多次复用，自行配置dashboard，可有效降低开发dashboard的难度，提高dashboard的生成效率。
本发明实施例还针对商业智能仪表盘生成方法提供了相应的装置，进一步使得方法更具有实用性。其中，装置可从功能模块的角度和硬件的角度分别说明。下面对本发明实施例提供的商业智能仪表盘生成装置进行介绍，下文描述的商业智能仪表盘生成装置与上文描述的商业智能仪表盘生成方法可相互对应参照。
基于功能模块的角度，参见图7，图7为本发明实施例提供的商业智能仪表盘生成装置在一种具体实施方式下的结构图，该装置可包括：
小组件预编译模块701，用于预先构建多个彼此独立、业务逻辑不相关的子组件，各子组件为组成dashboard的元素组件。
位置容器生成模块702，用于在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器；每个位置容器对应一个子组件。
拖曳模块703，用于根据目标子组件的当前位置信息和目标位置信息生成拖曳指令。
绑定模块704，用于响应拖曳指令，将目标子组件拖曳至目标位置容器中，同时将目标位置容器与拖曳指令进行绑定，以使目标位置容器具有更改形状和位置的属性。
面板生成模块705，用于响应位置容器调整指令，将各目标位置容器调整为待生成dashboard的展示面板样式。
可选的，在本实施例的一些实施方式中，上述小组件预编译模块701可进一步用于：预先在可视化区域上设置组件列表区域；将在VUE项目中开发的多个子组件存储至组件列表区域中，并为每个子组件设置唯一标识信息。
作为本实施例的一种可选的实施方式，上述位置容器生成模块702可进一步用于：基于层叠样式表的网格布局，在待生成dashboard的浏览器页面的可视化区域中设置多个位置容器。
可选的，在本实施例的另一些实施方式中，上述拖曳模块703可进一步用于：当在可视化区域中检测到点击指令，记录点击指令对应在可视化区域的点击点的初始位置信息；监测点击点的移动过程，当点击点移动至目标子组件上，记录目标子组件的当前位置信息；在点击点拖动目标子组件的移动过程中，根据点击点的实时位置信息改变目标子组件在移动过程中的位置信息，直至点击点结束移动，根据移动过程中的位置变化信息利用VUE生成拖曳指令。作为本实施例的一种可选的实施方式，上述面板生成模块705可进一步用于：根据点击点落在目标位置容器的当前容器位置，和点击点拖动目标位置容器移动结束时的目标容器位置，生成拖动指令；响应拖动指令，将目标位置容器在可视化区域中由当前容器位置移动至目标容器位置。
作为与上述本实施例的一种并列可选的实施方式，上述面板生成模块705还可进一步用于：根据点击点落在目标位置容器的目标角时的当前角位置，和点击点拖动目标角移动结束时的目标角位置，生成尺寸变化指令；响应尺寸变化指令，通过拉动目标角改变目标位置容器的尺寸。
本发明实施例商业智能仪表盘生成装置的各功能模块的功能可根据上述方法实施例中的方法具体实现，其具体实现过程可以参照上述方法实施例的相关描述，此处不再赘述。
由上可知，本发明实施例可灵活、方便、快速地生成所需dashboard，可有效提高dashboard的生成效率。
上文中提到的商业智能仪表盘生成装置是从功能模块的角度描述，进一步的，本申请还提供一种电子设备，是从硬件角度描述。图8为本申请实施例提供的电子设备在一种实施方式下的结构示意图。如图8所示，该电子设备包括存储器80，用于存储计算机程序；处理器81，用于执行计算机程序时实现如上述任一实施例提到的商业智能仪表盘生成方法的步骤。
其中，处理器81可以包括一个或多个处理核心，比如4核心处理器、8核心处理器，处理器81还可为控制器、微控制器、微处理器或其他数据处理芯片等。处理器81可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable GateArray，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器81也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central Processing Unit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器81可以集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器81还可以包括AI(ArtificialIntelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器80可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器80还可包括高速随机存取存储器以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。存储器80在一些实施例中可以是电子设备的内部存储单元，例如服务器的硬盘。存储器80在另一些实施例中也可以是电子设备的外部存储设备，例如服务器上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(SecureDigital，SD)卡，闪存卡(Flash Card)等。进一步地，存储器80还可以既包括电子设备的内部存储单元也包括外部存储设备。存储器80不仅可以用于存储安装于电子设备的应用软件及各类数据，例如：执行漏洞处理方法的程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。本实施例中，存储器80至少用于存储以下计算机程序801，其中，该计算机程序被处理器81加载并执行之后，能够实现前述任一实施例公开的商业智能仪表盘生成方法的相关步骤。另外，存储器80所存储的资源还可以包括操作系统802和数据803等，存储方式可以是短暂存储或者永久存储。其中，操作系统802可以包括Windows、Unix、Linux等。数据803可以包括但不限于商业智能仪表盘生成结果对应的数据等。
在一些实施例中，上述电子设备还可包括有显示屏82、输入输出接口83、通信接口84或者称为网络接口、电源85以及通信总线86。其中，显示屏82、输入输出接口83比如键盘(Keyboard)属于用户接口，可选的用户接口还可以包括标准的有线接口、无线接口等。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。通信接口84可选的可以包括有线接口和/或无线接口，如WI-FI接口、蓝牙接口等，通常用于在电子设备与其他电子设备之间建立通信连接。通信总线86可以是外设部件互连标准(peripheral component interconnect，简称PCI)总线或扩展工业标准结构(extendedindustry standard architecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。为便于表示，图8中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
本领域技术人员可以理解，图8中示出的结构并不构成对该电子设备的限定，可以包括比图示更多或更少的组件，例如还可包括实现各类功能的传感器87。
本发明实施例所述电子设备的各功能模块的功能可根据上述方法实施例中的方法具体实现，其具体实现过程可以参照上述方法实施例的相关描述，此处不再赘述。
由上可知，本发明实施例可灵活、方便、快速地生成所需dashboard，可有效提高dashboard的生成效率。
可以理解的是，如果上述实施例中的商业智能仪表盘生成方法以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、电可擦除可编程ROM、寄存器、硬盘、多媒体卡、卡型存储器(例如SD或DX存储器等)、磁性存储器、可移动磁盘、CD-ROM、磁碟或者光盘等各种可以存储程序代码的介质。
基于此，本发明实施例还提供了一种可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时如上任意一实施例所述商业智能仪表盘生成方法的步骤。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的硬件包括装置及电子设备而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
以上对本申请所提供的一种商业智能仪表盘生成方法、装置、电子设备及可读存储介质进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。
Claims (10)
1.一种商业智能仪表盘生成方法，其特征在于，包括：
预先构建多个彼此独立、业务逻辑不相关的子组件，各子组件为组成dashboard的元素组件；
在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器；每个位置容器对应一个子组件；
根据目标子组件的当前位置信息和目标位置信息生成拖曳指令；
响应所述拖曳指令，将所述目标子组件拖曳至目标位置容器中，同时将所述目标位置容器与所述拖曳指令进行绑定，以使所述目标位置容器具有更改形状和位置的属性；
响应位置容器调整指令，将各目标位置容器调整为所述待生成dashboard的展示面板样式。
2.根据权利要求1所述的商业智能仪表盘生成方法，其特征在于，所述预先构建多个彼此独立、业务逻辑不相关的子组件，包括：
预先在所述可视化区域上设置组件列表区域；
将在VUE项目中开发的多个子组件存储至所述组件列表区域中，并为每个子组件设置唯一标识信息。
3.根据权利要求2所述的商业智能仪表盘生成方法，其特征在于，所述在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器，包括：
基于层叠样式表的网格布局，在待生成dashboard的浏览器页面的可视化区域中设置多个位置容器。
4.根据权利要求1至3任意一项所述的商业智能仪表盘生成方法，其特征在于，所述根据目标子组件的当前位置信息和目标位置信息生成拖曳指令，包括：
当在所述可视化区域中检测到点击指令，记录所述点击指令对应在所述可视化区域的点击点的初始位置信息；
监测所述点击点的移动过程，当所述点击点移动至所述目标子组件上，记录所述目标子组件的当前位置信息；
在所述点击点拖动所述目标子组件的移动过程中，根据所述点击点的实时位置信息改变所述目标子组件在移动过程中的位置信息，直至所述点击点结束移动；
根据移动过程中的位置变化信息利用VUE生成拖曳指令。
5.根据权利要求4所述的商业智能仪表盘生成方法，其特征在于，所述响应位置容器调整指令，将各目标位置容器调整为所述待生成dashboard的展示面板样式，包括：
根据所述点击点落在所述目标位置容器的当前容器位置，和所述点击点拖动所述目标位置容器移动结束时的目标容器位置，生成拖动指令；
响应所述拖动指令，将所述目标位置容器在所述可视化区域中由所述当前容器位置移动至所述目标容器位置。
6.根据权利要求4所述的商业智能仪表盘生成方法，其特征在于，所述响应位置容器调整指令，将各目标位置容器调整为所述待生成dashboard的展示面板样式，包括：
根据所述点击点落在所述目标位置容器的目标角时的当前角位置，和所述点击点拖动所述目标角移动结束时的目标角位置，生成尺寸变化指令；
响应所述尺寸变化指令，通过拉动所述目标角改变所述目标位置容器的尺寸。
7.一种商业智能仪表盘生成装置，其特征在于，包括：
小组件预编译模块，用于预先构建多个彼此独立、业务逻辑不相关的子组件，各子组件为组成dashboard的元素组件；
位置容器生成模块，用于在待生成dashboard的浏览器页面的可视化区域中生成多个位置容器；每个位置容器对应一个子组件；
拖曳模块，用于根据目标子组件的当前位置信息和目标位置信息生成拖曳指令；
绑定模块，用于响应所述拖曳指令，将所述目标子组件拖曳至目标位置容器中，同时将所述目标位置容器与所述拖曳指令进行绑定，以使所述目标位置容器具有更改形状和位置的属性；
面板生成模块，用于响应位置容器调整指令，将各目标位置容器调整为所述待生成dashboard的展示面板样式。
8.根据权利要求7所述的商业智能仪表盘生成装置，其特征在于，所述小组件预编译模块进一步用于：预先在所述可视化区域上设置组件列表区域；将在VUE项目中开发的多个子组件存储至所述组件列表区域中，并为每个子组件设置唯一标识信息。
9.一种电子设备，其特征在于，包括处理器和存储器，所述处理器用于执行所述存储器中存储的计算机程序时实现如权利要求1至6任一项所述商业智能仪表盘生成方法的步骤。
10.一种可读存储介质，其特征在于，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述商业智能仪表盘生成方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111087153.0A CN113791760A (zh) | 2021-09-16 | 2021-09-16 | 商业智能仪表盘生成方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111087153.0A CN113791760A (zh) | 2021-09-16 | 2021-09-16 | 商业智能仪表盘生成方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113791760A true CN113791760A (zh) | 2021-12-14 |
Family
ID=78878621
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111087153.0A Pending CN113791760A (zh) | 2021-09-16 | 2021-09-16 | 商业智能仪表盘生成方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113791760A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114610190A (zh) * | 2022-03-14 | 2022-06-10 | 富途网络科技(深圳)有限公司 | 界面编辑方法、装置、电子设备和可读介质 |
| CN114995942A (zh) * | 2022-07-29 | 2022-09-02 | 北京永洪商智科技有限公司 | 商业智能仪表盘组件的样式自动生成方法及相关装置 |
| CN114610190B (zh) * | 2022-03-14 | 2024-05-31 | 富途网络科技(深圳)有限公司 | 界面编辑方法、装置、电子设备和可读介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103955366A (zh) * | 2014-04-18 | 2014-07-30 | 南威软件股份有限公司 | 一种可视化网站模版的制作方法 |
| US20140214495A1 (en) * | 2012-09-30 | 2014-07-31 | iVedix, Inc. | Business intelligence systems and methods |
| CN109325203A (zh) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | 一种自动化实现Web系统可视化复用的装置 |
-
2021
- 2021-09-16 CN CN202111087153.0A patent/CN113791760A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140214495A1 (en) * | 2012-09-30 | 2014-07-31 | iVedix, Inc. | Business intelligence systems and methods |
| CN103955366A (zh) * | 2014-04-18 | 2014-07-30 | 南威软件股份有限公司 | 一种可视化网站模版的制作方法 |
| CN109325203A (zh) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | 一种自动化实现Web系统可视化复用的装置 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114610190A (zh) * | 2022-03-14 | 2022-06-10 | 富途网络科技(深圳)有限公司 | 界面编辑方法、装置、电子设备和可读介质 |
| CN114610190B (zh) * | 2022-03-14 | 2024-05-31 | 富途网络科技(深圳)有限公司 | 界面编辑方法、装置、电子设备和可读介质 |
| CN114995942A (zh) * | 2022-07-29 | 2022-09-02 | 北京永洪商智科技有限公司 | 商业智能仪表盘组件的样式自动生成方法及相关装置 |
| CN114995942B (zh) * | 2022-07-29 | 2022-10-28 | 北京永洪商智科技有限公司 | 商业智能仪表盘组件的样式自动生成方法及相关装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10528236B2 (en) | Creating a display pattern for multiple data-bound graphic objects | |
| US10921952B2 (en) | Dynamic button with visual indication of application action result | |
| US9367199B2 (en) | Dynamical and smart positioning of help overlay graphics in a formation of user interface elements | |
| US11048484B2 (en) | Automated responsive grid-based layout design system | |
| KR101525906B1 (ko) | 그래픽 객체의 조작 | |
| US10255044B2 (en) | Method and system for modifying deployed applications | |
| US10976725B2 (en) | User interface widget modeling and placement | |
| US11481083B2 (en) | Tool for arranging objects and adjusting spacing in a layout | |
| JP2013532316A (ja) | オプションを選択するためのスピンコントロールユーザインターフェース | |
| US10613725B2 (en) | Fixing spaced relationships between graphic objects | |
| US9063913B2 (en) | Expression input apparatus, expression display apparatus, expression input method, expression display method, recording medium storing expression input control program, and recording medium storing expression display control program | |
| US20200326829A1 (en) | Generating contextual guides | |
| CN112639791A (zh) | 用于图形设计的多视图母版 | |
| US20170351408A1 (en) | Facilitating the prototyping and previewing of design element state transitions in a graphical design environment | |
| US20140344738A1 (en) | Providing contextual menus | |
| US10475223B2 (en) | Generating multiple data-bound graphic objects | |
| CN113010162A (zh) | 一种页面构建方法、装置及设备 | |
| KR20200048606A (ko) | 사용자 입력의 패턴 분석을 이용한 후속 사용자 입력 추천 방법 | |
| CN113791760A (zh) | 商业智能仪表盘生成方法、装置、电子设备及存储介质 | |
| CN111506306B (zh) | 一种Ansible剧本编写方法、装置和电子设备 | |
| KR101498877B1 (ko) | 프로그램 작성 장치 및 화상 제어 시스템 | |
| CN110764762A (zh) | 页面形成方法及装置、计算机可读存储介质、终端 | |
| CN113238749A (zh) | 一种可视化人机交互设计平台的工作方法 | |
| KR101405822B1 (ko) | 터치기반 편집 어플을 위한 시각적 편집보조 제공 방법 및 이를 위한 컴퓨터로 판독가능한 기록매체 | |
| CN115509665B (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 |