1.0.0 • Published 7 months ago

mzgantt_tecjt v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
7 months ago

敏卓甘特图（MZGantt）插件

MZGantt是一款纯js开发的甘特图插件。

一. 插件特征

  • 拖拽编辑：支持拖拽编辑

  • 列自定义：支持自定义任务属性列

  • 多段展示：支持任务行内多段展示

  • 支持日历：支持自定义日历

  • 样式可调：支持显示样式自定义

  • 使用简单：js直接引用或者通过npm安装使用
  • 参数配置：提供丰富配置参数和接口满足项目需求

二. 演示

演示地址：https://mzgantt.tecjt.com

三. 如何使用?

MZGantt支持js引用和npm安装两种使用方式。

  1. 下载 使用之前，需要下载js插件或使用npm进行安装（点击联系我们获取）。

  2. 引用MZGantt插件 在html页面头部中引入如下js包：

    • 普通js引用:
    <!-- 引入jquery库 -->
<script language="javascript" src="jquery.min.js"></script>

<!-- 引入甘特图插件 -->
<link rel="stylesheet" type="text/css" href="./gantt/mzgantt.css" />
<script language="javascript" src="./gantt/mzgantt.js"></script>
    • npm引用:
    <!-- 引入jquery库 -->
<script language="javascript" src="jquery.min.js"></script>

<!-- 引入甘特图插件 -->
<link rel="stylesheet" type="text/css" href="./gantt/mzgantt.css" />
<script language="javascript" src="./gantt/mzgantt.js"></script>

  3. 定义甘特图容器(div) 在html页面内定义一个div，作为展示甘特图的容器：

    <div id="GanttChartDIV" style="width:100%;"></div>

  4. 创建甘特图对象

    • 普通js引用时: 在页面js中创建甘特图对象。
    /*
创建甘特图对象
	参数1：容器div对象id
	参数2：视图类型
*/
MZGantt.createGantt("GanttChartDIV", "day");
    • npm引用时:
    // 导入MZGantt包
import {_MZGantt} from './gantt_npm';

// 创建甘特图对象
// ** 生成路径编辑对象(参数：配置参数值)
let MZGantt = _MZGantt();
// 创建甘特图对象
MZGantt.createGantt("GanttChartDIV", "day");

  5. 甘特图参数配置 此步骤可选。在需要个性化显示甘特图时，可以通过设置甘特图参数来实现。部分可设置参数如下：

    var ganttConfig = {
	useFor: "Task", // 设置甘特图用途，资源利用（比如会议室管理）：'Resource', 任务管理（比如计划和进度管理）：'Task'。默认:Task
	showTrack: 0, // 0:计划甘特图；1:实绩甘特图 。默认：计划甘特图。
	showCheckbox: 1,// 是否显示 复选框 列 (0/1)  默认0：不显示
	showIcon: 1,// 是否显示 图标 列 (0/1)  默认0：不显示
	showResouce: 0,	// 是否显示 资源/负责人 列 (0/1) ,默认1：显示
	showDuration: 1,// 是否显示 工期 列(0/1),默认1：显示
	showPctComp: 1,	// 是否显示 完成百分比 % 列(0/1),默认1：显示
	showStartDate: 1,// 是否显示 计划开始日期 列(0/1),默认1：显示
	showEndDate: 1,	// 是否显示 计划完成日期 列(0/1),默认1：显示
	showRsltStartDate: 0,// 是否显示 实际开始日期 列(0/1),默认1：显示
	showRsltEndDate: 0,	// 是否显示 实际完成日期 列(0/1),默认1：显示
	showDuplicate: 0,// 是否显示 资源重叠分配标志
	includeHoliday: 'N',// 工日计算是否包含假期和周末：Y: 包含；N:不包含
	includeToTime: "Y",	// 甘特图完成时间是否包含最后一个时间点（开始和完成时间为日期类型时设置为包含，小时的话设置为不包含），默认Y
	lazyLoad:0,	// 是否懒加载（0:正常加载；1:懒加载；其他：超过该数值自动懒加载；大量任务加载时，可以打开此开关）
	//callbackAfterLoad: callbackTest,//加载后回调函数
	bulkCustColIdx:[1,2],// 允许批量设置的自定义列索引号

	tagColumnList: [
		{"title":"下拉框列1","width":80,"align":"left","data":taskTypeList},
		{"title":"下拉框列2","width":80,"align":"left","disabled":true,"data":tag2List},
		{"title":"下拉框列3","width":80,"align":"left","disabled":true,"data":tag2List}], //添加自定义tag列，指定每列[列名称，列宽度，对齐方式等]

	//添加自定义列，指定每列[列名称，列宽度，对齐方式]，
	// showSeq用于控制自定义列在画面中的显示顺序，dataSeq标识自定义列的值与显示顺序的对应关系，两者都是使用从1开始的整数排序，不可跳数,为必须属性。
	// callbackTaskWin: 任务编辑弹框中自定义列点击回调函数
	// callbackGrid: 甘特图grid中自定义列点击回调函数
	custColumnList: [
		{
			"showSeq": 3,
			"dataSeq": 1,
			"title": "列名1",
			"width": 50,
			"align": "left",
			"multiline": "true",
			"disabled": "true",
			"callbackTaskWin": setCustColVal,
			"callback1Name": "编辑备注",
			"callbackGrid": callbackTest
		}, {
			"showSeq": 1,
			"dataSeq": 2,
			"title": "列名2",
			"width": 100,
			"align": "left"
		}, {
			"showSeq": 2,
			"dataSeq": 3,
			"title": "列名3",
			"width": 150,
			"align": "left"
		}
	],
	showDependencies: 1,// 是否显示 连接线(0/1),默认：0不显示。设置为0，则调用ganttObj.drawDependArrow()函数画依赖线也是无用的；反之，需要画出依赖线时，需要先设置该参数为1。

	captionType: 'Caption',	// 设置甘特图标题(None,Caption,Resource,Duration,Complete,Reserver)  None:不显示标题
	captionPosition: 'Right',// 设置甘特图标题显示位置（Over:甘特图条上方；Right:甘特图条右侧，默认Over)

	// 显示日期格式和输入日期格式应该统一
	dateFormat: 'yyyy-mm-dd',// 设置参数日期格式 ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd','yyyy/mm/dd')
	weekStartDay: 0,// 设置星期第一日（1：星期一开始；0：星期天开始），默认：0

	//startEndDate: ['2014-6-18','2019-9-26'], 	// 指定项目起止日期。状态ganttStatus为p时，不指定则自动以当日进行设置。
	holidayList: ['2023-07-18','2023-07-19','2023-07-20'],// 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
	workdayList: ['2023-07-02'], // 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
	resourceList: [
		{"value":"1","name":"郭富城"},
		{"value":"2","name":"黎明"},
		{"value":"3","name":"刘德华"},
		{"value":"4","name":"张学友"}],
	iconList: [
		{value:'red.png',text:''},
		{value:'blue.png',text:''},
		{value:'yellow.png',text:''},
		{value:'green.png',text:''},
		{value:'purple.png',text:''}],

	workingHourRange: ['1','23'],// 设置hour格式下的每天的工作时段。(以小时为单位)。默认: 1,23。
	showChgDur: "0",// 是否显示拖拽变更工日选项。0：不显示，1：显示。默认：1：显示。
	dragChgDur: "1",// 设置拖拽变更工日,如果showChgDur设置为不显示，则该选项的设置无效。
	autoCalDur: 1,// 设置自动计算工日（默认不自动计算）

	fixColsCnt:3,// 设置锁定列数, 默认:0(不锁定列)
	durPrecision:2,	// 设置工期和工日精度（默认小数后一位）
	leftSideWidthFix:86,// 设置锁定区域宽度（用来调整拖动杆微调距离，该值越大，光标越向右超过拖动杆）
	showDayDate: "date",// 设置day格式时，显示星期或者日期（day:星期；date:日期）。默认:day显示星期。
	showWeekIndex: "",	// 设置day格式时，右侧首行显示第几周或者显示周第一个日期。Y：显示周数，其他，显示日期。默认显示日期。
	hourFormat: 0,// 设置hour格式（0:小时后不加:00；1:小时后加:00）。默认:0显示星期.
	// planBackground: vPlanBackground, // 设置甘特图计划条背景
	// resultBackground: vResultBackground,// 设置甘特图实绩条背景
	compBackground: '#0000FF',// 设置完成度背景
	// groupBackground: '#00FF00',// 设置父任务行背景
	weekendHolidayBackColor: '#E6E6E6', // 设置休息日/假期背景
	currentTimeBackColor: ['h','#FF9797'],// 设置当前时间背景(参数1：h: 通过设置表头样式显示当前时间; c: 通过设置内容单元格样式显示当前时间。参数2：颜色值)
	intervalColor: ['#FFFFFF','#F4F4F4'],// 设置隔行背景颜色, 默认: #FFFFFF,#F4F4F4
	selectedRowColor: '#CAE1FF',// 设置选中行背景颜色, 默认: #CAE1FF
	borderColor: '#9E9E9E',	// 设置甘特图边框颜色, 默认: #9E9E9E
	barBorderRadius: 6,	// 设置甘特图条圆角半径, 默认: 3px
	barBorderWeight: 1,	// 设置甘特图条边框粗细, 默认: 1px
	barBorderColor: '#9E0000',// 设置甘特图条边框颜色, 默认: #9E9E9E
	leftSideWidth: 300,	// 设置左侧框宽度, 默认:300px
	contentHeight: 500,	// 设置甘特图高度（不含表头）, 默认:300px.
	rowHeight: 35,	// 设置行高度, 默认:35px

	ganttStatus: 'e',// 设置甘特图状态:
					//   p: Plan（初次排计划，该状态时需要指定项目起止日期，但不需要绑定数据），
					//   e:编辑计划（不能指定项目起止日期，可以拖动编辑或者添加删除任务）,
					//   a：输入实绩（只能输入实绩），
					//   r：只读
	iconColWidth: 30,// 设置图标列宽度，默认:60px
	nameTitle: '任务名称',// 设置任务/资源列标题, 默认:任务名称
	nameColWidth: 150,// 设置任务/资源列宽度，默认:150px
	dateColWidth: 100,// 设置日期列宽度，默认:80px
	hourColWidth: 20,
	dayColWidth: 20,
	monthColWidth: 200,
	quarterColWidth: 100,
	accessKey: '???'// 使用key（需购买）
};

// 甘特图参数配置
MZGantt.config(ganttConfig);

  6. 绑定数据/显示甘特图

    /*
  甘特图数据对象项目说明：
	id					// 节点编号（必须）
	iconColsVal			// 图标列(可以是用逗号隔开的多个图标）
	tagColsVal			// 自定义Tag列的值，需要与列配置函数setTagColumnList()指定列一一对应。
	name				// 任务名称（必须）
	plan				// 计划
	rsltStart			// 实际开始
	rsltEnd				// 实际完成
	rsltDur				// 实际工日
	custColsVal			// 自定义列的值，需要与自定义列配置一一对应。
	planBarColor		// 甘特图计划背景
	isMS				// 是否里程碑
	resId				// 资源/负责人
	pctComp				// 完成度（0 ~ 100 百分比)
	isGroup				// 是否设置为父（组）1：组/0：子节点
	parentId			// 父节点编号
	isExpand			// 是否展开显示 1:展开/0:收缩
	preNodes			// 前置节点，多个前置节点时，使用逗号分开
	caption				// 标题
	seq					// 排序号
*/

// 甘特图数据
let ganttData= [
	{
		"id": 1,
		"seq": 1000,
		"iconColsVal": [],
		"tagColsVal": [],
		"name": "单位A施工期间",
		"plan": [{}],
		"rsltStart": "",
		"rsltEnd": "",
		"rsltDur": 1,
		"custColsVal": ["", "2", "3"],
		"planBarColor": "",
		"isMS": 0,
		"resId": "1",
		"pctComp": 0,
		"isGroup": 1,
		"parentId": "",
		"isExpand": 1,
		"preNodes": "",
		"caption": "重点关注"
	}, {
		"id": 11,
		"seq": 2000,
		"iconColsVal": [{
				"src": "./images/stop.png",
				"title": "停止"
			}
		],
		"tagColsVal": [],
		"name": "任务名称1",
		"plan": [{
				"start": "",
				"end": "",
				"dur": "2"
			}
		],
		"rsltStart": "2023-07-02",
		"rsltEnd": "2023-07-06",
		"rsltDur": 1,
		"custColsVal": ["aa"],
		"planBarColor": "#2EFE9A",
		"isMS": 0,
		"resId": "2",
		"pctComp": 50,
		"isGroup": 0,
		"parentId": 1,
		"isExpand": 1,
		"preNodes": "",
		"caption": ""
	}, {
		"id": 12,
		"seq": 3000,
		"iconColsVal": [],
		"tagColsVal": ["00", "00"],
		"name": "任务名称2",
		"plan": [{
				"start": "2023-07-06",
				"end": "2023-07-10"
			}
		],
		"rsltStart": "2023-07-07",
		"rsltEnd": "2023-07-10",
		"rsltDur": 1,
		"custColsVal": ["aa", "bb"],
		"planBarColor": "#2EFE9A",
		"isMS": 0,
		"resId": "2",
		"pctComp": 10,
		"isGroup": 0,
		"parentId": 1,
		"isExpand": 1,
		"preNodes": "",
		"caption": "备注1"
	}, {
		"id": 13,
		"seq": 4000,
		"iconColsVal": [{
				"src": "./images/star.png",
				"title": "星级"
			}
		],
		"tagColsVal": [],
		"name": "任务名称3",
		"plan": [{
				"start": "2023-07-11",
				"end": "2023-07-15"
			}
		],
		"rsltStart": "2023-07-11",
		"rsltEnd": "2023-07-14",
		"rsltDur": 1,
		"custColsVal": ["aa", "bb"],
		"planBarColor": "#2EFE9A",
		"isMS": 0,
		"resId": "2",
		"pctComp": 20,
		"isGroup": 0,
		"parentId": 1,
		"isExpand": 1,
		"preNodes": 12,
		"caption": ""
	}, {
		"id": 14,
		"seq": 5000,
		"iconColsVal": [],
		"tagColsVal": [],
		"name": "任务名称4",
		"plan": [{
				"start": "",
				"end": "2023-07-17"
			}
		],
		"rsltStart": "2023-07-16",
		"rsltEnd": "2023-07-17",
		"rsltDur": 1,
		"custColsVal": ["aa", "<img src='./images/cross.png'><img src='./images/cross.png'>"],
		"planBarColor": vPlanBackground,
		"isMS": 0,
		"resId": "2",
		"pctComp": 0,
		"isGroup": 0,
		"parentId": 1,
		"isExpand": 1,
		"preNodes": "",
		"caption": ""
	},
	{
		"id": 2,
		"seq": 6000,
		"iconColsVal": [],
		"tagColsVal": [],
		"name": "单位B施工期间",
		"plan": [{}
		],
		"rsltStart": "",
		"rsltEnd": "",
		"rsltDur": 1,
		"custColsVal": ["", ""],
		"planBarColor": "",
		"isMS": 0,
		"resId": "1",
		"pctComp": 0,
		"isGroup": 1,
		"parentId": "",
		"isExpand": 1,
		"preNodes": "",
		"caption": ""
	}, {
		"id": 21,
		"seq": 7000,
		"iconColsVal": [{
				"src": "./images/stop.png",
				"title": "停止"
			}
		],
		"tagColsVal": [],
		"name": "任务名称1",
		"plan": [{
				"start": "2023-07-19",
				"end": "2023-07-29"
			}
		],
		"rsltStart": "2023-07-26",
		"rsltEnd": "2023-07-29",
		"rsltDur": 1,
		"custColsVal": ["aa", "bb"],
		"planBarColor": vPlanBackground,
		"isMS": 0,
		"resId": "2",
		"pctComp": 40,
		"isGroup": 0,
		"parentId": 2,
		"isExpand": 1,
		"preNodes": "",
		"caption": ""
	},
	......
];

// 绑定数据
MZGantt.bindGanttData(ganttData);

// 显示甘特图
MZGantt.drawGantt();

四. 任务添加和编辑弹框

MZGantt插件提供任务数据模型（task Model)，您可在项目中以弹框或者其他输入方式，收集用户输入信息，作成模型数据，然后调用插件接口进行任务的添加和编辑操作。

数据项说明
id编号
name名称
isGroup是否组任务（父任务）
iconColsVal图像对象(src, title)数组
tagColsValtag列值数组。
custColsValval数组
resId资源编号
resName资源名称
plan计划对象，包含(start,end,dur属性
rsltStart实际开始时间
rsltEnd实际完成时间
pctComp完成度
rsltDur实际投入
planBarColor甘特图条颜色（计划）
preNodes前置节点
parentId父任务编号
caption标题
isMS是否里程碑

五. 高级功能

MZGantt支持更多高级功能，如多语言包支持，日历支持等。

六. 联系方式

  1. 手机：1369 5047 200 (王先生)
  2. 微信：
@everything-registry/sub-chunk-2240
1.0.0

7 months ago