搞一个大屏设计器-拖拽式

大家好，欢迎来到IT知识分享网。

随着各种数字化工厂、数字孪生产等概念的迅速推广，数字化大屏成为了各类企业必不可少的一部分。目前市面上有很多可以做数字大屏的产品，比如帆软；也有很多开源的大屏设计器。但是别人的毕竟不是自己的，特别是每个企业的情况都千差万别，你很难找到一款非常适合自己的产品。既然找不到，那我们就自己做一个，下面咱就讲讲这个拖拽式数字大屏设计器如何制作。

这里我们采用的是VUE作为前端框架开发，首先我们建立一个VUE项目，然后引入几个包：

element-ui//用来做主体框架； echarts//这个就不用我说了，少了它我们可就少了成千上万的图表； benxin-datav//这是基于dataV扩展的一个非常优秀的组件库，echarts都是为他服务的。

而后我们引入一个核心组件（这里我们为了修改样式，选择了直接加载它的源码，图省事的可以直接用它的npm包）：vue-draggable-resizable。

做好这些准备工作，就可以开始码代码了。首先我们将界面分为以下几个区域

区域划分

这几个区域核心就是设计区域，在核心区域中我们需要动态的加载组件，这里我们可以通过以下代码加载组件

<div v-for="(item,index) in componentData" :key="item.id"> <component :is="item.name" :key="item.id" :id="item.id" :ref="item.id" :message="item.datas" :style="'z-index:'+index"> </component> </div> 

然后我们将这块代码用拖拽组件包起来：

<vue-draggable-resizable v-for="(item,index) in AppendedComponents" :key="item.id" :id="item.id" :parent="true" :snap="true" :snap-tolerance="5" :scaleRatio="zoom/100" @resizestop="onResize" @dragstop="onDragStop" @dragging="onDragging" @resizing="onResizing" @activated="onActivated(item)" @deactivated="hidetool(item.id)" @refLineParams="getRefLineParams" style="border: 0px dashed #249ed6;" @keyup.delete.native="remove(item.id)" @keyup.up.native="upCommponent(index)" @keyup.down.native="downComponent(index)" tabindex="2" class-name-active="my-active-class"> </vue-draggable-resizable>

这里我们有几个主要属性需要注意：resizestop：尺寸变更结束；dragstop：拖拽结束；

dragging：拖拽进行中；resizing：尺寸变化中。

有了这几个属性，我们就能对加入到设计区域的组件进行随意拖动了，并把拖动后的结果存放到本地中。

好了今天我们先讲到这儿，改天我们再讲一下底部的操作条如何制作。

飞线图组件