一种基于Vue开发的ERP项目可视化组件GanttView制造技术

本发明专利技术公开了一种基于Vue开发的ERP项目可视化组件GanttView，设计中加入计划时间与实际时间的对照，每个任务分连续的两部分，甘特图中用两种不同颜色进行表示，上下对照可以清楚显示具体任务的完成情况。时间粒度可以具体查看到天。发明专利技术可以广泛应用于ERP等项目中，组件安装使用方法为：在vscode编译器中的项目中输入以下命令：npm install

【技术实现步骤摘要】
一种基于Vue开发的ERP项目可视化组件GanttView


[0001]本专利技术属于前端开发领域，一种基于Vue开发的可视化组件GanttView。该组件可以广泛应用于ERP等项目中。

技术介绍

[0002]数据可视化是顺应大数据时代而兴起。随着计算机相关技术的发展和趋势，数据可视化无疑是最活跃而又最关键的领域之一。数据作为信息的载体在当今世界发挥着越来越重要的作用，我们正处在一个信息爆炸的时代，每天都会产生大量的数据。在这样的背景下，海量数据只有被合理的采集、分析和表达才可有一定的意义，而数据可视化无疑是让数据变得易于理解的最优途径。
[0003]可视化技术中的“可视”可以看见，更多的是指“可理解”使得繁杂抽象的数据变得具体易懂，以便于传播，交流和研究。可视化技术就是把数据变成图像展示，更多的是注重技术的实现和算法的优化。其设计到计算机图形图像学，计算机仿真学等各个领域，可以说可视化技术是数据可视化的基础。
[0004]信息可视化主要研究对象是大规模的非数值型信息，即非结构化的数据集。信息可视化的产物要通过人的感官传递到大脑，然后使人理解信息。因此，信息可视化对技术的要求更高。它主要涉及的是计算机图形学以外的人机交互以及商业领域，也是数据可视化的一个部分。基于在工业、工程等方面数据的可视化是非常必要的，专利技术一种基于Vue开发的可视化组件GanttView，可以广泛应用于ERP系统中，实现项目工程信息的可视化。

技术实现思路

[0005]本专利技术的目的在于提供一种能快速、准确地“可视”项目进度的工具，即一种基于Vue开发的可视化组件GanttView。使用该工具所需要的软件包括vscode。
[0006]本专利技术包括下列步骤：
[0007]安装vue
‑
cli3并创建一个项目
[0008][0009]创建项目
[0010][0011]关于vue的组件库目录结构见说明书附图文件图1.
[0012]将src重命名为examples,并添加packages目录,用来存放自定义组件.但是cli默认会启动src下的服务。如果目录名变了,需要手动修改配置,vue
‑
cli3中提供自定义打包配置项目的文件,需要手动创建vue.config.js即可.我们具体修改如下:
[0013][0014]首先修改入口文件地址为examples下的main.js,其次将packages加入打包编译任务中.
[0015]2.编写组件
[0016]首先在packages目录下新建一个Button目录，然后src里的index.vue存放组件的源代码：
[0017][0018][0019][0020][0021][0022][0023][0024][0025][0026]在Button的index.js里编写如下代码来作为vue的组件安装：
[0027][0028]Button的组件结构见说明书附图文件图2.
[0029]接下来在packages的入口文件index.js中导入组件并安装导出
[0030][0031][0032]3.测试代码
[0033]我们要想看到自己写的组件效果，可以将组件导入到examples目录下的main.js中，其本质就是一个项目的开发目录，我们只需要按照如下方式导入即可：
[0034][0035]这种方式是全局导入，至于按需导入，完全可以采用element的方式来配置，对于业务组件来说，一般项目中都是使用的到，所以全局导入比较合适，作为UI库来说，按需导入可能更适合。
[0036]接下来就可以在项目中使用此组件了：
[0037][0038][0039]运行效果见说明书附图文件图3.
[0040]4.配置package.json文件
[0041]作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json,我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下,代码如下:
[0042][0043]我们的lib脚本就是用来打包packages的组件代码到lib目录下,文件名为以
‑‑
name指定的名称前缀开头,我们执行脚本会输出类似如下代码见说明书附图文件图4.
[0044]5.发布到npm
[0045][0046]之后便可以通过如下方式使用组件:
[0047]附图说明
[0048]图1是vue的组件库目录结构示意图。
[0049]图2是Button组件结构示意图。
[0050]图3是测试组件效果示意图。
[0051]图4执行脚本输出类代码示意图。
具体实施方式
[0052]在vscode编译器中的项目中输入以下命令：
[0053][0054]编译器会自动安装GanttView组件。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Vue开发的ERP项目可视化组件GanttView，其特征在于：基于Vue开发的可视化组件GanttView可以深度契合ERP项目中，普适性强，组件使用javascript语言开发，在VScode编译器中进行调试安装，和现有可视化组件相比有如下优势:此组件轻便、美观、功能强大且实用性专业性强，在拖拽，拉伸，修改进度等操作时，可以对数据进行实时更新，是在操作...

【专利技术属性】
技术研发人员：申振，刘元宁，朱晓冬，董立言，李双双，
申请(专利权)人：吉林大学，
类型：发明
国别省市：