甘特图在Vue中的应用篇 |
您所在的位置:网站首页 › 手机的发展史简单介绍说明文 › 甘特图在Vue中的应用篇 |
注意:该插件只能在有外网上运行,内网不行,坑、坑、坑,重要的事情说三遍。
1、首先安装插件,由于官网上一些功能是收费的,所以我在github上发现一款还不错的插件,并有文档说明(全英) npm i gantt-schedule-timeline-calendar附上文档地址:https://gantt-schedule-timeline-calendar.neuronet.io/documentation/getting-started Git项目地址:https://github.com/neuronetio/gantt-schedule-timeline-calendar#weekendhighlight-plugin 官方vue实例:https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar 具体的Demo案例:https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar-example 2、vue做甘特图,先大致介绍下核心功能: (1)横轴、纵轴拖拽; (2)自定义监听点击事件(双击、右键等) (3)任务之间显示父子层级关系; (4)左侧列表信息,右侧时间轴表示任务; (5)每个任务可以订制样式,并且可以动态修改样式; (6)自定义时间粒度显示(小时、天、星期、月、年); (7)支持大批量数据渲染; (8) 支持同行多节点渲染; (9)支持选中,以及批量选中; (9)优秀的扩展性,支持第三方插件。 等等还有其他的一些功能。这里先看一下效果图: 接下来会介绍用什么实现的,怎么使用,怎么添加拖拽、点击等各种功能,我以vue为例进行开发。 基础使用已经贴代码了,不做赘述,不清楚的查看官方示例,接下来主要说核心功能如何配置,这方面官方描述的不是很清楚,但是Git的 issues 好多问题都关闭了,基本大部分问题都可以查到。 1、基础展示,左侧多列表格展示
这个主要配置config中的 list 属性, rows 代表左侧表格的行属性,key值是每行的id,多个key就有多行,通常都以数字做key值, 内部 具体属性是列信息。比如 order label line 等都是列信息,这个会一一对应到指定列。 parentID 是父节点配置,一般配置了父节点,就会在 甘特图 中展示出父子层级来。 expanded 是展开属性,默认false,父子层级是合上的,折叠隐藏子节点。如果想默认展示需要每个节点都加上这个属性。 columns 代表左侧表格的列属性,key唯一就是列关键字。 data 属性,是列,可以有多个属性,每个代表一列 id 当前列的id data 列标识,和rows中每行的数据的字段唯一对应,比如 order、line 等 isHTML 是否要展示HTML,默认false。 这个直接关系到content、html字段用哪个 width 当前列宽度 expander 是否显示层级,默认false不展示,设置为true,会展示出父子层级来,一般我们仅设置一列,当然设置多列也行。 header 配置表头内容的 content 表头想显示的内容 html 写HTML,用来订制表头样式的,内容就是HTML,行内css percent 是左侧表格总宽度占甘特图的百分比,0就直接隐藏表格 minWidth:是左侧表格的最小宽度 list: { rows: { "1": { id: "1", order: '订单1', label: "压缩机", line: '线体1', expanded: true }, "3": { id: "3", order: '订单3', label: "箱体", line: '线体3', parentId: '2', } }, columns: { data: { id: { id: "id", data: "id", width: 50, expander: true, header: { content: "序号" } }, order: { id: "order", data: "order", header: { content: "生产订单" } }, label: { id: "label", data: "label", header: { content: "描述" } } } } }2、右侧任务排列显示(包括订制样式)
这个主要配置config中的 chart 属性, time 配置时间轴 from 左侧开始时间,填写毫秒数 to 右侧结束时间,填写毫秒数 zoom 显示层级,10-22,越大,时间粒度展示的越大,越小,显示越精细,最小到5分钟 items 任务快配置,注意这个可以同行若干任务展示 id 当前任务的id rowId 左侧表格 rows 的id,通过这个关联,渲染到某一行 label 当前任务的名称,会默认展示在任务中 time 任务的开始、结束时间 start 开始时间,填写毫秒数 end 结束时间, 填写毫秒数 style 订制样式,是个对象,写过jsx写法,写过react 、vue jsx 的应该都不默认,这里举个简单的例子,订制任务div的背景色 圆角等样式 { background: 'red', borderRadius: '3px' } chart: { time: { from: new Date().getTime() - 2 * 24 * 60 * 60 * 1000, to: new Date().getTime() + 8 * 24 * 60 * 60 * 1000, zoom: 22, }, items: { "1": { id: "1", rowId: "1", label: "Item 1", time: { start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000 }, style: { // 每个块的样式 background: 'blue' } }, "21": { id: "21", rowId: "2", label: "Item 2-1", time: { start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 3 * 24 * 60 * 60 * 1000 } } } }3、配置右侧横轴的时间显示
这个主要配置config中的 locale 属性,时间的语言环境配置,这里看文档详细些,下面只详说2个属性, weekdays 配置 每周显示的文案 主要是做国际化用的 months 配置月的,也是做国际化的 locale: { name: "zh", Now: "Now", weekdays:["周日","周一","周二","周三","周四","周五","周六"], months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], }4、监听鼠标右击事件
这个主要配置config中的 actions 属性,他是对象,以下是他所有能监听dom,很多,这篇博客就只介绍人物块的事件监听,其他的不做一一赘述了 mainlistlist-columnlist-column-headerlist-column-header-resizerlist-column-header-resizer-dotslist-column-rowlist-column-row-expanderlist-column-row-expander-togglelist-togglechartchart-calendarchart-calendar-datechart-timelinechart-timeline-gridchart-timeline-grid-rowchart-timeline-grid-row-blockchart-timeline-itemschart-timeline-items-rowchart-timeline-items-row-item这个监听函数会接收2个参数,element 和 data ,一个是dom,另一个是 任务节点的数据。根据官方要求,监听函数必须返回一个对象,此对象必须包含 update destroy 2个方法,分别是位置更新和销毁时需要执行的方法。具体写法请见如下代码: actions: { 'chart-timeline-items-row-item': [this.addListenClick] // 监听右击事件 } methods:{ addListenClick(element, data) { const onClick = (e) => { e.preventDefault() // console.log(data) this.modal = { visible: true, title: data.item.label, data } return false } element.addEventListener('contextmenu', onClick); return { update(element, newData) { data = newData; }, destroy(element, data) { element.removeEventListener('click', onClick); } }; }, closeModal() { this.modal = { visible: false, title: '', data: {} } } },5、任务的横轴、纵轴拖动
这个主要配置config中的 plugins 属性, ItemMovement 插件,这个是官方开发的用来拖拽任务的插件。这个包的插件系统做的很好,官方提供了几种不错的插件,同时还支持其他的第三方插件,有兴趣的可以自己试试,这里先介绍拖拽插件, moveable 拖拽的方向, x 支持横轴拖拽; y 支持纵轴拖拽; true 横轴、纵轴都可以拖拽; false 禁止拖拽 resizeable 是否可以拖拽,true开启拖拽 resizerContent 拖拽的图标,直接写HTML,可以自己定制拖拽图标的样式 collisionDetection: 拖拽过程中是否允许元素重叠, true 不允许重叠 ghostNode false 不展示重影节点 snapStart 拖拽开始时间点回调,这个比较机制特殊,拖拽位置的时候触发这个方法,参数接收开始时间 时间变化 当前节点数据,默认是毫秒级的刷新,会卡,我们做if判断1小时拖拽 snapEnd 拖拽结束时间点回调,这个是拖动任务块大小时触发,接收结束时间 时间段。用法同上。具体请看如下代码: plugins: [ // 拖动 x 横向, y 纵向 ItemMovement({ moveable: 'x', resizerContent: '->', ghostNode: false, snapStart(time, diff, item) { if(Math.abs(diff) > 14400000) { return time + diff } return time }, snapEnd(time, diff, item) { if(Math.abs(diff) > 14400000) { return time + diff } return time } }) ]6、选中任务
这个主要配置config中的 plugins 属性, Selection插件,单个选中、批量选中插件。 grid 能否选中单元格 items 能否选中任务 rows 能否选中行 rectStyle 矩形样式 selected 选中的回调 deselected 取消选中的回调 canSelected 可选中的的回调,用来过滤哪些可以选中 canDeselected 可取消选中的回调,用来过滤哪些可以取消选中 plugins: [ Selection({ items: false, rows: false, grid: true, rectStyle: { opacity: '0.0' }, canSelect(type, currentlySelecting) { if (type === 'chart-timeline-grid-row-block') { return currentlySelecting.filter(selected => { if (!selected.row.canSelect) return false; for (const item of selected.row._internal.items) { if ( (item.time.start >= selected.time.leftGlobal && item.time.start = selected.time.leftGlobal && item.time.end |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |