GanttChart_old.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. import moment from 'moment';
  2. /**
  3. * 数据定义区域
  4. *
  5. */
  6. /**
  7. * 甘特图
  8. * @param {} options
  9. */
  10. export function GanttChart(options) {
  11. // 任务列表
  12. this.tasks = options.tasks || [];
  13. // AntVG Canvas
  14. this.gCanvas = null;
  15. // 视口宽度 800,可视区域
  16. this.viewWidth = options['viewWidth'] || 800;
  17. // 物理画布宽度 800
  18. this.cWidth = options['cWidth'] || 2400;
  19. this.cHeight = options['cHeight'] || 600;
  20. // 画布偏移位置
  21. this.startPos = 0;
  22. // 是否拖动中
  23. this.draging = false;
  24. // 开始拖动事件
  25. this.startEvent = null;
  26. // 结束拖动事件
  27. this.endEvent = null;
  28. // 拖动过程事件
  29. this.dragingEvent = null;
  30. // 拖动偏移量
  31. this.offsetDis = options['viewWidth'] || 800;
  32. // 拖动定时器
  33. this.dragTimer = null;
  34. // 每天的间隔宽度
  35. this.dayStep = 40;
  36. // 分组标题高度
  37. this.groupTitleHeight = 38;
  38. // 任务矩形高度
  39. this.taskRowHeight = 16;
  40. // 每行任务的纵向间距
  41. this.rowSpanDis = 22;
  42. // 总天数
  43. this.daysCount = options['daysCount'] || 60;
  44. // 任务图距离顶部高度
  45. this.graphTopDis = 20
  46. // 每像素代表的小时数
  47. this.timePerPix = this.cWidth/this.daysCount/24/3600
  48. // 当前视图开始时间,向前推N天
  49. this.startAt = moment().subtract(this.daysCount / 3, 'days');
  50. this.endAt = moment(this.startAt).add(this.daysCount, 'days');
  51. this.graphDiv = document.getElementById(options['chartContainer']);
  52. // 图形容器组
  53. this.graphGroup = null;
  54. // 上一次拖动的事件
  55. this.lastDragEv = null;
  56. // 回调事件
  57. this.callback = options.callback || null;
  58. }
  59. /**
  60. * 设置数据
  61. * @param {*} _tasks
  62. */
  63. GanttChart.prototype.changeTasks = function(_tasks){
  64. this.tasks = _tasks
  65. }
  66. /**
  67. * 打开关闭分组
  68. */
  69. GanttChart.prototype.toggle = function(index) {
  70. if (this.tasks[index].open) {
  71. this.tasks[index].open = false;
  72. } else {
  73. this.tasks[index].open = true;
  74. }
  75. this.processData();
  76. this.drawTasks();
  77. }
  78. /**
  79. * 预处理数据
  80. */
  81. GanttChart.prototype.processData = function() {
  82. for (let i = 0; i < this.tasks.length; i++) {
  83. let currentTopTask = this.tasks[i];
  84. let lastTopTask = null;
  85. currentTopTask.renderOptions = {};
  86. if (i != 0) {
  87. // 非0个,要补上前面的数据
  88. lastTopTask = this.tasks[i - 1];
  89. currentTopTask.renderOptions.startY = lastTopTask.renderOptions.endY + 20;
  90. } else {
  91. // 第一个
  92. currentTopTask.renderOptions.startY = this.graphTopDis;
  93. }
  94. if (currentTopTask.open) {
  95. currentTopTask.renderOptions.endY =
  96. currentTopTask.renderOptions.startY + this.rowSpanDis + this.groupTitleHeight + currentTopTask.dataList.length * this.taskRowHeight;
  97. } else {
  98. currentTopTask.renderOptions.endY = currentTopTask.renderOptions.startY + this.groupTitleHeight;
  99. }
  100. }
  101. }
  102. /**
  103. * 强制清空图像,重绘
  104. */
  105. GanttChart.prototype.forceRefreshGraph = function() {
  106. this.tasks.forEach((topTask) => {
  107. topTask.gGroup = null;
  108. });
  109. this.gCanvas.destroy();
  110. this.initDrawingReady();
  111. }
  112. /**
  113. * 准备绘制,用于初始化和强制刷新
  114. */
  115. GanttChart.prototype.initDrawingReady = function() {
  116. this.initCanvas();
  117. this.initDragHandler();
  118. this.drawTimeZone();
  119. this.processData();
  120. this.drawTasks();
  121. this.graphGroup = null
  122. }
  123. /**
  124. * 翻页
  125. */
  126. GanttChart.prototype.pageTo = function(dir = 'next') {
  127. if (dir == 'next') {
  128. // 向后翻页`
  129. this.startAt = this.startAt.add(this.daysCount, 'days');
  130. this.offsetDis = 0
  131. } else {
  132. // 向前翻页
  133. this.startAt = this.startAt.subtract(this.daysCount, 'days');
  134. this.offsetDis = 2*this.viewWidth
  135. }
  136. this.endAt = moment(this.startAt).add(this.daysCount, 'days');
  137. console.log('已翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'), this.offsetDis);
  138. // offsetDis = viewWidth;
  139. this.forceRefreshGraph();
  140. }
  141. // 上次点击时间,用于滚动时误触停止
  142. let lastClickAt = null;
  143. /**
  144. * 执行拖动
  145. * 改变graphDiv 滚动距离
  146. * 到达边界距离后,刷新页面
  147. */
  148. GanttChart.prototype.doDrag = function(sEvent, eEvent) {
  149. if (sEvent == null) {
  150. sEvent = this.startEvent;
  151. }
  152. let sPos = sEvent.clientX;
  153. let cPos = eEvent.clientX;
  154. // 滚动距离
  155. let dis = cPos - sPos;
  156. let tempDis = this.offsetDis
  157. // console.log('offsetDis before:', this.offsetDis, dis)
  158. this.offsetDis = this.offsetDis - dis / 2;
  159. // console.log('draging...',tempDis, this.offsetDis, dis)
  160. if (this.offsetDis <= -20) {
  161. // 向前滑动,向前翻页
  162. console.log('此处应该向前翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'),this.offsetDis);
  163. this.offsetDis = this.viewWidth;
  164. this.pageTo('prev');
  165. }
  166. if (this.offsetDis - 20 >= 2964 ){ //cWidth - viewWidth) {
  167. // 向后滑动,向后翻页
  168. console.log('此处应该向后翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'),this.offsetDis);
  169. this.offsetDis = this.viewWidth;
  170. this.pageTo('next');
  171. }
  172. this.graphDiv.scrollLeft = this.offsetDis;
  173. }
  174. /**
  175. * 初始化抓取拖动事件
  176. */
  177. GanttChart.prototype.initDragHandler = function() {
  178. this.graphDiv.scrollLeft = this.offsetDis;
  179. let _canvas = document.querySelector('#ganttContainer>canvas');
  180. _canvas.addEventListener('mousedown', (ev) => {
  181. this.draging = true;
  182. this.startEvent = ev;
  183. this.dragingEvent = null;
  184. this.endEvent = null;
  185. this.lastClickAt = new Date();
  186. this.lastClickAt = ev;
  187. this.lastDragEv = ev;
  188. });
  189. _canvas.addEventListener('mouseup', (ev) => {
  190. this.draging = false;
  191. this.endEvent = ev;
  192. });
  193. _canvas.addEventListener('mousemove', (ev) => {
  194. // console.log('this over', this)
  195. if (this.draging) {
  196. if (new Date() - this.lastClickAt < 20) {
  197. return false;
  198. }
  199. this.dragingEvent = ev;
  200. this.doDrag(this.lastDragEv, ev);
  201. this.lastDragEv = ev;
  202. }
  203. });
  204. _canvas.addEventListener('mouseleave', (ev) => {
  205. console.log('leave...恢复')
  206. this.draging = false;
  207. this.endEvent = ev;
  208. });
  209. }
  210. /**
  211. * 初始化画布
  212. *
  213. */
  214. GanttChart.prototype.initCanvas = function() {
  215. this.gCanvas = new G.Canvas({
  216. container: 'ganttContainer',
  217. width: this.cWidth,
  218. height: 800,
  219. });
  220. }
  221. /**
  222. * 绘制时间区域
  223. */
  224. GanttChart.prototype.drawTimeZone = function() {
  225. console.log('时间段', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
  226. let start = moment(this.startAt);
  227. let timeGroup = this.gCanvas.addGroup();
  228. timeGroup._tname = 'TimeGroup';
  229. // 绘制第一级
  230. timeGroup.addShape('text', {
  231. attrs: {
  232. x: 20,
  233. y: 20,
  234. fontSize: 12,
  235. text: start.format('YYYY-MM'),
  236. lineDash: [10, 10],
  237. fill: '#8D9399',
  238. },
  239. });
  240. timeGroup.addShape('text', {
  241. attrs: {
  242. x: 20 + this.viewWidth,
  243. y: 20,
  244. fontSize: 12,
  245. text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
  246. lineDash: [10, 10],
  247. fill: '#8D9399',
  248. },
  249. });
  250. timeGroup.addShape('text', {
  251. attrs: {
  252. x: 20 + this.viewWidth * 2,
  253. y: 20,
  254. fontSize: 12,
  255. text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
  256. lineDash: [10, 10],
  257. fill: '#8D9399',
  258. },
  259. });
  260. let startSecond = moment(this.startAt);
  261. // 绘制第二级
  262. for (let i = 0; i < this.daysCount; i++) {
  263. let timeText = startSecond.add(1, 'days').format('DD');
  264. timeGroup.addShape('text', {
  265. attrs: {
  266. x: 40 * i,
  267. y: 40,
  268. fontSize: 10,
  269. text: timeText,
  270. lineDash: [10, 10],
  271. fill: '#8D9399',
  272. },
  273. });
  274. }
  275. }
  276. /**
  277. * 处理点击
  278. */
  279. GanttChart.prototype.handleClick = function(task, flag, ev) {
  280. // let detailDiv = document.getElementById('detailDiv')
  281. if(flag == 'enter'){
  282. // detailDiv.style.display = 'block'
  283. // detailDiv.style.left = ev.clientX+'px';
  284. // detailDiv.style.top = ev.clientY+'px';
  285. // document.getElementById('detailTaskName').textContent = task._pdata.description
  286. // document.getElementById('detailTaskStatus').textContent = task._pdata.status
  287. // document.getElementById('detailTaskStartDate').textContent = task._pdata.startDate
  288. // document.getElementById('detailTaskEndDate').textContent = task._pdata.endDate
  289. console.log('show:', task);
  290. } else if (flag === 'leave'){
  291. // detailDiv.style.display = 'none'
  292. console.log('hide:', task);
  293. } else {
  294. this.callback(task);
  295. console.log('click:', task);
  296. }
  297. }
  298. /**
  299. * 根据任务状态区分颜色
  300. *
  301. */
  302. GanttChart.prototype.statusColor =function(task) {
  303. switch (task.status) {
  304. case '按时完成':
  305. return 'aqua';
  306. break;
  307. case '计划批准':
  308. return '#ff9800';
  309. break;
  310. case '已完成':
  311. return '#19b720';
  312. break;
  313. default:
  314. break;
  315. }
  316. }
  317. /**
  318. * 判断任务是否在视图内
  319. *
  320. */
  321. GanttChart.prototype.isInView = function(task) {
  322. let isLessThanEndAt = (task.endDate <= this.startAt.format('YYYY-MM-DD'))
  323. let isGreaterThanStartAt = task.startDate >= this.endAt.format('YYYY-MM-DD')
  324. return !(isLessThanEndAt || isGreaterThanStartAt)
  325. }
  326. /**
  327. * 分组绘制任务块
  328. *
  329. */
  330. GanttChart.prototype.drawTasks = function() {
  331. if (this.graphGroup) {
  332. this.graphGroup.clear();
  333. } else {
  334. this.graphGroup = this.gCanvas.addGroup();
  335. this.graphGroup._tname = 'graphGroup';
  336. }
  337. // 第一层循环,用于分组,例如,维保--xxxx
  338. this.tasks.forEach((topTask, topIndex) => {
  339. if (topTask.open) {
  340. let taskGroup = null;
  341. taskGroup = this.graphGroup.addGroup();
  342. taskGroup._tname = 'TaskGroup_' + topTask.id;
  343. topTask.gGroup = taskGroup;
  344. // 第二层循环,用于 区分具体多少任务,例如,维保-商管1/商管2...
  345. topTask.dataList.forEach((taskP, index) => {
  346. let taskPGroup = taskGroup.addGroup();
  347. taskGroup.addGroup(taskPGroup);
  348. // 第三层循环,用户区分每个子任务的执行时间段,例如:维保-商管1-2020.05-2020.06 / 2020.08- 2020.09
  349. taskP.tasks.forEach((_taskItem, _index) => {
  350. let _isInView = this.isInView(_taskItem)
  351. // 在视图中才显示
  352. if(_isInView){
  353. let pos = this.calRectPos(_taskItem);
  354. // console.log('render rect:', _taskItem, pos, topTask.renderOptions.startY + index * taskRowHeight);
  355. let rectEl = taskPGroup.addShape('rect', {
  356. attrs: {
  357. x: pos.x,
  358. y: topTask.renderOptions.startY + (index* (this.taskRowHeight + this.rowSpanDis)),
  359. width: pos.width,
  360. height: this.taskRowHeight,
  361. fill: this.statusColor(_taskItem),
  362. stroke: 'black',
  363. radius: [2, 4],
  364. },
  365. });
  366. rectEl._pdata = _taskItem;
  367. rectEl.on('mouseover', (ev) => {
  368. this.handleClick(ev.target, 'enter', ev);
  369. });
  370. rectEl.on('mouseleave', (ev) => {
  371. this.handleClick(ev.target, 'leave', ev);
  372. });
  373. rectEl.on('click', (ev) => {
  374. this.handleClick(ev.target, 'click', ev);
  375. });
  376. }
  377. });
  378. });
  379. taskGroup.show();
  380. } else {
  381. if (topTask.gGroup) {
  382. // topTask.gGroup.hide()
  383. topTask.gGroup = null;
  384. }
  385. }
  386. });
  387. }
  388. /**
  389. * 根据 Task 计算矩形位置
  390. *
  391. */
  392. GanttChart.prototype.calRectPos = function(taskItem) {
  393. let duraStartAt = new Date(taskItem.startDate) - new Date(this.startAt.format('YYYY-MM-DD'));
  394. let secondsStartAt = duraStartAt/1000
  395. let duraEndAt = new Date(taskItem.endDate) - new Date(taskItem.startDate);
  396. let secondsEndAt = duraEndAt/1000
  397. return {
  398. x: secondsStartAt * this.timePerPix,
  399. y: 0,
  400. width: secondsEndAt * this.timePerPix,
  401. height: 0,
  402. };
  403. }
  404. /**
  405. * 主函数
  406. *
  407. */
  408. GanttChart.prototype.main = function() {
  409. this.initDrawingReady();
  410. }