基于vue框架的可视化大屏模块分区组件封装的方法与流程

本发明属于通用前端，尤其是涉及一种基于vue框架的可视化大屏模块分区组件封装的方法。

背景技术：

1、随着互联网技术和大数据产业的蓬勃发展，用到可视化大屏需求的企业也越来越多。比如智慧城市、智慧交通、智慧医疗等行业等，都有了可视化数据展示的需求，可视化行业也随之迎来了快速的发展。数据可视化就是把一些相对复杂、抽象、难以看懂的数据通过可视化的方式，运用图形化、表格等手段，清晰有效地将数据信息进行分析和表达，帮助我们发现其中的规律和特征，挖掘数据背后的巨大价值。

2、目前可视化框架大多数都是基于web前端实现的。常见的可视化实现方式是二维、三维相结合，例如大屏中的可视化图表是可以用echarts等第三方图标控件和vue来实现的。

3、现在网上有各种各样的可视化大屏，有些一眼看上去就很美观、有的则平平无奇，毫无特点。且通常在设计大屏的时候都会考虑模块化功能分区，以方便展示更多的内容，比如地图区域，历年统计数据区域，最新监控消息区域等，那么如何有效的将各种功能区拼凑好展示给用户就是成为亟待解决的问题。

技术实现思路

1、有鉴于此，本发明旨在提出一种基于vue框架的可视化大屏模块分区组件封装的方法，基于vue框架，将模块区域封装成一个自定义组件，支持大小、标题、内容等自定义设置，满足大屏页面上的各种展示需求，又能方便的区分开功能模块。

2、为达到上述目的，本发明的技术方案是这样实现的：

3、基于vue框架的可视化大屏模块分区组件封装的方法，包括以下步骤：

4、s1、创建一个div，动态设置style的width、height、foat；

5、s2、在div内创建一个样式为title的子div，并且添加显示变量title和动画元素rightdot；

6、s3、创建slot卡槽；

7、s4、获取参数width、height、foat动态设置style给div；

8、s5、将参数title插入到元素中；

9、s6、设置关键帧动画从透明度为1变为透明度为0，向左移动300px并且缩小到dotscale；

10、s7、获取rightdoti元素并设置dotspeed秒的关键帧动画后结束。

11、进一步的，在步骤s1中，具体如下：

12、a1、使用javascript创建一个div元素；

13、a2、动态设置div的样式，包括width、height和float。

14、进一步的，在步骤s2中，具体如下：

15、b1、再次创建一个div元素，作为子div；

16、b2、设置子div的类名为″title″；

17、b3、将子div添加到父div中；

18、b4、在子div中添加显示的变量title和动画元素rightdot。

19、进一步的，在步骤s3中，在vue或web component中，使用<slot></slot>标签创建一个插槽。

20、进一步的，在步骤s4中，获取参数width、height、float，然后使用获取的参数来动态设置div的样式。

21、进一步的，在步骤s5中，使用innertext或innerhtml属性将title插入到元素中。

22、进一步的，在步骤s7中，首先获取rightdot元素，然后设置rightdot元素的动画。

23、进一步的，本方案公开了一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器用于执行基于vue框架的可视化大屏模块分区组件封装的方法。

24、进一步的，本方案公开了一种服务器，包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行基于vue框架的可视化大屏模块分区组件封装的方法。

25、进一步的，本方案公开了一种计算机可读取存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现基于vue框架的可视化大屏模块分区组件封装的方法。

26、相对于现有技术，本发明所述的基于vue框架的可视化大屏模块分区组件封装的方法具有以下有益效果：

27、(1)本发明所述的基于vue框架的可视化大屏模块分区组件封装的方法，基于vue框架，将模块区域封装成一个自定义组件，支持大小、标题、内容等自定义设置，满足大屏页面上的各种展示需求，又能方便的区分开功能模块；

28、(2)本发明所述的基于vue框架的可视化大屏模块分区组件封装的方法，支持自定义大小设置可适配各种尺寸的设备，支持浮动方向设置；支持自定义标题设置；支持自定义内容插槽，可以根据实际情况设计展示内容；支持标题动画速度和大小设置，更方便的根据需求调节；内置默认值，基于vue框架直接引用。

技术特征：

1.基于vue框架的可视化大屏模块分区组件封装的方法，其特征在于，包括以下步骤：

2.根据权利要求1所述的基于vue框架的可视化大屏模块分区组件封装的方法，其特征在于，在步骤s1中，具体如下：

3.根据权利要求1所述的基于vue框架的可视化大屏模块分区组件封装的方法，其特征在于，在步骤s2中，具体如下：

4.根据权利要求1所述的基于vue框架的可视化大屏模块分区组件封装的方法，其特征在于，在步骤s3中，在vue或web component中，使用<slot></slot>标签创建一个插槽。

5.根据权利要求1所述的基于vue框架的可视化大屏模块分区组件封装的方法，其特征在于，在步骤s4中，获取参数width、height、float，然后使用获取的参数来动态设置div的样式。

6.根据权利要求1所述的基于vue框架的可视化大屏模块分区组件封装的方法，其特征在于，在步骤s5中，使用innertext或innerhtml属性将title插入到元素中。

7.根据权利要求1所述的基于vue框架的可视化大屏模块分区组件封装的方法，其特征在于，在步骤s7中，首先获取rightdot元素，然后设置rightdot元素的动画。

8.一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，其特征在于：所述处理器用于执行上述权利要求1-7任一所述的基于vue框架的可视化大屏模块分区组件封装的方法。

9.一种服务器，其特征在于：包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行如权利要求1-7任一所述的基于vue框架的可视化大屏模块分区组件封装的方法。

10.一种计算机可读取存储介质，存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现权利要求1-7任一项所述的基于vue框架的可视化大屏模块分区组件封装的方法。

技术总结
本发明提供了一种基于vue框架的可视化大屏模块分区组件封装的方法，包括以下步骤：S1、创建一个div，动态设置style的width、height、foat；S2、在div内创建一个样式为title的子div，并且添加显示变量title和动画元素rightDot；S3、创建slot卡槽；S4、获取参数width、height、foat动态设置style给div；S5、将参数title插入到元素中；S6、设置关键帧动画从透明度为1变为透明度为0，向左移动300px并且缩小到dotScale；S7、获取rightDoti元素并设置dotSpeed秒的关键帧动画后结束。本发明有益效果：基于vue框架的可视化大屏模块分区组件封装的方法，基于vue框架，将模块区域封装成一个自定义组件，支持大小、标题、内容等自定义设置，满足大屏页面上的各种展示需求，又能方便的区分开功能模块。

技术研发人员：刘魏
受保护的技术使用者：紫光云技术有限公司
技术研发日：
技术公布日：2024/1/16