❤
npm
Sign UpSign In

geek-ganttnew

1.3.0 • Public • Published

gantt

简介

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关Markdown Oper Preview to the Side系随着时间进展的情况。

展示页面

已支持el-table参数及事件列表

    :fit="fit"
    :size="size"
    :border="border"
    :data="selfData"
    :stripe="stripe"
    :height="height"
    :row-key="rowKey"
    :row-style="rowStyle"
    :class="dateTypeClass"
    :cell-style="cellStyle"
    :max-height="maxHeight"
    :tree-props="selfProps"
    :current-row-key="rowKey"
    :row-class-name="rowClassName"
    :cell-class-name="cellClassName"
    :expand-row-keys="expandRowKeys"
    :header-row-style="headerRowStyle"
    :header-cell-style="headerCellStyle"
    :default-expand-all="defaultExpandAll"
    :header-row-class-name="headerRowClassName"
    :highlight-current-row="highlightCurrentRow"
    :header-cell-class-name="headerCellClassName"
    :currentPage="pages.currentPage"
    :pageSizes="pages.pageSizes"
    :pageSize="pages.pageSize"
    :total="pages.total"
    
    :colorArr='colorArr'
    :colorLower='colorLower'
    :bgOne='bg_one'
    :bgTwo="bg_two"
    :bgThree="bg_three"
    :bgFour="bg_four"
    :bgLower="bg_lower"

    @header-contextmenu="handleHeaderContextMenu"
    @selection-change="handleSelectionChange"
    @row-contextmenu="handleRowContextMenu"
    @current-change="handleCurrentChange"
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseLeave"
    @expand-change="handleExpandChange"
    @filter-change="handleFilterChange"
    @cell-dblclick="handleCellDbClick"
    @header-click="handleHeaderClick"
    @row-dblclick="handleRowDbClick"
    @sort-change="handleSortChange"
    @cell-click="handleCellClick"
    @select-all="handleSelectAll"
    @row-click="handleRowClick"
    @select="handleSelect"
    @rowClick="rowClick"
    @current-change-page="currentChange"

快速上手

npm i llz-gantt --save

或

npm i llz-gantt -S

import llzGantt from "llz-gantt/src/pages/wl-gantt" components:{llzGantt},

Attributes 参数

序号 参数 说明 类型 可选值 默认值 注意
1 data 数据 Array - [] -
2 dateType gantt图区日期表头类型 String monthAndDay、yearAndMonth、yearAndDay yearAndMonth -
3 treeProps 树表配置项 Object - - 见下方props
4 startDate 项目开始时间 String、Object 必填 - 注意：不要求任务时间线在项目开始时间内，并且当任务时间超出项目时间时，将更新项目时间
5 endDate 项目结束时间 String、Object 必填 - 注意：不要求任务时间线在项目开始时间内，并且当任务时间超出项目时间时，将更新项目时间
6 checkSource 是否检查源数据符合规则 Boolean - - 检查源数据为自动修改不符合规范的时间为符合规则的期望值
7 treatIdAsIdentityId 是否使用id来作为自增id Boolean - false 如果是请保证id本来就简短的数字型而不是较长的字符串或guid
8 autoGanttDateType 自动调整gantt时间跨度类型，具体规则见版本记录1 Boolean - true -
9 nameFormatter 名称列格式化内容函数 Function - - Function(row, column, cellValue, index)
10 其他Table Attributes 文档地址 - - - -
11 usePreColumn 是否使用内置前置任务列 Boolean - false -
12 preMultiple 前置任务是否可以多选 Boolean - true 如果开启多选则pre字段必须是Array，否则可以是Number\String
13 preFormatter 前置内容列格式化函数 Function - - 如不传则根据prop name字段+，拼接
14 emptyCellText 空值单元格占位符 String - '-' -
15 useCheckColumn 是否使用内置复选框列 Boolean - false -
16 useIndexColumn 是否使用内置序号列 Boolean - false -
17 edit 是否可编辑 Boolean - true -
18 parentChild 使用复选框时，是否父子关联 Boolean - true 必须配置props的id、children字段
19 ganttOnly 是否只显示图形 Boolean - false -
20 lazy 同el-table Boolean - false -
21 load 同el-table Function - - -
22 contextMenuOptions 右键浮窗配置项，如果存在则点击gantt右键显示配置的浮窗信息 Array - - 数组内对象属性有：* @param {String} label 展示名称 * @param {String} prop 绑定的字段 * @param {String} icon 可选 字体图标class
23 useRealTime 是否使用实际开始时间、实际结束时间，开启则在计划时间蓝色条外展示实际时间棕红色条 Boolean - false -
24 color 项目开始时间颜色 String - blue -
25 realColor 时间开发时间颜色 String - pick -
26 otherColor 其他时间颜色 String - black -
27 alreadyColor 真实开发时间颜色 String - green -
28 currentPage 状态布局 String - center -
29 pageSizes 每页显示个数选择器的选项设置 Array - [10, 20, 30, 50, 100] -
30 pageSize 每页显示条目个数 Number - 10 -
31 total 总条目数 Number - 0 -

新版支持双行无限极+无限极颜色自定义

| 1 | colorArr | 上面无限极颜色定义 | Array | - | ['红色','绿色','黄色','黑色','粉红色','橙黄色','紫色'] | - |
| 2 | colorLower | 下面无限极TAB显隐颜色 | Array | - | ['红色'] | - |
| 3 | bgOne | 第一条第一种颜色自定义 | String | - | 'yellow' | | 4 | bgTwo | 第一条第二种颜色自定义 | String | - | 'yellow' | | 5 | bgThree | 第一条第三种颜色自定义 | String | - | 'yellow' | | 6 | bgFour | 第一条第四种颜色自定义 | String | - | 'yellow' | | 7 | bgFive | 第一条第五种颜色自定义 | String | - | 'yellow' | | 8 | bgSix | 第一条第六种颜色自定义 | String | - | 'yellow' | | 9 | bgSeven | 第一条第七种颜色自定义 | String | - | 'yellow' | | 10 | bgLower | 第二条颜色自定义 | String | - | 'yellow' |

|

props 配置项

序号 参数 说明 默认值
1 children 数据的子集children字段,表示为树表 children
2 name 用于显示名字的字段 name
3 id 每条数据的id，必须唯一 id
4 pid 每条数据的父节点id字段 pid
5 startDate 每条数据的开始时间字段 startDate
6 endDate 每条数据的结束时间字段 endDate
7 identityId 数据自增id identityId
8 parents 自增父级id树，逗号分隔 parents
9 pre 前置任务字段，字段值应是前置任务的id pre
10 hasChildren 指定哪些行是包含子节点 hasChildren
11 realStartDate 实际开始时间字段 realEndDate
12 realEndDate 实际结束时间字段 realEndDate

Events 事件

序号 事件名 说明 回调参数
1 timeChange 当任务时间发生更改时触发 function(row) 依次为当前行数据
2 其他Table Events 文档地址 -
3 preChange 前置任务修改事件 function(row) 依次为当前行数据
4 nameChange 名称修改事件 function(row) 依次为当前行数据
5 taskAdd 添加任务事件 function(row) 依次为当前行数据
6 taskRemove 删除任务事件 function(row) 依次为当前行数据
7 rowClick 右键点击事件 function(row) 依次为当前行数据
8 current-change-page currentPage 改变时会触发 function(row) 当前页
9 size-change currentPage 改变时会触发 function(row) 每页条数

Methods 方法

序号 方法名 说明 回调参数
1 loadTree 手动调用树表懒加载 function(row) 依次为要展开的行信息
2 loadTreeAdd 更新树表懒加载后的子节点 function(id, list) 依次为要更新的节点id，要添加的子节点list，注意此为合并list和原来的子节点数据
3 loadTreeRemove 移除懒加载数据的子节点 function(id, list) 依次为要更新的节点id，要删掉的子字节的rowKey

这里是重点！！！！！！# llz-gantt

简介

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关Markdown Oper Preview to the Side系随着时间进展的情况。

展示页面

已支持el-table参数及事件列表

    :fit="fit"
    :size="size"
    :border="border"
    :data="selfData"
    :stripe="stripe"
    :height="height"
    :row-key="rowKey"
    :row-style="rowStyle"
    :class="dateTypeClass"
    :cell-style="cellStyle"
    :max-height="maxHeight"
    :tree-props="selfProps"
    :current-row-key="rowKey"
    :row-class-name="rowClassName"
    :cell-class-name="cellClassName"
    :expand-row-keys="expandRowKeys"
    :header-row-style="headerRowStyle"
    :header-cell-style="headerCellStyle"
    :default-expand-all="defaultExpandAll"
    :header-row-class-name="headerRowClassName"
    :highlight-current-row="highlightCurrentRow"
    :header-cell-class-name="headerCellClassName"
    :currentPage="pages.currentPage"
    :pageSizes="pages.pageSizes"
    :pageSize="pages.pageSize"
    :total="pages.total"
    
    :colorArr='colorArr'
    :colorLower='colorLower'
    :bgOne='bg_one'
    :bgTwo="bg_two"
    :bgThree="bg_three"
    :bgFour="bg_four"
    :bgLower="bg_lower"

    @header-contextmenu="handleHeaderContextMenu"
    @selection-change="handleSelectionChange"
    @row-contextmenu="handleRowContextMenu"
    @current-change="handleCurrentChange"
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseLeave"
    @expand-change="handleExpandChange"
    @filter-change="handleFilterChange"
    @cell-dblclick="handleCellDbClick"
    @header-click="handleHeaderClick"
    @row-dblclick="handleRowDbClick"
    @sort-change="handleSortChange"
    @cell-click="handleCellClick"
    @select-all="handleSelectAll"
    @row-click="handleRowClick"
    @select="handleSelect"
    @rowClick="rowClick"
    @current-change-page="currentChange"

快速上手

npm i llz-gantt --save

或

npm i llz-gantt -S

import llzGantt from "llz-gantt/src/pages/wl-gantt" components:{llzGantt},

Attributes 参数

序号 参数 说明 类型 可选值 默认值 注意
1 data 数据 Array - [] -
2 dateType gantt图区日期表头类型 String monthAndDay、yearAndMonth、yearAndDay yearAndMonth -
3 treeProps 树表配置项 Object - - 见下方props
4 startDate 项目开始时间 String、Object 必填 - 注意：不要求任务时间线在项目开始时间内，并且当任务时间超出项目时间时，将更新项目时间
5 endDate 项目结束时间 String、Object 必填 - 注意：不要求任务时间线在项目开始时间内，并且当任务时间超出项目时间时，将更新项目时间
6 checkSource 是否检查源数据符合规则 Boolean - - 检查源数据为自动修改不符合规范的时间为符合规则的期望值
7 treatIdAsIdentityId 是否使用id来作为自增id Boolean - false 如果是请保证id本来就简短的数字型而不是较长的字符串或guid
8 autoGanttDateType 自动调整gantt时间跨度类型，具体规则见版本记录1 Boolean - true -
9 nameFormatter 名称列格式化内容函数 Function - - Function(row, column, cellValue, index)
10 其他Table Attributes 文档地址 - - - -
11 usePreColumn 是否使用内置前置任务列 Boolean - false -
12 preMultiple 前置任务是否可以多选 Boolean - true 如果开启多选则pre字段必须是Array，否则可以是Number\String
13 preFormatter 前置内容列格式化函数 Function - - 如不传则根据prop name字段+，拼接
14 emptyCellText 空值单元格占位符 String - '-' -
15 useCheckColumn 是否使用内置复选框列 Boolean - false -
16 useIndexColumn 是否使用内置序号列 Boolean - false -
17 edit 是否可编辑 Boolean - true -
18 parentChild 使用复选框时，是否父子关联 Boolean - true 必须配置props的id、children字段
19 ganttOnly 是否只显示图形 Boolean - false -
20 lazy 同el-table Boolean - false -
21 load 同el-table Function - - -
22 contextMenuOptions 右键浮窗配置项，如果存在则点击gantt右键显示配置的浮窗信息 Array - - 数组内对象属性有：* @param {String} label 展示名称 * @param {String} prop 绑定的字段 * @param {String} icon 可选 字体图标class
23 useRealTime 是否使用实际开始时间、实际结束时间，开启则在计划时间蓝色条外展示实际时间棕红色条 Boolean - false -
24 color 项目开始时间颜色 String - blue -
25 realColor 时间开发时间颜色 String - pick -
26 otherColor 其他时间颜色 String - black -
27 alreadyColor 真实开发时间颜色 String - green -
28 currentPage 状态布局 String - center -
29 pageSizes 每页显示个数选择器的选项设置 Array - [10, 20, 30, 50, 100] -
30 pageSize 每页显示条目个数 Number - 10 -
31 total 总条目数 Number - 0 -

|

props 配置项

序号 参数 说明 默认值
1 children 数据的子集children字段,表示为树表 children
2 name 用于显示名字的字段 name
3 id 每条数据的id，必须唯一 id
4 pid 每条数据的父节点id字段 pid
5 startDate 每条数据的开始时间字段 startDate
6 endDate 每条数据的结束时间字段 endDate
7 identityId 数据自增id identityId
8 parents 自增父级id树，逗号分隔 parents
9 pre 前置任务字段，字段值应是前置任务的id pre
10 hasChildren 指定哪些行是包含子节点 hasChildren
11 realStartDate 实际开始时间字段 realEndDate
12 realEndDate 实际结束时间字段 realEndDate

Events 事件

序号 事件名 说明 回调参数
1 timeChange 当任务时间发生更改时触发 function(row) 依次为当前行数据
2 其他Table Events 文档地址 -
3 preChange 前置任务修改事件 function(row) 依次为当前行数据
4 nameChange 名称修改事件 function(row) 依次为当前行数据
5 taskAdd 添加任务事件 function(row) 依次为当前行数据
6 taskRemove 删除任务事件 function(row) 依次为当前行数据
7 rowClick 右键点击事件 function(row) 依次为当前行数据
8 current-change-page currentPage 改变时会触发 function(row) 当前页
9 size-change currentPage 改变时会触发 function(row) 每页条数

Methods 方法

序号 方法名 说明 回调参数
1 loadTree 手动调用树表懒加载 function(row) 依次为要展开的行信息
2 loadTreeAdd 更新树表懒加载后的子节点 function(id, list) 依次为要更新的节点id，要添加的子节点list，注意此为合并list和原来的子节点数据
3 loadTreeRemove 移除懒加载数据的子节点 function(id, list) 依次为要更新的节点id，要删掉的子字节的rowKey

这里是重点！！！！！！ 最新版的修改参数。 双栏无限极展示，颜色自定义

序号 方法名 说明
1 bgOne 颜色自定义 rgba()
2 bgTwo 颜色自定义 rgba()
3 bgThree 颜色自定义 rgba()
4 bgFour 颜色自定义 rgba()
5 bg_lower 颜色自定义 rgba()

这里是重点！！！！！！ 最新版的修改参数。 双栏无限极展示，data参数配置

序号 方法名 说明
1 topinfinite Array[] 上层无限极
2 infiniteBetween Array[] 下层无限极
3 topinfiniteStart String '' 上层无限极开始，
4 topinfiniteEnd String '' 上层无限极结束，
5 infiniteStart String '' 下层无限极开始
6 infiniteEnd String '' 下层无限极结束

下面是data JSON示例

data: [ { id: "1", pid: "0", name: "旅行", topinfinite:[ { topinfiniteStart:"2021-01-28", topinfiniteEnd:"2021-01-29", bg:"bgOne"}, { topinfiniteStart:"2021-02-06",topinfiniteEnd:"2021-02-10", bg:"bgTwo" } ], infiniteBetween:[ {infiniteStart:'2021-02-01',infiniteEnd:'2021-02-01', bg:"bgOne"}, {infiniteStart:'2021-02-08',infiniteEnd:'2021-02-10', bg:"bgTwo"}, {infiniteStart:'2021-02-12',infiniteEnd:'2021-02-15', bg:"bgThree"}, {infiniteStart:'2021-02-20',infiniteEnd:'2021-02-25', bg:"bgTwo"}], } ]

Readme

Keywords

Package Sidebar

Install

npm i geek-ganttnew

Repository

gitee.com/wangyigang/gantt-chart-encapsulation.git

Weekly Downloads

61

Version

1.3.0

License

ISC

Unpacked Size

1.5 MB

Total Files

352

Last publish

Collaborators

  • geek649114390
Try on RunKit
Report malware