很火的一款拖拽式前端Web可视化组态工具

一、很火的一款拖拽式前端Web可视化组态工具

1、在数字化转型浪潮下，可视化成为企业提升效率与业务呈现的重要工具。一款名为Sovit2D的前端Web组态软件因其易用性与强大功能而备受瞩目，成为市场新宠。由长沙数维图信息科技有限公司自主研发，Sovit2D专为设计交互式前端常规屏与大屏可视化效果而生。借助其强大的Web绘图工具与丰富行业标准元器件图元库，用户可在浏览器端轻松构建现代化的SCADA、HMI、仪表板与IIOT系统，广泛应用于工业、水利、电力、能源、油气、环境、园区、交通等领域。

2、Sovit2D凭借跨平台、简单、高效与易于外部系统对接的特点，大幅降低企业研发与运维成本。即便是无编程基础，也能实现Web组态、SCADA等项目开发。其私有化部署设计，解决了客户对数据安全与隐私的顾虑，支持用户积累与深度应用自身数据资产，满足二次开发需求。

3、在Sovit2D中，可视化编辑功能灵活便捷，支持自由式布局与组件化设计，丰富组件库涵盖各行业模型组件，用户可自定义组件，并对其属性、数据、动画与事件进行设置。只需简单拖拽，即可快速制作动态可视化模型页面，实现敏捷数据展现。

4、数据源绑定功能使Sovit2D与外部系统无缝对接，提供多种数据源配置，0代码开发数据可视化展示平台。交互式动效功能通过设置实现Web场景中图形动画效果，如旋转、变色、闪烁、心跳、报警等，使页面更加生动。动画与后台数据绑定，可根据数据变化实时执行，如数据大小控制旋转速度，状态切换影响闪烁效果或报警。

5、Sovit2D提供简洁集成方式，模型发布后，只需简单引入即可集成至第三方系统。其优势在于，通过可视化编辑器，用户可设计炫酷的可视化平台，无需编码，大幅节省开发时间与成本。Web动画组态场景设计工具让业务场景中的逼真模拟实时动画效果变得简单，无需大量代码。企业数据可视化开发难度降低，周期缩短，维护成本低，业务变化快速适应，效果实时更新。

6、企业自研可视化平台时，业务复杂、数据整合困难常是挑战。Sovit2D提供丰富的模型组件与多数据源支持，无缝对接模型与企业业务系统，解决数据对接难题。前端接口采用标准HTML5开发，支持2D/3D图形配置与Mqtt协议访问，可单独发布，与企业自有平台无缝集成，轻松与用户自有系统集成，构建综合应用平台。

7、Sovit2D作为物联网、工业互联网Web前端可视化编辑器，集报表/大屏、Web组态、三维可视化于一体，使用便捷，维护简单。无论是项目沟通、开发阶段，还是已有业务场景，Sovit2D都是理想选择。用户可访问数维图官网免费体验，深入了解Sovit2D功能与应用。Sovit2D产品介绍与行业模板可直接访问链接：sovitjs.com/sovit2D_det... sovitjs.com/demo.html。

二、怎样进行Vue拖拽组件开发

1、这次给大家带来怎样进行Vue拖拽组件开发，进行Vue拖拽组件开发的注意事项有哪些，下面就是实战案例，一起来看一下。

2、主要原因：对于前端开发来说，兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低版本浏览器。项目本身也是一个数据驱动型的。加之，Vue本身具有以下主要特性：

3、这就是我们为什么选择Vue框架的一些原因。

4、主要目的是可提高代码的复用性和可维护性。

5、?复用性：组件化后，一些样式和逻辑均通过配置参数的方式去差异化体现，所以参数的可配置性提高了组件的复用率和灵活性。

6、?可维护性：组件化后，组件内部的逻辑只对组件负责，外部的逻辑只通过配置参数适配，所以提高了代码的逻辑清晰度，可以快速定位代码出现问题的地方。

7、上图可看出，在Vue中，所谓组件化搭建页面，简单来说，页面实际上是由一个个功能独立的组件搭建而成。这些组件之间可以组合、嵌套，最终形成了我们的页面。

8、<script type="text/javascript"></script>

9、<style lang="scss" scoped></style>开发Vue移动拖拽组件为例

10、手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动。

11、?开始拖动时：获取到接触点相对于整个视图区的坐标clientX，clientY；获取元素距离视图上侧和左侧的距离 initTop，initLeft；计算接触点距离元素上侧和左侧的距离 elTop= clientY- initTop, elLeft= clientX- initLeft；

12、?拖动过程中：通过 currTop= clientY- elTop, currLeft= clientX- elLeft实时获取元素距离视图上侧和左侧的距离值，并赋值给元素，使元素跟着手指的移动而动起来；

13、使用Vue，最大的不同之处是我们几乎不去操作DOM，要充分利用Vue的数据驱动来实现拖拽功能。本例中，我们只需在垂直方向上拖动元素，所以只需考虑垂直方向的移动即可。

14、上图中，通过data中的dragList渲染拖拽区域列表，代码如下：

15、<p class="drag-title">拖拽可调整顺序</p>

16、<li class="drag-item">{{item.txt}}</li>

17、}假设我们将元素从位置1拖至位置3，本质上是数组的顺序发生了改变。这就有必要提一下Vue的最大特性：数据驱动。

18、所谓的数据驱动就是当数据发生变化时，通过修改数据状态，使用户界面发生相应的改变，开发者不需要手动的去修改DOM。

19、Vue的数据驱动是通过MVVM这种框架来实现的，MVVM框架主要包含3个部分:Model、View、Viewmodel。

20、_ Viewmodel：连接视图与数据的中间件。

21、顺着这个思路走下去，我们知道：

22、_ oldIndex：元素在数组中的初始索引index；

23、_ currTop= clientY- elTop：元素在拖动过程中距离可视区上侧距离；

24、_ currTop- initTop> 0：得知元素是向上拖拽；

25、_ currTop- initTop< 0：得知元素是向下拖拽。

26、_首先，我们要在拖拽结束事件touchend中判断元素从拖动开始到拖动结束时拖动的距离。若小于某个设定的值，则什么也不做；

27、_然后，在touchmove事件中判断，若(currTop- initTop)% elHeight>= elHeight/2成立，即当元素拖至另一个元素块等于或超过1/2的位置时，即可将元素插入到最新的位置为newIndex=(currTop- initTop)/ elHeight+ oldIndex。

28、_最后，若手指离开元素，那么我们在touchend事件中，通过this.dragList.splice(oldIndex, 1)，this.dragList.splice(newIndex, 0, item)重新调整数组顺序。页面会根据最新的dragList渲染列表。

29、写到这里，我们俨然已经用Vue实现了移动端的拖拽功能。但是拖拽体验并不好，接下来，我们对它进行优化。

30、优化点：我们希望，在元素即将可能落到的位置，提前留出一个可以放得下元素的区域，让用户更好的感知拖拽的灵活性。

31、方案：（方案已被验证是可行的）将li的结构做一下修改，代码如下：

32、<p class="leave-block"></p>

33、<p class="">{{item.txt}}</p>

34、<p class="leave-block"></p>

35、</ul>?拖拽开始：将元素的定位方式由static设置为absolute，z-index设置为一个较大的值，防止元素二次拖拽无效；

36、?拖拽过程中：将元素即将落入新位置的那个li下p的item.isShow设置为true，其他li下p的item.isShow均设置为false;

37、?拖拽结束：将所有li下p的item.isShow均设置为false，将元素定位方式由absolute设置为static。

38、//获取元素距离视口顶部的初始距离

39、initTop= e.currentTarget.offsetTop;

40、//开始拖动时，获取鼠标距离视口顶部的距离

41、initClientY= e.touches[0].clientY;

42、//计算出接触点距离元素顶部的距离

43、elTop= e.touches[0].clientY- initTop;

44、//将拖拽结束时，给元素设置的static定位方式移除，防止元素二次拖拽无效

45、e.target.classList.remove('static');

46、//给拖拽的元素设置绝对定位方式

47、e.target.classList.add('ab');

48、//获取元素在拖拽过程中距离视口顶部距离

49、currTop= e.touches[0].clientY- elTop;

50、//元素在拖拽过程中距离视口顶部距离赋给元素

51、if(e.touches[0].clientY>(this.dragList.length)* elHeight){

52、//将元素距离上侧的距离设置为拖动区视图的高

53、currTop=(this.dragList.length)* elHeight;

54、//若拖拽到大于等于元素的一半时，即可将元素插入到最新的位置

55、if((currTop- initTop)% elHeight>= elHeight/ 2){

56、newIndex= Math.round((currTop- initTop)/ elHeight)+ index;

57、//确保新元素的索引不能大于等于列表的长度

58、if(newIndex< this.dragList.length){

59、for(var i= 0;i< this.dragList.length;i++){

60、this.dragList[i].isShow= false;

61、//将元素即将拖到的新位置的留空展示

62、this.dragList[newIndex].isShow= true;

63、if(currTop< initTop){...}}, touchEnd(e){//若拖动距离大于某个设定的值，则按照上述，执行相关代码 if(Math.abs(e.changedTouches[0].clientY- initClientY)> customVal){

64、this.dragList.splice(oldIndex, 1);

65、this.dragList.splice(newIndex, 0, currItem);

66、for(var i= 0;i< this.dragList.length;i++){

67、this.dragList[i].isShow= false;

68、this.dragList[i].isShowUp= false;

69、e.target.classList.remove('ab');

70、e.target.classList.add('static');

71、以上便是用Vue实现移动端拖拽组件的过程。我们知道，有些项目是需要在PC端用Vue实现此功能。这里简单提一下PC与移动端的区别如下：

72、?PC端可以使用的事件组有两种：第一种：H5新特性draggable，dragstart，drag，dragend；第二种：mousedown，mousemove，mouseup;

73、?PC端获取鼠标坐标是通过e.clientX，clientY，区别于移动端的e.touches[0].clientX，e.touches[0].clientY。

74、相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

75、怎样操作vue中$emit与$on父子与兄弟组件通信

76、如何使用node命令方式启动修改端口

三、web前端开发都包括哪些技术

1、web前端开发技术包括三个要素：html、css和javascript，但随着ria的流行和普及，flash/flex、silverlight、xml和服务器端语言也是前端开发工程师应该掌握的。web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。

2、前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事it工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如css

3、sprite、负边距布局、栅格布局等；各种javascript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。