基于制造技术

本发明专利技术提供了一种基于

【技术实现步骤摘要】
基于vue框架的可视化大屏模块分区组件封装的方法


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

技术介绍

[0002]随着互联网技术和大数据产业的蓬勃发展，用到可视化大屏需求的企业也越来越多
。
比如智慧城市
、
智慧交通
、
智慧医疗等行业等，都有了可视化数据展示的需求，可视化行业也随之迎来了快速的发展
。
数据可视化就是把一些相对复杂
、
抽象
、
难以看懂的数据通过可视化的方式，运用图形化
、
表格等手段，清晰有效地将数据信息进行分析和表达，帮助我们发现其中的规律和特征，挖掘数据背后的巨大价值
。
[0003]目前可视化框架大多数都是基于
web
前端实现的
。
常见的可视化实现方式是二维
、
三维相结合，例如大屏中的可视化图表是可以用
echarts
等第三方图标控件和
vue
来实现的
。
[0004]现在网上有各种各样的可视化大屏，有些一眼看上去就很美观
、
有的则平平无奇，毫无特点
。
且通常在设计大屏的时候都会考虑模块化功能分区，以方便展示更多的内容，比如地图区域，历年统计数据区域，最新监控消息区域等，那么如何有效的将各种功能区拼凑好展示给用户就是成为亟待解决的问题
。

技术实现思路

[0005]有鉴于此，本专利技术旨在提出一种基于
vue
框架的可视化大屏模块分区组件封装的方法，基于
vue
框架，将模块区域封装成一个自定义组件，支持大小
、
标题
、
内容等自定义设置，满足大屏页面上的各种展示需求，又能方便的区分开功能模块
。
[0006]为达到上述目的，本专利技术的技术方案是这样实现的：
[0007]基于
vue
框架的可视化大屏模块分区组件封装的方法，包括以下步骤：
[0008]S1、
创建一个
div
，动态设置
style
的
width、height、foat
；
[0009]S2、
在
div
内创建一个样式为
title
的子
div
，并且添加显示变量
title
和动画元素
rightDot
；
[0010]S3、
创建
slot
卡槽；
[0011]S4、
获取参数
width、height、foat
动态设置
style
给
div
；
[0012]S5、
将参数
title
插入到元素中；
[0013]S6、
设置关键帧动画从透明度为1变为透明度为0，向左移动
300px
并且缩小到
dotScale
；
[0014]S7、
获取
rightDoti
元素并设置
dotSpeed
秒的关键帧动画后结束
。
[0015]进一步的，在步骤
S1
中，具体如下：
[0016]A1、
使用
JavaScript
创建一个
div
元素；
[0017]A2、
动态设置
div
的样式，包括
width、height
和
float。
[0018]进一步的，在步骤
S2
中，具体如下：
[0019]B1、
再次创建一个
div
元素，作为子
div
；
[0020]B2、
设置子
div
的类名为
″
title
″
；
[0021]B3、
将子
div
添加到父
div
中；
[0022]B4、
在子
div
中添加显示的变量
title
和动画元素
rightDot。
[0023]进一步的，在步骤
S3
中，在
Vue
或
Web Component
中，使用
<slot></slot>
标签创建一个插槽
。
[0024]进一步的，在步骤
S4
中，获取参数
width、height、float
，然后使用获取的参数来动态设置
div
的样式
。
[0025]进一步的，在步骤
S5
中，使用
innerText
或
innerHTML
属性将
title
插入到元素中
。
[0026]进一步的，在步骤
S7
中，首先获取
rightDot
元素，然后设置
rightDot
元素的动画
。
[0027]进一步的，本方案公开了一种电子设备，包括处理器以及与处理器通信连接，且用于存储所述处理器可执行指令的存储器，所述处理器用于执行基于
vue
框架的可视化大屏模块分区组件封装的方法
。
[0028]进一步的，本方案公开了一种服务器，包括至少一个处理器，以及与所述处理器通信连接的存储器，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述处理器执行，以使所述至少一个处理器执行基于
vue
框架的可视化大屏模块分区组件封装的方法
。
[0029]进一步的，本方案公开了一种计算机可读取存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现基于
vue
框架的可视化大屏模块分区组件封装的方法
。
[0030]相对于现有技术，本专利技术所述的基于
vue
框架的可视化大屏模块分区组件封装的方法具有以下有益效果：
[0031](1)
本专利技术所述的基于
vue
框架的可视化大屏模块分区组件封装的方法，基于
vue
框架，将模块区域封装成一个自定义组件，支持大小
、
标题
、
内容等自定义设置，满足大屏页面上的各种展示需求，又能方便的区分开功能模块；
[0032](2)
...

【技术保护点】

【技术特征摘要】
1.
基于
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
秒的关键帧动画后结束
。2.
根据权利要求1所述的基于
vue
框架的可视化大屏模块分区组件封装的方法，其特征在于，在步骤
S1
中，具体如下：
A1、
使用
JavaScript
创建一个
div
元素；
A2、
动态设置
div
的样式，包括
width、height
和
float。3.
根据权利要求1所述的基于
vue
框架的可视化大屏模块分区组件封装的方法，其特征在于，在步骤
S2
中，具体如下：
B1、
再次创建一个
div
元素，作为子
div
；
B2、
设置子
div
的类名为
″
title
″
；
B3、
将子
div
添加到父
div
中；<...

【专利技术属性】
技术研发人员：刘魏，
申请(专利权)人：紫光云技术有限公司，
类型：发明
国别省市：