一种基于Vue的大屏可视化模块拖拽技术的研究制造技术

本发明专利技术公开了大屏数据可视化技术领域的一种基于Vue的大屏可视化模块拖拽技术的研究，本发明专利技术包括的系统组件有计算机、计算机鼠标和可视化大屏组件，所述计算机用于搭载可视化大屏组件，所述计算机鼠标用于改变可视化大屏组件的位置和大小，具体步骤为：通过鼠标选中可视化大屏组件；获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；移动鼠标，计算移动距离：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高；鼠标不松开时循环处理步S3

【技术实现步骤摘要】
一种基于Vue的大屏可视化模块拖拽技术的研究


[0001]本专利技术涉及大屏数据可视化
，具体为一种基于Vue的大屏可视化模块拖拽技术的研究。

技术介绍

[0002]大屏数据可视化是以大屏为主要载体，把相对复杂、抽象的数据通过可视的方式以一种更直观、人们更容易理解的方式展示出来的手段，更形象地表达数据内在的信息、规律和特征，挖掘数据背后的价值。
[0003]而客户对大屏的需求多种多样，经常需要针对的客户的需求进行相应大屏的开发工作。如果能够将大屏的内容形成一个个的组件，在系统中内置丰富的组件，最终实现通过配置组件快速生成大屏，将能够快速的响应用户对大屏的需求及节省大量的人力成本。在组件配置过程中涉及到组件的位置和大小等相关内容的处理，因此开发出一个通用的可视化模块拖拽组件来处理这些内容很有必要。
[0004]现有的可视化模块拖拽技术多用于可视化大屏展示系统中，较为优秀的模块拖拽技术一般都集成在各自公司的商业化产品中，不对外开放源代码，无法使用。也有一些开源产品但受到开源许可协议限制或者是和系统本身的业务逻辑强相关。而现有的可视化大屏展示系统也不能完全满足本身的业务需求。
[0005]现有的可视化模块拖拽技术，大都集成在一套大屏展示系统中，与系统本身及业务需求有较强的耦合性，无法单独使用。而购买一套这样的大屏系统却又不能满足自身的业务需求，需要进行二次开发，开发成本和维护成本较大。
[0006]基于此，本专利技术设计了一种基于Vue的大屏可视化模块拖拽技术的研究，以解决上述问题。<br/>
技术实现思路

[0007]本专利技术的目的在于提供一种基于Vue的大屏可视化模块拖拽技术的研究，以解决上述
技术介绍
中提出的现有的可视化模块拖拽技术，无法单独使用。而购买一套这样的大屏系统却又不能满足自身的业务需求，需要进行二次开发，开发成本和维护成本较大的问题。
[0008]为实现上述目的，本专利技术提供如下技术方案：
[0009]一种基于Vue的大屏可视化模块拖拽技术的研究，包括的系统组件有计算机、计算机鼠标和可视化大屏组件，所述计算机用于搭载可视化大屏组件，所述计算机鼠标用于改变可视化大屏组件的位置和大小，改变可视化大屏组件的位置和大小具体步骤为：
[0010]S1：通过鼠标选中可视化大屏组件；
[0011]S2：获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；
[0012]S3：移动鼠标，计算移动距离；
[0013]S4：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高，从而改变
可视化大屏组件位置或大小；
[0014]S5：鼠标不松开时循环处理步S3
‑
S4，鼠标松开则结束拖拽。
[0015]优选的，还包括S11：判断可视化大屏组件的锁定状态是否可以拖拽，不可拖拽则返回，所述S11在S1之后和S2之前。
[0016]优选的，所述S11中，可视化大屏组件不可拖拽时可以拖拽大屏。
[0017]优选的，S3中，所述计算移动距离具体为根据鼠标当前坐标点和鼠标点击时的坐标点计算出移动距离。
[0018]优选的，S4中，所述边界值判断、更新可视化大屏组件坐标具体为
[0019]S411：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
[0020]S412：如果组件移动到大屏区域外部则设置组件坐标为大屏区域临界值坐标，否则组件坐标为初始坐标加上纵横方向上的移动距离，进而改变可视化大屏组件位置。
[0021]优选的，S4中，所述边界值判断、更新可视化大屏组件宽高具体为
[0022]S421：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
[0023]S422：如果组件移动到大屏区域外部则设置组件宽高为临界值时的宽高，否则组件宽高为初始宽高加上纵横方向上的移动距离，进而改变可视化大屏组件大小。
[0024]与现有技术相比，本专利技术的有益效果是：
[0025]本专利技术利用CSS的绝对定位功能通过鼠标拖拽改变可视化大屏组件的大小和宽高来解决大屏内容的布局问题。完全针对自身业务需求不基于第三方组件库进行的自主开发，有更好的灵活性和可扩展性，完美的解决了在可视化大屏配置过程中组件的灵活移动、布局问题。
附图说明
[0026]为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0027]图1为本专利技术改变组件位置流程示意图；
[0028]图2为本专利技术改变组件大小流程示意图。
具体实施方式
[0029]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本专利技术保护的范围。
[0030]请参阅图1
‑
2，本专利技术提供一种技术方案：
[0031]一种基于Vue的大屏可视化模块拖拽技术的研究，包括1、的系统组件有计算机、计算机鼠标和可视化大屏组件，其特征在于：所述计算机用于搭载可视化大屏组件，所述计算机鼠标用于改变可视化大屏组件的位置和大小，改变可视化大屏组件的位置和大小具体步骤为：
[0032]实施例1：改变可视化大屏组件的位置
[0033]S1：鼠标左键点击选中需要拖拽的组件；
[0034]S11：判断可视化大屏组件的锁定状态是否可以拖拽，不可拖拽则返回；
[0035]S2：获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；
[0036]S3：移动鼠标，根据鼠标当前坐标点和鼠标点击时的坐标点计算出移动距离；
[0037]S4：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高，从而改变可视化大屏组件位置或大小；
[0038]S411：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
[0039]S412：如果组件移动到大屏区域外部则设置组件坐标为大屏区域临界值坐标，否则组件坐标为初始坐标加上纵横方向上的移动距离，进而改变可视化大屏组件位置；
[0040]S5：鼠标不松开时循环处理步S3
‑
S4，鼠标松开则结束拖拽。
[0041]实施例2：改变可视化大屏组件的大小
[0042]S1：鼠标左键点击选中需要拖拽的组件；
[0043]S11：判断可视化大屏组件的锁定状态是否可以拖拽，不可拖拽则返回；
[0044]S2：获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；
[0045]S3：移动鼠标，根据鼠标当前坐标点和鼠标点击时的坐标点计算出移动距离；<本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Vue的大屏可视化模块拖拽技术的研究，包括的系统组件有计算机、计算机鼠标和可视化大屏组件，其特征在于：所述计算机用于搭载可视化大屏组件，所述计算机鼠标用于改变可视化大屏组件的位置和大小，改变可视化大屏组件的位置和大小具体步骤为：S1：通过鼠标选中可视化大屏组件；S2：获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；S3：移动鼠标，计算移动距离；S4：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高，从而改变可视化大屏组件位置或大小；S5：鼠标不松开时循环处理步S3
‑
S4，鼠标松开则结束拖拽。2.根据权利要求1所述的一种基于Vue的大屏可视化模块拖拽技术的研究，其特征在于：还包括S11：判断可视化大屏组件的锁定状态是否可以拖拽，不可拖拽则返回，所述S11在S1之后和S2之前。3.根据权利要求2所述的一种基于Vue的大屏可视化模块拖拽技术的研究，其特征在于：所述S11中，可视化大屏组件不可拖拽时可以拖拽大屏。4.根据...

【专利技术属性】
技术研发人员：孙强，李尊状，李永保，候金明，
申请(专利权)人：中孚安全技术有限公司中孚信息股份有限公司北京中孚泰和科技发展股份有限公司，
类型：发明
国别省市：