CN114371809A - 一种基于Vue的大屏可视化模块拖拽技术的研究 - Google Patents
一种基于Vue的大屏可视化模块拖拽技术的研究 Download PDFInfo
- Publication number
- CN114371809A CN114371809A CN202111530866.XA CN202111530866A CN114371809A CN 114371809 A CN114371809 A CN 114371809A CN 202111530866 A CN202111530866 A CN 202111530866A CN 114371809 A CN114371809 A CN 114371809A
- Authority
- CN
- China
- Prior art keywords
- screen
- component
- mouse
- visual
- width
- 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
- 238000012800 visualization Methods 0.000 title claims abstract description 26
- 238000005516 engineering process Methods 0.000 title claims abstract description 17
- 238000011160 research Methods 0.000 title claims abstract description 10
- 230000000007 visual effect Effects 0.000 claims abstract description 54
- 238000012545 processing Methods 0.000 claims abstract description 6
- 238000000034 method Methods 0.000 claims description 10
- 238000013079 data visualisation Methods 0.000 abstract description 3
- 238000011161 development Methods 0.000 description 7
- 238000012423 maintenance Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
Images
Classifications
-
- 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
- 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了大屏数据可视化技术领域的一种基于Vue的大屏可视化模块拖拽技术的研究，本发明包括的***组件有计算机、计算机鼠标和可视化大屏组件，所述计算机用于搭载可视化大屏组件，所述计算机鼠标用于改变可视化大屏组件的位置和大小，具体步骤为：通过鼠标选中可视化大屏组件；获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；移动鼠标，计算移动距离：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高；鼠标不松开时循环处理步S3‑S4，鼠标松开则结束拖拽；本发明利用CSS的绝对定位功能通过鼠标拖拽改变可视化大屏组件的大小和宽高来解决大屏内容的布局问题，有更好的灵活性和可扩展性。
Description
技术领域
本发明涉及大屏数据可视化技术领域，具体为一种基于Vue的大屏可视化模块拖拽技术的研究。
背景技术
大屏数据可视化是以大屏为主要载体，把相对复杂、抽象的数据通过可视的方式以一种更直观、人们更容易理解的方式展示出来的手段，更形象地表达数据内在的信息、规律和特征，挖掘数据背后的价值。
而客户对大屏的需求多种多样，经常需要针对的客户的需求进行相应大屏的开发工作。如果能够将大屏的内容形成一个个的组件，在***中内置丰富的组件，最终实现通过配置组件快速生成大屏，将能够快速的响应用户对大屏的需求及节省大量的人力成本。在组件配置过程中涉及到组件的位置和大小等相关内容的处理，因此开发出一个通用的可视化模块拖拽组件来处理这些内容很有必要。
现有的可视化模块拖拽技术多用于可视化大屏展示***中，较为优秀的模块拖拽技术一般都集成在各自公司的商业化产品中，不对外开放源代码，无法使用。也有一些开源产品但受到开源许可协议限制或者是和***本身的业务逻辑强相关。而现有的可视化大屏展示***也不能完全满足本身的业务需求。
现有的可视化模块拖拽技术，大都集成在一套大屏展示***中，与***本身及业务需求有较强的耦合性，无法单独使用。而购买一套这样的大屏***却又不能满足自身的业务需求，需要进行二次开发，开发成本和维护成本较大。
基于此，本发明设计了一种基于Vue的大屏可视化模块拖拽技术的研究，以解决上述问题。
发明内容
本发明的目的在于提供一种基于Vue的大屏可视化模块拖拽技术的研究，以解决上述背景技术中提出的现有的可视化模块拖拽技术，无法单独使用。而购买一套这样的大屏***却又不能满足自身的业务需求，需要进行二次开发，开发成本和维护成本较大的问题。
为实现上述目的，本发明提供如下技术方案：
一种基于Vue的大屏可视化模块拖拽技术的研究，包括的***组件有计算机、计算机鼠标和可视化大屏组件，所述计算机用于搭载可视化大屏组件，所述计算机鼠标用于改变可视化大屏组件的位置和大小，改变可视化大屏组件的位置和大小具体步骤为：
S1：通过鼠标选中可视化大屏组件；
S2：获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；
S3：移动鼠标，计算移动距离；
S4：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高，从而改变可视化大屏组件位置或大小；
S5：鼠标不松开时循环处理步S3-S4，鼠标松开则结束拖拽。
优选的，还包括S11：判断可视化大屏组件的锁定状态是否可以拖拽，不可拖拽则返回，所述S11在S1之后和S2之前。
优选的，所述S11中，可视化大屏组件不可拖拽时可以拖拽大屏。
优选的，S3中，所述计算移动距离具体为根据鼠标当前坐标点和鼠标点击时的坐标点计算出移动距离。
优选的，S4中，所述边界值判断、更新可视化大屏组件坐标具体为
S411：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
S412：如果组件移动到大屏区域外部则设置组件坐标为大屏区域临界值坐标，否则组件坐标为初始坐标加上纵横方向上的移动距离，进而改变可视化大屏组件位置。
优选的，S4中，所述边界值判断、更新可视化大屏组件宽高具体为
S421：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
S422：如果组件移动到大屏区域外部则设置组件宽高为临界值时的宽高，否则组件宽高为初始宽高加上纵横方向上的移动距离，进而改变可视化大屏组件大小。
与现有技术相比，本发明的有益效果是：
本发明利用CSS的绝对定位功能通过鼠标拖拽改变可视化大屏组件的大小和宽高来解决大屏内容的布局问题。完全针对自身业务需求不基于第三方组件库进行的自主开发，有更好的灵活性和可扩展性，完美的解决了在可视化大屏配置过程中组件的灵活移动、布局问题。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明改变组件位置流程示意图；
图2为本发明改变组件大小流程示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
请参阅图1-2，本发明提供一种技术方案：
一种基于Vue的大屏可视化模块拖拽技术的研究，包括1、的***组件有计算机、计算机鼠标和可视化大屏组件，其特征在于：所述计算机用于搭载可视化大屏组件，所述计算机鼠标用于改变可视化大屏组件的位置和大小，改变可视化大屏组件的位置和大小具体步骤为：
实施例1：改变可视化大屏组件的位置
S1：鼠标左键点击选中需要拖拽的组件；
S11：判断可视化大屏组件的锁定状态是否可以拖拽，不可拖拽则返回；
S2：获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；
S3：移动鼠标，根据鼠标当前坐标点和鼠标点击时的坐标点计算出移动距离；
S4：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高，从而改变可视化大屏组件位置或大小；
S411：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
S412：如果组件移动到大屏区域外部则设置组件坐标为大屏区域临界值坐标，否则组件坐标为初始坐标加上纵横方向上的移动距离，进而改变可视化大屏组件位置；
S5：鼠标不松开时循环处理步S3-S4，鼠标松开则结束拖拽。
实施例2：改变可视化大屏组件的大小
S1：鼠标左键点击选中需要拖拽的组件；
S11：判断可视化大屏组件的锁定状态是否可以拖拽，不可拖拽则返回；
S2：获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；
S3：移动鼠标，根据鼠标当前坐标点和鼠标点击时的坐标点计算出移动距离；
S4：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高，从而改变可视化大屏组件位置或大小；
S421：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
S422：如果组件移动到大屏区域外部则设置组件宽高为临界值时的宽高，否则组件宽高为初始宽高加上纵横方向上的移动距离，进而改变可视化大屏组件大小；
S5：鼠标不松开时循环处理步S3-S4，鼠标松开则结束拖拽。
本发明利用CSS的绝对定位功能通过鼠标拖拽改变可视化大屏组件的大小和宽高来解决大屏内容的布局问题。完全针对自身业务需求不基于第三方组件库进行的自主开发，有更好的灵活性和可扩展性，完美的解决了在可视化大屏配置过程中组件的灵活移动、布局问题。
在本说明书的描述中，参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。
Claims (6)
1.一种基于Vue的大屏可视化模块拖拽技术的研究，包括的***组件有计算机、计算机鼠标和可视化大屏组件，其特征在于：所述计算机用于搭载可视化大屏组件，所述计算机鼠标用于改变可视化大屏组件的位置和大小，改变可视化大屏组件的位置和大小具体步骤为：
S1：通过鼠标选中可视化大屏组件；
S2：获取可视化大屏组件坐标及宽高，同时获取鼠标点击时坐标；
S3：移动鼠标，计算移动距离；
S4：根据移动距离进行边界值判断，并更新可视化大屏组件坐标或宽高，从而改变可视化大屏组件位置或大小；
S5：鼠标不松开时循环处理步S3-S4，鼠标松开则结束拖拽。
2.根据权利要求1所述的一种基于Vue的大屏可视化模块拖拽技术的研究，其特征在于：还包括S11：判断可视化大屏组件的锁定状态是否可以拖拽，不可拖拽则返回，所述S11在S1之后和S2之前。
3.根据权利要求2所述的一种基于Vue的大屏可视化模块拖拽技术的研究，其特征在于：所述S11中，可视化大屏组件不可拖拽时可以拖拽大屏。
4.根据权利要求1所述的一种基于Vue的大屏可视化模块拖拽技术的研究，其特征在于：S3中，所述计算移动距离具体为根据鼠标当前坐标点和鼠标点击时的坐标点计算出移动距离。
5.根据权利要求1所述的一种基于Vue的大屏可视化模块拖拽技术的研究，其特征在于：S4中，所述边界值判断、更新可视化大屏组件坐标具体为
S411：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
S412：如果组件移动到大屏区域外部则设置组件坐标为大屏区域临界值坐标，否则组件坐标为初始坐标加上纵横方向上的移动距离，进而改变可视化大屏组件位置。
6.根据权利要求1所述的一种基于Vue的大屏可视化模块拖拽技术的研究，其特征在于：S4中，所述边界值判断、更新可视化大屏组件宽高具体为
S421：根据移动距离及组件初始坐标和宽高判断组件是否移动到大屏区域外部；
S422：如果组件移动到大屏区域外部则设置组件宽高为临界值时的宽高，否则组件宽高为初始宽高加上纵横方向上的移动距离，进而改变可视化大屏组件大小。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111530866.XA CN114371809A (zh) | 2021-12-14 | 2021-12-14 | 一种基于Vue的大屏可视化模块拖拽技术的研究 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111530866.XA CN114371809A (zh) | 2021-12-14 | 2021-12-14 | 一种基于Vue的大屏可视化模块拖拽技术的研究 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114371809A true CN114371809A (zh) | 2022-04-19 |
Family
ID=81139897
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111530866.XA Pending CN114371809A (zh) | 2021-12-14 | 2021-12-14 | 一种基于Vue的大屏可视化模块拖拽技术的研究 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114371809A (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102902848A (zh) * | 2012-09-18 | 2013-01-30 | 大连理工大学 | 针对边界元分析的三维可视化仿真方法 |
| CN104216607A (zh) * | 2013-09-05 | 2014-12-17 | 侯金涛 | 基于html5的虚拟操作***的图标拖拽方法及*** |
| CN110597586A (zh) * | 2019-08-19 | 2019-12-20 | 北京邮电大学 | 基于拖拽的组件化布局大屏方法和装置 |
| CN111563369A (zh) * | 2020-05-11 | 2020-08-21 | 中冶赛迪重庆信息技术有限公司 | 一种屏幕可视化方法、装置、电子设备及介质 |
| CN113672228A (zh) * | 2021-09-17 | 2021-11-19 | 灵犀科技有限公司 | 一种基于组件和数据资产交易的可视化开发方法及*** |
-
2021
- 2021-12-14 CN CN202111530866.XA patent/CN114371809A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102902848A (zh) * | 2012-09-18 | 2013-01-30 | 大连理工大学 | 针对边界元分析的三维可视化仿真方法 |
| CN104216607A (zh) * | 2013-09-05 | 2014-12-17 | 侯金涛 | 基于html5的虚拟操作***的图标拖拽方法及*** |
| CN110597586A (zh) * | 2019-08-19 | 2019-12-20 | 北京邮电大学 | 基于拖拽的组件化布局大屏方法和装置 |
| CN111563369A (zh) * | 2020-05-11 | 2020-08-21 | 中冶赛迪重庆信息技术有限公司 | 一种屏幕可视化方法、装置、电子设备及介质 |
| CN113672228A (zh) * | 2021-09-17 | 2021-11-19 | 灵犀科技有限公司 | 一种基于组件和数据资产交易的可视化开发方法及*** |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102356375B (zh) | 连续和不连续的属性的平滑布局动画 | |
| US5710896A (en) | Object-oriented graphic system with extensible damage repair and drawing constraints | |
| US9507791B2 (en) | Storage system user interface with floating file collection | |
| CN101763234B (zh) | 一种模拟各种屏幕分辨率的方法及其装置 | |
| CN102945557A (zh) | 基于移动终端的矢量现场图绘制方法 | |
| CN105787034A (zh) | 数据展示的方法与装置 | |
| CN107025258A (zh) | 一种数据可视化渲染方法和装置 | |
| CN108846893A (zh) | 三维矢量地图生成方法及装置 | |
| CN103955469A (zh) | 一种浏览器中进行页面缩放的方法和装置 | |
| CN103150198A (zh) | 一种组态软件的显示方法 | |
| CN110489041B (zh) | 小程序拖动元素自动对齐的方法、装置、设备及介质 | |
| CN106846431B (zh) | 一种支持多表现形式的统一Web图形绘制*** | |
| CN104995593A (zh) | 用于处理列表的触摸屏设备 | |
| CN111176768A (zh) | 一种嵌套型父控件里子控件多层级显示方法和装置 | |
| KR20160086836A (ko) | 정보 처리 장치, 정보 처리 방법 및 정보 처리 시스템 | |
| CN114371809A (zh) | 一种基于Vue的大屏可视化模块拖拽技术的研究 | |
| US10289388B2 (en) | Process visualization toolkit | |
| CN104572128A (zh) | 一种在桌面集成自定义全屏窗口小部件的技术方法 | |
| CN108920230B (zh) | 鼠标悬浮操作的响应方法、装置、设备和存储介质 | |
| CN107844298A (zh) | 生成实体网页展示模板的方法和装置 | |
| CN111179439B (zh) | 基于three.js的网页端三维空间内部物体交互操作方法 | |
| CN114629800A (zh) | 工控网络靶场的可视化生成方法、装置、终端及存储介质 | |
| CN110543370A (zh) | 一种重写ue4渲染引擎底层及其通信机制的方法 | |
| CN105446727A (zh) | 本体框架可视化方法 | |
| CN111240655B (zh) | 一种基于GDI/GDI+美化WinForm组件的方法 |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20220419 |