基于页面拖拽的数据信息化处理方法、系统及存储介质与流程

本发明涉及计算机技术领域，特别涉及一种基于页面拖拽的数据信息化处理方法、系统及存储介质。

背景技术：

现今各大制造企业在对数据进行智能信息化(包括数据统计、远程操控、数据导出等)处理时，如果他们使用的是(c/s)客户端安装式的生产管理系统，则采用的是mvc(m是指业务模型，v是指用户界面，c则是控制器)的框架，数据的展示与操作完全依赖服务器，通过对服务器内数据库的读写，以完成产线的基本功能，而功能的实现的逻辑方式也全部在model层(即服务器端)进行。

由于是(c/s)客户端安装方式，对应可使用的信息化展示控件不仅少而且也都比较老旧，即数据信息化展示单一，无法智能多样的展示数据。这并不能满足制造企业对于数据可视化的需求以及信息化的发展，所以，数据信息化展示需要解决的一个问题就是能够使用更多更现代更智能的数据展示方式，并能够动态地实时地显示出来。

比如，当某一个线上站点需要改变操作方式时，即c/s系统的各部分模块中有一部分改变，就要关联到其它模块的变动，可能还要涉及数据库表格之间的关联，使系统升级成本变得很大。而且c/s更新不但需要在服务器更新，还需要在每台电脑重新安装更新包，这样的操作也很复杂，还需要考虑当前电脑的内存，配置，操作系统等问题，更新安装时时都存在报错的可能性，这对于效率至上的制造企业显然不是最优选择。所以，需要一个能够快速灵活且方便的更新方式，显然至关重要，即推荐使用b/s的架构。

近些年来，基于.net的依然采用mvc框架的b/s架构，用于实现各类业务系统，如oa、erp、mis、crm、电商平台等系统的开发，又称为敏捷开发平台，框架本身是一个可二次开发的开发平台，开发者可以根据开发向导进行配置直接生成功能模块；但是它又是一套源代码，开发者也可以直接在vs中基于框架开发，甚至还可以对开发框架进行开发扩展。如今此技术在各大制造企业开始飞速的推广应用起来，使用基于.net的mvc框架b/s架构开发出的敏捷开发平台，通用但不适配每一个制造企业，需要进行针对性优化和调整，需要开发公司提供文档，一旦更新，或者开发公司人员流动较大，很容易出现无人维护的现象，没有较高的主动权，敏捷开发平台存在以下几个缺点：

1、由于是属于二次开发，必然存在技术架构庞杂而冗余的问题，平台内的功能并不是每一个都有用，基于用户的需求而定，因而对于简单而又单一的制造企业，该平台就会显得过于庞杂。

2、维护难度高，因为需要开发熟悉各个模块的逻辑，难度较高，很难真的适配用户需求，可能用户那里已经形成一套不同于规定的“自己”的运行方式(违规操作但瞒而不报，跳流程操作等)，而开发人员并不了解里面暗藏的难点，这就需要平台本身需要具有一定灵活多变性，这也非常考验开发人员，同时，这也对代码规范清晰度提出了很高的要求。

3、开发前期，会有许多需求讨论会和需求改良会，都需要开发测试全部到场，会议时间有时候会持续很久。但其实某些需求大多数人实际上并不必参与，这就会造成对用户工时上的浪费。

技术实现要素：

本发明的主要目的在于提出一种基于页面拖拽的数据信息化处理方法、系统及存储介质，旨在提升数据智能信息化处理的灵活性和数据处理效率。

为实现上述目的，本发明提供了一种基于页面拖拽的数据信息化处理方法，所述方法包括：

在检测到用户拖拽页面第一侧栏的元素的第一操作指令时，根据所述第一操作指令将所述页面第一侧栏的元素拖拽至页面中间指定位置，形成标签模块；

在检测到用户拖拽页面第二侧栏的元素的第二操作指令时，根据所述第二操作指令将所述页面第二侧栏的元素拖拽至所述标签模块所在位置，为所述标签模块赋值，形成新页面，其中，所述页面第二侧栏的每个元素与服务器对应id号的数据源相关联；

对所述新页面进行处理，形成新项目包，并将所述新项目包压缩上传至服务器的指定路径，由所述服务器对所述新项目包进行解压安装。

本发明进一步的技术方案是，所述根据所述第二操作指令将所述页面第二侧栏的元素拖拽至所述标签模块所在位置，为所述标签模块赋值，形成新页面的步骤包括：

将所述页面第一侧栏的可拖拽可形成节点的元素拖入目标dom，得到第一内容节点；

选中所述目标dom中的第一内容节点，将所述页面第二侧栏的可拖拽可赋值的元素拖入所述第一内容节点赋值；

为选中内容加上标签，得到第二内容节点，对所述第二内容节点进行标记；

确定待插入的目标节点，计算插入点在所述目标节点内的偏移量；

按照所述标记寻找所述第二内容节点，并插入到所述目标节点内偏移量个字符后。

本发明进一步的技术方案是，所述将所述页面第二侧栏的元素拖拽至所述标签模块所在位置，为所述标签模块赋值，形成新页面的步骤包括：

将与所述页面第二侧栏的元素对应的服务器id号的数据源保存在用户端浏览器缓存内。

本发明进一步的技术方案是，所述根据所述第二操作指令将所述页面第二侧栏的元素拖拽至所述标签模块所在位置，为所述标签模块赋值，形成新页面的步骤之前包括：

将服务器内的数据都赋予对应的id号，每个id号与所述页面第二侧栏的元素一一对应。

本发明进一步的技术方案是，所述对所述新页面进行处理，形成新项目包的步骤之前还包括：

在接收到预览所述新页面的指令时，预先展示赋值后的标签模块。

本发明进一步的技术方案是，所述在接收到预览所述新页面的指令时，预先展示赋值后的标签模块的步骤包括：

得到页面缓存数据，并逐一渲染至新页面；

根据服务器id号，在服务器中找到对应的数据，并赋值；

预先展示赋值后的标签模块。

本发明进一步的技术方案是，所述对所述新页面进行处理，形成新项目包，并将所述新项目包压缩上传至服务器的指定路径，由所述服务器对所述新项目包进行解压安装的步骤包括：

调用本地服务器，将新项目包作为参数导入；

创建文件输出流，再通过管道方法将输出流存档到文件，创建压缩的文件路径；

通过downloadjs下载到本地，再通过ftp上传至远端服务器，由所述服务器定时扫描指定路径，通过dos命令解压压缩包，通过npm指令安装依赖与打包，将打包后的dist文件夹放入项目路径中，删除指定路径内的所有文件与文件夹。

本发明进一步的技术方案是，所述方法应用于基于页面拖拽的数据信息化处理系统，所系统采用b/s架构。

为实现上述目的，本发明还提出一种基于页面拖拽的数据信息化处理系统，所述系统包括存储器、处理器，以及存在在所述处理器上的基于页面拖拽的数据信息化处理程序，所述基于页面拖拽的数据信息化处理程序被所述处理器调用时执行如上所述的方法的步骤。

为实现上述目的，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有基于页面拖拽的数据信息化处理程序，所述基于页面拖拽的数据信息化处理程序被处理器运行时执行如上所述的方法的步骤。

本发明基于页面拖拽的数据信息化处理方法、系统及存储介质通过上述技术方案，在检测到用户拖拽页面第一侧栏的元素的第一操作指令时，根据第一操作指令将页面第一侧栏的元素拖拽至页面中间指定位置，形成标签模块；在检测到用户拖拽页面第二侧栏的元素的第二操作指令时，根据第二操作指令将页面第二侧栏的元素拖拽至标签模块所在位置，为标签模块赋值，形成新页面，其中，页面第二侧栏的每个元素与服务器对应id号的数据源相关联；对新页面进行处理，形成新项目包，并将新项目包压缩上传至服务器的指定路径，由服务器对新项目包进行解压安装，提升了数据智能信息化处理的灵活性和数据处理效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。

图1是本发明基于页面拖拽的数据信息化处理方法较佳实施例的流程示意图；

图2是图1中步骤s20的细化流程示意图；

图3是图1中步骤s30的细化流程示意图；

图4是本实施例中预览新页面的流程示意图。

本发明目的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明，若本发明实施例中有涉及方向性指示(诸如上、下、左、右、前、后……)，则该方向性指示仅用于解释在某一特定姿态(如附图所示)下各部件之间的相对位置关系、运动情况等，如果该特定姿态发生改变时，则该方向性指示也相应地随之改变。

另外，若本发明实施例中有涉及“第一”、“第二”等的描述，则该“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，全文中出现的“和/或”的含义，包括三个并列的方案，以“a和/或b”为例，包括a方案、或b方案、或a和b同时满足的方案。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。

考虑到目前的数据智能信息化处理还存在一定弊端，由此，本发明提出一种由用户自己创造页面与功能的方法。

具体地，本发明提出一种基于页面拖拽的数据信息化处理方法，本发明应用于基于页面拖拽的数据信息化处理系统，所述系统采用b/s架构。

如图1所示，本发明基于页面拖拽的数据信息化处理方法较佳实施例包括以下步骤：

步骤s10，在检测到用户拖拽页面第一侧栏的元素的第一操作指令时，根据第一操作指令将页面第一侧栏的元素拖拽至页面中间指定位置，形成标签模块。

步骤s20，在检测到用户拖拽页面第二侧栏的元素的第二操作指令时，根据第二操作指令将页面第二侧栏的元素拖拽至标签模块所在位置，为标签模块赋值，形成新页面，其中，页面第二侧栏的每个元素与服务器对应id号的数据源相关联。

具体地，如图2所示，根据第二操作指令将页面第二侧栏的元素拖拽至标签模块所在位置，为标签模块赋值，形成新页面的步骤包括：

步骤s201，将页面第一侧栏的可拖拽可形成节点的元素拖入目标dom，得到第一内容节点。

步骤s202，选中目标dom中的第一内容节点，将页面第二侧栏的可拖拽可赋值的元素拖入第一内容节点赋值。

步骤s203，为选中内容加上标签，得到第二内容节点，对第二内容节点进行标记。

步骤s204，确定待插入的目标节点，计算插入点在目标节点内的偏移量。

步骤s205，按照标记寻找第二内容节点，并插入到目标节点内偏移量个字符后。

本实施例中，可拖拽可形成模型的标签dom范围内的标签经过鼠标拖拽至目标dom，经过坐标计算，从而形成特有模型，选中该模型可以进行移动，改变样式，添加数据和预览等操作。

可拖拽可形成节点的标签dom中的标签经过鼠标拖拽至目标dom中，如果目标dom范围有选中的节点，可以将可拖拽的可赋值数据的标签dom中的标签中的数据赋值给此选中节点，将此标签对应的id号与服务器内对应的id号相同的数据赋值给被选中的节点(在类型参数符合的前提下)，并实时获取服务器中的数据并最终展示出来。

当鼠标点击可拖拽可形成节点的标签的时候，获取初始标签坐标，然后，当鼠标开始移动的时候，记录鼠标移动的坐标距离，当鼠标放开的时候，判断，如果该位置在网页目标dom开始节点和结束节点的范围内，则在鼠标松开的位置，根据标签对应的数据生成对应的节点。

本实施例中，可拖拽可形成节点的标签dom中的标签通过鼠标拖拽至目标dom的范围形成节点，若目标dom中已有被选中节点，则标签节点会被放入其选中的节点中，形成嵌套，将目标dom中已选中的节点与经过拖拽在其内部形成的新节点进行dom合并。

本实施例中，先确定选中节点距离目标节点的上边距和左边距，再确定选中节点的宽和高，判断标签移动的坐标点距离目标节点的上边距是否低于选中节点距离目标节点的上边距和左边距是否超出选中节点距离目标节点的左边距，再通过计算判断鼠标的位置是否超出选中节点距离目标节点的上边距加上选中节点的高，或者超出选中节点距离目标节点的左边距加上选中节点的宽，如果没有，及已选中节点的宽度为标签形成节点的宽度，最终按比例形成新的节点。

本实施例中，可拖拽可形成模型的标签dom中的标签通过鼠标拖拽至目标dom中并形成节点，并可以进行自由拖拽在目标dom范围内，具体地，先确定选中内容的开始节点和结束节点及在开始节点和结束节点内的偏移量，再将开始节点内相应偏移量个字符之后、结束节点相应偏移量个字符之前作为加标签的起止点，并加上标签节点。

本实施例中，确定待插入的目标节点，计算插入点在目标节点内的偏移量的步骤包括：

获取插入点在目标节点内的上边距和左边距。

利用上边距和左边距，及目标dom内每行字符的高度和宽度，计算将目标dom内插入点所在行及其之前的行按顺序置于同一行时，目标dom的起始点到插入点的距离，从目标dom的起始点开始，依次累加每个字符的宽度，当宽度和达到上述距离时，当前字符索引即为插入点在目标dom内的偏移量。

本实施例中，使用html5全局draggable属性，为每一个可拖拽的标签添加上draggable:true此属性。

另外，本实施例中，根据第二操作指令将页面第二侧栏的元素拖拽至标签模块所在位置，为标签模块赋值，形成新页面的步骤包括：

将与页面第二侧栏的元素对应的服务器id号的数据源保存在用户端浏览器内。

本实施例在根据第二操作指令将页面第二侧栏的元素拖拽至标签模块所在位置，为标签模块赋值，形成新页面的步骤之前包括：

将服务器内的数据都赋予对应的id号，每个id号与页面第二侧栏的元素一一对应。

本实施例中，当鼠标点击可拖拽的可赋值数据的标签的时候，获取初始标签坐标，然后计算移动的坐标距离，当鼠标放开的时候，首先判断目标dom范围内，如果没有，则不再进行任何操作，如果有的话，再判断鼠标松开的位置是否在目标dom范围内有没有被选中的节点，如果没有，则不再进行任何操作，若有的话，再判断该数据的类型参数是否与选中节点能接受的类型参数一致或包含，如果可以，则成功赋值，如果不可以，则提示该数据无法为选中节点所使用。

本实施例中，为用户端的服务器中只要数据是从数据库里带出来的都会有对应的id标识符，如果数据是经过处理的，那么为处理后的数据添加上唯一标识id号，id号通过服务端通过接口在页面获取到，并分配给每一个标签，使每一个标签都有对应服务器端数据的唯一标识id号，如此，在鼠标点击的同时，获取id号，在松开的时候，如果满足一切要求，就可以通过id号去用户端的服务器中去获取数据，并赋值给页面中心被选中的模型的数据源，使模型能够使用用户端服务器的数据，并实时连接。

步骤s30，对新页面进行处理，形成新项目包，并将新项目包压缩上传至服务器的指定路径，由服务器对新项目包进行解压安装。

具体地，如图3所示，对新页面进行处理，形成新项目包，并将新项目包压缩上传至服务器的指定路径，由服务器对新项目包进行解压安装的步骤包括：

步骤s301，调用本地服务器，将新项目包作为参数导入。

步骤s302，创建文件输出流，再通过管道方法将输出流存档到文件，创建压缩的文件路径。

步骤s303，通过downloadjs下载到本地，再通过ftp上传至远端服务器，由服务器定时扫描指定路径，通过dos命令解压压缩包，通过npm指令安装依赖与打包，将打包后的dist文件夹放入项目路径中，删除指定路径内的所有文件与文件夹。

具体地，本实施例将整体项目作为参数传入本地服务器，本地服务器通过传入参数首先创建路径，构建vue项目(包含html，css等)，router(路由)，项目重构，项目压缩，功能主要是通过nodejs模块中的fs模块(fs模块用于对系统文件及目录进行读写操作)与path模块(path模块提供了一些用于处理文件路径的工具)，创建文件输出流，再通过管道方法将输出流存档到文件，创建压缩的文件路径，最终用户端接受到传回的数据再通过downloadjs模块下载到本地之后，通过ftp定时上传文件功能将压缩包上传至远端服务器的指定路径。

本实施例中，项目压缩后，进行上传远程服务器指定路径，在指定路径解压后，依靠指令安装依赖并自动打包，将打包文件移动至服务器项目路径。具体地，主要包括：

安装winrar软件，默认路径：c:\programfiles\winrar，目的是为了在cmd命令下能够应用winrar软件，完成后再cmd命令下可以直接使用rar命令。

安装nodejs，主要是为了安装node的包管理器，主要是通过cmd的dos命令来实现对zip的解压缩。

确定服务器开机启动时自动运行bat文件，里面设置时间段对指定路径进行查看，自动连接ftp，使用rar指令解压指定路径的压缩包，使用npm指令对解压后的文件进行依赖包的安装，并对整体项目进行打包等，将dist文件夹移动至项目路径，将指定路径的其余文件删除。用户需要重新登录系统，查看新页面。

本实施例中，对新页面进行处理，形成新项目包的步骤之前还可以包括：

步骤s200，在接收到预览新页面的指令时，预先展示赋值后的标签模块。

具体地，如图4所示，本实施例中，在接收到预览新页面的指令时，预先展示赋值后的标签模块的步骤包括：

步骤s2001，得到页面缓存数据，并逐一渲染至新页面。

步骤s2002，根据服务器id号，在服务器中找到对应的数据，并赋值。

步骤s2003，预先展示赋值后的标签模块。

本实施例中，当用户端点击预览的时候，通过路由跳转，跳转至新页面，之前的每一步操作会被保存进vuex中，当开始进入预览页面的时候，开始读取vuex中的数据，并根据样式和各个节点距离原点坐标的距离开始重新渲染页面，再由ast(ast是abstractsyntaxtree的简称，vue使用html的parser将html模板解析为ast，并且对ast进行一些优化的标记处理，提取最大的静态树，方便virtualdom时直接跳过diff。)生成vue的render函数(渲染函数)，渲染函数结合数据生成virtualdom树，经过计算后生成新的ui。

以下对本发明基于页面拖拽的数据信息化处理方法作进一步的详细阐述。

本发明考虑到如今制造企业的数据智能信息化还是存在一定弊端的，为了解决以上问题，本发明提供由用户自己创造页面与功能的基于页面拖拽的数据信息化处理方法，该方法应用于基于页面拖拽的数据信息化处理方法系统，该系统采用b/s架构，该系统包括：页面分为三部分，左右两侧可以实现元素拖拽功能，拖拽左侧标签根据标签名称形成对应的模块(如导航栏，菜单栏，表格，折线图，视频，图片等)，获取服务器数据，通过id唯一标识符将数据与页面中右侧标签进行绑定，拖拽右面标签进入页面正中已经生成的模块中，模块可以实时获得数据，并可以撤销恢复自己之前的操作，也可以删除自己拖拽过来的模块，还可以对自己设计的页面进行预览，在页面正中可以随意移动模块，也可以改变其样式(长宽，颜色等)，确认后获取页面中各个元素的位置信息，样式参数等，以及与数据对应的id标识符，服务器会自动打包并生成新的页面，新页面中的元素将实时获得对应id的数据。

本发明中提供的元素拖拽，样式修改，数据赋值都可以由用户端自行操作，如果由用户端操作，那么，将少去需求会议的讨论，用户将根据自己的需求，自己去创造想要的页面效果；并可以多次修改，直至达到满意效果为止。如果中间有其他需求，开发人员再基于此基础上进行修改，最终将成为非常贴合该制造企业本身的系统，比起通过在敏捷开发平台通过二次开发实现的系统效果，本发明更加具有针对性，简洁性与时效性。

系统中的页面也可以在服务器端直接修改，与敏捷开发平台相同(也可接受用户端的需求进行针对性的开发)，并实时展示给用户，用户可以实时体验到开发效果，并同时进行直接修改或者实时提出自己的意见，让开发人员进行修复和改进，大大节省了双方开发等待消耗的时间，实时沟通，也避免了可能由于开发人员业务逻辑理解错误而导致的开发方向偏移等问题。

同样，用户如果以后新增了站点或者分支或者觉得系统冗余，也可以在已完成的系统上，自定义添加新的页面或修改旧的页面或删除旧的页面或对某一个页面进行局部修改，不再需要开发人员前来重新开发新的页面或者维护修复等。

其中，数据赋值操作中，还包括将页面元素中数据请求的数据保存在用户端的浏览器缓存内，在之后的任意时长的预设时间段内获取的相同数据会被缓存直接输出，而不需要再经过目标服务器端返回结果，由于页面架构采用数据驱动，数据源不变的局部模块，也会保持不变，无需重新渲染，如此，即减轻了服务器端的压力，又加快了处理速度。

本发明中，网页页面元素的拖拽形成对应模块的方法，其中对于页面中模块的定位操作包括：根据网页中心位置的左上角为坐标原点确定坐标系；首先计算生成之前已确定的模块在该坐标系内的位置；当用户端鼠标左键点击左右侧的标签时，获得对应的坐标，以及其被赋予的默认样式与属性，在进行拖拽时，若未拖进页面中心范围则不做处理，如果计算坐标位置已在页面中心范围内，则将默认的样式与属性显示在鼠标松开左键后的位置处。

本发明中，网页拖拽形成的模块被数据赋值的方法，其中对于数据赋值的操作包括：将每一个服务器内的数据都赋予对应的id号，并将id号对应页面右侧的每一个标签，当拖拽页面右侧的标签进入到页面模块时，则将此模块中数据源指向对应id号的服务器的数据源，如此便可以获取当前数据源的数据并实时获取。

本发明中，网页形成对应页面后预览页面的方法，其中对于预览的操作包括：获取已确定的模块的坐标定位以及自身的样式、属性与数据源id号，此时以浏览器的可见区域的左上角为坐标原点，计算出每一个模块对应的位置与样式，之后根据对应id号获取服务器中对应的数据源，并展示给用户端进行观看。

本发明中，拖拽形成模块之后还可以进行撤销操作或者恢复操作，其中对于撤销与恢复的操作包括：记录每一笔拖拽成功形成模块的记录，判断如果有对应的记录，就可以执行撤销操作，如果没有对应的数据就不能执行撤销操作，当连续操作超过一定次数之后，会将第一个执行的操作删除，次数可以由用户端或者服务器端进行设置，或者不设置，恢复操作会记录每一笔撤销操作的记录，如果之前有撤销记录，就可以恢复，如果没有，就不可以撤销。撤销或者恢复之后，都会将之前记录的数据删除一个。

本发明中，页面形成模块之后还可以对模块进行位置调整和更改样式，其中对于位置调整与更改样式的操作包括：首先判断页面中磨快有没有被选中，如果被选中，就获取此模块在当前body可视区域的x，y坐标，定为初始坐标，同时为此模块添加mousemove的事件并触发，一旦移动便可实时获取移动时坐标系，减去初始坐标便是该模块移动的距离，更改样式，同样需要先选中目标模块，在左侧点击设置属性，可以获取当前模块的基础样式值(宽，高，距离顶部的高度，距离左侧的宽度，透明度，边框，圆角等)，当改变左侧设置内任意样式属性的值时，通过数据双向绑定，模块的样式将立马发生改变，对样式进行更改。

本发明中，服务器自动打包形成新的页面，其中对于形成新的页面与服务器自动打包的操作包括：在左侧新增页面框，可以点击新增页面，之后需要输入新增页面的名称与路径，确定之后，左侧会添加一个新的页面，并初始化页面中心内容，用户端可以在上面进行前述的拖拽等操作并形成页面，这个页面内容将会被记录下来，关于服务器自动打包，首先在个人计算机上会开启一个小型本地服务器，在此服务器上，会对需要打包的数据进行处理，形成路由，html，css等新的项目并压缩成zip类型的压缩包，然后上传至远端服务器，远端服务器接受后，自动解压zip包，通过指令进一步处理(如解压，安装必要的依赖包等)，之后将打包后的文件夹，移动至指定路径，用户端重新登录即可看到添加了新的页面的系统。

为了克服使用c/s端可用信息化展示控件少且系统更新麻烦，所以本发明使用的是b/s架构，但与敏捷开发系统不同，没有敏捷开发平台那么全面且庞杂，各个方面更加的轻量级，针对性也是更强一点，且可以允许用户直接参与开发，所以并不需要过多的开会进行研讨等，对于用户端来说，可以大大减少工时上的消耗。本发明采用页面拖拽时的方式，进行页面的构造，拖拽过去的标签元素根据其自身的特性以及鼠标移动坐标与原坐标进行计算的方式进行定位，并在鼠标指定的位置转化为特有的模型，数据同样是通过拖拽的方式，将指定id数据的标签拖拽到选中的模型内即可为其赋值，从而达到最终想要的功能或者效果。

图2显示了用户是如何通过选中左侧栏的标签进行拖拽的，当鼠标选中后，开始记录坐标原点，当时表开始移动的时候，开始记录鼠标移动的坐标距离，通过计算，得出给模型应该展示的位置，当鼠标左键松开的时候，表示为移动终止的位置，即为该模型最终应该展示的位置。

在模块展示之后，当需要为其赋值的时候，可以通过拖拽右侧通过id号与服务端绑定的数据标签，将其拖拽到对应的选中的模型内，即可为其赋值上服务器端对应的id号的数据，当模型获取到这笔数据的同时，会判断这笔数据适不适用于该模型，如果数据内部的属性类型显示不适用，那么拖拽出来的数据将不能为该模型进行赋值，成功赋值之后，如果显示适用，那么模型内的数据将会和服务器端的数据进行连接并展示出来。图2还显示了用户端是如何拖拽右侧的数据标签为其赋值的，并展示了数据标签拖拽成功后，整体样式随着数据而发生改变。

上述的预览，如图3所示，当点击预览的时候，将会对页面进行重新的渲染，页面中所有的模型，将会按照原有的坐标体系还原在浏览器可视化界面上，这也是系统更新之后页面会显示的样子，所以，用户端可以在此时先体验到最终会生成的效果，这种实时性，可以大大提高用户端的体验，并且用户端也可以自行参与设计，在设计的同时进行业务逻辑的讲述，服务端则可以更直观的感受用户端的业务逻辑流程，可以做到一步一个脚印。做出针对性强的，真正贴合该制造企业的生产管理系统。

图4展示的是，当用户觉得页面已经设计完成，点击项目打包上传的按钮，首先，该页面会在本地服务器的处理下，形成一个新的项目包并被压缩成一个zip文件，之后会将该zip文件上传至远端服务器的指定路径，远端服务器定时(如每5分钟)对指定路径进行查看处理，查看指定路径有无zip压缩包文件，如果发现压缩包，会自动对其解压，解压完成后，通过git指令对其安装需要的依赖包，安装完成之后，再使用git指令对项目进行进一步打包，并替换线上的打包文件，之后，指定路径会对里面的内容进行清除。用户端重新登录就可以看到新的页面。

本发明还包括针对页面数据的缓存处理，将的页面元素中数据请求的数据保存在用户端的浏览器缓存内，在之后的任意时长的预设时间段内获取的相同数据会被缓存直接输出，而不需要再经过目标服务器端返回结果，由于页面架构采用数据驱动，数据源不变的局部模块，也会保持不变，无需重新渲染，这里的技术可以由以下技术实现：

good-storage插件，为vue本地缓存插件，可自定义储存一些类似样式，id号等数据，在页面跳转时进行赋值。

keep-alive组件，对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个dom元素

强缓存(200fromcache),浏览器判断本地缓存未过期的话，就直接使用，不会发起http请求

协商缓存(304)，浏览器会向服务器发送请求，然后服务端告诉浏览器文件未改变，让浏览器使用缓存里的数据。

本发明基于页面拖拽的数据信息化处理方法通过上述技术方案，在检测到用户拖拽页面第一侧栏的元素的第一操作指令时，根据第一操作指令将页面第一侧栏的元素拖拽至页面中间指定位置，形成标签模块；在检测到用户拖拽页面第二侧栏的元素的第二操作指令时，根据第二操作指令将页面第二侧栏的元素拖拽至标签模块所在位置，为标签模块赋值，形成新页面，其中，页面第二侧栏的每个元素与服务器对应id号的数据源相关联；对新页面进行处理，形成新项目包，并将新项目包压缩上传至服务器的指定路径，由服务器对新项目包进行解压安装，提升了数据智能信息化处理的灵活性和数据处理效率。

为实现上述目的，本发明还提出一种基于页面拖拽的数据信息化处理系统，所述系统包括存储器、处理器，以及存在在所述处理器上的基于页面拖拽的数据信息化处理程序，所述基于页面拖拽的数据信息化处理程序被所述处理器调用时执行如上所述的方法的步骤，这里不再赘述。

为实现上述目的，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有基于页面拖拽的数据信息化处理程序，所述基于页面拖拽的数据信息化处理程序被处理器运行时执行如上所述的方法的步骤，这里不再赘述。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是在本发明的构思下，利用本发明说明书及附图内容所作的等效结构变换，或直接/间接运用在其他相关的技术领域均包括在本发明的专利保护范围内。