# 甘特图封装 **Repository Path**: wangyigang/gantt-chart-encapsulation ## Basic Information - **Project Name**: 甘特图封装 - **Description**: 甘特图封装 - **Primary Language**: Unknown - **License**: GPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 49 - **Forks**: 0 - **Created**: 2021-09-27 - **Last Updated**: 2025-06-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # wyg-gantt # 简介 甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关Markdown Oper Preview to the Side系随着时间进展的情况。 # 本插件基于wl-gantt技术支持，如有侵权请联系 邮箱704429524@qq.com ![展示页面](https://images.gitee.com/uploads/images/2021/0927/141751_f0d6e796_6556802.jpeg "tu.jpg") #### 已支持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 wyg-gantt --save` 或 `npm i wyg-gantt -S` `import wygGantt from "wyg-gantt/src/pages/wl-gantt" ` ` components:{wygGantt},` ### 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 | [文档地址](https://element.eleme.cn/#/zh-CN/component/table) | - | - | - | - | | 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 | [文档地址](https://element.eleme.cn/#/zh-CN/component/table) | - | - | | 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 | ### 这里是重点！！！！！！# wyg-gantt # 简介 甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关Markdown Oper Preview to the Side系随着时间进展的情况。 # 本插件基于wl-gantt技术支持，如有侵权请联系 邮箱704429524@qq.com ![展示页面](https://images.gitee.com/uploads/images/2021/0927/141751_f0d6e796_6556802.jpeg "tu.jpg") #### 已支持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 wyg-gantt --save` 或 `npm i wyg-gantt -S` `import wygGantt from "wyg-gantt/src/pages/wl-gantt" ` ` components:{wygGantt},` ### 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 | [文档地址](https://element.eleme.cn/#/zh-CN/component/table) | - | - | - | - | | 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 | [文档地址](https://element.eleme.cn/#/zh-CN/component/table) | - | - | | 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"}], } ]